feat(header): 增加动态标签栏

src/layouts/BasicLayout/index.vue

@@ -21,9 +21,9 @@
           <UserCenter />
         </div>
       </n-layout-header>
-      <n-layout-header bordered class="h-40px"><TabBar /></n-layout-header>
+      <n-layout-header bordered class="h-45px"><TabBar /></n-layout-header>
       <div class="p-16px">
-        <n-layout-content>
+        <n-layout-content class="bg-transparent">
           <router-view v-slot="{ Component }">
             <transition name="fade-slide" appear mode="out-in">
               <component :is="Component" v-if="appStore.loadFlag" />

src/layouts/components/tab/TabBar.vue

@@ -1,7 +1,24 @@
 <template>
-  <div class="bg-#333 wh-full"></div>
+  <div class="wh-full px-3 flex items-end">
+    <n-tabs type="card" size="small">
+      <n-tab name="幸福">工作台</n-tab>
+      <n-tab v-for="item in tabStore.tabs" :key="item.path" closable :name="item.meta.title" @click="handleTab(item)">
+        {{ item.meta.title }}
+      </n-tab>
+    </n-tabs>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useTabStore } from '@/store';
+import { useAppRouter } from '~/src/hook';
+import { RouteLocationNormalized } from 'vue-router';
+const tabStore = useTabStore();
+const { routerPush } = useAppRouter();
+
+const handleTab = (route: RouteLocationNormalized) => {
+  routerPush(route.path);
+};
+</script>
 
 <style scoped></style>

src/router/guard/permission.ts

@@ -1,6 +1,6 @@
 import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
 import { getToken } from '@/utils/auth';
-import { useRouteStore } from '@/store';
+import { useRouteStore, useTabStore } from '@/store';
 
 export async function createPermissionGuard(
   to: RouteLocationNormalized,
@@ -9,6 +9,7 @@ export async function createPermissionGuard(
 ) {
   const isLogin = Boolean(getToken());
   const routeStore = useRouteStore();
+  const tabStore = useTabStore();
 
   // 判断路由有无进行初始化
   if (!routeStore.isInitAuthRoute) {
@@ -41,6 +42,7 @@ export async function createPermissionGuard(
   } else {
     routeStore.setActiveMenu(to.fullPath);
   }
-
+  // 添加动态tabs
+  tabStore.addTab(to);
   next();
 }

src/store/modules/index.ts

@@ -1,3 +1,4 @@
 export * from './app';
 export * from './auth';
 export * from './route';
+export * from './tab';

src/store/modules/tab.ts

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia';
+import { RouteLocationNormalized } from 'vue-router';
+
+interface TabState {
+  tabs: RouteLocationNormalized[];
+}
+export const useTabStore = defineStore('tab-store', {
+  state: (): TabState => {
+    return {
+      tabs: [],
+    };
+  },
+  actions: {
+    addTab(route: RouteLocationNormalized) {
+      this.tabs.push(route);
+    },
+  },
+});

src/types/route.d.ts

@@ -25,7 +25,7 @@ declare namespace AppRoute {
   /** 路由描述 */
   interface RouteMeta {
     /* 页面标题，通常必选。 */
-    title?: string;
+    title: string;
     /* 图标，一般配合菜单使用 */
     icon?: string;
     /* 是否需要登录权限。*/