MacOS专区新增浏览器管理添加浏览器自动化，实现自动点击元素，输入文本，注入css等功能

src/components/composer/MultiParams.vue

@@ -152,7 +152,7 @@ export default defineComponent({
         if (config.component === "VariableInput") {
           variableFormatPaths.push(prefix);
         } else if (config.component === "ArrayEditor") {
-          variableFormatPaths.push(`${prefix}[*]`);
+          variableFormatPaths.push(`${prefix}[*].**`, `${prefix}[*]`);
         } else if (config.component === "DictEditor") {
           variableFormatPaths.push(`${prefix}.**`);
         }
@@ -167,7 +167,6 @@ export default defineComponent({
           addVariableFormatPath(`arg${index}`, item);
         }
       });
-
       try {
         argvs = parseFunction(code, { variableFormatPaths }).argvs;
       } catch (e) {

src/components/composer/common/ButtonGroup.vue

@@ -58,7 +58,6 @@ export default defineComponent({
   width: 100%;
   flex-wrap: wrap;
   gap: 6px;
-  padding: 10px;
   border-radius: 6px;
 }
 

src/components/composer/common/CodeEditor.vue

@@ -112,15 +112,6 @@ export default {
         }
       },
     },
-    // 监听语言变化
-    language: {
-      immediate: true,
-      handler(newValue) {
-        if (this.editor) {
-          monaco.editor.setModelLanguage(this.editor.getModel(), newValue);
-        }
-      },
-    },
     "$q.dark.isActive": {
       immediate: true,
       handler(newValue) {
@@ -132,6 +123,7 @@ export default {
     this.initEditor();
     // 手动监听窗口大小变化，解决Monaco自动调整大小时导致ResizeObserver loop limit exceeded错误
     window.addEventListener("resize", this.resizeEditor);
+    monaco.editor.setTheme(this.$q.dark.isActive ? "vs-dark" : "vs");
   },
   beforeUnmount() {
     this.destroyEditor();

src/components/composer/common/DictEditor.vue

@@ -27,43 +27,44 @@
             </q-input>
           </template>
           <template v-else>
-            <q-select
+            <q-input
               v-if="options?.optionKeys"
               :model-value="item.key"
-              :options="normalizedOptionKeys"
               label="名称"
               dense
               filled
-              use-input
-              input-debounce="0"
-              :hide-selected="!!inputValue"
-              @filter="filterFn"
-              @update:model-value="
-                (val) => handleSelect(val, getEditableIndex(index))
-              "
-              @input-value="(val) => handleInput(val, getEditableIndex(index))"
-              @blur="handleBlur"
+              @update:model-value="(val) => handleInput(val, index)"
             >
               <template v-slot:prepend>
                 <q-icon name="code" />
               </template>
-              <template v-slot:option="scope">
-                <q-item v-bind="scope.itemProps">
-                  <q-item-section>
-                    {{ getKeyLabel(scope.opt) }}
-                  </q-item-section>
-                </q-item>
+              <template v-slot:append>
+                <q-btn dense flat icon="arrow_drop_down">
+                  <q-menu>
+                    <q-list dense>
+                      <q-item
+                        v-for="opt in normalizedOptionKeys"
+                        :key="opt.value"
+                        clickable
+                        v-close-popup
+                        @click="handleSelect(opt, index)"
+                      >
+                        <q-item-section>
+                          {{ getKeyLabel(opt) }}
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-btn>
               </template>
-            </q-select>
+            </q-input>
             <q-input
               v-else
               :model-value="item.key"
               label="名称"
               dense
               filled
-              @update:model-value="
-                (val) => updateItemKey(val, getEditableIndex(index))
-              "
+              @update:model-value="(val) => handleInput(val, index)"
             >
               <template v-slot:prepend>
                 <q-icon name="code" />
@@ -77,9 +78,7 @@
             label="值"
             icon="code"
             class="col-grow"
-            @update:model-value="
-              (val) => updateItemValue(val, index, item.type === 'fixed')
-            "
+            @update:model-value="(val) => updateItemValue(val, index)"
           />
         </div>
         <div
@@ -87,7 +86,7 @@
           class="col-auto"
         >
           <div class="btn-container">
-            <template v-if="editableItems.length === 1">
+            <template v-if="localItems.length === 1">
               <q-btn
                 flat
                 dense
@@ -97,16 +96,14 @@
                 @click="addItem"
               />
             </template>
-            <template
-              v-else-if="getEditableIndex(index) === editableItems.length - 1"
-            >
+            <template v-else-if="index === allItems.length - 1">
               <q-btn
                 flat
                 dense
                 size="sm"
                 icon="remove"
                 class="top-btn"
-                @click="removeItem(getEditableIndex(index))"
+                @click="removeItem(index)"
               />
               <q-btn
                 flat
@@ -124,7 +121,7 @@
                 size="sm"
                 icon="remove"
                 class="center-btn"
-                @click="removeItem(getEditableIndex(index))"
+                @click="removeItem(index)"
               />
             </template>
           </div>
@@ -140,30 +137,6 @@ import { newVarInputVal } from "js/composer/varInputValManager";
 import VariableInput from "components/composer/common/VariableInput.vue";
 import BorderLabel from "components/composer/common/BorderLabel.vue";
 
-/**
- * 字典编辑器组件
- * @description 支持键值对编辑，键支持变量选择和字符串输入，值为VariableInput特有对象
- *
- * @property {Object} modelValue - 绑定的字典对象
- * @property {Object} options - 配置选项
- * @property {String[]|Object[]} [options.optionKeys] - 可选键名
- * @property {String[]|Object[]} [options.fixedKeys] - 固定键名
- * @property {Boolean} [options.disableAdd] - 禁止添加新的键值对
- *
- * @example
- * // 基础字典对象
- * {
- *   key: newVarInputVal("str"),
- * }
- *
- * // 下拉选择模式
- * options.optionKeys = ['User-Agent', 'Content-Type', 'Accept']
- * {
- *   "User-Agent": newVarInputVal("str", "Mozilla/5.0"),
- *   "Content-Type": newVarInputVal("str", "text/html"),
- *   "Accept": newVarInputVal("str", "text/html")
- * }
- */
 export default defineComponent({
   name: "DictEditor",
   components: {
@@ -173,7 +146,6 @@ export default defineComponent({
   props: {
     modelValue: {
       type: Object,
-      required: true,
       default: () => ({}),
     },
     options: {
@@ -198,35 +170,23 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue"],
+  created() {
+    if (!this.modelValue || Object.keys(this.modelValue).length === 0) {
+      this.$emit("update:modelValue", { "": newVarInputVal("str") });
+    }
+  },
   data() {
     return {
       inputValue: "",
     };
   },
   computed: {
-    editableItems: {
-      get() {
-        return this.localItems;
-      },
-      set(newItems) {
-        this.localItems = newItems;
-        this.updateModelValue();
-      },
-    },
-    normalizedOptionKeys() {
-      return this.filterOptions;
-    },
-    // 规范化的固定键列表
-    normalizedFixedKeys() {
-      return this.normalizeKeys(this.options?.fixedKeys || []);
-    },
-    // 从 modelValue 中提取的所有条目
     modelEntries() {
       return Object.entries(this.modelValue || {});
     },
-    // 固定键项
     fixedItems() {
-      return this.normalizedFixedKeys.map((key) => ({
+      const fixedKeys = this.normalizeKeys(this.options?.fixedKeys || []);
+      return fixedKeys.map((key) => ({
         type: "fixed",
         key: key.value,
         value:
@@ -234,137 +194,85 @@ export default defineComponent({
           newVarInputVal("str"),
       }));
     },
-    // 可编辑项
     localItems() {
-      // 过滤出不在固定键中的条目
-      const editableEntries = this.modelEntries.filter(
-        ([key]) => !this.normalizedFixedKeys.some((k) => k.value === key)
-      );
-
-      return editableEntries.length || this.options?.disableAdd
-        ? editableEntries.map(([key, value]) => ({
-            type: "editable",
-            key,
-            value,
-          }))
-        : [{ type: "editable", key: "", value: newVarInputVal("str") }];
+      return this.modelEntries
+        .filter(
+          ([key]) =>
+            !this.normalizeKeys(this.options?.fixedKeys || []).some(
+              (k) => k.value === key
+            )
+        )
+        .map(([key, value]) => ({
+          type: "editable",
+          key,
+          value,
+        }));
     },
-    // 所有项目的组合
     allItems() {
       return [...this.fixedItems, ...this.localItems];
     },
-    // 过滤选项
-    filterOptions() {
+    normalizedOptionKeys() {
       return this.normalizeKeys(this.options?.optionKeys || []);
     },
   },
   methods: {
     normalizeKeys(keys) {
-      return keys.map((key) => {
-        if (typeof key === "string") {
-          return { value: key, label: key };
-        }
-        return key;
-      });
+      return keys.map((key) =>
+        typeof key === "string" ? { value: key, label: key } : key
+      );
     },
-
     getKeyLabel(key) {
       if (typeof key === "object") return key.label;
-      const allKeys = [...this.normalizedFixedKeys, ...this.filterOptions];
+      const allKeys = [
+        ...this.normalizeKeys(this.options?.fixedKeys || []),
+        ...this.normalizedOptionKeys,
+      ];
       return allKeys.find((k) => k.value === key)?.label || key;
     },
-
-    getEditableIndex(index) {
-      return index - this.fixedItems.length;
-    },
-
-    updateModelValue() {
-      const dict = {};
-      // 先添加固定键
-      this.fixedItems.forEach((item) => {
-        if (item.key) {
-          dict[item.key] = item.value;
-        }
-      });
-      // 再添加可编辑键
-      this.localItems.forEach((item) => {
-        if (item.key) {
-          dict[item.key] = item.value;
-        }
-      });
+    updateItemValue(val, index) {
+      const item = this.allItems[index];
+      const dict = { ...this.modelValue };
+      dict[item.key] = val;
       this.$emit("update:modelValue", dict);
     },
-
-    updateItemValue(val, index, isFixed = false) {
-      const dict = { ...this.modelValue };
-      const item = this.allItems[index];
-      if (item.key) {
-        dict[item.key] = val;
-        this.$emit("update:modelValue", dict);
-      }
-    },
-
     addItem() {
       if (this.options?.disableAdd) return;
       const dict = { ...this.modelValue };
       dict[""] = newVarInputVal("str");
       this.$emit("update:modelValue", dict);
     },
-
     removeItem(index) {
-      if (this.options?.disableAdd) return;
-      const dict = { ...this.modelValue };
       const item = this.localItems[index];
-      if (item.key) {
-        delete dict[item.key];
-        this.$emit("update:modelValue", dict);
-      }
-    },
-
-    updateItemKey(val, index) {
       const dict = { ...this.modelValue };
-      const oldItem = this.localItems[index];
-      if (oldItem.key) {
-        delete dict[oldItem.key];
+      delete dict[item.key];
+
+      // 如果删除后没有条目，添加一个空行
+      if (Object.keys(dict).length === 0) {
+        dict[""] = newVarInputVal("str");
       }
-      dict[val] = oldItem.value;
+
       this.$emit("update:modelValue", dict);
     },
-
     handleInput(val, index) {
       this.inputValue = val;
-      if (val) {
-        this.updateItemKey(val, index);
-      }
+      const item = this.allItems[index];
+      const dict = { ...this.modelValue };
+      delete dict[item.key];
+      dict[val] = item.value;
+      this.$emit("update:modelValue", dict);
     },
-
     handleSelect(val, index) {
       this.inputValue = "";
-      this.updateItemKey(val.value || val, index);
+      const value = val?.value || val;
+      const item = this.allItems[index];
+      const dict = { ...this.modelValue };
+      delete dict[item.key];
+      dict[value] = item.value;
+      this.$emit("update:modelValue", dict);
     },
-
     handleBlur() {
       this.inputValue = "";
     },
-
-    filterFn(val, update) {
-      if (!this.options?.optionKeys) return;
-
-      update(() => {
-        if (val === "") {
-          this.filterOptions = this.normalizeKeys(this.options.optionKeys);
-        } else {
-          const needle = val.toLowerCase();
-          this.filterOptions = this.normalizeKeys(
-            this.options.optionKeys
-          ).filter(
-            (v) =>
-              v.label.toLowerCase().indexOf(needle) > -1 ||
-              v.value.toLowerCase().indexOf(needle) > -1
-          );
-        }
-      });
-    },
   },
 });
 </script>

src/js/composer/commands/macosCommands.js

@@ -1,3 +1,5 @@
+import { newVarInputVal } from "js/composer/varInputValManager";
+
 export const macosCommands = {
   label: "MacOS专区",
   icon: "laptop_mac",
@@ -343,5 +345,594 @@ export const macosCommands = {
         },
       ],
     },
+    {
+      value: "quickcomposer.macos.browser.getUrl",
+      label: "浏览器管理",
+      desc: "浏览器管理功能",
+      icon: "web",
+      isAsync: true,
+      subCommands: [
+        {
+          value: "quickcomposer.macos.browser.getUrl",
+          label: "获取当前地址",
+          desc: "获取当前标签页的URL地址",
+          icon: "link",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.setUrl",
+          label: "设置当前地址",
+          desc: "设置当前标签页的URL地址",
+          icon: "link",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "url",
+              label: "网址",
+              component: "VariableInput",
+              icon: "link",
+              width: 12,
+              placeholder: "输入网址",
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.getTabs",
+          label: "获取标签列表",
+          desc: "获取所有打开的标签页信息",
+          icon: "tab",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.activateTab",
+          label: "切换标签",
+          desc: "切换到指定的标签页",
+          icon: "tab_unselected",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "index",
+              label: "标签索引",
+              component: "NumberInput",
+              icon: "tab",
+              min: 1,
+              defaultValue: 1,
+              width: 12,
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.executeScript",
+          label: "执行脚本",
+          desc: "在当前标签页执行JavaScript脚本",
+          icon: "code",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "script",
+              label: "脚本内容",
+              component: "CodeEditor",
+              icon: "code",
+              width: 12,
+              placeholder: "输入JavaScript代码",
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.clickElement",
+          label: "点击元素",
+          desc: "点击指定的页面元素",
+          icon: "mouse",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "selector",
+              label: "选择器",
+              component: "VariableInput",
+              icon: "code",
+              width: 12,
+              placeholder: "输入CSS选择器",
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.inputText",
+          label: "输入文本",
+          desc: "在指定输入框中输入文本",
+          icon: "edit",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "selector",
+              label: "选择器",
+              component: "VariableInput",
+              icon: "code",
+              width: 12,
+              placeholder: "输入CSS选择器",
+            },
+            {
+              key: "text",
+              label: "文本内容",
+              component: "VariableInput",
+              icon: "edit",
+              width: 12,
+              placeholder: "输入要填写的文本",
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.getText",
+          label: "获取文本",
+          desc: "获取指定元素的文本内容",
+          icon: "text_fields",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "selector",
+              label: "选择器",
+              component: "VariableInput",
+              icon: "code",
+              width: 12,
+              placeholder: "输入CSS选择器",
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.hideElement",
+          label: "隐藏元素",
+          desc: "隐藏指定的页面元素",
+          icon: "visibility_off",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "selector",
+              label: "选择器",
+              component: "VariableInput",
+              icon: "code",
+              width: 12,
+              placeholder: "输入CSS选择器",
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.showElement",
+          label: "显示元素",
+          desc: "显示指定的页面元素",
+          icon: "visibility",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "selector",
+              label: "选择器",
+              component: "VariableInput",
+              icon: "code",
+              width: 12,
+              placeholder: "输入CSS选择器",
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.injectCSS",
+          label: "注入CSS",
+          desc: "向页面注入CSS样式",
+          icon: "style",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "css",
+              label: "CSS内容",
+              component: "CodeEditor",
+              icon: "style",
+              width: 12,
+              placeholder: "输入CSS代码",
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.setCookie",
+          label: "设置Cookie",
+          desc: "设置浏览器Cookie",
+          icon: "cookie",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              label: "Cookie",
+              component: "ArrayEditor",
+              icon: "cookie",
+              width: 12,
+              columns: {
+                name: {
+                  label: "名称",
+                  defaultValue: newVarInputVal("str"),
+                },
+                value: {
+                  label: "值",
+                  defaultValue: newVarInputVal("str"),
+                },
+              },
+            },
+            {
+              label: "选项",
+              component: "DictEditor",
+              icon: "settings",
+              width: 12,
+              options: {
+                optionKeys: ["expires", "path", "domain", "secure", "sameSite"],
+              },
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.getCookie",
+          label: "获取Cookie",
+          desc: "获取指定的Cookie值",
+          icon: "cookie",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "name",
+              label: "名称",
+              component: "VariableInput",
+              icon: "label",
+              width: 12,
+              placeholder: "输入Cookie名称",
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.scrollTo",
+          label: "滚动到位置",
+          desc: "滚动到指定坐标位置",
+          icon: "open_in_full",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "x",
+              label: "X坐标",
+              component: "NumberInput",
+              icon: "arrow_right",
+              width: 12,
+              defaultValue: 0,
+            },
+            {
+              key: "y",
+              label: "Y坐标",
+              component: "NumberInput",
+              icon: "arrow_drop_down",
+              width: 12,
+              defaultValue: 0,
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.scrollToElement",
+          label: "滚动到元素",
+          desc: "滚动到指定元素位置",
+          icon: "open_in_full",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "selector",
+              label: "选择器",
+              component: "VariableInput",
+              icon: "code",
+              width: 12,
+              placeholder: "输入CSS选择器",
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.waitForElement",
+          label: "等待元素",
+          desc: "等待指定元素出现",
+          icon: "hourglass_empty",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "selector",
+              label: "选择器",
+              component: "VariableInput",
+              icon: "code",
+              width: 12,
+              placeholder: "输入CSS选择器",
+            },
+            {
+              key: "timeout",
+              label: "超时时间",
+              component: "NumberInput",
+              icon: "timer",
+              width: 12,
+              defaultValue: 5000,
+              min: 1000,
+              step: 1000,
+            },
+          ],
+        },
+        {
+          value: "quickcomposer.macos.browser.observeElement",
+          label: "监听元素",
+          desc: "监听指定元素的变化",
+          icon: "visibility",
+          config: [
+            {
+              key: "browser",
+              component: "ButtonGroup",
+              defaultValue: "Microsoft Edge",
+              options: [
+                {
+                  label: "Edge 浏览器",
+                  value: "Microsoft Edge",
+                },
+                {
+                  label: "Chrome 浏览器",
+                  value: "Google Chrome",
+                },
+              ],
+              width: 12,
+            },
+            {
+              key: "selector",
+              label: "选择器",
+              component: "VariableInput",
+              icon: "code",
+              width: 12,
+              placeholder: "输入CSS选择器",
+            },
+            {
+              key: "callback",
+              label: "回调函数",
+              component: "CodeEditor",
+              icon: "code",
+              width: 12,
+              placeholder: "输入回调函数代码",
+            },
+          ],
+        },
+      ],
+    },
   ],
 };

src/js/composer/formatString.js

@@ -5,6 +5,14 @@ import {
   newVarInputVal,
 } from "./varInputValManager";
 
+const processString = (value) => {
+  try {
+    return JSON.stringify(value);
+  } catch (error) {
+    return `"${value}"`;
+  }
+};
+
 /**
  * 处理单个值，返回格式化后的字符串
  */
@@ -12,13 +20,13 @@ const processValue = (value, parentPath = "") => {
   if (!value) return value;
 
   if (typeof value === "object") {
-    if (isVarInputVal(value)) {
-      return stringifyVarInputVal(value);
-    }
     return processObject(value, parentPath);
   }
+  if (typeof value === "string") {
+    return processString(value);
+  }
 
-  return typeof value === "string" ? `"${value}"` : value;
+  return value;
 };
 
 /**
@@ -131,7 +139,7 @@ const stringifyObject = (jsonObj) => {
 export const stringifyArgv = (argv) => {
   // 普通字符串加上引号
   if (typeof argv === "string") {
-    return `"${argv}"`;
+    return processString(argv);
   }
   // null类型是Object，需要单独处理，返回原值
   if (argv === null) {