feat(projects): 多页签绑定路由

src/layouts/BasicLayout/components/GlobalTab/index.vue

@@ -1,25 +1,33 @@
 <template>
   <div v-if="fixedHeaderAndTab && theme.navStyle.mode !== 'horizontal-mix'" class="multi-tab-height w-full"></div>
   <div
-    class="multi-tab-height flex-y-center w-full px-10px"
+    class="multi-tab-height flex-y-center justify-between w-full px-10px"
     :class="{ 'multi-tab-top absolute': fixedHeaderAndTab, 'bg-[#f5f7f9]': !theme.darkMode }"
     :style="{ zIndex }"
   >
     <n-space :align="'center'">
-      <n-tag>爱在西元前</n-tag>
-      <n-tag type="success">不该</n-tag>
-      <n-tag type="warning">超人不会飞</n-tag>
-      <n-tag type="error">手写的从前</n-tag>
-      <n-tag type="info">哪里都是你</n-tag>
-      <n-gradient-text size="24">这是MultiTab组件</n-gradient-text>
+      <n-tag
+        v-for="item in app.multiTab.routes"
+        :key="item.path"
+        :type="app.multiTab.activeRoute === item.fullPath ? 'primary' : 'default'"
+        class="cursor-pointer"
+        @click="handleClickTab(item.fullPath)"
+      >
+        {{ item.meta?.title }}
+      </n-tag>
     </n-space>
+    <div class="flex-center w-32px h-32px bg-white cursor-pointer" @click="handleReload">
+      <icon-mdi-refresh class="text-16px" />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { NSpace, NTag, NGradientText } from 'naive-ui';
-import { useThemeStore } from '@/store';
+import { computed, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { NSpace, NTag } from 'naive-ui';
+import { useThemeStore, useAppStore } from '@/store';
+import { useRouterChange } from '@/hooks';
 
 defineProps({
   zIndex: {
@@ -28,7 +36,11 @@ defineProps({
   }
 });
 
+const route = useRoute();
 const theme = useThemeStore();
+const app = useAppStore();
+const { initMultiTab, addMultiTab, setActiveMultiTab, handleClickTab } = useAppStore();
+const { toReload } = useRouterChange();
 
 const fixedHeaderAndTab = computed(() => theme.fixedHeaderAndTab || theme.navStyle.mode === 'horizontal-mix');
 const multiTabHeight = computed(() => {
@@ -39,6 +51,25 @@ const headerHeight = computed(() => {
   const { height } = theme.headerStyle;
   return `${height}px`;
 });
+
+function handleReload() {
+  toReload(route.fullPath);
+}
+
+function init() {
+  initMultiTab();
+}
+
+watch(
+  () => route.fullPath,
+  newValue => {
+    addMultiTab(route);
+    setActiveMultiTab(newValue);
+  }
+);
+
+// 初始化
+init();
 </script>
 <style scoped>
 .multi-tab-height {