From 0867c1800b6fc0058735cec5d133fe038d005f46 Mon Sep 17 00:00:00 2001 From: GuanMu Date: Wed, 10 Dec 2025 13:34:05 +0800 Subject: [PATCH] refactor: simplify plugin task handling and improve UI feedback (#26293) --- .../plugins/plugin-page/plugin-tasks/hooks.ts | 31 --- .../plugin-page/plugin-tasks/index.tsx | 252 +++++++++++++----- web/i18n/en-US/plugin.ts | 7 +- web/i18n/zh-Hans/plugin.ts | 7 +- web/service/use-plugins.ts | 3 +- 5 files changed, 201 insertions(+), 99 deletions(-) diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts b/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts index fba7dad454..7b9e7953c6 100644 --- a/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts +++ b/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts @@ -1,13 +1,9 @@ import { useCallback, - useEffect, - useRef, - useState, } from 'react' import { TaskStatus } from '@/app/components/plugins/types' import type { PluginStatus } from '@/app/components/plugins/types' import { - useMutationClearAllTaskPlugin, useMutationClearTaskPlugin, usePluginTaskList, } from '@/service/use-plugins' @@ -18,7 +14,6 @@ export const usePluginTaskStatus = () => { handleRefetch, } = usePluginTaskList() const { mutateAsync } = useMutationClearTaskPlugin() - const { mutateAsync: mutateAsyncClearAll } = useMutationClearAllTaskPlugin() const allPlugins = pluginTasks.map(task => task.plugins.map((plugin) => { return { ...plugin, @@ -45,10 +40,6 @@ export const usePluginTaskStatus = () => { }) handleRefetch() }, [mutateAsync, handleRefetch]) - const handleClearAllErrorPlugin = useCallback(async () => { - await mutateAsyncClearAll() - handleRefetch() - }, [mutateAsyncClearAll, handleRefetch]) const totalPluginsLength = allPlugins.length const runningPluginsLength = runningPlugins.length const errorPluginsLength = errorPlugins.length @@ -60,26 +51,6 @@ export const usePluginTaskStatus = () => { 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(null) - - useEffect(() => { - if (isSuccess) { - if (timerRef.current) { - clearTimeout(timerRef.current) - timerRef.current = null - } - if (opacity > 0) { - timerRef.current = setTimeout(() => { - setOpacity(v => v - 0.1) - }, 200) - } - } - - if (!isSuccess) - setOpacity(1) - }, [isSuccess, opacity]) - return { errorPlugins, successPlugins, @@ -94,7 +65,5 @@ export const usePluginTaskStatus = () => { isSuccess, isFailed, handleClearErrorPlugin, - handleClearAllErrorPlugin, - opacity, } } diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx index c0bf5824e7..4c37705287 100644 --- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx +++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx @@ -1,4 +1,5 @@ import { + useCallback, useMemo, useState, } from 'react' @@ -6,6 +7,7 @@ import { RiCheckboxCircleFill, RiErrorWarningFill, RiInstallLine, + RiLoaderLine, } from '@remixicon/react' import { useTranslation } from 'react-i18next' import { usePluginTaskStatus } from './hooks' @@ -14,7 +16,6 @@ import { PortalToFollowElemContent, PortalToFollowElemTrigger, } from '@/app/components/base/portal-to-follow-elem' -import Tooltip from '@/app/components/base/tooltip' import Button from '@/app/components/base/button' import ProgressCircle from '@/app/components/base/progress-bar/progress-circle' import CardIcon from '@/app/components/plugins/card/base/card-icon' @@ -22,6 +23,7 @@ import cn from '@/utils/classnames' import { useGetLanguage } from '@/context/i18n' import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon' import DownloadingIcon from '@/app/components/header/plugins-nav/downloading-icon' +import Tooltip from '@/app/components/base/tooltip' const PluginTasks = () => { const { t } = useTranslation() @@ -29,6 +31,8 @@ const PluginTasks = () => { const [open, setOpen] = useState(false) const { errorPlugins, + successPlugins, + runningPlugins, runningPluginsLength, successPluginsLength, errorPluginsLength, @@ -39,33 +43,69 @@ const PluginTasks = () => { isSuccess, isFailed, handleClearErrorPlugin, - handleClearAllErrorPlugin, - opacity, } = usePluginTaskStatus() const { getIconUrl } = useGetIcon() + const handleClearAllWithModal = useCallback(async () => { + // Clear all completed plugins (success and error) but keep running ones + const completedPlugins = [...successPlugins, ...errorPlugins] + + // Clear all completed plugins individually + for (const plugin of completedPlugins) + await handleClearErrorPlugin(plugin.taskId, plugin.plugin_unique_identifier) + + // Only close modal if no plugins are still installing + if (runningPluginsLength === 0) + setOpen(false) + }, [successPlugins, errorPlugins, handleClearErrorPlugin, runningPluginsLength]) + + const handleClearErrorsWithModal = useCallback(async () => { + // Clear only error plugins, not all plugins + for (const plugin of errorPlugins) + await handleClearErrorPlugin(plugin.taskId, plugin.plugin_unique_identifier) + // Only close modal if no plugins are still installing + if (runningPluginsLength === 0) + setOpen(false) + }, [errorPlugins, handleClearErrorPlugin, runningPluginsLength]) + + const handleClearSingleWithModal = useCallback(async (taskId: string, pluginId: string) => { + await handleClearErrorPlugin(taskId, pluginId) + // Only close modal if no plugins are still installing + if (runningPluginsLength === 0) + setOpen(false) + }, [handleClearErrorPlugin, runningPluginsLength]) + const tip = useMemo(() => { - if (isInstalling) - 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: runningPluginsLength, successLength: successPluginsLength, errorLength: errorPluginsLength }) - + if (isInstallingWithSuccess) + return t('plugin.task.installingWithSuccess', { installingLength: runningPluginsLength, successLength: successPluginsLength }) + if (isInstalling) + return t('plugin.task.installing') if (isFailed) - return t('plugin.task.installError', { errorLength: errorPluginsLength }) - }, [isInstalling, isInstallingWithSuccess, isInstallingWithError, isFailed, errorPluginsLength, runningPluginsLength, successPluginsLength, t]) + return t('plugin.task.installedError', { errorLength: errorPluginsLength }) + if (isSuccess) + return t('plugin.task.installSuccess', { successLength: successPluginsLength }) + return t('plugin.task.installed') + }, [ + errorPluginsLength, + isFailed, + isInstalling, + isInstallingWithError, + isInstallingWithSuccess, + isSuccess, + runningPluginsLength, + successPluginsLength, + t, + ]) - if (!totalPluginsLength) + // Show icon if there are any plugin tasks (completed, running, or failed) + // Only hide when there are absolutely no plugin tasks + if (totalPluginsLength === 0) return null return ( -
+
{ > { - if (isFailed) + if (isFailed || isInstalling || isInstallingWithSuccess || isInstallingWithError || isSuccess) setOpen(v => !v) }} > - +
@@ -124,7 +169,7 @@ const PluginTasks = () => { ) } { - isSuccess && ( + (isSuccess || (successPluginsLength > 0 && runningPluginsLength === 0 && errorPluginsLength === 0)) && ( ) } @@ -138,52 +183,129 @@ const PluginTasks = () => { -
-
- {t('plugin.task.installedError', { errorLength: errorPluginsLength })} - -
-
- { - errorPlugins.map(errorPlugin => ( -
-
- - -
-
-
- {errorPlugin.labels[language]} -
-
- {errorPlugin.message} -
-
- -
- )) - } -
+
+ + +
+
+
+ {runningPlugin.labels[language]} +
+
+ {t('plugin.task.installing')} +
+
+
+ ))} +
+ + )} + + {/* Success Plugins */} + {successPlugins.length > 0 && ( + <> +
+ {t('plugin.task.installed')} ({successPlugins.length}) + +
+
+ {successPlugins.map(successPlugin => ( +
+
+ + +
+
+
+ {successPlugin.labels[language]} +
+
+ {successPlugin.message || t('plugin.task.installed')} +
+
+
+ ))} +
+ + )} + + {/* Error Plugins */} + {errorPlugins.length > 0 && ( + <> +
+ {t('plugin.task.installError', { errorLength: errorPlugins.length })} + +
+
+ {errorPlugins.map(errorPlugin => ( +
+
+ + +
+
+
+ {errorPlugin.labels[language]} +
+
+ {errorPlugin.message} +
+
+ +
+ ))} +
+ + )}
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts index 62a5f35c0b..edd60d65fb 100644 --- a/web/i18n/en-US/plugin.ts +++ b/web/i18n/en-US/plugin.ts @@ -270,12 +270,17 @@ const translation = { partnerTip: 'Verified by a Dify partner', }, task: { - installing: 'Installing {{installingLength}} plugins, 0 done.', + installing: 'Installing plugins', 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', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', clearAll: 'Clear all', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, requestAPlugin: 'Request a plugin', publishPlugins: 'Publish plugins', diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts index d648bccb85..20b238f178 100644 --- a/web/i18n/zh-Hans/plugin.ts +++ b/web/i18n/zh-Hans/plugin.ts @@ -270,12 +270,17 @@ const translation = { partnerTip: '此插件由 Dify 合作伙伴认证', }, task: { - installing: '{{installingLength}} 个插件安装中，0 已完成', + installing: '正在安装插件', installingWithSuccess: '{{installingLength}} 个插件安装中，{{successLength}} 安装成功', installingWithError: '{{installingLength}} 个插件安装中，{{successLength}} 安装成功，{{errorLength}} 安装失败', installError: '{{errorLength}} 个插件安装失败，点击查看', installedError: '{{errorLength}} 个插件安装失败', + installSuccess: '{{successLength}} 个插件安装成功', + installed: '已安装', clearAll: '清除所有', + runningPlugins: '正在安装的插件', + successPlugins: '安装成功的插件', + errorPlugins: '安装失败的插件', }, requestAPlugin: '申请插件', publishPlugins: '发布插件', diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts index b5b8779a82..639d889fa0 100644 --- a/web/service/use-plugins.ts +++ b/web/service/use-plugins.ts @@ -634,7 +634,8 @@ export const usePluginTaskList = (category?: PluginCategoryEnum | string) => { export const useMutationClearTaskPlugin = () => { return useMutation({ mutationFn: ({ taskId, pluginId }: { taskId: string; pluginId: string }) => { - return post<{ success: boolean }>(`/workspaces/current/plugin/tasks/${taskId}/delete/${pluginId}`) + const encodedPluginId = encodeURIComponent(pluginId) + return post<{ success: boolean }>(`/workspaces/current/plugin/tasks/${taskId}/delete/${encodedPluginId}`) }, }) }