优化ubrowser卡片布局，更加高效

src/components/composer/ComposerFlow.vue

@@ -26,7 +26,8 @@
           group="commands"
           item-key="id"
           class="flow-list"
-          :animation="200"
+          :animation="0"
+          :delay="50"
           handle=".drag-handle"
           @start="onDragStart"
           @end="onDragEnd"
@@ -645,8 +646,6 @@ export default defineComponent({
 
 .flow-item.sortable-ghost {
   opacity: 0.5;
-  transform: scale(0.99);
   border: 1px solid var(--q-primary);
-  transition: all 0.3s ease;
 }
 </style>

src/components/composer/ubrowser/UBrowserEditor.vue

@@ -1,66 +1,52 @@
 <template>
   <div class="ubrowser-editor">
-    <q-stepper
+    <!-- 标签页导航 -->
+    <q-tabs
       v-model="step"
-      vertical
+      class="ubrowser-tabs"
-      color="primary"
+      dense
-      header-nav
+      align="left"
-      animated
+      narrow-indicator
-      alternative-labels
+      inline-label
-      flat
-      class="ubrowser-stepper"
     >
-      <!-- 基础参数步骤 -->
+      <q-tab name="1" icon="settings" label="基础参数" size="sm" />
-      <q-step :name="1" title="基础参数" icon="settings" :done="step > 1">
+      <q-tab name="2" icon="touch_app" label="浏览器操作" size="sm" />
-        <UBrowserBasic :configs="configs" @update:configs="updateConfigs" />
+      <q-tab name="3" icon="settings_applications" label="运行参数" size="sm" />
-      </q-step>
+    </q-tabs>
 
-      <!-- 浏览器操作步骤 -->
+    <!-- 内容区域 -->
-      <q-step :name="2" title="浏览器操作" icon="touch_app" :done="step > 2">
+    <q-tab-panels
+      v-model="step"
+      animated
+      swipeable
+      class="ubrowser-panels"
+    >
+      <q-tab-panel name="1" class="panel-content">
+        <UBrowserBasic
+          :configs="configs"
+          @update:configs="updateConfigs"
+        />
+      </q-tab-panel>
+
+      <q-tab-panel name="2" class="panel-content">
         <UBrowserOperations
           :configs="configs"
           @update:configs="updateConfigs"
           v-model:selected-actions="selectedActions"
           @remove-action="removeAction"
         />
-      </q-step>
+      </q-tab-panel>
 
-      <!-- 运行参数步骤 -->
+      <q-tab-panel name="3" class="panel-content">
-      <q-step
+        <UBrowserRun
-        :name="3"
+          :configs="configs"
-        title="运行参数"
+          @update:configs="updateConfigs"
-        icon="settings_applications"
+        />
-        class="q-pb-md"
+      </q-tab-panel>
-      >
+    </q-tab-panels>
-        <UBrowserRun :configs="configs" @update:configs="updateConfigs" />
-      </q-step>
-    </q-stepper>
   </div>
 </template>
 
-<style scoped>
-.ubrowser-editor {
-  width: 100%;
-}
-
-.ubrowser-stepper {
-  box-shadow: none;
-  background-color: rgba(255, 255, 255, 0.8);
-}
-
-.body--dark .ubrowser-stepper {
-  background-color: rgba(255, 255, 255, 0.05);
-}
-
-.ubrowser-stepper :deep(.q-stepper__header) {
-  cursor: pointer;
-}
-
-.ubrowser-stepper :deep(.q-stepper__step-inner) {
-  padding-bottom: 5px;
-}
-</style>
-
 <script>
 import { defineComponent } from "vue";
 import UBrowserBasic from "./UBrowserBasic.vue";
@@ -85,7 +71,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   data() {
     return {
-      step: 1,
+      step: "1",
       selectedActions: [],
       configs: window.lodashM.cloneDeep(defaultUBrowserConfigs),
     };
@@ -133,11 +119,67 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.ubrowser-editor :deep(.q-stepper) {
+.ubrowser-editor {
-  padding: 0 !important;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
 }
 
-.ubrowser-editor :deep(.q-stepper__tab) {
+.ubrowser-tabs {
-  padding: 5px 25px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 4px 4px 0 0;
+  flex-shrink: 0;
+}
+
+.ubrowser-panels {
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 0 0 4px 4px;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 暗色模式 */
+.body--dark .ubrowser-tabs,
+.body--dark .ubrowser-panels {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* 调整面板内边距和布局 */
+.ubrowser-panels :deep(.q-tab-panel) {
+  padding: 8px;
+  height: 100%;
+  min-height: 0;
+}
+
+/* 面板内容区域 */
+.panel-content {
+  height: 100%;
+  overflow: auto;
+}
+
+/* 调整标签页样式 */
+.ubrowser-tabs :deep(.q-tab) {
+  min-height: 36px;
+  padding: 0 12px;
+}
+
+.ubrowser-tabs :deep(.q-tab__content) {
+  min-width: 0;
+  flex-direction: row;
+  gap: 4px;
+}
+
+.ubrowser-tabs :deep(.q-tab__label) {
+  font-size: 12px;
+  line-height: 1;
+}
+
+.ubrowser-tabs :deep(.q-tab__icon) {
+  font-size: 16px;
+  margin: 0;
 }
 </style>

src/components/composer/ubrowser/UBrowserRun.vue

@@ -140,7 +140,7 @@
 
     <!-- 透明度控制 -->
     <div class="col-12">
-      <div class="row items-center" style="height: 36px">
+      <div class="row items-center q-px-sm" style="height: 36px">
         <div class="q-mr-md" style="font-size: 12px">透明度</div>
         <q-slider
           class="col"
@@ -150,7 +150,6 @@
           :step="0.1"
           label
           color="primary"
-          switch-label-side
           dense
           @update:model-value="updateConfig('opacity', $event)"
         >