selectList 80%

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)

src/components/quickcommandUI/SelectList.vue

@@ -4,28 +4,25 @@
     maximized
     ref="dialog"
     transition-show="fade"
+    transition-hide="fade"
     @hide="onDialogHide"
-  >
-    <q-scroll-area
-      ref="scrollbar"
-      :thumb-style="{
-        width: '7px',
-      }"
   >
     <q-card>
       <q-virtual-scroll
-          virtual-scroll-slice-size="50"
+        ref="scrollBar"
-          virtual-scroll-item-size="50"
+        :style="{ maxHeight: listMaxHeight + 'px' }"
+        :virtual-scroll-slice-size="lazyItemSize"
+        :virtual-scroll-item-size="itemHeight"
         @virtual-scroll="scrollEvent"
-          :items="items"
+        :items="matchedItems"
       >
         <template v-slot="{ item, index }">
           <q-item
             :key="index"
-              ref="qitems"
             clickable
             v-ripple
             @mousemove="currentIndex = index"
+            @click="onOKClick"
             manual-focus
             :focused="index === currentIndex"
             :active="index === currentIndex"
@@ -33,14 +30,28 @@
               height: itemHeight + 'px',
             }"
           >
-              <q-item-section>
+            <q-item-section v-if="isText">{{ item }}</q-item-section>
-                <q-item-section>{{ item }}</q-item-section>
+            <q-item-section v-else-if="isJson">
+              <q-avatar v-if="item.icon">
+                <q-icon :name="item.icon" />
+              </q-avatar>
+              <q-item-label>{{ item.title }}</q-item-label>
+              <q-item-label caption>{{ item.description }}</q-item-label>
+            </q-item-section>
+            <q-item-section v-else-if="isHtml">
+              <div v-html="item"></div>
             </q-item-section>
           </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-scroll-area>
   </q-dialog>
 </template>
 
@@ -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() {
+    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: {
@@ -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));
     },
   },
 };

src/js/quickcommand.js

@@ -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 = {
             items: selects,
             options: options
@@ -106,7 +104,12 @@ const quickcommand = {
         }).onCancel(() => {
             console.log('取消')
         })
-    })
+    }),
+
+    // 更新选项列表
+    updateSelectList: (opt, id) => {
+
+    },
 }
 
 export default quickcommand

src/plugins/monaco/types/quickcommand.api.d.ts

@@ -12,7 +12,10 @@ 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 }>;
 
   /**
    * 显示一个输入框组对话框，并返回用户输入的所有值
@@ -32,10 +35,13 @@ interface quickcommandApi {
    * @param options 数组时，为每一个输入框的标签名；对象时，为每一个输入框的属性
    * @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
    * // plaintext
@@ -52,7 +58,7 @@ interface quickcommandApi {
    * var opt = []
    * for (var i = 0; i < 15; i++) {
    *     // 每一个选项为 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 => {
    *     console.log(`选择的选项为${choise.title}`)
@@ -72,7 +78,10 @@ interface quickcommandApi {
    * @param selects 每一个列表选项
    * @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 }>;
 
   /**
    * 动态更新当前的选项列表的选项
@@ -123,7 +132,11 @@ interface quickcommandApi {
    * @param icon 图标，默认为 success
    * @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;
 
   /**
    * 显示一个确认框，返回是否点击了确认
@@ -155,7 +168,7 @@ interface quickcommandApi {
    *
    * @param ms 等待的毫秒数
    */
-  setTimeout(callback: () => void, ms)
+  setTimeout(callback: () => void, ms);
 
   /**
    * 将给定的html字符串解析为 DOM 对象，用于快速编写爬虫脚本
@@ -168,8 +181,7 @@ interface quickcommandApi {
    *
    * @param html 需要解析的 html 文本
    */
-  htmlParse(html: string): object
+  htmlParse(html: string): object;
-
 
   /**
    * 下载文件，并返回文件的 Buffer，可选直接下载到指定路径，或者弹出对话框选择下载路径
@@ -187,7 +199,7 @@ interface quickcommandApi {
    * 不赋值时，则会弹出对话框要求选择下载到的路径；
    * 赋值为 Object时，表示弹出对话框的 options，格式和 utools.showSaveDialog 中的 options一致
    */
-  downloadFile(url, file?: string | object): Promise<Buffer>
+  downloadFile(url, file?: string | object): Promise<Buffer>;
 
   /**
    * 上传文件，可以直接上传指定文件，或者弹出对话框选择要上传的文件，可以自定义表单数据
@@ -214,7 +226,12 @@ interface quickcommandApi {
    * @param name 文件名，默认为 file
    * @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 的对象
@@ -228,14 +245,14 @@ interface quickcommandApi {
    *
    * @param url 脚本地址
    */
-  loadRemoteScript(url: string): Promise<object>
+  loadRemoteScript(url: string): Promise<object>;
 
   /**
    * 将 signal 发送给 pid 标识的进程 , 默认为关闭进程，同process.kill
    * @param pid 进程 ID
    * @param signal 进程信号，默认为SIGTERM
    */
-  kill(pid: number, signal?: number | string): void
+  kill(pid: number, signal?: number | string): void;
 
   /**
    * windows 下运行 VBS 脚本并返回运行结果
@@ -246,7 +263,7 @@ interface quickcommandApi {
    *
    * @param script VBS 代码
    */
-  runVbs(script: string): Promise<string>
+  runVbs(script: string): Promise<string>;
 
   /**
    * 对应 utools.onPluginEnter 的 code type 和 payload
@@ -265,17 +282,17 @@ interface quickcommandApi {
    * ```
    *
    */
-  enterData: { code: string, type: string, payload: any }
+  enterData: { code: string; type: string; payload: any };
 
   /**
    * 模拟复制操作
    */
-  simulateCopy()
+  simulateCopy();
 
   /**
    * 模拟粘贴操作
    */
-  simulatePaste()
+  simulatePaste();
 }
 
 declare var quickcommand: quickcommandApi;