mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-08 14:34:13 +08:00
编排UI新增输入框；调整了showInputBox接口，以方便可视化编排调用
This commit is contained in:
fofolee
parent
b6bdb88fe9
commit
53a411c664
@ -5,13 +5,14 @@
|
||||
:model-value="funcName"
|
||||
@update:model-value="funcName = $event"
|
||||
:options="localCommand.functionSelector?.options"
|
||||
class="width-12"
|
||||
/>
|
||||
<div class="flex-container">
|
||||
<div
|
||||
v-for="(item, index) in localConfig"
|
||||
:key="index"
|
||||
class="flex-item"
|
||||
:style="{ flex: item.width || 12 }"
|
||||
class="grid-item"
|
||||
:style="getColumnStyle(item.width)"
|
||||
>
|
||||
<VariableInput
|
||||
v-if="item.type === 'varInput'"
|
||||
@ -49,23 +50,25 @@
|
||||
/>
|
||||
<q-select
|
||||
v-else-if="item.type === 'select'"
|
||||
filled
|
||||
:model-value="argvs[index]"
|
||||
@update:model-value="updateArgv(index, $event)"
|
||||
:options="item.options"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon :name="item.icon" />
|
||||
<q-icon :name="item.icon || 'code'" />
|
||||
</template>
|
||||
</q-select>
|
||||
<q-input
|
||||
v-else-if="item.type === 'input'"
|
||||
filled
|
||||
:model-value="argvs[index]"
|
||||
@update:model-value="updateArgv(index, $event)"
|
||||
:label="item.label"
|
||||
:icon="item.icon"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon :name="item.icon" />
|
||||
<q-icon :name="item.icon || 'code'" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-checkbox
|
||||
@ -197,6 +200,12 @@ export default defineComponent({
|
||||
code: this.generateCode(funcName, argvs),
|
||||
});
|
||||
},
|
||||
getColumnStyle(width = 12) {
|
||||
const columnWidth = (width / 12) * 100;
|
||||
return {
|
||||
width: `calc(${columnWidth}% - var(--grid-gap))`,
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (!this.modelValue.argvs && !this.modelValue.code) {
|
||||
@ -210,17 +219,19 @@ export default defineComponent({
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
--grid-gap: 8px;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
min-width: 100px;
|
||||
.grid-item {
|
||||
min-width: 50px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.flex-item {
|
||||
flex: 1 1 100% !important;
|
||||
.grid-item {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
:class="['col', options.keys.length > 1 ? 'q-pr-sm' : '']"
|
||||
>
|
||||
<VariableInput
|
||||
:model-value="item[key]"
|
||||
:label="key"
|
||||
:model-value="item[key.value || key]"
|
||||
:label="key.label || key"
|
||||
:icon="icon || 'code'"
|
||||
@update:model-value="(val) => updateItemKeyValue(index, key, val)"
|
||||
/>
|
||||
|
||||
@ -57,6 +57,18 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
const quickcommandUI = {
|
||||
/**
|
||||
* 显示一个输入框组对话框，并返回用户输入的所有值
|
||||
*
|
||||
* @param options 数组，如果元素为字符串，则作为输入框的标签名；如果元素为对象，则作为输入框的属性，（旧），可为对象，包含label、value、hint三个属性
|
||||
*
|
||||
* @example options = ["请输入", "请输入2"]
|
||||
* @example options = [{label: "请输入", value: "", hint: ""}, {label: "请输入2", value: "", hint: ""}]
|
||||
* @example options = {labels: ["请输入", "请输入2"], values: ["", ""], hints: ["", ""]}
|
||||
*
|
||||
* @param title 窗口标题，默认为空
|
||||
*
|
||||
*/
|
||||
showInputBox: (options = ["请输入"], title = "") =>
|
||||
new Promise((reslove, reject) => {
|
||||
let props = {
|
||||
@ -67,11 +79,31 @@ export default {
|
||||
};
|
||||
if (!window.lodashM.isObject(options))
|
||||
return reject(new TypeError(`应为 Object, 而非 ${typeof options}`));
|
||||
if (window.lodashM.isArray(options)) props.labels = options;
|
||||
else Object.assign(props, options);
|
||||
if (window.lodashM.isArray(options)) {
|
||||
options.forEach((item) => {
|
||||
if (typeof item === "string") {
|
||||
props.labels.push(item);
|
||||
props.values.push("");
|
||||
props.hints.push("");
|
||||
} else {
|
||||
props.labels.push(item.label);
|
||||
props.values.push(item.value);
|
||||
props.hints.push(item.hint);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 兼容旧版本
|
||||
Object.assign(props, options);
|
||||
}
|
||||
this.showUI(InputBox, props, false, reslove);
|
||||
}),
|
||||
|
||||
/**
|
||||
* 显示一个按钮组对话框，并返回用户点击的按钮的标签
|
||||
*
|
||||
* @param labels 按钮标签数组，默认为["确定"]
|
||||
* @param title 窗口标题，默认为空
|
||||
*/
|
||||
showButtonBox: (labels = ["确定"], title = "") =>
|
||||
new Promise((reslove, reject) => {
|
||||
if (!window.lodashM.isArray(labels))
|
||||
@ -79,6 +111,14 @@ export default {
|
||||
this.showUI(ButtonBox, { labels, title }, false, reslove);
|
||||
}),
|
||||
|
||||
/**
|
||||
* 显示一个确认对话框，并返回用户点击的按钮的标签
|
||||
*
|
||||
* @param message 确认消息，默认为空
|
||||
* @param title 窗口标题，默认为空
|
||||
* @param isHtml 是否为html消息，默认为false
|
||||
* @param width 窗口宽度，默认为300
|
||||
*/
|
||||
showConfirmBox: (message = "", title = "提示", isHtml = false, width) =>
|
||||
new Promise((reslove, reject) => {
|
||||
this.showUI(
|
||||
@ -89,6 +129,14 @@ export default {
|
||||
);
|
||||
}),
|
||||
|
||||
/**
|
||||
* 显示一个消息框，并返回用户点击的按钮的标签
|
||||
*
|
||||
* @param message 消息内容，默认为空
|
||||
* @param icon 消息图标，默认为"success"
|
||||
* @param time 消息显示时间，默认为消息内容长度乘以120毫秒
|
||||
* @param position 消息显示位置，默认为"top"
|
||||
*/
|
||||
showMessageBox: (message, icon = "success", time, position = "top") => {
|
||||
message = window.lodashM.truncate(message, { length: 1200 });
|
||||
if (icon === "success") icon = "positive";
|
||||
@ -112,11 +160,23 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示一个文本区域对话框，并返回用户输入的文本
|
||||
*
|
||||
* @param placeholder 文本区域提示，默认为空
|
||||
* @param value 文本区域默认值，默认为空
|
||||
*/
|
||||
showTextArea: (placeholder = "", value = "") =>
|
||||
new Promise((reslove, reject) => {
|
||||
this.showUI(TextArea, { placeholder, value }, true, reslove);
|
||||
}),
|
||||
|
||||
/**
|
||||
* 显示一个支持搜索的且可以动态更新的选项列表，选项类型为文本或html
|
||||
*
|
||||
* @param initItems 初始选项数组，默认为空
|
||||
* @param options 选项列表配置，默认为空
|
||||
*/
|
||||
showSelectList: (initItems, options = {}) =>
|
||||
new Promise((reslove, reject) => {
|
||||
if (!window.lodashM.isArray(initItems))
|
||||
@ -134,27 +194,50 @@ export default {
|
||||
this.showUI(SelectList, { initItems, options }, true, reslove);
|
||||
}),
|
||||
|
||||
/**
|
||||
* 显示一个等待按钮，并返回用户点击的按钮的标签
|
||||
*
|
||||
* @param callback 等待回调函数
|
||||
* @param label 按钮标签，默认为"确定"
|
||||
*/
|
||||
showWaitButton: (callback, label = "确定") => {
|
||||
this.wbLabel = label;
|
||||
this.showWb = true;
|
||||
this.wbEvent = callback;
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭等待按钮
|
||||
*/
|
||||
closeWaitButton: () => {
|
||||
this.showWb = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新选项列表
|
||||
*
|
||||
* @param opt 新选项
|
||||
* @param id 选项索引，默认为undefined
|
||||
*/
|
||||
updateSelectList: (opt, id) => {
|
||||
if (this.currentUI !== SelectList) throw "请先创建 selectList";
|
||||
if (typeof id === "undefined") this.$refs.ui.items.push(opt);
|
||||
else this.$refs.ui.items[id] = opt;
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听全局快捷键
|
||||
*
|
||||
* @param callback 快捷键回调函数
|
||||
*/
|
||||
listenKeydown: (callback) => {
|
||||
this.listeners.push(callback);
|
||||
document.addEventListener("keydown", callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 移除全局快捷键
|
||||
*/
|
||||
removeListener: () => {
|
||||
this.listeners.forEach((listener) => {
|
||||
document.removeEventListener("keydown", listener);
|
||||
|
||||
@ -220,19 +220,19 @@ export const dataCommands = {
|
||||
label: "整数",
|
||||
type: "switch",
|
||||
defaultValue: false,
|
||||
width: 1,
|
||||
width: 2,
|
||||
},
|
||||
{
|
||||
label: "起始值",
|
||||
icon: "last_page",
|
||||
type: "numInput",
|
||||
width: 10,
|
||||
width: 5,
|
||||
},
|
||||
{
|
||||
label: "结束值",
|
||||
icon: "first_page",
|
||||
type: "numInput",
|
||||
width: 10,
|
||||
width: 5,
|
||||
},
|
||||
],
|
||||
outputVariable: "randomNumber",
|
||||
|
||||
@ -18,13 +18,13 @@ export const simulateCommands = {
|
||||
label: "X坐标（留空则原地点击）",
|
||||
icon: "drag_handle",
|
||||
type: "numInput",
|
||||
width: 8,
|
||||
width: 6,
|
||||
},
|
||||
{
|
||||
label: "Y坐标（留空则原地点击）",
|
||||
icon: "drag_handle",
|
||||
type: "numInput",
|
||||
width: 8,
|
||||
width: 6,
|
||||
},
|
||||
],
|
||||
functionSelector: {
|
||||
@ -33,17 +33,19 @@ export const simulateCommands = {
|
||||
{
|
||||
label: "单击",
|
||||
value: "utools.simulateMouseClick",
|
||||
icon: "mouse",
|
||||
},
|
||||
{
|
||||
label: "右击",
|
||||
value: "utools.simulateMouseRightClick",
|
||||
icon: "mouse",
|
||||
},
|
||||
{
|
||||
label: "双击",
|
||||
value: "utools.simulateMouseDoubleClick",
|
||||
icon: "mouse",
|
||||
},
|
||||
],
|
||||
width: 2,
|
||||
allowEmptyArgv: true,
|
||||
},
|
||||
},
|
||||
@ -56,14 +58,14 @@ export const simulateCommands = {
|
||||
icon: "drag_handle",
|
||||
defaultValue: 0,
|
||||
type: "numInput",
|
||||
width: 8,
|
||||
width: 6,
|
||||
},
|
||||
{
|
||||
label: "Y坐标",
|
||||
icon: "drag_handle",
|
||||
defaultValue: 0,
|
||||
type: "numInput",
|
||||
width: 8,
|
||||
width: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -5,7 +5,7 @@ export const uiCommands = {
|
||||
commands: [
|
||||
{
|
||||
value: "quickcommand.showButtonBox",
|
||||
label: "按钮组弹窗",
|
||||
label: "按钮组",
|
||||
isAsync: true,
|
||||
outputVariable: "{id,text}",
|
||||
saveOutput: true,
|
||||
@ -15,12 +15,12 @@ export const uiCommands = {
|
||||
type: "arrayEditor",
|
||||
defaultValue: [
|
||||
{
|
||||
value: "按钮1",
|
||||
value: "是",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
{
|
||||
value: "按钮2",
|
||||
value: "否",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
@ -28,5 +28,45 @@ export const uiCommands = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "quickcommand.showInputBox",
|
||||
label: "输入框",
|
||||
isAsync: true,
|
||||
outputVariable: "[inputValue1]",
|
||||
saveOutput: true,
|
||||
config: [
|
||||
{
|
||||
label: "输入框",
|
||||
type: "arrayEditor",
|
||||
width: 12,
|
||||
options: {
|
||||
keys: [
|
||||
{
|
||||
label: "标签",
|
||||
value: "label",
|
||||
},
|
||||
{
|
||||
label: "默认值",
|
||||
value: "value",
|
||||
},
|
||||
],
|
||||
},
|
||||
defaultValue: [
|
||||
{
|
||||
label: {
|
||||
value: "请输入",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
value: {
|
||||
value: "",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -114,7 +114,7 @@ export function processVariable({ value, existingVars }) {
|
||||
key,
|
||||
processedName,
|
||||
needsRename: processedName !== varName,
|
||||
hasRename: parts.length > 1
|
||||
hasRename: parts.length > 1,
|
||||
};
|
||||
});
|
||||
|
||||
@ -135,9 +135,9 @@ export function processVariable({ value, existingVars }) {
|
||||
const format =
|
||||
destructured.format === "array"
|
||||
? `[${processedVars.map((v) => v.key).join(", ")}]`
|
||||
: `{${processedVars.map((v) =>
|
||||
v.hasRename ? `${v.key}:${v.processedName}` : v.key
|
||||
).join(", ")}}`;
|
||||
: `{${processedVars
|
||||
.map((v) => (v.hasRename ? `${v.key}:${v.processedName}` : v.key))
|
||||
.join(", ")}}`;
|
||||
|
||||
return {
|
||||
isValid: true,
|
||||
|
||||
@ -25,18 +25,16 @@ interface quickcommandApi {
|
||||
* console.log(`输入的内容分别为${values}`)
|
||||
* })
|
||||
*
|
||||
* quickcommand.showInputBox({labels:["输入框标签"],values:["默认值"],hints:["输入框提示"]}).then(values => {
|
||||
* quickcommand.showInputBox([{label:"输入框标签",value:"默认值",hint:"输入框提示"},{label:"输入框标签2",value:"默认值2",hint:"输入框提示2"}]).then(values => {
|
||||
* console.log(`输入的内容分别为${values}`)
|
||||
* })
|
||||
* ```
|
||||
*
|
||||
*
|
||||
*
|
||||
* @param options 数组时，为每一个输入框的标签名；对象时，为每一个输入框的属性
|
||||
* @param options 数组，如果元素为字符串，则作为输入框的标签名；如果元素为对象，则作为输入框的属性，包含label、value、hint三个属性
|
||||
* @param title 窗口标题，默认为空
|
||||
*/
|
||||
showInputBox(
|
||||
options: string[] | { labels: string[]; values: string[]; hints: string[] },
|
||||
options: string[] | { labels: string; values: string; hints: string }[],
|
||||
title?: string
|
||||
): Promise<string[]>;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user