fix: tiny-pro部分问题修复

packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue

@@ -23,7 +23,15 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted, watch, computed, reactive, unref } from 'vue';
+  import {
+    ref,
+    onMounted,
+    watch,
+    computed,
+    reactive,
+    unref,
+    getCurrentInstance,
+  } from 'vue';
   import { TreeMenu as tinyTreeMenu } from '@opentiny/vue';
   import { useMenuStore } from '@/store/modules/router';
   import router from '@/router';
@@ -33,6 +41,7 @@
   import { useDeepClone } from '@/hooks/useDeepClone';
 
   const menuStore = useMenuStore();
+  await menuStore.getMenuList();
   const rawMenuData = computed(() => useDeepClone(unref(menuStore.menuList)));
   type SideMenuData = (ITreeNodeData & { meta: { url: string } })[];
 

packages/toolkits/pro/template/tinyvue/src/layout/default-layout.vue

@@ -12,7 +12,7 @@
         <tiny-layout class="layout-sider">
           <div class="menu-wrapper">
             <Suspense>
-              <Menu />
+              <Menu v-if="reloadKey !== 'menu'" />
             </Suspense>
           </div>
         </tiny-layout>
@@ -71,7 +71,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, watch, onMounted, computed } from 'vue';
+  import { ref, watch, onMounted, computed, nextTick, provide } from 'vue';
   import { useI18n } from 'vue-i18n';
   import {
     Container as TinyContainer,
@@ -100,6 +100,18 @@
 
   const tabsHistory = computed(() => tabStore.data);
   const currentTabName = ref();
+
+  const reloadKey = ref('');
+  const reloadMenu = () => {
+    reloadKey.value = 'menu';
+    nextTick(() => {
+      reloadKey.value = '';
+    });
+  };
+  provide('RELOAD', {
+    reloadMenu,
+  });
+
   watch(
     () => tabStore.current,
     () => {

packages/toolkits/pro/template/tinyvue/src/router/constant.ts

@@ -0,0 +1,38 @@
+/* eslint-disable prefer-template */
+
+import DefaultLayout from '@/layout/default-layout.vue';
+
+export default [
+  {
+    path: '/',
+    redirect: `${import.meta.env.VITE_CONTEXT}login`,
+  },
+  {
+    path: import.meta.env.VITE_CONTEXT,
+    redirect: { path: `${import.meta.env.VITE_CONTEXT}login` },
+  },
+  {
+    path: import.meta.env.VITE_CONTEXT + 'login',
+    name: 'login',
+    component: () => import('@/views/login/index.vue'),
+    meta: {
+      requiresAuth: false,
+    },
+  },
+  {
+    name: 'root',
+    path: import.meta.env.VITE_CONTEXT,
+    component: DefaultLayout,
+    children: [],
+  },
+  {
+    path: import.meta.env.VITE_CONTEXT + 'preview',
+    name: 'preview',
+    component: () => import('@/views/Preview/index.vue'),
+  },
+  {
+    name: 'redirect',
+    path: import.meta.env.VITE_CONTEXT + 'redirect',
+    component: () => import('@/views/redirect.vue'),
+  },
+];

packages/toolkits/pro/template/tinyvue/src/router/index.ts

@@ -1,48 +1,16 @@
 /* eslint-disable prefer-template */
 import { createRouter, createWebHistory } from 'vue-router';
 import NProgress from 'nprogress'; // progress bar
-import DefaultLayout from '@/layout/default-layout.vue';
-import appRoutes from './routes';
 import createRouteGuard from './guard';
+import constant from './constant';
 
 NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
     // 本地地址
-    {
-      path: '/',
-      redirect: `${import.meta.env.VITE_CONTEXT}login`,
-    },
-    {
-      path: import.meta.env.VITE_CONTEXT,
-      redirect: { path: `${import.meta.env.VITE_CONTEXT}login` },
-    },
-    {
-      path: import.meta.env.VITE_CONTEXT + 'login',
-      name: 'login',
-      component: () => import('@/views/login/index.vue'),
-      meta: {
-        requiresAuth: false,
-      },
-    },
-    {
-      name: 'root',
-      path: import.meta.env.VITE_CONTEXT,
-      component: DefaultLayout,
-      children: [],
-    },
-    {
-      path: import.meta.env.VITE_CONTEXT + 'preview',
-      name: 'preview',
-      component: () => import('@/views/Preview/index.vue'),
-    },
-    {
-      name: 'redirect',
-      path: import.meta.env.VITE_CONTEXT + 'redirect',
-      component: () => import('@/views/redirect.vue'),
-    },
+    ...constant,
   ],
   scrollBehavior() {
     return { top: 0 };

packages/toolkits/pro/template/tinyvue/src/store/modules/router.ts

@@ -1,22 +1,36 @@
-import { defineStore } from "pinia";
-import { getRoleMenu } from "@/api/menu";
-import useUserStore from "./user";
+import { defineStore } from 'pinia';
+import { getRoleMenu } from '@/api/menu';
+import useUserStore from './user';
 
 export const useMenuStore = defineStore('menu', {
   state() {
     return {
-      menuList: [] as any[]
-    }
+      menuList: [] as any[],
+      flatMenuList: [] as any[],
+    };
   },
   actions: {
-    async getMenuList(){
+    async getMenuList() {
       const userStore = useUserStore();
-      if (!userStore.email){
+      if (!userStore.email) {
         return [];
       }
-      const {data} = await getRoleMenu(userStore.email)
+      const { data } = await getRoleMenu(userStore.email);
       this.menuList = data;
+      this.menuListFlat();
       return data;
-    }
-  }
-})
+    },
+    menuListFlat() {
+      this.flatMenuList = [];
+      const dfs = (item: any) => {
+        this.flatMenuList.push(item);
+        for (let i = 0; i < item.children.length; i += 1) {
+          dfs(item.children[i]);
+        }
+      };
+      for (let i = 0; i < this.menuList.length; i += 1) {
+        dfs(this.menuList[i]);
+      }
+    },
+  },
+});

packages/toolkits/pro/template/tinyvue/src/store/modules/tabs.ts

@@ -1,15 +1,37 @@
 import { defineStore } from 'pinia';
+import { useRoute, useRouter } from 'vue-router';
 
 type Tab = {
   name: string;
   link: string;
 };
 
+export const TAB_PERSISTENCE_KEYS = {
+  TABS: 'tiny-pro::tabs',
+  CURRENT: 'tiny-pro::tabs:current',
+};
+
+const initTabs = () => {
+  const tabs = JSON.parse(
+    localStorage.getItem(TAB_PERSISTENCE_KEYS.TABS) ?? '[]',
+  ) as Tab[];
+  const routes = useRouter()
+    .getRoutes()
+    .map((route) => route.path);
+  return tabs.filter((tab) => routes.includes(tab.link));
+};
+const initCurrent = () => {
+  const current = JSON.parse(
+    localStorage.getItem(TAB_PERSISTENCE_KEYS.CURRENT) ?? '{}',
+  ) as Tab;
+  return current;
+};
+
 export const useTabStore = defineStore('tabs', {
   state() {
     return {
-      data: [] as Tab[],
-      current: {} as Tab,
+      data: initTabs(),
+      current: initCurrent(),
     };
   },
   actions: {
@@ -21,10 +43,18 @@ export const useTabStore = defineStore('tabs', {
         this.data.push(item);
       }
       this.current = item;
+      localStorage.setItem(
+        TAB_PERSISTENCE_KEYS.TABS,
+        JSON.stringify(this.data),
+      );
       return { ...item };
     },
     set(name: string) {
       this.current = this.getByName(name)[0] ?? null;
+      localStorage.setItem(
+        TAB_PERSISTENCE_KEYS.CURRENT,
+        JSON.stringify(this.current),
+      );
       return this.current;
     },
     has(name: string) {
@@ -55,6 +85,10 @@ export const useTabStore = defineStore('tabs', {
         }
       }
       this.data.splice(idx, 1);
+      localStorage.setItem(
+        TAB_PERSISTENCE_KEYS.TABS,
+        JSON.stringify(this.data),
+      );
       return curName;
     },
   },

packages/toolkits/pro/template/tinyvue/src/views/login/index.vue

@@ -25,13 +25,18 @@
 <script lang="ts" setup>
   import Footer from '@/components/footer/index.vue';
   import { useMenuStore } from '@/store/modules/router';
+  import { TAB_PERSISTENCE_KEYS } from '@/store/modules/tabs';
+  import { clearToken } from '@/utils/auth';
   import { useRouter } from 'vue-router';
   import { onMounted } from 'vue';
   import LoginForm from './components/login-form.vue';
 
   const router = useRouter();
   onMounted(() => {
     const menuStore = useMenuStore();
+    localStorage.removeItem(TAB_PERSISTENCE_KEYS.CURRENT);
+    localStorage.removeItem(TAB_PERSISTENCE_KEYS.TABS);
+    clearToken();
     if (menuStore.menuList.length) {
       router.go(0);
     }