study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-16 19:26:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

selectList 80%

Browse Source
This commit is contained in:
fofolee 2022-04-11 12:15:31 +08:00
parent 7a04d2108a
commit 1b55377c3c
4 changed files with 364 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/preload.js
View File

@ -94,15 +94,6 @@ window.quickcommand = {
}) })
}, },
// 显示选项列表
showSelectList: function(selects, opt = {}) {
return new Promise((reslove, reject) => {})
},
// 更新选项列表
updateSelectList: function(opt, id) {
},
// 关闭进程 // 关闭进程
kill: function(pid, signal = 'SIGTERM') { kill: function(pid, signal = 'SIGTERM') {
process.kill(pid, signal) process.kill(pid, signal)

152
src/components/quickcommandUI/SelectList.vue
View File

@ -4,43 +4,54 @@
maximized maximized
ref="dialog" ref="dialog"
transition-show="fade" transition-show="fade"
transition-hide="fade"
@hide="onDialogHide" @hide="onDialogHide"
> >
<q-scroll-area <q-card>
ref="scrollbar" <q-virtual-scroll
:thumb-style="{ ref="scrollBar"
width: '7px', :style="{ maxHeight: listMaxHeight + 'px' }"
}" :virtual-scroll-slice-size="lazyItemSize"
> :virtual-scroll-item-size="itemHeight"
<q-card> @virtual-scroll="scrollEvent"
<q-virtual-scroll :items="matchedItems"
virtual-scroll-slice-size="50" >
virtual-scroll-item-size="50" <template v-slot="{ item, index }">
@virtual-scroll="scrollEvent" <q-item
:items="items" :key="index"
> clickable
<template v-slot="{ item, index }"> v-ripple
<q-item @mousemove="currentIndex = index"
:key="index" @click="onOKClick"
ref="qitems" manual-focus
clickable :focused="index === currentIndex"
v-ripple :active="index === currentIndex"
@mousemove="currentIndex = index" :style="{
manual-focus height: itemHeight + 'px',
:focused="index === currentIndex" }"
:active="index === currentIndex" >
:style="{ <q-item-section v-if="isText">{{ item }}</q-item-section>
height: itemHeight + 'px', <q-item-section v-else-if="isJson">
}" <q-avatar v-if="item.icon">
> <q-icon :name="item.icon" />
<q-item-section> </q-avatar>
<q-item-section>{{ item }}</q-item-section> <q-item-label>{{ item.title }}</q-item-label>
</q-item-section> <q-item-label caption>{{ item.description }}</q-item-label>
</q-item> </q-item-section>
</template> <q-item-section v-else-if="isHtml">
</q-virtual-scroll> <div v-html="item"></div>
</q-card> </q-item-section>
</q-scroll-area> </q-item>
</template>
</q-virtual-scroll>
<q-btn
class="absolute-bottom-right q-ma-md"
round
color="primary"
icon="close"
@click="onCancelClick"
/>
</q-card>
</q-dialog> </q-dialog>
</template> </template>
@ -48,17 +59,44 @@
export default { export default {
data() { data() {
return { return {
result: this.items[0], listMaxHeight: 500,
currentIndex: 0, currentIndex: 0,
itemHeight: 50, itemHeight: 50,
lazyItemSize: 50,
searchWords: "",
}; };
}, },
mounted() { mounted() {
window.SelectList = this; window.SelectList = this;
this.setSubInput();
this.setUtoolsHeight(this.itemHeight * this.itemSize);
}, },
computed: { computed: {
maxIndex() { itemSize() {
return this.items.length - 1; return this.items.length;
},
matchedItems() {
if (!this.searchWords) return this.items;
let matchedItems = this.items.filter((x) => {
if (typeof x === "string") {
return x.toLowerCase().includes(this.searchWords.toLowerCase());
}
return (
x.title.toLowerCase().includes(this.searchWords.toLowerCase()) ||
x.description.toLowerCase().includes(this.searchWords.toLowerCase())
);
});
this.setUtoolsHeight(this.itemHeight * matchedItems.length);
return matchedItems;
},
isJson() {
return this.options.optionType === "json";
},
isHtml() {
return this.options.optionType === "html";
},
isText() {
return this.options.optionType === "plaintext";
}, },
}, },
props: { props: {
@ -70,6 +108,7 @@ export default {
show() { show() {
this.$refs.dialog.show(); this.$refs.dialog.show();
}, },
hide() { hide() {
this.$refs.dialog.hide(); this.$refs.dialog.hide();
}, },
@ -79,11 +118,20 @@ export default {
}, },
onOKClick() { onOKClick() {
this.$emit("ok", this.result); utools.removeSubInput();
let selected =
this.options.optionType === "json"
? this.matchedItems[this.currentIndex]
: {
id: this.currentIndex,
text: this.matchedItems[this.currentIndex],
};
this.$emit("ok", selected);
this.hide(); this.hide();
}, },
onCancelClick() { onCancelClick() {
utools.removeSubInput();
this.hide(); this.hide();
}, },
@ -94,13 +142,33 @@ export default {
this.currentIndex = Math.max(0, this.currentIndex - 1); this.currentIndex = Math.max(0, this.currentIndex - 1);
break; break;
case 40: case 40:
this.currentIndex = Math.min(this.maxIndex, this.currentIndex + 1); this.currentIndex = Math.min(
this.itemSize - 1,
this.currentIndex + 1
);
break; break;
case 13:
this.onOKClick();
return;
} }
// this.$refs.qitems[this.currentIndex].$el.scrollIntoViewIfNeeded(false); this.$refs.scrollBar.scrollTo(this.currentIndex);
}, },
scrollEvent(e) { scrollEvent(e) {
console.log(e); this.currentIndex =
e.direction === "increase"
? Math.max(e.index, this.currentIndex)
: Math.min(e.index + 9, this.currentIndex);
},
setSubInput() {
utools.setSubInput(({ text }) => {
this.searchWords = text;
}, this.options.placeholder);
},
setUtoolsHeight(height) {
utools.setExpendHeight(Math.min(height, this.listMaxHeight));
}, },
}, },
}; };

15
src/js/quickcommand.js
View File

@ -89,11 +89,9 @@ const quickcommand = {
}) })
}), }),
showSelectList: (selects, options = {}) => new Promise((reslove, reject) => {
showSelectList: (selects, options = { if (!options.placeholder) options.placeholder = "输入进行筛选"
placeholder: "请选择", if (!options.optionType) options.optionType = "plaintext"
optionType: "plaintext"
}) => new Promise((reslove, reject) => {
let props = { let props = {
items: selects, items: selects,
options: options options: options
@ -106,7 +104,12 @@ const quickcommand = {
}).onCancel(() => { }).onCancel(() => {
console.log('取消') console.log('取消')
}) })
}) }),
// 更新选项列表
updateSelectList: (opt, id) => {
},
} }
export default quickcommand export default quickcommand

469
src/plugins/monaco/types/quickcommand.api.d.ts vendored
View File

@ -12,270 +12,287 @@ interface quickcommandApi {
* @param buttons 每一个按钮的名称 * @param buttons 每一个按钮的名称
* @param title 窗口标题，默认为空 * @param title 窗口标题，默认为空
*/ */
showButtonBox(buttons: array, title?: string): Promise<{ id: number, text: string }>; showButtonBox(
buttons: array,
title?: string
): Promise<{ id: number; text: string }>;
/** /**
* 显示一个输入框组对话框，并返回用户输入的所有值 * 显示一个输入框组对话框，并返回用户输入的所有值
* *
* ```js * ```js
* quickcommand.showInputBox(["输入框1", "输入框2", "输入框3"]).then(values => { * quickcommand.showInputBox(["输入框1", "输入框2", "输入框3"]).then(values => {
* console.log(`输入的内容分别为${values}`) * console.log(`输入的内容分别为${values}`)
* }) * })
* *
* quickcommand.showInputBox({labels:["输入框标签"],values:["默认值"],hints:["输入框提示"]}).then(values => { * quickcommand.showInputBox({labels:["输入框标签"],values:["默认值"],hints:["输入框提示"]}).then(values => {
* console.log(`输入的内容分别为${values}`) * console.log(`输入的内容分别为${values}`)
* }) * })
* ``` * ```
* *
* *
* *
* @param options 数组时，为每一个输入框的标签名；对象时，为每一个输入框的属性 * @param options 数组时，为每一个输入框的标签名；对象时，为每一个输入框的属性
* @param title 窗口标题，默认为空 * @param title 窗口标题，默认为空
*/ */
showInputBox(options: array | { labels: array, values: array, hints: array }, title?: string): Promise<array>; showInputBox(
options: array | { labels: array; values: array; hints: array },
title?: string
): Promise<array>;
/** /**
* 显示一个支持搜索的且可以动态更新的选项列表，并返回用户点击选项的索引及名称 * 显示一个支持搜索的且可以动态更新的选项列表，选项类型为文本或html时，返回选择的索引和文本，为对象时，返回选择的对象
* *
* ```js * ```js
* // plaintext * // plaintext
* var opt = [] * var opt = []
* for (var i = 0; i < 15; i++) { * for (var i = 0; i < 15; i++) {
* // 每一个选项为文本格式 * // 每一个选项为文本格式
* opt.push(`选项` + i) * opt.push(`选项` + i)
* } * }
* quickcommand.showSelectList(opt).then(choise => { * quickcommand.showSelectList(opt).then(choise => {
* console.log(`选择的选项为${choise.text}`) * console.log(`选择的选项为${choise.text}`)
* }) * })
* ​ * ​
* // json * // json
* var opt = [] * var opt = []
* for (var i = 0; i < 15; i++) { * for (var i = 0; i < 15; i++) {
* // 每一个选项为 json 格式 * // 每一个选项为 json 格式
* opt.push({title: `选项${i}`, description: `选项${i}的描述`, abcd: `选项${i}的自定义属性`}) * opt.push({title: `选项${i}`, description: `选项${i}的描述`, icon: `选项${i}的图标`,abcd: `选项${i}的自定义属性`})
* } * }
* quickcommand.showSelectList(opt, {optionType: 'json'}).then(choise => { * quickcommand.showSelectList(opt, {optionType: 'json'}).then(choise => {
* console.log(`选择的选项为${choise.title}`) * console.log(`选择的选项为${choise.title}`)
* }) * })
* ​ * ​
* // html * // html
* var opt = [] * var opt = []
* for (var i = 0; i < 15; i++) { * for (var i = 0; i < 15; i++) {
* // 每一个选项为 html 格式 * // 每一个选项为 html 格式
* opt.push(`<div style="color: red">选项${i}</div>`) * opt.push(`<div style="color: red">选项${i}</div>`)
* } * }
* quickcommand.showSelectList(opt, {optionType: 'html'}).then(choise => { * quickcommand.showSelectList(opt, {optionType: 'html'}).then(choise => {
* console.log(`选择的选项为${quickcommand.htmlParse(choise.text).body.innerText}`) * console.log(`选择的选项为${quickcommand.htmlParse(choise.text).body.innerText}`)
* }) * })
* ``` * ```
* *
* @param selects 每一个列表选项 * @param selects 每一个列表选项
* @param options 列表的选项。placeholder: 搜索框占位符,optionType: 选项的格式，默认为plaintext * @param options 列表的选项。placeholder: 搜索框占位符,optionType: 选项的格式，默认为plaintext
*/ */
showSelectList(selects: array, options?: { placeholder: string, optionType: 'plaintext' | 'html' | 'json' }): Promise<{ id: number, text: string }>; showSelectList(
selects: array,
options?: { placeholder: string; optionType: "plaintext" | "html" | "json" }
): Promise<{ id: number; text: string | object }>;
/** /**
* 动态更新当前的选项列表的选项 * 动态更新当前的选项列表的选项
* *
* ```js * ```js
* // 初始状态只有 1、2、3 三个选项 * // 初始状态只有 1、2、3 三个选项
* quickcommand.showSelectList(['1','2','3']).then(x=>{ * quickcommand.showSelectList(['1','2','3']).then(x=>{
* console.log(x) * console.log(x)
* }) * })
* ​ * ​
* // 1s 后追加一个选项 * // 1s 后追加一个选项
* quickcommand.setTimeout(()=>{ * quickcommand.setTimeout(()=>{
* quickcommand.updateSelectList('4') * quickcommand.updateSelectList('4')
* }, 1000) * }, 1000)
* ​ * ​
* // 2s 后更新第二个选项的值 * // 2s 后更新第二个选项的值
* quickcommand.setTimeout(()=>{ * quickcommand.setTimeout(()=>{
* quickcommand.updateSelectList('updated', 1) * quickcommand.updateSelectList('updated', 1)
* }, 2000) * }, 2000)
* ``` * ```
* *
* @param opt 要更新的选项 * @param opt 要更新的选项
* @param id 要更新的选项的序号，不赋值时则追加到最后一个选项后面 * @param id 要更新的选项的序号，不赋值时则追加到最后一个选项后面
*/ */
updateSelectList(opt: string, id?: number): void; updateSelectList(opt: string, id?: number): void;
/** /**
* 显示一个文本框，并返回用户输入的值 * 显示一个文本框，并返回用户输入的值
* *
* ```js * ```js
* quickcommand.showTextAera("请输入文本").then(text=>{ * quickcommand.showTextAera("请输入文本").then(text=>{
* console.log(`输入的文本为${text}`) * console.log(`输入的文本为${text}`)
* }) * })
* ``` * ```
* *
* @param placeholder 文本框占位符 * @param placeholder 文本框占位符
* @param value 默认的文本值 * @param value 默认的文本值
*/ */
showTextArea(placeholder?: string, value?: string): Promise<string>; showTextArea(placeholder?: string, value?: string): Promise<string>;
/** /**
* 显示一个自动消失的提示框 * 显示一个自动消失的提示框
* *
* ```js * ```js
* quickcommand.showMessageBox("这是一段3s后自动消失的成功提示") * quickcommand.showMessageBox("这是一段3s后自动消失的成功提示")
* ``` * ```
* @param message 显示的消息内容 * @param message 显示的消息内容
* @param icon 图标，默认为 success * @param icon 图标，默认为 success
* @param time 多少毫秒后消失，默认为 3000 * @param time 多少毫秒后消失，默认为 3000
*/ */
showMessageBox(message: string, icon?: 'success' | 'error' | 'warning' | 'info' , time?: number): void; showMessageBox(
message: string,
icon?: "success" | "error" | "warning" | "info",
time?: number
): void;
/** /**
* 显示一个确认框，返回是否点击了确认 * 显示一个确认框，返回是否点击了确认
* *
* ```js * ```js
* quickcommand.showConfirmBox().then(confirmed => { * quickcommand.showConfirmBox().then(confirmed => {
* confirmed && console.log('点击了确定') * confirmed && console.log('点击了确定')
* }) * })
* ``` * ```
* @param message 提示的内容 * @param message 提示的内容
* @param title 提示的标题 * @param title 提示的标题
*/ */
showConfirmBox(message?: string, title?: string): Promise<boolean>; showConfirmBox(message?: string, title?: string): Promise<boolean>;
/** /**
* 同步等待，会阻塞进程 * 同步等待，会阻塞进程
* @param ms 等待的毫秒数 * @param ms 等待的毫秒数
*/ */
sleep(ms: number): void; sleep(ms: number): void;
/** /**
* 异步等待 * 异步等待
* *
* ```js * ```js
* quickcommand.setTimeout(()=>{ * quickcommand.setTimeout(()=>{
* console.log('2000毫秒后执行') * console.log('2000毫秒后执行')
* }, 2000) * }, 2000)
* ``` * ```
* *
* @param ms 等待的毫秒数 * @param ms 等待的毫秒数
*/ */
setTimeout(callback: () => void, ms) setTimeout(callback: () => void, ms);
/** /**
* 将给定的html字符串解析为 DOM 对象，用于快速编写爬虫脚本 * 将给定的html字符串解析为 DOM 对象，用于快速编写爬虫脚本
* *
* ```js * ```js
* var html = `<a href="https://u.tools/">uTools</a>` * var html = `<a href="https://u.tools/">uTools</a>`
* var href = quickcommand.htmlParse(html).querySelector('a').href * var href = quickcommand.htmlParse(html).querySelector('a').href
* console.log(`解析出来的a标签地址为${href}`) * console.log(`解析出来的a标签地址为${href}`)
* ``` * ```
* *
* @param html 需要解析的 html 文本 * @param html 需要解析的 html 文本
*/ */
htmlParse(html: string): object htmlParse(html: string): object;
/** /**
* 下载文件，并返回文件的 Buffer，可选直接下载到指定路径，或者弹出对话框选择下载路径 * 下载文件，并返回文件的 Buffer，可选直接下载到指定路径，或者弹出对话框选择下载路径
* *
* ```js * ```js
* // 下载文件到D:/ * // 下载文件到D:/
* quickcommand.downloadFile('https://res.u-tools.cn/currentversion/uTools-1.1.3.exe', 'D:/') * quickcommand.downloadFile('https://res.u-tools.cn/currentversion/uTools-1.1.3.exe', 'D:/')
* ​ * ​
* // 下载文件，并弹出对话框询问保存路径 * // 下载文件，并弹出对话框询问保存路径
* quickcommand.downloadFile('https://res.u-tools.cn/currentversion/uTools-1.1.3.exe') * quickcommand.downloadFile('https://res.u-tools.cn/currentversion/uTools-1.1.3.exe')
* ``` * ```
* *
* @param url 地址 * @param url 地址
* @param file 当赋值为文件路径时，则表示下载文件的绝对路径； * @param file 当赋值为文件路径时，则表示下载文件的绝对路径；
* 不赋值时，则会弹出对话框要求选择下载到的路径； * 不赋值时，则会弹出对话框要求选择下载到的路径；
* 赋值为 Object时，表示弹出对话框的 options，格式和 utools.showSaveDialog 中的 options一致 * 赋值为 Object时，表示弹出对话框的 options，格式和 utools.showSaveDialog 中的 options一致
*/ */
downloadFile(url, file?: string | object): Promise<Buffer> downloadFile(url, file?: string | object): Promise<Buffer>;
/** /**
* 上传文件，可以直接上传指定文件，或者弹出对话框选择要上传的文件，可以自定义表单数据 * 上传文件，可以直接上传指定文件，或者弹出对话框选择要上传的文件，可以自定义表单数据
* *
* ```js * ```js
* // 上传图片到图床 * // 上传图片到图床
* quickcommand.uploadFile("https://imgkr.com/api/v2/files/upload", "C:\\test.jpg").then(res=>{ * quickcommand.uploadFile("https://imgkr.com/api/v2/files/upload", "C:\\test.jpg").then(res=>{
* console.log('上传成功，图片地址为:' + res.data.data) * console.log('上传成功，图片地址为:' + res.data.data)
* }) * })
* ​ * ​
* // 包含额外表单数据 * // 包含额外表单数据
* quickcommand.uploadFile("https://catbox.moe/user/api.php", "C:\\test.jpg", 'fileToUpload', { * quickcommand.uploadFile("https://catbox.moe/user/api.php", "C:\\test.jpg", 'fileToUpload', {
* "reqtype": "fileupload" * "reqtype": "fileupload"
* }).then(res=>{ * }).then(res=>{
* console.log('上传成功，图片地址为:' + res.data) * console.log('上传成功，图片地址为:' + res.data)
* }) * })
* ``` * ```
* *
* @param url 地址 * @param url 地址
* @param file 当赋值为文件路径时，则表示要上传的文件的绝对路径； * @param file 当赋值为文件路径时，则表示要上传的文件的绝对路径；
* 不赋值时，则会弹出对话框要求选择要上传的文件的路径； * 不赋值时，则会弹出对话框要求选择要上传的文件的路径；
* 赋值为 Object时，表示弹出对话框的 options，格式和 utools.showOpenDialog 中的 options一致 * 赋值为 Object时，表示弹出对话框的 options，格式和 utools.showOpenDialog 中的 options一致
* *
* @param name 文件名，默认为 file * @param name 文件名，默认为 file
* @param formData 其他需要提交的表单数据 * @param formData 其他需要提交的表单数据
*/ */
uploadFile(url: string, file?: string | object, name?: string, formData?: object): Promise<object> uploadFile(
url: string,
file?: string | object,
name?: string,
formData?: object
): Promise<object>;
/** /**
* 加载一个远程脚本文件，并返回脚本 export 的对象 * 加载一个远程脚本文件，并返回脚本 export 的对象
* *
* ```js * ```js
* let remote = 'https://cdn.jsdelivr.net/npm/sweetalert2@9' * let remote = 'https://cdn.jsdelivr.net/npm/sweetalert2@9'
* quickcommand.loadRemoteScript(remote).then(swal => { * quickcommand.loadRemoteScript(remote).then(swal => {
* swal.fire('已加载 sweetalert2 并成功弹窗') * swal.fire('已加载 sweetalert2 并成功弹窗')
* }) * })
* ``` * ```
* *
* @param url 脚本地址 * @param url 脚本地址
*/ */
loadRemoteScript(url: string): Promise<object> loadRemoteScript(url: string): Promise<object>;
/** /**
* 将 signal 发送给 pid 标识的进程 , 默认为关闭进程，同process.kill * 将 signal 发送给 pid 标识的进程 , 默认为关闭进程，同process.kill
* @param pid 进程 ID * @param pid 进程 ID
* @param signal 进程信号，默认为SIGTERM * @param signal 进程信号，默认为SIGTERM
*/ */
kill(pid: number, signal?: number | string): void kill(pid: number, signal?: number | string): void;
/** /**
* windows 下运行 VBS 脚本并返回运行结果 * windows 下运行 VBS 脚本并返回运行结果
* *
* ```js * ```js
* quickcommand.runVbs(`CreateObject("SAPI.SpVoice").Speak"Hello"`) * quickcommand.runVbs(`CreateObject("SAPI.SpVoice").Speak"Hello"`)
* ``` * ```
* *
* @param script VBS 代码 * @param script VBS 代码
*/ */
runVbs(script: string): Promise<string> runVbs(script: string): Promise<string>;
/** /**
* 对应 utools.onPluginEnter 的 code type 和 payload * 对应 utools.onPluginEnter 的 code type 和 payload
* *
* code: 唯一标识 * code: 唯一标识
* *
* type: 匹配模式，可以为 text | img | files | regex | over | window * type: 匹配模式，可以为 text | img | files | regex | over | window
* *
* payload: 当匹配模式为关键字时，返回进入插件的关键字；为正则时，返回匹配的文本；为窗口时，返回匹配的窗口信息；为文件时，返回匹配的文件信息 * payload: 当匹配模式为关键字时，返回进入插件的关键字；为正则时，返回匹配的文本；为窗口时，返回匹配的窗口信息；为文件时，返回匹配的文件信息
* *
* ```js * ```js
* if (quickcommand.enterData.type == 'regex'){ * if (quickcommand.enterData.type == 'regex'){
* var text = quickcommand.enterData.payload * var text = quickcommand.enterData.payload
* console.log(`主输入框匹配的文本为${text}`) * console.log(`主输入框匹配的文本为${text}`)
* } * }
* ``` * ```
* *
*/ */
enterData: { code: string, type: string, payload: any } enterData: { code: string; type: string; payload: any };
/** /**
* 模拟复制操作 * 模拟复制操作
*/ */
simulateCopy() simulateCopy();
/** /**
* 模拟粘贴操作 * 模拟粘贴操作
*/ */
simulatePaste() simulatePaste();
} }
declare var quickcommand: quickcommandApi; declare var quickcommand: quickcommandApi;