diff --git a/src/assets/index.js b/src/assets/index.js
index 72d8043..13cbcfd 100644
--- a/src/assets/index.js
+++ b/src/assets/index.js
@@ -1349,19 +1349,100 @@
})
// 选择图标
- $("#options").on('click', '#icon', async function () {
- var options = {
- buttonLabel: '选择',
- properties: ['openFile']
- }
- var file = getFileInfo({ type: 'dialog', argvs: options, readfile: false })
- if (file) {
- $("#iconame").val(file.name);
- let src = await getBase64Ico(file.path);
- $("#icon").attr('src', src);
- }
+ $("#options").on('click', '#icon', function () {
+ showChangeIconWindow()
})
+ // 从 icons8 选择图标
+ let getIcons8Icon = () => {
+ let showIcon = icon => {
+ return $(`
${icon.name}`)
+ }
+ let showItems = item => {
+ if (item.loading) return item.text
+ return showIcon(item)
+ }
+ let showSelection = selection => {
+ if (!selection.commonName) return selection.text
+ $('#networkImg').val(`https://img.icons8.com/color/1x/${selection.commonName}.png`)
+ return showIcon(selection)
+ }
+ $('#icons8').select2({
+ dataType: 'json',
+ width: '80%',
+ delay: 250,
+ ajax: {
+ url: 'https://search.icons8.com/api/iconsets/v5/search',
+ data: function (params) {
+ return {
+ term: params.term,
+ offset: (params.page - 1) * 10 || 0,
+ platform: 'color',
+ amount: 10,
+ token: 'JpOyWT5TW8yYThBIk1fCbsNDd3ISSChSD5vPgCON'
+ }
+ },
+ processResults: function (data, params) {
+ return {
+ results: data.icons,
+ pagination: {
+ more: (data.parameters.offset + 10) < data.parameters.countAll
+ }
+ };
+ },
+ cache: true
+ },
+ placeholder: '搜索icons8图标',
+ minimumInputLength: 1,
+ templateResult: showItems,
+ templateSelection: showSelection
+ })
+ }
+
+ let getRemoteImg = async imgUrl => {
+ try {
+ let imgInfo = getFileInfo({ type: 'file', argvs: imgUrl, readfile: false })
+ let imgPath = getQuickCommandScriptFile(imgInfo.ext)
+ await quickcommand.downloadFile(imgUrl, imgPath)
+ $("#iconame").val(imgInfo.name);
+ let src = await getBase64Ico(imgPath);
+ $("#icon").attr('src', src);
+ } catch (error) {
+ quickcommand.showMessageBox('图片地址有误!', 'error')
+ }
+ }
+
+ let showChangeIconWindow = () => {
+ var html = `
+
+
+
+ `
+ Swal.fire({
+ title: "设置图标",
+ onBeforeOpen: () => {
+ getIcons8Icon()
+ $('#localImg').click(async () => {
+ var options = { buttonLabel: '选择', properties: ['openFile'] }
+ var file = getFileInfo({ type: 'dialog', argvs: options, readfile: false })
+ if (file) {
+ $("#iconame").val(file.name);
+ let src = await getBase64Ico(file.path);
+ $("#icon").attr('src', src);
+ Swal.close()
+ }
+ })
+ },
+ html: html,
+ showCancelButton: true,
+ preConfirm: async () => {
+ let imgUrl = $('#networkImg').val()
+ if (imgUrl) await getRemoteImg(imgUrl)
+ else quickcommand.showMessageBox('没有输入图标地址', 'warning')
+ }
+ })
+ }
+
let SaveCurrentCommand = async () => {
if ($('#tags').is(":parent")) {
var type = $('#type').val(),
diff --git a/src/assets/style/options.css b/src/assets/style/options.css
index dee57e8..e25e53d 100644
--- a/src/assets/style/options.css
+++ b/src/assets/style/options.css
@@ -831,6 +831,25 @@ li.CodeMirror-hint {
outline: none
}
+.swal2-shown .select2-dropdown {
+ z-index: 1070;
+}
+
+.swal2-content .select2-container .select2-selection--single,
+.swal2-content .select2-container .select2-selection--single .select2-selection__arrow {
+ height: 3rem;
+}
+
+
+.swal2-content .select2-container .select2-selection--single .select2-selection__rendered {
+ line-height: 3rem;
+}
+
+.swal2-content img.icon8s {
+ vertical-align: middle;
+ max-width: 35px;
+}
+
/*select2*/
/*quicktextarea*/
@@ -866,7 +885,7 @@ li.CodeMirror-hint {
outline: none;
}
-#quicktextarea .circleButton{
+#quicktextarea .circleButton {
right: 20px;
bottom: 20px;
height: 40px;
@@ -874,7 +893,7 @@ li.CodeMirror-hint {
background: #2196F3;
}
-#quickselect .circleButton{
+#quickselect .circleButton {
right: 10px;
bottom: 10px;
height: 25px;
@@ -890,7 +909,7 @@ li.CodeMirror-hint {
/*quicktextarea*/
/*搜索框*/
-#out > #outputSearch {
+#out>#outputSearch {
position: fixed;
opacity: 0;
top: -30px;
@@ -900,7 +919,7 @@ li.CodeMirror-hint {
box-shadow: 2px 1px 3px 0px black;
}
-#out > #outputSearch input {
+#out>#outputSearch input {
height: 20px;
width: 220px;
margin-right: 5px;
@@ -909,11 +928,11 @@ li.CodeMirror-hint {
outline: none;
}
-#out > #outputSearch input:focus {
+#out>#outputSearch input:focus {
border: 1px solid #03A9F4;
}
-#out > #outputSearch > kbd {
+#out>#outputSearch>kbd {
cursor: pointer;
margin: 5px;
user-select: none;