From 9ffa941e727e9c68164aa8ae6841575a4360e4e4 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Thu, 13 Feb 2025 21:43:18 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84ConfigurationPage=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=95=B0=E6=8D=AE=E4=BC=A0=E9=80=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 plugin/lib/lodashMini.js                  |  21 ---
 src/components/CommandEditor.vue          |   5 -
 src/components/ComposerEditor.vue         |  17 +-
 src/components/config/CommandPanels.vue   | 158 +++++++++++------
 src/components/config/FooterBar.vue       |  56 ++++--
 src/components/config/TagBar.vue          |  40 ++---
 src/components/editor/CommandConfig.vue   |  28 ++-
 src/components/menu/CommandManageMenu.vue |  70 ++++++--
 src/components/menu/index.vue             |  44 +++--
 src/components/popup/PanelSetting.vue     |   3 +-
 src/js/commandManager.js                  |  16 +-
 src/pages/ConfigurationPage.vue           | 202 ++--------------------
 12 files changed, 291 insertions(+), 369 deletions(-)

diff --git a/plugin/lib/lodashMini.js b/plugin/lib/lodashMini.js
index 0c49d17..f9cab6a 100644
--- a/plugin/lib/lodashMini.js
+++ b/plugin/lib/lodashMini.js
@@ -249,27 +249,6 @@ const lodashMini = {
     );
   },
 
-  /**
-   * 移除数组中所有给定值
-   * @param {Array} array - 要修改的数组
-   * @param {...*} values - 要移除的值
-   * @returns {Array} 返回数组本身
-   * @example
-   * pull([1, 2, 3, 1, 2, 3], 2, 3) => [1, 1]
-   */
-  pull: function (array, ...values) {
-    if (!array || !array.length || !values.length) return array;
-    let i = 0;
-    while (i < array.length) {
-      if (values.includes(array[i])) {
-        array.splice(i, 1);
-      } else {
-        i++;
-      }
-    }
-    return array;
-  },
-
   /**
    * 截断字符串
    * @param {string} [string=''] - 要截断的字符串
diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue
index a845f18..b88367f 100644
--- a/src/components/CommandEditor.vue
+++ b/src/components/CommandEditor.vue
@@ -161,11 +161,6 @@ export default {
     this.commandInit();
     this.sidebarInit();
   },
-  computed: {
-    configurationPage() {
-      return this.$root.$refs.view;
-    },
-  },
   methods: {
     // 命令初始化
     commandInit() {
diff --git a/src/components/ComposerEditor.vue b/src/components/ComposerEditor.vue
index 70d757b..fa04d19 100644
--- a/src/components/ComposerEditor.vue
+++ b/src/components/ComposerEditor.vue
@@ -15,13 +15,11 @@ import CommandComposer from "components/composer/CommandComposer.vue";
 import CommandRunResult from "components/CommandRunResult";
 import { findCommandByValue } from "js/composer/composerConfig";
 import programs from "js/options/programs.js";
-import { provide, ref } from "vue";
+import { ref } from "vue";
 
 export default {
   components: { CommandComposer, CommandRunResult },
   setup(props) {
-    provide("allQuickCommandTags", props.allQuickCommandTags);
-
     const retoreToFullCommand = (command) => {
       const { flows } = command;
       if (!flows) return command;
@@ -100,9 +98,13 @@ export default {
       ...defaultCommand,
       ...retoreToFullCommand(savedCommand),
     });
+
+    const isRunComposePage = ref(props.action.type === "composer");
+
     return {
       quickcommandInfo,
       getLitedComposerCommand,
+      isRunComposePage,
     };
   },
   emits: ["editorEvent"],
@@ -111,15 +113,6 @@ export default {
       type: Object,
       required: true,
     },
-    allQuickCommandTags: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      isRunComposePage: this.action.type === "composer",
-    };
   },
   methods: {
     handleComposerAction(actionType, command) {
diff --git a/src/components/config/CommandPanels.vue b/src/components/config/CommandPanels.vue
index 8750b73..cc7e4c1 100644
--- a/src/components/config/CommandPanels.vue
+++ b/src/components/config/CommandPanels.vue
@@ -25,21 +25,24 @@
         }"
       >
         <draggable
-          v-model="sortedCommands"
+          :model-value="currentTagQuickCommands"
+          @update:model-value="handleCommandsReorder"
           :component-data="{
             type: 'div',
-            class: 'row center q-pa-xs'
+            class: 'row center q-pa-xs',
           }"
           item-key="features.code"
-          @start="drag=true"
-          @end="onDragEnd"
           handle=".q-card"
           :disabled="currentTag === '默认' || currentTag === '搜索结果'"
         >
-          <template #item="{element: commandInfo}">
-            <div :key="commandInfo.features.code" :style="{
-              width: cardStyleSheet[$root.profile.commandCardStyle].width,
-            }" class="relative-position q-pa-sm command-item">
+          <template #item="{ element: commandInfo }">
+            <div
+              :key="commandInfo.features.code"
+              :style="{
+                width: cardStyleSheet[$root.profile.commandCardStyle].width,
+              }"
+              class="relative-position q-pa-sm command-item"
+            >
               <CommandCard
                 :commandInfo="commandInfo"
                 :isCommandActivated="
@@ -60,16 +63,20 @@
 
 <script>
 import CommandCard from "components/CommandCard.vue";
-import draggable from 'vuedraggable';
+import draggable from "vuedraggable";
+import pinyinMatch from "pinyin-match";
+import { useCommandManager } from "js/commandManager.js";
+import { dbManager } from "js/utools.js";
 
 export default {
   name: "CommandPanels",
   components: {
     CommandCard,
-    draggable
-  },
+    draggable,
+  },  
   data() {
     return {
+      commandManager: useCommandManager(),
       cardStyleSheet: {
         mini: {
           width: "20%",
@@ -88,8 +95,6 @@ export default {
           code: 4,
         },
       },
-      sortedCommands: [],
-      drag: false
     };
   },
   props: {
@@ -101,55 +106,110 @@ export default {
       type: String,
       required: true,
     },
-    modelValue: {
-      type: String,
-      required: true,
-    },
-    allQuickCommandTags: {
-      type: Array,
-      required: true,
-    },
-    currentTagQuickCommands: {
-      type: Array,
-      required: true,
-    },
-    activatedQuickCommandFeatureCodes: {
-      type: Array,
-      required: true,
-    },
   },
   computed: {
     currentTag: {
       get() {
-        return this.modelValue;
+        return this.commandManager.state.currentTag;
       },
       set(value) {
-        this.$emit("update:modelValue", value);
+        this.commandManager.state.currentTag = value;
       },
     },
-  },
-  watch: {
-    currentTagQuickCommands: {
-      immediate: true,
-      handler(newCommands) {
-        this.sortedCommands = [...newCommands];
+    allQuickCommandTags() {
+      return this.commandManager.state.allQuickCommandTags;
+    },
+    activatedQuickCommandFeatureCodes() {
+      return this.commandManager.state.activatedQuickCommandFeatureCodes;
+    },
+    commandSearchKeyword() {
+      return this.commandManager.state.commandSearchKeyword;
+    },
+    allQuickCommands() {
+      return this.commandManager.state.allQuickCommands;
+    },
+    // 当前标签下的所有快捷命令
+    currentTagQuickCommands() {
+      let commands = Object.values(
+        window.lodashM.cloneDeep(this.allQuickCommands)
+      );
+
+      // 根据 order 排序
+      const sortByOrder = (cmds) => {
+        return cmds.sort((a, b) => {
+          const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
+          const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
+          return orderA - orderB;
+        });
+      };
+
+      switch (this.currentTag) {
+        case "未分类":
+          return sortByOrder(
+            commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0)
+          );
+        case "搜索结果":
+          if (this.commandSearchKeyword?.length < 2) return;
+          let searchResult = [];
+          commands.forEach((cmd) => {
+            // 拼音搜索
+            let explain = cmd.features.explain;
+            let matchedWordPositions = pinyinMatch.match(
+              explain,
+              this.commandSearchKeyword
+            );
+            if (!matchedWordPositions) return;
+            let matchedWords = explain.slice(
+              matchedWordPositions[0],
+              matchedWordPositions[1] + 1
+            );
+            // 高亮
+            cmd.features.explain = explain.replace(
+              matchedWords,
+              `<strong style="color:#ed6237">${matchedWords}</strong>`
+            );
+            searchResult.push(cmd);
+          });
+          return searchResult;
+        case "默认":
+          return commands.filter((cmd) => cmd.tags?.includes(this.currentTag));
+        default:
+          return sortByOrder(
+            commands.filter((cmd) => cmd.tags?.includes(this.currentTag))
+          );
       }
-    }
+    },
   },
   methods: {
-    onDragEnd() {
-      this.drag = false;
-      this.$emit('commands-reordered', {
-        tag: this.currentTag,
-        commands: this.sortedCommands
+    handleCommandsReorder(commands) {
+      // 更新当前tag下的命令顺序
+      const tagCommands = {};
+      commands.forEach((command, index) => {
+        tagCommands[command.features.code] = {
+          ...command,
+          order: index, // 添加排序信息
+        };
       });
-    }
+
+      // 更新存储
+      this.commandManager.state.allQuickCommands = {
+        ...this.allQuickCommands,
+        ...tagCommands,
+      };
+
+      // 只保存被修改的命令
+      this.saveCurrentTagOrderedCommand(tagCommands);
+    },
+    saveCurrentTagOrderedCommand(tagCommands) {
+      // 只保存被修改的命令
+      Object.entries(tagCommands).forEach(([code, command]) => {
+        if (!this.commandManager.isDefaultCommand(code)) {
+          dbManager.putDB(window.lodashM.cloneDeep(command), "qc_" + code);
+        }
+      });
+    },
   },
-  emits: [
-    "update:modelValue",
-    "command-changed",
-    "commands-reordered"
-  ],
+  emits: ["command-changed"],
 };
 </script>
 
diff --git a/src/components/config/FooterBar.vue b/src/components/config/FooterBar.vue
index b72ab17..fb9cc30 100644
--- a/src/components/config/FooterBar.vue
+++ b/src/components/config/FooterBar.vue
@@ -7,7 +7,7 @@
       <!-- 搜索栏 -->
       <div class="col">
         <q-input
-          :model-value="searchKeyword"
+          :model-value="commandSearchKeyword"
           @update:model-value="updateSearch"
           debounce="200"
           filled
@@ -103,10 +103,7 @@
             icon="settings"
             :style="{ height: height }"
           >
-            <ConfigurationMenu
-              :isTagStared="isTagStared"
-              :currentTag="currentTag"
-            />
+            <ConfigurationMenu />
           </q-btn>
         </q-btn-group>
       </div>
@@ -116,6 +113,7 @@
 
 <script>
 import ConfigurationMenu from "components/menu";
+import { useCommandManager } from "js/commandManager.js";
 
 export default {
   name: "FooterBar",
@@ -131,30 +129,33 @@ export default {
       type: String,
       required: true,
     },
-    isTagStared: {
-      type: Boolean,
-      required: true,
+  },
+  emits: ["add-new"],
+  computed: {
+    commandSearchKeyword() {
+      return this.commandManager.state.commandSearchKeyword;
     },
-    currentTag: {
-      type: String,
-      required: true,
+    currentTag() {
+      return this.commandManager.state.currentTag;
     },
-    searchKeyword: {
-      type: String,
-      default: "",
+    allQuickCommandTags: {
+      get() {
+        return this.commandManager.state.allQuickCommandTags;
+      },
+      set(value) {
+        this.commandManager.state.allQuickCommandTags = value;
+      },
     },
   },
-  emits: ["update:search", "add-new"],
   data() {
     return {
+      commandManager: useCommandManager(),
       isDarkMode: this.$q.dark.isActive,
       isDev: utools.isDev(),
+      lastTag: "",
     };
   },
   methods: {
-    updateSearch(value) {
-      this.$emit("update:search", value);
-    },
     toggleDarkMode() {
       this.$q.dark.toggle();
       this.isDarkMode = this.$q.dark.isActive;
@@ -162,6 +163,25 @@ export default {
     goShareCenter() {
       utools.shellOpenExternal("https://qc.qaz.ink/");
     },
+    // 搜索方法
+    updateSearch(value) {
+      this.commandManager.state.commandSearchKeyword = value;
+      // 记录当前标签页
+      let searchTagName = "搜索结果";
+      if (this.currentTag !== searchTagName) this.lastTag = this.currentTag;
+      if (this.commandSearchKeyword?.length > 1) {
+        if (!this.allQuickCommandTags.includes(searchTagName))
+          this.allQuickCommandTags.push(searchTagName);
+        // 搜索时跳转到搜索结果标签
+        this.commandManager.changeCurrentTag(searchTagName);
+      } else {
+        // 清空搜索回跳到之前标签
+        if (this.allQuickCommandTags.slice(-1)[0] === searchTagName)
+          this.allQuickCommandTags.pop();
+        if (this.currentTag !== this.lastTag)
+          this.commandManager.changeCurrentTag(this.lastTag);
+      }
+    },
   },
 };
 </script>
diff --git a/src/components/config/TagBar.vue b/src/components/config/TagBar.vue
index cd7bc59..02cb690 100644
--- a/src/components/config/TagBar.vue
+++ b/src/components/config/TagBar.vue
@@ -14,8 +14,7 @@
       v-model="currentTag"
       vertical
       switch-indicator
-      :key="denseTagBar"
-      :dense="denseTagBar"
+      :dense="$root.profile.denseTagBar"
     >
       <!-- 可拖拽标签 -->
       <draggable
@@ -31,7 +30,7 @@
         <template #item="{ element }">
           <q-tab
             :name="element"
-            :data-active-panel="activatedQuickPanels.includes(element)"
+            :data-active-panel="isTagStared(element)"
             class="draggable-tag"
           >
             {{ element }}
@@ -44,7 +43,7 @@
         :key="tag"
         :name="tag"
         :data-search-result="tag === '搜索结果'"
-        :data-active-panel="activatedQuickPanels.includes(tag)"
+        :data-active-panel="isTagStared(tag)"
         class="fixed-tag"
       >
         {{ tag }}
@@ -60,6 +59,7 @@
 <script>
 import draggable from "vuedraggable";
 import { dbManager } from "js/utools.js";
+import { useCommandManager } from "js/commandManager.js";
 
 const FIXED_TAGS = ["未分类", "默认", "搜索结果"];
 const TAG_ORDER_KEY = "cfg_tagOrder";
@@ -69,31 +69,15 @@ export default {
   components: {
     draggable,
   },
-  emits: ["update:modelValue", "tags-reordered"],
   props: {
     tabBarWidth: {
       type: String,
       required: true,
     },
-    allQuickCommandTags: {
-      type: Array,
-      required: true,
-    },
-    activatedQuickPanels: {
-      type: Array,
-      required: true,
-    },
-    modelValue: {
-      type: String,
-      required: true,
-    },
-    denseTagBar: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
+      commandManager: useCommandManager(),
       savedTagOrder: null, // 缓存标签顺序
     };
   },
@@ -108,12 +92,15 @@ export default {
   computed: {
     currentTag: {
       get() {
-        return this.modelValue;
+        return this.commandManager.state.currentTag;
       },
       set(value) {
-        this.$emit("update:modelValue", value);
+        this.commandManager.state.currentTag = value;
       },
     },
+    allQuickCommandTags() {
+      return this.commandManager.state.allQuickCommandTags;
+    },
     // 固定标签（不可拖拽）
     fixedTags() {
       return FIXED_TAGS.filter((tag) => this.allQuickCommandTags.includes(tag));
@@ -147,8 +134,6 @@ export default {
         this.savedTagOrder = value;
         // 保存到数据库
         dbManager.putDB(value, TAG_ORDER_KEY);
-        // 触发标签重排序事件
-        this.$emit("tags-reordered", value);
       },
     },
   },
@@ -160,10 +145,11 @@ export default {
         this.savedTagOrder = newOrder;
         // 保存到数据库
         dbManager.putDB(newOrder, TAG_ORDER_KEY);
-        // 触发重新加载标签
-        this.$emit("tags-reordered", newOrder);
       }
     },
+    isTagStared(tag) {
+      return this.commandManager.state.activatedQuickPanels.includes(tag);
+    },
   },
 };
 </script>
diff --git a/src/components/editor/CommandConfig.vue b/src/components/editor/CommandConfig.vue
index 463ff76..a4c37b7 100644
--- a/src/components/editor/CommandConfig.vue
+++ b/src/components/editor/CommandConfig.vue
@@ -10,9 +10,7 @@
           <q-avatar size="36px" square class="featureIco">
             <q-img
               @click.stop="showIconPicker = true"
-              :src="
-                currentCommand.features.icon
-              "
+              :src="currentCommand.features.icon"
             />
           </q-avatar>
         </div>
@@ -157,7 +155,7 @@
 </template>
 
 <script>
-import { defineComponent, inject, computed } from "vue";
+import { defineComponent, computed } from "vue";
 import iconPicker from "components/popup/IconPicker.vue";
 import outputTypes from "js/options/outputTypes.js";
 import platformTypes from "js/options/platformTypes.js";
@@ -165,6 +163,7 @@ import CheckGroup from "components/composer/common/CheckGroup.vue";
 import ButtonGroup from "components/composer/common/ButtonGroup.vue";
 import commandTypes from "js/options/commandTypes.js";
 import MatchRuleEditor from "components/editor/MatchRuleEditor.vue";
+import { useCommandManager } from "js/commandManager.js";
 
 export default defineComponent({
   name: "CommandConfig",
@@ -181,20 +180,9 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue"],
-  setup(props) {
-    const allQuickCommandTags = inject("allQuickCommandTags").filter(
-      (tag) => !["默认", "未分类", "搜索结果"].includes(tag)
-    );
-
-    const currentCommand = computed(() => props.modelValue);
-
-    return {
-      allQuickCommandTags,
-      currentCommand,
-    };
-  },
   data() {
     return {
+      commandManager: useCommandManager(),
       isExpanded: false,
       showIconPicker: false,
       showMatchRuleJson: false,
@@ -209,6 +197,14 @@ export default defineComponent({
     };
   },
   computed: {
+    allQuickCommandTags() {
+      return this.commandManager.state.allQuickCommandTags.filter(
+        (tag) => !["默认", "未分类", "搜索结果"].includes(tag)
+      );
+    },
+    currentCommand() {
+      return this.modelValue;
+    },
     commandTypesOptions() {
       const options = Object.values(this.commandTypes);
       return this.currentCommand.features.mainPush
diff --git a/src/components/menu/CommandManageMenu.vue b/src/components/menu/CommandManageMenu.vue
index b1f0b37..dd4663f 100644
--- a/src/components/menu/CommandManageMenu.vue
+++ b/src/components/menu/CommandManageMenu.vue
@@ -2,13 +2,21 @@
   <q-menu anchor="top end" self="top start">
     <q-list>
       <!-- 导入 -->
-      <q-item clickable v-close-popup @click="importCommand(importCommandFromFile())">
+      <q-item
+        clickable
+        v-close-popup
+        @click="importCommand(importCommandFromFile())"
+      >
         <q-item-section side>
           <q-icon name="text_snippet" />
         </q-item-section>
         <q-item-section>从文件导入命令</q-item-section>
       </q-item>
-      <q-item clickable v-close-popup @click="importCommand(importCommandFromClipboard())">
+      <q-item
+        clickable
+        v-close-popup
+        @click="importCommand(importCommandFromClipboard())"
+      >
         <q-item-section side>
           <q-icon name="content_paste" />
         </q-item-section>
@@ -34,7 +42,12 @@
         <q-item-section>禁用本页所有命令</q-item-section>
       </q-item>
       <!-- 清空 -->
-      <q-item style="color: red" clickable v-close-popup @click="clearAllCommands">
+      <q-item
+        style="color: red"
+        clickable
+        v-close-popup
+        @click="clearAllCommands"
+      >
         <q-item-section side>
           <q-icon name="delete" />
         </q-item-section>
@@ -45,16 +58,18 @@
 </template>
 
 <script>
+import { useCommandManager } from "src/js/commandManager";
+
 export default {
-  name: 'CommandManageMenu',
-  computed: {
-    configurationPage() {
-      return this.$root.$refs.view;
-    }
+  name: "CommandManageMenu",
+  data() {
+    return {
+      commandManager: useCommandManager(),
+    };
   },
   methods: {
     importCommand(command) {
-      this.configurationPage.importCommand(command);
+      this.commandManager.importCommand(command);
     },
     importCommandFromFile() {
       let options = {
@@ -68,20 +83,39 @@ export default {
     importCommandFromClipboard() {
       return window.clipboardReadText();
     },
-    exportAllCommands() {
-      this.configurationPage.exportAllCommands();
+    // 全部导出
+    exportAllCommands(saveAsFile = true) {
+      if (this.commandManager.exportAllCommands(saveAsFile)) {
+        quickcommand.showMessageBox("导出成功！");
+      }
     },
+    // 清空
     clearAllCommands() {
-      this.configurationPage.clearAllCommands();
+      quickcommand
+        .showConfirmBox("将会清空所有自定义命令，停用所有实用功能，请确认！")
+        .then((isConfirmed) => {
+          if (!isConfirmed) {
+            return quickcommand.showMessageBox("取消操作", "info");
+          }
+          this.commandManager.clearAllCommands();
+          quickcommand.showMessageBox(
+            "清空完毕，为防止误操作，已将所有命令复制到剪贴板，可通过导入命令恢复",
+            "success",
+            2000,
+            "bottom-right"
+          );
+        });
     },
     enableAllCommands() {
-      document.querySelectorAll('.q-toggle[aria-checked="false"]')
-        .forEach(x => x.click());
+      document
+        .querySelectorAll('.q-toggle[aria-checked="false"]')
+        .forEach((x) => x.click());
     },
     disableAllCommands() {
-      document.querySelectorAll('.q-toggle[aria-checked="true"]')
-        .forEach(x => x.click());
-    }
-  }
+      document
+        .querySelectorAll('.q-toggle[aria-checked="true"]')
+        .forEach((x) => x.click());
+    },
+  },
 };
 </script>
diff --git a/src/components/menu/index.vue b/src/components/menu/index.vue
index 1e6247a..6c05c2a 100644
--- a/src/components/menu/index.vue
+++ b/src/components/menu/index.vue
@@ -52,7 +52,12 @@
         </q-item>
 
         <!-- 收藏 -->
-        <q-item v-if="isTagStared" clickable v-close-popup @click="unMarkTag">
+        <q-item
+          v-if="activatedQuickPanels.includes(currentTag)"
+          clickable
+          v-close-popup
+          @click="unMarkTag"
+        >
           <q-item-section side>
             <q-icon name="star_border" />
           </q-item-section>
@@ -86,7 +91,10 @@
       <AboutThis />
     </q-dialog>
     <q-dialog v-model="showPanelConf">
-      <PanelSetting :isTagStared="isTagStared" :currentTag="currentTag" />
+      <PanelSetting
+        :currentTag="currentTag"
+        @update-activated-quick-panels="activatedQuickPanels = $event"
+      />
     </q-dialog>
     <q-dialog v-model="showUserData">
       <UserData :showInsertBtn="false" />
@@ -104,6 +112,7 @@ import EnvConfigMenu from "./EnvConfigMenu.vue";
 import PersonalizeMenu from "./PersonalizeMenu.vue";
 import UserData from "../popup/UserData.vue";
 import { utoolsFull } from "js/utools.js";
+import { useCommandManager } from "src/js/commandManager";
 
 export default {
   name: "ConfigurationMenu",
@@ -119,35 +128,38 @@ export default {
   },
   data() {
     return {
+      commandManager: useCommandManager(),
       showAbout: false,
       showPanelConf: false,
       showUserData: false,
       utools: utoolsFull,
     };
   },
-  props: {
-    isTagStared: Boolean,
-    currentTag: String,
-  },
   computed: {
-    configurationPage() {
-      return this.$root.$refs.view;
+    activatedQuickPanels: {
+      get() {
+        return this.commandManager.state.activatedQuickPanels;
+      },
+      set(value) {
+        this.commandManager.state.activatedQuickPanels = value;
+      },
+    },
+    currentTag() {
+      return this.commandManager.state.currentTag;
     },
     allQuickCommandsLength() {
-      return Object.keys(this.configurationPage.allQuickCommands).length;
+      return Object.keys(this.commandManager.state.allQuickCommands).length;
     },
     allFeaturesLength() {
-      return this.configurationPage.activatedQuickCommandFeatureCodes.length;
+      return this.commandManager.state.activatedQuickCommandFeatureCodes.length;
     },
   },
   methods: {
     unMarkTag() {
-      this.utools.removeFeature(
-        `panel_${window.hexEncode(this.currentTag)}`
-      );
-      window.lodashM.pull(
-        this.$root.$refs.view.activatedQuickPanels,
-        this.currentTag
+      this.utools.removeFeature(`panel_${window.hexEncode(this.currentTag)}`);
+      const newPanels = [...this.activatedQuickPanels];
+      this.activatedQuickPanels = newPanels.filter(
+        (panel) => panel !== this.currentTag
       );
       quickcommand.showMessageBox("取消收藏成功");
     },
diff --git a/src/components/popup/PanelSetting.vue b/src/components/popup/PanelSetting.vue
index 6d06b15..0827402 100644
--- a/src/components/popup/PanelSetting.vue
+++ b/src/components/popup/PanelSetting.vue
@@ -55,6 +55,7 @@ import { utoolsFull } from "js/utools.js";
 
 export default {
   components: { IconPicker },
+  emits: ["update-activated-quick-panels"],
   data() {
     return {
       utools: utoolsFull,
@@ -74,7 +75,7 @@ export default {
   methods: {
     markTag() {
       this.utools.setFeature(window.lodashM.cloneDeep(this.features));
-      this.$root.$refs.view.activatedQuickPanels.push(this.currentTag);
+      this.$emit("update-activated-quick-panels", this.currentTag);
       quickcommand.showMessageBox(
         `主输入框输入『${this.features.cmds.join("、")}』即可直接进入『${
           this.currentTag
diff --git a/src/js/commandManager.js b/src/js/commandManager.js
index 6e1504d..2689ba6 100644
--- a/src/js/commandManager.js
+++ b/src/js/commandManager.js
@@ -1,4 +1,4 @@
-import { reactive } from "vue";
+import { reactive, nextTick } from "vue";
 import quickcommandParser from "js/common/quickcommandParser.js";
 import importAll from "js/common/importAll.js";
 import { utoolsFull, dbManager } from "js/utools.js";
@@ -16,6 +16,8 @@ const state = reactive({
   allQuickCommandTags: [],
   activatedQuickCommandFeatureCodes: [],
   activatedQuickPanels: [],
+  currentTag: "",
+  commandSearchKeyword: "",
 });
 
 const getCmdType = (cmds) => {
@@ -238,6 +240,17 @@ export function useCommandManager() {
     dbManager.delAll("qc_");
     clearAllFeatures();
     getAllQuickCommands();
+    state.currentTag = "默认";
+  };
+
+  // 修改并定位当前标签事件
+  const changeCurrentTag = (tagName) => {
+    state.currentTag = tagName;
+    nextTick(() => {
+      document.querySelector(".q-tab--active").scrollIntoView({
+        behavior: "smooth",
+      });
+    });
   };
 
   return {
@@ -254,5 +267,6 @@ export function useCommandManager() {
     getActivatedFeatures,
     clearAllFeatures,
     clearAllCommands,
+    changeCurrentTag,
   };
 }
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index fef8830..7e21f56 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -4,33 +4,16 @@
     <div class="main-content">
       <BackgroundLayer />
       <!-- 标签栏 -->
-      <TagBar
-        v-model="currentTag"
-        :tab-bar-width="tabBarWidth"
-        :all-quick-command-tags="allQuickCommandTags"
-        :activated-quick-panels="activatedQuickPanels"
-        :dense-tag-bar="$root.profile.denseTagBar"
-      />
+      <TagBar :tab-bar-width="tabBarWidth" />
       <CommandPanels
-        v-model="currentTag"
         :footer-bar-height="footerBarHeight"
         :tab-bar-width="tabBarWidth"
-        :all-quick-command-tags="allQuickCommandTags"
-        :current-tag-quick-commands="currentTagQuickCommands"
-        :activated-quick-command-feature-codes="
-          activatedQuickCommandFeatureCodes
-        "
         @command-changed="commandChanged"
-        @commands-reordered="handleCommandsReorder"
       />
       <!-- 底栏 -->
       <FooterBar
         :height="footerBarHeight"
         :left="tabBarWidth"
-        :is-tag-stared="activatedQuickPanels.includes(currentTag)"
-        :current-tag="currentTag"
-        :search-keyword="commandSearchKeyword"
-        @update:search="updateSearch"
         @add-new="addNewCommand"
       />
     </div>
@@ -42,7 +25,6 @@
           :is="commandEditorAction.component"
           :action="commandEditorAction"
           @editorEvent="editorEvent"
-          :allQuickCommandTags="allQuickCommandTags"
         />
       </div>
     </transition>
@@ -59,7 +41,6 @@ import { defineAsyncComponent } from "vue";
 import { useCommandManager } from "js/commandManager.js";
 import changeLog from "js/options/changeLog.js";
 import { utoolsFull, dbManager } from "js/utools.js";
-import pinyinMatch from "pinyin-match";
 import CommandEditor from "components/CommandEditor";
 import ComposerEditor from "components/ComposerEditor";
 import FooterBar from "src/components/config/FooterBar.vue";
@@ -81,16 +62,10 @@ export default {
     BackgroundLayer,
     CommandPanels,
   },
-  setup() {
-    const commandManager = useCommandManager();
-    return { commandManager };
-  },
   data() {
     return {
+      commandManager: useCommandManager(),
       utools: utoolsFull,
-      currentTag: "",
-      lastTag: "",
-      commandSearchKeyword: "",
       isEditorShow: false,
       commandEditorAction: {},
       footerBarHeight: "40px",
@@ -103,62 +78,13 @@ export default {
     allQuickCommandTags() {
       return this.commandManager.state.allQuickCommandTags;
     },
-    activatedQuickCommandFeatureCodes() {
-      return this.commandManager.state.activatedQuickCommandFeatureCodes;
-    },
-    activatedQuickPanels() {
-      return this.commandManager.state.activatedQuickPanels;
-    },
-    // 当前标签下的所有快捷命令
-    currentTagQuickCommands() {
-      let commands = Object.values(
-        window.lodashM.cloneDeep(this.allQuickCommands)
-      );
-
-      // 根据 order 排序
-      const sortByOrder = (cmds) => {
-        return cmds.sort((a, b) => {
-          const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
-          const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
-          return orderA - orderB;
-        });
-      };
-
-      switch (this.currentTag) {
-        case "未分类":
-          return sortByOrder(
-            commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0)
-          );
-        case "搜索结果":
-          if (this.commandSearchKeyword?.length < 2) return;
-          let searchResult = [];
-          commands.forEach((cmd) => {
-            // 拼音搜索
-            let explain = cmd.features.explain;
-            let matchedWordPositions = pinyinMatch.match(
-              explain,
-              this.commandSearchKeyword
-            );
-            if (!matchedWordPositions) return;
-            let matchedWords = explain.slice(
-              matchedWordPositions[0],
-              matchedWordPositions[1] + 1
-            );
-            // 高亮
-            cmd.features.explain = explain.replace(
-              matchedWords,
-              `<strong style="color:#ed6237">${matchedWords}</strong>`
-            );
-            searchResult.push(cmd);
-          });
-          return searchResult;
-        case "默认":
-          return commands.filter((cmd) => cmd.tags?.includes(this.currentTag));
-        default:
-          return sortByOrder(
-            commands.filter((cmd) => cmd.tags?.includes(this.currentTag))
-          );
-      }
+    currentTag: {
+      get() {
+        return this.commandManager.state.currentTag;
+      },
+      set(value) {
+        this.commandManager.state.currentTag = value;
+      },
     },
     // 标签栏宽度
     tabBarWidth() {
@@ -189,16 +115,10 @@ export default {
       }
       this.showChangeLog();
       // 异步读取
-      setTimeout(this.getActivatedFeatures, 0);
-      setTimeout(this.getAllQuickCommands, 0);
-    },
-    // 获取所有已启用的命令的 features 以及面板名称
-    getActivatedFeatures() {
-      this.commandManager.getActivatedFeatures();
-    },
-    // 获取所有的命令（导出的格式）
-    getAllQuickCommands() {
-      this.commandManager.getAllQuickCommands();
+      // 获取所有已启用的命令的 features 以及面板名称
+      setTimeout(this.commandManager.getActivatedFeatures(), 0);
+      // 获取所有的命令（导出的格式）
+      setTimeout(this.commandManager.getAllQuickCommands(), 0);
     },
     // 监听命令变更事件
     commandChanged(event) {
@@ -222,6 +142,9 @@ export default {
           return;
       }
     },
+    changeCurrentTag(tagName) {
+      this.commandManager.changeCurrentTag(tagName);
+    },
     runCommand(code) {
       this.$refs.result.runCurrentCommand(this.allQuickCommands[code]);
     },
@@ -254,10 +177,6 @@ export default {
       };
       this.isEditorShow = true;
     },
-    // 是否为默认命令
-    isDefaultCommand(code) {
-      return this.commandManager.isDefaultCommand(code);
-    },
     // 导入命令
     async importCommand(quickCommandInfo) {
       const command = await this.commandManager.importCommand(quickCommandInfo);
@@ -284,62 +203,6 @@ export default {
           .scrollIntoView({ behavior: "smooth" });
       });
     },
-    // 修改并定位当前标签事件
-    changeCurrentTag(tagName) {
-      this.currentTag = tagName;
-      this.$nextTick(() => {
-        document
-          .querySelector(".q-tab--active")
-          .scrollIntoView({ behavior: "smooth" });
-      });
-    },
-    // 全部导出
-    exportAllCommands(saveAsFile = true) {
-      if (this.commandManager.exportAllCommands(saveAsFile)) {
-        quickcommand.showMessageBox("导出成功！");
-      }
-    },
-    // 清空
-    clearAllCommands() {
-      quickcommand
-        .showConfirmBox("将会清空所有自定义命令，停用所有实用功能，请确认！")
-        .then((isConfirmed) => {
-          if (!isConfirmed) {
-            return quickcommand.showMessageBox("取消操作", "info");
-          }
-          this.commandManager.clearAllCommands();
-          this.changeCurrentTag("默认");
-          quickcommand.showMessageBox(
-            "清空完毕，为防止误操作，已将所有命令复制到剪贴板，可通过导入命令恢复",
-            "success",
-            2000,
-            "bottom-right"
-          );
-        });
-    },
-    // 删除所有 features
-    clearAllFeatures() {
-      this.commandManager.clearAllFeatures();
-    },
-    // 搜索方法
-    updateSearch(value) {
-      this.commandSearchKeyword = value;
-      // 记录当前标签页
-      let searchTagName = "搜索结果";
-      if (this.currentTag !== searchTagName) this.lastTag = this.currentTag;
-      if (this.commandSearchKeyword?.length > 1) {
-        if (!this.allQuickCommandTags.includes(searchTagName))
-          this.allQuickCommandTags.push(searchTagName);
-        // 搜索时跳转到搜索结果标签
-        this.changeCurrentTag(searchTagName);
-      } else {
-        // 清空搜索回跳到之前标签
-        if (this.allQuickCommandTags.slice(-1)[0] === searchTagName)
-          this.allQuickCommandTags.pop();
-        if (this.currentTag !== this.lastTag)
-          this.changeCurrentTag(this.lastTag);
-      }
-    },
     // 新建命令
     addNewCommand(component = "CommandEditor") {
       this.commandEditorAction = {
@@ -369,8 +232,7 @@ export default {
     showChangeLog() {
       let lastNeedLogEvent = changeLog[changeLog.length - 1];
       let loggedVersion =
-        this.utools.dbStorage.getItem("cfg_loggedVersion") ||
-        "0.0.0";
+        this.utools.dbStorage.getItem("cfg_loggedVersion") || "0.0.0";
       if (loggedVersion < lastNeedLogEvent.version) {
         quickcommand.showConfirmBox(
           '<pre style="white-space: pre-wrap;word-wrap: break-word;">' +
@@ -386,36 +248,6 @@ export default {
         );
       }
     },
-    handleCommandsReorder({ tag, commands }) {
-      // 更新当前tag下的命令顺序
-      const tagCommands = {};
-      commands.forEach((command, index) => {
-        tagCommands[command.features.code] = {
-          ...command,
-          order: index, // 添加排序信息
-        };
-      });
-
-      // 更新存储
-      this.commandManager.state.allQuickCommands = {
-        ...this.allQuickCommands,
-        ...tagCommands,
-      };
-
-      // 只保存被修改的命令
-      this.saveCurrentTagOrderedCommand(tagCommands);
-    },
-    saveCurrentTagOrderedCommand(tagCommands) {
-      // 只保存被修改的命令
-      Object.entries(tagCommands).forEach(([code, command]) => {
-        if (!this.isDefaultCommand(code)) {
-          dbManager.putDB(
-            window.lodashM.cloneDeep(command),
-            "qc_" + code
-          );
-        }
-      });
-    },
   },
 };
 </script>