feat(market): 添加组件市场搜索功能

src/pages/ideContainer/market.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { Card, Grid, Input, Tag, Typography, Divider, Collapse, Button, Message } from '@arco-design/web-react';
 import { IconSearch, IconSync } from '@arco-design/web-react/icon';
 import styles from './style/market.module.less';
@@ -20,6 +20,7 @@ interface MarketProps {
 
 const Market: React.FC<MarketProps> = ({ updateProjectComp }) => {
   const [compList, setCompList] = useState<any>([]);
+  const [searchValue, setSearchValue] = useState(''); // 添加搜索状态
   const [firstLevelCategory, setFirstLevelCategory] = useState('全部'); // 第一层分类：全部，基础，复合
   const [secondLevelCategory, setSecondLevelCategory] = useState('全部'); // 第二层分类：全部，我的，公开，协同
   const { projectComponentData, info } = useSelector((state: any) => state.ideContainer);
@@ -77,6 +78,41 @@ const Market: React.FC<MarketProps> = ({ updateProjectComp }) => {
     };
   }, [compList]);
 
+  // 根据搜索值过滤组件列表
+  const filteredCompList = useMemo(() => {
+    if (!searchValue) return compList;
+
+    const filtered = { ...compList };
+
+    // 过滤基础组件 (myLibs, pubLibs, teamLibs)
+    ['myLibs', 'pubLibs', 'teamLibs'].forEach(key => {
+      if (filtered[key]) {
+        filtered[key] = filtered[key].map(category => {
+          if (category && category.children) {
+            const filteredChildren = category.children.filter(child => {
+              const label = child.label || child.name || '';
+              return label.toLowerCase().includes(searchValue.toLowerCase());
+            });
+            return { ...category, children: filteredChildren };
+          }
+          return category;
+        }).filter(category => category.children && category.children.length > 0);
+      }
+    });
+
+    // 过滤复合组件 (myFlow, pubFlow)
+    ['myFlow', 'pubFlow'].forEach(key => {
+      if (filtered[key]) {
+        filtered[key] = filtered[key].filter(item => {
+          const name = item.flowName || item.name || '';
+          return name.toLowerCase().includes(searchValue.toLowerCase());
+        });
+      }
+    });
+
+    return filtered;
+  }, [compList, searchValue]);
+
   // 渲染Tag选择器
   const renderCategoryTage = useCallback(() => {
     /*
@@ -199,6 +235,9 @@ const Market: React.FC<MarketProps> = ({ updateProjectComp }) => {
 
   // 渲染组件分类
   const renderComponentCategory = useCallback(() => {
+    // 使用过滤后的组件列表
+    const currentCompList = searchValue ? filteredCompList : compList;
+
     // 根据第一层和第二层分类筛选组件
     let filteredComponents = [];
 
@@ -217,23 +256,23 @@ const Market: React.FC<MarketProps> = ({ updateProjectComp }) => {
     };
 
     // 收集符合条件的基础组件
-    if (conditions.includeMyLibs && compList.myLibs) {
+    if (conditions.includeMyLibs && currentCompList.myLibs) {
-      filteredComponents = [...filteredComponents, ...compList.myLibs];
+      filteredComponents = [...filteredComponents, ...currentCompList.myLibs];
     }
-    if (conditions.includePubLibs && compList.pubLibs) {
+    if (conditions.includePubLibs && currentCompList.pubLibs) {
-      filteredComponents = [...filteredComponents, ...compList.pubLibs];
+      filteredComponents = [...filteredComponents, ...currentCompList.pubLibs];
     }
-    if (conditions.includeTeamLibs && compList.teamLibs) {
+    if (conditions.includeTeamLibs && currentCompList.teamLibs) {
-      filteredComponents = [...filteredComponents, ...compList.teamLibs];
+      filteredComponents = [...filteredComponents, ...currentCompList.teamLibs];
     }
 
     // 收集符合条件的复合组件
     const flowComponents = [];
-    if (conditions.includeMyFlow && compList.myFlow) {
+    if (conditions.includeMyFlow && currentCompList.myFlow) {
-      flowComponents.push(...compList.myFlow.map(item => ({ ...item, isFlow: true })));
+      flowComponents.push(...currentCompList.myFlow.map(item => ({ ...item, isFlow: true })));
     }
-    if (conditions.includePubFlow && compList.pubFlow) {
+    if (conditions.includePubFlow && currentCompList.pubFlow) {
-      flowComponents.push(...compList.pubFlow.map(item => ({ ...item, isFlow: true })));
+      flowComponents.push(...currentCompList.pubFlow.map(item => ({ ...item, isFlow: true })));
     }
 
     // 合并相同标签的组件
@@ -272,7 +311,7 @@ const Market: React.FC<MarketProps> = ({ updateProjectComp }) => {
     if (resultComponents.length === 0) {
       return (
         <div style={{ textAlign: 'center', padding: '40px 0', color: '#999' }}>
-          暂无组件数据
+          {searchValue ? '未找到匹配的组件' : '暂无组件数据'}
         </div>
       );
     }
@@ -346,7 +385,7 @@ const Market: React.FC<MarketProps> = ({ updateProjectComp }) => {
         }).filter(item => item !== null)}
       </Collapse>
     );
-  }, [compList, firstLevelCategory, secondLevelCategory]);
+  }, [compList, filteredCompList, firstLevelCategory, secondLevelCategory, searchValue]);
 
   // 给账号下的组件列表(本地存储中的组件列表)增加一个是否添加至工程的初始状态
   const addInitState = (componentData) => {
@@ -377,6 +416,11 @@ const Market: React.FC<MarketProps> = ({ updateProjectComp }) => {
     setCompList(componentData);
   };
 
+  // 处理搜索输入变化
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+  };
+
   // 从缓存中获取组件列表的信息
   const getCompList = () => {
     const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
@@ -405,6 +449,8 @@ const Market: React.FC<MarketProps> = ({ updateProjectComp }) => {
             placeholder="搜索组件"
             prefix={<IconSearch />}
             style={{ marginRight: 16 }}
+            value={searchValue}
+            onChange={handleSearchChange}
           />
           <div className={styles['filter-tags']}>
             <Button