wuyongqi/beautifier-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'优化登陆页面'

Browse Source
This commit is contained in:
张磊
2026-04-03 16:53:46 +08:00
parent 04e94d23ed
commit e49108eb76
1 changed files with 186 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/login/index.vue
+186 -261
View File
@@ -1,85 +1,35 @@
<template>
<div class="login-container">
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="on"
label-position="left"
>
<div class="title-container">
<h3 class="title">Anjie - {{ $t('login.title') }}</h3>
<!-- <lang-select class="set-language" /> -->
<div class="login-page">
<div class="login-card">
<div class="login-card__header">
<h1 class="login-card__title"> <img src="http://localhost:3078/src/assets/logo.png" alt="" style="margin-right: 10px;"> 皮肤检测仪管理平台</h1>
</div>
<el-form-item prop="name">
<span class="svg-container">
</span>
<el-input
ref="name"
v-model="loginForm.username"
:placeholder="$t('login.username')"
name="name"
type="text"
tabindex="1"
:prefix-icon="User"
autocomplete="off"
maxlength="20"
/>
</el-form-item>
<el-tooltip
:disabled="capslockTooltipDisabled"
content="Caps lock is On"
placement="right"
>
<el-form-item prop="pwd">
<span class="svg-container">
</span>
<el-input
ref="passwordRef"
:key="passwordType"
v-model="loginForm.password"
:type="passwordType"
placeholder="Password"
name="pwd"
:prefix-icon="Lock"
tabindex="2"
autocomplete="new-password"
@keyup="checkCapslock"
@blur="capslockTooltipDisabled = true"
@keyup.enter="handleLogin"
show-password
maxlength="20"
/>
<span class="show-pwd" @click="showPwd">
</span>
<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="off"
label-position="top" @submit.prevent>
<el-form-item prop="username" :label="$t('login.username')">
<el-input v-model="loginForm.username" :placeholder="$t('login.username')" name="username" type="text"
tabindex="1" :prefix-icon="User" autocomplete="off" maxlength="20" size="large" clearable />
</el-form-item>
</el-tooltip>
<div>
<el-text class="mx-1">默认账号:</el-text>
<el-text class="mx-1" type="primary">admin</el-text>
</div>
<div>
<el-text class="mx-1">默认密码:</el-text>
<el-text class="mx-1" type="primary">123456</el-text>
</div>
<div>
此环境为demo环境，请不要修改admin账号的密码
</div>
<el-button
size="default"
:loading="loading"
type="primary"
style="width: 100%; margin-bottom: 30px"
@click.prevent="handleLogin"
>{{ $t('login.login') }}
</el-button>
</el-form>
<el-tooltip :disabled="capslockTooltipDisabled" content="大写锁定已开启" placement="right">
<el-form-item prop="password" :label="$t('login.password')">
<el-input ref="passwordRef" v-model="loginForm.password" type="password" :placeholder="$t('login.password')"
name="password" :prefix-icon="Lock" tabindex="2" autocomplete="new-password" show-password maxlength="20"
size="large" @keyup="checkCapslock" @blur="capslockTooltipDisabled = true" @keyup.enter="handleLogin" />
</el-form-item>
</el-tooltip>
<div v-if="showCopyright == true" class="copyright">
<el-button class="login-submit" size="large" type="primary" :loading="loading" native-type="submit"
@click.prevent="handleLogin">
{{ $t('login.login') }}
</el-button>
</el-form>
</div>
<div v-if="showCopyright" class="login-footer">
<p>{{ $t('login.copyright') }}</p>
<p>{{ $t('login.icp') }}</p>
</div>
@@ -87,51 +37,49 @@
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, watch, nextTick } from 'vue';
import { onMounted, reactive, ref, toRefs, watch } from 'vue';
// 组件依赖
import { ElForm, ElInput } from 'element-plus';
import { ElForm } from 'element-plus';
import router from '@/router';
import { User, Lock} from '@element-plus/icons-vue';
import { User, Lock } from '@element-plus/icons-vue';
// 状态管理依赖
import useStore from '@/store';
// API依赖
import { useRoute } from 'vue-router';
import { useRoute, type LocationQueryRaw } from 'vue-router';
import { LoginFormData } from '@/types/api/system/login';
const { user} = useStore();
const { user } = useStore();
const route = useRoute();
const loginFormRef = ref(ElForm);
const passwordRef = ref(ElInput);
const loginFormRef = ref<InstanceType<typeof ElForm>>();
const passwordRef = ref();
const state = reactive({
redirect: '',
loginForm: {
username: 'develop',
password: '123456',
username: '',
password: '',
} as LoginFormData,
loginRules: {
username: [{ required: true, trigger: 'blur' }],
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
password: [
{ required: true, trigger: 'blur', validator: validatePassword },
{ required: true, validator: validatePassword, trigger: 'blur' },
],
},
loading: false,
passwordType: 'password',
captchaBase64: '',
// 大写提示禁用
capslockTooltipDisabled: true,
otherQuery: {},
otherQuery: {} as LocationQueryRaw,
clientHeight: document.documentElement.clientHeight,
showCopyright: true,
});
function validatePassword(rule: any, value: any, callback: any) {
if (value.length < 6) {
callback(new Error('The password can not be less than 6 digits'));
function validatePassword(_rule: unknown, value: string, callback: (e?: Error) => void) {
if (!value) {
callback(new Error('请输入密码'));
} else if (value.length < 6) {
callback(new Error('密码长度不能少于 6 位'));
} else {
callback();
}
@@ -141,44 +89,31 @@ const {
loginForm,
loginRules,
loading,
passwordType,
capslockTooltipDisabled,
showCopyright,
} = toRefs(state);
function checkCapslock(e: any) {
function checkCapslock(e: KeyboardEvent) {
const { key } = e;
state.capslockTooltipDisabled =
key && key.length === 1 && key >= 'A' && key <= 'Z';
}
function showPwd() {
if (state.passwordType === 'password') {
state.passwordType = '';
} else {
state.passwordType = 'password';
}
nextTick(() => {
passwordRef.value.focus();
});
!(key && key.length === 1 && key >= 'A' && key <= 'Z');
}
function handleLogin() {
loginFormRef.value.validate((valid: boolean) => {
if (valid) {
state.loading = true;
user
.login(state.loginForm)
.then(() => {
router.push({ path: state.redirect || '/', query: state.otherQuery });
state.loading = false;
})
.catch(() => {
state.loading = false;
});
} else {
return false;
loginFormRef.value?.validate((valid: boolean) => {
if (!valid) {
return;
}
state.loading = true;
user
.login(state.loginForm)
.then(() => {
router.push({ path: state.redirect || '/', query: state.otherQuery });
state.loading = false;
})
.catch(() => {
state.loading = false;
});
});
}
@@ -187,22 +122,20 @@ watch(
() => {
const query = route.query;
if (query) {
state.redirect = query.redirect as string;
state.redirect = (query.redirect as string) || '';
state.otherQuery = getOtherQuery(query);
}
},
{
immediate: true,
}
{ immediate: true }
);
function getOtherQuery(query: any) {
return Object.keys(query).reduce((acc: any, cur: any) => {
function getOtherQuery(query: LocationQueryRaw): LocationQueryRaw {
return Object.keys(query).reduce((acc: LocationQueryRaw, cur: string) => {
if (cur !== 'redirect') {
acc[cur] = query[cur];
}
return acc;
}, {});
}, {} as LocationQueryRaw);
}
onMounted(() => {
@@ -216,150 +149,142 @@ onMounted(() => {
});
</script>
<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;
/* reset element-ui css */
.login-container {
.title-container {
position: relative;
.title {
font-size: 26px;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
.set-language {
color: #fff;
position: absolute;
top: 3px;
font-size: 18px;
right: 0px;
cursor: pointer;
}
}
.el-input {
display: inline-block;
height: 36px;
width: 85%;
.el-input__wrapper {
padding: 0;
background: transparent;
box-shadow: none;
width: 100%;
.el-input__inner {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
color: $light_gray;
height: 36px;
caret-color: $cursor;
&:-webkit-autofill {
box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: $cursor !important;
}
}
}
}
.el-input__inner {
&:hover {
border-color: var(--el-input-hover-border, var(--el-border-color-hover));
box-shadow: none;
}
box-shadow: none;
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
.copyright {
width: 100%;
position: absolute;
bottom: 0;
font-size: 12px;
text-align: center;
color: #cccccc;
}
}
</style>
<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
$card-bg: #ffffff;
$page-bg-top: #e3edf5;
$page-bg-bottom: #ebf1f6;
$text-main: #303133;
$text-secondary: #606266;
.login-container {
min-height: 100%;
.login-page {
min-height: 100vh;
width: 100%;
background-color: $bg;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 20px 80px;
box-sizing: border-box;
background: linear-gradient(165deg, $page-bg-top 0%, $page-bg-bottom 45%, #dde8f2 100%);
position: relative;
overflow: auto;
}
.login-form {
position: relative;
width: 520px;
max-width: 100%;
padding: 160px 35px 0;
margin: 0 auto;
overflow: hidden;
.login-card {
width: 100%;
max-width: 420px;
padding: 40px 40px 36px;
background: $card-bg;
border-radius: 16px;
box-shadow:
0 4px 24px rgba(15, 35, 52, 0.08),
0 1px 3px rgba(15, 35, 52, 0.06);
border: 1px solid rgba(255, 255, 255, 0.8);
}
.login-card__header {
text-align: center;
margin-bottom: 28px;
}
.login-card__title {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
font-size: 22px;
font-weight: 600;
color: $text-main;
letter-spacing: 0.02em;
}
.login-card__subtitle {
margin: 10px 0 0;
font-size: 14px;
color: $text-secondary;
font-weight: 400;
}
.login-form {
:deep(.el-form-item__label) {
color: $text-secondary;
font-size: 13px;
margin-bottom: 6px;
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
:deep(.el-input__wrapper) {
border-radius: 10px;
box-shadow: 0 0 0 1px #dcdfe6 inset;
transition: box-shadow 0.2s ease;
span {
&:first-of-type {
margin-right: 16px;
}
&:hover {
box-shadow: 0 0 0 1px #c0c4cc inset;
}
&.is-focus {
box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}
}
}
.svg-container {
padding: 5px 10px;
color: $dark_gray;
vertical-align: middle;
width: 10px;
display: inline-block;
}
.login-hint {
margin: 8px 0 24px;
padding: 12px 14px;
font-size: 12px;
line-height: 1.6;
color: $text-secondary;
background: #f4f8fc;
border-radius: 10px;
border: 1px solid #e4ebf2;
.title-container {
position: relative;
p {
margin: 0 0 6px;
.title {
font-size: 26px;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
&:last-child {
margin-bottom: 0;
}
}
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
.login-hint__label {
color: #909399;
margin-right: 6px;
}
.login-hint__value {
color: var(--el-color-primary);
font-weight: 500;
}
.login-hint__note {
margin-top: 8px !important;
padding-top: 8px;
border-top: 1px dashed #dce4ed;
color: #909399;
font-size: 11px;
}
.login-submit {
width: 100%;
height: 44px;
font-size: 15px;
font-weight: 500;
border-radius: 10px;
letter-spacing: 0.12em;
}
.login-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
text-align: center;
font-size: 12px;
color: #909399;
p {
margin: 4px 0;
}
}
</style>