From e8189b0837b3cf9be0f0be6c47f81bc9afdb2492 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=8C=E8=90=8C=E5=93=92=E8=B5=AB=E8=90=9D?=
 <ma_shiqing@163.com>
Date: Sun, 13 Aug 2023 23:56:01 -0700
Subject: [PATCH] :sparkles: Feature: optimize manage page UI, add new version
 check for plugin page

---
 src/renderer/manage/pages/bucketPage.vue | 18 +++++++-------
 src/renderer/pages/Plugin.vue            | 31 +++++++++++++++++++++---
 src/universal/types/types.d.ts           |  1 +
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/renderer/manage/pages/bucketPage.vue b/src/renderer/manage/pages/bucketPage.vue
index 23f7a00..00e75d7 100644
--- a/src/renderer/manage/pages/bucketPage.vue
+++ b/src/renderer/manage/pages/bucketPage.vue
@@ -566,7 +566,7 @@ https://www.baidu.com/img/bd_logo1.png"
                 <el-row>
                   <el-icon
                     v-if="!item.isDir && isShowRenameFileIcon"
-                    size="20"
+                    size="15"
                     style="cursor: pointer;"
                     color="#409EFF"
                     @click="handleRenameFile(item)"
@@ -575,7 +575,7 @@ https://www.baidu.com/img/bd_logo1.png"
                   </el-icon>
                   <el-icon
                     v-if="item.isDir"
-                    size="20"
+                    size="15"
                     style="cursor: pointer;"
                     color="crimson"
                     @click="handleFolderBatchDownload(item)"
@@ -585,7 +585,7 @@ https://www.baidu.com/img/bd_logo1.png"
                   <el-dropdown>
                     <template #default>
                       <el-icon
-                        size="20"
+                        size="15"
                         style="cursor: pointer;"
                         color="#409EFF"
                         @click="async () => {
@@ -651,7 +651,7 @@ https://www.baidu.com/img/bd_logo1.png"
                     </template>
                   </el-dropdown>
                   <el-icon
-                    size="20"
+                    size="15"
                     style="cursor: pointer;"
                     color="#409EFF"
                     @click="handleShowFileInfo(item)"
@@ -659,7 +659,7 @@ https://www.baidu.com/img/bd_logo1.png"
                     <Document />
                   </el-icon>
                   <el-icon
-                    size="20"
+                    size="15"
                     style="cursor: pointer;"
                     color="#FFB6C1"
                     @click="handleDeleteFile(item)"
@@ -3461,7 +3461,7 @@ const columns: Column<any>[] = [
         ? item.isDir || !isShowRenameFileIcon.value
           ? item.isDir
             ? <ElIcon
-              size="20"
+              size="15"
               style="cursor: pointer;"
               color="#409EFF"
               // @ts-ignore
@@ -3471,7 +3471,7 @@ const columns: Column<any>[] = [
             </ElIcon>
             : <template></template>
           : <ElIcon
-            size="20"
+            size="15"
             style="cursor: pointer;"
             color="#409EFF"
             // @ts-ignore
@@ -3498,7 +3498,7 @@ const columns: Column<any>[] = [
             {{
               default: () => (
                 <ElIcon
-                  size="20"
+                  size="15"
                   style="cursor: pointer;"
                   color="#409EFF"
                   // @ts-ignore
@@ -3570,7 +3570,7 @@ const columns: Column<any>[] = [
           hide-after={150}
         >
           <ElIcon
-            size="20"
+            size="15"
             style="cursor: pointer;"
             color="#409EFF"
             // @ts-ignore
diff --git a/src/renderer/pages/Plugin.vue b/src/renderer/pages/Plugin.vue
index 3184c6c..3d55349 100644
--- a/src/renderer/pages/Plugin.vue
+++ b/src/renderer/pages/Plugin.vue
@@ -58,8 +58,8 @@
         :xs="24"
         :sm="pluginList.length === 1 ? 24 : 12"
         :md="pluginList.length === 1 ? 24 : 12"
-        :lg="pluginList.length === 1 ? 24 : 6"
-        :xl="pluginList.length === 1 ? 24 : 6"
+        :lg="pluginList.length === 1 ? 24 : 12"
+        :xl="pluginList.length === 1 ? 24 : 12"
       >
         <div
           class="plugin-item"
@@ -85,7 +85,17 @@
               class="plugin-item__name"
               @click="openHomepage(item.homepage)"
             >
-              {{ item.name }} <small>{{ ' ' + item.version }}</small>
+              {{ item.name }} <small>{{ ' ' + item.version }}</small> &nbsp;
+              <!-- 升级提示 -->
+              <el-tag
+                v-if="latestVersionMap[item.fullName] && latestVersionMap[item.fullName] !== item.version"
+                type="success"
+                size="small"
+                round
+                effect="plain"
+              >
+                new
+              </el-tag>
             </div>
             <div
               class="plugin-item__desc"
@@ -233,7 +243,7 @@ import {
 } from '#/events/constants'
 
 // Vue 相关
-import { computed, ref, onBeforeMount, onBeforeUnmount, watch, onMounted } from 'vue'
+import { computed, ref, onBeforeMount, onBeforeUnmount, watch, onMounted, reactive } from 'vue'
 
 // 数据发送工具函数
 import { getConfig, saveConfig, sendRPC, sendToMain } from '@/utils/dataSender'
@@ -257,6 +267,7 @@ const dialogVisible = ref(false)
 const pluginNameList = ref<string[]>([])
 const loading = ref(true)
 const needReload = ref(false)
+const latestVersionMap = reactive<{ [key: string]: string }>({})
 const pluginListToolTip = $T('PLUGIN_LIST')
 const importLocalPluginToolTip = $T('PLUGIN_IMPORT_LOCAL')
 // const id = ref('')
@@ -292,6 +303,15 @@ watch(dialogVisible, (val: boolean) => {
   }
 })
 
+async function getLatestVersionOfPlugIn (pluginName: string) {
+  try {
+    const res = await axios.get(`https://registry.npmjs.com/${pluginName}`)
+    latestVersionMap[pluginName] = res.data['dist-tags'].latest
+  } catch (err) {
+    console.error(err)
+  }
+}
+
 onBeforeMount(async () => {
   os.value = process.platform
   ipcRenderer.on('hideLoading', () => {
@@ -308,6 +328,9 @@ onBeforeMount(async () => {
   ipcRenderer.on('pluginList', (evt: IpcRendererEvent, list: IPicGoPlugin[]) => {
     pluginList.value = list
     pluginNameList.value = list.map(item => item.fullName)
+    for (const item of pluginList.value) {
+      getLatestVersionOfPlugIn(item.fullName)
+    }
     loading.value = false
   })
   ipcRenderer.on('installPlugin', (evt: IpcRendererEvent, { success, body }: {
diff --git a/src/universal/types/types.d.ts b/src/universal/types/types.d.ts
index 03893e2..2d08fc3 100644
--- a/src/universal/types/types.d.ts
+++ b/src/universal/types/types.d.ts
@@ -151,6 +151,7 @@ interface IPicGoPlugin {
   guiMenu?: any[]
   ing: boolean
   hasInstall?: boolean
+  [propName: string]: any
 }
 
 interface IPicGoPluginConfig {