fix(marketplace): filter empty tool card tags (#7285)

packages/web/components/core/plugin/tool/ToolCard.tsx

@@ -7,6 +7,7 @@ import MyIcon from '../../../common/Icon';
 import { parseI18nString } from '@fastgpt/global/common/i18n/utils';
 import { parseI18nString } from '@fastgpt/global/common/i18n/utils';
 import { PluginStatusEnum, type PluginStatusType } from '@fastgpt/global/core/plugin/type';
 import { PluginStatusEnum, type PluginStatusType } from '@fastgpt/global/core/plugin/type';
 import DebugToolTag from './DebugToolTag';
 import DebugToolTag from './DebugToolTag';
+import { normalizeToolCardTags } from './utils';
 
 
 const marketplaceOfficialSource = 'official';
 const marketplaceOfficialSource = 'official';
 
 
@@ -62,7 +63,8 @@ const ToolCard = ({
 }) => {
 }) => {
   const { t, i18n } = useTranslation();
   const { t, i18n } = useTranslation();
   const tagsContainerRef = useRef<HTMLDivElement>(null);
   const tagsContainerRef = useRef<HTMLDivElement>(null);
-  const [visibleTagsCount, setVisibleTagsCount] = useState(item.tags?.length || 0);
+  const displayTags = useMemo(() => normalizeToolCardTags(item.tags), [item.tags]);
+  const [visibleTagsCount, setVisibleTagsCount] = useState(displayTags.length);
   const isMarketplaceVariant = variant === 'marketplace';
   const isMarketplaceVariant = variant === 'marketplace';
   const showOfficialBadge =
   const showOfficialBadge =
     isMarketplaceVariant && (!item.source || item.source === marketplaceOfficialSource);
     isMarketplaceVariant && (!item.source || item.source === marketplaceOfficialSource);
@@ -70,9 +72,16 @@ const ToolCard = ({
     isMarketplaceVariant && mode === 'admin' && item.installed && !showActionButton;
     isMarketplaceVariant && mode === 'admin' && item.installed && !showActionButton;
 
 
   useEffect(() => {
   useEffect(() => {
+    if (displayTags.length === 0) {
+      setVisibleTagsCount(0);
+      return;
+    }
+
+    setVisibleTagsCount(displayTags.length);
+
     const calculate = () => {
     const calculate = () => {
       const container = tagsContainerRef.current;
       const container = tagsContainerRef.current;
-      if (!container || !item.tags?.length) return;
+      if (!container) return;
 
 
       const containerWidth = container.offsetWidth;
       const containerWidth = container.offsetWidth;
       const tagElements = container.querySelectorAll('[data-tag-item]');
       const tagElements = container.querySelectorAll('[data-tag-item]');
@@ -99,7 +108,7 @@ const ToolCard = ({
       clearTimeout(timer);
       clearTimeout(timer);
       observer.disconnect();
       observer.disconnect();
     };
     };
-  }, [item.tags]);
+  }, [displayTags]);
 
 
   const statusLabel = useMemo(() => {
   const statusLabel = useMemo(() => {
     if (mode === 'marketplace') return null;
     if (mode === 'marketplace') return null;
@@ -305,7 +314,7 @@ const ToolCard = ({
         overflow={'hidden'}
         overflow={'hidden'}
         ref={tagsContainerRef}
         ref={tagsContainerRef}
       >
       >
-        {item.tags?.slice(0, visibleTagsCount).map((tag) => {
+        {displayTags.slice(0, visibleTagsCount).map((tag) => {
           return (
           return (
             <Box
             <Box
               key={tag}
               key={tag}
@@ -325,7 +334,7 @@ const ToolCard = ({
             </Box>
             </Box>
           );
           );
         })}
         })}
-        {item.tags && item.tags.length > visibleTagsCount && (
+        {displayTags.length > visibleTagsCount && (
           <Box
           <Box
             px={isMarketplaceVariant ? '9px' : 2}
             px={isMarketplaceVariant ? '9px' : 2}
             py={isMarketplaceVariant ? '5px' : 1}
             py={isMarketplaceVariant ? '5px' : 1}
@@ -338,7 +347,7 @@ const ToolCard = ({
             color={isMarketplaceVariant ? '#383F50' : 'myGray.700'}
             color={isMarketplaceVariant ? '#383F50' : 'myGray.700'}
             flexShrink={0}
             flexShrink={0}
           >
           >
-            +{item.tags.length - visibleTagsCount}
+            +{displayTags.length - visibleTagsCount}
           </Box>
           </Box>
         )}
         )}
       </Flex>
       </Flex>

packages/web/components/core/plugin/tool/utils.ts

+/**
+ * 归一化工具卡片展示标签，过滤掉异步字典未命中或脏数据产生的空标签。
+ */
+export const normalizeToolCardTags = (tags?: string[] | null) =>
+  tags?.map((tag) => tag.trim()).filter(Boolean) ?? [];

projects/app/test/components/core/plugin/tool/utils.test.ts

+import { describe, expect, it } from 'vitest';
+import { normalizeToolCardTags } from '@fastgpt/web/components/core/plugin/tool/utils';
+
+describe('normalizeToolCardTags', () => {
+  it('filters empty tag labels generated by missing marketplace tag mappings', () => {
+    expect(normalizeToolCardTags(['', '工具', '  ', '生产力'])).toEqual(['工具', '生产力']);
+  });
+
+  it('returns an empty list for nullish tags', () => {
+    expect(normalizeToolCardTags(null)).toEqual([]);
+    expect(normalizeToolCardTags(undefined)).toEqual([]);
+  });
+});