From 28f034814b3ccce9e4e5e2971468a8319feca750 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Thu, 2 Jan 2025 11:13:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96ubrowser=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=8C=E6=9B=B4=E5=8A=A0=E9=AB=98=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/composer/ComposerFlow.vue      |   5 +-
 .../composer/ubrowser/UBrowserEditor.vue      | 148 +++++++++++-------
 .../composer/ubrowser/UBrowserRun.vue         |   3 +-
 3 files changed, 98 insertions(+), 58 deletions(-)

diff --git a/src/components/composer/ComposerFlow.vue b/src/components/composer/ComposerFlow.vue
index 63fb592..8b26fec 100644
--- a/src/components/composer/ComposerFlow.vue
+++ b/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>
diff --git a/src/components/composer/ubrowser/UBrowserEditor.vue b/src/components/composer/ubrowser/UBrowserEditor.vue
index e75ccf4..8b1fa74 100644
--- a/src/components/composer/ubrowser/UBrowserEditor.vue
+++ b/src/components/composer/ubrowser/UBrowserEditor.vue
@@ -1,66 +1,52 @@
 <template>
   <div class="ubrowser-editor">
-    <q-stepper
+    <!-- 标签页导航 -->
+    <q-tabs
       v-model="step"
-      vertical
-      color="primary"
-      header-nav
-      animated
-      alternative-labels
-      flat
-      class="ubrowser-stepper"
+      class="ubrowser-tabs"
+      dense
+      align="left"
+      narrow-indicator
+      inline-label
     >
-      <!-- 基础参数步骤 -->
-      <q-step :name="1" title="基础参数" icon="settings" :done="step > 1">
-        <UBrowserBasic :configs="configs" @update:configs="updateConfigs" />
-      </q-step>
+      <q-tab name="1" icon="settings" label="基础参数" size="sm" />
+      <q-tab name="2" icon="touch_app" label="浏览器操作" size="sm" />
+      <q-tab name="3" icon="settings_applications" label="运行参数" size="sm" />
+    </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-step
-        :name="3"
-        title="运行参数"
-        icon="settings_applications"
-        class="q-pb-md"
-      >
-        <UBrowserRun :configs="configs" @update:configs="updateConfigs" />
-      </q-step>
-    </q-stepper>
+      <q-tab-panel name="3" class="panel-content">
+        <UBrowserRun
+          :configs="configs"
+          @update:configs="updateConfigs"
+        />
+      </q-tab-panel>
+    </q-tab-panels>
   </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) {
-  padding: 0 !important;
+.ubrowser-editor {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
 }
 
-.ubrowser-editor :deep(.q-stepper__tab) {
-  padding: 5px 25px;
+.ubrowser-tabs {
+  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>
diff --git a/src/components/composer/ubrowser/UBrowserRun.vue b/src/components/composer/ubrowser/UBrowserRun.vue
index 8b93191..0f17b73 100644
--- a/src/components/composer/ubrowser/UBrowserRun.vue
+++ b/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)"
         >