为小界面优化布局

src/components/editor/composer/CommandComposer.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="command-composer">
     <!-- 主体内容 -->
-    <div class="composer-body row no-wrap q-pa-sm q-gutter-sm">
+    <div class="composer-body row no-wrap">
       <!-- 左侧命令列表 -->
-      <div class="col-3 command-section">
+      <div class="col-3 command-section command-list">
-        <div class="section-header">
+        <!-- <div class="section-header">
           <q-icon name="list" size="20px" class="q-mr-sm text-primary" />
           <span class="text-subtitle1">可用命令</span>
-        </div>
+        </div> -->
         <q-scroll-area class="command-scroll">
           <ComposerList
             :commands="availableCommands"
@@ -17,28 +17,21 @@
       </div>
 
       <!-- 右侧命令流程 -->
-      <div class="col q-pl-md command-section">
+      <div class="col command-section command-flow">
         <div class="section-header">
           <q-icon name="timeline" size="20px" class="q-mr-sm text-primary" />
           <span class="text-subtitle1">命令流程</span>
           <q-space />
-          <CodePreview :generate-code="generateFlowCode" />
+          <ComposerButtons
+            :generate-code="generateFlowCode"
+            @action="handleComposer"
+          />
         </div>
         <q-scroll-area class="command-scroll">
           <ComposerFlow v-model="commandFlow" @add-command="addCommand" />
         </q-scroll-area>
       </div>
     </div>
-
-    <!-- 固定底部 -->
-    <div class="composer-footer q-pa-sm row justify-end">
-      <div class="action-buttons q-gutter-sm">
-        <q-btn label="取消" v-close-popup />
-        <q-btn color="primary" label="插入" @click="handleComposer('insert')" />
-        <q-btn color="primary" label="应用" @click="handleComposer('apply')" />
-        <q-btn color="positive" label="运行" @click="handleComposer('run')" />
-      </div>
-    </div>
   </div>
 </template>
 
@@ -46,7 +39,7 @@
 import { defineComponent, provide, ref } from "vue";
 import ComposerList from "./ComposerList.vue";
 import ComposerFlow from "./ComposerFlow.vue";
-import CodePreview from "./CodePreview.vue";
+import ComposerButtons from "./ComposerButtons.vue";
 import { commandCategories } from "js/composer/composerConfig";
 import { generateCode } from "js/composer/generateCode";
 // 从commandCategories中提取所有命令
@@ -64,7 +57,7 @@ export default defineComponent({
   components: {
     ComposerList,
     ComposerFlow,
-    CodePreview,
+    ComposerButtons,
   },
   setup() {
     const variables = ref([]);
@@ -143,6 +136,8 @@ export default defineComponent({
 .composer-body {
   flex: 1;
   overflow: hidden;
+  gap: 8px;
+  padding: 8px;
 }
 
 .command-section {
@@ -163,6 +158,7 @@ export default defineComponent({
   display: flex;
   align-items: center;
   padding: 12px 16px;
+  height: 28px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }
 
@@ -173,16 +169,8 @@ export default defineComponent({
 .command-scroll {
   flex: 1;
   overflow: hidden;
-}
+  border-radius: 8px;
-
+  padding-bottom: 8px;
-.composer-footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-  background: white;
-}
-
-.body--dark .composer-footer {
-  border-top-color: rgba(255, 255, 255, 0.1);
-  background: #1d1d1d;
 }
 
 /* 滚动美化 */

src/components/editor/composer/ComposerButtons.vue

@@ -1,15 +1,33 @@
 <template>
-  <div class="code-preview">
+  <div class="composer-buttons">
+    <q-btn
+      @click="$q.dark.toggle()"
+      :icon="$q.dark.isActive ? 'dark_mode' : 'light_mode'"
+      flat
+      dense
+      v-if="isDev"
+    >
+    </q-btn>
+    <q-btn icon="logout" dense flat v-close-popup>
+      <q-tooltip>退出可视化编排</q-tooltip>
+    </q-btn>
+    <q-btn dense icon="publish" flat @click="$emit('action', 'insert')">
+      <q-tooltip>插入到编辑器光标处</q-tooltip>
+    </q-btn>
+    <q-btn dense flat icon="done_all" @click="$emit('action', 'apply')">
+      <q-tooltip>清空编辑器内容并插入</q-tooltip>
+    </q-btn>
     <q-btn
       flat
-      round
       dense
       icon="preview"
-      class="preview-btn"
       @mouseenter="handleMouseEnter"
       @mouseleave="handleMouseLeave"
     >
     </q-btn>
+    <q-btn dense flat icon="play_circle" @click="$emit('action', 'run')">
+      <q-tooltip>运行</q-tooltip>
+    </q-btn>
 
     <transition name="preview-fade">
       <div v-if="isVisible" class="preview-popup">
@@ -27,7 +45,7 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-  name: "CodePreview",
+  name: "ComposerButtons",
 
   props: {
     generateCode: {
@@ -36,11 +54,14 @@ export default defineComponent({
     },
   },
 
+  emits: ["action"],
+
   data() {
     return {
       isVisible: false,
       code: "",
       previewTimer: null,
+      isDev: window.utools.isDev(),
     };
   },
 
@@ -65,25 +86,26 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.code-preview {
+.composer-buttons {
   position: relative;
 }
 
-.preview-btn {
+.composer-buttons > .q-btn {
-  color: var(--q-primary);
+  opacity: 0.6;
-  opacity: 0.7;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 12px;
 }
 
-.preview-btn:hover {
+.composer-buttons > .q-btn:hover {
   opacity: 1;
-  transform: scale(1.1);
+  transform: translateY(-2px);
+  color: var(--q-primary);
 }
 
 .preview-popup {
   position: absolute;
-  top: 0;
+  top: 40px;
-  right: calc(100% + 12px);
+  right: 30px;
   min-width: 300px;
   max-width: 600px;
   background: #fff;

src/components/editor/composer/ComposerFlow.vue

@@ -46,7 +46,9 @@
           <div class="text-body2 q-mt-sm">从左侧拖拽命令到这里开始编排</div>
         </div>
       </div>
-      <div v-else class="drop-area"></div>
+      <div v-else class="drop-area">
+        <q-icon name="add" size="32px" />
+      </div>
     </div>
   </div>
 </template>
@@ -247,17 +249,29 @@ export default defineComponent({
   background-color: rgba(32, 32, 32, 0.8);
 }
 
-.flow-list {
+/* .flow-list {
   min-height: 50px;
-}
+} */
 
 .drop-area {
   flex: 1;
-  min-height: 100px;
+  min-height: 50px;
+  border-radius: 8px;
+  margin: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #9994;
+  border: 2px dashed #9994;
+}
+
+.body--dark .drop-area {
+  color: #6664;
+  border: 2px dashed #6664;
 }
 
 .empty-flow {
-  height: 100px;
+  min-height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -282,17 +296,6 @@ export default defineComponent({
   background-color: #303132;
 }
 
-/* 拖拽时的视觉反馈 */
-.command-flow-container.drag-over {
-  background-color: #f0f4ff;
-  border-color: #2196f3;
-}
-
-.body--dark .command-flow-container.drag-over {
-  background-color: #303132;
-  border-color: #676666;
-}
-
 /* 滑动淡出动画 */
 .slide-fade-enter-active,
 .slide-fade-leave-active {