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;
/** 验证码 */
captchaCode: string;
/** 记住我 */
rememberMe: boolean;
}
/** 登录响应 */

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

@@ -1,132 +1,106 @@
<template>
<div class="login">
<div class="login flex-center wh-full relative overflow-scroll">
<!-- 登录页头部 -->
<div class="login-header">
<div class="flex-y-center">
<el-switch
v-model="isDark"
inline-prompt
active-icon="Moon"
inactive-icon="Sunny"
@change="toggleTheme"
/>
<lang-select class="ml-2 cursor-pointer" />
</div>
<div class="flex-x-end absolute top-0 w-full p-4">
<el-switch
v-model="isDark"
inline-prompt
active-icon="Moon"
inactive-icon="Sunny"
@change="toggleTheme"
/>
<lang-select class="ml-2 cursor-pointer" />
</div>
<!-- 登录页内容 -->
<div class="login-form">
<el-form ref="loginFormRef" :model="loginFormData" :rules="loginRules">
<div class="form-title">
<h2>{{ defaultSettings.title }}</h2>
<el-dropdown style="position: absolute; right: 0">
<div class="cursor-pointer">
<el-icon>
<arrow-down />
</el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<el-tag>{{ defaultSettings.version }}</el-tag>
</el-dropdown-item>
<el-dropdown-item @click="setLoginCredentials('root', '123456')">
超级管理员：root/123456
</el-dropdown-item>
<el-dropdown-item @click="setLoginCredentials('admin', '123456')">
系统管理员：admin/123456
</el-dropdown-item>
<el-dropdown-item @click="setLoginCredentials('test', '123456')">
测试小游客：test/123456
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div
class="m-5 w-full min-w-[335px] max-w-[460px] p-5 shadow-[var(--el-box-shadow-light)] sm:p-10"
:class="[isDark ? 'bg-transparent' : 'bg-white']"
>
<div class="flex-center relative pb-5">
<h2>{{ defaultSettings.title }}</h2>
<el-dropdown class="absolute! right-0">
<div class="cursor-pointer">
<el-icon><arrow-down /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<el-tag>{{ defaultSettings.version }}</el-tag>
</el-dropdown-item>
<el-dropdown-item @click="setLoginCredentials('root', '123456')">
超级管理员: root/123456
</el-dropdown-item>
<el-dropdown-item @click="setLoginCredentials('admin', '123456')">
系统管理员: admin/123456
</el-dropdown-item>
<el-dropdown-item @click="setLoginCredentials('test', '123456')">
测试小游客: test/123456
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<el-form ref="loginFormRef" :model="loginFormData" :rules="loginRules" size="large">
<!-- 用户名 -->
<el-form-item prop="username">
<div class="input-wrapper">
<el-icon class="mx-2">
<User />
</el-icon>
<el-input
ref="username"
v-model="loginFormData.username"
:placeholder="$t('login.username')"
name="username"
size="large"
class="h-[48px]"
/>
</div>
<el-input v-model.trim="loginFormData.username" :placeholder="t('login.username')">
<template #prefix>
<el-icon :color="isDark ? 'white' : 'black'"><User /></el-icon>
</template>
</el-input>
</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">
<div class="input-wrapper">
<el-icon class="mx-2">
<Lock />
</el-icon>
<el-input
v-model="loginFormData.password"
:placeholder="$t('login.password')"
type="password"
name="password"
size="large"
class="h-[48px] pr-2"
show-password
@keyup="checkCapslock"
@keyup.enter="handleLoginSubmit"
/>
</div>
<el-input
v-model.trim="loginFormData.password"
:placeholder="t('login.password')"
type="password"
show-password
@keyup="checkCapsLock"
@keyup.enter="handleLoginSubmit"
>
<template #prefix>
<el-icon :color="isDark ? 'white' : 'black'"><Lock /></el-icon>
</template>
</el-input>
</el-form-item>
</el-tooltip>
<!-- 验证码 -->
<el-form-item prop="captchaCode">
<div class="input-wrapper">
<div class="i-svg:captcha mx-2" />
<el-input
v-model="loginFormData.captchaCode"
auto-complete="off"
size="large"
class="flex-1"
:placeholder="$t('login.captchaCode')"
@keyup.enter="handleLoginSubmit"
/>
<el-image :src="captchaBase64" class="captcha-img" @click="getCaptcha" />
</div>
<el-input
v-model.trim="loginFormData.captchaCode"
:placeholder="t('login.captchaCode')"
@keyup.enter="handleLoginSubmit"
>
<template #prefix>
<div :class="['i-svg:captcha', isDark ? 'text-white' : 'text-black']" />
</template>
<template #suffix>
<el-image :src="captchaBase64" class="w-[138px] cursor-pointer" @click="getCaptcha" />
</template>
</el-input>
</el-form-item>
<div class="flex-x-between w-full py-1">
<el-checkbox>
{{ $t("login.rememberMe") }}
</el-checkbox>
<el-link type="primary" href="/forget-password">
{{ $t("login.forgetPassword") }}
</el-link>
<div class="flex-x-between w-full">
<el-checkbox v-model="loginFormData.rememberMe">{{ t("login.rememberMe") }}</el-checkbox>
<el-link type="primary" @click="unfinished">{{ t("login.forgetPassword") }}</el-link>
</div>
<!-- 登录按钮 -->
<el-button
:loading="loading"
type="primary"
size="large"
class="w-full"
@click.prevent="handleLoginSubmit"
>
{{ $t("login.login") }}
<el-button :loading="loading" type="primary" class="w-full" @click="handleLoginSubmit">
{{ t("login.login") }}
</el-button>
<!-- 第三方登录 -->
<el-divider>
<el-text size="small">{{ $t("login.otherLoginMethods") }}</el-text>
<el-text size="small">{{ t("login.otherLoginMethods") }}</el-text>
</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:qq" />
<div class="i-svg:github" />
@@ -136,12 +110,10 @@
</div>
<!-- 登录页底部 -->
<div class="login-footer">
<el-text size="small">
Copyright © 2021 - 2025 youlai.tech All Rights Reserved.
<a href="http://beian.miit.gov.cn/" target="_blank">皖ICP备20006496号-2</a>
</el-text>
</div>
<el-text size="small" class="py-2.5! fixed bottom-0 text-center">
Copyright © 2021 - 2025 youlai.tech All Rights Reserved.
<a href="http://beian.miit.gov.cn/" target="_blank">皖ICP备20006496号-2</a>
</el-text>
</div>
</template>
@@ -168,7 +140,7 @@ const loginFormRef = ref<FormInstance>();
const isDark = ref(settingsStore.theme === ThemeMode.DARK); // 是否暗黑模式
const loading = ref(false); // 按钮 loading 状态
const isCapslock = ref(false); // 是否大写锁定
const isCapsLock = ref(false); // 是否大写锁定
const captchaBase64 = ref(); // 验证码图片Base64字符串
const loginFormData = ref<LoginFormData>({
@@ -176,6 +148,7 @@ const loginFormData = ref<LoginFormData>({
password: "123456",
captchaKey: "",
captchaCode: "",
rememberMe: false,
});
const loginRules = computed(() => {
@@ -183,14 +156,14 @@ const loginRules = computed(() => {
username: [
{
required: true,
trigger: "blur",
trigger: "change",
message: t("login.message.username.required"),
},
],
password: [
{
required: true,
trigger: "blur",
trigger: "change",
message: t("login.message.password.required"),
},
{
@@ -202,7 +175,7 @@ const loginRules = computed(() => {
captchaCode: [
{
required: true,
trigger: "blur",
trigger: "change",
message: t("login.message.captchaCode.required"),
},
],
@@ -219,12 +192,13 @@ function getCaptcha() {
// 登录提交处理
async function handleLoginSubmit() {
// 1. 表单验证
const valid = await loginFormRef.value?.validate();
if (!valid) return;
loading.value = true;
try {
// 1. 表单验证
const valid = await loginFormRef.value?.validate();
if (!valid) return;
loading.value = true;
// 2. 执行登录
await userStore.login(loginFormData.value);
@@ -275,10 +249,10 @@ const toggleTheme = () => {
};
// 检查输入大小写
function checkCapslock(event: KeyboardEvent) {
function checkCapsLock(event: 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;
};
onMounted(() => {
getCaptcha();
});
// 未实现功能提示
const unfinished = () => {
ElMessage.warning("该功能尚未完成，敬请期待！");
};
onMounted(() => getCaptcha());
</script>
<style lang="scss" scoped>
.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;
.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 {
.login {
background: url("@/assets/images/login-bg-dark.jpg") no-repeat center right;
.login-form {
.el-card {
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>