diff --git a/public/preload.js b/public/preload.js
index ef6722f..1212f8c 100644
--- a/public/preload.js
+++ b/public/preload.js
@@ -94,15 +94,6 @@ window.quickcommand = {
})
},
- // 显示选项列表
- showSelectList: function(selects, opt = {}) {
- return new Promise((reslove, reject) => {})
- },
- // 更新选项列表
- updateSelectList: function(opt, id) {
-
- },
-
// 关闭进程
kill: function(pid, signal = 'SIGTERM') {
process.kill(pid, signal)
@@ -683,4 +674,4 @@ runCodeFile = (cmd, option, terminal, callback) => {
// let stderr = err_chunks.join("");
// callback(stdout, stderr)
// })
-}
\ No newline at end of file
+}
diff --git a/src/components/quickcommandUI/SelectList.vue b/src/components/quickcommandUI/SelectList.vue
index d7d357e..417754f 100644
--- a/src/components/quickcommandUI/SelectList.vue
+++ b/src/components/quickcommandUI/SelectList.vue
@@ -4,43 +4,54 @@
maximized
ref="dialog"
transition-show="fade"
+ transition-hide="fade"
@hide="onDialogHide"
>
-
-
-
-
-
-
- {{ item }}
-
-
-
-
-
-
+
+
+
+
+ {{ item }}
+
+
+
+
+ {{ item.title }}
+ {{ item.description }}
+
+
+
+
+
+
+
+
+
@@ -48,17 +59,44 @@
export default {
data() {
return {
- result: this.items[0],
+ listMaxHeight: 500,
currentIndex: 0,
itemHeight: 50,
+ lazyItemSize: 50,
+ searchWords: "",
};
},
mounted() {
window.SelectList = this;
+ this.setSubInput();
+ this.setUtoolsHeight(this.itemHeight * this.itemSize);
},
computed: {
- maxIndex() {
- return this.items.length - 1;
+ itemSize() {
+ 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: {
@@ -70,6 +108,7 @@ export default {
show() {
this.$refs.dialog.show();
},
+
hide() {
this.$refs.dialog.hide();
},
@@ -79,11 +118,20 @@ export default {
},
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();
},
onCancelClick() {
+ utools.removeSubInput();
this.hide();
},
@@ -94,13 +142,33 @@ export default {
this.currentIndex = Math.max(0, this.currentIndex - 1);
break;
case 40:
- this.currentIndex = Math.min(this.maxIndex, this.currentIndex + 1);
+ this.currentIndex = Math.min(
+ this.itemSize - 1,
+ this.currentIndex + 1
+ );
break;
+ case 13:
+ this.onOKClick();
+ return;
}
- // this.$refs.qitems[this.currentIndex].$el.scrollIntoViewIfNeeded(false);
+ this.$refs.scrollBar.scrollTo(this.currentIndex);
},
+
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));
},
},
};
diff --git a/src/js/quickcommand.js b/src/js/quickcommand.js
index 4385966..fb370e3 100644
--- a/src/js/quickcommand.js
+++ b/src/js/quickcommand.js
@@ -89,11 +89,9 @@ const quickcommand = {
})
}),
-
- showSelectList: (selects, options = {
- placeholder: "请选择",
- optionType: "plaintext"
- }) => new Promise((reslove, reject) => {
+ showSelectList: (selects, options = {}) => new Promise((reslove, reject) => {
+ if (!options.placeholder) options.placeholder = "输入进行筛选"
+ if (!options.optionType) options.optionType = "plaintext"
let props = {
items: selects,
options: options
@@ -106,7 +104,12 @@ const quickcommand = {
}).onCancel(() => {
console.log('取消')
})
- })
+ }),
+
+ // 更新选项列表
+ updateSelectList: (opt, id) => {
+
+ },
}
-export default quickcommand
\ No newline at end of file
+export default quickcommand
diff --git a/src/plugins/monaco/types/quickcommand.api.d.ts b/src/plugins/monaco/types/quickcommand.api.d.ts
index 09ffeb0..cf8f9bf 100644
--- a/src/plugins/monaco/types/quickcommand.api.d.ts
+++ b/src/plugins/monaco/types/quickcommand.api.d.ts
@@ -12,270 +12,287 @@ interface quickcommandApi {
* @param buttons 每一个按钮的名称
* @param title 窗口标题，默认为空
*/
- showButtonBox(buttons: array, title?: string): Promise<{ id: number, text: string }>;
+ showButtonBox(
+ buttons: array,
+ title?: string
+ ): Promise<{ id: number; text: string }>;
/**
- * 显示一个输入框组对话框，并返回用户输入的所有值
- *
- * ```js
- * quickcommand.showInputBox(["输入框1", "输入框2", "输入框3"]).then(values => {
- * console.log(`输入的内容分别为${values}`)
- * })
- *
- * quickcommand.showInputBox({labels:["输入框标签"],values:["默认值"],hints:["输入框提示"]}).then(values => {
- * console.log(`输入的内容分别为${values}`)
- * })
- * ```
- *
- *
- *
- * @param options 数组时，为每一个输入框的标签名；对象时，为每一个输入框的属性
- * @param title 窗口标题，默认为空
- */
- showInputBox(options: array | { labels: array, values: array, hints: array }, title?: string): Promise;
+ * 显示一个输入框组对话框，并返回用户输入的所有值
+ *
+ * ```js
+ * quickcommand.showInputBox(["输入框1", "输入框2", "输入框3"]).then(values => {
+ * console.log(`输入的内容分别为${values}`)
+ * })
+ *
+ * quickcommand.showInputBox({labels:["输入框标签"],values:["默认值"],hints:["输入框提示"]}).then(values => {
+ * console.log(`输入的内容分别为${values}`)
+ * })
+ * ```
+ *
+ *
+ *
+ * @param options 数组时，为每一个输入框的标签名；对象时，为每一个输入框的属性
+ * @param title 窗口标题，默认为空
+ */
+ showInputBox(
+ options: array | { labels: array; values: array; hints: array },
+ title?: string
+ ): Promise;
/**
- * 显示一个支持搜索的且可以动态更新的选项列表，并返回用户点击选项的索引及名称
- *
- * ```js
- * // plaintext
- * var opt = []
- * for (var i = 0; i < 15; i++) {
- * // 每一个选项为文本格式
- * opt.push(`选项` + i)
- * }
- * quickcommand.showSelectList(opt).then(choise => {
- * console.log(`选择的选项为${choise.text}`)
- * })
- *
- * // json
- * var opt = []
- * for (var i = 0; i < 15; i++) {
- * // 每一个选项为 json 格式
- * opt.push({title: `选项${i}`, description: `选项${i}的描述`, abcd: `选项${i}的自定义属性`})
- * }
- * quickcommand.showSelectList(opt, {optionType: 'json'}).then(choise => {
- * console.log(`选择的选项为${choise.title}`)
- * })
- *
- * // html
- * var opt = []
- * for (var i = 0; i < 15; i++) {
- * // 每一个选项为 html 格式
- * opt.push(`选项${i}
`)
- * }
- * quickcommand.showSelectList(opt, {optionType: 'html'}).then(choise => {
- * console.log(`选择的选项为${quickcommand.htmlParse(choise.text).body.innerText}`)
- * })
- * ```
- *
- * @param selects 每一个列表选项
- * @param options 列表的选项。placeholder: 搜索框占位符,optionType: 选项的格式，默认为plaintext
- */
- showSelectList(selects: array, options?: { placeholder: string, optionType: 'plaintext' | 'html' | 'json' }): Promise<{ id: number, text: string }>;
+ * 显示一个支持搜索的且可以动态更新的选项列表，选项类型为文本或html时，返回选择的索引和文本，为对象时，返回选择的对象
+ *
+ * ```js
+ * // plaintext
+ * var opt = []
+ * for (var i = 0; i < 15; i++) {
+ * // 每一个选项为文本格式
+ * opt.push(`选项` + i)
+ * }
+ * quickcommand.showSelectList(opt).then(choise => {
+ * console.log(`选择的选项为${choise.text}`)
+ * })
+ *
+ * // json
+ * var opt = []
+ * for (var i = 0; i < 15; i++) {
+ * // 每一个选项为 json 格式
+ * opt.push({title: `选项${i}`, description: `选项${i}的描述`, icon: `选项${i}的图标`,abcd: `选项${i}的自定义属性`})
+ * }
+ * quickcommand.showSelectList(opt, {optionType: 'json'}).then(choise => {
+ * console.log(`选择的选项为${choise.title}`)
+ * })
+ *
+ * // html
+ * var opt = []
+ * for (var i = 0; i < 15; i++) {
+ * // 每一个选项为 html 格式
+ * opt.push(`选项${i}
`)
+ * }
+ * quickcommand.showSelectList(opt, {optionType: 'html'}).then(choise => {
+ * console.log(`选择的选项为${quickcommand.htmlParse(choise.text).body.innerText}`)
+ * })
+ * ```
+ *
+ * @param selects 每一个列表选项
+ * @param options 列表的选项。placeholder: 搜索框占位符,optionType: 选项的格式，默认为plaintext
+ */
+ showSelectList(
+ selects: array,
+ options?: { placeholder: string; optionType: "plaintext" | "html" | "json" }
+ ): Promise<{ id: number; text: string | object }>;
/**
- * 动态更新当前的选项列表的选项
- *
- * ```js
- * // 初始状态只有 1、2、3 三个选项
- * quickcommand.showSelectList(['1','2','3']).then(x=>{
- * console.log(x)
- * })
- *
- * // 1s 后追加一个选项
- * quickcommand.setTimeout(()=>{
- * quickcommand.updateSelectList('4')
- * }, 1000)
- *
- * // 2s 后更新第二个选项的值
- * quickcommand.setTimeout(()=>{
- * quickcommand.updateSelectList('updated', 1)
- * }, 2000)
- * ```
- *
- * @param opt 要更新的选项
- * @param id 要更新的选项的序号，不赋值时则追加到最后一个选项后面
- */
+ * 动态更新当前的选项列表的选项
+ *
+ * ```js
+ * // 初始状态只有 1、2、3 三个选项
+ * quickcommand.showSelectList(['1','2','3']).then(x=>{
+ * console.log(x)
+ * })
+ *
+ * // 1s 后追加一个选项
+ * quickcommand.setTimeout(()=>{
+ * quickcommand.updateSelectList('4')
+ * }, 1000)
+ *
+ * // 2s 后更新第二个选项的值
+ * quickcommand.setTimeout(()=>{
+ * quickcommand.updateSelectList('updated', 1)
+ * }, 2000)
+ * ```
+ *
+ * @param opt 要更新的选项
+ * @param id 要更新的选项的序号，不赋值时则追加到最后一个选项后面
+ */
updateSelectList(opt: string, id?: number): void;
/**
- * 显示一个文本框，并返回用户输入的值
- *
- * ```js
- * quickcommand.showTextAera("请输入文本").then(text=>{
- * console.log(`输入的文本为${text}`)
- * })
- * ```
- *
- * @param placeholder 文本框占位符
- * @param value 默认的文本值
- */
+ * 显示一个文本框，并返回用户输入的值
+ *
+ * ```js
+ * quickcommand.showTextAera("请输入文本").then(text=>{
+ * console.log(`输入的文本为${text}`)
+ * })
+ * ```
+ *
+ * @param placeholder 文本框占位符
+ * @param value 默认的文本值
+ */
showTextArea(placeholder?: string, value?: string): Promise;
/**
- * 显示一个自动消失的提示框
- *
- * ```js
- * quickcommand.showMessageBox("这是一段3s后自动消失的成功提示")
- * ```
- * @param message 显示的消息内容
- * @param icon 图标，默认为 success
- * @param time 多少毫秒后消失，默认为 3000
- */
- showMessageBox(message: string, icon?: 'success' | 'error' | 'warning' | 'info' , time?: number): void;
+ * 显示一个自动消失的提示框
+ *
+ * ```js
+ * quickcommand.showMessageBox("这是一段3s后自动消失的成功提示")
+ * ```
+ * @param message 显示的消息内容
+ * @param icon 图标，默认为 success
+ * @param time 多少毫秒后消失，默认为 3000
+ */
+ showMessageBox(
+ message: string,
+ icon?: "success" | "error" | "warning" | "info",
+ time?: number
+ ): void;
/**
- * 显示一个确认框，返回是否点击了确认
- *
- * ```js
- * quickcommand.showConfirmBox().then(confirmed => {
- * confirmed && console.log('点击了确定')
- * })
- * ```
- * @param message 提示的内容
- * @param title 提示的标题
- */
+ * 显示一个确认框，返回是否点击了确认
+ *
+ * ```js
+ * quickcommand.showConfirmBox().then(confirmed => {
+ * confirmed && console.log('点击了确定')
+ * })
+ * ```
+ * @param message 提示的内容
+ * @param title 提示的标题
+ */
showConfirmBox(message?: string, title?: string): Promise;
/**
- * 同步等待，会阻塞进程
- * @param ms 等待的毫秒数
- */
+ * 同步等待，会阻塞进程
+ * @param ms 等待的毫秒数
+ */
sleep(ms: number): void;
/**
- * 异步等待
- *
- * ```js
- * quickcommand.setTimeout(()=>{
- * console.log('2000毫秒后执行')
- * }, 2000)
- * ```
- *
- * @param ms 等待的毫秒数
- */
- setTimeout(callback: () => void, ms)
+ * 异步等待
+ *
+ * ```js
+ * quickcommand.setTimeout(()=>{
+ * console.log('2000毫秒后执行')
+ * }, 2000)
+ * ```
+ *
+ * @param ms 等待的毫秒数
+ */
+ setTimeout(callback: () => void, ms);
/**
- * 将给定的html字符串解析为 DOM 对象，用于快速编写爬虫脚本
- *
- * ```js
- * var html = `uTools`
- * var href = quickcommand.htmlParse(html).querySelector('a').href
- * console.log(`解析出来的a标签地址为${href}`)
- * ```
- *
- * @param html 需要解析的 html 文本
- */
- htmlParse(html: string): object
-
+ * 将给定的html字符串解析为 DOM 对象，用于快速编写爬虫脚本
+ *
+ * ```js
+ * var html = `uTools`
+ * var href = quickcommand.htmlParse(html).querySelector('a').href
+ * console.log(`解析出来的a标签地址为${href}`)
+ * ```
+ *
+ * @param html 需要解析的 html 文本
+ */
+ htmlParse(html: string): object;
/**
- * 下载文件，并返回文件的 Buffer，可选直接下载到指定路径，或者弹出对话框选择下载路径
- *
- * ```js
- * // 下载文件到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')
- * ```
- *
- * @param url 地址
- * @param file 当赋值为文件路径时，则表示下载文件的绝对路径；
- * 不赋值时，则会弹出对话框要求选择下载到的路径；
- * 赋值为 Object时，表示弹出对话框的 options，格式和 utools.showSaveDialog 中的 options一致
- */
- downloadFile(url, file?: string | object): Promise
+ * 下载文件，并返回文件的 Buffer，可选直接下载到指定路径，或者弹出对话框选择下载路径
+ *
+ * ```js
+ * // 下载文件到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')
+ * ```
+ *
+ * @param url 地址
+ * @param file 当赋值为文件路径时，则表示下载文件的绝对路径；
+ * 不赋值时，则会弹出对话框要求选择下载到的路径；
+ * 赋值为 Object时，表示弹出对话框的 options，格式和 utools.showSaveDialog 中的 options一致
+ */
+ downloadFile(url, file?: string | object): Promise;
/**
- * 上传文件，可以直接上传指定文件，或者弹出对话框选择要上传的文件，可以自定义表单数据
- *
- * ```js
- * // 上传图片到图床
- * quickcommand.uploadFile("https://imgkr.com/api/v2/files/upload", "C:\\test.jpg").then(res=>{
- * console.log('上传成功，图片地址为:' + res.data.data)
- * })
- *
- * // 包含额外表单数据
- * quickcommand.uploadFile("https://catbox.moe/user/api.php", "C:\\test.jpg", 'fileToUpload', {
- * "reqtype": "fileupload"
- * }).then(res=>{
- * console.log('上传成功，图片地址为:' + res.data)
- * })
- * ```
- *
- * @param url 地址
- * @param file 当赋值为文件路径时，则表示要上传的文件的绝对路径；
- * 不赋值时，则会弹出对话框要求选择要上传的文件的路径；
- * 赋值为 Object时，表示弹出对话框的 options，格式和 utools.showOpenDialog 中的 options一致
- *
- * @param name 文件名，默认为 file
- * @param formData 其他需要提交的表单数据
- */
- uploadFile(url: string, file?: string | object, name?: string, formData?: object): Promise