diff --git a/src/pages/compositeCompLibrary/compGrid.tsx b/src/pages/compositeCompLibrary/compGrid.tsx
index 96f4171..e40987c 100644
--- a/src/pages/compositeCompLibrary/compGrid.tsx
+++ b/src/pages/compositeCompLibrary/compGrid.tsx
@@ -16,6 +16,7 @@ interface CompGridProps {
 const CompGrid: React.FC<CompGridProps> = ({ componentType }) => {
   const [compData, setCompData] = useState([]);
   const [paginationData, setPaginationData] = useState({ totalCount: 0, currPage: 1, pageSize: 11 });
+  const [searchKeyword, setSearchKeyword] = useState('');
   useEffect(() => {
     if (componentType) getComponentData(componentType);
 
@@ -28,7 +29,8 @@ const CompGrid: React.FC<CompGridProps> = ({ componentType }) => {
     };
     const res: any = await apiList[key]({
       currPage: paginationData.currPage,
-      pageSize: paginationData.pageSize
+      pageSize: paginationData.pageSize,
+      name: searchKeyword
     });
 
     if (res.code === 200) {
@@ -44,7 +46,15 @@ const CompGrid: React.FC<CompGridProps> = ({ componentType }) => {
 
   useEffect(() => {
     getComponentData(componentType);
-  }, [paginationData.currPage]);
+  }, [paginationData.currPage, searchKeyword]);
+
+  const handleSearch = (value: string) => {
+    setSearchKeyword(value);
+    setPaginationData({
+      ...paginationData,
+      currPage: 1
+    });
+  };
 
   return (
     <>
@@ -53,6 +63,8 @@ const CompGrid: React.FC<CompGridProps> = ({ componentType }) => {
           searchButton="搜索"
           placeholder="请输入名字"
           style={{ width: 350 }}
+          onSearch={handleSearch}
+          allowClear
         />
         <Row style={{ marginBottom: 16 }}>
           {compData.map((v, i) => {