3 个 ui 完善

public/preload.js

@@ -92,86 +92,6 @@ quickcommand = {
         })
     },
 
-    // 显示输入框
-    showInputBox: function(placeHolders = [""], title = '') {
-        return new Promise((reslove, reject) => {
-            if (!(placeHolders instanceof Array)) placeHolders = [placeHolders.toString()]
-            utools.setExpendHeight(550)
-            var html = ""
-            var inputBoxNumbers = placeHolders.length
-            for (let i = 0; i < inputBoxNumbers; i++) {
-                html += `<input class="swal2-input" id="inputBox${i}" placeholder="${placeHolders[i]}">`
-            }
-            var result = []
-            var options = {
-                onBeforeOpen: () => {
-                    document.getElementById(`inputBox0`).focus()
-                    $('.swal2-content').keydown(function(e) {
-                        e.which == 13 && swal.clickConfirm()
-                    })
-                    $(".output").is(":parent") ? utools.setExpendHeight(550) : modWindowHeight($('.swal2-popup').outerHeight() + 20)
-                },
-                title: title,
-                html: html,
-                focusConfirm: false,
-                showCancelButton: true,
-                backdrop: utools.isDarkColors() ? '#ffffff26' : '#bbbbbb80',
-                preConfirm: () => {
-                    for (let i = 0; i < inputBoxNumbers; i++) {
-                        result.push(document.getElementById(`inputBox${i}`).value)
-                    }
-                    reslove(result)
-                }
-            }
-            swalOneByOne(options)
-        });
-    },
-
-    // 显示选项按钮
-    showButtonBox: function(buttons, title = '') {
-        return new Promise((reslove, reject) => {
-            if (!(buttons instanceof Array)) return reject(new TypeError(`应为 Array, 而非 ${typeof buttons}`))
-            utools.setExpendHeight(550)
-            var html = ``
-            var buttonBoxNumbers = buttons.length
-            for (let i = 0; i < buttonBoxNumbers; i++) {
-                html += `<button class="swal2-confirm swal2-styled" style="width: 80%" onclick="clickButton(${i})">${buttons[i]}</button>`
-            }
-            var options = {
-                onBeforeOpen: () => {
-                    clickButton = i => {
-                        reslove({
-                            id: i,
-                            text: buttons[i]
-                        })
-                        swal.clickConfirm()
-                    }
-                    $(".output").is(":parent") && utools.setExpendHeight(550) || modWindowHeight($('.swal2-popup').outerHeight() + 20)
-                },
-                html: html,
-                title: title,
-                backdrop: utools.isDarkColors() ? '#ffffff26' : '#bbbbbb80',
-                showConfirmButton: false
-            }
-            swalOneByOne(options)
-        });
-    },
-
-    // 显示自动消失的提示框
-    showMessageBox: function(title, icon = "success", time = 3000) {
-        var options = {
-            icon: icon,
-            title: title,
-            toast: true,
-            position: 'top',
-            timer: time,
-            showConfirmButton: false,
-            // onBeforeOpen: () => {
-            //     setTimeout(() => { Swal.clickConfirm() }, time);
-            // }
-        }
-        swal.fire(options)
-    },
 
     // 显示选项列表
     showSelectList: function(selects, opt = {}) {
@@ -204,35 +124,35 @@ quickcommand = {
             $('#selectBox').data('options', data)
             $('#selectBox').data('type', opt.optionType)
             var prefer = {
-                // data: data,
+                    // data: data,
-                width: "100%",
+                    width: "100%",
-                dropdownParent: $("#quickselect"),
+                    dropdownParent: $("#quickselect"),
-                closeOnSelect: false,
+                    closeOnSelect: false,
-                // 支持无限滚动
+                    // 支持无限滚动
-                ajax: {
+                    ajax: {
-                    transport: (params, success, failure) => {
+                        transport: (params, success, failure) => {
-                        let cont, pageSize = 50
+                            let cont, pageSize = 50
-                        let term = (params.data.term || '').toLowerCase()
+                            let term = (params.data.term || '').toLowerCase()
-                        let page = (params.data.page || 1)
+                            let page = (params.data.page || 1)
-                        let items = $('#selectBox').data('options')
+                            let items = $('#selectBox').data('options')
-                        let results = items.filter(x => {
+                            let results = items.filter(x => {
-                            if (opt.optionType == 'json') cont = x.title
+                                if (opt.optionType == 'json') cont = x.title
-                            else if (opt.optionType == 'html') cont = x.text.replace(/<[^<>]+>/g, '')
+                                else if (opt.optionType == 'html') cont = x.text.replace(/<[^<>]+>/g, '')
-                            else cont = x.text
+                                else cont = x.text
-                            return cont.toLowerCase().includes(term) || PinyinMatch.match(cont, term)
+                                return cont.toLowerCase().includes(term) || PinyinMatch.match(cont, term)
-                        })
+                            })
-                        let paged = results.slice((page - 1) * pageSize, page * pageSize)
+                            let paged = results.slice((page - 1) * pageSize, page * pageSize)
-                        let options = {
+                            let options = {
-                            results: paged,
+                                results: paged,
-                            pagination: {
+                                pagination: {
-                                more: results.length >= page * pageSize
+                                    more: results.length >= page * pageSize
+                                }
                             }
+                            success(options)
                         }
-                        success(options)
+                    },
-                    }
+                }
-                },
+                // 显示html时不转义标签
-            }
-            // 显示html时不转义标签
             if (opt.optionType != 'plaintext') prefer.escapeMarkup = markup => markup
             $('#selectBox').select2(prefer)
             $('#selectBox').val(null).trigger('change')
@@ -244,12 +164,12 @@ quickcommand = {
             })
             modWindowHeight($('.select2-results').outerHeight())
             opt.enableSearch && utools.setSubInput(({
-                text
+                    text
-            }) => {
+                }) => {
-                $("#quickselect .select2-search__field").val(text).trigger('input')
+                    $("#quickselect .select2-search__field").val(text).trigger('input')
-                modWindowHeight($('.select2-results').outerHeight())
+                    modWindowHeight($('.select2-results').outerHeight())
-            }, opt.placeholder)
+                }, opt.placeholder)
-            // 关闭列表
+                // 关闭列表
             let closeSelect = () => {
                 $('#selectBox').off('select2:select')
                 utools.removeSubInput()
@@ -425,22 +345,22 @@ if (process.platform !== 'linux') quickcommand.runInTerminal = function(cmdline,
 }
 
 let getCommandToLaunchTerminal = (cmdline, dir) => {
-    let cd = ''
+        let cd = ''
-    if (utools.isWindows()) {
+        if (utools.isWindows()) {
-        let appPath = path.join(utools.getPath('home'), '/AppData/Local/Microsoft/WindowsApps/')
+            let appPath = path.join(utools.getPath('home'), '/AppData/Local/Microsoft/WindowsApps/')
-        // 直接 existsSync wt.exe 无效
+                // 直接 existsSync wt.exe 无效
-        if (fs.existsSync(appPath) && fs.readdirSync(appPath).includes('wt.exe')) {
+            if (fs.existsSync(appPath) && fs.readdirSync(appPath).includes('wt.exe')) {
-            cmdline = cmdline.replace(/"/g, `\\"`)
+                cmdline = cmdline.replace(/"/g, `\\"`)
-            if (dir) cd = `-d "${dir.replace(/\\/g, '/')}"`
+                if (dir) cd = `-d "${dir.replace(/\\/g, '/')}"`
-            command = `${appPath}wt.exe ${cd} cmd /k "${cmdline}"`
+                command = `${appPath}wt.exe ${cd} cmd /k "${cmdline}"`
+            } else {
+                cmdline = cmdline.replace(/"/g, `^"`)
+                if (dir) cd = `cd /d "${dir.replace(/\\/g, '/')}" &&`
+                command = `${cd} start "" cmd /k "${cmdline}"`
+            }
         } else {
-            cmdline = cmdline.replace(/"/g, `^"`)
+            cmdline = cmdline.replace(/"/g, `\\"`)
-            if (dir) cd = `cd /d "${dir.replace(/\\/g, '/')}" &&`
+            if (dir) cd = `cd ${dir.replace(/ /g, `\\\\ `)} &&`
-            command = `${cd} start "" cmd /k "${cmdline}"`
-        }
-    } else {
-        cmdline = cmdline.replace(/"/g, `\\"`)
-        if (dir) cd = `cd ${dir.replace(/ /g, `\\\\ `)} &&`
         if (fs.existsSync('/Applications/iTerm.app')) {
             command = `osascript -e 'tell application "iTerm"
             create window with default profile

src/components/quickcommandUI/ButtonBox.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-dialog ref="dialog" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin">
+      <q-card-section>
+        <div class="text-h5" align="center" v-text="title"></div>
+      </q-card-section>
+      <q-card-section class="q-gutter-lg">
+        <div v-for="(label, index) in labels" :key="index">
+          <q-btn
+            class="full-width"
+            color="primary"
+            :label="label"
+            @click="onOKClick(label, index)"
+          />
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      results: this.values,
+    };
+  },
+  props: {
+    labels: Array,
+    title: String,
+  },
+  emits: ["ok", "hide"],
+  methods: {
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+
+    onDialogHide() {
+      this.$emit("hide");
+    },
+
+    onOKClick(label, index) {
+      this.$emit("ok", { id: index, text: label });
+      this.hide();
+    },
+
+    onCancelClick() {
+      this.hide();
+    },
+  },
+};
+</script>

src/components/quickcommandUI/TextArea.vue

@@ -0,0 +1,69 @@
+<template>
+  <q-dialog maximized ref="dialog" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin">
+      <textarea
+        v-model="result"
+        :placeholder="placeholder"
+        autofocus
+        class="fixed"
+        :style="{
+          top: 0,
+          bottom: '36px',
+          left: 0,
+          right: 0,
+          background: '#00000000',
+          color: $q.dark.isActive ? 'white' : 'black',
+          fontSize: '16px',
+          outline: 'none',
+        }"
+      />
+      <q-btn-group
+        spread
+        class="fixed-bottom"
+        :style="{
+          left: 0,
+          right: 0,
+        }"
+      >
+        <q-btn label="取消" color="negative" @click="onCancelClick" />
+        <q-btn label="确定" color="primary" @click="onOKClick" />
+      </q-btn-group>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      result: this.value,
+    };
+  },
+  props: {
+    placeholder: String,
+    value: String,
+  },
+  emits: ["ok", "hide"],
+  methods: {
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+
+    onDialogHide() {
+      this.$emit("hide");
+    },
+
+    onOKClick() {
+      this.$emit("ok", this.result);
+      this.hide();
+    },
+
+    onCancelClick() {
+      this.hide();
+    },
+  },
+};
+</script>

src/js/quickcommand.js

@@ -7,10 +7,12 @@ import {
     Dialog,
     Notify
 } from 'quasar'
-import inputBox from "../components/InputBox"
+import inputBox from "../components/quickcommandUI/InputBox"
+import buttonBox from "../components/quickcommandUI/ButtonBox"
+import TextArea from "../components/quickcommandUI/TextArea"
 
 
-let showInputBox = (options = [], title = "") => {
+let showInputBox = (options = ["请输入"], title = "") => {
     return new Promise((reslove, reject) => {
         let props = {
             labels: [],
@@ -32,6 +34,25 @@ let showInputBox = (options = [], title = "") => {
     })
 };
 
+let showButtonBox = (labels = ["确定"], title = "") => {
+    return new Promise((reslove, reject) => {
+        if (!(labels instanceof Array)) return reject(new TypeError("必须为数组"))
+        let props = {
+            labels: labels,
+            title: title
+        }
+        Dialog.create({
+            component: buttonBox,
+            componentProps: props
+        }).onOk(results => {
+            reslove(results)
+        }).onCancel(() => {
+            console.log('取消')
+        })
+    })
+};
+
+
 let showConfirmBox = (message = "", title = "提示") => {
     return new Promise((reslove, reject) => {
         Dialog.create({
@@ -58,9 +79,28 @@ let showMessageBox = (message, icon = 'success', time = 3000) => {
     })
 }
 
+let showTextArea = (placeholder = "", value = "") => {
+    return new Promise((reslove, reject) => {
+        let props = {
+            placeholder: placeholder,
+            value: value
+        }
+        Dialog.create({
+            component: TextArea,
+            componentProps: props
+        }).onOk(results => {
+            reslove(results)
+        }).onCancel(() => {
+            console.log('取消')
+        })
+    })
+}
+
 
 export default {
     showInputBox,
     showMessageBox,
-    showConfirmBox
+    showConfirmBox,
+    showButtonBox,
+    showTextArea
 };

src/json/default_VSSnippet.json

@@ -13,7 +13,7 @@
         ]
     },
     "program": "quickcommand",
-    "cmd": "var snippet = {}\nquickcommand.showTextAera(\"请输入代码片段\").then(code => {\n    snippet.body = code.split(\"\\n\")\n    quickcommand.showInputBox([\"代码片段的描述\", \"触发代码片段的关键词\"])\n        .then(inputs => {\n            snippet.prefix = inputs[1]\n            snippet.description = inputs[0]\n            var result = `\"${inputs[0]}\": ` + JSON.stringify(snippet, null, '\\t')\n            console.log(result)\n            utools.copyText(result)\n            quickcommand.showMessageBox('已复制')\n        })\n})",
+    "cmd": "var snippet = {}\nquickcommand.showTextArea(\"请输入代码片段\").then(code => {\n    snippet.body = code.split(\"\\n\")\n    quickcommand.showInputBox([\"代码片段的描述\", \"触发代码片段的关键词\"])\n        .then(inputs => {\n            snippet.prefix = inputs[1]\n            snippet.description = inputs[0]\n            var result = `\"${inputs[0]}\": ` + JSON.stringify(snippet, null, '\\t')\n            console.log(result)\n            utools.copyText(result)\n            quickcommand.showMessageBox('已复制')\n        })\n})",
     "output": "text",
     "hasSubInput": false,
     "scptarg": "",

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

@@ -111,7 +111,7 @@ interface quickcommandApi {
   * @param placeholder 文本框占位符
   * @param value 默认的文本值
   */
-  showTextAera(placeholder?: string, value?: string): Promise<string>;
+  showTextArea(placeholder?: string, value?: string): Promise<string>;
 
   /**
   * 显示一个自动消失的提示框