From a061215e421a2ecf9cc1ffc970cf28a94357e3bf Mon Sep 17 00:00:00 2001
From: WTW0313 <twwu@dify.ai>
Date: Thu, 4 Sep 2025 17:32:15 +0800
Subject: [PATCH] refactor: Simplify tag label retrieval in hooks and update
 related components

---
 web/app/components/plugins/hooks.ts                        | 7 +++++++
 .../components/plugins/marketplace/list/card-wrapper.tsx   | 6 +++---
 .../plugins/plugin-page/filter-management/tag-filter.tsx   | 4 ++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/app/components/plugins/hooks.ts b/web/app/components/plugins/hooks.ts
index 2717740272..0af7c1a170 100644
--- a/web/app/components/plugins/hooks.ts
+++ b/web/app/components/plugins/hooks.ts
@@ -26,9 +26,16 @@ export const useTags = (translateFromOut?: TFunction) => {
     return acc
   }, {} as Record<string, Tag>)
 
+  const getTagLabel = (name: string) => {
+    if (!tagsMap[name])
+      return name
+    return tagsMap[name].label
+  }
+
   return {
     tags,
     tagsMap,
+    getTagLabel,
   }
 }
 
diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
index 8d9f3a5b10..d2a38b3ce3 100644
--- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
@@ -29,7 +29,7 @@ const CardWrapper = ({
     setFalse: hideInstallFromMarketplace,
   }] = useBoolean(false)
   const { locale: localeFromLocale } = useI18N()
-  const { tagsMap } = useTags(t)
+  const { getTagLabel } = useTags(t)
 
   if (showInstallButton) {
     return (
@@ -43,7 +43,7 @@ const CardWrapper = ({
           footer={
             <CardMoreInfo
               downloadCount={plugin.install_count}
-              tags={plugin.tags.map(tag => tagsMap[tag.name].label)}
+              tags={plugin.tags.map(tag => getTagLabel(tag.name))}
             />
           }
         />
@@ -92,7 +92,7 @@ const CardWrapper = ({
         footer={
           <CardMoreInfo
             downloadCount={plugin.install_count}
-            tags={plugin.tags.map(tag => tagsMap[tag.name].label)}
+            tags={plugin.tags.map(tag => getTagLabel(tag.name))}
           />
         }
       />
diff --git a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
index 43c75b5f93..843d041763 100644
--- a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
@@ -27,7 +27,7 @@ const TagsFilter = ({
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   const [searchText, setSearchText] = useState('')
-  const { tags: options, tagsMap } = useTags()
+  const { tags: options, getTagLabel } = useTags()
   const filteredOptions = options.filter(option => option.name.toLowerCase().includes(searchText.toLowerCase()))
   const handleCheck = (id: string) => {
     if (value.includes(id))
@@ -59,7 +59,7 @@ const TagsFilter = ({
               !selectedTagsLength && t('pluginTags.allTags')
             }
             {
-              !!selectedTagsLength && value.map(val => tagsMap[val].label).slice(0, 2).join(',')
+              !!selectedTagsLength && value.map(val => getTagLabel(val)).slice(0, 2).join(',')
             }
             {
               selectedTagsLength > 2 && (