fix(hooks): 修复登录页切换登录页参数丢失问题

src/hooks/common/useRouterChange.ts

@@ -1,4 +1,4 @@
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import type { RouteLocationRaw } from 'vue-router';
 import { router as globalRouter, RouteNameMap } from '@/router';
 import type { LoginModuleType } from '@/interface';
@@ -20,6 +20,7 @@ interface LoginRedirect {
  */
 export default function useRouterChange(inSetup: boolean = true) {
   const router = inSetup ? useRouter() : globalRouter;
+  const route = inSetup ? useRoute() : null;
 
   /** 跳转首页 */
   function toHome() {
@@ -48,8 +49,21 @@ export default function useRouterChange(inSetup: boolean = true) {
     router.push(routeLocation);
   }
 
+  /**
+   * 登陆页跳转登陆页
+   * @param module - 展示的登录模块
+   * @param query - 查询参数
+   */
+  function toCurrentLogin(module: LoginModuleType) {
+    if (route) {
+      const { query } = route;
+      router.push({ name: RouteNameMap.get('login'), params: { module }, query });
+    }
+  }
+
   return {
     toHome,
-    toLogin
+    toLogin,
+    toCurrentLogin
   };
 }

src/interface/common.ts

@@ -7,6 +7,8 @@ import { EnumRoutePath, EnumLoginModule } from '@/enum';
 interface RouteMeta {
   /** 路由名称 */
   title?: string;
+  /** 缓存页面 */
+  keepAlive?: boolean;
   /** 页面100%视高 */
   fullPage?: boolean;
   /** 不作为菜单 */

src/layouts/BasicLayout/components/GlobalHeader/index.vue

@@ -6,7 +6,7 @@
         <global-logo />
       </div>
       <div class="flex-y-center h-full">
-        <menu-collapse />
+        <menu-collapse v-if="theme.navStyle.mode !== 'horizontal'" />
         <global-breadcrumb v-if="theme.crumbsStyle.visible" />
       </div>
       <div class="flex-1 flex justify-end h-full">

src/layouts/BasicLayout/components/GlobalTab/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup></script>
+<style scoped></style>

src/layouts/BasicLayout/components/common/GlobalLogo.vue

@@ -14,6 +14,6 @@ const app = useAppStore();
 const theme = useThemeStore();
 const title = useAppTitle();
 
-const showTitle = computed(() => !app.menu.collapsed && theme.navStyle.mode !== 'vertical-mix');
+const showTitle = computed(() => !app.menu.collapsed || !theme.isVerticalNav);
 </script>
 <style scoped></style>

src/store/modules/app/index.ts

@@ -1,9 +1,11 @@
 import { defineStore } from 'pinia';
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
 import { store } from '@/store';
 
 /** app状态 */
 interface AppState {
   menu: MenuState;
+  multiTab: MultiTab;
   settingDrawer: SettingDrawer;
 }
 
@@ -13,7 +15,11 @@ interface MenuState {
   collapsed: boolean;
 }
 
-/** 设置抽屉的状态 */
+interface MultiTab {
+  routes: RouteLocationNormalizedLoaded[];
+}
+
+/** 项目配置抽屉的状态 */
 interface SettingDrawer {
   /** 设置抽屉可见性 */
   visible: boolean;
@@ -25,6 +31,9 @@ const appStore = defineStore({
     menu: {
       collapsed: false
     },
+    multiTab: {
+      routes: []
+    },
     settingDrawer: {
       visible: false
     }
@@ -38,6 +47,8 @@ const appStore = defineStore({
     toggleMenu() {
       this.menu.collapsed = !this.menu.collapsed;
     },
+    /** 初始化多tab的数据 */
+    initMultiTab() {},
     /** 打开配置抽屉 */
     openSettingDrawer() {
       this.settingDrawer.visible = true;

src/views/dashboard/workbench/index.vue

@@ -1,11 +1,20 @@
 <template>
-  <div>
-    <h2>工作台</h2>
-    <router-link :to="EnumRoutePath['dashboard-analysis']">analysis</router-link>
+  <div class="p-10px">
+    <div class="flex-y-center flex-col h-500px bg-white">
+      <n-gradient-text type="primary" size="32">工作台</n-gradient-text>
+      <n-space>
+        <n-button>Default</n-button>
+        <n-button type="primary">Primary</n-button>
+        <n-button type="info">Info</n-button>
+        <n-button type="success">Success</n-button>
+        <n-button type="warning">Warning</n-button>
+        <n-button type="error">Error</n-button>
+      </n-space>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { EnumRoutePath } from '@/enum';
+import { NGradientText, NSpace, NButton } from 'naive-ui';
 </script>
 <style scoped></style>

src/views/system/login/components/CodeLogin/index.vue

@@ -13,7 +13,7 @@
       </n-form-item>
       <n-space :vertical="true" size="large">
         <n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
-        <n-button size="large" :block="true" :round="true" @click="toLogin('pwd-login')">返回</n-button>
+        <n-button size="large" :block="true" :round="true" @click="toCurrentLogin('pwd-login')">返回</n-button>
       </n-space>
     </n-form>
   </div>
@@ -26,7 +26,7 @@ import type { FormInst } from 'naive-ui';
 import { useRouterChange, useSmsCode } from '@/hooks';
 
 const message = useMessage();
-const { toLogin } = useRouterChange();
+const { toCurrentLogin } = useRouterChange();
 const { label, isCounting, start } = useSmsCode();
 
 const formRef = ref<(HTMLElement & FormInst) | null>(null);

src/views/system/login/components/PwdLogin/index.vue

@@ -10,15 +10,17 @@
       <n-space :vertical="true" size="large">
         <div class="flex-y-center justify-between">
           <n-checkbox v-model:checked="rememberMe">记住我</n-checkbox>
-          <span class="text-primary cursor-pointer" @click="toLogin('reset-pwd')">忘记密码？</span>
+          <span class="text-primary cursor-pointer" @click="toCurrentLogin('reset-pwd')">忘记密码？</span>
         </div>
         <n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
         <div class="flex-y-center justify-between">
-          <n-button class="flex-1" :block="true" @click="toLogin('code-login')">
+          <n-button class="flex-1" :block="true" @click="toCurrentLogin('code-login')">
             {{ EnumLoginModule['code-login'] }}
           </n-button>
           <div class="w-12px"></div>
-          <n-button class="flex-1" :block="true" @click="toLogin('register')">{{ EnumLoginModule.register }}</n-button>
+          <n-button class="flex-1" :block="true" @click="toCurrentLogin('register')">
+            {{ EnumLoginModule.register }}
+          </n-button>
         </div>
       </n-space>
     </n-form>
@@ -35,7 +37,7 @@ import { useRouterChange, useRouteQuery } from '@/hooks';
 import { setToken, toLoginRedirectUrl } from '@/utils';
 import { OtherLogin } from './components';
 
-const { toLogin, toHome } = useRouterChange();
+const { toHome, toCurrentLogin } = useRouterChange();
 const { loginRedirectUrl } = useRouteQuery();
 const notification = useNotification();
 

src/views/system/login/components/Register/index.vue

@@ -20,7 +20,7 @@
       <n-space :vertical="true" size="large">
         <n-checkbox v-model:checked="agreement">我已经仔细阅读并接受用户协议和隐私政策</n-checkbox>
         <n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
-        <n-button size="large" :block="true" :round="true" @click="toLogin('pwd-login')">返回</n-button>
+        <n-button size="large" :block="true" :round="true" @click="toCurrentLogin('pwd-login')">返回</n-button>
       </n-space>
     </n-form>
   </div>
@@ -33,7 +33,7 @@ import type { FormInst } from 'naive-ui';
 import { useRouterChange, useSmsCode } from '@/hooks';
 
 const message = useMessage();
-const { toLogin } = useRouterChange();
+const { toCurrentLogin } = useRouterChange();
 const { label, isCounting, start } = useSmsCode();
 
 const formRef = ref<(HTMLElement & FormInst) | null>(null);

src/views/system/login/components/ResetPwd/index.vue

@@ -19,7 +19,7 @@
       </n-form-item>
       <n-space :vertical="true" size="large">
         <n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
-        <n-button size="large" :block="true" :round="true" @click="toLogin('pwd-login')">返回</n-button>
+        <n-button size="large" :block="true" :round="true" @click="toCurrentLogin('pwd-login')">返回</n-button>
       </n-space>
     </n-form>
   </div>
@@ -32,7 +32,7 @@ import type { FormInst } from 'naive-ui';
 import { useRouterChange, useSmsCode } from '@/hooks';
 
 const message = useMessage();
-const { toLogin } = useRouterChange();
+const { toCurrentLogin } = useRouterChange();
 const { label, isCounting, start } = useSmsCode();
 
 const formRef = ref<(HTMLElement & FormInst) | null>(null);