suixy
/
energy-visual-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(login): 重构登录页面布局与样式

Browse Source
main
zangch@mesnac.com 3 months ago
parent 0ad92caa81
commit 6c9238c07c
1 changed files with 379 additions and 218 deletions
Show Stats Download Patch File Download Diff File

597
src/views/login.vue
Unescape Escape View File

@ -1,86 +1,106 @@
<template>
<div class="login">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<div class="title-box">
<h3 class="title">{{ title }}</h3>
<lang-select />
</div>
<el-form-item v-if="tenantEnabled" prop="tenantId">
<el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')" style="width: 100%">
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
<template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
</el-select>
</el-form-item>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" :placeholder="proxy.$t('login.username')">
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
size="large"
auto-complete="off"
:placeholder="proxy.$t('login.password')"
@keyup.enter="handleLogin"
>
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item v-if="captchaEnabled" prop="code">
<el-input
v-model="loginForm.code"
size="large"
auto-complete="off"
:placeholder="proxy.$t('login.code')"
style="width: 63%"
@keyup.enter="handleLogin"
>
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
</el-input>
<div class="login-code">
<img :src="codeUrl" class="login-code-img" @click="getCode" />
<div class="login-page">
<div class="login-shell">
<section class="brand-panel">
<div class="brand-badge">Hawei Plus Secure Portal</div>
<h1>{{ displayTitle }}</h1>
<p class="brand-desc">
海威PLUS 当前统一承接实时曲线、历史曲线、报表分析和报警处置等核心入口。登录后可直接进入监测概览、趋势分析与异常处理页面。
</p>
<div class="brand-grid">
<div v-for="item in brandCards" :key="item.title" class="brand-card">
<span class="brand-card-label">{{ item.title }}</span>
<strong class="brand-card-value">{{ item.value }}</strong>
<p>{{ item.desc }}</p>
</div>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">{{ proxy.$t('login.rememberPassword') }}</el-checkbox>
<el-form-item style="float: right">
<el-button circle :title="proxy.$t('login.social.wechat')" @click="doSocialLogin('wechat')">
<svg-icon icon-class="wechat" />
</el-button>
<el-button circle :title="proxy.$t('login.social.maxkey')" @click="doSocialLogin('maxkey')">
<svg-icon icon-class="maxkey" />
</el-button>
<el-button circle :title="proxy.$t('login.social.topiam')" @click="doSocialLogin('topiam')">
<svg-icon icon-class="topiam" />
</el-button>
<el-button circle :title="proxy.$t('login.social.gitee')" @click="doSocialLogin('gitee')">
<svg-icon icon-class="gitee" />
</el-button>
<el-button circle :title="proxy.$t('login.social.github')" @click="doSocialLogin('github')">
<svg-icon icon-class="github" />
</el-button>
</el-form-item>
<el-form-item style="width: 100%">
<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
<span v-if="!loading">{{ proxy.$t('login.login') }}</span>
<span v-else>{{ proxy.$t('login.logging') }}</span>
</el-button>
<div v-if="register" style="float: right">
<router-link class="link-type" :to="'/register'">{{ proxy.$t('login.switchRegisterPage') }}</router-link>
<div class="brand-tags">
<el-tag effect="dark">实时曲线</el-tag>
<el-tag effect="plain">历史曲线</el-tag>
<el-tag effect="plain">报警与报表</el-tag>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
</section>
<section class="form-panel">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<div class="title-box">
<div>
<p class="form-eyebrow">Secure Access</p>
<h3 class="title">登录系统</h3>
</div>
<lang-select />
</div>
<el-form-item v-if="tenantEnabled" prop="tenantId">
<el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')" style="width: 100%">
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId" />
<template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
</el-select>
</el-form-item>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" :placeholder="proxy.$t('login.username')">
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
size="large"
auto-complete="off"
:placeholder="proxy.$t('login.password')"
@keyup.enter="handleLogin"
>
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item v-if="captchaEnabled" prop="code">
<el-input
v-model="loginForm.code"
size="large"
auto-complete="off"
:placeholder="proxy.$t('login.code')"
style="width: 63%"
@keyup.enter="handleLogin"
>
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
</el-input>
<div class="login-code">
<img :src="codeUrl" class="login-code-img" @click="getCode" />
</div>
</el-form-item>
<div class="login-tools">
<el-checkbox v-model="loginForm.rememberMe">{{ proxy.$t('login.rememberPassword') }}</el-checkbox>
<span class="login-tip">当前环境已关闭第三方登录入口，统一使用账号密码认证。</span>
</div>
<el-form-item style="width: 100%">
<el-button :loading="loading" size="large" type="primary" class="submit-btn" @click.prevent="handleLogin">
<span v-if="!loading">{{ proxy.$t('login.login') }}</span>
<span v-else>{{ proxy.$t('login.logging') }}</span>
</el-button>
<div v-if="register" class="register-entry">
<router-link class="link-type" :to="'/register'">{{ proxy.$t('login.switchRegisterPage') }}</router-link>
</div>
</el-form-item>
</el-form>
</section>
</div>
<div class="el-login-footer">
<span>Copyright © 2018-2026 疯狂的狮子Li All Rights Reserved.</span>
<span>Copyright © 2018-2026 海威PLUS All Rights Reserved.</span>
</div>
</div>
</template>
<script setup lang="ts">
import { getCodeImg, getTenantList } from '@/api/login';
import { authRouterUrl } from '@/api/system/social/auth';
import { useUserStore } from '@/store/modules/user';
import { LoginData, TenantVO } from '@/api/types';
import { to } from 'await-to-js';
@ -89,11 +109,17 @@ import { useI18n } from 'vue-i18n';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const title = import.meta.env.VITE_APP_TITLE;
const displayTitle = '海威PLUS';
const userStore = useUserStore();
const router = useRouter();
const { t } = useI18n();
const brandCards = [
{ title: '当前入口', value: '4 类', desc: '覆盖实时曲线、历史曲线、报表分析与报警处理。' },
{ title: '登录方式', value: '统一认证', desc: '当前环境统一使用账号密码登录。' },
{ title: '页面风格', value: '业务聚焦', desc: '只保留当前项目已经落地的功能入口与文案。' }
];
const loginForm = ref<LoginData>({
tenantId: '000000',
username: 'admin',
@ -134,49 +160,42 @@ watch(
const handleLogin = () => {
loginRef.value?.validate(async (valid: boolean, fields: any) => {
if (valid) {
loading.value = true;
// 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码
if (loginForm.value.rememberMe) {
localStorage.setItem('tenantId', String(loginForm.value.tenantId));
localStorage.setItem('username', String(loginForm.value.username));
localStorage.setItem('password', String(loginForm.value.password));
localStorage.setItem('rememberMe', String(loginForm.value.rememberMe));
} else {
// 否则移除
localStorage.removeItem('tenantId');
localStorage.removeItem('username');
localStorage.removeItem('password');
localStorage.removeItem('rememberMe');
}
// 调用action的登录方法
const [err] = await to(userStore.login(loginForm.value));
if (!err) {
const redirectUrl = redirect.value || '/';
await router.push(redirectUrl);
loading.value = false;
} else {
loading.value = false;
// 重新获取验证码
if (captchaEnabled.value) {
await getCode();
}
}
} else {
if (!valid) {
console.log('error submit!', fields);
return;
}
loading.value = true;
if (loginForm.value.rememberMe) {
localStorage.setItem('tenantId', String(loginForm.value.tenantId));
localStorage.setItem('username', String(loginForm.value.username));
localStorage.setItem('password', String(loginForm.value.password));
localStorage.setItem('rememberMe', String(loginForm.value.rememberMe));
} else {
localStorage.removeItem('tenantId');
localStorage.removeItem('username');
localStorage.removeItem('password');
localStorage.removeItem('rememberMe');
}
const [err] = await to(userStore.login(loginForm.value));
if (!err) {
await router.push(redirect.value || '/');
loading.value = false;
return;
}
loading.value = false;
if (captchaEnabled.value) {
await getCode();
}
});
};
/**
* 获取验证码
*/
const getCode = async () => {
const res = await getCodeImg();
const { data } = res;
captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled;
if (captchaEnabled.value) {
// 刷新验证码时清空输入框
loginForm.value.code = '';
codeUrl.value = 'data:image/gif;base64,' + data.img;
loginForm.value.uuid = data.uuid;
@ -192,39 +211,21 @@ const getLoginData = () => {
tenantId: tenantId === null ? String(loginForm.value.tenantId) : tenantId,
username: username === null ? String(loginForm.value.username) : username,
password: password === null ? String(loginForm.value.password) : String(password),
rememberMe: rememberMe === null ? false : Boolean(rememberMe)
rememberMe: rememberMe === null ? false : rememberMe === 'true'
} as LoginData;
};
/**
* 获取租户列表
*/
const initTenantList = async () => {
const { data } = await getTenantList(false);
tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
if (tenantEnabled.value) {
tenantList.value = data.voList;
if (tenantList.value != null && tenantList.value.length !== 0) {
if (tenantList.value && tenantList.value.length !== 0) {
loginForm.value.tenantId = tenantList.value[0].tenantId;
}
}
};
/**
* 第三方登录
* @param type
*/
const doSocialLogin = (type: string) => {
authRouterUrl(type, loginForm.value.tenantId).then((res: any) => {
if (res.code === HttpStatus.SUCCESS) {
// 获取授权地址跳转
window.location.href = res.data;
} else {
ElMessage.error(res.msg);
}
});
};
onMounted(() => {
getCode();
initTenantList();
@ -233,131 +234,253 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.login {
.login-page {
position: relative;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url('../assets/images/login-background.jpg');
background-size: cover;
background-position: center;
justify-content: center;
padding: 32px 20px 72px;
background:
radial-gradient(circle at top right, rgba(37, 99, 235, 0.28), transparent 24%),
radial-gradient(circle at left center, rgba(20, 184, 166, 0.16), transparent 28%),
linear-gradient(135deg, #0f172a 0%, #102a43 42%, #0f766e 100%);
overflow: hidden;
}
.login-page::before,
.login-page::after {
content: '';
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
filter: blur(6px);
}
.login-page::before {
width: 360px;
height: 360px;
inset: -120px auto auto -80px;
}
.login-page::after {
width: 300px;
height: 300px;
inset: auto -80px -120px auto;
}
.login-shell {
position: relative;
z-index: 1;
width: min(1180px, 100%);
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
gap: 22px;
}
.brand-panel,
.form-panel {
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(14px);
box-shadow: 0 24px 80px rgba(2, 12, 27, 0.28);
}
.brand-panel {
padding: 30px;
color: #ffffff;
}
.brand-badge,
.form-eyebrow {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.brand-badge {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.88);
}
.brand-panel h1 {
margin: 18px 0 0;
font-size: 38px;
line-height: 1.18;
}
.brand-desc {
max-width: 620px;
margin: 16px 0 0;
color: rgba(255, 255, 255, 0.82);
line-height: 1.85;
}
.brand-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 28px;
}
.brand-card {
padding: 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.16);
}
.brand-card-label {
display: block;
color: rgba(255, 255, 255, 0.72);
font-size: 12px;
}
.brand-card-value {
display: block;
margin-top: 10px;
font-size: 26px;
font-weight: 700;
}
.brand-card p {
margin: 10px 0 0;
color: rgba(255, 255, 255, 0.78);
line-height: 1.6;
font-size: 13px;
}
.brand-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
}
.form-panel {
padding: 20px;
display: flex;
align-items: center;
}
.login-form {
width: 100%;
border-radius: 24px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(255, 255, 255, 0.5);
padding: 30px 28px 14px;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}
.title-box {
display: flex;
align-items: center;
gap: 8px;
.title {
margin: 0px auto 26px auto;
text-align: center;
color: var(--el-text-color-primary);
font-weight: 600;
letter-spacing: 0.5px;
}
:deep(.lang-select--style) {
line-height: 0;
color: var(--el-text-color-secondary);
}
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 22px;
}
.login-form {
border-radius: var(--app-radius-lg);
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(255, 255, 255, 0.5);
width: min(420px, 90vw);
padding: 32px 30px 12px 30px;
z-index: 1;
box-shadow: var(--app-shadow-lg);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
.el-input {
height: 40px;
input {
height: 40px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 0px;
}
.form-eyebrow {
background: rgba(37, 99, 235, 0.08);
color: #2563eb;
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
.title {
margin: 12px 0 0;
color: #0f172a;
font-weight: 700;
letter-spacing: 0.3px;
}
.login-form .el-input {
height: 44px;
}
.login-form .el-input input {
height: 44px;
}
.input-icon {
height: 43px;
width: 14px;
margin-left: 0;
}
.login-form :deep(.el-input__wrapper) {
background-color: rgba(255, 255, 255, 0.9);
background-color: rgba(248, 250, 252, 0.92);
}
.login-form :deep(.el-input__wrapper.is-focus) {
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}
.login-form :deep(.el-button--primary) {
border-radius: var(--app-radius-md);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
.login-tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 22px;
}
.login-form :deep(.el-button.is-circle) {
background: rgba(15, 23, 42, 0.04);
border: 1px solid rgba(15, 23, 42, 0.08);
color: var(--el-text-color-regular);
.login-tip {
color: #64748b;
font-size: 12px;
text-align: right;
}
.login-form :deep(.el-button.is-circle:hover) {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.2);
.submit-btn {
width: 100%;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(37, 99, 235, 0.24);
}
.register-entry {
float: right;
margin-top: 12px;
}
.login-code {
width: calc(37% - 10px);
height: 40px;
height: 44px;
float: right;
margin-left: 10px;
box-sizing: border-box;
border-radius: var(--app-radius-sm);
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--el-border-color-light);
img {
cursor: pointer;
vertical-align: middle;
display: block;
width: 100%;
height: 40px;
object-fit: cover;
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.75);
font-family: Arial, serif;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 40px;
padding-left: 0;
display: block;
width: 100%;
height: 44px;
cursor: pointer;
object-fit: cover;
}
.el-login-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
color: rgba(255, 255, 255, 0.72);
font-size: 12px;
letter-spacing: 0.06em;
}
:global(html.dark) {
.login-form {
background: rgba(17, 24, 39, 0.9);
background: rgba(17, 24, 39, 0.92);
border-color: rgba(148, 163, 184, 0.2);
}
@ -365,14 +488,52 @@ onMounted(() => {
background-color: rgba(17, 24, 39, 0.7);
}
.login-form :deep(.el-button.is-circle) {
background: rgba(148, 163, 184, 0.12);
border-color: rgba(148, 163, 184, 0.25);
.title {
color: #e5e7eb;
}
.el-login-footer {
color: rgba(226, 232, 240, 0.65);
.login-tip {
color: rgba(226, 232, 240, 0.68);
}
}
@media (max-width: 1080px) {
.login-shell {
grid-template-columns: 1fr;
}
.brand-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.login-page {
padding: 16px 12px 64px;
}
.brand-panel,
.form-panel,
.login-form {
border-radius: 20px;
}
.brand-panel,
.login-form {
padding: 20px;
}
.brand-panel h1 {
font-size: 28px;
}
.login-tools {
align-items: flex-start;
flex-direction: column;
}
.login-tip {
text-align: left;
}
}
</style>

Write Preview
Loading…
Cancel
Save