From 4d6b699b7d34fb4b1ee4a430e0df77e749cb0cbd Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sun, 29 Dec 2024 11:11:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=A0=87=E7=AD=BE=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=EF=BC=8C=E9=BB=98=E8=AE=A4=E6=A0=87=E7=AD=BE=E6=94=BE?=
 =?UTF-8?q?=E5=88=B0=E6=9C=80=E5=90=8E=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/config/TagBar.vue | 115 +++++++++++++++++++++++++++++--
 src/pages/ConfigurationPage.vue  |   8 +--
 2 files changed, 114 insertions(+), 9 deletions(-)

diff --git a/src/components/config/TagBar.vue b/src/components/config/TagBar.vue
index ec1d9da..fcb02f2 100644
--- a/src/components/config/TagBar.vue
+++ b/src/components/config/TagBar.vue
@@ -17,13 +17,35 @@
       :key="denseTagBar"
       :dense="denseTagBar"
     >
-      <!-- 所有标签 -->
+      <!-- 可拖拽标签 -->
+      <draggable
+        v-model="sortableTags"
+        :animation="200"
+        ghost-class="ghost"
+        tag="div"
+        item-key="tag"
+        class="draggable-container"
+        handle=".q-tab"
+        @change="handleTagsChange"
+      >
+        <template #item="{ element }">
+          <q-tab
+            :name="element"
+            :data-active-panel="activatedQuickPanels.includes(element)"
+            class="draggable-tag"
+          >
+            {{ element }}
+          </q-tab>
+        </template>
+      </draggable>
+      <!-- 固定标签（不可拖拽） -->
       <q-tab
-        v-for="tag in allQuickCommandTags"
+        v-for="tag in fixedTags"
         :key="tag"
         :name="tag"
         :data-search-result="tag === '搜索结果'"
         :data-active-panel="activatedQuickPanels.includes(tag)"
+        class="fixed-tag"
       >
         {{ tag }}
         <q-tooltip v-if="tag === '未分类'">
@@ -36,8 +58,17 @@
 </template>
 
 <script>
+import draggable from "vuedraggable";
+
+const FIXED_TAGS = ["未分类", "默认", "搜索结果"];
+const TAG_ORDER_KEY = "cfg_tagOrder";
+
 export default {
   name: "TagBar",
+  components: {
+    draggable,
+  },
+  emits: ["update:modelValue", "tags-reordered"],
   props: {
     tabBarWidth: {
       type: String,
@@ -60,6 +91,19 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      savedTagOrder: null, // 缓存标签顺序
+    };
+  },
+  created() {
+    // 初始化时读取一次数据库
+    this.savedTagOrder = this.$root.utools.getDB(TAG_ORDER_KEY);
+    if (!this.savedTagOrder.length) {
+      this.savedTagOrder = this.allQuickCommandTags;
+    }
+    this.currentTag = this.savedTagOrder[0];
+  },
   computed: {
     currentTag: {
       get() {
@@ -69,6 +113,56 @@ export default {
         this.$emit("update:modelValue", value);
       },
     },
+    // 固定标签（不可拖拽）
+    fixedTags() {
+      return FIXED_TAGS.filter((tag) => this.allQuickCommandTags.includes(tag));
+    },
+    // 可拖拽标签
+    sortableTags: {
+      get() {
+        const draggableTags = this.allQuickCommandTags.filter(
+          (tag) => !FIXED_TAGS.includes(tag)
+        );
+
+        // 根据保存的顺序排序
+        const orderedTags = [];
+        // 先添加有序的标签
+        this.savedTagOrder.forEach((tag) => {
+          if (draggableTags.includes(tag)) {
+            orderedTags.push(tag);
+          }
+        });
+        // 再添加新标签
+        draggableTags.forEach((tag) => {
+          if (!orderedTags.includes(tag)) {
+            orderedTags.push(tag);
+          }
+        });
+
+        return orderedTags;
+      },
+      set(value) {
+        // 更新内部缓存
+        this.savedTagOrder = value;
+        // 保存到数据库
+        this.$root.utools.putDB(value, TAG_ORDER_KEY);
+        // 触发标签重排序事件
+        this.$emit("tags-reordered", value);
+      },
+    },
+  },
+  methods: {
+    handleTagsChange(evt) {
+      if (evt.moved) {
+        const newOrder = [...this.sortableTags];
+        // 更新内部缓存
+        this.savedTagOrder = newOrder;
+        // 保存到数据库
+        this.$root.utools.putDB(newOrder, TAG_ORDER_KEY);
+        // 触发重新加载标签
+        this.$emit("tags-reordered", newOrder);
+      }
+    },
   },
 };
 </script>
@@ -156,8 +250,21 @@ export default {
   width: 0 !important;
 }
 
-/* 暗色模式适配 */
-:deep(.body--dark) .q-tab:hover::after {
+/* 拖拽相关样式 */
+.draggable-container {
+  width: 100%;
+}
+
+.draggable-tag {
+  cursor: move;
+  touch-action: none;
+}
+
+.ghost {
   opacity: 0.15;
 }
+
+.fixed-tag {
+  cursor: default;
+}
 </style>
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index eaa16f9..afe5d2b 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -86,7 +86,7 @@ export default {
   },
   data() {
     return {
-      currentTag: "默认",
+      currentTag: "",
       lastTag: "",
       activatedQuickCommandFeatureCodes: [],
       activatedQuickPanels: [],
@@ -205,13 +205,11 @@ export default {
       this.getAllQuickCommandTags();
     },
     getAllQuickCommandTags() {
+      // 获取所有标签
       this.allQuickCommandTags = _.union(
         ...Object.values(this.allQuickCommands).map((x) => x.tags)
       )
-        .concat([
-          "未分类",
-          // "来自分享"
-        ])
+        .concat(["未分类"])
         .filter((x) => x);
     },
     // 监听命令变更事件