feat: 增加租户登录页面，调试租户名称 logo 的显示，登录逻辑的处理

src/api/system/index.ts

@@ -19,6 +19,7 @@ export default {
   },
   login: {
     login: (data: object) => post('/login', data),
+    tenantLogin: (data: object) => post('/tenant/login', data),
     currentUser: () => get('/system/user/currentUser'),
     editPassword: (data: object) => post('/user/editPassword', data),
     captcha: () => get('/captcha'),

src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router';
+import { createRouter, createWebHashHistory, createWebHistory, RouteLocationNormalizedLoaded } from 'vue-router';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import { store } from '/@/store/index';
@@ -9,7 +9,12 @@ import { initFrontEndControlRoutes } from '/@/router/frontEnd';
 import { initBackEndControlRoutes } from '/@/router/backEnd';
 import { getToken } from "/@/utils/auth";
 
-const whiteList = ['/login', '/ssoBack']
+const whiteList = ['/login', '/ssoBack', '/:tenant/login']
+
+function whiteListAllow(route: RouteLocationNormalizedLoaded) {
+	const matchedPath = route.matched?.[0]?.path
+	return whiteList.includes(route.path) || whiteList.includes(matchedPath)
+}
 
 /**
  * 创建一个可以被 Vue 应用程序使用的路由实例
@@ -208,7 +213,7 @@ router.beforeEach(async (to, from, next) => {
 
 	// 正常流程
 	const token = getToken();
-	if (whiteList.includes(to.path) && !token) {
+	if (whiteListAllow(to) && !token) {
 		next();
 		NProgress.done();
 	} else {
@@ -222,7 +227,7 @@ router.beforeEach(async (to, from, next) => {
 			Session.clear();
 			resetRoute();
 			NProgress.done();
-		} else if (token && whiteList.includes(to.path)) {
+		} else if (token && whiteListAllow(to)) {
 			next('/');
 			NProgress.done();
 		} else {

src/router/route.ts

@@ -104,6 +104,15 @@ export const staticRoutes: Array<RouteRecordRaw> = [
 			title: '登录',
 		},
 	},
+	// 租户登录
+	{
+		path: '/:tenant/login',
+		name: 'tenant-login',
+		component: () => import('/@/views/login/tenant.vue'),
+		meta: {
+			title: '登录',
+		},
+	},
 	{
 		path: '/ssoBack',
 		name: 'sso',

src/views/login/component/account-tenant.vue

@@ -0,0 +1,347 @@
+<template>
+	<el-form ref="loginForm" size="large" class="login-content-form" :model="ruleForm" :rules="formRules">
+		<el-form-item class="login-animation1" prop="userName">
+			<el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.userName" clearable autocomplete="off">
+				<template #prefix>
+					<el-icon class="el-input__icon">
+						<ele-User />
+					</el-icon>
+				</template>
+			</el-input>
+		</el-form-item>
+		<el-form-item class="login-animation2" prop="password">
+			<el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')" v-model="ruleForm.password" autocomplete="off" @keyup.enter="onSignIn">
+				<template #prefix>
+					<el-icon class="el-input__icon">
+						<ele-Unlock />
+					</el-icon>
+				</template>
+				<template #suffix>
+					<i class="iconfont el-input__icon login-content-password" :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'" @click="isShowPassword = !isShowPassword">
+					</i>
+				</template>
+			</el-input>
+		</el-form-item>
+		<el-form-item class="login-animation3" prop="captcha">
+			<el-col :span="15">
+				<el-input type="text" maxlength="4" :placeholder="$t('message.account.accountPlaceholder3')" v-model="ruleForm.captcha" clearable autocomplete="off" @keyup.enter="onSignIn">
+					<template #prefix>
+						<el-icon class="el-input__icon">
+							<ele-Position />
+						</el-icon>
+					</template>
+				</el-input>
+			</el-col>
+			<el-col :span="1"></el-col>
+			<el-col :span="8">
+				<div class="login-content-code">
+					<el-image class="login-content-code-img" @click="getCaptcha" width="130" height="38" :src="captchaSrc" style="cursor: pointer" />
+				</div>
+			</el-col>
+		</el-form-item>
+		<el-form-item class="login-animation4">
+			<el-button type="primary" class="login-content-submit" @click="onSignIn" :loading="loading.signIn">
+				<span>{{ $t('message.account.accountBtnText') }}</span>
+			</el-button>
+		</el-form-item>
+		<el-form-item class="login-animation4" v-if="from !== 'sso' && showSSO">
+			<div class="ssolist">
+				<img class="ssologo" :src="item.logo" v-for="item in ssoList" :key="item.name" @click="authLogin(item.name)">
+			</div>
+		</el-form-item>
+		<changePwd ref="changePwdRef"></changePwd>
+	</el-form>
+</template>
+
+<script lang="ts">
+import { ref, watch, toRefs, reactive, defineComponent, computed, onMounted, getCurrentInstance, h } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import changePwd from './changePwd.vue';
+import { ElMessage } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+import { initFrontEndControlRoutes } from '/@/router/frontEnd';
+import { initBackEndControlRoutes } from '/@/router/backEnd';
+import { useStore } from '/@/store/index';
+import { Session, Local } from '/@/utils/storage';
+import { formatAxis } from '/@/utils/formatTime';
+import { encrypt } from '/@/utils/rsa'
+import api from '/@/api/system';
+import { setToken } from "/@/utils/auth";
+import getOrigin from '/@/utils/origin'
+
+// 是否是开源版本
+const ISOPEN = import.meta.env.VITE_ISOPEN
+
+export default defineComponent({
+	name: 'loginAccount',
+	components: {
+		changePwd
+	},
+	props: {
+		// sso 登录来源
+		from: String,
+		ssoInfo: Object,
+		showSSO: Boolean,
+	},
+	setup(props) {
+		watch(() => props.showSSO, (showSSO) => {
+			if (showSSO) {
+				api.sso.list().then((res: any) => {
+					state.ssoList = res.providers
+				})
+			}
+		}, { immediate: true })
+
+		const changePwdRef = ref();
+		const { t } = useI18n();
+		const store = useStore();
+		const route = useRoute();
+		const router = useRouter();
+		const { proxy } = getCurrentInstance() as any;
+		const state = reactive({
+			isShowPassword: false,
+			ruleForm: {
+				code: route.params?.tenant as string,
+				userName: ISOPEN ? 'demo' : '',
+				password: ISOPEN ? 'demo123456' : '',
+				captcha: '',
+				VerifyKey: '',
+			},
+			ssoList: [] as any[],
+			formRules: {
+				userName: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
+				password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
+				captcha: [{ required: true, trigger: 'blur', message: '验证码不能为空' }],
+			},
+			loading: {
+				signIn: false,
+			},
+			captchaSrc: '',
+		});
+
+
+		onMounted(() => {
+			getCaptcha();
+			// api.login.ssoList()
+		});
+		// 时间获取
+		const currentTime = computed(() => {
+			return formatAxis(new Date());
+		});
+
+		const getCaptcha = () => {
+			api.login.captcha().then((res: any) => {
+				state.captchaSrc = res.img;
+				state.ruleForm.VerifyKey = res.key;
+			});
+		};
+
+		function authLogin(type: string) {
+			window.open(getOrigin('/oauth/login?provider=' + type))
+			// if (type === 'gitee') {
+			// 	const client_id = 'a0585ded445f240f2adc7957989bdd644fa2cdf0db7d98b0a940ec92df6a0934'
+			// 	const redirect_uri = 'http://localhost:8888/#/sso/gitee'
+			// 	window.open(`https://gitee.com/oauth/authorize?client_id=${client_id}&redirect_uri=${encodeURIComponent(redirect_uri)}&response_type=code`)
+			// 	return
+			// }
+			// if (type === 'qq') {
+			// api.sso.login('qq')
+			// }
+		}
+
+		// 登录
+		const onSignIn = () => {
+			// 验证表单
+			proxy.$refs.loginForm
+				.validate(async (valid: boolean) => {
+					if (valid) {
+						state.loading.signIn = true;
+						let password: string
+						if (sessionStorage.isRsaEnabled) {
+							password = await encrypt(state.ruleForm.password)
+						} else {
+							password = state.ruleForm.password
+						}
+						api.login
+							.tenantLogin({
+								...state.ruleForm,
+								password
+							})
+							.then(async (res: any) => {
+								// 检查是否需要更换密码
+								if (res.isChangePwd) {
+									ElMessage.error(`密码已超过${sessionStorage.sysPasswordChangePeriod}天未修改，请先修改密码再登录`)
+									state.loading.signIn = false;
+									getCaptcha();
+									return changePwdRef.value.toShow({
+										userName: state.ruleForm.userName,
+										oldUserPassword: state.ruleForm.password,
+									})
+								}
+
+								setToken(res.token);
+								localStorage.setItem('token', res.token);
+								const userInfos = res.userInfo;
+								userInfos.avatar = proxy.getUpFileUrl(userInfos.avatar);
+								// 存储 token 到浏览器缓存
+								Local.set('userInfo', userInfos);
+								// 存储用户信息到浏览器缓存
+								Session.set('userInfo', userInfos);
+
+								// 如果来自 sso，则直接绑定
+								if (props.from === 'sso') {
+									api.sso.binding(props.ssoInfo).then((res: any) => {
+										ElMessage.success('绑定成功')
+									})
+								}
+
+								// 获取权限配置，上传文件类型等
+								const [columnRes, buttonRes, uploadFileRes] = await Promise.all([api.getInfoByKey('sys.column.switch'), api.getInfoByKey('sys.button.switch'), api.getInfoByKey('sys.uploadFile.way')])
+
+								const isSecurityControlEnabled = sessionStorage.isSecurityControlEnabled || null
+								localStorage.setItem('btnNoAuth', (isSecurityControlEnabled && Number(buttonRes?.data?.configValue)) ? '' : '1');
+								localStorage.setItem('colNoAuth', (isSecurityControlEnabled && Number(columnRes?.data?.configValue)) ? '' : '1');
+								localStorage.setItem('uploadFileWay', uploadFileRes?.data?.configValue || '0');
+
+								await store.dispatch('userInfos/setUserInfos', userInfos);
+
+								currentUser();
+							})
+							.catch(() => {
+								state.loading.signIn = false;
+								getCaptcha();
+							});
+					}
+				})
+				.catch(() => { });
+		};
+		// 获取登录用户信息
+		const currentUser = async () => {
+			api.login.currentUser().then(async (res: any) => {
+				localStorage.setItem('userId', res.Info.id);
+				Session.set('userInfo', res.Info);
+
+				// 设置用户菜单
+				Session.set('userMenu', res.Data || []);
+				store.dispatch('requestOldRoutes/setBackEndControlRoutes', res || []);
+				if (!store.state.themeConfig.themeConfig.isRequestRoutes) {
+					// 前端控制路由，2、请注意执行顺序
+					await initFrontEndControlRoutes();
+					signInSuccess();
+				} else {
+					// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
+					// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
+					await initBackEndControlRoutes();
+					// 执行完 initBackEndControlRoutes，再执行 signInSuccess
+					signInSuccess();
+				}
+			});
+			// // 设置按钮权限
+			// Session.set('permissions', res.data.permissions);
+			// // 1、请注意执行顺序(存储用户信息到vuex)
+			// await store.dispatch('userInfos/setPermissions', res.data.permissions);
+		};
+		// 登录成功后的跳转
+		const signInSuccess = () => {
+			// 修改首页重定向的地址，从后台配置中获取首页的地址并在登录之后和刷新页面时进行修改
+			const sysinfo = JSON.parse(localStorage.sysinfo || '{}');
+			const homePage = router.getRoutes().find((item) => item.path === '/');
+			homePage && (homePage.redirect = sysinfo.systemHomePageRoute || '/home');
+			// 初始化登录成功时间问候语
+			let currentTimeInfo = currentTime.value;
+			// 登录成功，跳到转首页
+			// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
+			// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
+			if (route.query?.redirect) {
+				router.push({
+					path: route.query?.redirect as string,
+					query: route.query.params ? (Object.keys(route.query?.params as string).length > 0 ? JSON.parse(route.query?.params as string) : '') : '',
+				});
+			} else {
+				router.push('/');
+			}
+			// 登录成功提示
+			// 关闭 loading
+			state.loading.signIn = false;
+			const signInText = t('message.signInText');
+			ElMessage.success(`${currentTimeInfo}，${signInText}`);
+		};
+		return {
+			changePwdRef,
+			onSignIn,
+			getCaptcha,
+			authLogin,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.login-content-form {
+	width: 400px;
+	margin-top: 20px;
+
+	@for $i from 1 through 4 {
+		.login-animation#{$i} {
+			opacity: 0;
+			animation-name: error-num;
+			animation-duration: 0.5s;
+			animation-fill-mode: forwards;
+			animation-delay: calc($i/10) + s;
+		}
+	}
+
+	.login-content-password {
+		display: inline-block;
+		width: 20px;
+		cursor: pointer;
+
+		&:hover {
+			color: #909399;
+		}
+	}
+
+	.login-content-code {
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+
+		.login-content-code-img {
+			width: 100%;
+			height: 40px;
+			line-height: 40px;
+			background-color: #ffffff;
+			border: 1px solid rgb(220, 223, 230);
+			cursor: pointer;
+			transition: all ease 0.2s;
+			border-radius: 4px;
+			user-select: none;
+
+			&:hover {
+				border-color: #c0c4cc;
+				transition: all ease 0.2s;
+			}
+		}
+	}
+
+	.login-content-submit {
+		width: 100%;
+		letter-spacing: 2px;
+		font-weight: 300;
+		margin-top: 15px;
+	}
+}
+
+.ssolist {
+	display: flex;
+	align-items: center;
+
+	.ssologo {
+		width: 40px;
+		height: 40px;
+		margin-right: 10px;
+		cursor: pointer;
+	}
+}
+</style>

src/views/login/index.vue

@@ -7,11 +7,13 @@
 				{{ sysinfo.systemName }}
 			</div>
 			<el-image class="img" :src="sysinfo.systemLoginPIC" />
-			<span class="text" v-if="sysinfo.buildTime">服务端版本：{{ sysinfo.buildVersion }} </span>
-			<span class="text" v-if="sysinfo.buildTime">{{ dayjs(sysinfo.buildTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-			<br />
-			<span class="text" v-if="versionInfo.version">前端版本：{{ versionInfo.version }} </span>
-			<span class="text" v-if="versionInfo.updateTime">{{ versionInfo.updateTime }}</span>
+			<div>
+				<span class="text" v-if="sysinfo.buildTime">服务端版本：{{ sysinfo.buildVersion }} </span>
+				<span class="text" v-if="sysinfo.buildTime">{{ dayjs(sysinfo.buildTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+				<div style="height: 10px;"></div>
+				<span class="text" v-if="versionInfo.version">前端版本：{{ versionInfo.version }} </span>
+				<span class="text" v-if="versionInfo.updateTime">{{ versionInfo.updateTime }}</span>
+			</div>
 		</div>
 		<div class="part">
 			<div class="title">登录</div>
@@ -168,9 +170,9 @@ html[data-theme='dark'] {
 	}
 
 	.img {
-		width: 50%;
+		max-width: 50%;
 		display: block;
-		margin: 15vh 0;
+		max-height: 40vh;
 	}
 
 	.part {
@@ -189,6 +191,9 @@ html[data-theme='dark'] {
 		background-position: right center;
 		align-items: flex-start;
 		padding-left: 8%;
+		justify-content: space-around;
+		padding-top: 10vh;
+		padding-bottom: 10vh;
 	}
 
 	.login-icon-group {

src/views/login/tenant.vue

@@ -0,0 +1,327 @@
+<template>
+	<div class="login-container flex-row" v-if="showImg" v-loading="loading">
+		<el-switch class="switch" v-model="getThemeConfig.isIsDark" size="large" inline-prompt @change="onAddDarkChange" :active-icon="Sunny" :inactive-icon="Moon" style="--el-switch-on-color: #fff; --el-switch-off-color: #151515"></el-switch>
+		<div class="part left">
+			<div class="flex logo">
+				<el-image class="logoimg" :src="sysinfo.systemLogo" />
+				{{ sysinfo.systemName }}
+			</div>
+			<el-image class="img" fit="contain" :src="sysinfo.systemLoginPIC" />
+			<div>
+				<span class="text" v-if="sysinfo.buildTime">服务端版本：{{ sysinfo.buildVersion }} </span>
+				<span class="text" v-if="sysinfo.buildTime">{{ dayjs(sysinfo.buildTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+				<div style="height: 10px;"></div>
+				<span class="text" v-if="versionInfo.version">前端版本：{{ versionInfo.version }} </span>
+				<span class="text" v-if="versionInfo.updateTime">{{ versionInfo.updateTime }}</span>
+			</div>
+		</div>
+		<div class="part">
+			<div class="title">登录</div>
+			<Account :showSSO="showSSO" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, computed, ref } from 'vue';
+import Account from '/@/views/login/component/account-tenant.vue';
+import { useStore } from '/@/store/index';
+import { Sunny, Moon } from '@element-plus/icons-vue';
+import dayjs from 'dayjs';
+import api from '/@/api/system';
+import tenantApi from '/@/api/modules/tenant';
+import axios from 'axios';
+import { useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus';
+
+const store = useStore();
+const route = useRoute();
+const tenant = route.params?.tenant as string
+const isAllow = ref(true)
+const loading = ref(true)
+
+const showImg = ref(false)
+const showSSO = ref(false)
+const sysinfo = reactive<any>({
+	buildVersion: '',
+	buildTime: '',
+	systemName: '',
+	systemLogo: '',
+	systemLoginPIC: '',
+})
+
+api.sysinfo().then((res: any) => {
+	// Object.assign(sysinfo, res)
+	sysinfo.buildVersion = res.buildVersion
+	sysinfo.buildTime = res.buildTime
+	const isSSOEnabled = window.atob(res.target).split('|')[4]
+	if (isSSOEnabled == '1') {
+		showSSO.value = true
+	}
+}).finally(() => showImg.value = true)
+
+// tenantApi.get(tenant).then((res: any) => {
+// 	console.log(res)
+// }).catch(() => {
+// 	isAllow.value = false
+// }).finally(() => {
+loading.value = false
+// })
+
+const res = {
+	"name": "测试租户",
+	"code": "ttt",
+	"description": "adsfasdfadsf",
+	"logoMini": "https://zhgy.sagoo.cn/base-api/upload_file/2024-11-11/d5jfenttbyhtxcsess.png",
+	"logoPic": "https://zhgy.sagoo.cn/base-api/upload_file/2024-11-12/d5k9gntb46f5yhfw8r.jpg",
+	"logo": "https://zhgy.sagoo.cn/base-api/upload_file/2024-11-11/d5jfepud0ajcbia9fw.png",
+	"systemName": "123",
+	"systemCopyright": "333",
+	"isDeleted": 0,
+	"status": 1,
+}
+
+if (res?.status) {
+	sysinfo.systemName = res.name
+	sysinfo.systemLogo = res.logo
+	sysinfo.systemLoginPIC = res.logoPic
+} else {
+	isAllow.value = false
+	ElMessage.error('租户不存在')
+}
+
+// 获取布局配置信息
+const getThemeConfig = computed(() => {
+	return store.state.themeConfig.themeConfig;
+});
+
+const versionInfo = reactive<any>({
+	version: '',
+	updateTime: '',
+})
+// 加载版本信息
+axios.get('/versionInfo.json').then(res => {
+	versionInfo.version = res.data.version
+	versionInfo.updateTime = res.data.updateTime
+})
+
+// 4、界面显示 --> 深色模式
+const onAddDarkChange = () => {
+	const body = document.documentElement as HTMLElement;
+	if (getThemeConfig.value.isIsDark) {
+		body.setAttribute('data-theme', 'dark');
+		document.querySelector('html')!.className = 'dark'
+	} else {
+		body.setAttribute('data-theme', '');
+		document.querySelector('html')!.className = ''
+	}
+	store.dispatch('themeConfig/setThemeConfig', getThemeConfig.value);
+};
+</script>
+
+<style scoped lang="scss">
+html[data-theme='dark'] {
+	.login-container {
+		background: #293146;
+	}
+
+	.left {
+		background-image: url(/@/assets/login-bg-dark.svg);
+	}
+
+	.title {
+		color: #aaa;
+	}
+}
+
+.flex {
+	display: flex;
+	align-items: center;
+}
+
+.text {
+	color: #fff;
+}
+
+.switch {
+	position: fixed;
+	right: 20px;
+	top: 20px;
+}
+
+.login-container {
+	width: 100vw;
+	height: 100vh;
+	position: relative;
+	background: #fff;
+
+	.title {
+		font-size: 30px;
+		color: #333;
+		font-weight: bold;
+		letter-spacing: 20px;
+	}
+
+	.logo {
+		font-size: 30px;
+		color: #fff;
+
+		.logoimg {
+			height: 50px;
+			display: block;
+			margin-right: 12px;
+		}
+	}
+
+	.img {
+		max-width: 50%;
+		display: block;
+		max-height: 40vh;
+	}
+
+	.part {
+		flex: 1;
+		display: flex;
+		flex-flow: column nowrap;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.left {
+		height: 100vh;
+		background-image: url(/@/assets/login-bg.svg);
+		background-repeat: no-repeat;
+		background-size: auto 100%;
+		background-position: right center;
+		align-items: flex-start;
+		padding-left: 8%;
+		justify-content: space-around;
+		padding-top: 10vh;
+		padding-bottom: 10vh;
+	}
+
+	.login-icon-group {
+		width: 100%;
+		height: 100%;
+		position: relative;
+
+		.login-icon-group-title {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin: 12px 0;
+
+			img {
+				width: auto;
+				height: 40px;
+			}
+
+			&-text {
+				padding-left: 20px;
+				color: var(--el-color-primary);
+			}
+		}
+
+		&-icon {
+			width: 60%;
+			height: 70%;
+			position: absolute;
+			left: 0;
+			bottom: 0;
+		}
+	}
+
+	.login-content-out {
+		width: 100%;
+		height: 100%;
+		padding-top: calc(50vh - 227px);
+	}
+
+	.login-content {
+		width: 500px;
+		padding: 20px;
+		margin-left: calc(50% - 500px);
+		background-color: rgba(255, 255, 255, 0.8);
+		border: 5px solid var(--el-color-primary-light-8);
+		border-radius: 5px;
+		overflow: hidden;
+		z-index: 1;
+		position: relative;
+
+		.login-content-main {
+			margin: 0 auto;
+			width: 80%;
+
+			.login-content-title {
+				color: var(--el-text-color-primary);
+				font-weight: 500;
+				font-size: 22px;
+				text-align: center;
+				letter-spacing: 4px;
+				margin: 15px 0 30px;
+				white-space: nowrap;
+				z-index: 5;
+				position: relative;
+				transition: all 0.3s ease;
+			}
+		}
+
+		.login-content-main-sacn {
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: 50px;
+			height: 50px;
+			overflow: hidden;
+			cursor: pointer;
+			transition: all ease 0.3s;
+			color: var(--el-text-color-primary);
+
+			&-delta {
+				position: absolute;
+				width: 35px;
+				height: 70px;
+				z-index: 2;
+				top: 2px;
+				right: 21px;
+				background: var(--el-color-white);
+				transform: rotate(-45deg);
+			}
+
+			&:hover {
+				opacity: 1;
+				transition: all ease 0.3s;
+				color: var(--el-color-primary) !important;
+			}
+
+			i {
+				width: 47px;
+				height: 50px;
+				display: inline-block;
+				font-size: 48px;
+				position: absolute;
+				right: 2px;
+				top: -1px;
+			}
+		}
+	}
+
+	.login-footer {
+		position: absolute;
+		bottom: 5px;
+		width: 100%;
+
+		&-content {
+			width: 100%;
+			display: flex;
+
+			&-warp {
+				margin: auto;
+				color: #e0e3e9;
+				text-align: center;
+				animation: error-num 1s ease-in-out;
+			}
+		}
+	}
+}
+</style>

vite.config.ts

@@ -32,8 +32,8 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
 			include: ['element-plus/lib/locale/lang/zh-cn', 'element-plus/lib/locale/lang/en', 'element-plus/lib/locale/lang/zh-tw'],
 		},
 		server: {
-			host: '0.0.0.0',
 			port: env.VITE_PORT as unknown as number,
+			host: true,
 			open: true,
 			hmr: true,
 			// proxy: {