fix: plugin task

2024-11-25 17:32:57 +08:00 · 2024-11-25 17:32:57 +08:00 · 8ad9ab40df
commit 8ad9ab40df
parent 4f54ac6ed6
4 changed files with 119 additions and 52 deletions
--- a/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts
+++ b/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,
  }
 }
--- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
@ -28,37 +28,42 @@ const PluginTasks = () => {
  const [open, setOpen] = useState(false)
  const {
    errorPlugins,
-    runningPlugins,
-    successPlugins,
+    runningPluginsLength,
+    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 })
-  }, [isInstalling, isInstallingWithError, isFailed, errorPlugins, runningPlugins, totalPluginsLength, t])
+      return t('plugin.task.installError', { errorLength: errorPluginsLength })
+  }, [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,35 +127,50 @@ 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'>
-              {t('plugin.task.installedError', { errorLength: errorPlugins.length })}
+            <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: errorPluginsLength })}
+              <Button
+                className='shrink-0'
+                size='small'
+                variant='ghost'
+              >
+                {t('plugin.task.clearAll')}
+              </Button>
            </div>
-            {
-              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'
-                >
-                  <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' />
-                    <CardIcon
-                      size='tiny'
-                      src={getIconUrl(errorPlugin.icon)}
-                    />
-                  </div>
-                  <div className='grow system-md-regular text-text-secondary truncate'>
-                    {errorPlugin.labels[language]}
-                  </div>
-                  <Button
-                    size='small'
-                    variant='ghost-accent'
-                    onClick={() => handleClearErrorPlugin(errorPlugin.taskId, errorPlugin.plugin_unique_identifier)}
+            <div className='max-h-[400px] overflow-y-auto'>
+              {
+                errorPlugins.map(errorPlugin => (
+                  <div
+                    key={errorPlugin.plugin_unique_identifier}
+                    className='flex p-2 rounded-lg hover:bg-state-base-hover'
                  >
-                    {t('common.operation.clear')}
-                  </Button>
-                </div>
-              ))
-            }
+                    <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' />
+                      <CardIcon
+                        size='tiny'
+                        src={getIconUrl(errorPlugin.icon)}
+                      />
+                    </div>
+                    <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'
+                      onClick={() => handleClearErrorPlugin(errorPlugin.taskId, errorPlugin.plugin_unique_identifier)}
+                    >
+                      {t('common.operation.clear')}
+                    </Button>
+                  </div>
+                ))
+              }
+            </div>
          </div>
        </PortalToFollowElemContent>
      </PortalToFollowElem>
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@ -162,10 +162,12 @@ const translation = {
    },
  },
  task: {
-    installing: 'Installing {{installingLength}}/{{totalLength}} plugins...',
-    installingWithError: 'Installing {{installingLength}} of {{totalLength}} plugins, {{errorLength}} failed, click to view',
+    installing: 'Installing {{installingLength}} plugins, 0 done.',
+    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',
  },
 }

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