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，今天就先分享到这里，后续还会分享一些技术知识。