From e082304c56d6535facf84c4a649c7e2c081f5a00 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sun, 5 Jan 2025 09:51:44 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84ubrowser?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../composer/ubrowser/UBrowserBasic.vue       |  75 ++-
 .../composer/ubrowser/UBrowserEditor.vue      | 173 +++--
 .../composer/ubrowser/UBrowserOperations.vue  |  50 +-
 .../composer/ubrowser/UBrowserRun.vue         |  36 +-
 .../operations/UBrowserButtonToggle.vue       |  50 --
 .../ubrowser/operations/UBrowserCheckbox.vue  |  37 --
 .../operations/UBrowserCheckboxGroup.vue      |  31 -
 .../operations/UBrowserCookieList.vue         |  48 +-
 .../operations/UBrowserDeviceName.vue         |  10 +-
 .../operations/UBrowserDeviceSize.vue         |  60 --
 .../ubrowser/operations/UBrowserFileList.vue  |   9 +-
 .../operations/UBrowserNamedParamList.vue     |  35 +-
 .../ubrowser/operations/UBrowserOperation.vue | 231 +++----
 .../ubrowser/operations/UBrowserSelect.vue    |  43 --
 .../ubrowser/operations/UBrowserTextarea.vue  |  38 --
 src/js/composer/customComponentGuide.js       |   1 +
 src/js/composer/generateUBrowserCode.js       | 619 ++++++++++--------
 src/js/composer/ubrowserConfig.js             | 154 ++++-
 18 files changed, 857 insertions(+), 843 deletions(-)
 delete mode 100644 src/components/composer/ubrowser/operations/UBrowserButtonToggle.vue
 delete mode 100644 src/components/composer/ubrowser/operations/UBrowserCheckbox.vue
 delete mode 100644 src/components/composer/ubrowser/operations/UBrowserCheckboxGroup.vue
 delete mode 100644 src/components/composer/ubrowser/operations/UBrowserDeviceSize.vue
 delete mode 100644 src/components/composer/ubrowser/operations/UBrowserSelect.vue
 delete mode 100644 src/components/composer/ubrowser/operations/UBrowserTextarea.vue

diff --git a/src/components/composer/ubrowser/UBrowserBasic.vue b/src/components/composer/ubrowser/UBrowserBasic.vue
index a3025ff..ec64bbd 100644
--- a/src/components/composer/ubrowser/UBrowserBasic.vue
+++ b/src/components/composer/ubrowser/UBrowserBasic.vue
@@ -33,7 +33,8 @@
             </div>
             <div class="col-auto">
               <q-select
-                v-model="selectedUA"
+                :model-value="selectedUA"
+                @update:model-value="handleUAChange"
                 :options="userAgentOptions"
                 label="常用 UA"
                 dense
@@ -66,11 +67,11 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
-import { defaultUBrowserConfigs } from "js/composer/ubrowserConfig";
+import { defineComponent, ref, computed } from "vue";
 import { userAgent } from "js/options/httpOptions";
 import VariableInput from "components/composer/ui/VariableInput.vue";
 import NumberInput from "components/composer/ui/NumberInput.vue";
+
 export default defineComponent({
   name: "UBrowserBasic",
   components: {
@@ -83,37 +84,47 @@ export default defineComponent({
       required: true,
     },
   },
-  data() {
-    return {
-      selectedUA: null,
-      localConfigs: defaultUBrowserConfigs.goto,
-      userAgentOptions: userAgent,
-    };
-  },
-  created() {
-    // 初始化本地配置
-    this.localConfigs = window.lodashM.cloneDeep(this.configs);
-  },
-  methods: {
-    updateConfigs() {
-      this.$emit("update:configs", window.lodashM.cloneDeep(this.localConfigs));
-    },
-  },
-  watch: {
-    configs: {
-      deep: true,
-      handler(newConfigs) {
-        this.localConfigs = window.lodashM.cloneDeep(newConfigs);
+  emits: ["update:configs"],
+  setup(props, { emit }) {
+    const selectedUA = ref(null);
+
+    // 使用 computed 处理配置
+    const localConfigs = computed({
+      get: () => props.configs,
+      set: (val) => {
+        emit("update:configs", val);
       },
-    },
-    selectedUA(value) {
-      if (value) {
-        this.localConfigs.goto.headers.userAgent.value = value;
-        this.localConfigs.goto.headers.userAgent.isString = true;
-        this.updateConfigs();
-        this.selectedUA = null;
+    });
+
+    // 更新配置
+    const updateConfigs = () => {
+      emit("update:configs", localConfigs.value);
+    };
+
+    // 处理 UA 选择
+    const handleUAChange = (val) => {
+      if (!val) return;
+
+      const newConfigs = window.lodashM.cloneDeep(props.configs);
+      if (!newConfigs.goto.headers) {
+        newConfigs.goto.headers = {};
       }
-    },
+      newConfigs.goto.headers.userAgent = {
+        value: val,
+        isString: true,
+        __varInputVal__: true,
+      };
+      emit("update:configs", newConfigs);
+      selectedUA.value = null;
+    };
+
+    return {
+      selectedUA,
+      localConfigs,
+      userAgentOptions: userAgent,
+      updateConfigs,
+      handleUAChange,
+    };
   },
 });
 </script>
diff --git a/src/components/composer/ubrowser/UBrowserEditor.vue b/src/components/composer/ubrowser/UBrowserEditor.vue
index 0a504e2..944b6dc 100644
--- a/src/components/composer/ubrowser/UBrowserEditor.vue
+++ b/src/components/composer/ubrowser/UBrowserEditor.vue
@@ -15,7 +15,7 @@
     </q-tabs>
 
     <!-- 内容区域 -->
-    <q-tab-panels v-model="step" animated swipeable class="ubrowser-panels">
+    <q-tab-panels v-model="step" class="ubrowser-panels">
       <q-tab-panel name="1" class="panel-content">
         <UBrowserBasic :configs="configs" @update:configs="updateConfigs" />
       </q-tab-panel>
@@ -23,8 +23,9 @@
       <q-tab-panel name="2" class="panel-content">
         <UBrowserOperations
           :configs="configs"
+          :selected-actions="selectedActions"
           @update:configs="updateConfigs"
-          v-model:selected-actions="selectedActions"
+          @update:selected-actions="(val) => (selectedActions = val)"
           @remove-action="removeAction"
         />
       </q-tab-panel>
@@ -37,7 +38,7 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, ref, computed } from "vue";
 import UBrowserBasic from "./UBrowserBasic.vue";
 import UBrowserOperations from "./UBrowserOperations.vue";
 import UBrowserRun from "./UBrowserRun.vue";
@@ -53,117 +54,115 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: String,
-      default: "",
+      type: Object,
+      required: true,
     },
   },
   emits: ["update:modelValue"],
-  data() {
-    return {
-      step: "1",
-      selectedActions: [],
-      configs: window.lodashM.cloneDeep(defaultUBrowserConfigs),
+  setup(props, { emit }) {
+    // 基础状态
+    const step = ref("1");
+    const selectedActions = ref([]);
+
+    // 初始化配置，确保包含 run 参数
+    const localConfigs = ref(window.lodashM.cloneDeep(defaultUBrowserConfigs));
+    if (props.modelValue?.argvs) {
+      // 合并配置，保留默认的 run 参数
+      localConfigs.value = {
+        ...localConfigs.value,
+        ...props.modelValue.argvs,
+        run: {
+          ...localConfigs.value.run,
+          ...props.modelValue.argvs.run,
+        },
+      };
+    }
+
+    // 计算 argvs
+    const argvs = computed({
+      get: () => localConfigs.value,
+      set: (val) => {
+        // 确保保留 run 参数
+        const newConfigs = {
+          ...val,
+          run: {
+            ...localConfigs.value.run,
+            ...val.run,
+          },
+        };
+        localConfigs.value = newConfigs;
+        emit("update:modelValue", {
+          ...props.modelValue,
+          argvs: newConfigs,
+          code: generateUBrowserCode(newConfigs, selectedActions.value),
+        });
+      },
+    });
+
+    // 更新配置
+    const updateConfigs = (newConfigs) => {
+      argvs.value = window.lodashM.cloneDeep(newConfigs);
     };
-  },
-  methods: {
-    updateConfigs(newConfigs) {
-      this.configs = newConfigs;
-    },
-    removeAction(action) {
-      const newActions = this.selectedActions.filter((a) => a.id !== action.id);
-      this.selectedActions = newActions;
-      const newConfigs = { ...this.configs };
+
+    // 移除操作
+    const removeAction = (action) => {
+      selectedActions.value = selectedActions.value.filter(
+        (a) => a.id !== action.id
+      );
+      const newConfigs = { ...argvs.value };
       delete newConfigs[action.value];
-      this.configs = newConfigs;
-    },
-  },
-  watch: {
-    configs: {
-      deep: true,
-      handler() {
-        this.$emit(
-          "update:modelValue",
-          generateUBrowserCode(this.configs, this.selectedActions)
-        );
-      },
-    },
-    selectedActions: {
-      handler() {
-        this.$emit(
-          "update:modelValue",
-          generateUBrowserCode(this.configs, this.selectedActions)
-        );
-      },
-    },
-    step: {
-      handler() {
-        this.$emit(
-          "update:modelValue",
-          generateUBrowserCode(this.configs, this.selectedActions)
-        );
-      },
-    },
+      argvs.value = newConfigs;
+    };
+
+    return {
+      step,
+      selectedActions,
+      configs: argvs,
+      updateConfigs,
+      removeAction,
+    };
   },
 });
 </script>
 
-<style scoped>
+<style>
 .ubrowser-editor {
-  width: 100%;
   display: flex;
   flex-direction: column;
   height: 100%;
-  min-height: 0;
+  width: 100%;
 }
 
 .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;
-}
-
-
-/* 调整面板内边距和布局 */
-.ubrowser-panels :deep(.q-tab-panel) {
-  padding: 8px;
-  height: 100%;
-  min-height: 0;
-}
-
-/* 面板内容区域 */
-.panel-content {
-  height: 100%;
   overflow: auto;
 }
 
-/* 调整标签页样式 */
+.panel-content {
+  padding: 16px;
+  min-height: 200px;
+}
+
+.ubrowser-panels :deep(.q-tab-panel) {
+  padding: 0;
+}
+
 .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;
+  min-height: 40px;
+  padding: 0 16px;
 }
 
 .ubrowser-tabs :deep(.q-tab__icon) {
-  font-size: 16px;
-  margin: 0;
+  font-size: 20px;
+}
+
+.ubrowser-tabs :deep(.q-tab__label) {
+  font-size: 14px;
+  line-height: 1.2;
+  margin-left: 8px;
 }
 </style>
diff --git a/src/components/composer/ubrowser/UBrowserOperations.vue b/src/components/composer/ubrowser/UBrowserOperations.vue
index e3cd92e..602ab1f 100644
--- a/src/components/composer/ubrowser/UBrowserOperations.vue
+++ b/src/components/composer/ubrowser/UBrowserOperations.vue
@@ -106,20 +106,21 @@ export default defineComponent({
       required: true,
     },
   },
-  data() {
+  emits: ["remove-action", "update:selectedActions", "update:configs"],
+  setup() {
     return {
-      ubrowserOperationConfigs: ubrowserOperationConfigs,
+      ubrowserOperationConfigs,
     };
   },
-  emits: ["remove-action", "update:selectedActions", "update:configs"],
   methods: {
     moveAction(index, direction) {
       const newIndex = index + direction;
       if (newIndex >= 0 && newIndex < this.selectedActions.length) {
         const actions = [...this.selectedActions];
-        const temp = actions[index];
-        actions[index] = actions[newIndex];
-        actions[newIndex] = temp;
+        [actions[index], actions[newIndex]] = [
+          actions[newIndex],
+          actions[index],
+        ];
         this.$emit("update:selectedActions", actions);
       }
     },
@@ -127,19 +128,22 @@ export default defineComponent({
       const index = this.selectedActions.findIndex(
         (a) => a.value === action.value
       );
+
       if (index === -1) {
         // 添加操作
+        const newAction = {
+          ...action,
+          id: this.$root.getUniqueId(),
+          argv: "",
+          saveOutput: false,
+          useOutput: null,
+          cmd: action.value || action.cmd,
+          value: action.value || action.cmd,
+        };
+
         this.$emit("update:selectedActions", [
           ...this.selectedActions,
-          {
-            ...action,
-            id: this.$root.getUniqueId(),
-            argv: "",
-            saveOutput: false,
-            useOutput: null,
-            cmd: action.value || action.cmd,
-            value: action.value || action.cmd,
-          },
+          newAction,
         ]);
 
         // 初始化配置对象
@@ -148,14 +152,14 @@ export default defineComponent({
           const newConfigs = { ...this.configs };
           if (!newConfigs[action.value]) {
             newConfigs[action.value] = {};
+            // 设置默认值
+            config.forEach((field) => {
+              if (field.defaultValue !== undefined) {
+                newConfigs[action.value][field.key] = field.defaultValue;
+              }
+            });
+            this.$emit("update:configs", newConfigs);
           }
-          // 设置默认值
-          config.forEach((field) => {
-            if (field.defaultValue !== undefined) {
-              newConfigs[action.value][field.key] = field.defaultValue;
-            }
-          });
-          this.$emit("update:configs", newConfigs);
         }
       } else {
         // 移除操作
@@ -167,7 +171,7 @@ export default defineComponent({
     getActionProps(action, key) {
       return this.ubrowserOperationConfigs.find(
         (a) => a.value === action.value
-      )[key];
+      )?.[key];
     },
   },
 });
diff --git a/src/components/composer/ubrowser/UBrowserRun.vue b/src/components/composer/ubrowser/UBrowserRun.vue
index f594389..71ad773 100644
--- a/src/components/composer/ubrowser/UBrowserRun.vue
+++ b/src/components/composer/ubrowser/UBrowserRun.vue
@@ -155,7 +155,7 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, ref, computed } from "vue";
 import NumberInput from "components/composer/ui/NumberInput.vue";
 
 export default defineComponent({
@@ -170,24 +170,24 @@ export default defineComponent({
     },
   },
   emits: ["update:configs"],
-  data() {
-    return {
-      localConfigs: window.lodashM.cloneDeep(this.configs),
+  setup(props, { emit }) {
+    const localConfigs = ref(window.lodashM.cloneDeep(props.configs));
+
+    // 监听 configs 变化
+    const watchConfigs = computed(() => props.configs);
+    watchConfigs.value &&
+      (localConfigs.value = window.lodashM.cloneDeep(props.configs));
+
+    // 更新配置
+    const updateConfig = (key, value) => {
+      localConfigs.value.run[key] = value;
+      emit("update:configs", window.lodashM.cloneDeep(localConfigs.value));
+    };
+
+    return {
+      localConfigs,
+      updateConfig,
     };
-  },
-  methods: {
-    updateConfig(key, value) {
-      this.localConfigs.run[key] = value;
-      this.$emit("update:configs", window.lodashM.cloneDeep(this.localConfigs));
-    },
-  },
-  watch: {
-    configs: {
-      deep: true,
-      handler(newConfigs) {
-        this.localConfigs = window.lodashM.cloneDeep(newConfigs);
-      },
-    },
   },
 });
 </script>
diff --git a/src/components/composer/ubrowser/operations/UBrowserButtonToggle.vue b/src/components/composer/ubrowser/operations/UBrowserButtonToggle.vue
deleted file mode 100644
index f4043bc..0000000
--- a/src/components/composer/ubrowser/operations/UBrowserButtonToggle.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div class="row items-center no-wrap">
-    <q-badge class="q-pa-xs">{{ label }}</q-badge>
-    <q-btn-toggle
-      :model-value="modelValue"
-      :options="options"
-      dense
-      flat
-      no-caps
-      spread
-      class="button-group"
-      @update:model-value="$emit('update:modelValue', $event)"
-    />
-  </div>
-</template>
-
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "UBrowserButtonToggle",
-  props: {
-    modelValue: {
-      type: [String, Number, Boolean],
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    options: {
-      type: Array,
-      required: true,
-    },
-  },
-  emits: ["update:modelValue"],
-});
-</script>
-
-<style scoped>
-.button-group {
-  flex: 1;
-  padding: 0 10px;
-}
-
-.button-group :deep(.q-btn) {
-  min-height: 24px;
-  font-size: 12px;
-}
-</style>
diff --git a/src/components/composer/ubrowser/operations/UBrowserCheckbox.vue b/src/components/composer/ubrowser/operations/UBrowserCheckbox.vue
deleted file mode 100644
index c368d48..0000000
--- a/src/components/composer/ubrowser/operations/UBrowserCheckbox.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="row items-center no-wrap">
-    <q-badge class="q-pa-xs">{{ label }}</q-badge>
-    <q-btn-toggle
-      :model-value="modelValue ? 'true' : 'false'"
-      :options="[
-        { label: '是', value: 'true' },
-        { label: '否', value: 'false' },
-      ]"
-      dense
-      flat
-      no-caps
-      spread
-      class="button-group"
-      @update:model-value="$emit('update:modelValue', $event === 'true')"
-    />
-  </div>
-</template>
-
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "UBrowserCheckbox",
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: ["update:modelValue"],
-});
-</script>
diff --git a/src/components/composer/ubrowser/operations/UBrowserCheckboxGroup.vue b/src/components/composer/ubrowser/operations/UBrowserCheckboxGroup.vue
deleted file mode 100644
index adb26f7..0000000
--- a/src/components/composer/ubrowser/operations/UBrowserCheckboxGroup.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="row items-center">
-    <q-option-group
-      :model-value="modelValue"
-      :options="options"
-      type="checkbox"
-      inline
-      dense
-      @update:model-value="$emit('update:modelValue', $event)"
-    />
-  </div>
-</template>
-
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "UBrowserCheckboxGroup",
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-    options: {
-      type: Array,
-      required: true,
-    },
-  },
-  emits: ["update:modelValue"],
-});
-</script>
diff --git a/src/components/composer/ubrowser/operations/UBrowserCookieList.vue b/src/components/composer/ubrowser/operations/UBrowserCookieList.vue
index 6be6450..e5d916d 100644
--- a/src/components/composer/ubrowser/operations/UBrowserCookieList.vue
+++ b/src/components/composer/ubrowser/operations/UBrowserCookieList.vue
@@ -11,7 +11,7 @@
             <VariableInput
               :model-value="cookie.name"
               label="名称"
-              :command="{ icon: 'label' }"
+              icon="label"
               @update:model-value="
                 (value) => handleUpdate(index, 'name', value)
               "
@@ -21,7 +21,7 @@
             <VariableInput
               :model-value="cookie.value"
               label="值"
-              :command="{ icon: 'edit' }"
+              icon="edit"
               @update:model-value="
                 (value) => handleUpdate(index, 'value', value)
               "
@@ -64,20 +64,58 @@ export default defineComponent({
   props: {
     modelValue: {
       type: Array,
-      default: () => [{ name: "", value: "" }],
+      default: () => [
+        {
+          name: {
+            value: "",
+            isString: true,
+            __varInputVal__: true,
+          },
+          value: {
+            value: "",
+            isString: true,
+            __varInputVal__: true,
+          },
+        },
+      ],
     },
   },
   emits: ["update:modelValue"],
   methods: {
     addCookie() {
-      const newValue = [...this.modelValue, { name: "", value: "" }];
+      const newValue = [
+        ...this.modelValue,
+        {
+          name: {
+            value: "",
+            isString: true,
+            __varInputVal__: true,
+          },
+          value: {
+            value: "",
+            isString: true,
+            __varInputVal__: true,
+          },
+        },
+      ];
       this.$emit("update:modelValue", newValue);
     },
     removeCookie(index) {
       const newValue = [...this.modelValue];
       newValue.splice(index, 1);
       if (newValue.length === 0) {
-        newValue.push({ name: "", value: "" });
+        newValue.push({
+          name: {
+            value: "",
+            isString: true,
+            __varInputVal__: true,
+          },
+          value: {
+            value: "",
+            isString: true,
+            __varInputVal__: true,
+          },
+        });
       }
       this.$emit("update:modelValue", newValue);
     },
diff --git a/src/components/composer/ubrowser/operations/UBrowserDeviceName.vue b/src/components/composer/ubrowser/operations/UBrowserDeviceName.vue
index c541d5b..342b2a8 100644
--- a/src/components/composer/ubrowser/operations/UBrowserDeviceName.vue
+++ b/src/components/composer/ubrowser/operations/UBrowserDeviceName.vue
@@ -2,7 +2,7 @@
   <div class="row q-col-gutter-sm">
     <div class="col">
       <VariableInput
-        :command="{ icon: icon }"
+        icon="label"
         :model-value="modelValue"
         :label="label"
         @update:model-value="$emit('update:modelValue', $event)"
@@ -41,8 +41,12 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: String,
-      default: "",
+      type: Object,
+      default: () => ({
+        value: "",
+        isString: true,
+        __varInputVal__: true,
+      }),
     },
     label: {
       type: String,
diff --git a/src/components/composer/ubrowser/operations/UBrowserDeviceSize.vue b/src/components/composer/ubrowser/operations/UBrowserDeviceSize.vue
deleted file mode 100644
index c10d3ca..0000000
--- a/src/components/composer/ubrowser/operations/UBrowserDeviceSize.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <div class="row q-col-gutter-sm">
-    <div class="col-6">
-      <VariableInput
-        v-model.number="size.width"
-        label="宽度"
-        :command="{ icon: 'width', inputType: 'number' }"
-        @update:model-value="handleUpdate"
-      />
-    </div>
-    <div class="col-6">
-      <VariableInput
-        v-model.number="size.height"
-        label="高度"
-        :command="{ icon: 'height', inputType: 'number' }"
-        @update:model-value="handleUpdate"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from "vue";
-import VariableInput from "components/composer/ui/VariableInput.vue";
-
-export default defineComponent({
-  name: "UBrowserDeviceSize",
-  components: {
-    VariableInput,
-  },
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => ({ width: 0, height: 0 }),
-    },
-  },
-  emits: ["update:modelValue"],
-  data() {
-    return {
-      size: {
-        width: this.modelValue.width,
-        height: this.modelValue.height,
-      },
-    };
-  },
-  methods: {
-    handleUpdate() {
-      this.$emit("update:modelValue", { ...this.size });
-    },
-  },
-  watch: {
-    modelValue: {
-      deep: true,
-      handler(newValue) {
-        this.size = { ...newValue };
-      },
-    },
-  },
-});
-</script>
diff --git a/src/components/composer/ubrowser/operations/UBrowserFileList.vue b/src/components/composer/ubrowser/operations/UBrowserFileList.vue
index d307be2..ce8f1de 100644
--- a/src/components/composer/ubrowser/operations/UBrowserFileList.vue
+++ b/src/components/composer/ubrowser/operations/UBrowserFileList.vue
@@ -58,7 +58,14 @@ export default defineComponent({
   emits: ["update:modelValue"],
   methods: {
     addFile() {
-      const newValue = [...(this.modelValue || []), ""];
+      const newValue = [
+        ...(this.modelValue || []),
+        {
+          value: "",
+          isString: true,
+          __varInputVal__: true,
+        },
+      ];
       this.$emit("update:modelValue", newValue);
     },
     removeFile(index) {
diff --git a/src/components/composer/ubrowser/operations/UBrowserNamedParamList.vue b/src/components/composer/ubrowser/operations/UBrowserNamedParamList.vue
index a498b3b..dec538e 100644
--- a/src/components/composer/ubrowser/operations/UBrowserNamedParamList.vue
+++ b/src/components/composer/ubrowser/operations/UBrowserNamedParamList.vue
@@ -10,7 +10,7 @@
         <VariableInput
           :model-value="param.name"
           label="参数名"
-          :command="{ icon: 'label' }"
+          icon="label"
           @update:model-value="(value) => handleUpdate(index, 'name', value)"
         />
       </div>
@@ -18,7 +18,7 @@
         <VariableInput
           :model-value="param.value"
           label="传递给参数的值"
-          :command="{ icon: 'edit' }"
+          icon="edit"
           @update:model-value="(value) => handleUpdate(index, 'value', value)"
         />
       </div>
@@ -56,14 +56,41 @@ export default defineComponent({
   props: {
     modelValue: {
       type: Array,
-      default: () => [{ name: "", value: "" }],
+      default: () => [
+        {
+          name: {
+            value: "",
+            isString: true,
+            __varInputVal__: true,
+          },
+          value: {
+            value: "",
+            isString: true,
+            __varInputVal__: true,
+          },
+        },
+      ],
     },
     label: String,
   },
   emits: ["update:modelValue"],
   methods: {
     addParam() {
-      const newValue = [...(this.modelValue || []), { name: "", value: "" }];
+      const newValue = [
+        ...(this.modelValue || []),
+        {
+          name: {
+            value: "",
+            isString: true,
+            __varInputVal__: true,
+          },
+          value: {
+            value: "",
+            isString: true,
+            __varInputVal__: true,
+          },
+        },
+      ];
       this.$emit("update:modelValue", newValue);
     },
     removeParam(index) {
diff --git a/src/components/composer/ubrowser/operations/UBrowserOperation.vue b/src/components/composer/ubrowser/operations/UBrowserOperation.vue
index 91bbd65..1c134a6 100644
--- a/src/components/composer/ubrowser/operations/UBrowserOperation.vue
+++ b/src/components/composer/ubrowser/operations/UBrowserOperation.vue
@@ -7,20 +7,37 @@
       >
         <!-- 复选框组 -->
         <template v-if="field.type === 'checkbox-group'">
-          <UBrowserCheckboxGroup
-            v-model="fieldValue[field.key]"
+          <q-option-group
+            :model-value="
+              Array.isArray(fieldValue[field.key]) ? fieldValue[field.key] : []
+            "
             :options="field.options"
+            type="checkbox"
+            class="row items-center"
+            inline
+            dense
             @update:model-value="updateValue(field.key, $event)"
           />
         </template>
 
-        <!-- 单个复选框 -->
-        <template v-else-if="field.type === 'checkbox'">
-          <UBrowserCheckbox
-            v-model="fieldValue[field.key]"
-            :label="field.label"
-            @update:model-value="updateValue(field.key, $event)"
-          />
+        <!-- 是/否选择 -->
+        <template v-else-if="field.type === 'boolean-toggle'">
+          <div class="row items-center no-wrap">
+            <q-badge class="q-pa-xs">{{ field.label }}</q-badge>
+            <q-btn-toggle
+              :model-value="fieldValue[field.key] ? 'true' : 'false'"
+              :options="[
+                { label: '是', value: 'true' },
+                { label: '否', value: 'false' },
+              ]"
+              dense
+              flat
+              no-caps
+              spread
+              class="button-group"
+              @update:model-value="updateValue(field.key, $event === 'true')"
+            />
+          </div>
         </template>
 
         <!-- 基本输入类型的处理 -->
@@ -37,12 +54,9 @@
           <!-- 普通输入框 -->
           <template v-else>
             <VariableInput
-              v-model="fieldValue[field.key]"
+              :model-value="fieldValue[field.key]"
               :label="field.label"
-              :command="{
-                icon: field.icon,
-                inputType: field.inputType,
-              }"
+              :icon="field.icon"
               @update:model-value="updateValue(field.key, $event)"
             />
           </template>
@@ -51,16 +65,6 @@
         <!-- 数字输入框 -->
         <template v-else-if="field.type === 'numInput'">
           <NumberInput
-            v-model="fieldValue[field.key]"
-            :label="field.label"
-            :command="{ icon: field.icon }"
-            @update:model-value="updateValue(field.key, $event)"
-          />
-        </template>
-
-        <!-- 文本区域 -->
-        <template v-else-if="field.type === 'textarea'">
-          <UBrowserTextarea
             v-model="fieldValue[field.key]"
             :label="field.label"
             :icon="field.icon"
@@ -70,13 +74,20 @@
 
         <!-- 选择框 -->
         <template v-else-if="field.type === 'select'">
-          <UBrowserSelect
-            v-model="fieldValue[field.key]"
+          <q-select
+            :model-value="fieldValue[field.key]"
             :label="field.label"
-            :icon="field.icon"
             :options="field.options"
+            dense
+            filled
+            emit-value
+            map-options
             @update:model-value="updateValue(field.key, $event)"
-          />
+          >
+            <template v-slot:prepend>
+              <q-icon :name="field.icon" />
+            </template>
+          </q-select>
         </template>
 
         <!-- Cookie列表 -->
@@ -106,20 +117,39 @@
 
         <!-- 按钮组 -->
         <template v-else-if="field.type === 'button-toggle'">
-          <UBrowserButtonToggle
-            v-model="fieldValue[field.key]"
-            :label="field.label"
-            :options="field.options"
-            @update:model-value="updateValue(field.key, $event)"
-          />
+          <div class="row items-center no-wrap">
+            <q-badge class="q-pa-xs">{{ field.label }}</q-badge>
+            <q-btn-toggle
+              :model-value="fieldValue[field.key]"
+              :options="field.options"
+              dense
+              flat
+              no-caps
+              spread
+              class="button-group"
+              @update:model-value="updateValue(field.key, $event)"
+            />
+          </div>
         </template>
 
         <!-- 设备尺寸 -->
         <template v-else-if="field.type === 'device-size'">
-          <UBrowserDeviceSize
-            v-model="fieldValue.size"
-            @update:model-value="updateValue(field.key, $event)"
-          />
+          <div class="row q-col-gutter-sm">
+            <VariableInput
+              v-model.number="fieldValue.size[key]"
+              class="col-6"
+              v-for="key in ['width', 'height']"
+              :key="key"
+              label="宽度"
+              icon="width"
+              @update:model-value="
+                updateValue(field.key, {
+                  ...fieldValue.size,
+                  [key]: $event,
+                })
+              "
+            />
+          </div>
         </template>
 
         <!-- 带参数的函数输入 -->
@@ -139,36 +169,25 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, computed, ref, onMounted } from "vue";
 import { get, set } from "lodash";
 import UBrowserFunctionInput from "./UBrowserFunctionInput.vue";
-import UBrowserCheckbox from "./UBrowserCheckbox.vue";
 import UBrowserFileList from "./UBrowserFileList.vue";
 import UBrowserCookieList from "./UBrowserCookieList.vue";
-import UBrowserButtonToggle from "./UBrowserButtonToggle.vue";
-import UBrowserDeviceSize from "./UBrowserDeviceSize.vue";
 import UBrowserNamedParamList from "./UBrowserNamedParamList.vue";
-import UBrowserSelect from "./UBrowserSelect.vue";
 import UBrowserDeviceName from "./UBrowserDeviceName.vue";
-import UBrowserTextarea from "./UBrowserTextarea.vue";
 import VariableInput from "components/composer/ui/VariableInput.vue";
-import UBrowserCheckboxGroup from "./UBrowserCheckboxGroup.vue";
 import NumberInput from "components/composer/ui/NumberInput.vue";
+
 export default defineComponent({
   name: "UBrowserOperation",
   components: {
     UBrowserFunctionInput,
-    UBrowserCheckbox,
     UBrowserFileList,
     UBrowserCookieList,
-    UBrowserButtonToggle,
-    UBrowserDeviceSize,
     UBrowserNamedParamList,
-    UBrowserSelect,
     UBrowserDeviceName,
-    UBrowserTextarea,
     VariableInput,
-    UBrowserCheckboxGroup,
     NumberInput,
   },
   props: {
@@ -186,70 +205,62 @@ export default defineComponent({
     },
   },
   emits: ["update:configs"],
-  data() {
-    return {
-      fieldValue: {},
-    };
-  },
-  created() {
-    // 初始化字段值，确保有默认值
-    this.fields.forEach((field) => {
-      const value = get(this.configs[this.action], field.key);
-      // 根据字段类型设置适当的默认值
-      let defaultValue;
-      if (field.type === "checkbox-group") {
-        defaultValue = field.defaultValue || [];
-      } else if (field.type === "checkbox") {
-        defaultValue = field.defaultValue || false;
-      } else if (field.type === "function-with-params") {
-        // 为function-with-params类型设置特殊的默认值结构
-        this.fieldValue.function = value?.function || "";
-        this.fieldValue.args = value?.args || [];
-        return; // 跳过后续的赋值
-      } else {
-        defaultValue = field.defaultValue;
-      }
-      this.fieldValue[field.key] = value !== undefined ? value : defaultValue;
+  setup(props, { emit }) {
+    const fieldValue = ref({});
+
+    // 初始化字段值
+    onMounted(() => {
+      props.fields.forEach((field) => {
+        const value = get(props.configs[props.action], field.key);
+        // 根据字段类型设置适当的默认值
+        if (field.type === "function-with-params") {
+          fieldValue.value.function = value?.function || "";
+          fieldValue.value.args = value?.args || [];
+          return;
+        }
+
+        const defaultValue =
+          field.type === "checkbox-group"
+            ? []
+            : field.type === "checkbox"
+            ? field.defaultValue || false
+            : field.defaultValue;
+
+        fieldValue.value[field.key] = Array.isArray(value)
+          ? value
+          : defaultValue;
+      });
     });
-  },
-  methods: {
-    updateValue(key, value) {
-      // 更新本地值
-      this.fieldValue[key] = value;
 
-      // 创建新的配置对
-      const newConfigs = { ...this.configs };
-      if (!newConfigs[this.action]) {
-        newConfigs[this.action] = {};
+    // 更新值的方法
+    const updateValue = (key, value) => {
+      fieldValue.value[key] = value;
+
+      const newConfigs = { ...props.configs };
+      if (!newConfigs[props.action]) {
+        newConfigs[props.action] = {};
       }
 
-      // 使用 lodash 的 set 来处理嵌套路径
-      set(newConfigs[this.action], key, value);
+      set(newConfigs[props.action], key, value);
+      emit("update:configs", newConfigs);
+    };
 
-      // 发出更新事件
-      this.$emit("update:configs", newConfigs);
-    },
-  },
-  watch: {
-    // 监听配置变化
-    configs: {
-      deep: true,
-      handler() {
-        this.fields.forEach((field) => {
-          const value = get(this.configs[this.action], field.key);
-          if (field.type === "function-with-params") {
-            // 为function-with-params类型设置特殊的更新逻辑
-            this.fieldValue.function =
-              value?.function || this.fieldValue.function || "";
-            this.fieldValue.args = value?.args || this.fieldValue.args || [];
-            return;
-          }
-          if (value !== undefined) {
-            this.fieldValue[field.key] = value;
-          }
-        });
-      },
-    },
+    return {
+      fieldValue,
+      updateValue,
+    };
   },
 });
 </script>
+
+<style scoped>
+.button-group {
+  flex: 1;
+  padding: 0 10px;
+}
+
+.button-group :deep(.q-btn) {
+  min-height: 24px;
+  font-size: 12px;
+}
+</style>
diff --git a/src/components/composer/ubrowser/operations/UBrowserSelect.vue b/src/components/composer/ubrowser/operations/UBrowserSelect.vue
deleted file mode 100644
index 0e9a1de..0000000
--- a/src/components/composer/ubrowser/operations/UBrowserSelect.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <q-select
-    :model-value="modelValue"
-    :label="label"
-    :options="options"
-    dense
-    filled
-    emit-value
-    map-options
-    @update:model-value="$emit('update:modelValue', $event)"
-  >
-    <template v-slot:prepend>
-      <q-icon :name="icon" />
-    </template>
-  </q-select>
-</template>
-
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "UBrowserSelect",
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: "",
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    options: {
-      type: Array,
-      required: true,
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-  },
-  emits: ["update:modelValue"],
-});
-</script>
diff --git a/src/components/composer/ubrowser/operations/UBrowserTextarea.vue b/src/components/composer/ubrowser/operations/UBrowserTextarea.vue
deleted file mode 100644
index 6cc6662..0000000
--- a/src/components/composer/ubrowser/operations/UBrowserTextarea.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <q-input
-    :model-value="modelValue"
-    :label="label"
-    type="textarea"
-    dense
-    filled
-    autogrow
-    @update:model-value="$emit('update:modelValue', $event)"
-  >
-    <template v-slot:prepend>
-      <q-icon :name="icon" />
-    </template>
-  </q-input>
-</template>
-
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "UBrowserTextarea",
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-  },
-  emits: ["update:modelValue"],
-});
-</script>
diff --git a/src/js/composer/customComponentGuide.js b/src/js/composer/customComponentGuide.js
index 5010d3a..cf857ba 100644
--- a/src/js/composer/customComponentGuide.js
+++ b/src/js/composer/customComponentGuide.js
@@ -4,6 +4,7 @@
  */
 const customComponentGuide = {
   description: "创建自定义命令组件的完整流程",
+  important: "创建过程中严禁删除、修改任何已有的函数或对象",
   steps: {
     "1. Backend Interface": {
       location: "plugin/lib/quickcomposer/xxx/yyy.js",
diff --git a/src/js/composer/generateUBrowserCode.js b/src/js/composer/generateUBrowserCode.js
index 3bd54ed..dd285e3 100644
--- a/src/js/composer/generateUBrowserCode.js
+++ b/src/js/composer/generateUBrowserCode.js
@@ -4,285 +4,358 @@
  * @param {Array} selectedActions 已选择的操作列表
  * @returns {string} 生成的代码
  */
-import { defaultUBrowserConfigs } from "js/composer/ubrowserConfig";
+import { stringifyObject, stringifyWithType } from "./formatString";
 
-export function generateUBrowserCode(configs, selectedActions) {
-  let code = "utools.ubrowser";
+// 生成 goto 参数字符串
+function generateGotoArgs(goto) {
+  const args = [];
 
-  // 基础参数
-  // if (configs.useragent.value) {
-  //   code += `\n  .useragent('${configs.useragent.value}')`;
-  // }
+  // URL
+  const urlStr = stringifyWithType(goto.url);
+  args.push(urlStr);
 
-  if (configs.goto.url) {
-    let gotoOptionsStr = `\n  .goto(\n`;
-    gotoOptionsStr += `${configs.goto.url}`;
-
-    if (configs.goto.headers.Referer || configs.goto.headers.userAgent) {
-      gotoOptionsStr += ",\n{";
-      if (configs.goto.headers.Referer) {
-        gotoOptionsStr += `\nReferer: ${configs.goto.headers.Referer}`;
-      }
-      if (configs.goto.headers.userAgent) {
-        gotoOptionsStr += `${
-          configs.goto.headers.Referer ? "," : ""
-        }\nuserAgent: ${configs.goto.headers.userAgent}`;
-      }
-      gotoOptionsStr += "\n}";
+  // Headers
+  if (goto.headers?.Referer?.value || goto.headers?.userAgent?.value) {
+    const headers = {};
+    if (goto.headers.Referer?.value) {
+      headers.Referer = goto.headers.Referer;
     }
-
-    if (configs.goto.timeout !== 60000) {
-      gotoOptionsStr += `,\n${configs.goto.timeout}`;
+    if (goto.headers.userAgent?.value) {
+      headers.userAgent = goto.headers.userAgent;
     }
-
-    gotoOptionsStr += "\n)";
-    code += gotoOptionsStr;
+    console.log("Headers:", JSON.stringify(headers, null, 2));
+    args.push(stringifyObject(headers, true));
   }
 
-  // 浏览器操作
-  selectedActions.forEach((action) => {
-    const config = configs[action.value];
-    switch (action.value) {
-      case "wait":
-        if (config.type === "time" && config.time) {
-          code += `\n  .wait(${config.time})`;
-        } else if (config.type === "selector" && config.selector) {
-          code += `\n  .wait(${config.selector}${
-            config.timeout !== 60000 ? `, ${config.timeout}` : ""
-          })`;
-        } else if (config.type === "function" && config.function) {
-          const functionBody = config.function.trim();
-          if (config.args?.length) {
-            const params = config.args.map((arg) => arg.name).join(", ");
-            const functionCode = `(${params}) => {\n ${functionBody} \n}`;
-            const args = `, ${config.timeout || 60000}, ${config.args
-              .map((arg) => JSON.stringify(arg.value))
-              .join(", ")}`;
-            code += `\n  .wait(${functionCode}${args})`;
-          } else {
-            const functionCode = `() => {\n ${functionBody} \n}`;
-            code += `\n  .wait(${functionCode}${
-              config.timeout !== 60000 ? `, ${config.timeout}` : ""
-            })`;
-          }
-        }
-        break;
+  // Timeout
+  if (goto.timeout !== 60000) {
+    args.push(goto.timeout);
+  }
 
-      case "click":
-        if (config.selector) {
-          code += `\n  .click(${config.selector})`;
-        }
-        break;
-
-      case "css":
-        if (config.value) {
-          code += `\n  .css(${config.value})`;
-        }
-        break;
-
-      case "press":
-        if (config.key) {
-          const modifiers = config.modifiers.length
-            ? `, ${JSON.stringify(config.modifiers)}`
-            : "";
-          code += `\n  .press(${config.key}${modifiers})`;
-        }
-        break;
-
-      case "paste":
-        if (config.text) {
-          code += `\n  .paste(${config.text})`;
-        }
-        break;
-
-      case "screenshot":
-        if (config.selector) {
-          code += `\n  .screenshot(${config.selector}${
-            config.savePath ? `, '${config.savePath}'` : ""
-          })`;
-        } else if (config.rect) {
-          code += `\n  .screenshot(${JSON.stringify(config.rect)}${
-            config.savePath ? `, ${config.savePath}` : ""
-          })`;
-        }
-        break;
-
-      case "pdf":
-        if (config.savePath) {
-          code += `\n  .pdf(${config.savePath}${
-            config.options ? `, ${JSON.stringify(config.options)}` : ""
-          })`;
-        }
-        break;
-
-      case "device":
-        if (config.type === "preset" && config.deviceName) {
-          code += `\n  .device(${config.deviceName})`;
-        } else if (config.type === "custom") {
-          let deviceOptionsStr = `\n  .device(\n{`;
-          if (config.size) {
-            deviceOptionsStr += `\nsize: ${JSON.stringify(config.size)}`;
-          }
-          if (config.useragent) {
-            deviceOptionsStr += `${config.size ? "," : ""}\nuserAgent: ${
-              config.useragent
-            }`;
-          }
-          deviceOptionsStr += "\n}";
-          code += deviceOptionsStr + "\n)";
-        }
-        break;
-
-      case "cookies":
-        if (config.name) {
-          code += `\n  .cookies(${config.name})`;
-        } else {
-          code += `\n  .cookies()`;
-        }
-        break;
-
-      case "setCookies":
-        if (config.items?.length) {
-          let cookiesStr = `\n  .setCookies([\n`;
-          config.items.forEach((item, index) => {
-            cookiesStr += "    {";
-            if (item.name) cookiesStr += `\n      name: ${item.name}`;
-            if (item.value)
-              cookiesStr += `${item.name ? "," : ""}\n      value: ${
-                item.value
-              }}`;
-            if (index < config.items.length - 1) cookiesStr += ",";
-            cookiesStr += "\n";
-          });
-          cookiesStr += "  ])";
-          code += cookiesStr;
-        }
-        break;
-
-      case "removeCookies":
-        if (config.name) {
-          code += `\n  .removeCookies(${config.name})`;
-        }
-        break;
-
-      case "clearCookies":
-        code += `\n  .clearCookies(${config.url || ""})`;
-        break;
-
-      case "evaluate":
-        if (config.function) {
-          const functionBody = config.function.trim();
-          if (config.args?.length) {
-            const params = config.args.map((arg) => arg.name).join(", ");
-            const functionCode = `(${params}) => {\n ${functionBody} \n}`;
-            const args = `, ${config.args
-              .map((arg) => JSON.stringify(arg.value))
-              .join(", ")}`;
-            code += `\n  .evaluate(${functionCode}${args})`;
-          } else {
-            const functionCode = `() => {\n ${functionBody} \n}`;
-            code += `\n  .evaluate(${functionCode})`;
-          }
-        }
-        break;
-
-      case "when":
-        if (config.condition) {
-          code += `\n  .when(${config.condition})`;
-        }
-        break;
-
-      case "mousedown":
-      case "mouseup":
-        if (config.selector) {
-          code += `\n  .${action.value}(${config.selector})`;
-        }
-        break;
-
-      case "file":
-        if (config.selector && config.files?.length) {
-          let filesStr = `\n  .file(${config.selector}, [\n`;
-          config.files.forEach((file, index) => {
-            filesStr += `    ${file}`;
-            if (index < config.files.length - 1) filesStr += ",\n";
-          });
-          filesStr += "\n  ])";
-          code += filesStr;
-        }
-        break;
-
-      case "value":
-        if (config.selector) {
-          code += `\n  .value(${config.selector}, ${config.value})`;
-        }
-        break;
-
-      case "check":
-        if (config.selector) {
-          code += `\n  .check(${config.selector}${
-            config.checked !== undefined ? `, ${config.checked}` : ""
-          })`;
-        }
-        break;
-
-      case "focus":
-        if (config.selector) {
-          code += `\n  .focus(${config.selector})`;
-        }
-        break;
-
-      case "scroll":
-        if (config.type === "element" && config.selector) {
-          code += `\n  .scroll(${config.selector})`;
-        } else if (config.type === "position") {
-          if (config.x !== undefined && config.y !== undefined) {
-            code += `\n  .scroll(${config.x}, ${config.y})`;
-          } else if (config.y !== undefined) {
-            code += `\n  .scroll(${config.y})`;
-          }
-        }
-        break;
-
-      case "download":
-        if (config.url) {
-          code += `\n  .download(${config.url}${
-            config.savePath ? `, ${config.savePath}` : ""
-          })`;
-        }
-        break;
-
-      case "hide":
-      case "show":
-        code += `\n  .${action.value}()`;
-        break;
-
-      case "devTools":
-        if (config.mode) {
-          code += `\n  .devTools(${config.mode})`;
-        } else {
-          code += `\n  .devTools()`;
-        }
-        break;
-    }
-  });
-
-  // 运行参数
-  const runOptions = {};
-  Object.entries(configs.run).forEach(([key, value]) => {
-    if (
-      value !== undefined &&
-      value !== null &&
-      value !== defaultUBrowserConfigs.run[key]
-    ) {
-      runOptions[key] = value;
-    }
-  });
-
-  code += `\n  .run(${
-    Object.keys(runOptions).length
-      ? `\n${JSON.stringify(runOptions, null, 2).replace(/\n/g, "\n    ")}`
-      : ""
-  })`;
-
-  return code;
+  return args.join(", ");
+}
+
+// 生成 run 参数字符串
+function generateRunArgs(run) {
+  const options = {};
+  const defaultValues = {
+    show: true,
+    center: true,
+    alwaysOnTop: false,
+    fullscreen: false,
+    fullscreenable: true,
+    resizable: true,
+    movable: true,
+    minimizable: true,
+    maximizable: true,
+    enableLargerThanScreen: false,
+    opacity: 1,
+  };
+
+  // 窗口显示控制
+  if (run.show !== undefined && run.show !== defaultValues.show)
+    options.show = run.show;
+  if (run.center !== undefined && run.center !== defaultValues.center)
+    options.center = run.center;
+  if (
+    run.alwaysOnTop !== undefined &&
+    run.alwaysOnTop !== defaultValues.alwaysOnTop
+  )
+    options.alwaysOnTop = run.alwaysOnTop;
+  if (
+    run.fullscreen !== undefined &&
+    run.fullscreen !== defaultValues.fullscreen
+  )
+    options.fullscreen = run.fullscreen;
+  if (
+    run.fullscreenable !== undefined &&
+    run.fullscreenable !== defaultValues.fullscreenable
+  )
+    options.fullscreenable = run.fullscreenable;
+
+  // 窗口尺寸和位置 - 只有设置了值才添加
+  if (run.width !== undefined && run.width > 0) options.width = run.width;
+  if (run.height !== undefined && run.height > 0) options.height = run.height;
+  if (run.x !== undefined && run.x !== 0) options.x = run.x;
+  if (run.y !== undefined && run.y !== 0) options.y = run.y;
+
+  // 最大最小尺寸 - 只有设置了值才添加
+  if (run.minWidth !== undefined && run.minWidth > 0)
+    options.minWidth = run.minWidth;
+  if (run.minHeight !== undefined && run.minHeight > 0)
+    options.minHeight = run.minHeight;
+  if (run.maxWidth !== undefined && run.maxWidth > 0)
+    options.maxWidth = run.maxWidth;
+  if (run.maxHeight !== undefined && run.maxHeight > 0)
+    options.maxHeight = run.maxHeight;
+
+  // 窗口行为控制
+  if (run.resizable !== undefined && run.resizable !== defaultValues.resizable)
+    options.resizable = run.resizable;
+  if (run.movable !== undefined && run.movable !== defaultValues.movable)
+    options.movable = run.movable;
+  if (
+    run.minimizable !== undefined &&
+    run.minimizable !== defaultValues.minimizable
+  )
+    options.minimizable = run.minimizable;
+  if (
+    run.maximizable !== undefined &&
+    run.maximizable !== defaultValues.maximizable
+  )
+    options.maximizable = run.maximizable;
+  if (
+    run.enableLargerThanScreen !== undefined &&
+    run.enableLargerThanScreen !== defaultValues.enableLargerThanScreen
+  )
+    options.enableLargerThanScreen = run.enableLargerThanScreen;
+
+  // 透明度 - 只有不是1时才添加
+  if (run.opacity !== undefined && run.opacity !== defaultValues.opacity)
+    options.opacity = run.opacity;
+
+  // 其他参数 - 只有设置了值才添加
+  if (run.headless) options.headless = run.headless;
+  if (run.devtools) options.devtools = run.devtools;
+  if (run.timeout && run.timeout !== 60000) options.timeout = run.timeout;
+  if (run.proxy) options.proxy = run.proxy;
+  if (run.viewport) options.viewport = run.viewport;
+
+  return Object.keys(options).length ? stringifyObject(options) : "";
+}
+
+// 生成操作参数字符串
+function generateActionArgs(action, config) {
+  console.log(
+    "Generating args for action:",
+    action,
+    "config:",
+    JSON.stringify(config, null, 2)
+  );
+  if (!config) return "";
+
+  let result;
+  switch (action) {
+    case "wait":
+      result = generateWaitArgs(config);
+      break;
+    case "click":
+    case "mousedown":
+    case "mouseup":
+    case "focus":
+      result = stringifyWithType(config.selector);
+      break;
+    case "css":
+    case "paste":
+      result = stringifyWithType(config.value);
+      break;
+    case "press":
+      result = generatePressArgs(config);
+      break;
+    case "screenshot":
+      result = generateScreenshotArgs(config);
+      break;
+    case "pdf":
+      result = generatePdfArgs(config);
+      break;
+    case "device":
+      result = generateDeviceArgs(config);
+      break;
+    case "cookies":
+    case "removeCookies":
+      result = stringifyWithType(config.name);
+      break;
+    case "setCookies":
+      result = generateSetCookiesArgs(config);
+      break;
+    case "evaluate":
+      result = generateEvaluateArgs(config);
+      break;
+    case "when":
+      result = generateWhenArgs(config);
+      break;
+    case "file":
+      result = generateFileArgs(config);
+      break;
+    case "value":
+      result = generateValueArgs(config);
+      break;
+    case "check":
+      result = generateCheckArgs(config);
+      break;
+    case "scroll":
+      result = generateScrollArgs(config);
+      break;
+    case "download":
+      result = generateDownloadArgs(config);
+      break;
+    case "devTools":
+      result = stringifyWithType(config.mode);
+      break;
+    default:
+      result = "";
+  }
+  console.log(
+    "Generated args for action:",
+    action,
+    "result:",
+    JSON.stringify(result)
+  );
+  return result;
+}
+
+// 生成 wait 参数字符串
+function generateWaitArgs(config) {
+  switch (config.type) {
+    case "selector":
+      return stringifyWithType(config.selector);
+    case "function":
+      return config.function;
+    case "time":
+      return config.time;
+    default:
+      return "";
+  }
+}
+
+// 生成 press 参数字符串
+function generatePressArgs(config) {
+  const args = [stringifyWithType(config.key)];
+  if (config.modifiers?.length) {
+    args.push(JSON.stringify(config.modifiers));
+  }
+  return args.join(", ");
+}
+
+// 生成 screenshot 参数字符串
+function generateScreenshotArgs(config) {
+  const args = [];
+  if (config.rect) {
+    args.push(stringifyObject(config.rect));
+  } else if (config.selector) {
+    args.push(stringifyWithType(config.selector));
+  }
+  if (config.savePath) {
+    args.push(stringifyWithType(config.savePath));
+  }
+  return args.join(", ");
+}
+
+// 生成 pdf 参数字符串
+function generatePdfArgs(config) {
+  const args = [];
+  if (config.savePath) {
+    args.push(stringifyWithType(config.savePath));
+  }
+  if (config.options) {
+    args.push(stringifyObject(config.options));
+  }
+  return args.join(", ");
+}
+
+// 生成 device 参数字符串
+function generateDeviceArgs(config) {
+  if (config.type === "preset") {
+    return stringifyWithType(config.deviceName);
+  } else {
+    const options = {};
+    if (config.size) options.size = config.size;
+    if (config.useragent) options.userAgent = config.useragent;
+    return stringifyObject(options);
+  }
+}
+
+// 生成 setCookies 参数字符串
+function generateSetCookiesArgs(config) {
+  if (!config.items?.length) return "[]";
+  return stringifyObject(config.items);
+}
+
+// 生成 evaluate 参数字符串
+function generateEvaluateArgs(config) {
+  const args = [config.function];
+  if (config.args?.length) {
+    args.push(...config.args.map(stringifyWithType));
+  }
+  return args.join(", ");
+}
+
+// 生成 when 参数字符串
+function generateWhenArgs(config) {
+  if (config.type === "function") {
+    return config.function;
+  } else {
+    return stringifyWithType(config.selector);
+  }
+}
+
+// 生成 file 参数字符串
+function generateFileArgs(config) {
+  const args = [stringifyWithType(config.selector)];
+  if (config.files) {
+    args.push(stringifyObject(config.files));
+  }
+  return args.join(", ");
+}
+
+// 生成 value 参数字符串
+function generateValueArgs(config) {
+  return `${stringifyWithType(config.selector)}, ${stringifyWithType(
+    config.value
+  )}`;
+}
+
+// 生成 check 参数字符串
+function generateCheckArgs(config) {
+  return `${stringifyWithType(config.selector)}, ${config.checked}`;
+}
+
+// 生成 scroll 参数字符串
+function generateScrollArgs(config) {
+  if (config.type === "element") {
+    return stringifyWithType(config.selector);
+  } else {
+    if (config.x !== undefined) {
+      return `${config.x}, ${config.y}`;
+    } else {
+      return String(config.y);
+    }
+  }
+}
+
+// 生成 download 参数字符串
+function generateDownloadArgs(config) {
+  const args = [stringifyWithType(config.url)];
+  if (config.savePath) {
+    args.push(stringifyWithType(config.savePath));
+  }
+  return args.join(", ");
+}
+
+// 生成完整的 ubrowser 代码
+export function generateUBrowserCode(configs, selectedActions) {
+  const lines = [];
+  const indent = "  ";
+
+  // 添加 goto 参数
+  if (configs.goto) {
+    const gotoArgs = generateGotoArgs(configs.goto);
+    lines.push(`${indent}goto(${gotoArgs}),`);
+  }
+
+  // 添加选中的操作
+  if (selectedActions?.length) {
+    selectedActions.forEach((action) => {
+      const args = generateActionArgs(action.value, configs[action.value]);
+      lines.push(`${indent}${action.value}(${args}),`);
+    });
+  }
+
+  // 添加 run 参数
+  const runArgs = generateRunArgs(configs.run || {});
+  const runLine = runArgs ? `${indent}run(${runArgs})` : `${indent}run()`;
+  lines.push(runLine);
+
+  // 生成最终代码
+  return `utools.ubrowser\n${lines.join("\n")}`;
 }
diff --git a/src/js/composer/ubrowserConfig.js b/src/js/composer/ubrowserConfig.js
index ca61041..31cc3c4 100644
--- a/src/js/composer/ubrowserConfig.js
+++ b/src/js/composer/ubrowserConfig.js
@@ -76,7 +76,7 @@ export const ubrowserOperationConfigs = [
         key: "value",
         label: "注入的CSS样式",
         icon: "style",
-        type: "textarea",
+        type: "varInput",
       },
     ],
     icon: "style",
@@ -424,7 +424,7 @@ export const ubrowserOperationConfigs = [
       {
         key: "checked",
         label: "选中状态",
-        type: "checkbox",
+        type: "boolean-toggle",
         defaultValue: false,
         width: 4,
       },
@@ -564,9 +564,6 @@ const defaultUBrowserRunConfigs = {
 // ubrowser 默认配置 基础参数-浏览器操作-运行参数
 export const defaultUBrowserConfigs = {
   // 基础参数
-  useragent: {
-    value: "",
-  },
   goto: {
     url: {
       value: "",
@@ -593,82 +590,183 @@ export const defaultUBrowserConfigs = {
     timeout: 60000,
   },
   click: {
-    selector: "",
+    selector: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   css: {
-    value: "",
+    value: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   press: {
-    key: "",
+    key: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
     modifiers: [],
   },
   paste: {
-    text: "",
+    text: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   screenshot: {
-    selector: "",
+    selector: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
     rect: { x: 0, y: 0, width: 0, height: 0 },
-    savePath: "",
+    savePath: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   pdf: {
     options: {
       marginsType: 0,
       pageSize: "A4",
     },
-    savePath: "",
+    savePath: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   device: {
     size: { width: 1280, height: 800 },
-    useragent: "",
+    useragent: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   cookies: {
-    name: "",
+    name: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   setCookies: {
-    items: [{ name: "", value: "" }],
+    items: [
+      {
+        name: {
+          value: "",
+          isString: true,
+          __varInputVal__: true,
+        },
+        value: {
+          value: "",
+          isString: true,
+          __varInputVal__: true,
+        },
+      },
+    ],
   },
   removeCookies: {
-    name: "",
+    name: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   clearCookies: {
-    url: "",
+    url: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   evaluate: {
     function: "",
     params: [],
   },
   when: {
-    condition: "",
+    condition: {
+      value: "",
+      isString: false,
+      __varInputVal__: true,
+    },
   },
   mousedown: {
-    selector: "",
+    selector: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   mouseup: {
-    selector: "",
+    selector: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   file: {
-    selector: "",
+    selector: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
     files: [],
   },
   value: {
-    selector: "",
-    value: "",
+    selector: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
+    value: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   check: {
-    selector: "",
+    selector: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
     checked: false,
   },
   focus: {
-    selector: "",
+    selector: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   scroll: {
-    target: "",
+    target: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
     x: 0,
     y: 0,
   },
   download: {
-    url: "",
-    savePath: "",
+    url: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
+    savePath: {
+      value: "",
+      isString: true,
+      __varInputVal__: true,
+    },
   },
   // 运行参数
   run: defaultUBrowserRunConfigs,