feat: 集成tags多标签功能

src/layout/components/tags/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="tags-wrapper" :style="{ height: useTheme.tag.height + 'px' }">
+    <n-space>
+      <n-tag
+        v-for="tag in useTag.tags"
+        :key="tag.path"
+        :type="useTag.activeTag === tag.path ? 'primary' : 'default'"
+        :closable="useTag.tags.length > 1"
+        @click="handleTagClick(tag.path)"
+        @close.stop="handleClose(tag.path)"
+      >
+        {{ tag.title }}
+      </n-tag>
+    </n-space>
+  </div>
+</template>
+
+<script setup name="Tags">
+import { watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useTagStore } from '@/store/modules/tag'
+import { useThemeStore } from '@/store/modules/theme'
+
+const route = useRoute()
+const router = useRouter()
+const useTag = useTagStore()
+const useTheme = useThemeStore()
+
+watch(
+  () => route.path,
+  () => {
+    const { name, path } = route
+    const title = route.meta?.title
+    useTag.addTag({ name, path, title })
+    useTag.setActiveTag(path)
+  },
+  { immediate: true }
+)
+
+const handleTagClick = (path) => {
+  useTag.setActiveTag(path)
+  router.push(path)
+}
+
+const handleClose = (path) => {
+  if (path === useTag.activeTag) {
+    const activeIndex = useTag.tags.findIndex((item) => item.path === path)
+    if (activeIndex > 0) {
+      router.push(useTag.tags[activeIndex - 1].path)
+    } else {
+      router.push(useTag.tags[activeIndex + 1].path)
+    }
+  }
+  useTag.removeTag(path)
+}
+</script>
+
+<style lang="scss">
+.tags-wrapper {
+  display: flex;
+  align-items: center;
+  background-color: #f5f6fb;
+  padding: 0 10px;
+  position: sticky;
+  top: 0;
+  z-index: 9;
+  .n-tag {
+    padding: 0 15px;
+    cursor: pointer;
+    .n-tag__close {
+      margin-left: 5px;
+      box-sizing: content-box;
+      font-size: 12px;
+      padding: 2px;
+      border-radius: 50%;
+      transition: all 0.7s;
+      &:hover {
+        color: #fff;
+        background-color: $primaryColor;
+      }
+    }
+    &:hover {
+      color: $primaryColor;
+    }
+  }
+}
+</style>

src/layout/index.vue

@@ -1,20 +1,16 @@
-<script setup>
-import AppHeader from './components/header/index.vue'
-import SideMenu from './components/sidebar/index.vue'
-import AppMain from './components/AppMain.vue'
-</script>
-
 <template>
   <div class="layout">
     <n-layout has-sider position="absolute">
       <n-layout-sider :width="200" :collapsed-width="0" :native-scrollbar="false">
-        <SideMenu />
+        <SideBar />
       </n-layout-sider>
       <n-layout>
         <n-layout-header>
           <AppHeader />
         </n-layout-header>
+
         <n-layout position="absolute" style="top: 60px; background-color: #f5f6fb" :native-scrollbar="false">
+          <AppTags v-if="useTheme.tag.visible" />
           <AppMain />
         </n-layout>
       </n-layout>
@@ -22,6 +18,16 @@ import AppMain from './components/AppMain.vue'
   </div>
 </template>
 
+<script setup>
+import AppHeader from './components/header/index.vue'
+import SideBar from './components/sidebar/index.vue'
+import AppMain from './components/AppMain.vue'
+import AppTags from './components/tags/index.vue'
+import { useThemeStore } from '@/store/modules/theme'
+
+const useTheme = useThemeStore()
+</script>
+
 <style lang="scss" scoped>
 .n-layout-header {
   height: 60px;

src/store/modules/tag.js

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+
+export const useTagStore = defineStore('tag', {
+  state() {
+    return {
+      tags: [],
+      activeTag: '',
+    }
+  },
+  actions: {
+    setActiveTag(path) {
+      this.activeTag = path
+    },
+    addTag(tag = {}) {
+      if (this.tags.some((item) => item.path === tag.path)) return
+      this.tags.push(tag)
+    },
+    removeTag(path) {
+      this.tags = this.tags.filter((tag) => tag.path !== path)
+    },
+  },
+})

src/store/modules/theme/index.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+
+export const useThemeStore = defineStore('theme', {
+  state() {
+    return {
+      tag: {
+        visible: true,
+        height: 50,
+      },
+    }
+  },
+  actions: {
+    setTabVisible(visible) {
+      this.tag.visible = visible
+    },
+  },
+})