重构ConfigurationPage，优化数据传递

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>

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("取消收藏成功");
     },