feat(componentLibrary): 实现组件库搜索与标签页切换功能新增组件搜索状态管理及过滤逻辑

src/pages/componentLibrary/index.tsx

@@ -1,15 +1,41 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from './style/index.module.less';
 import CustomCard from '@/components/CustomCard/index';
 import CollapseBox from './collapseBox';
 import { Space, Input, Button, Tabs, Tag } from '@arco-design/web-react';
 
-const InputSearch = Input.Search;
 const TabPane = Tabs.TabPane;
 
 function ComponentLibrary() {
   const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
   const componentData = JSON.parse(sessionStorage.getItem(`compLibs${userInfo.userId}`));
+
+  const [inputValue, setInputValue] = useState('');
+  const [activeKey, setActiveKey] = useState<'myLibs' | 'pubLibs' | 'teamLibs'>('myLibs');
+  const [componentsTree, setComponentsTree] = useState([]);
+  const [filteredComponentsTree, setFilteredComponentsTree] = useState([]);
+
+  const handelChangeTabs = (key) => {
+    if (componentData && Object.keys(componentData).length > 0) setComponentsTree(componentData[key]);
+    setActiveKey(key);
+  };
+
+  const handelSearch = () => {
+    const newTree = componentsTree.map(item => {
+      const filteredChildren = item.children.filter(sub => sub.label.toLowerCase().includes(inputValue.toLowerCase()));
+      return {
+        ...item,
+        children: filteredChildren
+      };
+    })
+      .filter(item => item.children.length > 0);
+    setFilteredComponentsTree(newTree);
+  };
+
+  useEffect(() => {
+    handelSearch();
+  }, [inputValue, activeKey]);
+
   return (
     <>
       <div className={styles['comp-library-container']}>
@@ -18,12 +44,20 @@ function ComponentLibrary() {
             size={20}
             style={{ marginBottom: '5px' }}
           >
-            <InputSearch allowClear placeholder="输入名称搜索组件" style={{ width: 350 }} />
+            <Input
+              value={inputValue || ''}
+              onChange={(value) => setInputValue(value)}
+              allowClear
+              placeholder="输入名称搜索组件"
+              style={{ width: 350 }} />
             <Button type="primary">组件推荐</Button>
           </Space>
-          <Tabs defaultActiveTab="1">
+          <Tabs
+            defaultActiveTab={activeKey}
+            onChange={(e) => handelChangeTabs(e)}
+          >
             <TabPane
-              key="1"
+              key="myLibs"
               title={
                 <span>
                   <span>我的组件</span>
@@ -33,10 +67,12 @@ function ComponentLibrary() {
                 </span>
               }
             >
-              <CollapseBox componentType="myLibs" data={componentData.myLibs} />
+              <CollapseBox
+                componentType="myLibs"
+                data={inputValue ? filteredComponentsTree : componentData.myLibs} />
             </TabPane>
             <TabPane
-              key="2"
+              key="pubLibs"
               title={
                 <span>
                   <span>公开组件</span>
@@ -45,10 +81,12 @@ function ComponentLibrary() {
                   </Tag>
                 </span>
               }>
-              <CollapseBox componentType="pubLibs" data={componentData.pubLibs} />
+              <CollapseBox
+                componentType="pubLibs"
+                data={inputValue ? filteredComponentsTree : componentData.pubLibs} />
             </TabPane>
             <TabPane
-              key="3"
+              key="teamLibs"
               title={
                 <span>
                   <span>协同组件</span>
@@ -58,7 +96,9 @@ function ComponentLibrary() {
                 </span>
               }
             >
-              <CollapseBox componentType="teamLibs" data={componentData.teamLibs} />
+              <CollapseBox
+                componentType="teamLibs"
+                data={inputValue ? filteredComponentsTree : componentData.teamLibs} />
             </TabPane>
           </Tabs>
         </CustomCard>