Merge pull request #98 from Tencent/feat/multiple-tabs-support

feat: 支持多标签tab页的功能

Author: PengYYYYY

.env

@@ -1,3 +1,3 @@
 VITE_SOME_KEY=123
-# 打包路径
-VITE_BASE_URL = /
+# 打包路径 根据项目不同按需配置
+VITE_BASE_URL = ./

.eslintrc

@@ -15,10 +15,7 @@
     "defineProps": "readonly",
     "defineEmits": "readonly"
   },
-  "plugins": [
-    "vue",
-    "@typescript-eslint"
-  ],
+  "plugins": ["vue", "@typescript-eslint"],
   "parserOptions": {
     "parser": "@typescript-eslint/parser",
     "sourceType": "module",
@@ -28,27 +25,22 @@
     }
   },
   "settings": {
-    "import/extensions": [
-      ".js",
-      ".jsx",
-      ".ts",
-      ".tsx"
-    ]
+    "import/extensions": [".js", ".jsx", ".ts", ".tsx"]
   },
   "rules": {
     "no-console": "off",
     "no-continue": "off",
     "no-restricted-syntax": "off",
     "no-plusplus": "off",
-    "no-param-reassign":  "off",
-    "no-shadow":  "off",
+    "no-param-reassign": "off",
+    "no-shadow": "off",
     "guard-for-in": "off",
 
     "import/extensions": "off",
     "import/no-unresolved": "off",
     "import/no-extraneous-dependencies": "off",
     "import/prefer-default-export": "off",
-
+    "import/first": "off", // https://github.com/vuejs/vue-eslint-parser/issues/58
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "vue/first-attribute-linebreak": 0
@@ -61,9 +53,8 @@
         "vue/require-default-prop": 0,
         "vue/multi-word-component-names": 0,
         "vue/no-reserved-props": 0,
-        "vue/no-v-html": 0,
-        
+        "vue/no-v-html": 0
       }
     }
   ]
-}
+}

src/config/style.ts

@@ -8,6 +8,7 @@ export default {
   isFooterAside: false,
   isSidebarFixed: true,
   isHeaderFixed: true,
+  isUseTabsRouter: false,
   showHeader: true,
   backgroundTheme: 'blueGrey',
   brandTheme: 'default',

src/interface.ts

@@ -1,3 +1,4 @@
+import { RouteRecordName } from 'vue-router';
 import STYLE_CONFIG from '@/config/style';
 
 export interface ResDataType {
@@ -37,3 +38,17 @@ export interface NotificationItem {
   date: string;
   quality: string;
 }
+
+export interface TRouterInfo {
+  path: string;
+  routeIdx?: number;
+  title?: string;
+  name?: RouteRecordName;
+  isAlive?: boolean;
+  isHome?: boolean;
+}
+
+export interface TTabRouterType {
+  isRefreshing: boolean;
+  tabRouterList: Array<TRouterInfo>;
+}

src/layouts/components/Content.vue

@@ -1,10 +1,30 @@
 <template>
-  <router-view v-slot="{ Component }">
+  <router-view v-if="!isRefreshing" v-slot="{ Component }">
     <transition name="fade" mode="out-in">
-      <component :is="Component" />
+      <keep-alive :include="aliveViews">
+        <component :is="Component" />
+      </keep-alive>
     </transition>
   </router-view>
 </template>
+
+<script setup lang="ts">
+import { computed, ComputedRef } from 'vue';
+import { useTabsRouterStore } from '@/store';
+
+const aliveViews = computed(() => {
+  const tabsRouterStore = useTabsRouterStore();
+  const { tabRouters } = tabsRouterStore;
+
+  return tabRouters.filter((route) => route.isAlive).map((route) => route.name);
+}) as ComputedRef<string[]>;
+
+const isRefreshing = computed(() => {
+  const tabsRouterStore = useTabsRouterStore();
+  const { refreshing } = tabsRouterStore;
+  return refreshing;
+});
+</script>
 <style lang="less" scoped>
 @import '@/style/variables';
 

src/layouts/index.tsx

@@ -1,16 +1,17 @@
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, nextTick, onMounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useRoute } from 'vue-router';
-import { usePermissionStore, useSettingStore } from '@/store';
+import { useRoute, useRouter } from 'vue-router';
+import { usePermissionStore, useSettingStore, useTabsRouterStore } from '@/store';
 
-import TDesignHeader from './components/Header.vue';
-import TDesignBreadcrumb from './components/Breadcrumb.vue';
-import TDesignFooter from './components/Footer.vue';
-import TDesignSideNav from './components/SideNav';
-import TDesignContent from './components/Content.vue';
+import LayoutHeader from './components/Header.vue';
+import LayoutBreadcrumb from './components/Breadcrumb.vue';
+import LayoutFooter from './components/Footer.vue';
+import LayoutSideNav from './components/SideNav';
+import LayoutContent from './components/Content.vue';
+import Setting from './setting.vue';
 
 import { prefix } from '@/config/global';
-import TdesignSetting from './setting.vue';
+
 import '@/style/layout.less';
 
 const name = `${prefix}-base-layout`;
@@ -19,8 +20,10 @@ export default defineComponent({
   name,
   setup() {
     const route = useRoute();
+    const router = useRouter();
     const permissionStore = usePermissionStore();
     const settingStore = useSettingStore();
+    const tabsRouterStore = useTabsRouterStore();
     const { routers: menuRouters } = storeToRefs(permissionStore);
     const setting = storeToRefs(settingStore);
 
@@ -57,10 +60,59 @@ export default defineComponent({
       return newMenuRouters;
     });
 
+    const appendNewRoute = () => {
+      const {
+        path,
+        meta: { title },
+        name,
+      } = route;
+      tabsRouterStore.appendTabRouterList({ path, title: title as string, name, isAlive: true });
+    };
+
+    onMounted(() => {
+      appendNewRoute();
+    });
+
+    watch(
+      () => route.path,
+      () => {
+        appendNewRoute();
+      },
+    );
+
+    const handleRemove = ({ value: path, index }) => {
+      const { tabRouters } = tabsRouterStore;
+      const nextRouter = tabRouters[index + 1] || tabRouters[index - 1];
+
+      tabsRouterStore.subtractCurrentTabRouter({ path, routeIdx: index });
+      if (path === route.path) {
+        router.push(nextRouter.path);
+      }
+    };
+    const handleChangeCurrentTab = (path: string) => {
+      router.push(path);
+    };
+    const handleRefresh = (currentPath: string, routeIdx: number) => {
+      tabsRouterStore.toggleTabRouterAlive(routeIdx);
+      nextTick(() => {
+        tabsRouterStore.toggleTabRouterAlive(routeIdx);
+        router.replace({ path: currentPath });
+      });
+    };
+    const handleCloseAhead = (path: string, routeIdx: number) => {
+      tabsRouterStore.subtractTabRouterAhead({ path, routeIdx });
+    };
+    const handleCloseBehind = (path: string, routeIdx: number) => {
+      tabsRouterStore.subtractTabRouterBehind({ path, routeIdx });
+    };
+    const handleCloseOther = (path: string, routeIdx: number) => {
+      tabsRouterStore.subtractTabRouterOther({ path, routeIdx });
+    };
+
     const renderSidebar = () => {
       return (
         settingStore.showSidebar && (
-          <TDesignSideNav
+          <LayoutSideNav
             showLogo={settingStore.showSidebarLogo}
             layout={settingStore.layout}
             isFixed={settingStore.isSidebarFixed}
@@ -75,7 +127,7 @@ export default defineComponent({
     const renderHeader = () => {
       return (
         settingStore.showHeader && (
-          <TDesignHeader
+          <LayoutHeader
             showLogo={settingStore.showHeaderLogo}
             theme={settingStore.displayMode}
             layout={settingStore.layout}
@@ -90,18 +142,72 @@ export default defineComponent({
     const renderFooter = () => {
       return (
         <t-footer class={`${prefix}-footer-layout`}>
-          <TDesignFooter />
+          <LayoutFooter />
         </t-footer>
       );
     };
 
     const renderContent = () => {
-      const { showBreadcrumb, showFooter } = settingStore;
+      const { showBreadcrumb, showFooter, isUseTabsRouter } = settingStore;
+      const { tabRouters } = tabsRouterStore;
       return (
         <t-layout class={[`${prefix}-layout`]}>
+          {isUseTabsRouter && (
+            <t-tabs
+              theme="card"
+              class={`${prefix}-layout-tabs-nav`}
+              value={route.path}
+              onChange={handleChangeCurrentTab}
+              style={{ maxWidth: '100%', position: 'fixed', overflow: 'visible' }}
+              onRemove={handleRemove}
+            >
+              {tabRouters.map((router: any, idx: number) => (
+                <t-tab-panel
+                  value={router.path}
+                  key={`${router.path}_${idx}`}
+                  label={
+                    <t-dropdown
+                      trigger="context-menu"
+                      minColumnWidth={128}
+                      popupProps={{ overlayClassName: 'router-tabs-dropdown' }}
+                      v-slots={{
+                        dropdown: () => (
+                          <t-dropdown-menu>
+                            <t-dropdown-item onClick={() => handleRefresh(router.path, idx)}>
+                              <t-icon name="refresh" />
+                              刷新
+                            </t-dropdown-item>
+                            {idx > 0 && (
+                              <t-dropdown-item onClick={() => handleCloseAhead(router.path, idx)}>
+                                <t-icon name="arrow-left" />
+                                关闭左侧
+                              </t-dropdown-item>
+                            )}
+                            {idx < tabRouters.length - 1 && (
+                              <t-dropdown-item onClick={() => handleCloseBehind(router.path, idx)}>
+                                <t-icon name="arrow-right" />
+                                关闭右侧
+                              </t-dropdown-item>
+                            )}
+                            <t-dropdown-item onClick={() => handleCloseOther(router.path, idx)}>
+                              <t-icon name="close-circle" />
+                              关闭其它
+                            </t-dropdown-item>
+                          </t-dropdown-menu>
+                        ),
+                      }}
+                    >
+                      {!router.isHome ? router.title : <t-icon name="home" />}
+                    </t-dropdown>
+                  }
+                  removable={!router.isHome}
+                />
+              ))}
+            </t-tabs>
+          )}
           <t-content class={`${prefix}-content-layout`}>
-            {showBreadcrumb && <TDesignBreadcrumb />}
-            <TDesignContent />
+            {showBreadcrumb && <LayoutBreadcrumb />}
+            <LayoutContent />
           </t-content>
           {showFooter && renderFooter()}
         </t-layout>
@@ -134,7 +240,7 @@ export default defineComponent({
             <t-layout class={this.mainLayoutCls}>{[sidebar, content]}</t-layout>
           </t-layout>
         )}
-        <TdesignSetting />
+        <Setting />
       </div>
     );
   },

src/layouts/setting.vue

@@ -82,6 +82,9 @@
         <t-form-item label="显示 Footer" name="showFooter">
           <t-switch v-model="formData.showFooter" />
         </t-form-item>
+        <t-form-item label="使用 多标签Tab页" name="isUseTabsRouter">
+          <t-switch v-model="formData.isUseTabsRouter"></t-switch>
+        </t-form-item>
       </t-form>
       <div class="setting-info">
         <p>请复制后手动修改配置文件: /src/config/style.ts</p>

src/pages/dashboard/base/index.vue

@@ -202,6 +202,13 @@
     </div>
   </div>
 </template>
+
+<script lang="ts">
+export default {
+  name: 'DashboardBase',
+};
+</script>
+
 <script setup lang="ts">
 import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
 
@@ -386,9 +393,11 @@ const getRankClass = (index: number) => {
   return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
 };
 </script>
+
 <style lang="less" scoped>
 @import './index.less';
 </style>
+
 <style lang="less">
 @import '@/style/variables.less';
 

src/pages/dashboard/detail/index.vue

@@ -57,6 +57,13 @@
     </card>
   </div>
 </template>
+
+<script lang="ts">
+export default {
+  name: 'DashboardDetail',
+};
+</script>
+
 <script setup lang="ts">
 import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
 
@@ -149,6 +156,7 @@ const onMaterialChange = (value: string[]) => {
   lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value }));
 };
 </script>
+
 <style lang="less" scoped>
 @import url('./index.less');
 </style>