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

2025-10-11 08:03:28 +08:00 · 2025-02-10 00:04:45 +08:00
parent e3d399af4e
commit 63635fe933
4 changed files with 166 additions and 190 deletions
--- a/src/components/CommandEditor.vue
+++ b/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>
--- a/src/components/composer/flow/ComposerButtons.vue
+++ b/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>
--- a/src/components/config/FooterBar.vue
+++ b/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>