From af8ceb084339ef12cc43e2ba32935404ceba2e90 Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Mon, 17 Oct 2022 18:10:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(preoject):=20=E5=A2=9E=E5=8A=A0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=BC=93=E5=AD=98=E6=94=AF=E6=8C=81=EF=BC=8C=E5=A4=96?=
 =?UTF-8?q?=E9=93=BE=E8=8F=9C=E5=8D=95=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/module/user.ts                          | 11 +++++++++++
 src/components/common/ErrorTip.vue           |  2 +-
 src/{hook => hooks}/index.ts                 |  0
 src/{hook => hooks}/useAppRouter.ts          |  0
 src/{hook => hooks}/useBoolean.ts            |  0
 src/{hook => hooks}/useClipBoard.ts          |  0
 src/{hook => hooks}/useEcharts.ts            |  0
 src/{hook => hooks}/useLoading.ts            |  0
 src/layouts/BasicLayout/index.vue            | 11 +++++++----
 src/layouts/components/header/Breadcrumb.vue |  2 +-
 src/layouts/components/sider/Logo.vue        |  2 +-
 src/layouts/components/sider/Menu.vue        |  2 +-
 src/layouts/components/tab/TabBar.vue        |  2 +-
 src/router/guard/dynamic.ts                  | 12 ++++++++++++
 src/router/guard/index.ts                    |  5 +++++
 src/router/guard/permission.ts               |  1 -
 src/store/modules/auth.ts                    |  2 +-
 src/store/modules/route.ts                   |  6 ++++--
 src/store/modules/tab.ts                     |  2 +-
 src/typings/route.d.ts                       |  8 --------
 src/views/list/commonList/index.vue          |  2 +-
 src/views/plugin/charts/echarts/index.vue    |  2 +-
 src/views/plugin/clipboard/index.vue         |  2 +-
 src/views/plugin/map/index.vue               |  8 ++++++--
 src/views/test/test2/index.vue               |  2 +-
 25 files changed, 56 insertions(+), 28 deletions(-)
 rename src/{hook => hooks}/index.ts (100%)
 rename src/{hook => hooks}/useAppRouter.ts (100%)
 rename src/{hook => hooks}/useBoolean.ts (100%)
 rename src/{hook => hooks}/useClipBoard.ts (100%)
 rename src/{hook => hooks}/useEcharts.ts (100%)
 rename src/{hook => hooks}/useLoading.ts (100%)

diff --git a/mock/module/user.ts b/mock/module/user.ts
index 91b6a2b..24c246c 100644
--- a/mock/module/user.ts
+++ b/mock/module/user.ts
@@ -183,6 +183,7 @@ const userRoutes = [
           title: '地图',
           requiresAuth: true,
           icon: 'carbon:map',
+          keepAlive: true,
         },
       },
       {
@@ -271,6 +272,16 @@ const userRoutes = [
           icon: 'logos:vitejs',
         },
       },
+      {
+        name: 'docments_vueuse',
+        path: '/docments/vueuse',
+        meta: {
+          title: 'VueUse（外链）',
+          requiresAuth: true,
+          icon: 'logos:vueuse',
+          herf: 'https://vueuse.org/guide/',
+        },
+      },
     ],
   },
   {
diff --git a/src/components/common/ErrorTip.vue b/src/components/common/ErrorTip.vue
index 461da7a..1068f40 100644
--- a/src/components/common/ErrorTip.vue
+++ b/src/components/common/ErrorTip.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { useAppRouter } from '@/hook';
+import { useAppRouter } from '@/hooks';
 
 type TipType = '403' | '404' | '500';
 defineProps<{
diff --git a/src/hook/index.ts b/src/hooks/index.ts
similarity index 100%
rename from src/hook/index.ts
rename to src/hooks/index.ts
diff --git a/src/hook/useAppRouter.ts b/src/hooks/useAppRouter.ts
similarity index 100%
rename from src/hook/useAppRouter.ts
rename to src/hooks/useAppRouter.ts
diff --git a/src/hook/useBoolean.ts b/src/hooks/useBoolean.ts
similarity index 100%
rename from src/hook/useBoolean.ts
rename to src/hooks/useBoolean.ts
diff --git a/src/hook/useClipBoard.ts b/src/hooks/useClipBoard.ts
similarity index 100%
rename from src/hook/useClipBoard.ts
rename to src/hooks/useClipBoard.ts
diff --git a/src/hook/useEcharts.ts b/src/hooks/useEcharts.ts
similarity index 100%
rename from src/hook/useEcharts.ts
rename to src/hooks/useEcharts.ts
diff --git a/src/hook/useLoading.ts b/src/hooks/useLoading.ts
similarity index 100%
rename from src/hook/useLoading.ts
rename to src/hooks/useLoading.ts
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index 3d2614b..b4d1274 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -52,9 +52,11 @@
             'p-t-77px': appStore.fixedHeader && !appStore.showTabs,
           }"
         >
-          <router-view v-slot="{ Component }">
-            <transition name="fade-slide" appear mode="out-in">
-              <component :is="Component" v-if="appStore.loadFlag" />
+          <router-view v-slot="{ Component, route }">
+            <transition name="fade-slide" mode="out-in">
+              <keep-alive :include="routeStore.cacheRoutes">
+                <component :is="Component" v-if="appStore.loadFlag" :key="route.fullPath" />
+              </keep-alive>
             </transition>
           </router-view>
         </div>
@@ -68,7 +70,6 @@
 </template>
 
 <script lang="ts" setup>
-import { useAppStore } from '@/store';
 import {
   Breadcrumb,
   CollapaseButton,
@@ -85,7 +86,9 @@ import {
   TabBar,
   BackTop,
 } from '../components';
+import { useAppStore, useRouteStore } from '@/store';
 
+const routeStore = useRouteStore();
 const appStore = useAppStore();
 </script>
 
diff --git a/src/layouts/components/header/Breadcrumb.vue b/src/layouts/components/header/Breadcrumb.vue
index 6b43493..93f70fc 100644
--- a/src/layouts/components/header/Breadcrumb.vue
+++ b/src/layouts/components/header/Breadcrumb.vue
@@ -11,7 +11,7 @@
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useRouteStore } from '@/store';
-import { useAppRouter } from '@/hook';
+import { useAppRouter } from '@/hooks';
 
 const router = useRouter();
 const routeStore = useRouteStore();
diff --git a/src/layouts/components/sider/Logo.vue b/src/layouts/components/sider/Logo.vue
index 8f8e996..a7cad09 100644
--- a/src/layouts/components/sider/Logo.vue
+++ b/src/layouts/components/sider/Logo.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 import { useAppStore } from '@/store';
-import { useAppRouter } from '@/hook';
+import { useAppRouter } from '@/hooks';
 const { toRoot } = useAppRouter();
 const appStore = useAppStore();
 </script>
diff --git a/src/layouts/components/sider/Menu.vue b/src/layouts/components/sider/Menu.vue
index eb9efe9..fe2ba58 100644
--- a/src/layouts/components/sider/Menu.vue
+++ b/src/layouts/components/sider/Menu.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { useAppStore } from '@/store';
-import { useAppRouter } from '@/hook';
+import { useAppRouter } from '@/hooks';
 import { useRouteStore } from '~/src/store/modules/route';
 import type { MenuOption } from 'naive-ui';
 
diff --git a/src/layouts/components/tab/TabBar.vue b/src/layouts/components/tab/TabBar.vue
index 516382f..788c816 100644
--- a/src/layouts/components/tab/TabBar.vue
+++ b/src/layouts/components/tab/TabBar.vue
@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import { useTabStore, useAppStore } from '@/store';
-import { useAppRouter } from '~/src/hook';
+import { useAppRouter } from '@/hooks';
 import { RouteLocationNormalized } from 'vue-router';
 import { ref, nextTick } from 'vue';
 import { renderIcon } from '@/utils';
diff --git a/src/router/guard/dynamic.ts b/src/router/guard/dynamic.ts
index c82f708..21f28b3 100644
--- a/src/router/guard/dynamic.ts
+++ b/src/router/guard/dynamic.ts
@@ -1,5 +1,6 @@
 import { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts/index';
+import { useRouteStore } from '@/store';
 
 // 引入所有页面
 const modules = import.meta.glob('../../views/**/*.vue');
@@ -20,9 +21,20 @@ function FlatAuthRoutes(routes: AppRoute.Route[]) {
   });
   return result;
 }
+
+function createCatheRoutes(routes: AppRoute.Route[]) {
+  return routes
+    .filter((item) => {
+      return item.meta.keepAlive;
+    })
+    .map((item) => item.name);
+}
 export async function createDynamicRoutes(routes: AppRoute.Route[]) {
   // 数组降维成一维数组,然后删除所有的childen
   const flatRoutes = FlatAuthRoutes(routes);
+  // 对降维后的数组过滤需要缓存的路由name数组
+  const routeStore = useRouteStore();
+  routeStore.cacheRoutes = createCatheRoutes(flatRoutes);
   // 生成路由，有redirect的不需要引入文件
   const mapRoutes = flatRoutes.map((item) => {
     if (!item.redirect) {
diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts
index 3c7f3ab..eddbff7 100644
--- a/src/router/guard/index.ts
+++ b/src/router/guard/index.ts
@@ -6,6 +6,11 @@ const appTitle = import.meta.env.VITE_APP_TITLE;
 
 export function setupRouterGuard(router: Router) {
   router.beforeEach(async (to, from, next) => {
+    // 判断是否是外链，如果是直接打开网页并拦截跳转
+    if (to.meta.herf) {
+      window.open(to.meta.herf);
+      return false;
+    }
     // 开始 loadingBar
     window.$loadingBar?.start();
     // 权限操作
diff --git a/src/router/guard/permission.ts b/src/router/guard/permission.ts
index 7f2f013..1c3422b 100644
--- a/src/router/guard/permission.ts
+++ b/src/router/guard/permission.ts
@@ -40,7 +40,6 @@ export async function createPermissionGuard(
   // if (to.name === 'not-found-page') {
   //   next({ name: 'not-found-page', replace: true });
   // }
-
   // 设置菜单高亮
   if (to.meta.activeMenu) {
     routeStore.setActiveMenu(to.meta.activeMenu);
diff --git a/src/store/modules/auth.ts b/src/store/modules/auth.ts
index 1f359e4..ed2a53e 100644
--- a/src/store/modules/auth.ts
+++ b/src/store/modules/auth.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { fetchLogin, fetchUserInfo } from '@/service';
 import { setUserInfo, getUserInfo, getToken, setToken, clearAuthStorage } from '@/utils/auth';
 import { router } from '@/router';
-import { useAppRouter } from '@/hook';
+import { useAppRouter } from '@/hooks';
 import { unref } from 'vue';
 import { useRouteStore } from './route';
 
diff --git a/src/store/modules/route.ts b/src/store/modules/route.ts
index fd7d0a3..27de9f3 100644
--- a/src/store/modules/route.ts
+++ b/src/store/modules/route.ts
@@ -12,6 +12,7 @@ interface RoutesStatus {
   userRoutes: AppRoute.Route[];
   activeMenu: string | null;
   authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE'];
+  cacheRoutes: string[];
 }
 export const useRouteStore = defineStore('route-store', {
   state: (): RoutesStatus => {
@@ -21,6 +22,7 @@ export const useRouteStore = defineStore('route-store', {
       menus: [],
       activeMenu: null,
       authRouteMode: import.meta.env.VITE_AUTH_ROUTE_MODE,
+      cacheRoutes: [],
     };
   },
   actions: {
@@ -81,7 +83,7 @@ export const useRouteStore = defineStore('route-store', {
       const { data } = await fetchUserRoutes(userId);
       // 根据用户返回的路由表来生成真实路由
       const appRoutes = await createDynamicRoutes(data);
-      // 更具返回的生成侧边菜单
+      // 生成侧边菜单
       await this.createMenus(data);
       // 插入路由表
       router.addRoute(appRoutes);
@@ -90,7 +92,7 @@ export const useRouteStore = defineStore('route-store', {
     async initStaticRoute() {
       // 根据静态路由表来生成真实路由
       const appRoutes = await createDynamicRoutes(staticRoutes);
-      // 更具返回的生成侧边菜单
+      // 生成侧边菜单
       await this.createMenus(staticRoutes);
       // 插入路由表
       router.addRoute(appRoutes);
diff --git a/src/store/modules/tab.ts b/src/store/modules/tab.ts
index 9959a26..025cf16 100644
--- a/src/store/modules/tab.ts
+++ b/src/store/modules/tab.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { RouteLocationNormalized } from 'vue-router';
-import { useAppRouter } from '@/hook';
+import { useAppRouter } from '@/hooks';
 
 interface TabState {
   inherentTab: {
diff --git a/src/typings/route.d.ts b/src/typings/route.d.ts
index 3b2c50d..516d9b9 100644
--- a/src/typings/route.d.ts
+++ b/src/typings/route.d.ts
@@ -7,14 +7,6 @@ declare namespace AppRoute {
     path: string;
     /** 路由重定向 */
     redirect?: string;
-    /**
-     * 路由组件
-     * - basic: 基础布局，具有公共部分的布局
-     * - blank: 空白布局
-     * - multi: 多级路由布局(三级路由或三级以上时，除第一级路由和最后一级路由，其余的采用该布局)
-     * - self: 作为子路由，使用自身的布局(作为最后一级路由，没有子路由)
-     */
-    component?: any;
     /** 子路由 */
     children?: Route[];
     /** 路由描述 */
diff --git a/src/views/list/commonList/index.vue b/src/views/list/commonList/index.vue
index f25283f..f94df2e 100644
--- a/src/views/list/commonList/index.vue
+++ b/src/views/list/commonList/index.vue
@@ -59,7 +59,7 @@ import { onMounted, ref, h } from 'vue';
 import { fetchUserList } from '@/service';
 import type { DataTableColumns } from 'naive-ui';
 import { NButton, NPopconfirm, NSpace, NSwitch, NTag, FormInst } from 'naive-ui';
-import { useLoading, useBoolean } from '@/hook';
+import { useLoading, useBoolean } from '@/hooks';
 import TableModal from './components/TableModal.vue';
 
 const { loading, startLoading, endLoading } = useLoading(false);
diff --git a/src/views/plugin/charts/echarts/index.vue b/src/views/plugin/charts/echarts/index.vue
index 1c8ccec..484636b 100644
--- a/src/views/plugin/charts/echarts/index.vue
+++ b/src/views/plugin/charts/echarts/index.vue
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import type { Ref } from 'vue';
-import { type ECOption, useEcharts } from '@/hook';
+import { type ECOption, useEcharts } from '@/hooks';
 
 const pieOptions = ref<ECOption>({
   title: {
diff --git a/src/views/plugin/clipboard/index.vue b/src/views/plugin/clipboard/index.vue
index dc446c5..e7d0bd0 100644
--- a/src/views/plugin/clipboard/index.vue
+++ b/src/views/plugin/clipboard/index.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useClipBoard } from '@/hook';
+import { useClipBoard } from '@/hooks';
 
 const { copy } = useClipBoard();
 const text = ref('Hello Clipboard');
diff --git a/src/views/plugin/map/index.vue b/src/views/plugin/map/index.vue
index b806eb6..9f42961 100644
--- a/src/views/plugin/map/index.vue
+++ b/src/views/plugin/map/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card title="地图示例">
+  <n-card title="地图示例(keepalive缓存)">
     <n-tabs type="line" animated>
       <n-tab-pane v-for="item in maps" :key="item.id" :name="item.id" :tab="item.label" class="h-600px">
         <component :is="item.component" />
@@ -7,7 +7,11 @@
     </n-tabs>
   </n-card>
 </template>
-
+<script lang="ts">
+export default {
+  name: 'PluginMap', //此处的组件命需要和路由的name保持一致
+};
+</script>
 <script setup lang="ts">
 import AMap from './components/AMap.vue';
 import BMap from './components/BMap.vue';
diff --git a/src/views/test/test2/index.vue b/src/views/test/test2/index.vue
index 1afe3bc..f1c5447 100644
--- a/src/views/test/test2/index.vue
+++ b/src/views/test/test2/index.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { useAppRouter } from '@/hook';
+import { useAppRouter } from '@/hooks';
 const { routerPush } = useAppRouter();
 </script>