From 6baeb032a7f76c65337b51c7b58593de4687a61c Mon Sep 17 00:00:00 2001
From: Hyu <chenhyudada@gmail.com>
Date: Fri, 17 Jul 2026 16:39:38 +0800
Subject: [PATCH] fix(web): show page component icon on plugin cards (#2345)

Co-authored-by: dadachann <dadachann@users.noreply.github.com>
---
 .../plugin-market/PluginComponentIcons.ts     | 18 +++++++++++
 .../plugin-market/PluginComponentList.tsx     | 15 +++------
 .../unit/plugin-component-icons.test.mjs      | 31 +++++++++++++++++++
 3 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 web/src/app/home/plugins/components/plugin-market/PluginComponentIcons.ts
 create mode 100644 web/tests/unit/plugin-component-icons.test.mjs

diff --git a/web/src/app/home/plugins/components/plugin-market/PluginComponentIcons.ts b/web/src/app/home/plugins/components/plugin-market/PluginComponentIcons.ts
new file mode 100644
index 000000000..d22fa2fa1
--- /dev/null
+++ b/web/src/app/home/plugins/components/plugin-market/PluginComponentIcons.ts
@@ -0,0 +1,18 @@
+import {
+  AppWindow,
+  AudioWaveform,
+  Book,
+  FileText,
+  Hash,
+  Wrench,
+  type LucideIcon,
+} from 'lucide-react';
+
+export const pluginComponentIconMap: Record<string, LucideIcon> = {
+  Tool: Wrench,
+  EventListener: AudioWaveform,
+  Command: Hash,
+  KnowledgeEngine: Book,
+  Parser: FileText,
+  Page: AppWindow,
+};
diff --git a/web/src/app/home/plugins/components/plugin-market/PluginComponentList.tsx b/web/src/app/home/plugins/components/plugin-market/PluginComponentList.tsx
index 6aba9de03..642ed5701 100644
--- a/web/src/app/home/plugins/components/plugin-market/PluginComponentList.tsx
+++ b/web/src/app/home/plugins/components/plugin-market/PluginComponentList.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { TFunction } from 'i18next';
-import { Wrench, AudioWaveform, Hash, Book, FileText } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
+import { pluginComponentIconMap } from './PluginComponentIcons';
 
 export default function PluginComponentList({
   components,
@@ -18,14 +18,6 @@ export default function PluginComponentList({
   t: TFunction;
   responsive?: boolean;
 }) {
-  const kindIconMap: Record<string, React.ReactNode> = {
-    Tool: <Wrench className="w-5 h-5" />,
-    EventListener: <AudioWaveform className="w-5 h-5" />,
-    Command: <Hash className="w-5 h-5" />,
-    KnowledgeEngine: <Book className="w-5 h-5" />,
-    Parser: <FileText className="w-5 h-5" />,
-  };
-
   const componentKindList = Object.keys(components || {});
 
   return (
@@ -34,11 +26,12 @@ export default function PluginComponentList({
       {componentKindList.length > 0 && (
         <>
           {componentKindList.map((kind) => {
+            const ComponentIcon = pluginComponentIconMap[kind];
             return (
               <Fragment key={kind}>
                 {useBadge && (
                   <Badge variant="outline" className="flex items-center gap-1">
-                    {kindIconMap[kind]}
+                    {ComponentIcon && <ComponentIcon className="w-5 h-5" />}
                     {responsive ? (
                       <span className="hidden md:inline">
                         {t('market.componentName.' + kind)}
@@ -52,7 +45,7 @@ export default function PluginComponentList({
 
                 {!useBadge && (
                   <div className="flex flex-row items-center justify-start gap-[0.2rem]">
-                    {kindIconMap[kind]}
+                    {ComponentIcon && <ComponentIcon className="w-5 h-5" />}
                     {responsive ? (
                       <span className="hidden md:inline">
                         {t('market.componentName.' + kind)}
diff --git a/web/tests/unit/plugin-component-icons.test.mjs b/web/tests/unit/plugin-component-icons.test.mjs
new file mode 100644
index 000000000..b7d30e862
--- /dev/null
+++ b/web/tests/unit/plugin-component-icons.test.mjs
@@ -0,0 +1,31 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import test from 'node:test';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript';
+
+const currentDirectory = path.dirname(fileURLToPath(import.meta.url));
+const sourcePath = path.resolve(
+  currentDirectory,
+  '../../src/app/home/plugins/components/plugin-market/PluginComponentIcons.ts',
+);
+const source = fs.readFileSync(sourcePath, 'utf8');
+const compiled = ts.transpileModule(source, {
+  compilerOptions: { module: ts.ModuleKind.CommonJS },
+}).outputText;
+const sourceRequire = createRequire(sourcePath);
+const loadedModule = { exports: {} };
+new Function('require', 'module', 'exports', compiled)(
+  sourceRequire,
+  loadedModule,
+  loadedModule.exports,
+);
+
+const { AppWindow } = sourceRequire('lucide-react');
+const { pluginComponentIconMap } = loadedModule.exports;
+
+test('maps the Page plugin component to the AppWindow icon', () => {
+  assert.equal(pluginComponentIconMap.Page, AppWindow);
+});