From 9d9f9300788db2d0a0d6c49bbf9d78069b2f9ed0 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Fri, 26 Sep 2025 10:00:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(componentLibrary):=20=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=BA=93=E6=90=9C=E7=B4=A2=E4=B8=8E=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E9=A1=B5=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E7=BB=84=E4=BB=B6=E6=90=9C=E7=B4=A2=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=8F=8A=E8=BF=87=E6=BB=A4=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/componentLibrary/index.tsx | 60 +++++++++++++++++++++++-----
 1 file changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/pages/componentLibrary/index.tsx b/src/pages/componentLibrary/index.tsx
index 19841c8..36831a5 100644
--- a/src/pages/componentLibrary/index.tsx
+++ b/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>