From 121a9951ae2183fc8e52efac24c92f07941e319b Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sat, 9 Apr 2022 10:31:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E3=80=8E=E5=85=B3=E4=BA=8E?=
 =?UTF-8?q?=E3=80=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ConfigurationMenu.vue | 94 ++++++++++++++++++++--------
 src/js/options/aboutLinks.js         | 36 +++++++++++
 2 files changed, 104 insertions(+), 26 deletions(-)
 create mode 100644 src/js/options/aboutLinks.js

diff --git a/src/components/ConfigurationMenu.vue b/src/components/ConfigurationMenu.vue
index a2df8cd..fb74b15 100644
--- a/src/components/ConfigurationMenu.vue
+++ b/src/components/ConfigurationMenu.vue
@@ -37,7 +37,7 @@
             allFeaturesLength
           }}</q-avatar>
           Features
-          <q-tooltip>当前启用的「快捷命令』数</q-tooltip>
+          <q-tooltip>当前启用的「快捷命令」数</q-tooltip>
         </q-chip>
         <q-chip dense square>
           <q-avatar color="primary" text-color="white">
@@ -129,25 +129,6 @@
           </q-list>
         </q-menu>
       </q-item>
-      <!-- 收藏 -->
-      <q-item v-if="isTagStared" clickable v-close-popup>
-        <q-item-section side>
-          <q-icon name="star_border" />
-        </q-item-section>
-        <q-item-section>取消收藏</q-item-section>
-      </q-item>
-      <q-item v-else clickable v-close-popup>
-        <q-item-section side>
-          <q-icon name="star" />
-        </q-item-section>
-        <q-item-section>收藏标签</q-item-section>
-        <q-tooltip
-          >收藏后，会将当前标签名作为全局关键字，可在 uTools 的主输入框进行搜索
-          <br />
-          搜索进入后，默认进入当前标签的面板视图 <br />
-          类似于旧版本的「快捷面板」</q-tooltip
-        >
-      </q-item>
       <!-- 选项 -->
       <q-item clickable>
         <q-item-section side>
@@ -214,20 +195,75 @@
           </q-list>
         </q-menu>
       </q-item>
-      <!-- 帮助 -->
-      <q-item clickable v-close-popup>
+      <!-- 收藏 -->
+      <q-item v-if="isTagStared" clickable v-close-popup>
         <q-item-section side>
-          <q-icon name="help" />
+          <q-icon name="star_border" />
         </q-item-section>
-        <q-item-section>帮助</q-item-section></q-item
+        <q-item-section>取消收藏</q-item-section>
+      </q-item>
+      <q-item v-else clickable v-close-popup>
+        <q-item-section side>
+          <q-icon name="star" />
+        </q-item-section>
+        <q-item-section>收藏标签</q-item-section>
+        <q-tooltip
+          >收藏后，会将当前标签名作为全局关键字，可在 uTools 的主输入框进行搜索
+          <br />
+          搜索进入后，默认进入当前标签的面板视图 <br />
+          类似于旧版本的「快捷面板」</q-tooltip
+        >
+      </q-item>
+      <!-- 关于 -->
+      <q-item clickable @click="showAbout = true">
+        <q-item-section side>
+          <q-icon name="info" />
+        </q-item-section>
+        <q-item-section>关于</q-item-section></q-item
       >
-    </q-list></q-menu
-  >
+    </q-list>
+    <q-dialog v-model="showAbout">
+      <q-card>
+        <q-card-section class="q-gutter-md flex items-center">
+          <q-avatar square size="48px">
+            <img src="/logo.png" />
+          </q-avatar>
+          <span class="text-h5"
+            >{{ pluginInfo.pluginName }} v{{ pluginInfo.version }}</span
+          >
+        </q-card-section>
+        <q-card-section> {{ pluginInfo.description }} </q-card-section>
+        <q-card-section>
+          <div
+            v-for="group in Object.keys(links)"
+            :key="group"
+            class="q-gutter-sm"
+          >
+            <q-btn
+              flat
+              color="primary"
+              v-for="item in links[group]"
+              :key="item"
+              @click="visit(item.url)"
+              :label="item.name"
+              ><q-tooltip>{{ item.desc }} </q-tooltip></q-btn
+            >
+            <br />
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn flat label="确定" color="primary" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </q-menu>
 </template>
 
 <script>
 import { setCssVar } from "quasar";
 import { ref } from "vue";
+import links from "../js/options/aboutLinks.js";
 
 export default {
   data() {
@@ -240,6 +276,9 @@ export default {
       configurationPage: this.$parent.$parent.$parent,
       setCssVar: setCssVar,
       selectFile: ref(null),
+      showAbout: false,
+      pluginInfo: window.pluginInfo(),
+      links: links,
     };
   },
   mounted() {
@@ -288,6 +327,9 @@ export default {
       this.$profile.backgroundImg = reset ? null : this.selectFile.path;
       this.configurationPage.$forceUpdate();
     },
+    visit(url) {
+      utools.shellOpenExternal(url);
+    },
   },
 };
 </script>
diff --git a/src/js/options/aboutLinks.js b/src/js/options/aboutLinks.js
new file mode 100644
index 0000000..d9b4eee
--- /dev/null
+++ b/src/js/options/aboutLinks.js
@@ -0,0 +1,36 @@
+const links = {
+    plugin: [{
+            name: "帮助",
+            url: "",
+            desc: "查看插件使用帮助"
+        },
+        {
+            name: "源码",
+            url: "https://github.com/fofolee/uTools-quickcommand",
+            desc: "本插件完全开源，记得 Star 哟"
+        }, {
+            name: "论坛",
+            url: "https://yuanliao.info/d/424-242-242",
+            desc: "到猿料论坛参与讨论吧"
+        }
+    ],
+    tech: [{
+        name: "Vue.js",
+        url: "https://v3.cn.vuejs.org/",
+        desc: "基于 Vue.js 开发"
+    }, {
+        name: "Quasar Framework",
+        url: "https://quasar.dev/",
+        desc: "基于 Quasar Framework 开发"
+    }, {
+        name: "Google Fonts",
+        url: "https://fonts.google.com/",
+        desc: "文字图标来自 Google Fonts"
+    }, {
+        name: "Icon8s",
+        url: "https://icons8.com/",
+        desc: "彩色图标来自 Icon8s"
+    }]
+}
+
+export default links
\ No newline at end of file