【优化】登录页代码逻辑、样式优化

snowy-admin-web/src/views/auth/login/callback.vue

@@ -8,7 +8,7 @@
 						<h2>三方登录</h2>
 					</div>
 					<a-spin tip="正在登录中...">
-						<div style="height: 300px">
+						<div class="h-[300px]">
 							<a-skeleton />
 						</div>
 					</a-spin>
@@ -20,7 +20,6 @@
 
 <script setup name="loginCallback">
 	import { message } from 'ant-design-vue'
-	import { nextTick } from 'vue'
 	import tool from '@/utils/tool'
 	import router from '@/router'
 	import thirdApi from '@/api/auth/thirdApi'
@@ -31,24 +30,21 @@
 
 	onMounted(() => {
 		// 获取当前url
-		const url = window.location.href
+		const url = new URL(window.location.href)
-		let parameter = url.split('?')[1]
+		let argLength = 0
-		if (!parameter) {
+		const params = {}
-			// 这个界面无参数属于非法访问，跳转到登录界面让他登录去
+		url.searchParams.forEach((value, key) => {
-			window.location.href = '/login'
+			argLength += 1
-		}
+			params[key] = value
-		const parameterArray = parameter.split('&')
+		})
 		// 当然了，不可能只有一个参数
-		if (!parameterArray) {
+		if (argLength < 2) {
 			window.location.href = '/login'
+			return
 		}
-		const parameterObject = {}
+
-		// 遍历数组，拿到json对象
-		for (let i = 0; i < parameterArray.length; i++) {
-			parameterObject[parameterArray[i].split('=')[0]] = parameterArray[i].split('=')[1]
-		}
 		thirdApi
-			.thirdCallback(parameterObject)
+			.thirdCallback(params)
 			.then((data) => {
 				tool.data.set('TOKEN', data)
 				// 获取登录的用户信息
@@ -64,11 +60,9 @@
 						path: indexMenu
 					})
 					message.success('登录成功')
-					nextTick(() => {
+					dictApi.dictTree().then((dictData) => {
-						dictApi.dictTree().then((dictData) => {
+						// 设置字典到store中
-							// 设置字典到store中
+						tool.data.set('DICT_TYPE_TREE_DATA', dictData)
-							tool.data.set('DICT_TYPE_TREE_DATA', dictData)
-						})
 					})
 				})
 			})
@@ -79,155 +73,5 @@
 </script>
 
 <style lang="less" scoped>
-	.login_background {
+	@import 'login';
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		background-size: cover;
-		background-position: center;
-		background-image: url(/img/login_background.png);
-	}
-	.login_background_front {
-		width: 450px;
-		height: 450px;
-		margin-left: 100px;
-		margin-top: 15%;
-		overflow: hidden;
-		/*position: relative;*/
-		background-size: cover;
-		background-position: center;
-		background-image: url(/img/login_background_front.png);
-		animation-name: myfirst;
-		animation-duration: 5s;
-		animation-timing-function: linear;
-		animation-delay: 1s;
-		animation-iteration-count: infinite;
-		animation-direction: alternate;
-		animation-play-state: running;
-		/* Safari and Chrome: */
-		-webkit-animation-name: myfirst;
-		-webkit-animation-duration: 5s;
-		-webkit-animation-timing-function: linear;
-		-webkit-animation-delay: 1s;
-		-webkit-animation-iteration-count: infinite;
-		-webkit-animation-direction: alternate;
-		-webkit-animation-play-state: running;
-	}
-	@keyframes myfirst {
-		0% {
-			left: 0px;
-			top: 0px;
-		}
-		50% {
-			left: 50px;
-			top: 0px;
-		}
-		100% {
-			left: 0px;
-			top: 0px;
-		}
-	}
-	@-webkit-keyframes myfirst /* Safari and Chrome */ {
-		0% {
-			left: 0px;
-			top: 0px;
-		}
-		50% {
-			left: 50px;
-			top: 0px;
-		}
-		100% {
-			left: 0px;
-			top: 0px;
-		}
-	}
-	.login_adv__title h2 {
-		font-size: 40px;
-	}
-	.login_adv__title h4 {
-		font-size: 18px;
-		margin-top: 10px;
-		font-weight: normal;
-	}
-	.login_adv__title p {
-		font-size: 14px;
-		margin-top: 10px;
-		line-height: 1.8;
-		color: rgba(255, 255, 255, 0.6);
-	}
-	.login_adv__title div {
-		margin-top: 10px;
-		display: flex;
-		align-items: center;
-	}
-	.login_adv__title div span {
-		margin-right: 15px;
-	}
-	.login_adv__title div i {
-		font-size: 40px;
-	}
-	.login_adv__title div i.add {
-		font-size: 20px;
-		color: rgba(255, 255, 255, 0.6);
-	}
-	/*background-image:linear-gradient(transparent, #000);*/
-	.login_main {
-		flex: 1;
-		overflow: auto;
-		display: flex;
-	}
-	.login-form {
-		top: 15%;
-		right: 15%;
-		position: absolute;
-		width: 450px;
-		margin-left: 10%;
-		margin-top: 20px;
-		padding: 10px 0;
-	}
-	.login-header {
-		margin-bottom: 20px;
-	}
-	.login-header .logo {
-		display: flex;
-		align-items: center;
-	}
-	.login-header .logo img {
-		width: 35px;
-		height: 35px;
-		vertical-align: bottom;
-		margin-right: 10px;
-	}
-	.login-header .logo label {
-		font-size: 24px;
-	}
-	.login-header h2 {
-		font-size: 24px;
-		font-weight: bold;
-		margin-top: 40px;
-	}
-	.login_config {
-		position: absolute;
-		top: 20px;
-		right: 20px;
-	}
-	@media (max-width: 1200px) {
-		.login-form {
-			width: 340px;
-		}
-	}
-	@media (max-width: 1000px) {
-		.login_main {
-			display: block;
-		}
-		.login_background_front {
-			display: none;
-		}
-		.login-form {
-			width: 100%;
-			padding: 20px 40px;
-			right: 0 !important;
-			top: 0 !important;
-		}
-	}
 </style>

snowy-admin-web/src/views/auth/login/login.less

@@ -0,0 +1,152 @@
+.login-icon-gray {
+  color: rgba(0, 0, 0, 0.25);
+}
+.login-validCode-img {
+  border: 1px solid var(--border-color-split);
+  cursor: pointer;
+  width: 100%;
+  height: 40px;
+}
+.login_background {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+  background-image: url(/img/login_background.png);
+}
+.login_background_front {
+  width: 450px;
+  height: 450px;
+  margin-left: 100px;
+  margin-top: 15%;
+  overflow: hidden;
+  /*position: relative;*/
+  background-size: cover;
+  background-position: center;
+  background-image: url(/img/login_background_front.png);
+  animation-name: myfirst;
+  animation-duration: 5s;
+  animation-timing-function: linear;
+  animation-delay: 1s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-play-state: running;
+}
+@keyframes myfirst {
+  0% {
+    left: 0px;
+    top: 0px;
+  }
+  50% {
+    left: 50px;
+    top: 0px;
+  }
+  100% {
+    left: 0px;
+    top: 0px;
+  }
+}
+@-webkit-keyframes myfirst /* Safari and Chrome */ {
+  0% {
+    left: 0px;
+    top: 0px;
+  }
+  50% {
+    left: 50px;
+    top: 0px;
+  }
+  100% {
+    left: 0px;
+    top: 0px;
+  }
+}
+.login_adv__title h2 {
+  font-size: 40px;
+}
+.login_adv__title h4 {
+  font-size: 18px;
+  margin-top: 10px;
+  font-weight: normal;
+}
+.login_adv__title p {
+  font-size: 14px;
+  margin-top: 10px;
+  line-height: 1.8;
+  color: rgba(255, 255, 255, 0.6);
+}
+.login_adv__title div {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}
+.login_adv__title div span {
+  margin-right: 15px;
+}
+.login_adv__title div i {
+  font-size: 40px;
+}
+.login_adv__title div i.add {
+  font-size: 20px;
+  color: rgba(255, 255, 255, 0.6);
+}
+/*background-image:linear-gradient(transparent, #000);*/
+.login_main {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+}
+.login-form {
+  top: 15%;
+  right: 15%;
+  position: absolute;
+  width: 450px;
+  margin-left: 10%;
+  margin-top: 20px;
+  padding: 10px 0;
+}
+.login-header {
+  margin-bottom: 20px;
+}
+.login-header .logo {
+  display: flex;
+  align-items: center;
+}
+.login-header .logo img {
+  width: 35px;
+  height: 35px;
+  vertical-align: bottom;
+  margin-right: 10px;
+}
+.login-header .logo label {
+  font-size: 24px;
+}
+.login-header h2 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-top: 40px;
+}
+.login_config {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+@media (max-width: 1200px) {
+  .login-form {
+    width: 340px;
+  }
+}
+@media (max-width: 1000px) {
+  .login_main {
+    display: block;
+  }
+  .login_background_front {
+    display: none;
+  }
+  .login-form {
+    width: 100%;
+    padding: 20px 40px;
+    right: 0 !important;
+    top: 0 !important;
+  }
+}

snowy-admin-web/src/views/auth/login/login.vue

@@ -33,9 +33,14 @@
 						<a-tab-pane key="userAccount" :tab="$t('login.accountPassword')">
 							<a-form ref="loginForm" :model="ruleForm" :rules="rules">
 								<a-form-item name="account">
-									<a-input v-model:value="ruleForm.account" :placeholder="$t('login.accountPlaceholder')" size="large">
+									<a-input
+										v-model:value="ruleForm.account"
+										:placeholder="$t('login.accountPlaceholder')"
+										size="large"
+										@keyup.enter="login"
+									>
 										<template #prefix>
-											<UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
+											<UserOutlined class="login-icon-gray" />
 										</template>
 									</a-input>
 								</a-form-item>
@@ -45,13 +50,14 @@
 										:placeholder="$t('login.PWPlaceholder')"
 										size="large"
 										autocomplete="off"
+										@keyup.enter="login"
 									>
 										<template #prefix>
-											<LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
+											<LockOutlined class="login-icon-gray" />
 										</template>
 									</a-input-password>
 								</a-form-item>
-								<a-form-item name="validCode" v-if="sysBaseConfig.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN === 'true'">
+								<a-form-item name="validCode" v-if="captchaOpen">
 									<a-row :gutter="8">
 										<a-col :span="17">
 											<a-input
@@ -60,16 +66,12 @@
 												size="large"
 											>
 												<template #prefix>
-													<verified-outlined style="color: rgba(0, 0, 0, 0.25)" />
+													<verified-outlined class="login-icon-gray" />
 												</template>
 											</a-input>
 										</a-col>
 										<a-col :span="7">
-											<img
+											<img :src="validCodeBase64" class="login-validCode-img" @click="loginCaptcha" />
-												:src="validCodeBase64"
-												style="border: 1px solid var(--border-color-split); cursor: pointer; width: 100%; height: 40px"
-												@click="loginCaptcha"
-											/>
 										</a-col>
 									</a-row>
 								</a-form-item>
@@ -78,7 +80,7 @@
 									<a href="/findpwd" style="color: #0d84ff">{{ $t('login.forgetPassword') }}？</a>
 								</a-form-item>
 								<a-form-item>
-									<a-button type="primary" style="width: 100%" :loading="islogin" round size="large" @click="login"
+									<a-button type="primary" class="w-full" :loading="loading" round size="large" @click="login"
 										>{{ $t('login.signIn') }}
 									</a-button>
 								</a-form-item>
@@ -102,12 +104,15 @@
 	import phoneLoginForm from './phoneLoginForm.vue'
 	import threeLogin from './threeLogin.vue'
 	import smCrypto from '@/utils/smCrypto'
+	import { required } from '@/utils/formRules'
 
 	export default {
+		name: 'Login',
 		components: {
 			phoneLoginForm,
 			threeLogin
 		},
+
 		data() {
 			return {
 				activeKey: 'userAccount',
@@ -121,10 +126,10 @@
 					autologin: false
 				},
 				rules: {
-					account: [{ required: true, message: this.$t('login.accountError'), trigger: 'blur' }],
+					account: [required(this.$t('login.accountError'), 'blur')],
-					password: [{ required: true, message: this.$t('login.PWError'), trigger: 'blur' }]
+					password: [required(this.$t('login.PWError'), 'blur')]
 				},
-				islogin: false,
+				loading: false,
 				config: {
 					lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
 					theme: this.$TOOL.data.get('APP_THEME') || 'default'
@@ -142,8 +147,8 @@
 			}
 		},
 		computed: {
-			sysBaseConfigWatch() {
+			captchaOpen() {
-				return this.$store.state.global.sysBaseConfig
+				return this.sysBaseConfig.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN === 'true'
 			}
 		},
 		watch: {
@@ -153,10 +158,6 @@
 			'config.lang': function (val) {
 				this.$i18n.locale = val
 				this.$TOOL.data.set('APP_LANG', val)
-			},
-			sysBaseConfigWatch(val) {
-				this.sysBaseConfig = val
-				this.refreshSwitch()
 			}
 		},
 		created() {
@@ -166,27 +167,16 @@
 		},
 		mounted() {
 			this.refreshSwitch()
-			// 获取回车键事件
-			document.onkeydown = (e) => {
-				if (e.defaultPrevented) {
-					return;
-				}
-				const body = document.getElementsByTagName('body')[0];
-				// match(浏览器中的地址，不需要包括https、http或者www)，是为了防止其他页面触发
-				if (e.keyCode === 13 && e.target.baseURI.match("/login") && e.target === body) {
-					this.login()
-				}
-			}
 		},
 		methods: {
 			// 通过开关加载内容
 			refreshSwitch() {
 				// 判断是否开启验证码
-				if (this.sysBaseConfig.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN === 'true') {
+				if (this.captchaOpen) {
 					// 加载验证码
 					this.loginCaptcha()
 					// 加入校验
-					this.rules.validCode = [{ required: true, message: this.$t('login.validError'), trigger: 'blur' }]
+					this.rules.validCode = [required(this.$t('login.validError'), 'blur')]
 				}
 			},
 			// 获取验证码
@@ -198,45 +188,40 @@
 			},
 			// 用户名密码登录
 			async login() {
-				const validate = await this.$refs.loginForm.validate().catch(() => {})
+				this.$refs.loginForm.validate().then(async () => {
-				if (!validate) return false
+					this.loading = true
+					const loginData = {
+						account: this.ruleForm.account,
+						// 密码进行SM2加密，传输过程中看到的只有密文，后端存储使用hash
+						password: smCrypto.doSm2Encrypt(this.ruleForm.password),
+						validCode: this.ruleForm.validCode,
+						validCodeReqNo: this.ruleForm.validCodeReqNo
+					}
+					// 获取token
+					try {
+						const loginToken = await loginApi.login(loginData)
+						this.$TOOL.data.set('TOKEN', loginToken)
+						// 获取登录的用户信息
+						const loginUser = await loginApi.getLoginUser()
+						this.$TOOL.data.set('USER_INFO', loginUser)
 
-				this.islogin = true
+						// 获取用户的菜单
-				const loginData = {
+						const menu = await userCenterApi.userLoginMenu()
-					account: this.ruleForm.account,
+						const indexMenu = menu[0].children[0].path
-					// 密码进行SM2加密，传输过程中看到的只有密文，后端存储使用hash
+						this.$TOOL.data.set('MENU', menu)
-					password: smCrypto.doSm2Encrypt(this.ruleForm.password),
+						// 重置系统默认应用
-					validCode: this.ruleForm.validCode,
+						this.$TOOL.data.set('SNOWY_MENU_MODULE_ID', menu[0].id)
-					validCodeReqNo: this.ruleForm.validCodeReqNo
+						this.$message.success('登录成功')
-				}
+						this.$router.replace({
-				// 获取token
+							path: indexMenu
-				const login = await loginApi.login(loginData).finally(() => {
+						})
-					this.islogin = false
+						dictApi.dictTree().then((data) => {
-				})
+							// 设置字典到store中
-				this.$TOOL.data.set('TOKEN', login)
+							this.$TOOL.data.set('DICT_TYPE_TREE_DATA', data)
-				// 获取登录的用户信息
+						})
-				const loginUser = await loginApi.getLoginUser()
+					} catch (err) {
-				this.$TOOL.data.set('USER_INFO', loginUser)
+						this.loading = false
-
+					}
-				// 获取用户的菜单
-				const menu = await userCenterApi.userLoginMenu().catch(() => {
-					this.islogin = false
-					return
-				})
-				this.islogin = false
-				const indexMenu = menu[0].children[0].path
-				this.$TOOL.data.set('MENU', menu)
-				// 重置系统默认应用
-				this.$TOOL.data.set('SNOWY_MENU_MODULE_ID', menu[0].id)
-				this.$router.replace({
-					path: indexMenu
-				})
-				this.$message.success('登录成功')
-				this.$nextTick(() => {
-					dictApi.dictTree().then((data) => {
-						// 设置字典到store中
-						this.$TOOL.data.set('DICT_TYPE_TREE_DATA', data)
-					})
 				})
 			},
 			configLang(key) {
@@ -246,156 +231,6 @@
 	}
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
-	.login_background {
+	@import 'login';
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		background-size: cover;
-		background-position: center;
-		background-image: url(/img/login_background.png);
-	}
-	.login_background_front {
-		width: 450px;
-		height: 450px;
-		margin-left: 100px;
-		margin-top: 15%;
-		overflow: hidden;
-		/*position: relative;*/
-		background-size: cover;
-		background-position: center;
-		background-image: url(/img/login_background_front.png);
-		animation-name: myfirst;
-		animation-duration: 5s;
-		animation-timing-function: linear;
-		animation-delay: 1s;
-		animation-iteration-count: infinite;
-		animation-direction: alternate;
-		animation-play-state: running;
-		/* Safari and Chrome: */
-		-webkit-animation-name: myfirst;
-		-webkit-animation-duration: 5s;
-		-webkit-animation-timing-function: linear;
-		-webkit-animation-delay: 1s;
-		-webkit-animation-iteration-count: infinite;
-		-webkit-animation-direction: alternate;
-		-webkit-animation-play-state: running;
-	}
-	@keyframes myfirst {
-		0% {
-			left: 0px;
-			top: 0px;
-		}
-		50% {
-			left: 50px;
-			top: 0px;
-		}
-		100% {
-			left: 0px;
-			top: 0px;
-		}
-	}
-	@-webkit-keyframes myfirst /* Safari and Chrome */ {
-		0% {
-			left: 0px;
-			top: 0px;
-		}
-		50% {
-			left: 50px;
-			top: 0px;
-		}
-		100% {
-			left: 0px;
-			top: 0px;
-		}
-	}
-	.login_adv__title h2 {
-		font-size: 40px;
-	}
-	.login_adv__title h4 {
-		font-size: 18px;
-		margin-top: 10px;
-		font-weight: normal;
-	}
-	.login_adv__title p {
-		font-size: 14px;
-		margin-top: 10px;
-		line-height: 1.8;
-		color: rgba(255, 255, 255, 0.6);
-	}
-	.login_adv__title div {
-		margin-top: 10px;
-		display: flex;
-		align-items: center;
-	}
-	.login_adv__title div span {
-		margin-right: 15px;
-	}
-	.login_adv__title div i {
-		font-size: 40px;
-	}
-	.login_adv__title div i.add {
-		font-size: 20px;
-		color: rgba(255, 255, 255, 0.6);
-	}
-	/*background-image:linear-gradient(transparent, #000);*/
-	.login_main {
-		flex: 1;
-		overflow: auto;
-		display: flex;
-	}
-	.login-form {
-		top: 15%;
-		right: 15%;
-		position: absolute;
-		width: 450px;
-		margin-left: 10%;
-		margin-top: 20px;
-		padding: 10px 0;
-	}
-	.login-header {
-		margin-bottom: 20px;
-	}
-	.login-header .logo {
-		display: flex;
-		align-items: center;
-	}
-	.login-header .logo img {
-		width: 35px;
-		height: 35px;
-		vertical-align: bottom;
-		margin-right: 10px;
-	}
-	.login-header .logo label {
-		font-size: 24px;
-	}
-	.login-header h2 {
-		font-size: 24px;
-		font-weight: bold;
-		margin-top: 40px;
-	}
-	.login_config {
-		position: absolute;
-		top: 20px;
-		right: 20px;
-	}
-	@media (max-width: 1200px) {
-		.login-form {
-			width: 340px;
-		}
-	}
-	@media (max-width: 1000px) {
-		.login_main {
-			display: block;
-		}
-		.login_background_front {
-			display: none;
-		}
-		.login-form {
-			width: 100%;
-			padding: 20px 40px;
-			right: 0 !important;
-			top: 0 !important;
-		}
-	}
 </style>

snowy-admin-web/src/views/auth/login/phoneLoginForm.vue

@@ -3,7 +3,7 @@
 		<a-form-item name="phone">
 			<a-input v-model:value="phoneFormData.phone" :placeholder="$t('login.phonePlaceholder')" size="large">
 				<template #prefix>
-					<mobile-outlined style="color: rgba(0, 0, 0, 0.25)" />
+					<mobile-outlined class="text-black text-opacity-25" />
 				</template>
 			</a-input>
 		</a-form-item>
@@ -16,21 +16,21 @@
 						size="large"
 					>
 						<template #prefix>
-							<mail-outlined style="color: rgba(0, 0, 0, 0.25)" />
+							<mail-outlined class="text-black text-opacity-25" />
 						</template>
 					</a-input>
 				</a-col>
 				<a-col :span="7">
-					<a-button size="large" style="width: 100%" @click="getPhoneValidCode" :disabled="state.smsSendBtn">{{
+					<a-button size="large" style="width: 100%" @click="getPhoneValidCode" :disabled="state.smsSendBtn">
-						(!state.smsSendBtn && $t('login.getSmsCode')) || state.time + ' s'
+						{{ (!state.smsSendBtn && $t('login.getSmsCode')) || state.time + ' s' }}
-					}}</a-button>
+					</a-button>
 				</a-col>
 			</a-row>
 		</a-form-item>
 		<a-form-item>
-			<a-button type="primary" style="width: 100%" :loading="islogin" round size="large" @click="submitLogin">{{
+			<a-button type="primary" style="width: 100%" :loading="loading" round size="large" @click="submitLogin">
-				$t('login.signIn')
+				{{ $t('login.signIn') }}
-			}}</a-button>
+			</a-button>
 		</a-form-item>
 	</a-form>
 	<a-modal
@@ -50,7 +50,7 @@
 							size="large"
 						>
 							<template #prefix>
-								<verified-outlined style="color: rgba(0, 0, 0, 0.25)" />
+								<verified-outlined class="text-black text-opacity-25" />
 							</template>
 						</a-input>
 					</a-col>
@@ -78,7 +78,7 @@
 	import dictApi from '@/api/dev/dictApi'
 	const phoneLoginFormRef = ref()
 	const phoneFormData = ref({})
-	const islogin = ref(false)
+	const loading = ref(false)
 	let state = ref({
 		time: 60,
 		smsSendBtn: false
@@ -109,36 +109,31 @@
 		// delete phoneFormData.value.phoneValidCode
 		phoneFormData.value.validCodeReqNo = phoneValidCodeReqNo.value
 
-		islogin.value = true
+		loading.value = true
-		const token = await loginApi.loginByPhone(phoneFormData.value).finally(() => {
+		try {
-			islogin.value = false
+			const token = await loginApi.loginByPhone(phoneFormData.value)
-		})
+			tool.data.set('TOKEN', token)
+			// 获取登录的用户信息
+			const loginUser = await loginApi.getLoginUser()
+			tool.data.set('USER_INFO', loginUser)
 
-		tool.data.set('TOKEN', token)
+			// 获取用户的菜单
-		// 获取登录的用户信息
+			const menu = await userCenterApi.userLoginMenu()
-		const loginUser = await loginApi.getLoginUser()
+			const indexMenu = menu[0].children[0].path
-		tool.data.set('USER_INFO', loginUser)
+			tool.data.set('MENU', menu)
-
+			// 重置系统默认应用
-		// 获取用户的菜单
+			tool.data.set('SNOWY_MENU_MODULE_ID', menu[0].id)
-		const menu = await userCenterApi.userLoginMenu().catch(() => {
+			message.success('登录成功')
-			islogin.value = false
+			router.replace({
-			return
+				path: indexMenu
-		})
+			})
-		islogin.value = false
-		const indexMenu = menu[0].children[0].path
-		tool.data.set('MENU', menu)
-		// 重置系统默认应用
-		tool.data.set('SNOWY_MENU_MODULE_ID', menu[0].id)
-		router.replace({
-			path: indexMenu
-		})
-		message.success('登录成功')
-		nextTick(() => {
 			dictApi.dictTree().then((data) => {
 				// 设置字典到store中
 				tool.data.set('DICT_TYPE_TREE_DATA', data)
 			})
-		})
+		} catch (err) {
+			loading.value = false
+		}
 	}
 
 	// 弹框的

snowy-admin-web/src/views/auth/login/threeLogin.vue

@@ -1,6 +1,6 @@
 <template>
 	<a-divider>{{ $t('login.signInOther') }}</a-divider>
-	<div class="login-oauth">
+	<div class="login-oauth layout-center">
 		<a-space align="start">
 			<a @click="getLoginRenderUrl('gitee')"><GiteeIcon /></a>
 			<a-button type="primary" shape="circle">
@@ -23,9 +23,4 @@
 	}
 </script>
 
-<style scoped>
+<style scoped></style>
-	.login-oauth {
-		display: flex;
-		justify-content: center;
-	}
-</style>