完善变量输入输出，新增预览窗口

src/js/composer/composerConfig.js

@@ -0,0 +1,127 @@
+export {
+  ubrowserOperationConfigs,
+  defaultUBrowserConfigs,
+} from "./ubrowserConfig";
+
+// 定义命令图标映射
+export const commandIcons = {
+  open: "folder_open",
+  locate: "location_on",
+  visit: "language",
+  "utools.ubrowser.goto": "public",
+  system: "terminal",
+  copyTo: "content_copy",
+  message: "message",
+  alert: "warning",
+  send: "send",
+  "utools.redirect": "alt_route",
+  "quickcommand.sleep": "schedule",
+  keyTap: "keyboard",
+};
+
+// 定义命令分类
+export const commandCategories = [
+  {
+    label: "文件操作",
+    icon: "folder",
+    commands: [
+      {
+        value: "open",
+        label: "打开文件/文件夹/软件",
+        desc: "文件、文件夹或软件的绝对路径",
+      },
+      {
+        value: "locate",
+        label: "在文件管理器中定位文件",
+        desc: "要在文件管理器里显示的文件路径",
+      },
+    ],
+  },
+  {
+    label: "网络操作",
+    icon: "language",
+    commands: [
+      {
+        value: "visit",
+        label: "用默认浏览器打开网址",
+        desc: "要访问的网址链接",
+      },
+      {
+        value: "utools.ubrowser.goto",
+        label: "用ubrowser打开网址",
+        desc: "要访问的网址链接",
+      },
+      {
+        value: "ubrowser",
+        label: "UBrowser浏览器操作",
+        desc: "配置UBrowser浏览器操作",
+        hasUBrowserEditor: true,
+      },
+    ],
+  },
+  {
+    label: "系统操作",
+    icon: "computer",
+    commands: [
+      {
+        value: "system",
+        label: "执行系统命令",
+        desc: "要执行的命令行",
+      },
+      {
+        value: "copyTo",
+        label: "将内容写入剪贴板",
+        desc: "要写入剪切板的内容",
+      },
+    ],
+  },
+  {
+    label: "消息通知",
+    icon: "notifications",
+    commands: [
+      {
+        value: "message",
+        label: "发送系统消息",
+        desc: "要发送的系统消息文本",
+      },
+      {
+        value: "alert",
+        label: "弹窗显示消息",
+        desc: "要弹窗显示的消息文本",
+      },
+      {
+        value: "send",
+        label: "发送文本到活动窗口",
+        desc: "要发送到窗口的文本内容",
+      },
+    ],
+  },
+  {
+    label: "其他功能",
+    icon: "more_horiz",
+    commands: [
+      {
+        value: "utools.redirect",
+        label: "转至指定插件",
+        desc: "要跳转至的插件名称",
+      },
+      {
+        value: "quickcommand.sleep",
+        label: "添加延时",
+        desc: "延迟的毫秒数",
+      },
+    ],
+  },
+  {
+    label: "按键操作",
+    icon: "keyboard",
+    commands: [
+      {
+        value: "keyTap",
+        label: "模拟按键",
+        desc: "模拟键盘按键",
+        hasKeyRecorder: true,
+      },
+    ],
+  },
+];

src/js/composer/generateUBrowserCode.js

@@ -0,0 +1,264 @@
+/**
+ * 生成 UBrowser 代码
+ * @param {Object} configs UBrowser 配置对象
+ * @param {Array} selectedActions 已选择的操作列表
+ * @returns {string} 生成的代码
+ */
+import { defaultUBrowserConfigs } from "js/composer/ubrowserConfig";
+
+export function generateUBrowserCode(configs, selectedActions) {
+  let code = "utools.ubrowser";
+
+  // 基础参数
+  if (configs.useragent.value) {
+    code += `\n  .useragent('${configs.useragent.value}')`;
+  }
+
+  if (configs.goto.url) {
+    const gotoOptions = {};
+    if (configs.goto.headers.Referer) {
+      gotoOptions.headers = gotoOptions.headers || {};
+      gotoOptions.headers.Referer = configs.goto.headers.Referer;
+    }
+    if (configs.goto.headers.userAgent) {
+      gotoOptions.headers = gotoOptions.headers || {};
+      gotoOptions.headers["User-Agent"] = configs.goto.headers.userAgent;
+    }
+    if (configs.goto.timeout !== 60000) {
+      gotoOptions.timeout = configs.goto.timeout;
+    }
+
+    code += `\n  .goto('${configs.goto.url}'${
+      Object.keys(gotoOptions).length
+        ? `,\n${JSON.stringify(gotoOptions, null, 2).replace(/\n/g, "\n    ")}`
+        : ""
+    })`;
+  }
+
+  // 浏览器操作
+  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;
+
+      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 || config.savePath) {
+          const options = {};
+          if (config.selector) options.selector = config.selector;
+          if (config.rect.width && config.rect.height) {
+            options.rect = config.rect;
+          }
+          code += `\n  .screenshot('${config.savePath}'${
+            Object.keys(options).length ? `, ${JSON.stringify(options)}` : ""
+          })`;
+        }
+        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") {
+          const options = {
+            size: config.size,
+          };
+          if (config.useragent) options.useragent = config.useragent;
+          code += `\n  .device(${JSON.stringify(options, null, 2).replace(
+            /\n/g,
+            "\n    "
+          )})`;
+        }
+        break;
+
+      case "cookies":
+        if (config.name) {
+          code += `\n  .cookies('${config.name}')`;
+        }
+        break;
+
+      case "setCookies":
+        if (config.items?.length) {
+          code += `\n  .setCookies(${JSON.stringify(config.items)})`;
+        }
+        break;
+
+      case "removeCookies":
+        if (config.name) {
+          code += `\n  .removeCookies('${config.name}')`;
+        }
+        break;
+
+      case "clearCookies":
+        code += `\n  .clearCookies(${config.url ? `'${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) {
+          code += `\n  .file('${config.selector}', ${JSON.stringify(
+            config.files
+          )})`;
+        }
+        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;
+}

src/js/composer/ubrowserConfig.js

@@ -0,0 +1,622 @@
+// ubrowser 浏览器操作配置
+export const ubrowserOperationConfigs = {
+  wait: {
+    label: "等待",
+    config: [
+      {
+        key: "type",
+        label: "等待类型",
+        type: "button-toggle",
+        options: [
+          { label: "等待时间", value: "time" },
+          { label: "等待元素", value: "selector" },
+          { label: "等待条件", value: "function" },
+        ],
+        defaultValue: "time",
+      },
+      {
+        key: "time",
+        label: "等待时间(ms)",
+        icon: "timer",
+        type: "input",
+        inputType: "number",
+        width: 12,
+        showWhen: "type",
+        showValue: "time",
+      },
+      {
+        key: "selector",
+        label: "等待元素的CSS选择器",
+        icon: "find_in_page",
+        type: "input",
+        width: 12,
+        showWhen: "type",
+        showValue: "selector",
+      },
+      {
+        key: "function",
+        label: "等待条件(返回 true 时结束等待)",
+        icon: "code",
+        type: "function-with-params",
+        width: 12,
+        showWhen: "type",
+        showValue: "function",
+      },
+      {
+        key: "timeout",
+        label: "超时时间(ms)",
+        icon: "timer_off",
+        type: "input",
+        inputType: "number",
+        width: 12,
+        defaultValue: 60000,
+        showWhen: "type",
+        showValue: ["selector", "function"],
+      },
+    ],
+    icon: "timer",
+  },
+  click: {
+    label: "点击",
+    config: [
+      {
+        key: "selector",
+        label: "点击元素的CSS选择器",
+        icon: "mouse",
+        type: "input",
+      },
+    ],
+    icon: "mouse",
+  },
+  css: {
+    label: "注入CSS",
+    config: [
+      {
+        key: "value",
+        label: "注入的CSS样式",
+        icon: "style",
+        type: "textarea",
+      },
+    ],
+    icon: "style",
+  },
+  press: {
+    label: "按键",
+    config: [
+      {
+        key: "key",
+        label: "按键",
+        icon: "keyboard",
+        type: "input",
+        width: 5,
+      },
+      {
+        key: "modifiers",
+        label: "修饰键",
+        type: "checkbox-group",
+        options: [
+          { label: "Ctrl", value: "ctrl" },
+          { label: "Shift", value: "shift" },
+          { label: "Alt", value: "alt" },
+          { label: "Meta", value: "meta" },
+        ],
+        defaultValue: [],
+        width: 7,
+      },
+    ],
+    icon: "keyboard",
+  },
+  paste: {
+    label: "粘贴",
+    config: [
+      {
+        key: "text",
+        label: "粘贴内容",
+        icon: "content_paste",
+        type: "input",
+      },
+    ],
+    icon: "content_paste",
+  },
+  viewport: {
+    label: "视窗",
+    config: [
+      {
+        key: "width",
+        label: "视窗宽度",
+        icon: "width",
+        type: "input",
+        inputType: "number",
+        width: 6,
+      },
+      {
+        key: "height",
+        label: "视窗高度",
+        icon: "height",
+        type: "input",
+        inputType: "number",
+        width: 6,
+      },
+    ],
+    icon: "crop",
+  },
+  screenshot: {
+    label: "截图",
+    config: [
+      { key: "selector", label: "元素选择器", icon: "crop", type: "input" },
+      {
+        key: "rect.x",
+        label: "X坐标",
+        icon: "drag_handle",
+        type: "input",
+        inputType: "number",
+        width: 3,
+      },
+      {
+        key: "rect.y",
+        label: "Y坐标",
+        icon: "drag_handle",
+        type: "input",
+        inputType: "number",
+        width: 3,
+      },
+      {
+        key: "rect.width",
+        label: "宽度",
+        icon: "width",
+        type: "input",
+        inputType: "number",
+        width: 3,
+      },
+      {
+        key: "rect.height",
+        label: "高度",
+        icon: "height",
+        type: "input",
+        inputType: "number",
+        width: 3,
+      },
+      { key: "savePath", label: "保存路径", icon: "save", type: "input" },
+    ],
+    icon: "picture_as_pdf",
+  },
+  pdf: {
+    label: "导出PDF",
+    config: [
+      {
+        key: "options.marginsType",
+        label: "边距类型",
+        type: "select",
+        options: [
+          { label: "默认边距", value: 0 },
+          { label: "无边距", value: 1 },
+          { label: "最小边距", value: 2 },
+        ],
+        width: 6,
+      },
+      {
+        key: "options.pageSize",
+        label: "页面大小",
+        type: "select",
+        options: ["A3", "A4", "A5", "Legal", "Letter", "Tabloid"],
+        width: 6,
+      },
+      { key: "savePath", label: "保存路径", icon: "save", type: "input" },
+    ],
+    icon: "devices",
+  },
+  device: {
+    label: "模拟设备",
+    config: [
+      {
+        key: "type",
+        label: "设备类型",
+        type: "button-toggle",
+        options: [
+          { label: "特定设备", value: "preset" },
+          { label: "自定义设备", value: "custom" },
+        ],
+        defaultValue: "preset",
+      },
+      {
+        key: "deviceName",
+        label: "设备名称",
+        icon: "smartphone",
+        type: "input",
+        width: 12,
+        showWhen: "type",
+        showValue: "preset",
+      },
+      {
+        key: "size",
+        label: "设备尺寸",
+        type: "device-size",
+        width: 12,
+        showWhen: "type",
+        showValue: "custom",
+      },
+      {
+        key: "useragent",
+        label: "User-Agent",
+        icon: "devices",
+        type: "input",
+        width: 12,
+        showWhen: "type",
+        showValue: "custom",
+      },
+    ],
+    icon: "cookie",
+  },
+  setCookies: {
+    label: "设置Cookie",
+    config: [{ key: "items", label: "Cookie列表", type: "cookie-list" }],
+    icon: "cookie",
+  },
+  removeCookies: {
+    label: "删除Cookie",
+    config: [
+      { key: "name", label: "Cookie名称", icon: "cookie", type: "input" },
+    ],
+    icon: "cookie",
+  },
+  clearCookies: {
+    label: "清空Cookie",
+    config: [{ key: "url", label: "URL(可选)", icon: "link", type: "input" }],
+    icon: "cookie",
+  },
+  evaluate: {
+    label: "执行代码",
+    config: [
+      {
+        key: "function",
+        label: "执行的代码",
+        icon: "code",
+        type: "function-with-params",
+        width: 12,
+      },
+    ],
+    icon: "code",
+  },
+  when: {
+    label: "条件判断",
+    config: [
+      {
+        key: "type",
+        label: "条件类型",
+        type: "button-toggle",
+        options: [
+          { label: "等待元素", value: "selector" },
+          { label: "等待条件", value: "function" },
+        ],
+        defaultValue: "selector",
+      },
+      {
+        key: "selector",
+        label: "等待元素的CSS选择器",
+        icon: "find_in_page",
+        type: "input",
+        width: 12,
+        showWhen: "type",
+        showValue: "selector",
+      },
+      {
+        key: "function",
+        label: "等待条件(返回 true 时结束等待)",
+        icon: "code",
+        type: "function-with-params",
+        width: 12,
+        showWhen: "type",
+        showValue: "function",
+      },
+      {
+        key: "timeout",
+        label: "超时时间(ms)",
+        icon: "timer_off",
+        type: "input",
+        inputType: "number",
+        width: 12,
+        defaultValue: 60000,
+        showWhen: "type",
+        showValue: ["selector", "function"],
+      },
+    ],
+    icon: "rule",
+  },
+  end: {
+    label: "结束条件",
+    config: [],
+    icon: "stop",
+  },
+  mousedown: {
+    label: "按下鼠标",
+    config: [
+      {
+        key: "selector",
+        label: "按下元素选择器",
+        icon: "mouse",
+        type: "input",
+      },
+    ],
+    icon: "mouse",
+  },
+  mouseup: {
+    label: "释放鼠标",
+    config: [
+      {
+        key: "selector",
+        label: "释放元素选择器",
+        icon: "mouse",
+        type: "input",
+      },
+    ],
+    icon: "mouse",
+  },
+  file: {
+    label: "上传文件",
+    config: [
+      {
+        key: "selector",
+        label: "文件输入框选择器",
+        icon: "upload_file",
+        type: "input",
+      },
+      { key: "files", label: "文件列表", type: "file-list", width: 12 },
+    ],
+    icon: "upload_file",
+  },
+  value: {
+    label: "设置值",
+    config: [
+      {
+        key: "selector",
+        label: "元素选择器",
+        icon: "input",
+        type: "input",
+        width: 6,
+      },
+      {
+        key: "value",
+        label: "设置的值",
+        icon: "edit",
+        type: "input",
+        width: 6,
+      },
+    ],
+    icon: "check_box",
+  },
+  check: {
+    label: "设置选中",
+    config: [
+      {
+        key: "selector",
+        label: "复选框/选框选择器",
+        icon: "check_box",
+        type: "input",
+        width: 8,
+      },
+      {
+        key: "checked",
+        label: "选中状态",
+        type: "checkbox",
+        defaultValue: false,
+        width: 4,
+      },
+    ],
+    icon: "center_focus_strong",
+  },
+  focus: {
+    label: "聚焦元素",
+    config: [
+      {
+        key: "selector",
+        label: "元素选择器",
+        icon: "center_focus_strong",
+        type: "input",
+      },
+    ],
+    icon: "swap_vert",
+  },
+  scroll: {
+    label: "滚动",
+    config: [
+      {
+        key: "type",
+        label: "滚动类型",
+        type: "button-toggle",
+        options: [
+          { label: "滚动到元素", value: "element" },
+          { label: "滚动到坐标", value: "position" },
+        ],
+        defaultValue: "element",
+      },
+      {
+        key: "selector",
+        label: "目标元素选择器",
+        icon: "swap_vert",
+        type: "input",
+        width: 12,
+        showWhen: "type",
+        showValue: "element",
+      },
+      {
+        key: "x",
+        label: "X坐标",
+        icon: "drag_handle",
+        type: "input",
+        inputType: "number",
+        width: 6,
+        showWhen: "type",
+        showValue: "position",
+      },
+      {
+        key: "y",
+        label: "Y坐标",
+        icon: "drag_handle",
+        type: "input",
+        inputType: "number",
+        width: 6,
+        showWhen: "type",
+        showValue: "position",
+      },
+    ],
+    icon: "download",
+  },
+  download: {
+    label: "下载",
+    config: [
+      {
+        key: "url",
+        label: "下载URL",
+        icon: "link",
+        type: "input",
+        width: 6,
+      },
+      {
+        key: "savePath",
+        label: "保存路径",
+        icon: "save",
+        type: "input",
+        width: 6,
+      },
+    ],
+    icon: "download",
+  },
+  devTools: {
+    label: "开发工具",
+    config: [
+      {
+        key: "mode",
+        label: "开发工具位置",
+        type: "button-toggle",
+        options: [
+          { label: "右侧", value: "right" },
+          { label: "底部", value: "bottom" },
+          { label: "独立", value: "undocked" },
+          { label: "分离", value: "detach" },
+        ],
+        defaultValue: "right",
+      },
+    ],
+    icon: "developer_board",
+  },
+};
+
+// 添加默认运行配置
+const defaultUBrowserRunConfigs = {
+  show: true,
+  width: 1280,
+  height: 800,
+  center: true,
+  minWidth: 800,
+  minHeight: 600,
+  resizable: true,
+  movable: true,
+  minimizable: true,
+  maximizable: true,
+  alwaysOnTop: false,
+  fullscreen: false,
+  fullscreenable: true,
+  enableLargerThanScreen: false,
+  opacity: 1,
+};
+
+// ubrowser 默认配置 基础参数-浏览器操作-运行参数
+export const defaultUBrowserConfigs = {
+  // 基础参数
+  useragent: {
+    value: "",
+  },
+  goto: {
+    url: "",
+    headers: {
+      Referer: "",
+      userAgent: "",
+    },
+    timeout: 60000,
+  },
+  // 浏览器操作
+  wait: {
+    value: "",
+    timeout: 60000,
+  },
+  click: {
+    selector: "",
+  },
+  css: {
+    value: "",
+  },
+  press: {
+    key: "",
+    modifiers: [],
+  },
+  paste: {
+    text: "",
+  },
+  screenshot: {
+    selector: "",
+    rect: { x: 0, y: 0, width: 0, height: 0 },
+    savePath: "",
+  },
+  pdf: {
+    options: {
+      marginsType: 0,
+      pageSize: "A4",
+    },
+    savePath: "",
+  },
+  device: {
+    size: { width: 1280, height: 800 },
+    useragent: "",
+  },
+  cookies: {
+    name: "",
+  },
+  setCookies: {
+    items: [{ name: "", value: "" }],
+  },
+  removeCookies: {
+    name: "",
+  },
+  clearCookies: {
+    url: "",
+  },
+  evaluate: {
+    function: "",
+    params: [],
+  },
+  when: {
+    condition: "",
+  },
+  mousedown: {
+    selector: "",
+  },
+  mouseup: {
+    selector: "",
+  },
+  file: {
+    selector: "",
+    files: [],
+  },
+  value: {
+    selector: "",
+    value: "",
+  },
+  check: {
+    selector: "",
+    checked: false,
+  },
+  focus: {
+    selector: "",
+  },
+  scroll: {
+    target: "",
+    x: 0,
+    y: 0,
+  },
+  download: {
+    url: "",
+    savePath: "",
+  },
+  // 运行参数
+  run: defaultUBrowserRunConfigs,
+};