feat：优化插件升级使用体验

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "1.7.1-1",
+  "version": "1.7.2",
   "private": true,
   "bin": "dist/service.js",
   "scripts": {
@@ -109,4 +109,4 @@
   "resolutions": {
     "postcss": "8"
   }
-}
+}

src/components/cards/PluginAppCard.vue

@@ -49,7 +49,7 @@ async function installPlugin() {
   try {
     // 显示等待提示框
     progressDialog.value = true
-    progressText.value = `正在安装 ${props.plugin?.plugin_name} ${props?.plugin?.plugin_version} 插件...`
+    progressText.value = `正在安装 ${props.plugin?.plugin_name} v${props?.plugin?.plugin_version} ...`
 
     const result: { [key: string]: any } = await api.get(
       `plugin/install/${props.plugin?.id}`,
@@ -163,15 +163,6 @@ const dropdownItems = ref([
           </VMenu>
         </IconBtn>
       </div>
-      <div
-        v-if="props.plugin?.has_update"
-        class="me-n3 absolute top-0 left-1"
-      >
-        <VIcon
-          icon="mdi-new-box"
-          class="text-white"
-        />
-      </div>
       <VAvatar
         size="8rem"
       >

src/components/cards/PluginCard.vue

@@ -41,12 +41,18 @@ const pluginConfigDialog = ref(false)
 // 插件配置表单数据
 const pluginConfigForm = ref({})
 
+// 进度框
+const progressDialog = ref(false)
+
 // 插件表单配置项
 let pluginFormItems = reactive([])
 
 // 插件数据页面
 const pluginInfoDialog = ref(false)
 
+// 进度框文本
+const progressText = ref('正在更新插件...')
+
 // 插件数据页面配置项
 let pluginPageItems = reactive([])
 
@@ -83,7 +89,12 @@ async function uninstallPlugin() {
     return
 
   try {
+  // 显示等待提示框
+    progressDialog.value = true
+    progressText.value = `正在卸载 ${props.plugin?.plugin_name} ...`
     const result: { [key: string]: any } = await api.delete(`plugin/${props.plugin?.id}`)
+    // 隐藏等待提示框
+    progressDialog.value = false
     if (result.success) {
       $toast.success(`插件 ${props.plugin?.plugin_name} 已卸载`)
 
@@ -221,6 +232,41 @@ async function resetPlugin() {
   }
 }
 
+// 更新插件
+async function updatePlugin() {
+  try {
+    // 显示等待提示框
+    progressDialog.value = true
+    progressText.value = `正在更新 ${props.plugin?.plugin_name} ...`
+
+    const result: { [key: string]: any } = await api.get(
+      `plugin/install/${props.plugin?.id}`,
+      {
+        params: {
+          repo_url: props.plugin?.repo_url,
+          force: true,
+        },
+      },
+    )
+
+    // 隐藏等待提示框
+    progressDialog.value = false
+
+    if (result.success) {
+      $toast.success(`插件 ${props.plugin?.plugin_name} 更新成功！`)
+
+      // 通知父组件刷新
+      emit('save')
+    }
+    else {
+      $toast.error(`插件 ${props.plugin?.plugin_name} 更新失败：${result.message}`)
+    }
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
 // 访问作者主页
 function visitAuthorPage() {
   window.open(props.plugin?.author_url, '_blank')
@@ -254,8 +300,18 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '重置',
+    title: '更新',
     value: 3,
+    show: props.plugin?.has_update,
+    props: {
+      prependIcon: 'mdi-cancel',
+      color: 'success',
+      click: updatePlugin,
+    },
+  },
+  {
+    title: '重置',
+    value: 4,
     show: true,
     props: {
       prependIcon: 'mdi-cancel',
@@ -265,7 +321,7 @@ const dropdownItems = ref([
   },
   {
     title: '卸载',
-    value: 4,
+    value: 5,
     show: true,
     props: {
       prependIcon: 'mdi-trash-can-outline',
@@ -275,7 +331,7 @@ const dropdownItems = ref([
   },
   {
     title: '查看日志',
-    value: 5,
+    value: 6,
     show: true,
     props: {
       prependIcon: 'mdi-file-document-outline',
@@ -286,7 +342,7 @@ const dropdownItems = ref([
   },
   {
     title: '作者主页',
-    value: 5,
+    value: 7,
     show: true,
     props: {
       prependIcon: 'mdi-home-circle-outline',
@@ -294,6 +350,13 @@ const dropdownItems = ref([
     },
   },
 ])
+
+// 监听插件状态变化
+watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
+  const updateItemIndex = dropdownItems.value.findIndex(item => item.value === 3)
+  if (updateItemIndex !== -1)
+    dropdownItems.value[updateItemIndex].show = newHasUpdate
+})
 </script>
 
 <template>
@@ -313,6 +376,15 @@ const dropdownItems = ref([
       class="relative pa-4 text-center card-cover-blurred"
       :style="{ background: `${backgroundColor}` }"
     >
+      <div
+        v-if="props.plugin?.has_update"
+        class="me-n3 absolute top-0 left-1"
+      >
+        <VIcon
+          icon="mdi-new-box"
+          class="text-white"
+        />
+      </div>
       <div class="me-n3 absolute top-0 right-3">
         <IconBtn>
           <VIcon icon="mdi-dots-vertical" class="text-white" />
@@ -430,6 +502,25 @@ const dropdownItems = ref([
       </VCardActions>
     </VCard>
   </VDialog>
+  <!-- 更新插件进度框 -->
+  <VDialog
+    v-model="progressDialog"
+    :scrim="false"
+    width="25rem"
+  >
+    <VCard
+      color="primary"
+    >
+      <VCardText class="text-center">
+        {{ progressText }}
+        <VProgressLinear
+          indeterminate
+          color="white"
+          class="mb-0 mt-1"
+        />
+      </VCardText>
+    </VCard>
+  </VDialog>
 </template>
 
 <style lang="scss" scoped>

src/views/plugin/PluginCardListView.vue

@@ -55,17 +55,37 @@ async function fetchUninstalledPlugins() {
         state: 'market',
       },
     })
+    // 设置APP市场加载完成
     isAppMarketLoaded.value = true
+    // 设置更新状态
+    for (const uninstalled of uninstalledList.value) {
+      for (const data of dataList.value) {
+        if (uninstalled.id === data.id) {
+          data.has_update = true
+          data.repo_url = uninstalled.repo_url
+        }
+      }
+    }
   }
   catch (error) {
     console.error(error)
   }
 }
 
-// 加载时获取数据
-onBeforeMount(() => {
+// 加载所有数据
+function refreshData() {
   fetchInstalledPlugins()
   fetchUninstalledPlugins()
+}
+
+// 获取没有更新的插件
+const getUnupdatedPlugins = computed(() => {
+  return uninstalledList.value.filter(item => !item.has_update)
+})
+
+// 加载时获取数据
+onBeforeMount(() => {
+  refreshData()
 })
 </script>
 
@@ -89,8 +109,8 @@ onBeforeMount(() => {
       v-for="data in dataList"
       :key="data.id"
       :plugin="data"
-      @remove="fetchInstalledPlugins"
-      @save="fetchInstalledPlugins"
+      @remove="refreshData"
+      @save="refreshData"
     />
   </div>
   <NoDataFound
@@ -154,7 +174,7 @@ onBeforeMount(() => {
         </div>
         <div v-if="isAppMarketLoaded" class="grid gap-4 grid-plugin-card">
           <PluginAppCard
-            v-for="data in uninstalledList"
+            v-for="data in getUnupdatedPlugins"
             :key="data.id"
             :plugin="data"
             @install="pluginInstalled"