feat: 登录页面 100%

src/router/index.ts

@@ -10,8 +10,18 @@ const HOME_URL = '/dashboard'
 // 静态路由
 export const sysStaticRouter: Array<AppRouteRecordRaw> = [
 	{
-		path: '/login1',
-		component: () => import('@/views/login1/index.vue'),
+		path: '/login',
+		component: () => import('@/views/login/index.vue'),
+		meta: { hidden: true }
+	},
+	{
+		path: '/user_register',
+		component: () => import('@/views/login/userRegister.vue'),
+		meta: { hidden: true }
+	},
+	{
+		path: '/reset_password',
+		component: () => import('@/views/login/resetPassword.vue'),
 		meta: { hidden: true }
 	},
 	// 主入口

src/utils/request.ts

@@ -17,7 +17,7 @@ const tokenLoseHandler = debounce(
 	function () {
 		// const { user } = useStore()
 		ls.clear() // 清除浏览器全部缓存
-		router.push('/login1')
+		router.push('/login')
 		ElMessageBox.alert('当前页面已失效，请重新登录', '提示', {})
 	},
 	3000,

src/views/login/components/commonPage.vue

@@ -1,12 +1,12 @@
 <template>
 	<el-container>
-		<el-header style="height:50px;">
+		<el-header style="height: 50px">
 			<div class="common-header-left">
 				<div class="common-header-logo">
-					<img :alt="$CONFIG.APP_NAME" src="img/logo.png">
-					<label>{{$CONFIG.APP_NAME}}</label>
+					<img src="/logo.png" />
+					<label>AiZuDa</label>
 				</div>
-				<div class="common-header-title">{{title}}</div>
+				<div class="common-header-title">{{ title }}</div>
 			</div>
 			<div class="common-header-right">
 				<router-link to="/login">返回登录</router-link>
@@ -14,7 +14,7 @@
 		</el-header>
 		<el-main>
 			<div class="common-container">
-				<h2 class="common-title">{{title}}</h2>
+				<h2 class="common-title">{{ title }}</h2>
 				<div class="common-main el-card">
 					<slot></slot>
 				</div>
@@ -24,12 +24,107 @@
 </template>
 
 <script>
-	export default {
-		props: {
-			title: { type: String, default: "" }
-		}
+export default {
+	props: {
+		title: { type: String, default: '' }
 	}
+}
 </script>
 
+<style lang="scss" scoped>
+/*header-tabs*/
+.el-header {
+	background: #fff;
+	border-bottom: 1px solid var(--el-border-color-light);
+	padding: 13px 15px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+.el-header .left-panel {
+	display: flex;
+	align-items: center;
+}
+.el-header .right-panel {
+	display: flex;
+	align-items: center;
+}
+.el-header .right-panel > * + * {
+	margin-left: 10px;
+}
+</style>
+
 <style>
+.common-page {
+}
+.common-header-left {
+	display: flex;
+	align-items: center;
+}
+.common-header-logo {
+	display: flex;
+	align-items: center;
+}
+.common-header-logo img {
+	height: 30px;
+	margin-right: 10px;
+	vertical-align: bottom;
+}
+.common-header-logo label {
+	font-size: 20px;
+}
+.common-header-title {
+	font-size: 16px;
+	border-left: 1px solid var(--el-border-color-light);
+	margin-left: 15px;
+	padding-left: 15px;
+}
+.common-header-right {
+	display: flex;
+	align-items: center;
+}
+.common-header-right a {
+	font-size: 14px;
+	color: var(--el-color-primary);
+	cursor: pointer;
+}
+.common-header-right a:hover {
+	color: var(--el-color-primary-light-3);
+}
+.common-container {
+	max-width: 1240px;
+	margin: 30px auto 30px auto;
+}
+.common-main {
+	padding: 20px;
+}
+.common-title {
+	font-size: 26px;
+	margin-bottom: 20px;
+	font-weight: normal;
+}
+.common-main .el-form {
+	width: 500px;
+	margin: 30px auto;
+}
+.common-main .el-steps .el-step__title {
+	font-size: 14px;
+}
+.common-main .el-steps .el-step__icon {
+	border: 1px solid;
+}
+.common-main .yzm {
+	display: flex;
+	width: 100%;
+}
+.common-main .yzm .el-button {
+	margin-left: 10px;
+}
+.common-main .link {
+	color: var(--el-color-primary);
+	cursor: pointer;
+}
+.common-main .link:hover {
+	color: var(--el-color-primary-light-3);
+}
 </style>

src/views/login/components/passwordForm.vue

@@ -1,104 +1,63 @@
 <template>
 	<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
-		<el-form-item prop="user">
-			<el-input v-model="form.user" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')"></el-input>
+		<el-form-item prop="username">
+			<el-input v-model="form.username" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')"></el-input>
 		</el-form-item>
 		<el-form-item prop="password">
 			<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
 		</el-form-item>
-		<el-form-item style="margin-bottom: 10px;">
-				<el-col :span="12">
-					<el-checkbox :label="$t('login.rememberMe')" v-model="form.autologin"></el-checkbox>
-				</el-col>
-				<el-col :span="12" class="login-forgot">
-					<router-link to="/reset_password">{{ $t('login.forgetPassword') }}？</router-link>
-				</el-col>
+		<el-form-item style="margin-bottom: 10px">
+			<el-col :span="12">
+				<el-checkbox v-model="form.autologin" :label="$t('login.rememberMe')"></el-checkbox>
+			</el-col>
+			<el-col :span="12" class="login-forgot">
+				<router-link to="/reset_password">{{ $t('login.forgetPassword') }}？</router-link>
+			</el-col>
 		</el-form-item>
 		<el-form-item>
-			<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
+			<el-button type="primary" style="width: 100%" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
 		</el-form-item>
 		<div class="login-reg">
-			{{$t('login.noAccount')}} <router-link to="/user_register">{{$t('login.createAccount')}}</router-link>
+			{{ $t('login.noAccount') }} <router-link to="/user_register">{{ $t('login.createAccount') }}</router-link>
 		</div>
 	</el-form>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				form: {
-					user: "admin",
-					password: "100607",
-					autologin: false
-				},
-				rules: {
-					user: [
-						{required: true, message: this.$t('login.userError'), trigger: 'blur'}
-					],
-					password: [
-						{required: true, message: this.$t('login.PWError'), trigger: 'blur'}
-					]
-				},
-				islogin: false,
-			}
-		},
-		mounted() {
-
-		},
-		methods: {
-			async login(){
-
-				let validate = await this.$refs.loginForm.validate().catch(()=>{})
-				if(!validate){ return false }
-
-				this.islogin = true
-				let data = {
-					username: this.form.user,
-					password: this.$TOOL.crypto.MD5(this.form.password)
-				}
-				//获取token
-				let user = await this.$API.user.login(data);
-				if (user.code == 200) {
-					this.$TOOL.cookie.set("TOKEN", user.data.token, {
-						expires: this.form.autologin? 24*60*60 : 0
-					})
-					this.$TOOL.data.set("USER_INFO", user.data.userInfo)
-				} else {
-					this.islogin = false
-					this.$message.warning(user.message)
-					return false
-				}
-				//获取菜单
-				let menu = await this.$API.res.listMenuPermissions()
-				if (menu.code == 200) {
-					let data = menu.data
-					if (data.menu.length == 0) {
-						this.islogin = false
-						await this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
-							type: 'error',
-							center: true
-						})
-						return false
-					}
-					this.$TOOL.data.set("MENU", data.menu)
-					this.$TOOL.data.set("PERMISSIONS", data.permissions)
-					this.$TOOL.data.set("DASHBOARDGRID", data.dashboardGrid)
-				} else {
-					this.islogin = false
-					this.$message.warning(menu.message)
-					return false
-				}
+import useStore from '@/store'
+const { user } = useStore()
 
-				this.$router.replace({
-					path: '/'
-				})
-				this.$message.success("Login Success 登录成功")
-				this.islogin = false
+export default {
+	data() {
+		return {
+			form: {
+				username: 'admin',
+				password: '100607',
+				autologin: false
 			},
+			rules: {
+				username: [{ required: true, message: this.$t('login.userError'), trigger: 'blur' }],
+				password: [{ required: true, message: this.$t('login.PWError'), trigger: 'blur' }]
+			},
+			loading: false
+		}
+	},
+	mounted() {},
+	methods: {
+		async login() {
+			let validate = await this.$refs.loginForm.validate().catch(() => {})
+			if (!validate) {
+				return false
+			}
+			this.loading = true
+			console.log(this.form);
+			user.login(this.form).finally(() => {
+				this.loading = false
+				this.$message.success('Login Success 登录成功')
+			})
 		}
 	}
+}
 </script>
 
-<style>
-</style>
+<style></style>

src/views/login/index.vue

@@ -7,11 +7,11 @@
 				<p>{{ $t('login.describe') }}</p>
 			</div>
 			<div class="login_adv__mask"></div>
-			<div class="login_adv__bottom">© {{ $CONFIG.APP_NAME }} {{ $CONFIG.APP_VER }}</div>
+			<div class="login_adv__bottom">© AiZuDa 1.6.9</div>
 		</div>
 		<div class="login_main">
 			<div class="login_config">
-				<el-button :icon="config.dark ? 'el-icon-sunny' : 'el-icon-moon'" circle type="info" @click="configDark"></el-button>
+				<el-button v-if="false" :icon="config.dark ? 'el-icon-sunny' : 'el-icon-moon'" circle type="info" @click="configDark"></el-button>
 				<el-dropdown trigger="click" placement="bottom-end" @command="configLang">
 					<el-button circle>
 						<svg
@@ -46,8 +46,8 @@
 			<div class="login-form">
 				<div class="login-header">
 					<div class="logo">
-						<img :alt="$CONFIG.APP_NAME" src="/logo.png" />
-						<label>{{ $CONFIG.APP_NAME }}</label>
+						<img src="/logo.png" />
+						<label> AiZuDa </label>
 					</div>
 				</div>
 				<el-tabs>
@@ -58,7 +58,8 @@
 						<phone-form></phone-form>
 					</el-tab-pane>
 				</el-tabs>
-				<template v-if="$CONFIG.MY_SHOW_LOGIN_OAUTH">
+				<!-- 是否显示三方授权-->
+				<template v-if="false">
 					<el-divider>{{ $t('login.signInOther') }}</el-divider>
 					<div class="login-oauth">
 						<el-button type="success" icon="sc-icon-wechat" circle @click="wechatLogin"></el-button>
@@ -90,8 +91,8 @@ export default {
 	data() {
 		return {
 			config: {
-				lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
-				dark: this.$TOOL.data.get('APP_DARK') || false
+				lang: 'zh-cn',
+				dark: false
 			},
 			lang: [
 				{
@@ -109,40 +110,18 @@ export default {
 		}
 	},
 	watch: {
-		// 先不考虑 暗黑模式
-		// 'config.dark'(val) {
-		// 	if (val) {
-		// 		document.documentElement.classList.add('dark')
-		// 		this.$TOOL.data.set('APP_DARK', val)
-		// 	} else {
-		// 		document.documentElement.classList.remove('dark')
-		// 		this.$TOOL.data.remove('APP_DARK')
-		// 	}
-		// },
 		'config.lang'(val) {
 			this.$i18n.locale = val
-			this.$TOOL.data.set('APP_LANG', val)
 		}
 	},
-	created: function () {
-		this.$TOOL.cookie.remove('TOKEN')
-		this.$TOOL.data.remove('USER_INFO')
-		this.$TOOL.data.remove('MENU')
-		this.$TOOL.data.remove('PERMISSIONS')
-		this.$TOOL.data.remove('DASHBOARDGRID')
-		this.$TOOL.data.remove('grid')
-		this.$store.commit('clearViewTags')
-		this.$store.commit('clearKeepLive')
-		this.$store.commit('clearIframeList')
-		console.log('%c SCUI %c Gitee: https://gitee.com/lolicode/scui', 'background:#666;color:#fff;border-radius:3px;', '')
-	},
 	methods: {
 		configDark() {
-			this.config.dark = this.config.dark ? false : true
+			this.config.dark = false
 		},
 		configLang(command) {
 			this.config.lang = command.value
 		},
+		// 三方授权 关闭
 		wechatLogin() {
 			this.showWechatLogin = true
 			this.WechatLoginCode = 'SCUI-823677237287236-' + new Date().getTime()

src/views/login/userRegister.vue

@@ -62,7 +62,7 @@
 				<el-button
 					type="primary"
 					@click="
-						showAgree = false
+						showAgree = false,
 						form.agree = true
 					"
 					>我已阅读并同意</el-button