study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-30 21:13:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

编排界面添加ubrowser

Browse Source
This commit is contained in:
fofolee 2024-12-23 00:51:03 +08:00
parent 29ceb3c7ff
commit 52fc7f408d
9 changed files with 1587 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/editor/composer/CommandComposer.vue
View File

@ -23,17 +23,10 @@
</div>
<!-- 固定底部 -->
<div class="composer-footer q-pa-sm row items-center justify-end">
<q-btn
outline
color="primary"
label="运行"
icon="play_arrow"
class="q-mr-sm"
@click="runCommands"
/>
<q-btn flat label="取消" v-close-popup />
<q-btn unelevated color="primary" label="确认" @click="applyCommands" />
<div class="composer-footer q-pa-sm q-gutter-sm row justify-end">
<q-btn label="取消" v-close-popup />
<q-btn color="primary" label="确认" @click="applyCommands" />
<q-btn color="positive" label="运行" @click="runCommands" />
</div>
</div>
</template>

17
src/components/editor/composer/ComposerCard.vue
View File

@ -68,6 +68,13 @@
<template v-else-if="command.hasKeyRecorder">
<KeyEditor v-model="argvLocal" class="col" />
</template>
<!-- UBrowser编辑器 -->
<template v-else-if="command.hasUBrowserEditor">
<UBrowserEditor
v-model="argvLocal"
class="col"
/>
</template>
<!-- 普通参数输入 -->
<template v-else>
<q-input
@ -92,11 +99,13 @@
<script>
import { defineComponent } from "vue";
import KeyEditor from "./KeyEditor.vue";
import UBrowserEditor from './ubrowser/UBrowserEditor.vue';
export default defineComponent({
name: "ComposerCard",
components: {
KeyEditor,
UBrowserEditor
},
props: {
command: {
@ -208,10 +217,10 @@ export default defineComponent({
}
/* 拖拽动画 */
.composer-card:active {
transform: scale(1.02);
transition: transform 0.2s;
}
/* .composer-card:active { */
/* transform: scale(1.02); */
/* transition: transform 0.2s; */
/* } */
.command-item {
transition: all 0.3s ease;

7
src/components/editor/composer/composerConfig.js
View File

@ -45,6 +45,12 @@ export const commandCategories = [
value: "utools.ubrowser.goto",
label: "用ubrowser打开网址",
desc: "要访问的网址链接",
},
{
value: "ubrowser",
label: "UBrowser浏览器操作",
desc: "配置UBrowser浏览器操作",
hasUBrowserEditor: true
}
]
},
@ -121,6 +127,7 @@ export const commandsWithOutput = {
'open': true,
'locate': true,
'copyTo': true,
'ubrowser': true,
}
// 定义哪些命令可以接收输出

86
src/components/editor/composer/ubrowser/UBrowserBasic.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<div class="row q-col-gutter-sm">
<!-- UserAgent -->
<div class="col-12">
<UBrowserInput
:value="configs.useragent.value"
@update:modelValue="updateConfig('useragent.value', $event)"
label="UserAgent"
icon="person"
/>
</div>
<!-- URL -->
<div class="col-12">
<UBrowserInput
:value="configs.goto.url"
@update:modelValue="updateConfig('goto.url', $event)"
label="URL"
icon="link"
/>
</div>
<!-- Headers -->
<div class="col-12">
<div class="text-subtitle2 q-mb-sm">请求头</div>
<UBrowserInput
:value="configs.goto.headers.Referer"
@update:modelValue="updateConfig('goto.headers.Referer', $event)"
label="Referer"
icon="link"
class="q-mb-sm"
/>
<UBrowserInput
:value="configs.goto.headers.userAgent"
@update:modelValue="updateConfig('goto.headers.userAgent', $event)"
label="User-Agent"
icon="person"
/>
</div>
<!-- Timeout -->
<div class="col-12">
<UBrowserInput
:value="configs.goto.timeout"
@update:modelValue="updateConfig('goto.timeout', $event)"
type="number"
label="超时时间(ms)"
icon="timer"
/>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import UBrowserInput from './operations/UBrowserInput.vue';
export default defineComponent({
name: 'UBrowserBasic',
components: {
UBrowserInput
},
props: {
configs: {
type: Object,
required: true
}
},
emits: ['update:configs'],
methods: {
updateConfig(path, value) {
const newConfigs = { ...this.configs };
const keys = path.split('.');
let current = newConfigs;
for (let i = 0; i < keys.length - 1; i++) {
current[keys[i]] = { ...current[keys[i]] };
current = current[keys[i]];
}
current[keys[keys.length - 1]] = value;
this.$emit('update:configs', newConfigs);
}
}
});
</script>

486
src/components/editor/composer/ubrowser/UBrowserEditor.vue Normal file
View File

@ -0,0 +1,486 @@
<template>
<div class="ubrowser-editor">
<q-stepper
v-model="step"
vertical
color="primary"
header-nav
animated
alternative-labels
flat
class="ubrowser-stepper"
>
<!-- 基础参数步骤 -->
<q-step
:name="1"
title="基础参数"
icon="settings"
:done="step > 1"
>
<UBrowserBasic
:configs="configs"
@update:configs="updateConfigs"
/>
</q-step>
<!-- 浏览器操作步骤 -->
<q-step
:name="2"
title="浏览器操作"
icon="touch_app"
:done="step > 2"
>
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-select
v-model="selectedActions"
:options="availableActions"
multiple
use-chips
outlined
dense
label="选择操作"
/>
</div>
<div class="col-12">
<UBrowserOperations
:configs="configs"
@update:configs="updateConfigs"
v-model:selected-actions="selectedActions"
@remove-action="removeAction"
/>
</div>
</div>
</q-step>
<!-- 运行参数步骤 -->
<q-step
:name="3"
title="运行参数"
icon="settings_applications"
class="q-pb-md"
>
<UBrowserRun
:configs="configs"
@update:configs="updateConfigs"
/>
</q-step>
</q-stepper>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import UBrowserBasic from './UBrowserBasic.vue';
import UBrowserOperations from './UBrowserOperations.vue';
import UBrowserRun from './UBrowserRun.vue';
export default defineComponent({
name: 'UBrowserEditor',
components: {
UBrowserBasic,
UBrowserOperations,
UBrowserRun
},
props: {
modelValue: {
type: String,
default: ''
}
},
emits: ['update:modelValue'],
data() {
return {
step: 1,
selectedActions: [],
configs: {
// 基础参数
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: {
show: true,
width: 1280,
height: 800,
x: undefined,
y: undefined,
center: true,
minWidth: 800,
minHeight: 600,
maxWidth: undefined,
maxHeight: undefined,
resizable: true,
movable: true,
minimizable: true,
maximizable: true,
alwaysOnTop: false,
fullscreen: false,
fullscreenable: true,
enableLargerThanScreen: false,
opacity: 1
}
}
};
},
computed: {
availableActions() {
return [
{ label: '等待', value: 'wait' },
{ label: '点击', value: 'click' },
{ label: '注入CSS', value: 'css' },
{ label: '按键', value: 'press' },
{ label: '粘贴', value: 'paste' },
{ label: '截图', value: 'screenshot' },
{ label: '导出PDF', value: 'pdf' },
{ label: '模拟设备', value: 'device' },
{ label: '获取Cookie', value: 'cookies' },
{ label: '设置Cookie', value: 'setCookies' },
{ label: '删除Cookie', value: 'removeCookies' },
{ label: '清除Cookie', value: 'clearCookies' },
{ label: '执行脚本', value: 'evaluate' },
{ label: '条件判断', value: 'when' },
{ label: '鼠标按下', value: 'mousedown' },
{ label: '鼠标释放', value: 'mouseup' },
{ label: '上传文件', value: 'file' },
{ label: '设置值', value: 'value' },
{ label: '选中状态', value: 'check' },
{ label: '获取焦点', value: 'focus' },
{ label: '滚动', value: 'scroll' },
{ label: '下载', value: 'download' },
{ label: '隐藏', value: 'hide' },
{ label: '显示', value: 'show' },
{ label: '开发工具', value: 'devTools' }
];
}
},
methods: {
updateConfigs(newConfigs) {
this.configs = newConfigs;
},
removeAction(action) {
const index = this.selectedActions.findIndex(a => a.value === action.value);
if (index > -1) {
this.selectedActions.splice(index, 1);
}
},
generateCode() {
let code = 'utools.ubrowser';
// 基础参数
if (this.configs.useragent.value) {
code += `.useragent('${this.configs.useragent.value}')`;
}
if (this.configs.goto.url) {
const gotoOptions = {};
if (this.configs.goto.headers.Referer) {
gotoOptions.headers = gotoOptions.headers || {};
gotoOptions.headers.Referer = this.configs.goto.headers.Referer;
}
if (this.configs.goto.headers.userAgent) {
gotoOptions.headers = gotoOptions.headers || {};
gotoOptions.headers['User-Agent'] = this.configs.goto.headers.userAgent;
}
if (this.configs.goto.timeout !== 60000) {
gotoOptions.timeout = this.configs.goto.timeout;
}
code += `.goto('${this.configs.goto.url}'${Object.keys(gotoOptions).length ? `, ${JSON.stringify(gotoOptions)}` : ''})`;
}
// 浏览器操作
this.selectedActions.forEach(action => {
const config = this.configs[action.value];
switch (action.value) {
case 'wait':
if (config.value) {
code += `.wait('${config.value}'${config.timeout !== 60000 ? `, ${config.timeout}` : ''})`;
}
break;
case 'click':
if (config.selector) {
code += `.click('${config.selector}')`;
}
break;
case 'css':
if (config.value) {
code += `.css('${config.value}')`;
}
break;
case 'press':
if (config.key) {
const modifiers = config.modifiers.length ? `, ${JSON.stringify(config.modifiers)}` : '';
code += `.press('${config.key}'${modifiers})`;
}
break;
case 'paste':
if (config.text) {
code += `.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 += `.screenshot('${config.savePath}'${Object.keys(options).length ? `, ${JSON.stringify(options)}` : ''})`;
}
break;
case 'pdf':
if (config.savePath) {
code += `.pdf('${config.savePath}'${config.options ? `, ${JSON.stringify(config.options)}` : ''})`;
}
break;
case 'device':
if (config.size.width && config.size.height) {
const options = {
size: config.size
};
if (config.useragent) options.useragent = config.useragent;
code += `.device(${JSON.stringify(options)})`;
}
break;
case 'cookies':
if (config.name) {
code += `.cookies('${config.name}')`;
}
break;
case 'setCookies':
if (config.items?.length) {
code += `.setCookies(${JSON.stringify(config.items)})`;
}
break;
case 'removeCookies':
if (config.name) {
code += `.removeCookies('${config.name}')`;
}
break;
case 'clearCookies':
code += `.clearCookies(${config.url ? `'${config.url}'` : ''})`;
break;
case 'evaluate':
if (config.function) {
const params = config.params.length ? `, ${JSON.stringify(config.params)}` : '';
code += `.evaluate(\`${config.function}\`${params})`;
}
break;
case 'when':
if (config.condition) {
code += `.when('${config.condition}')`;
}
break;
case 'mousedown':
case 'mouseup':
if (config.selector) {
code += `.${action.value}('${config.selector}')`;
}
break;
case 'file':
if (config.selector && config.files?.length) {
code += `.file('${config.selector}', ${JSON.stringify(config.files)})`;
}
break;
case 'value':
if (config.selector) {
code += `.value('${config.selector}', '${config.value}')`;
}
break;
case 'check':
if (config.selector) {
code += `.check('${config.selector}'${config.checked !== undefined ? `, ${config.checked}` : ''})`;
}
break;
case 'focus':
if (config.selector) {
code += `.focus('${config.selector}')`;
}
break;
case 'scroll':
if (config.x !== undefined || config.y !== undefined) {
const options = {};
if (config.target) options.target = config.target;
if (config.x !== undefined) options.x = config.x;
if (config.y !== undefined) options.y = config.y;
code += `.scroll(${JSON.stringify(options)})`;
}
break;
case 'download':
if (config.url) {
code += `.download('${config.url}'${config.savePath ? `, '${config.savePath}'` : ''})`;
}
break;
case 'hide':
case 'show':
case 'devTools':
code += `.${action.value}()`;
break;
}
});
// 运行参数
const runOptions = {};
Object.entries(this.configs.run).forEach(([key, value]) => {
if (value !== undefined && value !== null) {
runOptions[key] = value;
}
});
code += `.run(${Object.keys(runOptions).length ? JSON.stringify(runOptions) : ''})`;
this.$emit('update:modelValue', code);
}
},
watch: {
configs: {
deep: true,
handler() {
this.generateCode();
}
},
selectedActions: {
handler() {
this.generateCode();
}
},
step: {
handler() {
this.generateCode();
}
}
}
});
</script>
<style scoped>
.ubrowser-editor {
width: 100%;
}
.ubrowser-stepper {
box-shadow: none;
background-color: rgba(255, 255, 255, 0.8);
}
.body--dark .ubrowser-stepper {
background-color: rgba(255, 255, 255, 0.05);
}
.ubrowser-stepper :deep(.q-stepper__header) {
cursor: pointer;
}
</style>

455
src/components/editor/composer/ubrowser/UBrowserOperations.vue Normal file
View File

@ -0,0 +1,455 @@
<template>
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-list separator class="operation-list">
<div
v-for="(action, index) in selectedActions"
:key="action.value"
class="operation-item"
>
<div class="row items-center justify-between">
<div class="row items-center">
<q-icon
:name="getActionIcon(action.value)"
size="xs"
class="q-mx-sm"
color="primary"
/>
<div class="text-subtitle1">{{ action.label }}</div>
<div class="row items-center q-ml-md">
<q-btn
flat
round
dense
icon="north"
:disable="index === 0"
@click="moveAction(index, -1)"
size="xs"
class="q-mb-xs move-btn"
/>
<q-btn
flat
round
dense
icon="south"
:disable="index === selectedActions.length - 1"
@click="moveAction(index, 1)"
size="xs"
class="move-btn"
/>
</div>
</div>
<q-btn
flat
round
dense
icon="delete"
color="negative"
size="sm"
@click="$emit('remove-action', action)"
class="delete-btn"
/>
</div>
<div v-if="getOperationConfig(action.value)">
<UBrowserOperation
:configs="configs"
:action="action.value"
:fields="getOperationConfig(action.value)"
@update:configs="$emit('update:configs', $event)"
/>
</div>
</div>
</q-list>
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
import UBrowserOperation from "./operations/UBrowserOperation.vue";
export default defineComponent({
name: "UBrowserOperations",
components: {
UBrowserOperation,
},
props: {
configs: {
type: Object,
required: true,
},
selectedActions: {
type: Array,
required: true,
},
},
emits: ["remove-action", "update:selectedActions"],
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;
this.$emit("update:selectedActions", actions);
}
},
getActionIcon(action) {
const iconMap = {
wait: "timer",
click: "mouse",
css: "style",
press: "keyboard",
paste: "content_paste",
screenshot: "photo_camera",
pdf: "picture_as_pdf",
device: "devices",
cookies: "cookie",
evaluate: "code",
when: "rule",
mousedown: "mouse",
mouseup: "mouse",
file: "upload_file",
value: "edit",
check: "check_box",
focus: "center_focus_strong",
scroll: "swap_vert",
download: "download",
hide: "visibility_off",
show: "visibility",
devTools: "developer_board",
};
return iconMap[action] || "touch_app";
},
getOperationConfig(action) {
const configs = {
wait: [
{
key: "value",
label: "等待时间(ms)或CSS选择器",
icon: "timer",
type: "input",
},
{
key: "timeout",
label: "超时时间(ms)",
icon: "timer_off",
type: "input",
inputType: "number",
},
],
click: [
{
key: "selector",
label: "点击元素的CSS选择器",
icon: "mouse",
type: "input",
},
],
css: [
{
key: "value",
label: "注入的CSS样式",
icon: "style",
type: "textarea",
},
],
press: [
{ key: "key", label: "按键", icon: "keyboard", type: "input" },
{
key: "modifiers",
type: "checkbox-group",
options: [
{ label: "Ctrl", value: "ctrl" },
{ label: "Shift", value: "shift" },
{ label: "Alt", value: "alt" },
{ label: "Meta", value: "meta" },
],
},
],
paste: [
{
key: "text",
label: "粘贴内容",
icon: "content_paste",
type: "input",
},
],
viewport: [
{
key: "width",
label: "视窗宽度",
icon: "width",
type: "input",
inputType: "number",
width: 6,
},
{
key: "height",
label: "视窗高度",
icon: "height",
type: "input",
inputType: "number",
width: 6,
},
],
screenshot: [
{ key: "selector", label: "元素选择器", icon: "crop", type: "input" },
{
key: "rect.x",
label: "X坐标",
icon: "drag_handle",
type: "input",
inputType: "number",
width: 6,
},
{
key: "rect.y",
label: "Y坐标",
icon: "drag_handle",
type: "input",
inputType: "number",
width: 6,
},
{
key: "rect.width",
label: "宽度",
icon: "width",
type: "input",
inputType: "number",
width: 6,
},
{
key: "rect.height",
label: "高度",
icon: "height",
type: "input",
inputType: "number",
width: 6,
},
{ key: "savePath", label: "保存路径", icon: "save", type: "input" },
],
pdf: [
{
key: "options.marginsType",
label: "边距类型",
type: "select",
options: [
{ label: "默认边距", value: 0 },
{ label: "无边距", value: 1 },
{ label: "最小边距", value: 2 },
],
},
{
key: "options.pageSize",
label: "页面大小",
type: "select",
options: ["A3", "A4", "A5", "Legal", "Letter", "Tabloid"],
},
{ key: "savePath", label: "保存路径", icon: "save", type: "input" },
],
device: [
{
key: "size.width",
label: "设备宽度",
icon: "width",
type: "input",
inputType: "number",
width: 6,
},
{
key: "size.height",
label: "设备高度",
icon: "height",
type: "input",
inputType: "number",
width: 6,
},
{
key: "useragent",
label: "设备User-Agent",
icon: "phone_android",
type: "input",
},
],
cookies: [
{ key: "name", label: "Cookie名称", icon: "cookie", type: "input" },
],
setCookies: [
{ key: "items", label: "Cookie列表", type: "cookie-list" },
],
removeCookies: [
{ key: "name", label: "Cookie名称", icon: "cookie", type: "input" },
],
clearCookies: [
{ key: "url", label: "URL(可选)", icon: "link", type: "input" },
],
evaluate: [
{
key: "function",
label: "JavaScript代码",
icon: "code",
type: "textarea",
},
{ key: "params", label: "参数列表", type: "param-list" },
],
when: [
{
key: "condition",
label: "条件(JavaScript表达式或选择器)",
icon: "rule",
type: "textarea",
},
],
mousedown: [
{
key: "selector",
label: "按下元素选择器",
icon: "mouse",
type: "input",
},
],
mouseup: [
{
key: "selector",
label: "释放元素选择器",
icon: "mouse",
type: "input",
},
],
file: [
{
key: "selector",
label: "文件输入框选择器",
icon: "upload_file",
type: "input",
},
{ key: "files", label: "文件列表", type: "file-list" },
],
value: [
{
key: "selector",
label: "元素选择器",
icon: "input",
type: "input",
},
{ key: "value", label: "设置的值", icon: "edit", type: "input" },
],
check: [
{
key: "selector",
label: "复选框/选框选择器",
icon: "check_box",
type: "input",
},
{ key: "checked", label: "选中状态", type: "checkbox" },
],
focus: [
{
key: "selector",
label: "元素选择器",
icon: "center_focus_strong",
type: "input",
},
],
scroll: [
{
key: "target",
label: "目标元素选择器(可选)",
icon: "swap_vert",
type: "input",
},
{
key: "x",
label: "X坐标",
icon: "drag_handle",
type: "input",
inputType: "number",
width: 6,
},
{
key: "y",
label: "Y坐标",
icon: "drag_handle",
type: "input",
inputType: "number",
width: 6,
},
],
download: [
{ key: "url", label: "下载URL", icon: "link", type: "input" },
{ key: "savePath", label: "保存路径", icon: "save", type: "input" },
],
};
return configs[action];
},
},
});
</script>
<style scoped>
.operation-list {
min-height: 50px;
display: flex;
flex-direction: column;
gap: 4px;
}
.operation-list :deep(.q-field) div,
.operation-list :deep(div.q-checkbox__label) {
font-size: 12px !important;
}
.operation-item {
transition: all 0.3s;
border-radius: 4px;
margin: 0;
padding: 2px 4px;
border-color: rgba(0, 0, 0, 0.15);
}
.operation-item:hover {
background: rgba(0, 0, 0, 0.25);
}
.body--dark .operation-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.15);
}
.body--dark .operation-item:hover {
background: rgba(0, 0, 0, 0.25);
}
.move-btn {
opacity: 0.6;
transition: opacity 0.3s;
}
.operation-item:hover .move-btn {
opacity: 1;
}
.delete-btn {
opacity: 0.6;
transition: opacity 0.3s;
}
.operation-item:hover .delete-btn {
opacity: 1;
}
.text-subtitle2 {
font-size: 0.9rem;
font-weight: 500;
}
.q-item-section {
transition: all 0.3s;
}
.operation-item:hover .q-item-section {
opacity: 1;
}
</style>

201
src/components/editor/composer/ubrowser/UBrowserRun.vue Normal file
View File

@ -0,0 +1,201 @@
<template>
<div class="row q-col-gutter-sm">
<!-- 基础设置 -->
<div class="col-12">
<q-checkbox
:value="configs.run.show"
@update:modelValue="updateConfig('run.show', $event)"
label="显示窗口"
/>
</div>
<!-- 窗口大小 -->
<div class="col-12">
<div class="text-subtitle2 q-mb-sm">窗口大小</div>
<div class="row q-col-gutter-sm">
<UBrowserInput
:value="configs.run.width"
@update:modelValue="updateConfig('run.width', $event)"
type="number"
label="宽度"
:width="6"
icon="width"
/>
<UBrowserInput
:value="configs.run.height"
@update:modelValue="updateConfig('run.height', $event)"
type="number"
label="高度"
:width="6"
icon="height"
/>
</div>
</div>
<!-- 窗口位置 -->
<div class="col-12">
<div class="text-subtitle2 q-mb-sm">窗口位置</div>
<div class="row q-col-gutter-sm">
<UBrowserInput
:value="configs.run.x"
@update:modelValue="updateConfig('run.x', $event)"
type="number"
label="X坐标"
:width="6"
icon="drag_handle"
/>
<UBrowserInput
:value="configs.run.y"
@update:modelValue="updateConfig('run.y', $event)"
type="number"
label="Y坐标"
:width="6"
icon="drag_handle"
/>
</div>
</div>
<!-- 窗口限制 -->
<div class="col-12">
<div class="text-subtitle2 q-mb-sm">窗口限制</div>
<div class="row q-col-gutter-sm">
<UBrowserInput
:value="configs.run.minWidth"
@update:modelValue="updateConfig('run.minWidth', $event)"
type="number"
label="最小宽度"
:width="6"
icon="width"
/>
<UBrowserInput
:value="configs.run.minHeight"
@update:modelValue="updateConfig('run.minHeight', $event)"
type="number"
label="最小高度"
:width="6"
icon="height"
/>
<UBrowserInput
:value="configs.run.maxWidth"
@update:modelValue="updateConfig('run.maxWidth', $event)"
type="number"
label="最大宽度"
:width="6"
icon="width"
/>
<UBrowserInput
:value="configs.run.maxHeight"
@update:modelValue="updateConfig('run.maxHeight', $event)"
type="number"
label="最大高度"
:width="6"
icon="height"
/>
</div>
</div>
<!-- 窗口行为 -->
<div class="col-12">
<div class="text-subtitle2 q-mb-sm">窗口行为</div>
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-checkbox
:value="configs.run.center"
@update:modelValue="updateConfig('run.center', $event)"
label="居中显示"
/>
</div>
<div class="col-12">
<q-checkbox
:value="configs.run.resizable"
@update:modelValue="updateConfig('run.resizable', $event)"
label="允许调整大小"
/>
</div>
<div class="col-12">
<q-checkbox
:value="configs.run.movable"
@update:modelValue="updateConfig('run.movable', $event)"
label="允许移动"
/>
</div>
<div class="col-12">
<q-checkbox
:value="configs.run.minimizable"
@update:modelValue="updateConfig('run.minimizable', $event)"
label="允许最小化"
/>
</div>
<div class="col-12">
<q-checkbox
:value="configs.run.maximizable"
@update:modelValue="updateConfig('run.maximizable', $event)"
label="允许最大化"
/>
</div>
<div class="col-12">
<q-checkbox
:value="configs.run.alwaysOnTop"
@update:modelValue="updateConfig('run.alwaysOnTop', $event)"
label="总是置顶"
/>
</div>
<div class="col-12">
<q-checkbox
:value="configs.run.fullscreen"
@update:modelValue="updateConfig('run.fullscreen', $event)"
label="全屏显示"
/>
</div>
<div class="col-12">
<q-checkbox
:value="configs.run.fullscreenable"
@update:modelValue="updateConfig('run.fullscreenable', $event)"
label="允许全屏"
/>
</div>
<div class="col-12">
<q-checkbox
:value="configs.run.enableLargerThanScreen"
@update:modelValue="updateConfig('run.enableLargerThanScreen', $event)"
label="允许超出屏幕大小"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import UBrowserInput from './operations/UBrowserInput.vue';
export default defineComponent({
name: 'UBrowserRun',
components: {
UBrowserInput
},
props: {
configs: {
type: Object,
required: true
}
},
emits: ['update:configs'],
methods: {
updateConfig(path, value) {
const newConfigs = { ...this.configs };
const keys = path.split('.');
let current = newConfigs;
for (let i = 0; i < keys.length - 1; i++) {
current[keys[i]] = { ...current[keys[i]] };
current = current[keys[i]];
}
current[keys[keys.length - 1]] = value;
this.$emit('update:configs', newConfigs);
}
}
});
</script>

65
src/components/editor/composer/ubrowser/operations/UBrowserInput.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="row q-col-gutter-sm">
<div :class="fullWidth ? 'col-12' : 'col-' + width">
<q-input
:value="modelValue"
v-bind="$attrs"
filled
square
:dense="!large"
@update:modelValue="handleInput"
>
<template v-if="$slots.prepend" v-slot:prepend>
<slot name="prepend" />
</template>
<template v-else-if="icon" v-slot:prepend>
<q-icon :name="icon" />
</template>
<template v-if="$slots.append" v-slot:append>
<slot name="append" />
</template>
</q-input>
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "UBrowserInput",
inheritAttrs: false,
props: {
modelValue: {
type: [String, Number],
default: "",
},
icon: {
type: String,
default: "",
},
width: {
type: [Number, String],
default: 12,
},
fullWidth: {
type: Boolean,
default: true,
},
flat: {
type: Boolean,
default: false,
},
large: {
type: Boolean,
default: false,
},
},
emits: ["update:modelValue"],
methods: {
handleInput(value) {
this.$emit("update:modelValue", value);
},
},
});
</script>

270
src/components/editor/composer/ubrowser/operations/UBrowserOperation.vue Normal file
View File

@ -0,0 +1,270 @@
<template>
<div class="operation-item-argv q-mb-md">
<div class="text-subtitle2 q-mb-sm">{{ title }}</div>
<div class="row q-col-gutter-sm">
<template v-for="(field, index) in fields" :key="index">
<!-- 输入框 -->
<template v-if="field.type === 'input'">
<UBrowserInput
:value="getFieldValue(field.key)"
@update:modelValue="updateFieldValue(field.key, $event)"
:label="field.label"
:icon="field.icon"
:type="field.inputType || 'text'"
:width="field.width"
v-bind="field.props || {}"
/>
</template>
<!-- 选择框 -->
<template v-if="field.type === 'select'">
<q-select
:value="getFieldValue(field.key)"
@update:modelValue="updateFieldValue(field.key, $event)"
:options="field.options"
:label="field.label"
outlined
dense
class="col-12"
v-bind="field.props || {}"
/>
</template>
<!-- 单个复选框 -->
<template v-if="field.type === 'checkbox'">
<div class="col-12">
<q-checkbox
:value="getFieldValue(field.key)"
@update:modelValue="updateFieldValue(field.key, $event)"
:label="field.label"
/>
</div>
</template>
<!-- 复选框组 -->
<template v-if="field.type === 'checkbox-group'">
<q-option-group
:value="getFieldValue(field.key)"
@update:modelValue="updateFieldValue(field.key, $event)"
:options="field.options"
type="checkbox"
inline
class="col-12"
/>
</template>
<!-- 文本域 -->
<template v-if="field.type === 'textarea'">
<UBrowserInput
:value="getFieldValue(field.key)"
@update:modelValue="updateFieldValue(field.key, $event)"
:label="field.label"
:icon="field.icon"
type="textarea"
autogrow
class="col-12"
/>
</template>
<!-- Cookie列表 -->
<template v-if="field.type === 'cookie-list'">
<div class="col-12">
<div
v-for="(item, idx) in getFieldValue(field.key)"
:key="idx"
class="row q-col-gutter-sm q-mb-sm"
>
<UBrowserInput
:value="item.name"
@update:modelValue="
updateCookieField(field.key, idx, 'name', $event)
"
label="名称"
:width="5"
icon="label"
/>
<UBrowserInput
:value="item.value"
@update:modelValue="
updateCookieField(field.key, idx, 'value', $event)
"
label="值"
:width="5"
icon="edit"
/>
<div class="col-2 flex items-center">
<q-btn
flat
round
dense
color="negative"
icon="remove"
@click="removeCookie(field.key, idx)"
v-if="getFieldValue(field.key).length > 1"
/>
</div>
</div>
<q-btn
outline
color="primary"
label="添加Cookie"
icon="add"
@click="addCookie(field.key)"
class="q-mt-sm"
/>
</div>
</template>
<!-- 参数列表 -->
<template v-if="field.type === 'param-list'">
<div class="col-12">
<div class="row items-center q-gutter-sm q-mb-sm">
<UBrowserInput
v-model="newParam"
label="参数"
:width="10"
icon="functions"
/>
<q-btn flat round dense icon="add" @click="addParam(field.key)" />
</div>
<div v-if="getFieldValue(field.key).length > 0" class="q-mt-sm">
<q-chip
v-for="(param, idx) in getFieldValue(field.key)"
:key="idx"
removable
@remove="removeParam(field.key, idx)"
>
{{ param }}
</q-chip>
</div>
</div>
</template>
<!-- 文件列表 -->
<template v-if="field.type === 'file-list'">
<div class="col-12">
<div class="row items-center q-gutter-sm q-mb-sm">
<UBrowserInput
v-model="newFile"
label="文件路径"
:width="10"
icon="upload_file"
/>
<q-btn flat round dense icon="add" @click="addFile(field.key)" />
</div>
<div v-if="getFieldValue(field.key).length > 0" class="q-mt-sm">
<q-chip
v-for="(file, idx) in getFieldValue(field.key)"
:key="idx"
removable
@remove="removeFile(field.key, idx)"
>
{{ file }}
</q-chip>
</div>
</div>
</template>
</template>
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
import UBrowserInput from "./UBrowserInput.vue";
export default defineComponent({
name: "UBrowserOperation",
components: {
UBrowserInput,
},
data() {
return {
newParam: "",
newFile: "",
};
},
props: {
configs: {
type: Object,
required: true,
},
action: {
type: String,
required: true,
},
title: {
type: String,
},
fields: {
type: Array,
required: true,
},
},
emits: ["update:configs"],
methods: {
addCookie(key) {
const items = [...(this.getFieldValue(key) || [])];
items.push({ name: "", value: "" });
this.updateFieldValue(key, items);
},
removeCookie(key, index) {
const items = [...this.getFieldValue(key)];
items.splice(index, 1);
this.updateFieldValue(key, items);
},
updateCookieField(key, index, field, value) {
const items = [...this.getFieldValue(key)];
items[index] = {
...items[index],
[field]: value,
};
this.updateFieldValue(key, items);
},
addParam(key) {
if (this.newParam) {
const params = [...(this.getFieldValue(key) || [])];
params.push(this.newParam);
this.updateFieldValue(key, params);
this.newParam = "";
}
},
removeParam(key, index) {
const params = [...this.getFieldValue(key)];
params.splice(index, 1);
this.updateFieldValue(key, params);
},
addFile(key) {
if (this.newFile) {
const files = [...(this.getFieldValue(key) || [])];
files.push(this.newFile);
this.updateFieldValue(key, files);
this.newFile = "";
}
},
removeFile(key, index) {
const files = [...this.getFieldValue(key)];
files.splice(index, 1);
this.updateFieldValue(key, files);
},
getFieldValue(key) {
return this.configs[this.action][key];
},
updateFieldValue(key, value) {
this.$emit("update:configs", {
...this.configs,
[this.action]: {
...this.configs[this.action],
[key]: value,
},
});
},
},
});
</script>
<style scoped>
.operation-item-argv {
padding: 0 4px;
}
</style>