tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 优化登录页样式，减少冗余

Browse Source 
;
This commit is contained in:
超凡
2025-03-31 03:25:54 +08:00
parent 6b93a8098d
commit 486e5a038c
2 changed files with 111 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/auth.api.ts
View File

@@ -61,6 +61,8 @@ export interface LoginFormData {
captchaKey: string; captchaKey: string;
/** 验证码 */ /** 验证码 */
captchaCode: string; captchaCode: string;
/** 记住我 */
rememberMe: boolean;
} }
/** 登录响应 */ /** 登录响应 */

349
src/views/login/index.vue
View File

@@ -1,132 +1,106 @@
<template> <template>
<div class="login"> <div class="login flex-center wh-full relative overflow-scroll">
<!-- 登录页头部 --> <!-- 登录页头部 -->
<div class="login-header"> <div class="flex-x-end absolute top-0 w-full p-4">
<div class="flex-y-center"> <el-switch
<el-switch v-model="isDark"
v-model="isDark" inline-prompt
inline-prompt active-icon="Moon"
active-icon="Moon" inactive-icon="Sunny"
inactive-icon="Sunny" @change="toggleTheme"
@change="toggleTheme" />
/> <lang-select class="ml-2 cursor-pointer" />
<lang-select class="ml-2 cursor-pointer" />
</div>
</div> </div>
<!-- 登录页内容 --> <!-- 登录页内容 -->
<div class="login-form"> <div
<el-form ref="loginFormRef" :model="loginFormData" :rules="loginRules"> class="m-5 w-full min-w-[335px] max-w-[460px] p-5 shadow-[var(--el-box-shadow-light)] sm:p-10"
<div class="form-title"> :class="[isDark ? 'bg-transparent' : 'bg-white']"
<h2>{{ defaultSettings.title }}</h2> >
<el-dropdown style="position: absolute; right: 0"> <div class="flex-center relative pb-5">
<div class="cursor-pointer"> <h2>{{ defaultSettings.title }}</h2>
<el-icon> <el-dropdown class="absolute! right-0">
<arrow-down /> <div class="cursor-pointer">
</el-icon> <el-icon><arrow-down /></el-icon>
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item> <el-dropdown-item>
<el-tag>{{ defaultSettings.version }}</el-tag> <el-tag>{{ defaultSettings.version }}</el-tag>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item @click="setLoginCredentials('root', '123456')"> <el-dropdown-item @click="setLoginCredentials('root', '123456')">
超级管理员：root/123456 超级管理员: root/123456
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item @click="setLoginCredentials('admin', '123456')"> <el-dropdown-item @click="setLoginCredentials('admin', '123456')">
系统管理员：admin/123456 系统管理员: admin/123456
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item @click="setLoginCredentials('test', '123456')"> <el-dropdown-item @click="setLoginCredentials('test', '123456')">
测试小游客：test/123456 测试小游客: test/123456
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
<el-form ref="loginFormRef" :model="loginFormData" :rules="loginRules" size="large">
<!-- 用户名 --> <!-- 用户名 -->
<el-form-item prop="username"> <el-form-item prop="username">
<div class="input-wrapper"> <el-input v-model.trim="loginFormData.username" :placeholder="t('login.username')">
<el-icon class="mx-2"> <template #prefix>
<User /> <el-icon :color="isDark ? 'white' : 'black'"><User /></el-icon>
</el-icon> </template>
<el-input </el-input>
ref="username"
v-model="loginFormData.username"
:placeholder="$t('login.username')"
name="username"
size="large"
class="h-[48px]"
/>
</div>
</el-form-item> </el-form-item>
<!-- 密码 --> <!-- 密码 -->
<el-tooltip :visible="isCapslock" :content="$t('login.capsLock')" placement="right"> <el-tooltip :visible="isCapsLock" :content="t('login.capsLock')" placement="right">
<el-form-item prop="password"> <el-form-item prop="password">
<div class="input-wrapper"> <el-input
<el-icon class="mx-2"> v-model.trim="loginFormData.password"
<Lock /> :placeholder="t('login.password')"
</el-icon> type="password"
<el-input show-password
v-model="loginFormData.password" @keyup="checkCapsLock"
:placeholder="$t('login.password')" @keyup.enter="handleLoginSubmit"
type="password" >
name="password" <template #prefix>
size="large" <el-icon :color="isDark ? 'white' : 'black'"><Lock /></el-icon>
class="h-[48px] pr-2" </template>
show-password </el-input>
@keyup="checkCapslock"
@keyup.enter="handleLoginSubmit"
/>
</div>
</el-form-item> </el-form-item>
</el-tooltip> </el-tooltip>
<!-- 验证码 --> <!-- 验证码 -->
<el-form-item prop="captchaCode"> <el-form-item prop="captchaCode">
<div class="input-wrapper"> <el-input
<div class="i-svg:captcha mx-2" /> v-model.trim="loginFormData.captchaCode"
:placeholder="t('login.captchaCode')"
<el-input @keyup.enter="handleLoginSubmit"
v-model="loginFormData.captchaCode" >
auto-complete="off" <template #prefix>
size="large" <div :class="['i-svg:captcha', isDark ? 'text-white' : 'text-black']" />
class="flex-1" </template>
:placeholder="$t('login.captchaCode')" <template #suffix>
@keyup.enter="handleLoginSubmit" <el-image :src="captchaBase64" class="w-[138px] cursor-pointer" @click="getCaptcha" />
/> </template>
</el-input>
<el-image :src="captchaBase64" class="captcha-img" @click="getCaptcha" />
</div>
</el-form-item> </el-form-item>
<div class="flex-x-between w-full py-1"> <div class="flex-x-between w-full">
<el-checkbox> <el-checkbox v-model="loginFormData.rememberMe">{{ t("login.rememberMe") }}</el-checkbox>
{{ $t("login.rememberMe") }} <el-link type="primary" @click="unfinished">{{ t("login.forgetPassword") }}</el-link>
</el-checkbox>
<el-link type="primary" href="/forget-password">
{{ $t("login.forgetPassword") }}
</el-link>
</div> </div>
<!-- 登录按钮 --> <!-- 登录按钮 -->
<el-button <el-button :loading="loading" type="primary" class="w-full" @click="handleLoginSubmit">
:loading="loading" {{ t("login.login") }}
type="primary"
size="large"
class="w-full"
@click.prevent="handleLoginSubmit"
>
{{ $t("login.login") }}
</el-button> </el-button>
<!-- 第三方登录 --> <!-- 第三方登录 -->
<el-divider> <el-divider>
<el-text size="small">{{ $t("login.otherLoginMethods") }}</el-text> <el-text size="small">{{ t("login.otherLoginMethods") }}</el-text>
</el-divider> </el-divider>
<div class="third-party-login"> <div class="flex-center gap-x-5 text-[var(--el-text-color-secondary)]">
<div class="i-svg:wechat" /> <div class="i-svg:wechat" />
<div class="i-svg:qq" /> <div class="i-svg:qq" />
<div class="i-svg:github" /> <div class="i-svg:github" />
@@ -136,12 +110,10 @@
</div> </div>
<!-- 登录页底部 --> <!-- 登录页底部 -->
<div class="login-footer"> <el-text size="small" class="py-2.5! fixed bottom-0 text-center">
<el-text size="small"> Copyright © 2021 - 2025 youlai.tech All Rights Reserved.
Copyright © 2021 - 2025 youlai.tech All Rights Reserved. <a href="http://beian.miit.gov.cn/" target="_blank">皖ICP备20006496号-2</a>
<a href="http://beian.miit.gov.cn/" target="_blank">皖ICP备20006496号-2</a> </el-text>
</el-text>
</div>
</div> </div>
</template> </template>
@@ -168,7 +140,7 @@ const loginFormRef = ref<FormInstance>();
const isDark = ref(settingsStore.theme === ThemeMode.DARK); // 是否暗黑模式 const isDark = ref(settingsStore.theme === ThemeMode.DARK); // 是否暗黑模式
const loading = ref(false); // 按钮 loading 状态 const loading = ref(false); // 按钮 loading 状态
const isCapslock = ref(false); // 是否大写锁定 const isCapsLock = ref(false); // 是否大写锁定
const captchaBase64 = ref(); // 验证码图片Base64字符串 const captchaBase64 = ref(); // 验证码图片Base64字符串
const loginFormData = ref<LoginFormData>({ const loginFormData = ref<LoginFormData>({
@@ -176,6 +148,7 @@ const loginFormData = ref<LoginFormData>({
password: "123456", password: "123456",
captchaKey: "", captchaKey: "",
captchaCode: "", captchaCode: "",
rememberMe: false,
}); });
const loginRules = computed(() => { const loginRules = computed(() => {
@@ -183,14 +156,14 @@ const loginRules = computed(() => {
username: [ username: [
{ {
required: true, required: true,
trigger: "blur", trigger: "change",
message: t("login.message.username.required"), message: t("login.message.username.required"),
}, },
], ],
password: [ password: [
{ {
required: true, required: true,
trigger: "blur", trigger: "change",
message: t("login.message.password.required"), message: t("login.message.password.required"),
}, },
{ {
@@ -202,7 +175,7 @@ const loginRules = computed(() => {
captchaCode: [ captchaCode: [
{ {
required: true, required: true,
trigger: "blur", trigger: "change",
message: t("login.message.captchaCode.required"), message: t("login.message.captchaCode.required"),
}, },
], ],
@@ -219,12 +192,13 @@ function getCaptcha() {
// 登录提交处理 // 登录提交处理
async function handleLoginSubmit() { async function handleLoginSubmit() {
// 1. 表单验证
const valid = await loginFormRef.value?.validate();
if (!valid) return;
loading.value = true;
try { try {
// 1. 表单验证
const valid = await loginFormRef.value?.validate();
if (!valid) return;
loading.value = true;
// 2. 执行登录 // 2. 执行登录
await userStore.login(loginFormData.value); await userStore.login(loginFormData.value);
@@ -275,10 +249,10 @@ const toggleTheme = () => {
}; };
// 检查输入大小写 // 检查输入大小写
function checkCapslock(event: KeyboardEvent) { function checkCapsLock(event: KeyboardEvent) {
// 防止浏览器密码自动填充时报错 // 防止浏览器密码自动填充时报错
if (event instanceof KeyboardEvent) { if (event instanceof KeyboardEvent) {
isCapslock.value = event.getModifierState("CapsLock"); isCapsLock.value = event.getModifierState("CapsLock");
} }
} }
@@ -288,138 +262,33 @@ const setLoginCredentials = (username: string, password: string) => {
loginFormData.value.password = password; loginFormData.value.password = password;
}; };
onMounted(() => { // 未实现功能提示
getCaptcha(); const unfinished = () => {
}); ElMessage.warning("该功能尚未完成，敬请期待！");
};
onMounted(() => getCaptcha());
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login { .login {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 20px;
overflow-y: auto;
background: url("@/assets/images/login-bg.jpg") no-repeat center right; background: url("@/assets/images/login-bg.jpg") no-repeat center right;
.login-header {
position: absolute;
top: 0;
display: flex;
justify-content: right;
width: 100%;
padding: 15px;
.logo {
width: 26px;
height: 26px;
}
.title {
margin: auto 5px;
font-size: 24px;
font-weight: bold;
color: #3b82f6;
}
}
.login-form {
display: flex;
flex-direction: column;
justify-content: center;
width: 460px;
padding: 40px;
overflow: hidden;
background-color: #fff;
border-radius: 5px;
box-shadow: var(--el-box-shadow-light);
@media (width <= 460px) {
width: 100%;
padding: 20px;
}
.form-title {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0 20px;
text-align: center;
}
.input-wrapper {
display: flex;
align-items: center;
width: 100%;
}
.captcha-img {
height: 48px;
cursor: pointer;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.third-party-login {
display: flex;
justify-content: center;
width: 100%;
color: var(--el-text-color-secondary);
*:not(:first-child) {
margin-left: 20px;
}
.icon {
cursor: pointer;
}
}
}
.login-footer {
position: fixed;
bottom: 0;
width: 100%;
padding: 10px 0;
text-align: center;
}
} }
:deep(.el-form-item) {
background: var(--el-input-bg-color);
border: 1px solid var(--el-border-color);
border-radius: 5px;
}
:deep(.el-input) {
.el-input__wrapper {
padding: 0;
background-color: transparent;
box-shadow: none;
&.is-focus,
&:hover {
box-shadow: none !important;
}
input:-webkit-autofill {
/* 通过延时渲染背景色变相去除背景颜色 */
transition: background-color 1000s ease-in-out 0s;
}
}
}
html.dark { html.dark {
.login { .login {
background: url("@/assets/images/login-bg-dark.jpg") no-repeat center right; background: url("@/assets/images/login-bg-dark.jpg") no-repeat center right;
.el-card {
.login-form {
background: transparent; background: transparent;
box-shadow: var(--el-box-shadow);
} }
} }
} }
.el-form-item {
margin-bottom: 20px;
}
:deep(.el-input) {
height: 48px;
.el-input__wrapper {
padding: 1px 10px;
}
}
</style> </style>