命令配置页面加入新建可视化编排的入口

src/components/CommandEditor.vue

@@ -1,84 +1,74 @@
 <template>
-  <div
-    class="command-editor-container"
-    :class="{ leaving: isLeaving, 'run-code': isRunCodePage }"
-    @animationend="$emit('animationend')"
-  >
-    <!-- 命令设置栏 -->
-    <CommandSideBar
-      ref="sidebar"
-      :canCommandSave="canCommandSave"
-      :quickcommandInfo="quickcommandInfo"
-      class="absolute-left shadow-1"
-      :style="{
-        width: sideBarWidth + 'px',
-        zIndex: 1,
-        transform: isFullscreen ? 'translateX(-100%)' : 'translateX(0)',
-        transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-      }"
-      :sideBarWidth="sideBarWidth"
-      v-if="showSidebar"
-      @back="handleBack"
-    ></CommandSideBar>
+  <!-- 命令设置栏 -->
+  <CommandSideBar
+    ref="sidebar"
+    :canCommandSave="canCommandSave"
+    :quickcommandInfo="quickcommandInfo"
+    class="absolute-left shadow-1"
+    :style="{
+      width: sideBarWidth + 'px',
+      zIndex: 1,
+      transform: isFullscreen ? 'translateX(-100%)' : 'translateX(0)',
+      transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    }"
+    :sideBarWidth="sideBarWidth"
+    v-if="showSidebar"
+    @back="handleBack"
+  ></CommandSideBar>
 
-    <!-- 编程语言栏 -->
-    <CommandLanguageBar
-      class="absolute-top"
-      :style="{
-        left: showSidebar ? sideBarWidth + 'px' : 65,
-        zIndex: 1,
-        transform: isFullscreen ? 'translateY(-100%)' : 'translateY(0)',
-        opacity: isFullscreen ? 0 : 1,
-        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-      }"
-      v-model="quickcommandInfo"
-      :height="languageBarHeight"
-      :canCommandSave="canCommandSave"
-      :isRunCodePage="isRunCodePage"
-      @program-changed="programChanged"
-      @run="runCurrentCommand"
-      @save="saveCurrentCommand"
-      @show-composer="showComposer = true"
-    />
+  <!-- 编程语言栏 -->
+  <CommandLanguageBar
+    class="absolute-top"
+    :style="{
+      left: showSidebar ? sideBarWidth + 'px' : 65,
+      zIndex: 1,
+      transform: isFullscreen ? 'translateY(-100%)' : 'translateY(0)',
+      opacity: isFullscreen ? 0 : 1,
+      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    }"
+    v-model="quickcommandInfo"
+    :height="languageBarHeight"
+    :canCommandSave="canCommandSave"
+    :isRunCodePage="isRunCodePage"
+    @program-changed="programChanged"
+    @run="runCurrentCommand"
+    @save="saveCurrentCommand"
+    @show-composer="showComposer = true"
+  />
 
-    <!-- 编辑器 -->
-    <MonacoEditor
-      class="editor-transition"
-      :placeholder="true"
-      ref="editor"
-      @loaded="monacoInit"
-      @typing="(val) => monacoTyping(val)"
-      @keyStroke="monacoKeyStroke"
-      :style="{
-        position: 'absolute',
-        top: isFullscreen ? 0 : languageBarHeight + 'px',
-        left: isFullscreen
-          ? 0
-          : action.type === 'run'
-          ? 0
-          : sideBarWidth + 'px',
-        right: 0,
-        bottom: 0,
-      }"
-    />
+  <!-- 编辑器 -->
+  <MonacoEditor
+    class="editor-transition"
+    :placeholder="true"
+    ref="editor"
+    @loaded="monacoInit"
+    @typing="(val) => monacoTyping(val)"
+    @keyStroke="monacoKeyStroke"
+    :style="{
+      position: 'absolute',
+      top: isFullscreen ? 0 : languageBarHeight + 'px',
+      left: isFullscreen ? 0 : action.type === 'run' ? 0 : sideBarWidth + 'px',
+      right: 0,
+      bottom: 0,
+    }"
+  />
 
-    <!-- 编辑器工具按钮组 -->
-    <EditorTools
-      ref="editorTools"
-      :commandCode="quickcommandInfo?.features?.code || 'temp'"
-      :isFullscreen="isFullscreen"
-      @restore="restoreHistory"
-      @toggle-fullscreen="toggleFullscreen"
-    />
+  <!-- 编辑器工具按钮组 -->
+  <EditorTools
+    ref="editorTools"
+    :commandCode="quickcommandInfo?.features?.code || 'temp'"
+    :isFullscreen="isFullscreen"
+    @restore="restoreHistory"
+    @toggle-fullscreen="toggleFullscreen"
+  />
 
-    <!-- 可视化编排 -->
-    <q-dialog v-model="showComposer" maximized>
-      <CommandComposer ref="composer" @use-composer="handleComposer" />
-    </q-dialog>
+  <!-- 可视化编排 -->
+  <q-dialog v-model="showComposer" maximized>
+    <CommandComposer ref="composer" @use-composer="handleComposer" />
+  </q-dialog>
 
-    <!-- 运行结果 -->
-    <CommandRunResult :action="action" ref="result"></CommandRunResult>
-  </div>
+  <!-- 运行结果 -->
+  <CommandRunResult :action="action" ref="result"></CommandRunResult>
 </template>
 
 <script>
@@ -338,72 +328,4 @@ export default {
   transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   will-change: transform, left, top, opacity;
 }
-
-.command-editor-container {
-  color: black;
-  background: white;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 5000;
-  background: var(--q-page-background);
-  animation: slideUpDefault 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.command-editor-container.run-code {
-  animation: none;
-}
-
-.command-editor-container.leaving {
-  animation: slideDownOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  background: transparent;
-}
-
-.command-editor-container.leaving.run-code {
-  animation: slideUpOut 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-@keyframes slideUpDefault {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideDownIn {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideDownOut {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-}
-
-@keyframes slideUpOut {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-100%);
-  }
-}
-
-.body--dark .command-editor-container {
-  color: white;
-  background: var(--q-dark-page);
-}
 </style>

src/components/composer/flow/ComposerButtons.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="composer-buttons">
     <div class="right-buttons">
-      <q-separator vertical />
+      <q-btn icon="close" dense flat v-close-popup v-if="showCloseButton">
+        <q-tooltip>退出可视化编排</q-tooltip>
+      </q-btn>
       <q-btn
         :icon="isAllCollapsed ? 'unfold_more' : 'unfold_less'"
         dense
@@ -10,7 +12,6 @@
       >
         <q-tooltip>{{ isAllCollapsed ? "展开所有" : "折叠所有" }}</q-tooltip>
       </q-btn>
-      <q-separator vertical />
       <q-btn
         icon="settings"
         dense
@@ -19,7 +20,6 @@
       >
         <q-tooltip>流程管理</q-tooltip>
       </q-btn>
-      <q-separator vertical />
       <q-btn
         @click="$q.dark.toggle()"
         :icon="$q.dark.isActive ? 'dark_mode' : 'light_mode'"
@@ -28,11 +28,7 @@
         v-if="isDev"
       >
       </q-btn>
-      <q-btn icon="close" dense flat v-close-popup v-if="showCloseButton">
-        <q-tooltip>退出可视化编排</q-tooltip>
-      </q-btn>
-      <q-separator vertical v-if="showCloseButton" />
-      <q-btn
+      <!-- <q-btn
         dense
         icon="read_more"
         flat
@@ -41,7 +37,7 @@
         v-if="showCloseButton"
       >
         <q-tooltip>插入到编辑器光标处</q-tooltip>
-      </q-btn>
+      </q-btn> -->
       <q-btn
         dense
         flat
@@ -52,14 +48,12 @@
       >
         <q-tooltip>清空编辑器内容并插入</q-tooltip>
       </q-btn>
-      <q-separator vertical v-if="showCloseButton" />
       <q-btn dense flat icon="save" @click="$emit('action', 'save')">
         <q-tooltip>保存</q-tooltip>
       </q-btn>
       <q-btn dense flat icon="history" @click="$emit('action', 'load')">
         <q-tooltip>载入</q-tooltip>
       </q-btn>
-      <q-separator vertical />
       <q-btn flat dense icon="preview" @click="isVisible = true">
         <q-tooltip>预览代码</q-tooltip>
       </q-btn>

src/components/config/FooterBar.vue

@@ -68,20 +68,32 @@
             flat
             @click="goShareCenter"
             color="primary"
-            label="分享中心"
             icon="groups"
             class="share-btn"
-          />
+          >
+            <q-tooltip>分享中心</q-tooltip>
+          </q-btn>
           <!-- 新建按钮 -->
           <q-btn
             split
             flat
-            @click="$emit('add-new')"
+            @click="$emit('add-new', 'CommandEditor')"
             color="primary"
-            label="新建"
-            icon="add"
             class="new-btn"
-          />
+          >
+            <q-icon name="code" class="icon-with-badge" />
+            <q-tooltip>新建命令（直接编写脚本）</q-tooltip>
+          </q-btn>
+          <q-btn
+            split
+            flat
+            @click="$emit('add-new', 'ComposerEditor')"
+            color="primary"
+            class="new-btn"
+          >
+            <q-icon name="view_timeline" class="icon-with-badge" />
+            <q-tooltip>新建命令（可视化编排）</q-tooltip>
+          </q-btn>
           <!-- 菜单按钮 -->
           <q-btn
             stretch
@@ -226,4 +238,28 @@ export default {
   animation: searchIconShake 0.8s ease;
   color: var(--q-primary);
 }
+
+/* 图标角标样式 */
+.icon-with-badge {
+  position: relative;
+}
+
+.icon-with-badge::after {
+  content: "+";
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  transform: translate(50%, -50%);
+  background-color: var(--q-primary);
+  color: white;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: bold;
+  display: grid;
+  place-items: center;
+  font-family: monospace;
+  line-height: 0;
+}
 </style>

src/pages/ConfigurationPage.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="config-page-container">
     <!-- 主界面内容 -->
-    <div
-      class="main-content"
-      :class="{ hide: isCommandEditorShow && !isEditorLeaving }"
-    >
+    <div class="main-content">
       <BackgroundLayer />
       <!-- 标签栏 -->
       <TagBar
@@ -39,15 +36,16 @@
     </div>
 
     <!-- 命令编辑界面 -->
-    <CommandEditor
-      v-if="isCommandEditorShow"
-      ref="commandEditor"
-      :action="commandEditorAction"
-      @editorEvent="editorEvent"
-      :allQuickCommandTags="allQuickCommandTags"
-      :isLeaving="isEditorLeaving"
-      @animationend="handleAnimationEnd"
-    ></CommandEditor>
+    <transition name="slide">
+      <div v-if="isEditorShow" class="editor-container">
+        <component
+          :is="commandEditorAction.data.component"
+          :action="commandEditorAction"
+          @editorEvent="editorEvent"
+          :allQuickCommandTags="allQuickCommandTags"
+        />
+      </div>
+    </transition>
 
     <CommandRunResult
       :action="{ type: 'config' }"
@@ -63,6 +61,7 @@ import importAll from "js/common/importAll.js";
 import changeLog from "js/options/changeLog.js";
 import pinyinMatch from "pinyin-match";
 import CommandEditor from "components/CommandEditor";
+import ComposerEditor from "components/ComposerEditor";
 import FooterBar from "src/components/config/FooterBar.vue";
 import TagBar from "src/components/config/TagBar.vue";
 import BackgroundLayer from "src/components/config/BackgroundLayer.vue";
@@ -78,6 +77,7 @@ let defaultCommands = importAll(require.context("../json/", false, /\.json$/));
 export default {
   components: {
     CommandEditor,
+    ComposerEditor,
     CommandRunResult,
     FooterBar,
     TagBar,
@@ -93,10 +93,9 @@ export default {
       allQuickCommands: {},
       allQuickCommandTags: [],
       commandSearchKeyword: "",
-      isCommandEditorShow: false,
+      isEditorShow: false,
       commandEditorAction: {},
       footerBarHeight: "40px",
-      isEditorLeaving: false,
     };
   },
   computed: {
@@ -286,7 +285,7 @@ export default {
         type: "edit",
         data: window.lodashM.cloneDeep(command),
       };
-      this.isCommandEditorShow = true;
+      this.isEditorShow = true;
     },
     // 是否为默认命令
     isDefaultCommand(code) {
@@ -419,12 +418,14 @@ export default {
       }
     },
     // 新建命令
-    addNewCommand() {
+    addNewCommand(component = "CommandEditor") {
       this.commandEditorAction = {
         type: "new",
-        data: {},
+        data: {
+          component,
+        },
       };
-      this.isCommandEditorShow = true;
+      this.isEditorShow = true;
     },
     saveCommand(command) {
       let code = command.features.code;
@@ -444,7 +445,7 @@ export default {
           this.saveCommand(event.data);
           break;
         case "back":
-          this.isEditorLeaving = true;
+          this.isEditorShow = false;
           break;
         default:
           return;
@@ -470,12 +471,6 @@ export default {
         );
       }
     },
-    handleAnimationEnd(e) {
-      if (this.isEditorLeaving) {
-        this.isEditorLeaving = false;
-        this.isCommandEditorShow = false;
-      }
-    },
     handleCommandsReorder({ tag, commands }) {
       // 更新当前tag下的命令顺序
       const tagCommands = {};
@@ -522,11 +517,40 @@ export default {
   background: transparent;
 }
 
-.main-content {
-  transition: opacity 0.3s ease;
+.editor-container {
+  color: black;
+  background: white;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 5000;
+  background: var(--q-page-background);
 }
 
-.main-content.hide {
-  opacity: 0;
+.body--dark .editor-container {
+  color: white;
+  background: var(--q-dark-page);
+}
+
+/* 编辑器容器动画 */
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.3s ease-in-out;
+}
+
+.slide-enter-from {
+  transform: translateY(100%);
+}
+
+.slide-leave-to {
+  transform: translateY(100%);
+}
+
+.slide-enter-to,
+.slide-leave-from {
+  transform: translateY(0);
 }
 </style>