编辑、新建命令功能

src/components/CommandCard.vue

@@ -276,17 +276,11 @@ export default {
     },
     // 编辑命令
     editCommand() {
-      let routeData = {
-        from: "configuration",
-        action: "edit",
-        data: this.commandInfo,
+      let event = {
+        type: "edit",
+        data: this.commandInfo.features.code,
       };
-      this.$router.push({
-        name: "code",
-        params: {
-          data: JSON.stringify(routeData),
-        },
-      });
+      this.$emit("commandChanged", event);
     },
     // 运行命令
     runCommand() {
@@ -297,33 +291,21 @@ export default {
     // 启用/禁用命令
     toggleCommandActivated() {
       let event = {
-        type: "disable",
         data: this.commandInfo.features.code,
       };
-      if (!this.$utools.whole.removeFeature(this.commandInfo.features.code)) {
-        this.$utools.whole.setFeature(
-          JSON.parse(JSON.stringify(this.commandInfo.features))
-        );
-        event.type = "enable";
-      }
+      event.type = this.isCommandActivated ? "enable" : "disable";
       this.$emit("commandChanged", event);
     },
     // 移除命令
     removeCommand() {
       quickcommand.showConfirmBox("删除这个快捷命令").then((x) => {
         if (!x) return;
-        let code = this.commandInfo.features.code;
-        utools.copyText(JSON.stringify(this.commandInfo, null, 4));
-        this.$utools.delDB(this.$utools.DBPRE.QC + code);
-        this.$utools.whole.removeFeature(code);
         this.isCommandAlive = false;
+        let code = this.commandInfo.features.code;
         this.$emit("commandChanged", {
           type: "remove",
           data: code,
         });
-        quickcommand.showMessageBox(
-          "删除成功，为防止误操作，已将删除的命令复制到剪贴板"
-        );
       });
     },
     // 导出到剪贴板

src/components/CommandEditor.vue

@@ -1,8 +1,195 @@
 <template>
-  <div class="q-pa-md">
-    <div class="row q-gutter-sm">
-      <div class="col-3">
-        <div style="max-width: 300px">
+  <div class="q-pa-md relative">
+    <!-- 匹配类型 -->
+    <div class="row q-gutter-sm q-py-xs" v-if="notRunCodePage">
+      <div class="col">
+        <q-select
+          dense
+          outlined
+          color="teal"
+          transition-show="jump-down"
+          transition-hide="jump-up"
+          label-color="teal"
+          v-model="currentMatchType"
+          :options="matchTypes"
+          label="匹配类型"
+        >
+          <template v-slot:append>
+            <q-avatar rounded>
+              <img :src="'/logo/' + quickcommandInfo.program + '.png'" />
+            </q-avatar>
+          </template>
+          <template v-slot:option="scope">
+            <q-item v-bind="scope.itemProps">
+              <q-item-section avatar>
+                <img width="32" :src="'/logo/' + scope.opt + '.png'" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label v-html="scope.opt" />
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+      <div class="col">
+        <q-select
+          dense
+          outlined
+          color="teal"
+          transition-show="jump-down"
+          transition-hide="jump-up"
+          label-color="teal"
+          v-model="quickcommandInfo.program"
+          :options="programLanguages"
+          label="匹配规则"
+        >
+          <template v-slot:append>
+            <q-avatar rounded>
+              <img :src="'/logo/' + quickcommandInfo.program + '.png'" />
+            </q-avatar>
+          </template>
+          <template v-slot:option="scope">
+            <q-item v-bind="scope.itemProps">
+              <q-item-section avatar>
+                <img width="32" :src="'/logo/' + scope.opt + '.png'" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label v-html="scope.opt" />
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+    </div>
+    <!-- 说明、图标及标签 -->
+    <div class="row q-gutter-sm q-py-xs" v-if="notRunCodePage">
+        <div class="col-auto">
+            <q-img width="40px" src="/logo/quickcommand.png"></q-img>
+        </div>
+      <div class="col">
+        <q-select
+          dense
+          outlined
+          color="teal"
+          transition-show="jump-down"
+          transition-hide="jump-up"
+          label-color="teal"
+          v-model="currentMatchType"
+          :options="matchTypes"
+          label="说明"
+        >
+          <template v-slot:append>
+            <q-avatar rounded>
+              <img :src="'/logo/' + quickcommandInfo.program + '.png'" />
+            </q-avatar>
+          </template>
+          <template v-slot:option="scope">
+            <q-item v-bind="scope.itemProps">
+              <q-item-section avatar>
+                <img width="32" :src="'/logo/' + scope.opt + '.png'" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label v-html="scope.opt" />
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+      <div class="col-6">
+        <q-select
+          dense
+          outlined
+          color="teal"
+          transition-show="jump-down"
+          transition-hide="jump-up"
+          label-color="teal"
+          v-model="quickcommandInfo.program"
+          :options="programLanguages"
+          label="标签"
+        >
+          <template v-slot:append>
+            <q-avatar rounded>
+              <img :src="'/logo/' + quickcommandInfo.program + '.png'" />
+            </q-avatar>
+          </template>
+          <template v-slot:option="scope">
+            <q-item v-bind="scope.itemProps">
+              <q-item-section avatar>
+                <img width="32" :src="'/logo/' + scope.opt + '.png'" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label v-html="scope.opt" />
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+    </div>
+    <!-- 特殊变量、输出 -->
+    <div class="row q-gutter-sm q-py-xs" v-if="notRunCodePage">
+      <div class="col">
+        <q-select
+          dense
+          outlined
+          color="teal"
+          transition-show="jump-down"
+          transition-hide="jump-up"
+          label-color="teal"
+          v-model="currentMatchType"
+          :options="matchTypes"
+          label="变量"
+        >
+          <template v-slot:append>
+            <q-avatar rounded>
+              <img :src="'/logo/' + quickcommandInfo.program + '.png'" />
+            </q-avatar>
+          </template>
+          <template v-slot:option="scope">
+            <q-item v-bind="scope.itemProps">
+              <q-item-section avatar>
+                <img width="32" :src="'/logo/' + scope.opt + '.png'" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label v-html="scope.opt" />
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+      <div class="col">
+        <q-select
+          dense
+          outlined
+          color="teal"
+          transition-show="jump-down"
+          transition-hide="jump-up"
+          label-color="teal"
+          v-model="quickcommandInfo.program"
+          :options="programLanguages"
+          label="输出"
+        >
+          <template v-slot:append>
+            <q-avatar rounded>
+              <img :src="'/logo/' + quickcommandInfo.program + '.png'" />
+            </q-avatar>
+          </template>
+          <template v-slot:option="scope">
+            <q-item v-bind="scope.itemProps">
+              <q-item-section avatar>
+                <img width="32" :src="'/logo/' + scope.opt + '.png'" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label v-html="scope.opt" />
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+    </div>
+    <!-- 编程语言 -->
+    <div class="row q-gutter-sm q-py-xs">
+      <div class="col">
+        <div>
           <q-select
             dense
             outlined
@@ -10,8 +197,9 @@
             transition-show="jump-down"
             transition-hide="jump-up"
             label-color="teal"
+            @update:model-value="programChanged"
             v-model="quickcommandInfo.program"
-            :options="options"
+            :options="programLanguages"
             label="编程语言"
           >
             <template v-slot:append>
@@ -32,8 +220,9 @@
           </q-select>
         </div>
       </div>
-      <div class="col">
+      <div class="col-auto">
         <div
+          style="max-width: 300px"
           class="row q-gutter-sm"
           v-show="quickcommandInfo.program === 'custom'"
         >
@@ -109,20 +298,18 @@
         </div>
       </div>
     </div>
-    <div class="row">
-      <MonocaEditor
-        ref="editor"
-        style="
-          position: fixed;
-          bottom: 2px;
-          left: 2px;
-          right: 2px;
-          top: 70px;
-          border-radius: 4px;
-          border: 1px solid #8080808c;
-        "
-      />
-    </div>
+    <MonocaEditor
+      class="absolute"
+      ref="editor"
+      :style="{
+        bottom: '2px',
+        left: '2px',
+        right: '2px',
+        top: this.action.type === 'run' ? '70px' : '250px',
+        borderRadius: '4px',
+        border: '1px solid #8080808c',
+      }"
+    />
     <q-dialog v-model="isResultShow" @hide="runResult = ''" position="bottom">
       <q-card style="width: 90vh">
         <q-toolbar>
@@ -158,7 +345,9 @@ export default {
   components: { MonocaEditor },
   data() {
     return {
-      options: Object.keys(this.$programmings),
+      programLanguages: Object.keys(this.$programmings),
+      matchTypes: ["关键字", "正则", "窗口", "文件", "专业模式"],
+      currentMatchType: "关键字",
       quickcommandInfo: {
         features: {
           explain: "",
@@ -194,25 +383,21 @@ export default {
     this.init();
   },
   computed: {
-    currentProgram() {
-      return this.quickcommandInfo.program;
+    notRunCodePage() {
+      return this.action.type !== "run";
     },
   },
   created() {},
-  watch: {
-    currentProgram(val) {
-      this.setLanguage(val);
-    },
-  },
   methods: {
     init() {
+      window.commandEditor = this;
       this.bindKeys();
-
       let quickCommandInfo =
         this.action.type === "edit"
           ? this.action.data
           : this.$utools.getDB(this.$utools.DBPRE.CFG + "codeHistory");
       Object.assign(this.quickcommandInfo, quickCommandInfo);
+      this.setLanguage(this.quickcommandInfo.program);
       this.$refs.editor.setEditorValue(quickCommandInfo.cmd);
       // 只有新建或运行时才保存记录
       if (this.action.type === "edit") return;
@@ -233,6 +418,9 @@ export default {
         that.runCurrentCommand();
       });
     },
+    programChanged(value) {
+      this.setLanguage(value);
+    },
     // 匹配编程语言
     matchLanguage() {
       let language = Object.values(this.$programmings).filter(

src/pages/ConfigurationPage.vue

@@ -1,20 +1,16 @@
 <template>
-  <div>
+  <div class="relative">
     <!-- 标签栏 -->
     <!-- 面板视图不显示标签栏 -->
-    <div v-show="commandCardStyle !== 'mini'">
-      <q-tabs
-        v-model="currentTag"
-        vertical
-        outside-arrows
-        :shrink="false"
-        class="text-teal fixed-left"
-        :style="{
-          width: tabBarWidth,
-          boxShadow: barShadow,
-          zIndex: 1,
-        }"
-      >
+    <div
+      v-show="commandCardStyle !== 'mini'"
+      class="absolute-left"
+      :style="{
+        width: tabBarWidth,
+        zIndex: 1,
+      }"
+    >
+      <q-tabs v-model="currentTag" vertical outside-arrows class="text-teal">
         <!-- 所有标签 -->
         <q-tab
           :alert="activatedQuickPanels.includes(tag)"
@@ -38,7 +34,7 @@
     <!-- 面板栏 -->
     <q-tab-panels
       animated
-      class="fixed-right"
+      class="absolute-right"
       :style="{
         bottom: footerBarHeight,
         left: tabBarWidth,
@@ -86,11 +82,10 @@
     </q-tab-panels>
     <!-- 底栏 -->
     <div
-      class="fixed-bottom"
+      class="absolute-bottom"
       :style="{
         height: footerBarHeight,
         left: tabBarWidth,
-        boxShadow: barShadow,
       }"
     >
       <div class="row">
@@ -278,15 +273,60 @@
         </div>
       </div>
     </div>
+    <!-- 命令编辑界面 -->
+    <q-dialog
+      v-model="isCommandEditorShow"
+      persistent
+      :maximized="maximizedToggle"
+      transition-show="slide-up"
+      transition-hide="slide-down"
+    >
+      <q-card>
+        <q-bar>
+          <q-space />
+          <q-btn
+            dense
+            flat
+            icon="minimize"
+            @click="maximizedToggle = false"
+            :disable="!maximizedToggle"
+          >
+            <q-tooltip
+              v-if="maximizedToggle"
+              content-class="bg-white text-primary"
+              >Minimize</q-tooltip
+            >
+          </q-btn>
+          <q-btn
+            dense
+            flat
+            icon="crop_square"
+            @click="maximizedToggle = true"
+            :disable="maximizedToggle"
+          >
+            <q-tooltip
+              v-if="!maximizedToggle"
+              content-class="bg-white text-primary"
+              >Maximize</q-tooltip
+            >
+          </q-btn>
+          <q-btn dense flat icon="close" v-close-popup>
+            <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          </q-btn>
+        </q-bar>
+        <CommandEditor :action="commandEditorAction"></CommandEditor>
+      </q-card>
+    </q-dialog>
   </div>
 </template>
 
 <script>
 import quickcommandParser from "../js/quickcommandParser.js";
 import CommandCard from "components/CommandCard";
+import CommandEditor from "components/CommandEditor.vue";
 
 export default {
-  components: { CommandCard },
+  components: { CommandCard, CommandEditor },
   data() {
     return {
       currentTag: "默认",
@@ -295,8 +335,10 @@ export default {
       activatedQuickPanels: [],
       allQuickCommands: [],
       commandSearchKeyword: "",
+      isCommandEditorShow: false,
+      maximizedToggle:true,
+      commandEditorAction: {},
       footerBarHeight: "40px",
-      barShadow: "2px 0 5px 2px #0000001f",
       commandCardStyle: "normal",
       commandCardStyleSheet: {
         mini: {
@@ -331,9 +373,7 @@ export default {
               cmd.features.explain.includes(this.commandSearchKeyword)
             );
         default:
-          return commands.filter(
-            (cmd) => cmd.tags?.includes(this.currentTag)
-          );
+          return commands.filter((cmd) => cmd.tags?.includes(this.currentTag));
       }
     },
     // 所有命令对应的标签
@@ -361,7 +401,6 @@ export default {
   methods: {
     // 初始化
     initPage() {
-      console.log(this.$route);
       window.configuration = this;
       // 已启用的 features
       let activatedFeatures = this.getActivatedFeatures();
@@ -407,27 +446,57 @@ export default {
         .forEach((x) => (allQcs[x.data.features.code] = x.data));
       return allQcs;
     },
-    // 监听命令变更时间
+    // 监听命令变更事件
     commandChanged(event) {
       switch (event.type) {
         case "remove":
-          delete this.allQuickCommands[event.data];
-          if (!this.allQuickCommandTags.includes(this.currentTag))
-            this.currentTag = "默认";
+          this.removeCommand(event.data);
           return;
         case "enable":
-          this.activatedQuickCommandFeatureCodes.push(event.data);
+          this.enableCommand(event.data);
           return;
         case "disable":
-          this.activatedQuickCommandFeatureCodes =
-            this.activatedQuickCommandFeatureCodes.filter(
-              (x) => x !== event.data
-            );
+          this.disableCommand(event.data);
           return;
+        case "edit":
+          this.editCommand(event.data);
         default:
           return;
       }
     },
+    // 启用命令
+    enableCommand(code) {
+      this.$utools.whole.setFeature(
+        JSON.parse(JSON.stringify(this.allQuickCommands[code].features))
+      );
+      this.activatedQuickCommandFeatureCodes.push(code);
+    },
+    // 禁用命令
+    disableCommand(code) {
+      this.$utools.whole.removeFeature(code);
+      this.activatedQuickCommandFeatureCodes =
+        this.activatedQuickCommandFeatureCodes.filter((x) => x !== code);
+    },
+    // 删除命令
+    removeCommand(code) {
+      utools.copyText(JSON.stringify(this.allQuickCommands[code], null, 4));
+      delete this.allQuickCommands[code];
+      this.$utools.delDB(this.$utools.DBPRE.QC + code);
+      this.disableCommand(code);
+      if (!this.allQuickCommandTags.includes(this.currentTag))
+        this.currentTag = "默认";
+      quickcommand.showMessageBox(
+        "删除成功，为防止误操作，已将删除的命令复制到剪贴板"
+      );
+    },
+    // 编辑命令
+    editCommand(code) {
+      this.commandEditorAction = {
+        type: "edit",
+        data: this.allQuickCommands[code],
+      };
+      this.isCommandEditorShow = true;
+    },
     // 从文件导入命令
     importCommandFromFile(file) {
       // 指定文件时直接读取否则弹出选择文件对话框
@@ -596,19 +665,11 @@ export default {
     },
     // 新建命令
     addNewCommand() {
-      let routeData = {
-        from: "configuration",
-        action: "new",
-        data: {
-          currentTag: this.currentTag,
-        },
+      this.commandEditorAction = {
+        type: "new",
+        data: {},
       };
-      this.$router.push({
-        name: "code",
-        params: {
-          data: JSON.stringify(routeData),
-        },
-      });
+      this.isCommandEditorShow = true;
     },
   },
 };