fix: 安全入口逻辑调整 (#863)

frontend/src/api/helper/check-status.ts

@@ -13,7 +13,7 @@ export const checkStatus = (status: number, msg: string): void => {
             MsgError(msg ? msg : i18n.global.t('commons.res.notFound'));
             break;
         case 403:
-            router.replace({ path: '/login', params: { code: globalStore.entrance } });
+            router.replace({ name: 'entrance', params: { code: globalStore.entrance } });
             MsgError(msg ? msg : i18n.global.t('commons.res.forbidden'));
             break;
         case 500:

frontend/src/api/index.ts

@@ -43,7 +43,7 @@ class RequestHttp {
                 }
                 if (data.code == ResultEnum.OVERDUE || data.code == ResultEnum.FORBIDDEN) {
                     router.push({
-                        name: 'login',
+                        name: 'entrance',
                         params: { code: globalStore.entrance },
                     });
                     return Promise.reject(data);

frontend/src/components/app-layout/menu/index.vue

@@ -80,7 +80,7 @@ const logout = () => {
     })
         .then(() => {
             systemLogOut();
-            router.push({ name: 'login', params: { code: globalStore.entrance } });
+            router.push({ name: 'entrance', params: { code: globalStore.entrance } });
             globalStore.setLogStatus(false);
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
         })

frontend/src/routers/index.ts

@@ -17,7 +17,7 @@ router.beforeEach((to, from, next) => {
     const globalStore = GlobalStore();
     if (!globalStore.isLogin) {
         next({
-            name: 'login',
+            name: 'entrance',
             params: { code: globalStore.entrance },
         });
         NProgress.done();

frontend/src/routers/router.ts

@@ -58,7 +58,7 @@ menuList.unshift(homeRouter);
 export const routes: RouteRecordRaw[] = [
     homeRouter,
     {
-        path: '/login/:code?',
+        path: '/login',
         name: 'login',
         props: true,
         component: () => import('@/views/login/index.vue'),
@@ -67,6 +67,12 @@ export const routes: RouteRecordRaw[] = [
             key: 'login',
         },
     },
+    {
+        path: '/:code?',
+        name: 'entrance',
+        component: () => import('@/views/login/entrance/index.vue'),
+        props: true,
+    },
     ...routerArray,
     {
         path: '/:pathMatch(.*)',

frontend/src/views/login/entrance/index.vue

@@ -0,0 +1,142 @@
+<template>
+    <div>
+        <div class="login-backgroud" v-if="isSafety">
+            <div class="login-wrapper">
+                <div :class="screenWidth > 1110 ? 'left inline-block' : ''">
+                    <div class="login-title">
+                        <span>{{ $t('commons.login.title') }}</span>
+                    </div>
+                    <img src="@/assets/images/1panel-login.png" alt="" v-if="screenWidth > 1110" />
+                </div>
+                <div :class="screenWidth > 1110 ? 'right inline-block' : ''">
+                    <div class="login-container">
+                        <LoginForm ref="loginRef"></LoginForm>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-if="!isSafety">
+            <UnSafe />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="login">
+import { checkIsSafety } from '@/api/modules/auth';
+import LoginForm from '../components/login-form.vue';
+import UnSafe from '@/components/error-message/unsafe.vue';
+import { ref, onMounted } from 'vue';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
+
+const isSafety = ref(true);
+const screenWidth = ref(null);
+
+const mySafetyCode = defineProps({
+    code: {
+        type: String,
+        required: true,
+        default: '',
+    },
+});
+
+const getStatus = async () => {
+    const res = await checkIsSafety(mySafetyCode.code);
+    isSafety.value = res.data;
+    if (isSafety.value) {
+        globalStore.entrance = mySafetyCode.code;
+    }
+};
+
+onMounted(() => {
+    getStatus();
+    screenWidth.value = document.body.clientWidth;
+    window.onresize = () => {
+        return (() => {
+            screenWidth.value = document.body.clientWidth;
+        })();
+    };
+});
+</script>
+
+<style scoped lang="scss">
+@mixin login-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.login-backgroud {
+    height: 100vh;
+    background: url(@/assets/images/1panel-login-bg.png) no-repeat,
+        radial-gradient(153.25% 257.2% at 118.99% 181.67%, rgba(50, 132, 255, 0.2) 0%, rgba(82, 120, 255, 0) 100%)
+            /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
+        radial-gradient(123.54% 204.83% at 25.87% 195.17%, rgba(111, 76, 253, 0.15) 0%, rgba(122, 76, 253, 0) 78.85%)
+            /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
+        linear-gradient(0deg, rgba(0, 94, 235, 0.03), rgba(0, 94, 235, 0.03)),
+        radial-gradient(109.58% 109.58% at 31.53% -36.58%, rgba(0, 94, 235, 0.3) 0%, rgba(0, 94, 235, 0) 100%)
+            /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
+        rgba(0, 57, 142, 0.05);
+
+    .login-wrapper {
+        padding-top: 8%;
+        width: 80%;
+        margin: 0 auto;
+        // @media only screen and (max-width: 1440px) {
+        //     width: 100%;
+        //     padding-top: 6%;
+        // }
+        .left {
+            vertical-align: middle;
+            text-align: right;
+            width: 60%;
+            img {
+                object-fit: contain;
+                width: 100%;
+                @media only screen and (min-width: 1440px) {
+                    width: 85%;
+                }
+            }
+        }
+        .right {
+            vertical-align: middle;
+            width: 40%;
+        }
+    }
+
+    .login-title {
+        text-align: right;
+        margin-right: 10%;
+        span:first-child {
+            color: $primary-color;
+            font-size: 40px;
+            font-family: pingFangSC-Regular;
+            font-weight: 600;
+            // @media only screen and (max-width: 1440px) {
+            //     margin-left: 0;
+            // }
+        }
+        @media only screen and (max-width: 1110px) {
+            margin-bottom: 20px;
+            font-size: 35px;
+            text-align: center;
+            margin-right: 0;
+        }
+    }
+    .login-container {
+        margin-top: 40px;
+        padding: 40px 0;
+        width: 390px;
+        box-sizing: border-box;
+        background-color: rgba(255, 255, 255, 0.55);
+        border-radius: 4px;
+        box-shadow: 2px 4px 22px rgba(0, 94, 235, 0.2);
+        @media only screen and (max-width: 1440px) {
+            margin-top: 60px;
+        }
+        @media only screen and (max-width: 1110px) {
+            margin: 60px auto 0;
+        }
+    }
+}
+</style>

frontend/src/views/login/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="login-backgroud" v-if="isSafety">
+        <div class="login-backgroud">
             <div class="login-wrapper">
                 <div :class="screenWidth > 1110 ? 'left inline-block' : ''">
                     <div class="login-title">
@@ -15,34 +15,25 @@
                 </div>
             </div>
         </div>
-        <div v-if="!isSafety">
-            <UnSafe />
-        </div>
     </div>
 </template>
 
 <script setup lang="ts" name="login">
 import { checkIsSafety } from '@/api/modules/auth';
 import LoginForm from './components/login-form.vue';
-import UnSafe from '@/components/error-message/unsafe.vue';
 import { ref, onMounted } from 'vue';
+import router from '@/routers';
 import { GlobalStore } from '@/store';
+
 const globalStore = GlobalStore();
 
-const isSafety = ref(true);
 const screenWidth = ref(null);
 
-interface Props {
-    code: string;
-}
-const mySafetyCode = withDefaults(defineProps<Props>(), {
-    code: '',
-});
-
 const getStatus = async () => {
-    const res = await checkIsSafety(mySafetyCode.code);
+    const res = await checkIsSafety(globalStore.entrance);
-    isSafety.value = res.data;
+    if (!res.data) {
-    globalStore.entrance = mySafetyCode.code;
+        router.replace({ name: 'entrance' });
+    }
 };
 
 onMounted(() => {

frontend/src/views/setting/panel/index.vue

@@ -194,7 +194,7 @@ const onSaveUserName = async (formEl: FormInstance | undefined, key: string, val
                 await logOutApi();
                 loading.value = false;
                 MsgSuccess(i18n.t('commons.msg.operationSuccess'));
-                router.push({ name: 'login', params: { code: globalStore.entrance } });
+                router.push({ name: 'entrance', params: { code: globalStore.entrance } });
                 globalStore.setLogStatus(false);
                 return;
             })
@@ -250,7 +250,7 @@ const onSave = async (formEl: FormInstance | undefined, key: string, val: any) =
                 await logOutApi();
                 loading.value = false;
                 MsgSuccess(i18n.t('commons.msg.operationSuccess'));
-                router.push({ name: 'login', params: { code: globalStore.entrance } });
+                router.push({ name: 'entrance', params: { code: globalStore.entrance } });
                 globalStore.setLogStatus(false);
                 return;
             }

frontend/src/views/setting/panel/password/index.vue

@@ -119,7 +119,7 @@ const submitChangePassword = async (formEl: FormInstance | undefined) => {
                 passwordVisiable.value = false;
                 MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
                 await logOutApi();
-                router.push({ name: 'login', params: { code: globalStore.entrance } });
+                router.push({ name: 'entrance', params: { code: globalStore.entrance } });
                 globalStore.setLogStatus(false);
             })
             .catch(() => {

frontend/src/views/setting/safe/entrance/index.vue

@@ -59,7 +59,7 @@ const acceptParams = (params: DialogProps): void => {
 };
 
 const random = async () => {
-    securityEntrance.value = getRandomStr(8);
+    securityEntrance.value = getRandomStr(10);
 };
 
 const submitEntrance = async () => {