重构ubrowser

This commit is contained in:
fofolee
2025-01-05 09:51:44 +08:00
parent 827c702e50
commit e082304c56
18 changed files with 857 additions and 843 deletions

View File

@@ -4,6 +4,7 @@
*/
const customComponentGuide = {
description: "创建自定义命令组件的完整流程",
important: "创建过程中严禁删除、修改任何已有的函数或对象",
steps: {
"1. Backend Interface": {
location: "plugin/lib/quickcomposer/xxx/yyy.js",

View File

@@ -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")}`;
}

View File

@@ -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,