feat: 修改登录页面
This commit is contained in:
gaoyunqi
3
.env
3
.env
@ -6,3 +6,6 @@ VITE_GLOB_APP_TITLE = Learun Pro
|
||||
|
||||
# spa shortname
|
||||
VITE_GLOB_APP_SHORT_NAME = learun_admin
|
||||
|
||||
# 应用名称
|
||||
VITE_SYSTEM_NAME = 数字新能源
|
||||
|
||||
@ -149,6 +149,7 @@ export const FLOW_ROUTE: AppRouteRecordRaw = {
|
||||
title: '审批流程'
|
||||
}
|
||||
},
|
||||
/* 菜单不支持复用，不同菜单如果path或者name一样会报错 */
|
||||
{
|
||||
path: 'flowList',
|
||||
name: 'FlowListPage',
|
||||
@ -156,6 +157,14 @@ export const FLOW_ROUTE: AppRouteRecordRaw = {
|
||||
meta: {
|
||||
title: '流程列表'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'flowList2',
|
||||
name: 'FlowListPage2',
|
||||
component: () => import('/@/views/secondDev/processTasksPage.vue'),
|
||||
meta: {
|
||||
title: '待办列表'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';
|
||||
|
||||
import {
|
||||
PAGE_NOT_FOUND_ROUTE,
|
||||
REDIRECT_ROUTE,
|
||||
SYSTEM_ROUTE,
|
||||
USERCENTER_ROUTE,
|
||||
FLOW_ROUTE,
|
||||
// CUSTOMFORM_ROUTE,
|
||||
PAGE_NOT_FOUND_ROUTE,
|
||||
REDIRECT_ROUTE,
|
||||
SYSTEM_ROUTE,
|
||||
USERCENTER_ROUTE,
|
||||
FLOW_ROUTE
|
||||
// CUSTOMFORM_ROUTE,
|
||||
} from '/@/router/routes/basic';
|
||||
|
||||
import { mainOutRoutes } from './mainOut';
|
||||
@ -18,41 +18,41 @@ const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
|
||||
const routeModuleList: AppRouteModule[] = [];
|
||||
|
||||
Object.keys(modules).forEach((key) => {
|
||||
const mod = modules[key].default || {};
|
||||
const modList = Array.isArray(mod) ? [...mod] : [mod];
|
||||
routeModuleList.push(...modList);
|
||||
const mod = modules[key].default || {};
|
||||
const modList = Array.isArray(mod) ? [...mod] : [mod];
|
||||
routeModuleList.push(...modList);
|
||||
});
|
||||
|
||||
export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, ...routeModuleList];
|
||||
|
||||
export const RootRoute: AppRouteRecordRaw = {
|
||||
path: '/',
|
||||
name: 'Root',
|
||||
redirect: PageEnum.BASE_HOME,
|
||||
meta: {
|
||||
title: 'Root',
|
||||
},
|
||||
path: '/',
|
||||
name: 'Root',
|
||||
redirect: PageEnum.BASE_HOME,
|
||||
meta: {
|
||||
title: 'Root'
|
||||
}
|
||||
};
|
||||
|
||||
export const LoginRoute: AppRouteRecordRaw = {
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('/@/views/sys/login/Login.vue'),
|
||||
meta: {
|
||||
title: t('登录页'),
|
||||
},
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('/@/views/secondDev/Login.vue'),
|
||||
meta: {
|
||||
title: t('登录页')
|
||||
}
|
||||
};
|
||||
|
||||
// Basic routing without permissions
|
||||
// 未经许可的基本路由
|
||||
export const basicRoutes = [
|
||||
LoginRoute,
|
||||
RootRoute,
|
||||
...mainOutRoutes,
|
||||
REDIRECT_ROUTE,
|
||||
PAGE_NOT_FOUND_ROUTE,
|
||||
SYSTEM_ROUTE,
|
||||
USERCENTER_ROUTE,
|
||||
FLOW_ROUTE,
|
||||
// CUSTOMFORM_ROUTE,
|
||||
LoginRoute,
|
||||
RootRoute,
|
||||
...mainOutRoutes,
|
||||
REDIRECT_ROUTE,
|
||||
PAGE_NOT_FOUND_ROUTE,
|
||||
SYSTEM_ROUTE,
|
||||
USERCENTER_ROUTE,
|
||||
FLOW_ROUTE
|
||||
// CUSTOMFORM_ROUTE,
|
||||
];
|
||||
|
||||
254
src/views/secondDev/Login.vue
Normal file
254
src/views/secondDev/Login.vue
Normal file
@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div :class="prefixCls" class="login-box relative w-full h-full">
|
||||
<div class="center-box">
|
||||
<div class="login-left-title">
|
||||
<div class="sub-title">{{ sysName }}</div>
|
||||
</div>
|
||||
<div :class="`${prefixCls}-form`">
|
||||
<LoginForm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import LoginForm from './LoginForm.vue';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { useAppStore } from '/@/store/modules/app';
|
||||
import { getLogoInfo } from '/@/api/system/login';
|
||||
import { ref } from 'vue';
|
||||
import { LogoConfig } from '/#/config';
|
||||
|
||||
const appStore = useAppStore();
|
||||
defineProps({
|
||||
sessionTimeout: {
|
||||
type: Boolean
|
||||
}
|
||||
});
|
||||
|
||||
const { prefixCls } = useDesign('login');
|
||||
const sysName = ref(import.meta.env.VITE_SYSTEM_NAME);
|
||||
|
||||
let logoConfig = ref<LogoConfig>({});
|
||||
let show = ref(false);
|
||||
getLogoInfo().then((res) => {
|
||||
show.value = true;
|
||||
logoConfig.value = {
|
||||
companyName: res.companyName,
|
||||
shortName: res.shortName,
|
||||
refreshLogoUrl: res.refreshLogoUrl,
|
||||
backgroundLogoUrl: res.backgroundLogoUrl,
|
||||
designerLogoUrl: res.designerLogoUrl,
|
||||
loginLogoUrl: res.loginLogoUrl,
|
||||
menuLogoUrl: res.menuLogoUrl
|
||||
};
|
||||
appStore.setLogoConfig(logoConfig.value);
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-login';
|
||||
@logo-prefix-cls: ~'@{namespace}-app-logo';
|
||||
@countdown-prefix-cls: ~'@{namespace}-countdown-input';
|
||||
@dark-bg: linear-gradient(to bottom, #364876, #112049);
|
||||
|
||||
.vben-login-form {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
display: flex;
|
||||
background: linear-gradient(180deg, #00356d 0%, rgb(0 53 109 / 0%) 100%), linear-gradient(180deg, #0074d3 2%, #011853 100%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo-box {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.logo-box img {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.center-box {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.login-left-title {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.login-left-title .title {
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-left-title .sub-title {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: #5e95ff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-box .right-box {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fixed-tool {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
top: 40px;
|
||||
display: flex;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.right-top-box {
|
||||
width: 400px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.login-box {
|
||||
background: @dark-bg;
|
||||
}
|
||||
|
||||
.login-left-title {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.login-left-title .title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.@{prefix-cls} {
|
||||
background-color: @dark-bg;
|
||||
|
||||
// &::before {
|
||||
// background-image: url(/@/assets/svg/login-bg-dark.svg);
|
||||
// }
|
||||
|
||||
.ant-input,
|
||||
.ant-input-password {
|
||||
background-color: #232a3b;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper {
|
||||
border-color: #525e7c;
|
||||
background-color: #232a3b;
|
||||
}
|
||||
|
||||
.ant-checkbox-inner {
|
||||
border-color: #525e7c;
|
||||
}
|
||||
|
||||
.ant-btn:not(.ant-btn-link, .ant-btn-primary) {
|
||||
border: 1px solid #4a5569;
|
||||
}
|
||||
|
||||
&-form {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.app-iconify {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
input.fix-auto-fill,
|
||||
.fix-auto-fill input {
|
||||
-webkit-text-fill-color: #c9d1d9 !important;
|
||||
box-shadow: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls} {
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
@media (max-width: @screen-xl) {
|
||||
background-color: @dark-bg;
|
||||
|
||||
.@{prefix-cls}-form {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.@{logo-prefix-cls} {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
height: 30px;
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.@{logo-prefix-cls} {
|
||||
display: flex;
|
||||
width: 60%;
|
||||
height: 80px;
|
||||
|
||||
&__title {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-sign-in-way {
|
||||
.anticon {
|
||||
font-size: 22px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type='checkbox']) {
|
||||
min-width: 320px;
|
||||
|
||||
@media (max-width: @screen-xl) {
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-lg) {
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-md) {
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{countdown-prefix-cls} input {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.ant-divider-inner-text {
|
||||
font-size: 12px;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
226
src/views/secondDev/LoginForm.vue
Normal file
226
src/views/secondDev/LoginForm.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<Form v-show="getShow" ref="formRef" :model="formData" :rules="getFormRules" class="p-4 enter-x form-box" @keypress.enter="handleLogin">
|
||||
<div>
|
||||
<FormItem class="enter-x" name="account">
|
||||
<label class="form-title"> {{ t('账号') }}</label>
|
||||
<Input v-model:value="formData.account" :placeholder="t('账号')" class="fix-auto-fill" size="large" style="height: 58px">
|
||||
<template #prefix>
|
||||
<IconFontSymbol class="user-icon" icon="yonghu-xianxing" />
|
||||
</template>
|
||||
</Input>
|
||||
</FormItem>
|
||||
<FormItem class="enter-x" name="password">
|
||||
<label class="form-title"> {{ t('密码') }}</label>
|
||||
<InputPassword v-model:value="formData.password" :placeholder="t('密码')" size="large" style="height: 58px" visibilityToggle>
|
||||
<template #prefix>
|
||||
<IconFontSymbol class="user-icon" icon="mima" />
|
||||
</template>
|
||||
</InputPassword>
|
||||
</FormItem>
|
||||
|
||||
<ARow class="enter-x">
|
||||
<ACol :span="12">
|
||||
<FormItem>
|
||||
<!-- No logic, you need to deal with it yourself -->
|
||||
<Checkbox v-model:checked="rememberMe" class="f-16" size="small">
|
||||
{{ t('记住我') }}
|
||||
</Checkbox>
|
||||
</FormItem>
|
||||
</ACol>
|
||||
<!-- <ACol :span="12">
|
||||
<FormItem :style="{ 'text-align': 'right' }">
|
||||
No logic, you need to deal with it yourself
|
||||
<Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
|
||||
{{ t('忘记密码？') }}
|
||||
</Button>
|
||||
</FormItem>
|
||||
</ACol> -->
|
||||
</ARow>
|
||||
|
||||
<FormItem class="enter-x">
|
||||
<Button :loading="loading" :style="{ 'border-radius': '35px' }" block class="sub-button" type="primary" @click="handleLogin">
|
||||
{{ t('登录') }}
|
||||
</Button>
|
||||
</FormItem>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, unref, computed, onMounted } from 'vue';
|
||||
import { Checkbox, Form, Input, Row, Col, Button } from 'ant-design-vue';
|
||||
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from '/@/views/sys/login/useLogin';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { Base64 } from 'js-base64';
|
||||
|
||||
import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const ACol = Col;
|
||||
const ARow = Row;
|
||||
const FormItem = Form.Item;
|
||||
const InputPassword = Input.Password;
|
||||
const { t } = useI18n();
|
||||
const { notification, createErrorModal } = useMessage();
|
||||
const { prefixCls } = useDesign('login');
|
||||
const userStore = useUserStore();
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
|
||||
const { getLoginState } = useLoginState();
|
||||
const { getFormRules } = useFormRules();
|
||||
|
||||
const formRef = ref();
|
||||
// const iframeRef = ref();
|
||||
const loading = ref(false);
|
||||
const rememberMe = ref(false);
|
||||
|
||||
const formData = reactive({
|
||||
account: 'admin',
|
||||
password: '123456'
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
//如果是第三方登录跳转回来 会携带token
|
||||
if (currentRoute.value.query.token) {
|
||||
try {
|
||||
loading.value = true;
|
||||
const userInfo = await userStore.oauthLogin({
|
||||
token: currentRoute.value.query.token as string,
|
||||
mode: 'none' //不要默认的错误提示
|
||||
});
|
||||
if (userInfo) {
|
||||
notification.success({
|
||||
message: t('登录成功'),
|
||||
description: `${t('欢迎回来')}: ${userInfo.name}`,
|
||||
duration: 3
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
createErrorModal({
|
||||
title: t('错误提示'),
|
||||
content: (error as unknown as Error).message || t('网络异常，请检查您的网络连接是否正常!'),
|
||||
getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
//如果第三方登录 登录错误 会携带错误信息
|
||||
if (currentRoute.value.query.error) {
|
||||
createErrorModal({
|
||||
title: t('错误提示'),
|
||||
content: t(currentRoute.value.query.error as string),
|
||||
getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body
|
||||
});
|
||||
}
|
||||
const loginInfo = window.localStorage.getItem('USER__LOGIN__INFO__');
|
||||
if (loginInfo) {
|
||||
formData.account = Base64.decode(JSON.parse(loginInfo).account);
|
||||
formData.password = Base64.decode(JSON.parse(loginInfo).password);
|
||||
}
|
||||
});
|
||||
|
||||
const { validForm } = useFormValid(formRef);
|
||||
|
||||
//onKeyStroke('Enter', handleLogin);
|
||||
|
||||
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
|
||||
|
||||
async function handleLogin() {
|
||||
const data = await validForm();
|
||||
if (!data) return;
|
||||
try {
|
||||
loading.value = true;
|
||||
const userInfo = await userStore.login({
|
||||
password: data.password,
|
||||
userName: data.account,
|
||||
deviceType: 0, //pc-0,app-1
|
||||
mode: 'none' //不要默认的错误提示
|
||||
});
|
||||
if (userInfo) {
|
||||
notification.success({
|
||||
message: t('登录成功'),
|
||||
description: `${t('欢迎回来')}: ${userInfo.name}`,
|
||||
duration: 3
|
||||
});
|
||||
if (rememberMe.value) {
|
||||
const info = {
|
||||
account: Base64.encode(data.account),
|
||||
password: Base64.encode(data.password)
|
||||
};
|
||||
window.localStorage.setItem('USER__LOGIN__INFO__', JSON.stringify(info));
|
||||
} else {
|
||||
window.localStorage.removeItem('USER__LOGIN__INFO__');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
createErrorModal({
|
||||
title: t('错误提示'),
|
||||
content: (error as unknown as Error).message || t('网络异常，请检查您的网络连接是否正常!'),
|
||||
getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.form-box {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.f-16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-checkbox-inner) {
|
||||
border-color: #ced5f2;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item input[type='checkbox']) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.sub-button {
|
||||
height: 60px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ant-form label {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
font-size: 26px;
|
||||
margin-right: 8px;
|
||||
color: #707c92;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper {
|
||||
border-color: #ced5f2;
|
||||
border-style: none none solid;
|
||||
}
|
||||
|
||||
:deep(.ant-input-password-icon) {
|
||||
font-size: 20px;
|
||||
color: #707c92;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper-lg) {
|
||||
padding-left: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user