From 64321fb03a8cf005f8b81957501b508d243968a6 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sat, 16 Apr 2022 22:46:41 +0800
Subject: [PATCH] =?UTF-8?q?iconpicker=20=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandSideBar.vue     |  18 ++-
 src/components/popup/IconPicker.vue   | 165 ++++++++++++--------------
 src/components/popup/PanelSetting.vue |  16 +--
 3 files changed, 94 insertions(+), 105 deletions(-)

diff --git a/src/components/CommandSideBar.vue b/src/components/CommandSideBar.vue
index e57a066..549762d 100644
--- a/src/components/CommandSideBar.vue
+++ b/src/components/CommandSideBar.vue
@@ -18,7 +18,7 @@
       />
       <q-img
         class="commandLogo"
-        @click="showIconPicker"
+        @click="showIconPicker = true"
         width="64px"
         :src="currentCommand.features.icon"
       />
@@ -257,11 +257,12 @@
         </div>
       </div>
     </div>
-    <iconPicker
-      @iconChanged="(dataUrl) => (currentCommand.features.icon = dataUrl)"
-      position="left"
-      ref="icon"
-    />
+    <q-dialog v-model="showIconPicker" position="left">
+      <iconPicker
+        @iconChanged="(dataUrl) => (currentCommand.features.icon = dataUrl)"
+        ref="icon"
+      />
+    </q-dialog>
   </q-scroll-area>
 </template>
 
@@ -296,6 +297,7 @@ export default {
       outputTypesOptions: Object.keys(outputTypes),
       specialVar: "{{}}",
       allQuickCommandTags: this.$parent.allQuickCommandTags,
+      showIconPicker: false,
     };
   },
   props: {
@@ -411,10 +413,6 @@ export default {
       }
       return updateData;
     },
-
-    showIconPicker() {
-      this.$refs.icon.showIconPicker = true;
-    },
   },
 };
 </script>
diff --git a/src/components/popup/IconPicker.vue b/src/components/popup/IconPicker.vue
index 39fab1b..b0ae250 100644
--- a/src/components/popup/IconPicker.vue
+++ b/src/components/popup/IconPicker.vue
@@ -1,90 +1,82 @@
 <template>
-  <div>
-    <q-dialog v-model="showIconPicker" class="q-gutter" :position="position">
-      <q-card>
-        <q-card-section class="text-h5 text-center">更改图标</q-card-section>
-        <q-card-section>
-          <q-select
-            ref="icon8"
-            v-model="icon8sIcon"
-            :options="options"
-            label="搜索ICON8S"
-            options-dense
-            use-input
-            :loading="loading"
-            input-debounce="1000"
-            @input-value="searchIcon8s"
-            @update:model-value="getIcon8sIcon"
-            transition-show="jump-down"
-            transition-hide="jump-up"
-            virtual-scroll-slice-size="30"
-            standout="bg-primary text-white"
-          >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  键入关键词搜索
-                </q-item-section>
-              </q-item>
-            </template>
-            <template v-slot:selected>
-              <!-- {{ icon8sIcon?.name || "" }} -->
-            </template>
-            <template v-slot:prepend>
-              <q-avatar size="24px" v-if="dataUrl && icon8sIcon">
-                <q-img :src="dataUrl" />
-              </q-avatar>
-              <q-icon v-else name="image" />
-            </template>
-            <template v-slot:option="scope">
-              <q-item v-bind="scope.itemProps">
-                <q-item-section avatar>
-                  <q-img :src="getIcon8sIconUrl(scope.opt, 1)" />
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label v-html="scope.opt.name" />
-                </q-item-section>
-              </q-item> </template
-          ></q-select>
-        </q-card-section>
-        <q-card-section>
-          <q-file
-            standout="bg-primary text-white"
-            :display-value="localIconFile || ''"
-            @click="getLocalIcon"
-            label="选择本地资源"
-          >
-            <template v-slot:prepend>
-              <q-avatar size="24px" v-if="dataUrl && localIconFile">
-                <q-img :src="dataUrl" />
-              </q-avatar>
-              <q-icon v-else name="folder" />
-            </template>
-          </q-file>
-        </q-card-section>
-        <q-card-section>
-          <q-input
-            standout="bg-primary text-white"
-            v-model="netWorkIconUrl"
-            @blur="getRemoteIcon"
-            type="text"
-            label="网络图片地址"
-          >
-            <template v-slot:prepend>
-              <q-avatar size="24px" v-if="dataUrl && netWorkIconUrl">
-                <q-img :src="dataUrl" />
-              </q-avatar>
-              <q-icon v-else name="cloud" /> </template
-          ></q-input>
-        </q-card-section>
-        <q-card-actions align="right">
-          <q-btn flat color="primary" @click="showIconPicker = false"
-            >确定</q-btn
-          >
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
-  </div>
+  <q-card>
+    <q-card-section class="text-h5 text-center">更改图标</q-card-section>
+    <q-card-section>
+      <q-select
+        ref="icon8"
+        v-model="icon8sIcon"
+        :options="options"
+        label="搜索ICON8S"
+        options-dense
+        use-input
+        :loading="loading"
+        input-debounce="1000"
+        @input-value="searchIcon8s"
+        @update:model-value="getIcon8sIcon"
+        transition-show="jump-down"
+        transition-hide="jump-up"
+        virtual-scroll-slice-size="30"
+        standout="bg-primary text-white"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> 键入关键词搜索 </q-item-section>
+          </q-item>
+        </template>
+        <template v-slot:selected>
+          <!-- {{ icon8sIcon?.name || "" }} -->
+        </template>
+        <template v-slot:prepend>
+          <q-avatar size="24px" v-if="dataUrl && icon8sIcon">
+            <q-img :src="dataUrl" />
+          </q-avatar>
+          <q-icon v-else name="image" />
+        </template>
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section avatar>
+              <q-img :src="getIcon8sIconUrl(scope.opt, 1)" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label v-html="scope.opt.name" />
+            </q-item-section>
+          </q-item> </template
+      ></q-select>
+    </q-card-section>
+    <q-card-section>
+      <q-file
+        standout="bg-primary text-white"
+        :display-value="localIconFile || ''"
+        @click="getLocalIcon"
+        label="选择本地资源"
+      >
+        <template v-slot:prepend>
+          <q-avatar size="24px" v-if="dataUrl && localIconFile">
+            <q-img :src="dataUrl" />
+          </q-avatar>
+          <q-icon v-else name="folder" />
+        </template>
+      </q-file>
+    </q-card-section>
+    <q-card-section>
+      <q-input
+        standout="bg-primary text-white"
+        v-model="netWorkIconUrl"
+        @blur="getRemoteIcon"
+        type="text"
+        label="网络图片地址"
+      >
+        <template v-slot:prepend>
+          <q-avatar size="24px" v-if="dataUrl && netWorkIconUrl">
+            <q-img :src="dataUrl" />
+          </q-avatar>
+          <q-icon v-else name="cloud" /> </template
+      ></q-input>
+    </q-card-section>
+    <q-card-actions align="right">
+      <q-btn flat color="primary" v-close-popup>确定</q-btn>
+    </q-card-actions>
+  </q-card>
 </template>
 
 <script>
@@ -94,7 +86,6 @@ import pictureCompress from "picture-compressor";
 export default {
   data() {
     return {
-      showIconPicker: false,
       localIconFile: ref(null),
       icon8sIcon: ref(null),
       netWorkIconUrl: "",
diff --git a/src/components/popup/PanelSetting.vue b/src/components/popup/PanelSetting.vue
index fc6e937..da15968 100644
--- a/src/components/popup/PanelSetting.vue
+++ b/src/components/popup/PanelSetting.vue
@@ -4,9 +4,7 @@
       <div class="row q-gutter-md">
         <div class="col-auto justify-center content-center flex q-pa-md">
           <q-avatar square class="commandLogo">
-            <q-img
-              :src="features.icon"
-              @click="$refs.icon.showIconPicker = true"
+            <q-img :src="features.icon" @click="showIconPicker = true"
           /></q-avatar>
         </div>
         <div class="col">
@@ -42,11 +40,12 @@
       <q-btn flat label="取消" color="grey" v-close-popup />
       <q-btn flat label="确定" color="primary" v-close-popup @click="markTag" />
     </q-card-actions>
-    <IconPicker
-      ref="icon"
-      @iconChanged="(dataUrl) => (features.icon = dataUrl)"
-      position="right"
-    />
+    <q-dialog v-model="showIconPicker" position="right">
+      <iconPicker
+        @iconChanged="(dataUrl) => (features.icon = dataUrl)"
+        ref="icon"
+      />
+    </q-dialog>
   </q-card>
 </template>
 
@@ -64,6 +63,7 @@ export default {
         platform: ["win32", "darwin", "linux"],
         code: `panel_${window.hexEncode(this.currentTag)}`,
       },
+      showIconPicker: false,
     };
   },
   props: {