1.8.0

src/hooks/web/usePage.ts

@@ -0,0 +1,62 @@
+import type { RouteLocationRaw, Router } from 'vue-router';
+
+import { PageEnum } from '@/enums/pageEnum';
+import { RedirectName } from '@/router/constant';
+
+import { useRouter } from 'vue-router';
+import { isString } from '@/utils/is';
+import { unref } from 'vue';
+
+export type RouteLocationRawEx = Omit<RouteLocationRaw, 'path'> & { path: PageEnum };
+
+function handleError(e: Error) {
+  console.error(e);
+}
+
+/**
+ * 页面切换
+ */
+export function useGo(_router?: Router) {
+  let router;
+  if (!_router) {
+    router = useRouter();
+  }
+  const { push, replace } = _router || router;
+  function go(opt: PageEnum | RouteLocationRawEx | string = PageEnum.BASE_HOME, isReplace = false) {
+    if (!opt) {
+      return;
+    }
+    if (isString(opt)) {
+      isReplace ? replace(opt).catch(handleError) : push(opt).catch(handleError);
+    } else {
+      const o = opt as RouteLocationRaw;
+      isReplace ? replace(o).catch(handleError) : push(o).catch(handleError);
+    }
+  }
+  return go;
+}
+
+/**
+ * 重做当前页面
+ */
+export const useRedo = (_router?: Router) => {
+  const { push, currentRoute } = _router || useRouter();
+  const { query, params = {}, name, fullPath } = unref(currentRoute.value);
+  function redo(): Promise<boolean> {
+    return new Promise((resolve) => {
+      if (name === RedirectName) {
+        resolve(false);
+        return;
+      }
+      if (name && Object.keys(params).length > 0) {
+        params['_redirect_type'] = 'name';
+        params['path'] = String(name);
+      } else {
+        params['_redirect_type'] = 'path';
+        params['path'] = fullPath;
+      }
+      push({ name: RedirectName, params, query }).then(() => resolve(true));
+    });
+  }
+  return redo;
+};

src/layout/components/TagsView/index.vue

@@ -40,11 +40,7 @@
                 @contextmenu="handleContextMenu($event, element)"
               >
                 <span>{{ element.meta.title }}</span>
-                <n-icon
-                  size="14"
-                  @click.stop="closeTabItem(element)"
-                  v-if="element.path !== baseHome"
-                >
+                <n-icon size="14" @click.stop="closeTabItem(element)" v-if="!element.meta.affix">
                   <CloseOutlined />
                 </n-icon>
               </div>
@@ -116,6 +112,7 @@
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
   import { useProjectSettingStore } from '@/store/modules/projectSetting';
   import { useThemeVars } from 'naive-ui';
+  import { useGo } from '@/hooks/web/usePage';
 
   export default defineComponent({
     name: 'TabsView',
@@ -145,6 +142,7 @@
       const navScroll: any = ref(null);
       const navWrap: any = ref(null);
       const isCurrent = ref(false);
+      const go = useGo();
 
       const themeVars = useThemeVars();
 
@@ -363,7 +361,6 @@
 
       // 关闭全部
       const closeAll = () => {
-        localStorage.removeItem('routes');
         tabsViewStore.closeAllTabs();
         router.replace(PageEnum.BASE_HOME);
         updateNavScroll();
@@ -480,7 +477,7 @@
         const { fullPath } = e;
         if (fullPath === route.fullPath) return;
         state.activeKey = fullPath;
-        router.push({ path: fullPath });
+        go(e, true);
       }
 
       //删除tab
@@ -506,7 +503,6 @@
         navScroll,
         route,
         tabsList,
-        baseHome: PageEnum.BASE_HOME_REDIRECT,
         goPage,
         closeTabItem,
         closeLeft,

src/router/modules/dashboard.ts

@@ -34,6 +34,7 @@ const routes: Array<RouteRecordRaw> = [
         meta: {
           title: '主控台',
           permissions: ['dashboard_console'],
+          affix: true,
         },
         component: () => import('@/views/dashboard/console/console.vue'),
       },

src/router/modules/frame.ts

@@ -17,6 +17,15 @@ const routes: Array<RouteRecordRaw> = [
       icon: renderIcon(DesktopOutline),
     },
     children: [
+      {
+        path: 'naive-admin',
+        name: 'naive-admin',
+        meta: {
+          title: 'NaiveAdmin',
+          frameSrc: 'https://www.naiveadmin.com',
+        },
+        component: IFrame,
+      },
       {
         path: 'docs',
         name: 'frame-docs',

src/store/modules/tabsView.ts

@@ -7,13 +7,23 @@ const whiteList = ['Redirect', 'login'];
 
 export type RouteItem = Partial<RouteLocationNormalized> & {
   fullPath: string;
+  path: string;
   name: string;
+  hash: string;
+  meta: object;
+  params: object;
+  query: object;
 };
 
 export type ITabsViewState = {
   tabsList: RouteItem[]; // 标签页
 };
 
+//保留固定路由
+function retainAffixRoute(list: any[]) {
+  return list.filter((item) => item?.meta?.affix ?? false);
+}
+
 export const useTabsViewStore = defineStore({
   id: 'app-tabs-view',
   state: (): ITabsViewState => ({
@@ -55,8 +65,8 @@ export const useTabsViewStore = defineStore({
     },
     closeAllTabs() {
       // 关闭全部
-      this.tabsList = [];
-      localStorage.removeItem(TABS_ROUTES);
+      console.log(retainAffixRoute(this.tabsList));
+      this.tabsList = retainAffixRoute(this.tabsList);
     },
   },
 });