添加CommandManager统一进行命令管理

src/js/commandManager.js

@@ -0,0 +1,208 @@
+import { reactive } from "vue";
+import quickcommandParser from "js/common/quickcommandParser.js";
+import importAll from "js/common/importAll.js";
+import utoolsFull from "js/utools.js";
+
+// 默认命令
+const defaultCommands = importAll(
+  require.context("../json/", false, /\.json$/)
+);
+
+// 响应式状态
+const state = reactive({
+  allQuickCommands: {},
+  allQuickCommandTags: [],
+  activatedQuickCommandFeatureCodes: [],
+  activatedQuickPanels: [],
+});
+
+// 使用函数工厂模式，确保每个组件获取自己的状态副本
+export function useCommandManager() {
+  // 获取已启用的命令
+  const getActivatedFeatures = () => {
+    let features = utoolsFull.whole.getFeatures();
+    let currentFts = [];
+    let quickpanels = [];
+    features.forEach((x) =>
+      x.code.slice(0, 6) == "panel_"
+        ? quickpanels.push(window.hexDecode(x.code.slice(6)))
+        : currentFts.push(x)
+    );
+    state.activatedQuickCommandFeatureCodes = currentFts.map((f) => f.code);
+    state.activatedQuickPanels = quickpanels;
+  };
+  // 清除所有命令
+  const clearAllFeatures = () => {
+    for (var feature of utoolsFull.whole.getFeatures()) {
+      if (feature.code.slice(0, 8) === "feature_") continue;
+      utoolsFull.whole.removeFeature(feature.code);
+    }
+    state.activatedQuickCommandFeatureCodes = [];
+  };
+  // 获取所有的命令
+  const getAllQuickCommands = () => {
+    state.allQuickCommands = window.lodashM.cloneDeep(defaultCommands);
+    utoolsFull.getAll("qc_").forEach((x) => {
+      if (x.data.features.code.includes("default_")) return;
+      state.allQuickCommands[x.data.features.code] = x.data;
+    });
+    getAllQuickCommandTags();
+  };
+
+  // 获取所有标签
+  const getAllQuickCommandTags = () => {
+    state.allQuickCommandTags = window.lodashM
+      .union(...Object.values(state.allQuickCommands).map((x) => x.tags))
+      .concat(["未分类"])
+      .filter((x) => x);
+  };
+
+  // 保存命令
+  const saveCommand = (command) => {
+    const code = command.features.code;
+    state.allQuickCommands[code] = command;
+
+    if (!state.activatedQuickCommandFeatureCodes.includes(code)) {
+      state.activatedQuickCommandFeatureCodes.push(code);
+    }
+
+    utoolsFull.whole.removeFeature(code);
+    utoolsFull.whole.setFeature(command.features);
+
+    if (!isDefaultCommand(code)) {
+      utoolsFull.putDB(window.lodashM.cloneDeep(command), "qc_" + code);
+    }
+
+    getAllQuickCommandTags();
+    return code;
+  };
+
+  // 删除命令
+  const removeCommand = (code) => {
+    utoolsFull.whole.copyText(
+      JSON.stringify(state.allQuickCommands[code], null, 4)
+    );
+    delete state.allQuickCommands[code];
+    utoolsFull.delDB("qc_" + code);
+    removeCommandFromHistory(code);
+    disableCommand(code);
+    getAllQuickCommandTags();
+    quickcommand.showMessageBox(
+      "删除成功，为防止误操作，已将删除的命令复制到剪贴板",
+      "success",
+      1000,
+      "bottom-right"
+    );
+  };
+
+  // 从历史记录中删除命令
+  const removeCommandFromHistory = (code) => {
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key.startsWith("editor_history_" + code)) {
+        localStorage.removeItem(key);
+      }
+    }
+  };
+
+  // 启用命令
+  const enableCommand = (code) => {
+    utoolsFull.whole.setFeature(
+      window.lodashM.cloneDeep(state.allQuickCommands[code].features)
+    );
+    state.activatedQuickCommandFeatureCodes.push(code);
+  };
+
+  // 禁用命令
+  const disableCommand = (code) => {
+    utoolsFull.whole.removeFeature(code);
+    state.activatedQuickCommandFeatureCodes =
+      state.activatedQuickCommandFeatureCodes.filter((x) => x !== code);
+  };
+
+  // 导入命令
+  const importCommand = async (quickCommandInfo) => {
+    if (!quickCommandInfo) {
+      quickcommand.showMessageBox("导入未完成！", "warning");
+      return false;
+    }
+
+    let parsedData = await quickcommandParser(quickCommandInfo);
+    if (!parsedData) {
+      quickcommand.showMessageBox("格式错误", "error");
+      return false;
+    }
+
+    let dataToPushed = {};
+    if (parsedData.single) {
+      if (isDefaultCommand(parsedData.qc.features.code)) {
+        quickcommand.showMessageBox("默认命令不能导入！", "error");
+        return false;
+      }
+      dataToPushed[parsedData.qc.features.code] = parsedData.qc;
+    } else {
+      dataToPushed = parsedData.qc;
+    }
+
+    for (var code of Object.keys(dataToPushed)) {
+      if (isDefaultCommand(code)) continue;
+      utoolsFull.putDB(dataToPushed[code], "qc_" + code);
+    }
+
+    Object.assign(state.allQuickCommands, dataToPushed);
+    getAllQuickCommandTags();
+    quickcommand.showMessageBox("导入成功！");
+    return parsedData.qc;
+  };
+
+  // 是否为默认命令
+  const isDefaultCommand = (code) => {
+    return code.slice(0, 8) === "default_";
+  };
+
+  // 导出所有命令
+  const exportAllCommands = (saveAsFile = true) => {
+    let options = {
+      title: "选择保存位置",
+      defaultPath: "quickCommand",
+      filters: [{ name: "json", extensions: ["json"] }],
+    };
+
+    let commandsToExport = window.lodashM.cloneDeep(state.allQuickCommands);
+    Object.keys(commandsToExport).forEach((code) => {
+      if (isDefaultCommand(code)) delete commandsToExport[code];
+    });
+
+    let stringifyCommands = JSON.stringify(commandsToExport);
+    if (saveAsFile) {
+      return window.saveFile(stringifyCommands, options);
+    } else {
+      utoolsFull.whole.copyText(stringifyCommands);
+      return true;
+    }
+  };
+
+  // 清空所有命令
+  const clearAllCommands = () => {
+    exportAllCommands(false);
+    utoolsFull.delAll("qc_");
+    clearAllFeatures();
+    getAllQuickCommands();
+  };
+
+  return {
+    state,
+    getAllQuickCommands,
+    getAllQuickCommandTags,
+    saveCommand,
+    removeCommand,
+    enableCommand,
+    disableCommand,
+    importCommand,
+    isDefaultCommand,
+    exportAllCommands,
+    getActivatedFeatures,
+    clearAllFeatures,
+    clearAllCommands,
+  };
+}

src/pages/ConfigurationPage.vue

@@ -56,8 +56,7 @@
 
 <script>
 import { defineAsyncComponent } from "vue";
-import quickcommandParser from "js/common/quickcommandParser.js";
+import { useCommandManager } from "js/commandManager.js";
-import importAll from "js/common/importAll.js";
 import changeLog from "js/options/changeLog.js";
 import pinyinMatch from "pinyin-match";
 import CommandEditor from "components/CommandEditor";
@@ -71,9 +70,6 @@ const CommandRunResult = defineAsyncComponent(() =>
 );
 // Performance Rendering > 300ms
 
-// 默认命令
-let defaultCommands = importAll(require.context("../json/", false, /\.json$/));
-
 export default {
   components: {
     CommandEditor,
@@ -84,14 +80,14 @@ export default {
     BackgroundLayer,
     CommandPanels,
   },
+  setup() {
+    const commandManager = useCommandManager();
+    return { commandManager };
+  },
   data() {
     return {
       currentTag: "",
       lastTag: "",
-      activatedQuickCommandFeatureCodes: [],
-      activatedQuickPanels: [],
-      allQuickCommands: {},
-      allQuickCommandTags: [],
       commandSearchKeyword: "",
       isEditorShow: false,
       commandEditorAction: {},
@@ -99,6 +95,18 @@ export default {
     };
   },
   computed: {
+    allQuickCommands() {
+      return this.commandManager.state.allQuickCommands;
+    },
+    allQuickCommandTags() {
+      return this.commandManager.state.allQuickCommandTags;
+    },
+    activatedQuickCommandFeatureCodes() {
+      return this.commandManager.state.activatedQuickCommandFeatureCodes;
+    },
+    activatedQuickPanels() {
+      return this.commandManager.state.activatedQuickPanels;
+    },
     // 当前标签下的所有快捷命令
     currentTagQuickCommands() {
       let commands = Object.values(
@@ -184,33 +192,11 @@ export default {
     },
     // 获取所有已启用的命令的 features 以及面板名称
     getActivatedFeatures() {
-      let features = utools.getFeatures();
+      this.commandManager.getActivatedFeatures();
-      let currentFts = [];
-      let quickpanels = [];
-      features.forEach((x) =>
-        x.code.slice(0, 6) == "panel_"
-          ? quickpanels.push(window.hexDecode(x.code.slice(6)))
-          : currentFts.push(x)
-      );
-      this.activatedQuickCommandFeatureCodes = currentFts.map((f) => f.code);
-      // 已启用的面板
-      this.activatedQuickPanels = quickpanels;
     },
     // 获取所有的命令（导出的格式）
     getAllQuickCommands() {
-      this.allQuickCommands = window.lodashM.cloneDeep(defaultCommands);
+      this.commandManager.getAllQuickCommands();
-      this.$root.utools.getAll("qc_").forEach((x) => {
-        if (x.data.features.code.includes("default_")) return;
-        this.allQuickCommands[x.data.features.code] = x.data;
-      });
-      this.getAllQuickCommandTags();
-    },
-    getAllQuickCommandTags() {
-      // 获取所有标签
-      this.allQuickCommandTags = window.lodashM
-        .union(...Object.values(this.allQuickCommands).map((x) => x.tags))
-        .concat(["未分类"])
-        .filter((x) => x);
     },
     // 监听命令变更事件
     commandChanged(event) {
@@ -241,40 +227,17 @@ export default {
     },
     // 启用命令
     enableCommand(code) {
-      this.$root.utools.whole.setFeature(
+      this.commandManager.enableCommand(code);
-        window.lodashM.cloneDeep(this.allQuickCommands[code].features)
-      );
-      this.activatedQuickCommandFeatureCodes.push(code);
     },
     // 禁用命令
     disableCommand(code) {
-      this.$root.utools.whole.removeFeature(code);
+      this.commandManager.disableCommand(code);
-      this.activatedQuickCommandFeatureCodes =
-        this.activatedQuickCommandFeatureCodes.filter((x) => x !== code);
     },
     // 删除命令
     removeCommand(code) {
-      utools.copyText(JSON.stringify(this.allQuickCommands[code], null, 4));
+      this.commandManager.removeCommand(code);
-      delete this.allQuickCommands[code];
+      if (!this.allQuickCommandTags.includes(this.currentTag)) {
-      this.$root.utools.delDB("qc_" + code);
-      this.removeCommandFromHistory(code);
-      this.disableCommand(code);
-      this.getAllQuickCommandTags();
-      if (!this.allQuickCommandTags.includes(this.currentTag))
         this.changeCurrentTag("默认");
-      quickcommand.showMessageBox(
-        "删除成功，为防止误操作，已将删除的命令复制到剪贴板",
-        "success",
-        1000,
-        "bottom-right"
-      );
-    },
-    removeCommandFromHistory(code) {
-      for (let i = 0; i < localStorage.length; i++) {
-        const key = localStorage.key(i);
-        if (key.startsWith("editor_history_" + code)) {
-          localStorage.removeItem(key);
-        }
       }
     },
     // 编辑命令
@@ -290,32 +253,14 @@ export default {
     },
     // 是否为默认命令
     isDefaultCommand(code) {
-      return code.slice(0, 8) === "default_";
+      return this.commandManager.isDefaultCommand(code);
     },
     // 导入命令
     async importCommand(quickCommandInfo) {
-      if (!quickCommandInfo)
+      const command = await this.commandManager.importCommand(quickCommandInfo);
-        return quickcommand.showMessageBox("导入未完成！", "warning");
+      if (command) {
-      let parsedData = await quickcommandParser(quickCommandInfo);
+        this.locateToCommand(command.tags, command.features?.code);
-      if (!parsedData) return quickcommand.showMessageBox("格式错误", "error");
-      // 单个命令导入
-      let dataToPushed = {};
-      if (parsedData.single) {
-        if (this.isDefaultCommand(parsedData.qc.features.code))
-          return quickcommand.showMessageBox("默认命令不能导入！", "error");
-        dataToPushed[parsedData.qc.features.code] = parsedData.qc;
-        // 多个
-      } else {
-        dataToPushed = parsedData.qc;
       }
-      for (var code of Object.keys(dataToPushed)) {
-        if (this.isDefaultCommand(code)) continue;
-        this.$root.utools.putDB(dataToPushed[code], "qc_" + code);
-      }
-      Object.assign(this.allQuickCommands, dataToPushed);
-      this.getAllQuickCommandTags();
-      quickcommand.showMessageBox("导入成功！");
-      this.locateToCommand(parsedData.qc.tags, parsedData.qc.features?.code);
     },
     // 定位命令, 包含changeCurrentTag
     locateToCommand(tags = ["默认"], code) {
@@ -347,27 +292,8 @@ export default {
     },
     // 全部导出
     exportAllCommands(saveAsFile = true) {
-      let options = {
+      if (this.commandManager.exportAllCommands(saveAsFile)) {
-        title: "选择保存位置",
+        quickcommand.showMessageBox("导出成功！");
-        defaultPath: "quickCommand",
-        filters: [
-          {
-            name: "json",
-            extensions: ["json"],
-          },
-        ],
-      };
-      let commandsToExport = window.lodashM.cloneDeep(this.allQuickCommands);
-      // 不导出默认命令
-      Object.keys(commandsToExport).forEach((code) => {
-        if (this.isDefaultCommand(code)) delete commandsToExport[code];
-      });
-      let stringifyCommands = JSON.stringify(commandsToExport);
-      if (saveAsFile) {
-        window.saveFile(stringifyCommands, options) &&
-          quickcommand.showMessageBox("导出成功！");
-      } else {
-        utools.copyText(stringifyCommands);
       }
     },
     // 清空
@@ -375,13 +301,10 @@ export default {
       quickcommand
         .showConfirmBox("将会清空所有自定义命令，停用所有实用功能，请确认！")
         .then((isConfirmed) => {
-          if (!isConfirmed)
+          if (!isConfirmed) {
             return quickcommand.showMessageBox("取消操作", "info");
-          this.exportAllCommands(false);
+          }
-          this.$root.utools.delAll("qc_");
+          this.commandManager.clearAllCommands();
-          this.clearAllFeatures();
-          this.allQuickCommands = window.lodashM.cloneDeep(defaultCommands);
-          this.getAllQuickCommandTags();
           this.changeCurrentTag("默认");
           quickcommand.showMessageBox(
             "清空完毕，为防止误操作，已将所有命令复制到剪贴板，可通过导入命令恢复",
@@ -393,11 +316,7 @@ export default {
     },
     // 删除所有 features
     clearAllFeatures() {
-      for (var feature of utools.getFeatures()) {
+      this.commandManager.clearAllFeatures();
-        if (feature.code.slice(0, 8) === "feature_") continue;
-        this.$root.utools.whole.removeFeature(feature.code);
-      }
-      this.activatedQuickCommandFeatureCodes = [];
     },
     // 搜索方法
     updateSearch(value) {
@@ -428,15 +347,7 @@ export default {
       this.isEditorShow = true;
     },
     saveCommand(command) {
-      let code = command.features.code;
+      const code = this.commandManager.saveCommand(command);
-      this.allQuickCommands[code] = command;
-      //无论禁用还是启用都启用
-      if (!this.activatedQuickCommandFeatureCodes.includes(code))
-        this.activatedQuickCommandFeatureCodes.push(code);
-      // 先删除再添加，强制刷新
-      this.$root.utools.whole.removeFeature(code);
-      this.$root.utools.whole.setFeature(command.features);
-      this.getAllQuickCommandTags();
       this.locateToCommand(command.tags, code);
     },
     editorEvent(event) {
@@ -482,8 +393,8 @@ export default {
       });
 
       // 更新存储
-      this.allQuickCommands = {
+      this.commandManager.state.allQuickCommands = {
-        ...this.allQuickCommands,
+        ...this.commandManager.state.allQuickCommands,
         ...tagCommands,
       };