添加快捷动作

src/components/CommandEditor.vue

@@ -83,44 +83,97 @@
         <q-separator vertical />
         <div class="col-auto justify-end flex">
           <q-btn-group unelevated>
+            <q-btn-dropdown
+              dense
+              flat
+              ref="settings"
+              color="primary"
+              :icon="
+                quickcommandInfo.program === 'quickcommand'
+                  ? 'insights'
+                  : 'settings'
+              "
+            >
+              <q-list style="min-width: 300px" class="text-primary">
+                <!-- quickcommand系列按键 -->
+                <q-item
+                  clickable
+                  v-for="(item, index) in ['keyboard', 'ads_click', 'help']"
+                  :key="index"
+                  @click="[listenKey, showActions, showHelp][index]"
+                  v-show="quickcommandInfo.program === 'quickcommand'"
+                >
+                  <q-item-section avatar>
+                    <q-icon :name="item" />
+                  </q-item-section>
+                  <q-item-section>{{
+                    ["模拟按键", "快捷动作", "查看文档"][index]
+                  }}</q-item-section>
+                </q-item>
+                <!-- 自定义解释器 -->
+                <q-item
+                  v-for="(item, index) in Object.keys(
+                    quickcommandInfo.customOptions
+                  )"
+                  :key="index"
+                  v-show="quickcommandInfo.program === 'custom'"
+                >
                   <q-input
                     dense
-              standout="bg-primary text-white"
-              square
-              stack-label
-              color="primary"
-              input-style="width: 60px;"
-              v-model="quickcommandInfo.scptarg"
-              v-show="quickcommandInfo.program !== 'quickcommand'"
+                    outlined
+                    class="full-width"
+                    @blur="matchLanguage"
+                    :label="
+                      [
+                        '解释器路径，如：/home/python',
+                        '运行参数，如：-u',
+                        '脚本的后缀，不含点，如：py',
+                      ][index]
+                    "
+                    v-model="quickcommandInfo.customOptions[item]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="code" />
+                    </template>
+                  </q-input>
+                </q-item>
+                <!-- 脚本参数 -->
+                <q-item v-show="quickcommandInfo.program !== 'quickcommand'">
+                  <q-input
+                    dense
+                    outlined
                     label="脚本参数"
-            />
-            <q-btn
-              dense
-              flat
-              color="primary"
-              icon="help"
-              @click="showHelp"
-              v-show="quickcommandInfo.program === 'quickcommand'"
-              ><q-tooltip>查看文档</q-tooltip></q-btn
+                    class="full-width"
+                    v-model="quickcommandInfo.scptarg"
                   >
-            <q-btn
-              flat
-              dense
-              color="primary"
-              icon="code"
-              @click="showCustomOptions"
+                    <template v-slot:prepend>
+                      <q-icon name="input" />
+                    </template>
+                  </q-input>
+                </q-item>
+                <!-- 编码设置 -->
+                <q-item
+                  v-for="(item, index) in Object.keys(quickcommandInfo.charset)"
+                  :key="index"
                   v-show="quickcommandInfo.program !== 'quickcommand'"
-              ><q-tooltip>自定义解释器路径</q-tooltip></q-btn
                 >
-            <q-btn
-              flat
+                  <q-select
                     dense
-              color="primary"
-              icon="format_size"
-              @click="showCodingPage()"
-              v-show="quickcommandInfo.program !== 'quickcommand'"
-              ><q-tooltip>脚本及输出编码设置</q-tooltip></q-btn
+                    outlined
+                    clearable
+                    class="full-width"
+                    :label="['脚本编码', '输出编码'][index]"
+                    v-model="quickcommandInfo.charset[item]"
+                    :options="['GBK', 'utf8', 'Big5']"
+                    type="text"
                   >
+                    <template v-slot:prepend>
+                      <q-icon :name="['format_size', 'output'][index]" />
+                    </template>
+                  </q-select>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
             <q-separator vertical inset />
             <q-btn
               dense
@@ -142,6 +195,9 @@
             ></q-btn>
           </q-btn-group>
         </div>
+        <q-dialog v-model="isActionsShow"
+          ><QuickAction @addAction="addAction" />
+        </q-dialog>
       </div>
     </div>
     <MonacoEditor
@@ -164,15 +220,17 @@
 import MonacoEditor from "components/MonacoEditor";
 import CommandSideBar from "components/CommandSideBar";
 import CommandRunResult from "components/CommandRunResult";
+import QuickAction from "components/popup/QuickAction";
 
 export default {
-  components: { MonacoEditor, CommandSideBar, CommandRunResult },
+  components: { MonacoEditor, CommandSideBar, CommandRunResult, QuickAction },
   data() {
     return {
       programLanguages: Object.keys(this.$root.programs),
       sideBarWidth: 250,
       languageBarHeight: 40,
       canCommandSave: this.action.type === "code" ? false : true,
+      isActionsShow: false,
       quickcommandInfo: {
         program: "quickcommand",
         cmd: "",
@@ -240,10 +298,12 @@ export default {
     },
     programChanged(value) {
       this.setLanguage(value);
+      if (value === "custom") this.$refs.settings.show();
       this.$refs.sidebar?.setIcon(value);
     },
     // 匹配编程语言
     matchLanguage() {
+      if (!this.quickcommandInfo.customOptions.ext) return;
       let language = Object.values(this.$root.programs).filter(
         (program) => program.ext === this.quickcommandInfo.customOptions.ext
       );
@@ -256,6 +316,13 @@ export default {
       let highlight = this.$root.programs[language].highlight;
       this.$refs.editor.setEditorLanguage(highlight ? highlight : language);
     },
+    listenKey() {},
+    showActions() {
+      this.isActionsShow = true;
+    },
+    addAction(payload) {
+      this.$refs.editor.repacleEditorSelection(payload);
+    },
     // 打开文档
     showHelp() {
       utools.createBrowserWindow("./helps/quickcommand.html", {
@@ -263,31 +330,6 @@ export default {
         height: 920,
       });
     },
-    // 编码设置页面
-    showCodingPage() {
-      quickcommand
-        .showInputBox(
-          {
-            labels: ["文件编码", "输出编码"],
-            hints: [
-              "GBK/Big5/utf8，无乱码请留空",
-              "GBK/Big5/utf8,无乱码请留空",
-            ],
-            values: [
-              this.quickcommandInfo.charset?.scriptCode,
-              this.quickcommandInfo.charset?.outputCode,
-            ],
-          },
-          "编码设置"
-        )
-        .then((res) => {
-          if (res)
-            [
-              this.quickcommandInfo.charset.scriptCode,
-              this.quickcommandInfo.charset.outputCode,
-            ] = res;
-        });
-    },
     // 展开收起侧栏
     toggleSideBarWidth() {
       if (this.sideBarWidth) {
@@ -298,35 +340,6 @@ export default {
         this.lastSideBarWidth = 0;
       }
     },
-    // 自定义解释器路径界面
-    showCustomOptions() {
-      quickcommand
-        .showInputBox(
-          {
-            labels: ["解释器路径", "解释器参数", "脚本后缀"],
-            hints: [
-              "绝对路径，如：/home/.bin/python",
-              "运行参数，如：-u",
-              "脚本的后缀，不含点，如：py",
-            ],
-            values: [
-              this.quickcommandInfo.customOptions?.bin,
-              this.quickcommandInfo.customOptions?.argv,
-              this.quickcommandInfo.customOptions?.ext,
-            ],
-          },
-          "自定义解释器路径"
-        )
-        .then((res) => {
-          if (res)
-            [
-              this.quickcommandInfo.customOptions.bin,
-              this.quickcommandInfo.customOptions.argv,
-              this.quickcommandInfo.customOptions.ext,
-            ] = res;
-          this.matchLanguage(this.quickcommandInfo.customOptions.ext);
-        });
-    },
     // 保存
     saveCurrentCommand() {
       let updatedData = this.$refs.sidebar?.SaveMenuData();

src/components/popup/QuickAction.vue

@@ -0,0 +1,107 @@
+<template>
+  <q-card style="width: 400px">
+    <q-card-section class="text-h5"> 快捷动作 </q-card-section>
+    <q-card-section class="q-gutter-md">
+      <q-select
+        outlined
+        v-model="action"
+        :options="actions"
+        label="需要添加的动作"
+        :display-value="action.label"
+      >
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section>
+              <q-item-label v-html="scope.opt.label" />
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <q-input outlined v-model="argv" type="text" :label="action.desc" />
+    </q-card-section>
+    <q-card-actions align="right">
+      <q-btn flat color="gray" v-close-popup>退出</q-btn>
+      <q-btn flat color="primary" @click="addAction">添加</q-btn>
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script>
+const quickActions = [
+  {
+    value: "open",
+    label: "打开文件/文件夹/软件",
+    desc: "文件、文件夹或软件的绝对路径",
+  },
+  {
+    value: "locate",
+    label: "在文件管理器中定位文件",
+    desc: "要在文件管理器里显示的文件路径",
+  },
+  {
+    value: "visit",
+    label: "用默认浏览器打开网址",
+    desc: "要访问的网址链接",
+  },
+  {
+    value: "utools.ubrowser.goto",
+    label: "用ubrowser打开网址",
+    desc: "要访问的网址链接",
+  },
+  {
+    value: "system",
+    label: "执行系统命令",
+    desc: "要执行的命令行",
+  },
+  {
+    value: "copyTo",
+    label: "将内容写入剪贴板",
+    desc: "要写入剪切板的内容",
+  },
+  {
+    value: "message",
+    label: "发送系统消息",
+    desc: "要发送的系统消息文本",
+  },
+  {
+    value: "alert",
+    label: "弹窗显示消息",
+    desc: "要弹窗显示的消息文本",
+  },
+  {
+    value: "send",
+    label: "发送文本到活动窗口",
+    desc: "要发送到窗口的文本内容",
+  },
+  {
+    value: "utools.redirect",
+    label: "转至指定插件(自定义关键字)",
+    desc: "要跳转至的插件名称",
+  },
+  {
+    value: "quickcommand.sleep",
+    label: "添加延时",
+    desc: "延迟的毫秒数，不要勾选“加引号”",
+  },
+];
+
+export default {
+  data() {
+    return {
+      action: quickActions[0],
+      actions: quickActions,
+      argv: "",
+    };
+  },
+  methods: {
+    addAction() {
+      let argv =
+        this.action.value !== "quickcommand.sleep"
+          ? `"${this.argv}"`
+          : this.argv;
+      let payload = `${this.action.value}(${argv})\n`;
+      this.$emit("addAction", payload);
+    },
+  },
+};
+</script>