From 30ef04efe3dab10702cb69fa88e42437fe7b0a8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98chen=2Ehome=E2=80=99?= <1147347984@qq.com>
Date: Fri, 19 Aug 2022 00:44:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(header):=20=E5=A2=9E=E5=8A=A0=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E6=A0=87=E7=AD=BE=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BasicLayout/index.vue     |  4 ++--
 src/layouts/components/tab/TabBar.vue | 21 +++++++++++++++++++--
 src/router/guard/permission.ts        |  6 ++++--
 src/store/modules/index.ts            |  1 +
 src/store/modules/tab.ts              | 18 ++++++++++++++++++
 src/types/route.d.ts                  |  2 +-
 6 files changed, 45 insertions(+), 7 deletions(-)
 create mode 100644 src/store/modules/tab.ts

diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index ef83306..be319f2 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/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" />
diff --git a/src/layouts/components/tab/TabBar.vue b/src/layouts/components/tab/TabBar.vue
index f166cb5..7f79cf3 100644
--- a/src/layouts/components/tab/TabBar.vue
+++ b/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>
diff --git a/src/router/guard/permission.ts b/src/router/guard/permission.ts
index c8d8346..8de96a4 100644
--- a/src/router/guard/permission.ts
+++ b/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();
 }
diff --git a/src/store/modules/index.ts b/src/store/modules/index.ts
index bf5ca14..ab9c9d3 100644
--- a/src/store/modules/index.ts
+++ b/src/store/modules/index.ts
@@ -1,3 +1,4 @@
 export * from './app';
 export * from './auth';
 export * from './route';
+export * from './tab';
diff --git a/src/store/modules/tab.ts b/src/store/modules/tab.ts
new file mode 100644
index 0000000..ca379e1
--- /dev/null
+++ b/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);
+    },
+  },
+});
diff --git a/src/types/route.d.ts b/src/types/route.d.ts
index e5553b6..3b2c50d 100644
--- a/src/types/route.d.ts
+++ b/src/types/route.d.ts
@@ -25,7 +25,7 @@ declare namespace AppRoute {
   /** 路由描述 */
   interface RouteMeta {
     /* 页面标题，通常必选。 */
-    title?: string;
+    title: string;
     /* 图标，一般配合菜单使用 */
     icon?: string;
     /* 是否需要登录权限。*/