feat: 导出关闭某个标签的hooks

src/store/modules/multiTags.ts

@@ -89,7 +89,13 @@ export const useMultiTagsStore = defineStore({
           }
           break;
         case "splice":
-          this.multiTags.splice(position?.startIndex, position?.length);
+          if (!position) {
+            const index = this.multiTags.findIndex(v => v.path === value);
+            if (index === -1) return;
+            this.multiTags.splice(index, 1);
+          } else {
+            this.multiTags.splice(position?.startIndex, position?.length);
+          }
           this.tagsCache(this.multiTags);
           return this.multiTags;
         case "slice":

src/style/element-plus.scss

@@ -42,9 +42,10 @@
 }
 
 /* 动态改变cssvar 用于主题切换 https://github.com/element-plus/element-plus/issues/4856#issuecomment-1000174357 */
-.el-button--primary {
-  --el-button-active-bg-color: var(--el-color-primary-active) !important;
-  --el-button-active-border-color: var(--el-color-primary-active) !important;
+.el-button--primary,
+.el-button--primary.is-plain {
+  --el-button-active-bg-color: var(--el-color-primary) !important;
+  --el-button-active-border-color: var(--el-color-primary) !important;
 }
 
 /* button--primary plain */

src/utils/tree.ts

@@ -65,3 +65,55 @@ export function buildHierarchyTree(menuTree, pathList = []) {
   }
   return menuTree;
 }
+
+/**
+ * 广度优先遍历算法，找当前节点
+ * @param {Array} tree 原始树，数组
+ * @param {Number|String} uniqueId 唯一uniqueId
+ * @return {Object} node
+ */
+export function getNodeByUniqueId(menuTree, uniqueId) {
+  if (!Array.isArray(menuTree)) {
+    console.warn("menuTree must be an array");
+    return;
+  }
+  if (!menuTree || menuTree.length === 0) return;
+  const item = menuTree.find(node => node.uniqueId === uniqueId);
+  if (item) return item;
+  const childrenList = menuTree
+    .filter(node => node.children)
+    .map(i => i.children)
+    .flat(1);
+  return getNodeByUniqueId(childrenList, uniqueId);
+}
+
+/**
+ * 向当前唯一uniqueId节点追加字段
+ * @param {Array} {menuTree 菜单树}
+ * @param {Number|String} uniqueId 唯一uniqueId
+ * @param {Object} fields 唯一uniqueId
+ * @return {menuTree} 追加字段后的树
+ */
+export function appendFieldByUniqueId(
+  menuTree: Array<any>,
+  uniqueId: Number | String,
+  fields: Object
+) {
+  if (!Array.isArray(menuTree)) {
+    console.warn("menuTree must be an array");
+    return;
+  }
+  if (!menuTree || menuTree.length === 0) return {};
+  for (const node of menuTree) {
+    const hasChildren = node.children && node.children.length > 0;
+    if (
+      node.uniqueId === uniqueId &&
+      Object.prototype.toString.call(fields) === "[object Object]"
+    )
+      Object.assign(node, fields);
+    if (hasChildren) {
+      appendFieldByUniqueId(node.children, uniqueId, fields);
+    }
+  }
+  return menuTree;
+}

src/views/tabs/index.vue

@@ -1,9 +1,30 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { ref, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import { TreeSelect } from "@pureadmin/components";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 
-const router = useRouter();
+import {
+  deleteChildren,
+  appendFieldByUniqueId,
+  getNodeByUniqueId
+} from "/@/utils/tree";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
+
+let treeData = computed(() => {
+  return appendFieldByUniqueId(
+    deleteChildren(usePermissionStoreHook().menusTree),
+    0,
+    { disabled: true }
+  );
+});
+
+const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
+
+const value = ref<string[]>([]);
 
 function toDetail(index: number) {
   useMultiTagsStoreHook().handleTags("push", {
@@ -20,6 +41,15 @@ function toDetail(index: number) {
   });
   router.push({ name: "tabDetail", query: { id: String(index) } });
 }
+
+function onCloseTags() {
+  value.value.forEach(uniqueId => {
+    let currentPath =
+      getNodeByUniqueId(treeData.value, uniqueId).redirect ??
+      getNodeByUniqueId(treeData.value, uniqueId).path;
+    useMultiTagsStoreHook().handleTags("splice", currentPath);
+  });
+}
 </script>
 
 <template>
@@ -34,5 +64,33 @@ function toDetail(index: number) {
     <el-button v-for="index in 6" :key="index" @click="toDetail(index)">
       打开{{ index }}详情页
     </el-button>
+    <el-divider />
+    <TreeSelect
+      class="w-300px"
+      v-model:value="value"
+      show-search
+      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+      placeholder="请选择要关闭的标签"
+      :fieldNames="{
+        children: 'children',
+        key: 'uniqueId',
+        value: 'uniqueId'
+      }"
+      allow-clear
+      multiple
+      tree-default-expand-all
+      :tree-data="treeData"
+    >
+      <template #tagRender="{ closable, onClose, option }">
+        <el-tag class="mr-3px" :closable="closable" @close="onClose">
+          {{ t(option.meta.title) }}
+        </el-tag>
+      </template>
+
+      <template #title="{ data }">
+        <span>{{ t(data.meta.title) }}</span>
+      </template>
+    </TreeSelect>
+    <el-button class="ml-2" @click="onCloseTags">关闭标签</el-button>
   </el-card>
 </template>