feat: 快捷面板 beta

src/assets/js/index.js

@@ -35,7 +35,7 @@ import qcparser from "./qcparser.js"
                     customarg: $('#customarg').val(),
                     customext: $('#customext').val()
                 }
-                UTOOLS.putDB({ cmd: cmd, program: program, scptarg: scptarg, customoptions: customoptions }, UTOOLS.CFG_PREFIX + 'codeHistory')
+                UTOOLS.putDB({ cmd: cmd, program: program, scptarg: scptarg, customoptions: customoptions }, UTOOLS.DBPRE.CFG + 'codeHistory')
             }
             // 初始化
             $("#options, #out, #quickpanel").empty()
@@ -65,14 +65,13 @@ import qcparser from "./qcparser.js"
             qccommands.editCurrentCommand(qc, false)
         } else if (code.slice(0, 6) == 'panel_') {
             utools.setExpendHeight(600)
-            let features = qcfeatures.getPanelFeatures(payload)
+            qcpanel.showPanel(hexDecode(code.slice(6)))
-            qcpanel.showPanel(features)
         } else {
             // console.log(new Date().getTime() - window.startTime);
             $('body').css({ overflow: 'auto' })
             utools.setExpendHeight(0);
             $("#options, #quickpanel").hide();
-            var db = UTOOLS.getDB(UTOOLS.QC_PREFIX + code);
+            var db = UTOOLS.getDB(UTOOLS.DBPRE.QC + code);
             var cmd = db.cmd;
             var option
             if (db.program == "custom") {

src/assets/js/qccommands.js

@@ -152,8 +152,7 @@ let setCommandCharset = program => {
 
 let hasCustomIcon = () => {
     var src = $("#icon").attr('src');
-    var iconame = $("#iconame").val();
+    return /data:image\/\w+;base64,/.test(src)
-    return /data:image\/\w+;base64,/.test(src) || iconame
 }
 
 // 获取特殊变量
@@ -166,20 +165,40 @@ let getSpecialVars = () => {
     localStorage['specialVars'] = specialVars
 }
 
+let showChangeIconWindow = () => {
+    Swal.fire({
+        title: "设置图标",
+        onBeforeOpen: () => {
+            iconpicker.getIcons8Icon('#networkImg', src => {
+                $("#icon").attr('src', src)
+            })
+            iconpicker.getLocalIcon('#localImg', src => {
+                $("#icon").attr('src', src)
+                Swal.close()
+            })
+            iconpicker.getRemoteIcon('#networkImgUrl', src => {
+                $("#icon").attr('src', src)
+            }) 
+        },
+        html: qctemplates.command.setIcon
+    })
+}
+
 // **************************************************
 // **********************编辑器***********************
 // **************************************************
 // 编辑器
-let createEditor = () => {
+let createEditor = (selector = "#cmd") => {
-    window.editor = CodeMirror.fromTextArea(document.getElementById("cmd"), {
+    let opts = {
-        lineNumbers: true,
         matchBrackets: true,
         // lineWrapping: true,
         autoCloseBrackets: true,
         styleActiveLine: true,
         keyMap: "sublime",
         theme: utools.isDarkColors() ? 'material-darker' : "mdn-like",
-        extraKeys: {
+    }
+    if ($("#customize").is(":parent")) {
+        opts.extraKeys = {
             "Alt-Enter": () => {
                 $('.CodeMirror').hasClass('CodeMirror-fullscreen') &&
                     $('.CodeMirror').removeClass('CodeMirror-fullscreen') ||
@@ -201,7 +220,9 @@ let createEditor = () => {
             "Alt-Down": "swapLineDown",
             "Shift-Alt-Down": "duplicateLine"
         }
-    });
+        opts.lineNumbers = true
+    }
+    window.editor = CodeMirror.fromTextArea(document.querySelector(selector), opts);
     window.editor.on("change", showHint);
     window.editor.setOption("mode", 'javascript');
 }
@@ -351,7 +372,7 @@ $("#options").on('click', '#addAction', function() {
 
 // 选择图标
 $("#options").on('click', '#icon', function() {
-    iconpicker.showChangeIconWindow()
+    showChangeIconWindow()
 })
 
 // 格式化
@@ -400,12 +421,7 @@ $("#options").on('change', '#customext', function() {
 
 // 平台按钮
 $("#options").on('click', '.platform', function () {
-    if ($(this).hasClass('disabled')) {
+    $(this).hasClass('disabled') ? $(this).removeClass('disabled') : $('.disabled').length != 2 && $(this).addClass('disabled')
-        $(this).removeClass('disabled')
-    } else {
-        if ($('.disabled').length == 2) quickcommand.showMessageBox('至少保留一个平台', 'error')
-        else $(this).addClass('disabled')
-    }
 })
 
 // **************************************************
@@ -488,7 +504,7 @@ let SaveCurrentCommand = async () => {
         }
         // platform
         var platform = []
-        $('.platform').not('.disabled').each(function() { platform.push($(this).attr('id')) })
+        $('.platform').not('.disabled').each((x, y) => platform.push(y.id))
         // 添加特性
         var extraInfo = $('#customize').data('extraInfo')
         var pushData = {
@@ -521,7 +537,7 @@ let SaveCurrentCommand = async () => {
                 "ext": $('#customext').val()
             }
         }
-        UTOOLS.putDB(pushData, UTOOLS.QC_PREFIX + code);
+        UTOOLS.putDB(pushData, UTOOLS.DBPRE.QC + code);
         $("#customize").animate({ top: '100%' }, () => {
             $("#customize").empty()
             if ($('#customize').data('returnShare')) {
@@ -744,7 +760,7 @@ let showCodeEditor = file => {
     $("span.customscript > input").css({
         "height": "26px"
     })
-    var history = UTOOLS.getDB(UTOOLS.CFG_PREFIX + 'codeHistory')
+    var history = UTOOLS.getDB(UTOOLS.DBPRE.CFG + 'codeHistory')
     createProgramSelect2(140, true)
     if (file) {
         var fileinfo = getFileInfo({
@@ -884,6 +900,7 @@ let typeCheck = () => {
 export default {
     showCommandEditor,
     showCodeEditor,
+    createEditor,
     editCurrentCommand,
     getCommandType,
     setCommandCharset

src/assets/js/qcfeatures.js

@@ -4,6 +4,7 @@ import qccommands from "./qccommands.js"
 import qcparser from "./qcparser.js"
 import qcprograms from "./qcprograms.js"
 import qctemplates from "./qctemplates.js"
+import qcpanel from "./qcpanel.js"
 
 // **************************************************
 // *********************功能列表**********************
@@ -38,10 +39,11 @@ let showFeatureList = (tag = "默认") => {
         `<li ${tag == '未分类' ? 'class="currentTag"' : ''}>未分类</li></div>`
     var footer = qctemplates.featurelist.footer
     $("#options").append(sidebar + featureList + footer)
-    if (tag != '默认' || tag != '未分类') {
+    if (tag == '默认' || tag == '未分类') {
-        if (quickpanels.includes(tag)) $('#addToPanel').css({
+        $('#addToPanel').css({
-            "filter": "none"
+            "filter": "grayscale(1)",
-        })
+            "cursor": "not-allowed"
+        }).prop('disabled', true)
     }
     checkSharedQc()
 }
@@ -49,7 +51,7 @@ let showFeatureList = (tag = "默认") => {
 // 获取所有 qc，等效于 1.6 版本 getDB('customFts')
 let getAllQuickCommands = () => {
     let allQcs = {}
-    UTOOLS.getDocs(UTOOLS.QC_PREFIX).forEach(x => allQcs[x.data.features.code] = x.data)
+    UTOOLS.getDocs(UTOOLS.DBPRE.QC).forEach(x => allQcs[x.data.features.code] = x.data)
     return allQcs
 }
 
@@ -58,7 +60,7 @@ let getCurrentFts = () => {
     let features = utools.getFeatures()
     let currentFts = []
     let quickpanels = []
-    features.forEach(x => x.code.slice(0, 6) == 'panel_' ? quickpanels.push(decodeURI(x.code.slice(6))) : currentFts.push(x))
+    features.forEach(x => x.code.slice(0, 6) == 'panel_' ? quickpanels.push(hexDecode(x.code.slice(6))) : currentFts.push(x))
     return {
         currentFts: currentFts,
         quickpanels: quickpanels,
@@ -165,7 +167,7 @@ $("#options").on('change', 'input[type=checkbox]', function() {
 // 编辑
 $("#options").on('click', '.editBtn', function() {
     let code = $(this).parents('tr').attr('id')
-    let data = UTOOLS.getDB(UTOOLS.QC_PREFIX + code)
+    let data = UTOOLS.getDB(UTOOLS.DBPRE.QC + code)
     qccommands.editCurrentCommand(data)
 })
 
@@ -174,11 +176,16 @@ $("#options").on('click', '.delBtn', function() {
     quickcommand.showConfirmBox('删除这个快捷命令').then(x => {
         if (!x) return
         var code = $(this).parents('tr').attr('id')
-        utools.copyText(JSON.stringify(UTOOLS.getDB(UTOOLS.QC_PREFIX + code)))
+        utools.copyText(JSON.stringify(UTOOLS.getDB(UTOOLS.DBPRE.QC + code)))
-        UTOOLS.delDB(UTOOLS.QC_PREFIX + code)
+        UTOOLS.delDB(UTOOLS.DBPRE.QC + code)
         UTOOLS.whole.removeFeature(code);
         var currentTag = $('.currentTag').text()
-        if ($('#featureList tr').length == 1) currentTag = "默认"
+        // 当前标签下最后一个命令的处理
+        if ($('#featureList tr').length == 1) {
+            UTOOLS.delDB(UTOOLS.DBPRE.PAN + hexEncode(currentTag))
+            UTOOLS.whole.removeFeature("panel_" + hexEncode(currentTag))
+            currentTag = "默认"
+        }
         showFeatureList(currentTag);
         quickcommand.showMessageBox('删除成功，为防止误操作，已将删除的命令复制到剪贴板')
     })
@@ -187,7 +194,7 @@ $("#options").on('click', '.delBtn', function() {
 // 导出
 $("#options").on('click', '.exportBtn', async function() {
     var code = $(this).parents('tr').attr('id')
-    var jsonQc = UTOOLS.getDB(UTOOLS.QC_PREFIX + code)
+    var jsonQc = UTOOLS.getDB(UTOOLS.DBPRE.QC + code)
     var stringifyQc = JSON.stringify(jsonQc, null, 4)
     var choise = await quickcommand.showButtonBox(createShareMenu(jsonQc))
     switch (choise.text) {
@@ -230,7 +237,7 @@ $("#options").on('click', '.exportBtn', async function() {
 // 分享菜单
 let createShareMenu = jsonQc => {
     let menu = ['复制到剪贴板', '导出到文件', '', '设置 Token']
-    let extraInfo = UTOOLS.getDB(UTOOLS.CFG_PREFIX + 'extraInfo')
+    let extraInfo = UTOOLS.getDB(UTOOLS.DBPRE.CFG + 'extraInfo')
     if (jsonQc.authorId) {
         if (jsonQc.authorId == extraInfo.authorId) menu[2] = '更新分享'
         else if (jsonQc.fromShare) menu[2] = '评论'
@@ -254,7 +261,7 @@ let setYuQueToken = async () => {
             authorId: res.data.data.account_id,
             authorName: res.data.data.name
         }
-        UTOOLS.putDB(extraInfo, UTOOLS.CFG_PREFIX + 'extraInfo')
+        UTOOLS.putDB(extraInfo, UTOOLS.DBPRE.CFG + 'extraInfo')
         quickcommand.showMessageBox("设置成功~")
     } catch (e) {
         quickcommand.showMessageBox('Token 校验失败', "error")
@@ -310,7 +317,7 @@ $("#options").on('click', '.footBtn', async function() {
 
 // 检查分享中心更新
 let checkSharedQc = async () => {
-    let localShares = UTOOLS.getDB(UTOOLS.CFG_PREFIX + 'sharedQcCounts')[window.processPlatform] || 0
+    let localShares = UTOOLS.getDB(UTOOLS.DBPRE.CFG + 'sharedQcCounts')[window.processPlatform] || 0
     let remoteShares = await qcshare.getDocsFromYuQue()
     if (!remoteShares) return
     let updates = remoteShares.length - localShares
@@ -326,41 +333,7 @@ let checkSharedQc = async () => {
 // 快捷面板
 let addToPanel = () => {
     let tag = $('.currentTag').text()
-    if (tag == '默认' || tag == '未分类') return quickcommand.showMessageBox('当前标签不支持', 'error')
+    qcpanel.panelConf(tag)
-    let code = `panel_${encodeURI(tag)}`
-    if (!UTOOLS.whole.removeFeature(code)) {
-        let features = getPanelFeatures(tag)
-        if (features.length == 0) return quickcommand.showMessageBox('快捷面板仅支持匹配模式为关键词的命令，当前标签不存在该类型命令或者该命令未启用', 'error', 8000)
-        let feature = {
-            code: code,
-            explain: `${tag}面板`,
-            cmds: [tag],
-            icon: "logo/quickpanel.png"
-        }
-        UTOOLS.whole.setFeature(feature);
-        $('#addToPanel').css({
-            "filter": "none"
-        })
-        $('.currentTag').addClass('panelTag')
-        quickcommand.showMessageBox(`已为当前标签启动快捷面板<br>utools 中直接输入<b style="color: #b80233;display: contents;">${tag}</b>即可进入`, 'success', 5000)
-    } else {
-        $('#addToPanel').attr("style", "")
-        $('.currentTag').removeClass('panelTag')
-        quickcommand.showMessageBox("已取消当前标签的快捷面板")
-    }
-}
-
-// 获取可添加至面板的功能
-let getPanelFeatures = tag => {
-    let activedCode = utools.getFeatures().map(x => x.code)
-    let features = UTOOLS.whole.db.allDocs('qc_key_').filter(x => {
-        if (!x.data.tags) return false
-        if (!x.data.tags.includes(tag)) return false
-        if (x.data.features.platform && !x.data.features.platform.includes(window.processPlatform)) return false
-        if (!activedCode.includes(x.data.features.code)) return false
-        return true
-    })
-    return features
 }
 
 // 全部导出
@@ -387,7 +360,7 @@ let clearAll = () => {
     quickcommand.showConfirmBox('将会清空所有自定义命令，请确认！').then(x => {
         if (!x) return
         exportAll(true)
-        UTOOLS.getDocs(UTOOLS.QC_PREFIX).map(x => x._id).forEach(y => UTOOLS.delDB(y))
+        UTOOLS.getDocs(UTOOLS.DBPRE.QC).map(x => x._id).forEach(y => UTOOLS.delDB(y))
         importDefaultCommands();
         clearAllFeatures();
         showFeatureList();
@@ -436,7 +409,7 @@ let importCommand = async file => {
     // 单个命令导入
     if (pushData.single) {
         var code = pushData.qc.features.code;
-        UTOOLS.putDB(pushData.qc, UTOOLS.QC_PREFIX + code);
+        UTOOLS.putDB(pushData.qc, UTOOLS.DBPRE.QC + code);
         return {
             tags: pushData.qc.tags,
             code: code
@@ -444,7 +417,7 @@ let importCommand = async file => {
         // 多个命令导入
     } else {
         for (var code of Object.keys(pushData.qc)) {
-            UTOOLS.putDB(pushData.qc[code], UTOOLS.QC_PREFIX + code);
+            UTOOLS.putDB(pushData.qc[code], UTOOLS.DBPRE.QC + code);
         }
         return true
     }
@@ -479,5 +452,4 @@ $("#options").on('click', '.sidebar li', function() {
 export default {
     showFeatureList,
     locateToFeature,
-    getPanelFeatures
 }

src/assets/js/qcpanel.js

@@ -1,24 +1,166 @@
-let showPanel = features => {
+import iconpicker from "./iconpicker.js"
+import qctemplates from "./qctemplates.js"
+import qccommands from "./qccommands.js"
+import UTOOLS from "./utools.js"
+
+let showPanel = tag => {
+    let data = UTOOLS.getDB(UTOOLS.DBPRE.PAN + hexEncode(tag))
+    if (data.autoDetach) {
+        // 分离窗口，暂时只能用模拟按键实现
+        utools.simulateKeyboardTap('n', ctlKey)
+        utools.simulateKeyboardTap('d', ctlKey)
+    }
+    let features = getPanelFeatures(tag)
     let panel = '<table>'
     let n = 0
     features.forEach(p => {
         if (n % 6 == 0) panel += '<tr>'
         panel += `<td>
-        <img src="${p.data.features.icon}" cmd="${p.data.features.cmds[0]}">
+        <img src="${p.data.features.icon}" cmd="${p.data.features.cmds[0]}" output="${p.data.output}">
         <div class="title">${p.data.features.explain}</div>
         </td>`
         n += 1
         if (n % 6 == 0) panel += '</tr>'
     });
     $('#quickpanel').html(panel + '</table>').show()
+    $("img").click(e => {
+        let cmd = e.target.getAttribute('cmd')
+        utools.redirect(cmd)
+        if (data.autoDetach) {
+            let output = e.target.getAttribute('output')
+            if (['ignore', 'clip', 'send', 'notice', 'terminal'].indexOf(output) == -1) {
+                // 显示窗口，暂时只能用模拟按键实现
+                utools.simulateKeyboardTap('space', 'alt')
+            }
+        }
+    })
 }
 
-
+let addListenner = tag => {
-$("#quickpanel").on('click', 'img', function() {
+    iconpicker.getIcons8Icon('#networkImg', src => {
-    let cmd = $(this).attr('cmd')
+        $("#icon").attr('src', src)
-    utools.redirect(cmd)
     })
+    iconpicker.getLocalIcon('#icon', src => {
+        $("#icon").attr('src', src)
+    })
+    iconpicker.getRemoteIcon('#networkImgUrl', src => {
+        $("#icon").attr('src', src)
+    })
+    $(".platform").click(e => {
+        let t = $(e.target)
+        t.hasClass('disabled') ? t.removeClass('disabled') : $('.disabled').length != 2 && t.addClass('disabled')
+    })
+    $('.cancel').click(() => {
+        Swal.close()
+    })
+    $('.enable').click(() => {
+        changeConf(tag, 'enable')
+    })
+    $('.disable').click(() => {
+        changeConf(tag, 'disable')
+    })
+    $('.modify').click(() => {
+        changeConf(tag, 'modify')
+    })
+}
+
+let changeConf = (tag, action) => {
+    let cmds = $("#panelWord").val().split(',').map(x => x.trim())
+    let description = $("#panelDesc").val()
+    let icon = $("#icon").attr('src')
+    let platform = []
+    $('.platform').not('.disabled').each((x, y) => platform.push(y.id))
+    let autoDetach = $('#panelConf .checked-switch').prop('checked')
+    let inputCmd = window.editor.getValue()
+    let code = `panel_${hexEncode(tag)}`
+    let feature = {
+        code: code,
+        explain: description,
+        cmds: cmds,
+        icon: icon,
+        platform: platform
+    }
+    let data = {
+        feature: feature,
+        autoDetach: autoDetach,
+        inputCmd: inputCmd,
+    }
+    switch (action) {
+        case 'enable':
+            addFts(data)
+            break;
+        case 'disable':
+            removeFts(data)
+            break;
+        case 'modify':
+            removeFts(data)
+            addFts(data)
+            break;
+    }
+    UTOOLS.putDB(data, UTOOLS.DBPRE.PAN + hexEncode(tag))
+}
+
+let removeFts = data => {
+    UTOOLS.whole.removeFeature(data.feature.code)
+    data.activated = false
+    $('.currentTag').removeClass('panelTag')
+    quickcommand.showMessageBox("已取消当前标签的快捷面板")
+}
+
+let addFts = data => {
+    data.activated = true
+    UTOOLS.whole.setFeature(data.feature);
+    $('.currentTag').addClass('panelTag')
+    quickcommand.showMessageBox("已为当前标签启动快捷面板")
+}
+
+let loadConf = tag => {
+    $('.currentTag').hasClass('panelTag') ? $('.enable').hide() : $('.disable, .modify').hide()
+    let data = UTOOLS.getDB(UTOOLS.DBPRE.PAN + hexEncode(tag))
+    if (data.feature) {
+        $("#panelWord").val(data.feature.cmds.join(","));
+        $("#panelDesc").val(data.feature.explain);
+        $("#icon").attr('src', data.feature.icon);
+        $('#panelConf .checked-switch').prop('checked', data.autoDetach);
+        ["win32", "darwin", "linux"].forEach(x => (!data.feature.platform.includes(x) && $('#' + x).addClass('disabled')))
+        window.editor.setValue(data.inputCmd);
+    } else {
+        $("#panelWord").val(tag);
+        $("#panelDesc").val(`${tag}面板`);
+    }
+}
+
+let panelConf = tag => {
+    let features = getPanelFeatures(tag)
+    if (features.length == 0) return quickcommand.showMessageBox('快捷面板仅支持匹配模式为关键词的命令，当前标签不存在该类型命令或者该命令未启用', 'error', 8000)
+    Swal.fire({
+        title: '快捷面板',
+        width: 600,
+        padding: 30,
+        onBeforeOpen: () => {
+            addListenner(tag)
+            qccommands.createEditor()
+            loadConf(tag)
+        },
+        html: qctemplates.panel.conf,
+        showConfirmButton: false
+    })
+}
+
+// 获取可添加至面板的功能
+let getPanelFeatures = tag => {
+    let activedCode = utools.getFeatures().map(x => x.code)
+    let features = UTOOLS.whole.db.allDocs('qc_key_').filter(x => {
+        if (!x.data.tags) return false
+        if (!x.data.tags.includes(tag)) return false
+        if (x.data.features.platform && !x.data.features.platform.includes(window.processPlatform)) return false
+        if (!activedCode.includes(x.data.features.code)) return false
+        return true
+    })
+    return features
+}
 
 export default {
-    showPanel
+    showPanel,
+    panelConf
 }

src/assets/js/qctemplates.js

@@ -4,11 +4,11 @@ let featurelist = {
         <div id="clear" class="footBtn danger"><img src="img/clear.svg"><span>清除数据</span></div>
         <div id="disableAll" class="footBtn danger"><img src="img/disable.svg"><span>禁用本页</span></div>
         <div id="enableAll" class="footBtn"><img src="img/enable.svg"><span>启用本页</span></div>
-        <div id="exportAll" class="footBtn"><img src="img/exportAll.svg"><span>全部导出</span></div>
         <div id="viewHelps" class="footBtn"><img src="img/help.svg"><span>查看帮助</span></div>
         <div id="getShares" class="footBtn"><img src="img/share.svg"><span>分享中心</span></div>
-        <div id="addToPanel" class="footBtn"><img src="img/panel.svg"><span>快捷面板</span></div>
+        <div id="exportAll" class="footBtn"><img src="img/exportAll.svg"><span>全部导出</span></div>
         <div id="import" class="footBtn"><img src="img/import.svg"><span>导入命令</span></div>
+        <div id="addToPanel" class="footBtn"><img src="img/panel.svg"><span>快捷面板</span></div>
         <div id="add" class="footBtn"><img src="img/add.svg"><span>新建命令</span></div>
     </div>`
 }
@@ -30,7 +30,6 @@ let command = {
             </select>
             <span class="word">标&#12288;签</span>
             <select id="tags" multiple="multiple"></select>
-            <input type="text" readonly id="iconame" placeholder="更改图标">
         </p>
         <p class="varoutput">
             <span class="word">变&#12288;量</span>
@@ -130,12 +129,52 @@ let command = {
     <input type="checkbox" checked id="isString" style="margin-left: 60%;">加引号`,
 
     setIcon: `
+    <div id="iconpicker">
         <button id="localImg" class="swal2-confirm swal2-styled" style="width: 80%; height: 3rem; margin: 1em">选择本地图标</button>
-    <select id="networkImg"></select>
+        <select style="width: 80%" id="networkImg"></select>
-    <input id="networkImgUrl" placeholder="使用网络图片" class="swal2-input" style="width: 80%; height: 3rem; text-align: center">`
+        <input id="networkImgUrl" placeholder="使用网络图片" class="swal2-input" style="width: 80%; height: 3rem; text-align: center">
+    </div>`
+}
+
+let panel = {
+    conf: `
+    <div id="panelConf">
+        <p>
+            关键字： <input id="panelWord" placeholder="多个关键字逗号隔开">
+            描述： <input id="panelDesc" placeholder="快捷面板的功能描述">
+        </p>
+        <p>
+            图&#12288;标：
+            <select style="width: 160px" id="networkImg"></select>
+            <input id="networkImgUrl" placeholder="填入网络地址或点击右边选择本地图标">
+            <img id="icon" src="logo/quickpanel.png">
+        </p>
+        <p>
+            平&#12288;台：
+            <span style="margin-right: 75px;"><img id="win32" class="platform" src="./img/win32.svg">
+            <img id="darwin" class="platform" src="./img/darwin.svg">
+            <img id="linux" class="platform" src="./img/linux.svg"></span>
+            自动分离：<label class="switch-btn">
+            <input class="checked-switch" type="checkbox" checked>
+            <span class="text-switch"></span>
+            <span class="toggle-btn"></span>
+        </label>
+        </p>
+        <p style="display:none">
+            搜索框：<textarea id="cmd" placeholder="激活面板的搜索框，并执行命令, 留空则不使用搜索框。\n和 quickcommand 环境下使用 {{subinput}} 的方法一样。\n如 visit('https://www.baidu.com/s?wd={{subinput}}')"></textarea>
+        </p>
+        <p style="text-align: center"><br>
+            <button class="button enable">启用</button>
+            <button class="button modify">修改</button>
+            <button class="button disable">禁用</button>
+            <button class="button cancel">取消</button>
+        </p>
+    </div>
+    `
 }
 
 export default {
     featurelist,
-    command
+    command,
+    panel
 }

src/assets/style/darkmode.css

@@ -53,7 +53,8 @@
 
 #options #customize input,
 #options #customize select,
-#options #customize input#scptarg {
+#options #customize input#scptarg,
+#panelConf input {
     background: #303133;
     color: #e4e4e4;
 }
@@ -63,11 +64,13 @@
     border-bottom: 1px solid #696666;
 }
 
-#options #customize .CodeMirror {
+#options #customize .CodeMirror,
+#panelConf .CodeMirror {
     border: 1px solid #676767
 }
 
-#options #customize .CodeMirror-focused {
+#options #customize .CodeMirror-focused,
+#panelConf .CodeMirror-focused {
     border: 1px solid #676767 !important;
     box-shadow: 0px 0px 2px 0px #839ba8;
 }
@@ -79,21 +82,27 @@
 
 /*select2*/
 #options #customize .select2-selection--single,
-#options #customize .select2-selection--multiple {
+#options #customize .select2-selection--multiple,
+.swal2-container .select2-selection--single,
+.swal2-container .select2-selection--multiple {
     border-bottom: 1px solid #696666;
     background: #303133;
     color: #e4e4e4;
 }
 
-#options #customize .select2-selection__rendered {
+#options #customize .select2-selection__rendered,
+.swal2-container .select2-selection__rendered {
     color: #e4e4e4;
 }
 
-#options #customize .select2-selection__choice {
+#options #customize .select2-selection__choice,
+.swal2-container .select2-selection__choice {
     border: 1px solid #717171
 }
 
-#options #customize .select2-dropdown {
+#options #customize .select2-dropdown,
+.select2-container .select2-dropdown,
+.select2-container .select2-search__field {
     background: #303133;
     color: #e4e4e4;
     border: 1px solid #565656;
@@ -108,7 +117,8 @@
 }
 
 #options #customize .select2-results__option--selected,
-#quickselect .select2-results__option--selected {
+#quickselect .select2-results__option--selected,
+.swal2-container .select2-results__option--selected {
     background-color: #3e3e3e;
 }
 
@@ -139,10 +149,11 @@ body .swal2-range,
 body .swal2-radio,
 body .swal2-checkbox {
     background: #303133;
-    /* box-shadow: 0 0 0.625em #0a0a0a; */
+    box-shadow: 0 0 0.625em #0a0a0a;
 }
 
-body .swal2-container.swal2-backdrop-show, body .swal2-container.swal2-noanimation {
+body .swal2-container.swal2-backdrop-show,
+body .swal2-container.swal2-noanimation {
     background: rgb(48, 49, 51, 0.75)
 }
 

src/assets/style/options.css

@@ -23,7 +23,7 @@ body {
     user-select: none;
 }
 
-#options .switch-btn {
+.switch-btn {
     position: relative;
     display: inline-block;
     vertical-align: top;
@@ -34,19 +34,19 @@ body {
     zoom: 0.7;
 }
 
-#options .switch-btn:hover {
+.switch-btn:hover {
     filter: drop-shadow(0 0 5px black);
     transition: 0.2s;
 }
 
-#options .checked-switch {
+.checked-switch {
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
 }
 
-#options .text-switch {
+.text-switch {
     background-color: #cccccc;
     border: 1px solid #dddddd;
     border-radius: inherit;
@@ -59,8 +59,8 @@ body {
     text-transform: uppercase;
 }
 
-#options .text-switch:before,
+.text-switch:before,
-#options .text-switch:after {
+.text-switch:after {
     position: absolute;
     top: 50%;
     margin-top: -.5em;
@@ -71,45 +71,45 @@ body {
     transition: inherit;
 }
 
-#options .text-switch:before {
+.text-switch:before {
     content: 'OF';
     right: 6px;
 }
 
-#options .text-switch:after {
+.text-switch:after {
     content: 'ON';
     left: 6px;
     color: #FFFFFF;
     opacity: 0;
 }
 
-#options .checked-switch:checked~.text-switch {
+.checked-switch:checked~.text-switch {
     background-color: #00af2c;
     border: 1px solid #068506;
 }
 
-#options .checked-switch:disabled~.text-switch {
+.checked-switch:disabled~.text-switch {
     cursor: no-drop;
 }
 
-#options .checked-switch:disabled~.text-switch~.toggle-btn {
+.checked-switch:disabled~.text-switch~.toggle-btn {
     cursor: no-drop;
 }
 
-#options .checked-switch:disabled~.text-switch:before {
+.checked-switch:disabled~.text-switch:before {
     content: '▬';
     right: 11px;
 }
 
-#options .checked-switch:checked~.text-switch:before {
+.checked-switch:checked~.text-switch:before {
     opacity: 0;
 }
 
-#options .checked-switch:checked~.text-switch:after {
+.checked-switch:checked~.text-switch:after {
     opacity: 1;
 }
 
-#options .toggle-btn {
+.toggle-btn {
     background: linear-gradient(#eee, #fafafa);
     border-radius: 5px;
     height: 30px;
@@ -117,26 +117,27 @@ body {
     position: absolute;
     top: 1px;
     width: 28px;
+    margin: 1px;
 }
 
-#options .checked-switch:checked~.toggle-btn {
+.checked-switch:checked~.toggle-btn {
     left: 30px;
 }
 
-#options .text-switch,
+.text-switch,
-#options .toggle-btn {
+.toggle-btn {
     transition: All 0.3s ease;
     -webkit-transition: All 0.3s ease;
     -moz-transition: All 0.3s ease;
     -o-transition: All 0.3s ease;
 }
 
-#options .no-radius,
+.no-radius,
-#options .no-radius .toggle-btn {
+.no-radius .toggle-btn {
     border-radius: 0;
 }
 
-#options .circle-style .toggle-btn::before {
+.circle-style .toggle-btn::before {
     background: linear-gradient(#dedede, #cacaca);
     border-radius: 50%;
     content: "";
@@ -291,10 +292,6 @@ body {
     overflow: hidden;
 }
 
-#options #addToPanel.footBtn{
-    filter: grayscale(1);
-}
-
 #options .footBtn img {
     width: 15px;
     vertical-align: middle;
@@ -372,6 +369,7 @@ body {
 
 #options span.Btn img {
     height: 20px;
+    vertical-align: middle;
 }
 
 #options span.Btn img:hover {
@@ -481,7 +479,8 @@ body {
     transition: 0.2s;
 }
 
-#scriptCode, #outputCode {
+#scriptCode,
+#outputCode {
     width: 75%;
     margin: 0.5em 0
 }
@@ -575,12 +574,6 @@ input::-webkit-input-placeholder {
     font-size: 15px
 }
 
-#options #customize input#iconame {
-    width: 35%;
-    cursor: pointer;
-    display: none;
-}
-
 #options #customize #icon {
     float: right;
     max-width: 40px;
@@ -588,7 +581,8 @@ input::-webkit-input-placeholder {
     cursor: pointer;
 }
 
-#options #customize #icon:hover {
+#options #customize #icon:hover,
+#panelConf #icon:hover {
     transform: rotate(360deg);
     transition: 0.3s;
 }
@@ -610,21 +604,30 @@ input::-webkit-input-placeholder {
     transition: 0.5s;
 }
 
-#options #customize .platform {
+#options #customize .platform,
-    max-width: 26px;
+#panelConf .platform {
+    max-width: 25px;
+    vertical-align: middle;
     cursor: pointer;
 }
 
-#options #customize .platform:hover {
+.platform:visited{
+    filter: grayscale();
+}
+
+#options #customize .platform:hover,
+#panelConf .platform:hover {
     box-shadow: 0px 1px 1px 0px #3085d6;
     transition: 0.1s;
 }
 
-#options #customize .disabled {
+#options #customize .disabled,
+#panelConf .disabled{
     filter: grayscale();
 }
 
-#options #customize .button {
+#options #customize .button,
+.swal2-shown .button {
     width: 150px;
     height: 30px;
     border-width: 0px;
@@ -633,40 +636,55 @@ input::-webkit-input-placeholder {
     outline: none;
     color: white;
     width: 60px;
+    margin: 0px 10px;
 }
 
 #options #customize .button.cmdBtn{
     float: right;
-    margin: 0px 10px;
 }
 
-#options #customize .button.cancel {
+#options #customize .button.cancel,
+.swal2-shown .button.cancel {
     background: #808080c9;
 }
 
-#options #customize .button.cancel:hover {
+#options #customize .button.cancel:hover,
+.swal2-shown .button.cancel:hover {
     background: #a5a2a2c9;
     transition: 0.5s;
 }
 
-#options #customize .button.save {
+#options #customize .button.save,
+.swal2-shown .button.enable {
     background: #1E90FF;
 }
 
-#options #customize .button.save:hover {
+#options #customize .button.save:hover,
+.swal2-shown .button.enable:hover {
     background: #5599FF;
     transition: 0.5s;
 }
 
-#options #customize .button.run {
+#options #customize .button.run,
+.swal2-shown .button.modify {
     background: #15a86bc9;
 }
 
-#options #customize .button.run:hover {
+#options #customize .button.run:hover,
+.swal2-shown .button.modify:hover {
     background: #27c583c9;
     transition: 0.5s;
 }
 
+.swal2-shown .button.disable {
+    background: #d33;
+}
+
+.swal2-shown .button.disable:hover {
+    background:  #f54a4a;
+    transition: 0.5s;
+}
+
 /* ::-webkit-scrollbar {
     height: 0;
 } */
@@ -824,6 +842,10 @@ li.CodeMirror-hint {
     /* line-height: 50px; */
 }
 
+.select2-container .select2-search__field {
+    outline: none;
+}
+
 #quickselect .select2-results__option .title {
     font-size: 14px;
     line-height: 20px;
@@ -869,17 +891,16 @@ li.CodeMirror-hint {
     z-index: 1070;
 }
 
-.swal2-content .select2-container .select2-selection--single,
+#iconpicker .select2-container .select2-selection--single,
-.swal2-content .select2-container .select2-selection--single .select2-selection__arrow {
+#iconpicker .select2-container .select2-selection--single .select2-selection__arrow {
     height: 3rem;
 }
 
-
+#iconpicker .select2-container .select2-selection--single .select2-selection__rendered {
-.swal2-content .select2-container .select2-selection--single .select2-selection__rendered {
     line-height: 3rem;
 }
 
-.swal2-shown img.networkImg {
+#iconpicker img.networkImg {
     vertical-align: middle;
     max-width: 35px;
 }
@@ -977,22 +998,31 @@ li.CodeMirror-hint {
 }
 
 #quickpanel img {
-    max-width: 60px;
+    width: 60px;
-    max-height: 60px;
+    height: 60px;
-    padding: 20px 30px;
+    margin: 15px 25px;
     border-radius: 50%;
     cursor: pointer;
+    background: linear-gradient(to bottom, #ECE9E6, #FFFFFF);
     user-select: none;
 }
 
 #quickpanel img:hover {
-    box-shadow: 0px 3px 3px 0px #BDBDBD;
     transition: 0.5s;
+    box-shadow: 0px 1px 4px 1px #0000007a;
 }
 
 #quickpanel {
     padding: 10px 20px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    color: #888787;
     text-align: center;
+    /* background-size: 100%;
+    background-image: url("../../img/bg.jpg"); */
 }
 
 #quickpanel .title {
@@ -1001,7 +1031,6 @@ li.CodeMirror-hint {
     white-space: nowrap;
     width: 120px;
     user-select: none;
-    color: #757575;
 }
 
 #quickpanel .widebutton {
@@ -1009,3 +1038,62 @@ li.CodeMirror-hint {
     height: 3rem;
     margin: 5px
 }
+
+#panelConf {
+    text-align: left;
+}
+
+#panelConf input,
+#panelConf .select2-selection--single {
+    border-left: none;
+    border-right: none;
+    border-top: none;
+    border-bottom: 1px solid #dbdbdb;
+    height: 28px;
+    box-sizing: border-box;
+    outline: none;
+}
+
+#panelConf .select2-selection--single {
+    border-radius: 0;
+    padding-bottom: 3px;
+}
+
+#panelConf #panelWord {
+    width: 160px
+}
+
+#panelConf #panelDesc {
+    width: 240px;
+}
+
+#panelConf #networkImgUrl {
+    width: 260px;
+}
+
+#panelConf #icon {
+    max-width: 30px;
+    max-height: 30px;
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+#panelConf .CodeMirror {
+    font-size: 14px;
+    font-family: "Monaco", "consolas";
+    border: 1px solid #dbdbdb;
+    border-radius: 3px;
+    width: auto;
+    height: 80px;
+    margin-top: 10px;
+}
+
+#panelConf img.networkImg,
+.select2-results img.networkImg{
+    vertical-align: middle;
+    max-width: 25px;
+}
+
+.swal2-shown .CodeMirror-hints {
+    z-index: 1070;
+}

src/plugin.json

@@ -4,7 +4,7 @@
     "main": "index.html",
     "homepage": "https://github.com/fofolee/uTools-QuickerCommand",
     "publishPage": "https://yuanliao.info/d/424",
-    "version": "2.2.0",
+    "version": "2.3.0",
     "author": "云之轩",
     "unpack":"autopep8.py",
     "logo": "logo.png",

src/preload.js

@@ -48,16 +48,16 @@ const shortCodes = [
     }
 ]
 
+ctlKey = utools.isMacOs() ? 'command' : 'control'
+
 quickcommand = {
     // 模拟复制操作
     simulateCopy: function() {
-        var ctlKey = utools.isMacOs() ? 'command' : 'control';
         utools.simulateKeyboardTap('c', ctlKey);
     },
 
     // 模拟粘贴操作
     simulatePaste: function() {
-        var ctlKey = utools.isMacOs() ? 'command' : 'control';
         utools.simulateKeyboardTap('v', ctlKey);
     },
 
@@ -658,10 +658,13 @@ getNodeJsCommand = () => {
     return obj
 }
 
-htmlEncode = (value, raw) => {
+htmlEncode = (value, raw=true) => {
     return raw ? String(value).replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;") : value
 }
 
+hexEncode = text => Buffer.from(text, 'utf8').toString('hex')
+hexDecode = text => Buffer.from(text, 'hex').toString('utf8')
+
 py_beautify = (code, cb) => {
     var file = getQuickCommandScriptFile('py')
     fs.writeFile(file, code, { encoding: 'utf8' }, err => {