完善配置界面

src/components/CommandCard.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="wrapper" :style="isCommandActivated ? '' : 'color:#9e9e9ea6'">
+    <div>
+      <!-- 开关 -->
+      <div class="absolute" style="z-index: 1; left: 20px; bottom: 16px">
+        <q-toggle
+          v-model="isCommandActivated"
+          checked-icon="flash_on"
+          color="orange-6"
+          @click="toggleCommandActivated"
+        />
+      </div>
+      <!-- 选项按钮 -->
+      <div class="absolute" style="z-index: 1; right: 16px; top: 16px">
+        <q-btn
+          flat
+          round
+          color="green"
+          icon="play_arrow"
+          v-show="canCommandRun"
+          @click="runCommand"
+          ><q-tooltip anchor="top middle" self="center middle">
+            运行
+          </q-tooltip></q-btn
+        >
+        <q-btn flat round color="primary" icon="share">
+          <q-tooltip anchor="top middle" self="center middle"> 导出 </q-tooltip>
+          <q-menu>
+            <q-list style="min-width: 100px">
+              <q-item clickable v-close-popup @click="exportCommandFile">
+                <q-item-section>导出</q-item-section>
+              </q-item>
+              <q-item clickable v-close-popup @click="exportCommandRaw">
+                <q-item-section>复制到剪贴板</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+        <q-btn flat round color="red" icon="close" @click="removeCommand"
+          ><q-tooltip anchor="top middle" self="center middle">
+            删除
+          </q-tooltip></q-btn
+        >
+      </div>
+      <q-card v-ripple>
+        <q-card-section>
+          <!-- logo -->
+          <div class="row">
+            <q-img width="48px" :src="quickcommand.features.icon" />
+          </div>
+          <!-- 名称 -->
+          <div class="row justify-end">
+            <div class="text-h6 ellipsis">
+              {{ quickcommand.features.explain }}
+            </div>
+          </div>
+          <!-- 匹配模式 -->
+          <div class="row justify-end q-gutter-xs">
+            <div class="scrollArea">
+              <span v-for="cmd in quickcommand.features.cmds" :key="cmd">
+                <span v-if="typeof cmd === 'string'">
+                  <q-badge rounded color="teal"
+                    ><q-icon class="q-mr-xs" name="font_download" />{{
+                      cmd.length > 10 ? cmd.slice(0, 10) + "..." : cmd
+                    }}</q-badge
+                  >
+                  <q-tooltip>
+                    <div class="text-subtitle2">
+                      {{ cmd }}
+                    </div>
+                  </q-tooltip>
+                </span>
+                <span v-else-if="cmd.type === 'window' && cmd.match">
+                  <q-badge rounded color="indigo"
+                    ><q-icon class="q-mr-xs" name="widgets" />{{
+                      cmd.match.app[0].length > 10
+                        ? cmd.match.app[0].slice(0, 10) + "..."
+                        : cmd.match.app[0]
+                    }}
+                  </q-badge>
+                  <q-tooltip>
+                    <div
+                      class="text-subtitle2"
+                      v-for="app in cmd.match.app"
+                      :key="app"
+                    >
+                      {{ app }}
+                    </div>
+                  </q-tooltip>
+                </span>
+                <span v-else-if="cmd.type === 'files'">
+                  <q-badge rounded color="light-blue"
+                    ><q-icon class="q-mr-xs" name="description" />
+                    {{
+                      (cmd.match &&
+                        (cmd.match.length > 10
+                          ? cmd.match.slice(0, 10) + "..."
+                          : cmd.match)) ||
+                      "所有文件"
+                    }}</q-badge
+                  >
+                  <q-tooltip>
+                    <div class="text-subtitle2">
+                      {{ cmd.match || "所有文件" }}
+                    </div>
+                  </q-tooltip>
+                </span>
+                <span v-else-if="cmd.type === 'regex'">
+                  <q-badge rounded color="cyan"
+                    ><q-icon class="q-mr-xs" name="playlist_add_check" />{{
+                      cmd.match.length > 10
+                        ? cmd.match.slice(0, 10) + "..."
+                        : cmd.match
+                    }}
+                  </q-badge>
+                  <q-tooltip>
+                    <div class="text-subtitle2">
+                      {{ cmd.match }}
+                    </div>
+                  </q-tooltip>
+                </span>
+                <span v-else-if="cmd.type === 'over'">
+                  <q-badge rounded color="light-green"
+                    ><q-icon class="q-mr-xs" name="clear_all" />所有文本
+                  </q-badge>
+                </span>
+                <span v-else-if="cmd.type === 'img'">
+                  <q-badge rounded color="deep-orange" label="">
+                    <q-icon class="q-mr-xs" name="panorama" />图片
+                  </q-badge>
+                </span>
+              </span>
+            </div>
+          </div>
+          <!-- 语言类型及适配系统 -->
+          <div class="row justify-end items-center q-gutter-xs">
+            <span
+              :style="'color:' + allProgrammings[quickcommand.program].color"
+              >●</span
+            >
+            <span class="text-subtitle2">{{ quickcommand.program }}</span
+            ><span>|</span>
+            <img
+              width="16"
+              v-for="platform in quickcommand.features.platform"
+              :key="platform"
+              :src="'/img/' + platform + '.svg'"
+            />
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import allProgrammings from "../js/programs.js";
+import UTOOLS from "../js/utools.js";
+
+export default {
+  data() {
+    return {
+      allProgrammings: allProgrammings,
+      isCommandActivated: this.activated,
+    };
+  },
+  computed: {
+    canCommandRun() {
+      return (
+        this.quickcommand.features.cmds.filter((x) => x.length).length &&
+        this.isCommandActivated
+      );
+    },
+  },
+  props: {
+    quickcommand: Object,
+    activated: Boolean,
+  },
+  methods: {
+    runCommand() {
+      utools.redirect(
+        this.quickcommand.features.cmds.filter((x) => x.length)[0]
+      );
+    },
+    toggleCommandActivated() {
+      let event = {
+        type: "disable",
+        data: this.quickcommand.features.code,
+      };
+      if (!UTOOLS.whole.removeFeature(this.quickcommand.features.code)) {
+        UTOOLS.whole.setFeature(
+          JSON.parse(JSON.stringify(this.quickcommand.features))
+        );
+        event.type = "enable";
+      }
+      this.$emit("commandChanged", event);
+    },
+    removeCommand() {
+      quickcommand.showConfirmBox("删除这个快捷命令").then((x) => {
+        if (!x) return;
+        let code = this.quickcommand.features.code;
+        utools.copyText(JSON.stringify(this.quickcommand, null, 4));
+        UTOOLS.delDB(UTOOLS.DBPRE.QC + code);
+        UTOOLS.whole.removeFeature(code);
+        this.isCommandAlive = false;
+        this.$emit("commandChanged", {
+          type: "remove",
+          data: code,
+        });
+        quickcommand.showMessageBox(
+          "删除成功，为防止误操作，已将删除的命令复制到剪贴板"
+        );
+      });
+    },
+    exportCommandRaw() {
+      utools.copyText(JSON.stringify(this.quickcommand, null, 4)) &&
+        quickcommand.showMessageBox("已复制到剪贴板");
+    },
+    exportCommandFile() {
+      window.saveFile(JSON.stringify(this.quickcommand), {
+        title: "选择保存位置",
+        defaultPath: `${this.quickcommand.features.explain}.json`,
+        filters: [{ name: "json", extensions: ["json"] }],
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.q-card {
+  cursor: pointer;
+  user-select: none;
+}
+.q-badge {
+  font-size: 15px;
+  margin: 0 1px;
+}
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.scrollArea {
+  height: 23px;
+  width: 60%;
+  overflow: hidden;
+  text-align: right;
+}
+.wrapper {
+  transition: 0.5s;
+}
+.wrapper:hover {
+  text-shadow: 1px 2px 4px #0000009e;
+  transition: 0.5s;
+  transform: translateY(-4px);
+}
+</style>

src/pages/ConfigurationPage.vue

@@ -6,6 +6,7 @@
       class="text-teal fixed-left"
       style="width: 80px; border-right: 1px solid #0000001f"
     >
+      <!-- 所有标签 -->
       <q-tab
         v-for="tag in allQuickCommandTags"
         :key="tag"
@@ -13,7 +14,7 @@
         :name="tag"
       />
     </q-tabs>
-
+    <!-- 标签对应的面板 -->
     <q-tab-panels
       animated
       class="fixed-right"
@@ -31,82 +32,19 @@
         :name="tag"
       >
         <div class="row center">
-          <div
+          <CommandCard
             v-for="quickcommand in currentTagQuickCommands"
             :key="quickcommand.features.code"
+            :quickcommand="quickcommand"
+            :activated="
+              activatedQuickCommandFeatureCodes.includes(
+                quickcommand.features.code
+              )
+            "
+            @commandChanged="commandChanged"
             style="width: 50%"
             class="relative-position q-pa-sm"
-          >
-            <!-- 选项按钮 -->
-            <div class="absolute" style="z-index: 1; right: 16px; top: 16px">
-              <q-btn
-                flat
-                round
-                :color="quickcommand.activated ? 'orange-6' : 'grey'"
-                :icon="quickcommand.activated ? 'flash_on' : 'flash_off'"
-                ><q-tooltip anchor="top middle" self="center middle">
-                  启用/停用
-                </q-tooltip></q-btn
-              >
-              <q-btn flat round color="primary" icon="menu">
-                <q-tooltip anchor="top middle" self="center middle">
-                  选项菜单
-                </q-tooltip>
-                <q-menu>
-                  <q-list style="min-width: 100px">
-                    <q-item clickable v-close-popup>
-                      <q-item-section>导出</q-item-section>
-                    </q-item>
-                    <q-item clickable v-close-popup>
-                      <q-item-section>复制到剪贴板</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-              <q-btn flat round color="red" icon="close"
-                ><q-tooltip anchor="top middle" self="center middle">
-                  删除
-                </q-tooltip></q-btn
-              >
-            </div>
-            <q-card v-ripple>
-              <q-card-section>
-                <!-- logo -->
-                <div class="row">
-                  <q-img width="48px" :src="quickcommand.features.icon" />
-                </div>
-                <!-- 名称 -->
-                <div class="row justify-end">
-                  <div class="text-h6 ellipsis">
-                    {{ quickcommand.features.explain }}
-                  </div>
-                </div>
-                <!-- 匹配模式 -->
-                <div class="row justify-end q-gutter-xs">
-                  <span v-for="cmd in quickcommand.features.cmds" :key="cmd">
-                    <q-badge rounded color="grey" :label="cmd" />
-                  </span>
-                </div>
-                <!-- 语言类型及适配系统 -->
-                <div class="row justify-end items-center q-gutter-xs">
-                  <span
-                    :style="
-                      'color:' + allProgrammings[quickcommand.program].color
-                    "
-                    >●</span
-                  >
-                  <span class="text-subtitle2">{{ quickcommand.program }}</span
-                  ><span>|</span>
-                  <img
-                    width="16"
-                    v-for="platform in quickcommand.features.platform"
-                    :key="platform"
-                    :src="'/img/' + platform + '.svg'"
-                  />
-                </div>
-              </q-card-section>
-            </q-card>
-          </div>
+          ></CommandCard>
         </div>
       </q-tab-panel>
     </q-tab-panels>
@@ -115,59 +53,31 @@
 
 <script>
 import UTOOLS from "../js/utools.js";
-import allProgrammings from "../js/programs.js";
+import CommandCard from "components/CommandCard";
 
 export default {
+  components: { CommandCard },
   data() {
     return {
       currentTag: "默认",
-      splitterModel: 10,
-      activatedQuickCommandFeatures: [],
+      activatedQuickCommandFeatureCodes: [],
       activatedQuickPanels: [],
       allQuickCommands: [],
-      allQuickCommandTags: [],
-      allProgrammings: allProgrammings,
     };
   },
   computed: {
     // 当前标签下的所有快捷命令
     currentTagQuickCommands() {
       let commands = Object.values(this.allQuickCommands);
-      if (this.currentTag === "未分类")
-        commands = commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0);
-      else
-        commands = commands.filter(
+      return this.currentTag === "未分类"
+        ? commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0)
+        : commands.filter(
             (cmd) => cmd.tags && cmd.tags.includes(this.currentTag)
           );
-      return commands.map((item) => {
-        item.activated = this.activatedQuickCommandFeatureCodes.includes(
-          item.features.code
-        )
-          ? true
-          : false;
-        return item;
-      });
     },
-    activatedQuickCommandFeatureCodes() {
-      return this.activatedQuickCommandFeatures.map((f) => f.code);
-    },
-  },
-  mounted() {
-    this.initPage();
-  },
-  methods: {
-    // 初始化
-    initPage() {
-      // 已启用的 features
-      let activatedFeatures = this.getActivatedFeatures();
-      // 已启用的命令的 features
-      this.activatedQuickCommandFeatures = activatedFeatures.quickcommand;
-      // 已启用的面板
-      this.activatedQuickPanels = activatedFeatures.quickpanels;
-      // 所有的快捷命令
-      this.allQuickCommands = this.getAllQuickCommands();
-      // 所有的 tags
-      this.allQuickCommandTags = [
+    // 所有命令对应的标签
+    allQuickCommandTags() {
+      return [
         ...new Set(
           // 去重并确保默认在第一位
           Array.prototype.concat
@@ -178,6 +88,24 @@ export default {
             .concat(["未分类"])
         ),
       ].filter((x) => x);
+    },
+  },
+  mounted() {
+    this.initPage();
+  },
+  methods: {
+    // 初始化
+    initPage() {
+      // 已启用的 features
+      let activatedFeatures = this.getActivatedFeatures();
+      // 已启用的命令的 featureCode
+      this.activatedQuickCommandFeatureCodes =
+        activatedFeatures.quickcommand.map((f) => f.code);
+      // 已启用的面板
+      this.activatedQuickPanels = activatedFeatures.quickpanels;
+      // 所有的快捷命令
+      this.allQuickCommands = this.getAllQuickCommands();
+      // 所有的 tags
       console.log(this);
     },
     // 获取所有已启用的命令的 features 以及面板名称
@@ -203,23 +131,26 @@ export default {
       );
       return allQcs;
     },
+    commandChanged(event) {
+      switch (event.type) {
+        case "remove":
+          delete this.allQuickCommands[event.data];
+          if (!this.allQuickCommandTags.includes(this.currentTag))
+            this.currentTag = "默认";
+          return;
+        case "enable":
+          this.activatedQuickCommandFeatureCodes.push(event.data);
+          return;
+        case "disable":
+          this.activatedQuickCommandFeatureCodes =
+            this.activatedQuickCommandFeatureCodes.filter(
+              (x) => x !== event.data
+            );
+          return;
+        default:
+          return;
+      }
+    },
   },
 };
 </script>
-
-<style scoped>
-.q-card {
-  cursor: pointer;
-  user-select: none;
-}
-.q-card:hover {
-  box-shadow: 0 1px 5px 5px rgb(0 0 0 / 20%);
-  transition: 0.5s;
-  transform: translateY(-2px);
-}
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>