fix: plugin task

web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts

@@ -1,4 +1,9 @@
-import { useCallback } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { TaskStatus } from '@/app/components/plugins/types'
 import type { PluginStatus } from '@/app/components/plugins/types'
 import {
@@ -36,12 +41,49 @@ export const usePluginTaskStatus = () => {
       pluginId,
     })
   }, [mutate])
+  const totalPluginsLength = allPlugins.length
+  const runningPluginsLength = runningPlugins.length
+  const errorPluginsLength = errorPlugins.length
+  const successPluginsLength = successPlugins.length
+
+  const isInstalling = runningPluginsLength > 0 && errorPluginsLength === 0 && successPluginsLength === 0
+  const isInstallingWithSuccess = runningPluginsLength > 0 && successPluginsLength > 0 && errorPluginsLength === 0
+  const isInstallingWithError = runningPluginsLength > 0 && errorPluginsLength > 0
+  const isSuccess = successPluginsLength === totalPluginsLength && totalPluginsLength > 0
+  const isFailed = runningPluginsLength === 0 && (errorPluginsLength + successPluginsLength) === totalPluginsLength && totalPluginsLength > 0 && errorPluginsLength > 0
+
+  const [opacity, setOpacity] = useState(1)
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    if (isSuccess && opacity > 0) {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current)
+        timerRef.current = null
+      }
+      timerRef.current = setTimeout(() => {
+        setOpacity(v => v - 0.1)
+      }, 200)
+    }
+
+    if (!isSuccess)
+      setOpacity(1)
+  }, [isSuccess, opacity])
 
   return {
     errorPlugins,
     successPlugins,
     runningPlugins,
-    totalPluginsLength: allPlugins.length,
+    runningPluginsLength,
+    errorPluginsLength,
+    successPluginsLength,
+    totalPluginsLength,
+    isInstalling,
+    isInstallingWithSuccess,
+    isInstallingWithError,
+    isSuccess,
+    isFailed,
     handleClearErrorPlugin,
+    opacity,
   }
 }

web/app/components/plugins/plugin-page/plugin-tasks/index.tsx

@@ -28,37 +28,42 @@ const PluginTasks = () => {
   const [open, setOpen] = useState(false)
   const {
     errorPlugins,
-    runningPlugins,
+    runningPluginsLength,
-    successPlugins,
+    successPluginsLength,
+    errorPluginsLength,
     totalPluginsLength,
+    isInstalling,
+    isInstallingWithSuccess,
+    isInstallingWithError,
+    isSuccess,
+    isFailed,
     handleClearErrorPlugin,
+    opacity,
   } = usePluginTaskStatus()
   const { getIconUrl } = useGetIcon()
-  const runningPluginsLength = runningPlugins.length
-  const errorPluginsLength = errorPlugins.length
-  const successPluginsLength = successPlugins.length
-
-  const isInstalling = runningPluginsLength > 0 && errorPluginsLength === 0
-  const isInstallingWithError = runningPluginsLength > 0 && errorPluginsLength > 0
-  const isSuccess = successPluginsLength === totalPluginsLength && totalPluginsLength > 0
-  const isFailed = runningPluginsLength === 0 && (errorPluginsLength + successPluginsLength) === totalPluginsLength && totalPluginsLength > 0
 
   const tip = useMemo(() => {
     if (isInstalling)
-      return t('plugin.task.installing', { installingLength: runningPlugins.length, totalLength: totalPluginsLength })
+      return t('plugin.task.installing', { installingLength: runningPluginsLength })
+
+    if (isInstallingWithSuccess)
+      return t('plugin.task.installingWithSuccess', { installingLength: runningPluginsLength, successLength: successPluginsLength })
 
     if (isInstallingWithError)
-      return t('plugin.task.installingWithError', { installingLength: runningPlugins.length, totalLength: totalPluginsLength, errorLength: errorPlugins.length })
+      return t('plugin.task.installingWithError', { installingLength: runningPluginsLength, successLength: successPluginsLength, errorLength: errorPluginsLength })
 
     if (isFailed)
-      return t('plugin.task.installError', { errorLength: errorPlugins.length })
+      return t('plugin.task.installError', { errorLength: errorPluginsLength })
-  }, [isInstalling, isInstallingWithError, isFailed, errorPlugins, runningPlugins, totalPluginsLength, t])
+  }, [isInstalling, isInstallingWithSuccess, isInstallingWithError, isFailed, errorPluginsLength, runningPluginsLength, successPluginsLength, t])
 
   if (!totalPluginsLength)
     return null
 
   return (
-    <div className='flex items-center'>
+    <div
+      className='flex items-center'
+      style={{ opacity }}
+    >
       <PortalToFollowElem
         open={open}
         onOpenChange={setOpen}
@@ -70,7 +75,7 @@ const PluginTasks = () => {
       >
         <PortalToFollowElemTrigger
           onClick={() => {
-            if (isFailed || isInstallingWithError)
+            if (isFailed)
               setOpen(v => !v)
           }}
         >
@@ -89,16 +94,17 @@ const PluginTasks = () => {
               />
               <div className='absolute -right-1 -top-1'>
                 {
-                  isInstalling && (
+                  (isInstalling || isInstallingWithSuccess) && (
                     <ProgressCircle
-                      percentage={runningPlugins.length / totalPluginsLength * 100}
+                      percentage={successPluginsLength / totalPluginsLength * 100}
+                      circleFillColor='fill-components-progress-brand-bg'
                     />
                   )
                 }
                 {
                   isInstallingWithError && (
                     <ProgressCircle
-                      percentage={runningPlugins.length / totalPluginsLength * 100}
+                      percentage={runningPluginsLength / totalPluginsLength * 100}
                       circleFillColor='fill-components-progress-brand-bg'
                       sectorFillColor='fill-components-progress-error-border'
                       circleStrokeColor='stroke-components-progress-error-border'
@@ -121,14 +127,22 @@ const PluginTasks = () => {
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[11]'>
           <div className='p-1 pb-2 w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
-            <div className='flex items-center px-2 pt-1 h-7 system-sm-semibold-uppercase'>
+            <div className='sticky top-0 flex items-center justify-between px-2 pt-1 h-7 system-sm-semibold-uppercase'>
-              {t('plugin.task.installedError', { errorLength: errorPlugins.length })}
+              {t('plugin.task.installedError', { errorLength: errorPluginsLength })}
+              <Button
+                className='shrink-0'
+                size='small'
+                variant='ghost'
+              >
+                {t('plugin.task.clearAll')}
+              </Button>
             </div>
+            <div className='max-h-[400px] overflow-y-auto'>
               {
                 errorPlugins.map(errorPlugin => (
                   <div
                     key={errorPlugin.plugin_unique_identifier}
-                  className='flex items-center p-1 pl-2 h-8 rounded-lg hover:bg-state-base-hover'
+                    className='flex p-2 rounded-lg hover:bg-state-base-hover'
                   >
                     <div className='relative flex items-center justify-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'>
                       <RiErrorWarningFill className='absolute -right-0.5 -bottom-0.5 z-10 w-3 h-3 text-text-destructive' />
@@ -137,12 +151,18 @@ const PluginTasks = () => {
                         src={getIconUrl(errorPlugin.icon)}
                       />
                     </div>
-                  <div className='grow system-md-regular text-text-secondary truncate'>
+                    <div className='grow'>
+                      <div className='system-md-regular text-text-secondary truncate'>
                         {errorPlugin.labels[language]}
                       </div>
+                      <div className='system-xs-regular text-text-destructive break-all'>
+                        {errorPlugin.message}
+                      </div>
+                    </div>
                     <Button
+                      className='shrink-0'
                       size='small'
-                    variant='ghost-accent'
+                      variant='ghost'
                       onClick={() => handleClearErrorPlugin(errorPlugin.taskId, errorPlugin.plugin_unique_identifier)}
                     >
                       {t('common.operation.clear')}
@@ -151,6 +171,7 @@ const PluginTasks = () => {
                 ))
               }
             </div>
+          </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>
     </div>

web/i18n/en-US/plugin.ts

@@ -162,10 +162,12 @@ const translation = {
     },
   },
   task: {
-    installing: 'Installing {{installingLength}}/{{totalLength}} plugins...',
+    installing: 'Installing {{installingLength}} plugins, 0 done.',
-    installingWithError: 'Installing {{installingLength}} of {{totalLength}} plugins, {{errorLength}} failed, click to view',
+    installingWithSuccess: 'Installing {{installingLength}} plugins, {{successLength}} success.',
+    installingWithError: 'Installing {{installingLength}} plugins, {{successLength}} success, {{errorLength}} failed',
     installError: '{{errorLength}} plugins failed to install, click to view',
     installedError: '{{errorLength}} plugins failed to install',
+    clearAll: 'Clear all',
   },
 }
 

web/i18n/zh-Hans/plugin.ts

@@ -162,10 +162,12 @@ const translation = {
     },
   },
   task: {
-    installing: '{{installingLength}}/{{totalLength}} 插件安装中...',
+    installing: '{{installingLength}} 个插件安装中，0 已完成',
-    installingWithError: '{{installingLength}}/{{totalLength}} 插件安装中，{{errorLength}} 安装失败。点击查看',
+    installingWithSuccess: '{{installingLength}} 个插件安装中，{{successLength}} 安装成功',
+    installingWithError: '{{installingLength}} 个插件安装中，{{successLength}} 安装成功，{{errorLength}} 安装失败',
     installError: '{{errorLength}} 个插件安装失败，点击查看',
     installedError: '{{errorLength}} 个插件安装失败',
+    clearAll: '清除所有',
   },
 }