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>