feat: 修改登录页面

.env

@@ -6,3 +6,6 @@ VITE_GLOB_APP_TITLE = Learun Pro
 
 # spa shortname
 VITE_GLOB_APP_SHORT_NAME = learun_admin
+
+# 应用名称
+VITE_SYSTEM_NAME = 数字新能源

src/router/routes/basic.ts

@@ -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: '待办列表'
+            }
         }
     ]
 };

src/router/routes/index.ts

@@ -1,12 +1,12 @@
 import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';
 
 import {
-  PAGE_NOT_FOUND_ROUTE,
+    PAGE_NOT_FOUND_ROUTE,
-  REDIRECT_ROUTE,
+    REDIRECT_ROUTE,
-  SYSTEM_ROUTE,
+    SYSTEM_ROUTE,
-  USERCENTER_ROUTE,
+    USERCENTER_ROUTE,
-  FLOW_ROUTE,
+    FLOW_ROUTE
-  // CUSTOMFORM_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 mod = modules[key].default || {};
-  const modList = Array.isArray(mod) ? [...mod] : [mod];
+    const modList = Array.isArray(mod) ? [...mod] : [mod];
-  routeModuleList.push(...modList);
+    routeModuleList.push(...modList);
 });
 
 export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, ...routeModuleList];
 
 export const RootRoute: AppRouteRecordRaw = {
-  path: '/',
+    path: '/',
-  name: 'Root',
+    name: 'Root',
-  redirect: PageEnum.BASE_HOME,
+    redirect: PageEnum.BASE_HOME,
-  meta: {
+    meta: {
-    title: 'Root',
+        title: 'Root'
-  },
+    }
 };
 
 export const LoginRoute: AppRouteRecordRaw = {
-  path: '/login',
+    path: '/login',
-  name: 'Login',
+    name: 'Login',
-  component: () => import('/@/views/sys/login/Login.vue'),
+    component: () => import('/@/views/secondDev/Login.vue'),
-  meta: {
+    meta: {
-    title: t('登录页'),
+        title: t('登录页')
-  },
+    }
 };
 
 // Basic routing without permissions
 // 未经许可的基本路由
 export const basicRoutes = [
-  LoginRoute,
+    LoginRoute,
-  RootRoute,
+    RootRoute,
-  ...mainOutRoutes,
+    ...mainOutRoutes,
-  REDIRECT_ROUTE,
+    REDIRECT_ROUTE,
-  PAGE_NOT_FOUND_ROUTE,
+    PAGE_NOT_FOUND_ROUTE,
-  SYSTEM_ROUTE,
+    SYSTEM_ROUTE,
-  USERCENTER_ROUTE,
+    USERCENTER_ROUTE,
-  FLOW_ROUTE,
+    FLOW_ROUTE
-  // CUSTOMFORM_ROUTE,
+    // CUSTOMFORM_ROUTE,
 ];

src/views/secondDev/Login.vue

@@ -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>

src/views/secondDev/LoginForm.vue

@@ -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>