diff --git a/web/app/components/base/icons/assets/vender/solid/arrows/arrow-up-double-line.svg b/web/app/components/base/icons/assets/vender/solid/arrows/arrow-up-double-line.svg new file mode 100644 index 0000000000..1f0b9858e1 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/solid/arrows/arrow-up-double-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/app/components/base/icons/src/vender/solid/arrows/ArrowUpDoubleLine.json b/web/app/components/base/icons/src/vender/solid/arrows/ArrowUpDoubleLine.json new file mode 100644 index 0000000000..b76fc3e80c --- /dev/null +++ b/web/app/components/base/icons/src/vender/solid/arrows/ArrowUpDoubleLine.json @@ -0,0 +1,26 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "16", + "height": "16", + "viewBox": "0 0 16 16", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "d": "M8 3.22388L3.86194 7.36193L4.80475 8.30473L8 5.10949L11.1953 8.30473L12.1381 7.36193L8 3.22388ZM8 6.99046L3.86194 11.1285L4.80475 12.0713L8 8.87606L11.1953 12.0713L12.1381 11.1285L8 6.99046Z", + "fill": "currentColor" + }, + "children": [] + } + ] + }, + "name": "ArrowUpDoubleLine" +} diff --git a/web/app/components/base/icons/src/vender/solid/arrows/ArrowUpDoubleLine.tsx b/web/app/components/base/icons/src/vender/solid/arrows/ArrowUpDoubleLine.tsx new file mode 100644 index 0000000000..06ba38ec70 --- /dev/null +++ b/web/app/components/base/icons/src/vender/solid/arrows/ArrowUpDoubleLine.tsx @@ -0,0 +1,20 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './ArrowUpDoubleLine.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconData } from '@/app/components/base/icons/IconBase' + +const Icon = ( + { + ref, + ...props + }: React.SVGProps & { + ref?: React.RefObject>; + }, +) => + +Icon.displayName = 'ArrowUpDoubleLine' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/solid/arrows/index.ts b/web/app/components/base/icons/src/vender/solid/arrows/index.ts index 44522622dc..58ce9aa8ac 100644 --- a/web/app/components/base/icons/src/vender/solid/arrows/index.ts +++ b/web/app/components/base/icons/src/vender/solid/arrows/index.ts @@ -1,4 +1,5 @@ export { default as ArrowDownDoubleLine } from './ArrowDownDoubleLine' export { default as ArrowDownRoundFill } from './ArrowDownRoundFill' +export { default as ArrowUpDoubleLine } from './ArrowUpDoubleLine' export { default as ChevronDown } from './ChevronDown' export { default as HighPriority } from './HighPriority' diff --git a/web/app/components/workflow/block-selector/featured-tools.tsx b/web/app/components/workflow/block-selector/featured-tools.tsx index a4d4655988..fe5c561362 100644 --- a/web/app/components/workflow/block-selector/featured-tools.tsx +++ b/web/app/components/workflow/block-selector/featured-tools.tsx @@ -16,7 +16,7 @@ import { ViewType } from './view-type-select' import Tools from './tools' import { formatNumber } from '@/utils/format' import Action from '@/app/components/workflow/block-selector/market-place-plugin/action' -import { ArrowDownDoubleLine, ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/arrows' +import { ArrowDownDoubleLine, ArrowDownRoundFill, ArrowUpDoubleLine } from '@/app/components/base/icons/src/vender/solid/arrows' import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace' const MAX_RECOMMENDED_COUNT = 15 @@ -119,7 +119,9 @@ const FeaturedTools = ({ const totalVisible = visibleInstalledProviders.length + visibleUninstalledPlugins.length const maxAvailable = Math.min(MAX_RECOMMENDED_COUNT, installedProviders.length + uninstalledPlugins.length) - const showMore = totalVisible < maxAvailable + const hasMoreToShow = totalVisible < maxAvailable + const canToggleVisibility = maxAvailable > INITIAL_VISIBLE_COUNT + const isExpanded = canToggleVisibility && !hasMoreToShow const showEmptyState = !isLoading && totalVisible === 0 return ( @@ -183,19 +185,28 @@ const FeaturedTools = ({ )} - {!isLoading && totalVisible > 0 && showMore && ( + {!isLoading && totalVisible > 0 && canToggleVisibility && (
{ - setVisibleCount(count => Math.min(count + INITIAL_VISIBLE_COUNT, maxAvailable)) + setVisibleCount((count) => { + if (count >= maxAvailable) + return INITIAL_VISIBLE_COUNT + + return Math.min(count + INITIAL_VISIBLE_COUNT, maxAvailable) + }) }} >
- + {isExpanded ? ( + + ) : ( + + )}
- {t('workflow.tabs.showMoreFeatured')} + {t(isExpanded ? 'workflow.tabs.showLessFeatured' : 'workflow.tabs.showMoreFeatured')}
)} diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index 150b9a8902..61d1d010f0 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -279,6 +279,7 @@ const translation = { 'searchDataSource': 'Search Data Source', 'featuredTools': 'Featured', 'showMoreFeatured': 'Show more', + 'showLessFeatured': 'Show less', 'installed': 'Installed', 'pluginByAuthor': 'By {{author}}', 'usePlugin': 'Select tool', diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts index 51ae3b8050..759b628144 100644 --- a/web/i18n/zh-Hans/workflow.ts +++ b/web/i18n/zh-Hans/workflow.ts @@ -265,6 +265,7 @@ const translation = { 'start': '开始', 'featuredTools': '精选推荐', 'showMoreFeatured': '查看更多', + 'showLessFeatured': '收起', 'installed': '已安装', 'pluginByAuthor': '来自 {{author}}', 'usePlugin': '选择工具',