实现编排的插入、应用、运行功能

src/components/CommandEditor.vue

@@ -38,7 +38,7 @@
       @program-changed="programChanged"
       @run="runCurrentCommand"
       @save="saveCurrentCommand"
-      @add-action="insertText"
+      @use-composer="handleComposer"
     />
 
     <!-- 编辑器 -->
@@ -196,6 +196,16 @@ export default {
     insertText(text) {
       this.$refs.editor.repacleEditorSelection(text);
     },
+    handleComposer({ type, code }) {
+      switch (type) {
+        case "run":
+          return this.runCurrentCommand(code);
+        case "insert":
+          return this.insertText(code);
+        case "apply":
+          return this.$refs.editor.setEditorValue(code);
+      }
+    },
     // 保存
     saveCurrentCommand(message = "保存成功") {
       let updatedData = this.$refs.sidebar?.SaveMenuData();

src/components/editor/CommandLanguageBar.vue

@@ -39,8 +39,8 @@
         <template v-if="modelValue.program === 'quickcommand'">
           <q-btn
             v-for="(item, index) in [
-              'keyboard',
+              // 'keyboard',
-              'rocket_launch',
+              // 'rocket_launch',
               'help_center',
               'view_timeline',
             ]"
@@ -53,7 +53,8 @@
             @click="handleQuickCommandAction(index)"
           >
             <q-tooltip>
-              {{ ["录制按键", "快捷动作", "查看文档", "可视化编排"][index] }}
+              <!-- {{ ["录制按键", "快捷动作", "查看文档", "可视化编排"][index] }} -->
+              {{ ["查看文档", "可视化编排"][index] }}
             </q-tooltip>
           </q-btn>
         </template>
@@ -162,17 +163,16 @@
     </div>
 
     <!-- 移动对话框到这里 -->
-    <q-dialog v-model="showActions">
+    <!-- <q-dialog v-model="showActions">
       <QuickAction @addAction="addAction" />
-    </q-dialog>
+    </q-dialog> -->
-    <q-dialog v-model="showRecorder" position="bottom">
+    <!-- <q-dialog v-model="showRecorder" position="bottom">
       <KeyRecorder @sendKeys="addAction" />
-    </q-dialog>
+    </q-dialog> -->
     <q-dialog v-model="showComposer" maximized>
       <CommandComposer
         ref="composer"
-        @run="handleComposerRun"
+        @use-composer="handleComposer"
-        @apply="handleComposerApply"
         @update:model-value="showComposer = false"
       />
     </q-dialog>
@@ -180,15 +180,15 @@
 </template>
 
 <script>
-import QuickAction from "components/popup/QuickAction";
+// import QuickAction from "components/popup/QuickAction";
-import KeyRecorder from "components/popup/KeyRecorder";
+// import KeyRecorder from "components/popup/KeyRecorder";
 import CommandComposer from "components/editor/composer/CommandComposer.vue";
 
 export default {
   name: "CommandLanguageBar",
   components: {
-    QuickAction,
+    // QuickAction,
-    KeyRecorder,
+    // KeyRecorder,
     CommandComposer,
   },
   props: {
@@ -211,8 +211,8 @@ export default {
   },
   data() {
     return {
-      showActions: false,
+      // showActions: false,
-      showRecorder: false,
+      // showRecorder: false,
       showComposer: false,
     };
   },
@@ -280,32 +280,22 @@ export default {
     },
     handleQuickCommandAction(index) {
       const actions = [
-        () => (this.showRecorder = true),
+        // () => (this.showRecorder = true),
-        () => (this.showActions = true),
+        // () => (this.showActions = true),
         () => this.showHelp(),
         () => (this.showComposer = true),
       ];
       actions[index]();
     },
-    addAction(text) {
+    // addAction(text) {
-      this.$emit("add-action", text);
+    //   this.$emit("add-action", text);
-    },
+    // },
     showHelp() {
       window.showUb.docs();
     },
-    handleComposerRun(code) {
+    handleComposer({ type, code }) {
-      this.$emit("add-action", code);
+      this.$emit("use-composer", { type, code });
-    },
+      if (type !== "run") this.showComposer = false;
-    handleComposerApply(code) {
-      this.$emit("add-action", code);
-      this.showComposer = false;
-    },
-    applyComposerCommands() {
-      if (this.$refs.composer) {
-        const code = this.$refs.composer.generateCode();
-        this.$emit("add-action", code);
-      }
-      this.showComposer = false;
     },
   },
 };

src/components/editor/composer/CommandComposer.vue

@@ -25,8 +25,9 @@
     <!-- 固定底部 -->
     <div class="composer-footer q-pa-sm q-gutter-sm row justify-end">
       <q-btn label="取消" v-close-popup />
-      <q-btn color="primary" label="确认" @click="applyCommands" />
+      <q-btn color="primary" label="插入" @click="handleComposer('insert')" />
-      <q-btn color="positive" label="运行" @click="runCommands" />
+      <q-btn color="primary" label="应用" @click="handleComposer('apply')" />
+      <q-btn color="positive" label="运行" @click="handleComposer('run')" />
     </div>
   </div>
 </template>
@@ -98,14 +99,10 @@ export default defineComponent({
 
       return code.join("\n");
     },
-    runCommands() {
+    handleComposer(type) {
       const code = this.generateCode();
-      this.$emit("run", code);
+      this.$emit("use-composer", { type, code });
-    },
+      if (type !== "run") this.$emit("update:modelValue", false);
-    applyCommands() {
-      const code = this.generateCode();
-      this.$emit("apply", code);
-      this.$emit("update:modelValue", false);
     },
   },
 });