vite4+electron桌面端視窗切換|electron25登入視窗/主視窗

#多彩夏日生活#

最近一直在整合electron和vite4.x全家桶技術開發跨端應用。今天給大家分享一下使用electron如何從登入視窗切換到主視窗。

electron結合vue3封裝多視窗，之前就有一篇分享。

electron25+vite4.x+vue3多開視窗|Electron新窗體

建立登入模闆

建立一個login.vue模闆頁面。

<template>
	<div class="vegpt__authlayout">
		<TitleBar transparent>
			<template #btn>
                <a class="btn" title="設定"><i class="iconfont ve-icon-setting"></i></a>
            </template>
		</TitleBar>
		<div class="vegpt__authwrap">
			<div class="vegpt__authwrap-form">
				<h3 class="vegpt__authwrap-slogan text-gradient">
					<img src="/vite.svg" width="50" />
					<p class="mt-10">electron-chatgpt聊天AI</p>
				</h3>
				<Form
					ref="formRef"
					:model="formObj"
					:rules="rules"
					labelWidth="60"
				>
					<FormItem label="賬号" prop="username">
						<Input v-model="formObj.username" placeholder="請輸入賬号" autocomplete="off" />
					</FormItem>
					<FormItem label="密碼" prop="password">
						<Input v-model="formObj.password" showPassword placeholder="請輸入密碼" @enter="handleSubmit" />
					</FormItem>
					<FormItem>
						<Space>
							<Button type="primary" round @click="handleSubmit">登入<i class="ve-icon-lock ve-icon--right"></i></Button>
							<Button round @click="handleReset">重置</Button>
						</Space>
					</FormItem>
				</Form>
			</div>
		</div>
	</div>
</template>           

引入之前封裝好的createWin函數，登入成功後調用該函數跳轉到主視窗。

<script setup>
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { appStore } from '@/pinia/modules/app'
	import { uuid } from '@/utils'
	import { createWin } from '@/multiwindow/actions'

	const router = useRouter()
	const appState = appStore()

	// 驗證表單
	const formRef = ref()
	const formObj = ref({
		username: '',
		password: ''
	})
	const rules = ref({
		username: [
			{ required: true, message: '請輸入賬号', trigger: 'blur' },
			{ min: 3, max: 15, message: '長度在 3 到 15 個字元', trigger: 'change' }
		],
		password: [
			{ required: true, message: '請輸入密碼', trigger: 'change' }
		]
	})
	function handleSubmit() {
		formRef.value.validate(async(valid) => {
			if(valid) {
				appState.isLogged = true
				appState.token = uuid(32)
				Message.success({
					title: '登入成功',
					onClose: () => {
						createWin({isMainWin: true})
					}
				})
			}else {
				console.log('error submit!')
				Message.danger('驗證不完整')
				return false
			}
		})
	}
	function handleReset() {
		formObj.value = {
			username: '',
			password: ''
		}
		formRef.value.resetFields()
	}
</script>           

登出

登出的時候給出提示，并調用封裝的loginWin視窗函數。

/**
 * 登入視窗
 */
 export function loginWin() {
    createWin({
        isMainWin: true,
        title: '登入',
        route: '/login',
        width: 420,
        height: 450,
        resizable: false,
        alwaysOnTop: true
    })
}           

import { loginWin } from '@/multiwindow/actions'

// 登出
const handleLogout = () => {
	MessageBox.confirm({
		content: '确定要登出嗎？',
		confirmText: '退出',
		confirmType: 'danger',
		width: 300,
		callback: action => {
			if(action == 'confirm') {
				router.replace('/login')
				appState.$reset()
				loginWin()
			}else if(action == 'cancel') {
				// ...
			}
		}
	})
}           

這樣就基本實作了從登入視窗切換至主視窗，退出後從主視窗再切換到登入視窗。

整個流程非常順暢，運作速度極快。

OK，今天就先分享到這裡，後續還會分享一些技術知識。