增加了tabs

pc/src/stores/index.js

@@ -1,24 +1,96 @@
-import { defineStore } from 'pinia'
-import { ref, computed, reactive } from 'vue'
+import { defineStore } from 'pinia';
+import { ref, computed, reactive } from 'vue';
 
-// 初始化state数据
+// ========== 全局状态 Store ==========
 function initState() {
-    return {
-        isCollapse: false,
-    };
+  return {
+    isCollapse: false,
+  };
 }
 
 export const useAllDataStore = defineStore('allData', () => {
-    const state = reactive(initState());
-    const count = ref(0);
-    const doubleCount = computed(() => count.value * 2);
-    function increment() {
-        count.value++;
+  const state = reactive(initState());
+  const count = ref(0);
+  const doubleCount = computed(() => count.value * 2);
+  function increment() {
+    count.value++;
+  }
+  return {
+    state,
+    count,
+    doubleCount,
+    increment,
+  };
+});
+
+// ========== 多标签页 Tabs Store ==========
+import { defineStore as defineTabsStore } from 'pinia';
+import { ref as vueRef } from 'vue';
+
+/**
+ * 多标签页Tabs状态管理
+ * tabList每个tab结构: {
+ *   title: 标签显示名,
+ *   fullPath: 路由路径（唯一key）,
+ *   name: 路由name,
+ *   icon: 图标（可选）
+ * }
+ */
+export const useTabsStore = defineTabsStore('tabs', () => {
+  // 固定首页tab
+  const defaultDashboardPath = '/dashboard';
+  const tabList = vueRef([
+    { title: '首页', fullPath: defaultDashboardPath, name: 'Dashboard' },
+  ]);
+  const activeTab = vueRef(defaultDashboardPath);
+
+  // 添加tab，若已存在则激活
+  function addTab(tab) {
+    const exist = tabList.value.find((t) => t.fullPath === tab.fullPath);
+    if (!exist) {
+      tabList.value.push(tab);
     }
-    return {
-        state,
-        count,
-        doubleCount,
-        increment
+    activeTab.value = tab.fullPath;
+  }
+
+  // 删除指定tab并切换激活tab
+  function removeTab(fullPath) {
+    const idx = tabList.value.findIndex((t) => t.fullPath === fullPath);
+    if (idx > -1) {
+      tabList.value.splice(idx, 1);
+      // 只在关闭当前激活tab时切换激活tab
+      if (activeTab.value === fullPath) {
+        if (tabList.value.length > 0) {
+          // 优先激活右侧（如无则激活左侧）
+          const newIdx = idx >= tabList.value.length ? tabList.value.length - 1 : idx;
+          activeTab.value = tabList.value[newIdx].fullPath;
+        } else {
+          // 全部关闭，兜底首页
+          activeTab.value = defaultDashboardPath;
+        }
+      }
     }
-})
+  }
+
+  // 关闭其他，只留首页和当前激活tab
+  function closeOthers() {
+    tabList.value = tabList.value.filter(
+      (t) => t.fullPath === defaultDashboardPath || t.fullPath === activeTab.value
+    );
+  }
+
+  // 关闭全部，只留首页
+  function closeAll() {
+    tabList.value = tabList.value.filter((t) => t.fullPath === defaultDashboardPath);
+    activeTab.value = defaultDashboardPath;
+  }
+
+  return {
+    tabList,
+    activeTab,
+    addTab,
+    removeTab,
+    closeOthers,
+    closeAll,
+  };
+});