diff --git a/src/pages/ideContainer/market.tsx b/src/pages/ideContainer/market.tsx index bcd2770..f2e0995 100644 --- a/src/pages/ideContainer/market.tsx +++ b/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 = ({ updateProjectComp }) => { const [compList, setCompList] = useState([]); + 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 = ({ 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 = ({ updateProjectComp }) => { // 渲染组件分类 const renderComponentCategory = useCallback(() => { + // 使用过滤后的组件列表 + const currentCompList = searchValue ? filteredCompList : compList; + // 根据第一层和第二层分类筛选组件 let filteredComponents = []; @@ -217,23 +256,23 @@ const Market: React.FC = ({ updateProjectComp }) => { }; // 收集符合条件的基础组件 - if (conditions.includeMyLibs && compList.myLibs) { - filteredComponents = [...filteredComponents, ...compList.myLibs]; + if (conditions.includeMyLibs && currentCompList.myLibs) { + filteredComponents = [...filteredComponents, ...currentCompList.myLibs]; } - if (conditions.includePubLibs && compList.pubLibs) { - filteredComponents = [...filteredComponents, ...compList.pubLibs]; + if (conditions.includePubLibs && currentCompList.pubLibs) { + filteredComponents = [...filteredComponents, ...currentCompList.pubLibs]; } - if (conditions.includeTeamLibs && compList.teamLibs) { - filteredComponents = [...filteredComponents, ...compList.teamLibs]; + if (conditions.includeTeamLibs && currentCompList.teamLibs) { + filteredComponents = [...filteredComponents, ...currentCompList.teamLibs]; } // 收集符合条件的复合组件 const flowComponents = []; - if (conditions.includeMyFlow && compList.myFlow) { - flowComponents.push(...compList.myFlow.map(item => ({ ...item, isFlow: true }))); + if (conditions.includeMyFlow && currentCompList.myFlow) { + flowComponents.push(...currentCompList.myFlow.map(item => ({ ...item, isFlow: true }))); } - if (conditions.includePubFlow && compList.pubFlow) { - flowComponents.push(...compList.pubFlow.map(item => ({ ...item, isFlow: true }))); + if (conditions.includePubFlow && currentCompList.pubFlow) { + flowComponents.push(...currentCompList.pubFlow.map(item => ({ ...item, isFlow: true }))); } // 合并相同标签的组件 @@ -272,7 +311,7 @@ const Market: React.FC = ({ updateProjectComp }) => { if (resultComponents.length === 0) { return (
- 暂无组件数据 + {searchValue ? '未找到匹配的组件' : '暂无组件数据'}
); } @@ -346,7 +385,7 @@ const Market: React.FC = ({ updateProjectComp }) => { }).filter(item => item !== null)} ); - }, [compList, firstLevelCategory, secondLevelCategory]); + }, [compList, filteredCompList, firstLevelCategory, secondLevelCategory, searchValue]); // 给账号下的组件列表(本地存储中的组件列表)增加一个是否添加至工程的初始状态 const addInitState = (componentData) => { @@ -377,6 +416,11 @@ const Market: React.FC = ({ 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 = ({ updateProjectComp }) => { placeholder="搜索组件" prefix={} style={{ marginRight: 16 }} + value={searchValue} + onChange={handleSearchChange} />