添加可视化编排的独立入口

plugin/plugin.json

@@ -32,6 +32,15 @@
       ],
       "icon": "features/code.png"
     },
+    {
+      "code": "composer",
+      "explain": "运行可视化编排",
+      "cmds": [
+        "可视化编排",
+        "RunComposer"
+      ],
+      "icon": "features/code.png"
+    },
     {
       "code": "newcommand",
       "explain": "快速新建快捷命令",

src/components/CommandEditor.vue

@@ -38,7 +38,7 @@
       @program-changed="programChanged"
       @run="runCurrentCommand"
       @save="saveCurrentCommand"
-      @use-composer="handleComposer"
+      @show-composer="showComposer = true"
     />
 
     <!-- 编辑器 -->
@@ -71,6 +71,11 @@
       @toggle-fullscreen="toggleFullscreen"
     />
 
+    <!-- 可视化编排 -->
+    <q-dialog v-model="showComposer" maximized>
+      <CommandComposer ref="composer" @use-composer="handleComposer" />
+    </q-dialog>
+
     <!-- 运行结果 -->
     <CommandRunResult :action="action" ref="result"></CommandRunResult>
   </div>
@@ -82,6 +87,7 @@ import CommandSideBar from "components/editor/CommandSideBar";
 import CommandLanguageBar from "components/editor/CommandLanguageBar";
 import EditorTools from "components/editor/EditorTools";
 import CommandRunResult from "components/CommandRunResult";
+import CommandComposer from "components/composer/CommandComposer.vue";
 
 // 预加载 MonacoEditor
 const MonacoEditorPromise = import("components/editor/MonacoEditor");
@@ -108,6 +114,7 @@ export default {
     CommandSideBar,
     CommandRunResult,
     CommandLanguageBar,
+    CommandComposer,
     EditorTools,
   },
   data() {
@@ -115,7 +122,10 @@ export default {
       programLanguages: Object.keys(this.$root.programs),
       sideBarWidth: 200,
       languageBarHeight: 40,
-      canCommandSave: this.action.type === "code" ? false : true,
+      showComposer: false,
+      isRunCodePage: this.action.type === "run",
+      canCommandSave: this.action.type !== "run",
+      showSidebar: this.action.type !== "run",
       quickcommandInfo: {
         program: "quickcommand",
         cmd: "",
@@ -131,8 +141,6 @@ export default {
         },
       },
       resultMaxLength: 10000,
-      showSidebar: this.action.type !== "run",
-      isRunCodePage: this.action.type === "run",
       listener: null,
       isFullscreen: false,
     };
@@ -162,10 +170,9 @@ export default {
   methods: {
     // 命令初始化
     commandInit() {
-      let quickCommandInfo =
-        this.action.type === "run"
-          ? this.$root.utools.getDB("cfg_codeHistory")
-          : this.action.data;
+      let quickCommandInfo = this.isRunCodePage
+        ? this.$root.utools.getDB("cfg_codeHistory")
+        : this.action.data;
       quickCommandInfo?.program &&
         Object.assign(
           this.quickcommandInfo,

src/components/ComposerEditor.vue

@@ -0,0 +1,42 @@
+<template>
+  <CommandComposer
+    ref="composer"
+    @use-composer="handleComposer"
+    :show-close-button="false"
+    class="fixed-full"
+  />
+  <!-- 运行结果 -->
+  <CommandRunResult :action="action" ref="result"></CommandRunResult>
+</template>
+
+<script>
+import CommandComposer from "components/composer/CommandComposer.vue";
+import CommandRunResult from "components/CommandRunResult";
+
+export default {
+  components: { CommandComposer, CommandRunResult },
+  props: {
+    action: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    handleComposer({ type, code }) {
+      switch (type) {
+        case "run":
+          return this.runCurrentCommand(code);
+      }
+    },
+    runCurrentCommand(cmd) {
+      if (!cmd) return;
+      let command = {
+        cmd: cmd,
+        output: "text",
+        program: "quickcommand",
+      };
+      this.$refs.result.runCurrentCommand(command);
+    },
+  },
+};
+</script>

src/components/composer/CommandComposer.vue

@@ -12,6 +12,7 @@
         <ComposerFlow
           v-model="commandFlow"
           :generate-code="generateFlowCode"
+          :show-close-button="showCloseButton"
           @add-command="addCommand"
           @action="handleComposer"
         />
@@ -76,7 +77,13 @@ export default defineComponent({
       hasCommandNeedLoading: false,
     };
   },
-  emits: ["use-composer", "update:modelValue"],
+  props: {
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ["use-composer"],
   methods: {
     addCommand(action) {
       let newAction = window.lodashM.cloneDeep(action);
@@ -99,8 +106,10 @@ export default defineComponent({
         case "run":
           return this.runFlow(flow);
         default:
-          this.$emit("use-composer", { type, code });
-          return this.$emit("update:modelValue", false);
+          return this.$emit("use-composer", {
+            type,
+            code: this.generateFlowCode(),
+          });
       }
     },
     // 传入临时flow说明是运行单独的命令，否则是运行整个命令流

src/components/composer/ComposerFlow.vue

@@ -9,6 +9,7 @@
       <ComposerButtons
         :generate-code="generateCode"
         :is-all-collapsed="isAllCollapsed"
+        :show-close-button="showCloseButton"
         @action="handleAction"
         class="flex-grow"
       />
@@ -97,6 +98,10 @@ export default defineComponent({
       type: Function,
       required: true,
     },
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup() {
     const getCurrentVariables = inject("getCurrentVariables");

src/components/composer/flow/ComposerButtons.vue

@@ -22,17 +22,31 @@
         v-if="isDev"
       >
       </q-btn>
-      <q-btn icon="close" dense flat v-close-popup>
+      <q-btn icon="close" dense flat v-close-popup v-if="showCloseButton">
         <q-tooltip>退出可视化编排</q-tooltip>
       </q-btn>
-      <q-separator vertical />
-      <q-btn dense icon="read_more" flat @click="$emit('action', 'insert')">
+      <q-separator vertical v-if="showCloseButton" />
+      <q-btn
+        dense
+        icon="read_more"
+        flat
+        v-close-popup
+        @click="$emit('action', 'insert')"
+        v-if="showCloseButton"
+      >
         <q-tooltip>插入到编辑器光标处</q-tooltip>
       </q-btn>
-      <q-btn dense flat icon="done_all" @click="$emit('action', 'apply')">
+      <q-btn
+        dense
+        flat
+        v-close-popup
+        icon="done_all"
+        @click="$emit('action', 'apply')"
+        v-if="showCloseButton"
+      >
         <q-tooltip>清空编辑器内容并插入</q-tooltip>
       </q-btn>
-      <q-separator vertical />
+      <q-separator vertical v-if="showCloseButton" />
       <q-btn dense flat icon="save" @click="$emit('action', 'save')">
         <q-tooltip>保存</q-tooltip>
       </q-btn>
@@ -80,6 +94,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: ["action"],

src/components/editor/CommandLanguageBar.vue

@@ -39,8 +39,6 @@
         <template v-if="modelValue.program === 'quickcommand'">
           <q-btn
             v-for="(item, index) in [
-              // 'keyboard',
-              // 'rocket_launch',
               'help_center',
               'view_timeline',
             ]"
@@ -53,7 +51,6 @@
             @click="handleQuickCommandAction(index)"
           >
             <q-tooltip>
-              <!-- {{ ["录制按键", "快捷动作", "查看文档", "可视化编排"][index] }} -->
               {{ ["查看文档", "可视化编排"][index] }}
             </q-tooltip>
           </q-btn>
@@ -161,36 +158,13 @@
         ></q-btn>
       </q-btn-group>
     </div>
-
-    <!-- 移动对话框到这里 -->
-    <!-- <q-dialog v-model="showActions">
-      <QuickAction @addAction="addAction" />
-    </q-dialog> -->
-    <!-- <q-dialog v-model="showRecorder" position="bottom">
-      <KeyRecorder @sendKeys="addAction" />
-    </q-dialog> -->
-    <q-dialog v-model="showComposer" maximized>
-      <CommandComposer
-        ref="composer"
-        @use-composer="handleComposer"
-        @update:model-value="showComposer = false"
-      />
-    </q-dialog>
   </div>
 </template>
 
 <script>
-// import QuickAction from "components/popup/QuickAction";
-// import KeyRecorder from "components/popup/KeyRecorder";
-import CommandComposer from "components/composer/CommandComposer.vue";
 
 export default {
   name: "CommandLanguageBar",
-  components: {
-    // QuickAction,
-    // KeyRecorder,
-    CommandComposer,
-  },
   props: {
     modelValue: {
       type: Object,
@@ -209,22 +183,12 @@ export default {
       default: false,
     },
   },
-  data() {
-    return {
-      // showActions: false,
-      // showRecorder: false,
-      showComposer: false,
-    };
-  },
   emits: [
     "update:modelValue",
     "program-changed",
     "run",
     "save",
-    // "show-recorder",
-    // "show-actions",
-    "show-help",
-    "use-composer",
+    "show-composer",
   ],
   computed: {
     programLanguages() {
@@ -280,23 +244,14 @@ export default {
     },
     handleQuickCommandAction(index) {
       const actions = [
-        // () => (this.showRecorder = true),
-        // () => (this.showActions = true),
         () => this.showHelp(),
-        () => (this.showComposer = true),
+        () => this.$emit("show-composer"),
       ];
       actions[index]();
     },
-    // addAction(text) {
-    //   this.$emit("add-action", text);
-    // },
     showHelp() {
       window.showUb.docs();
     },
-    handleComposer({ type, code }) {
-      this.$emit("use-composer", { type, code });
-      if (type !== "run") this.showComposer = false;
-    },
   },
 };
 </script>

src/pages/RunComposerPage.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <ComposerEditor :action="action"></ComposerEditor>
+  </div>
+</template>
+
+<script>
+import ComposerEditor from "components/ComposerEditor";
+
+export default {
+  components: { ComposerEditor },
+  data() {
+    return {
+      action: {
+        type: "composer",
+        data: {},
+      },
+    };
+  },
+};
+</script>

src/router/routes.js

@@ -9,6 +9,11 @@ const routes = [
     name: "code",
     component: () => import("pages/RunCodePage.vue"),
   },
+  {
+    path: "/composer",
+    name: "composer",
+    component: () => import("pages/RunComposerPage.vue"),
+  },
   {
     path: "/newcommand",
     name: "newcommand",