feat(componentLibrary): 实现组件库页面功能

- 添加组件库页面布局和样式
- 实现搜索框、组件推荐按钮和标签页功能
- 新增 CollapseBox组件用于展示组件数据
- 添加本地存储数据获取和设置工具函数

src/pages/componentLibrary/collapseBox.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { Collapse, Tag } from '@arco-design/web-react';
+import { getLocalStorageData } from '@/utils/storage';
+
+const CollapseItem = Collapse.Item;
+
+interface CollapseBoxProps {
+  componentType: string;
+}
+
+const CollapseBox: React.FC<CollapseBoxProps> = ({ componentType }) => {
+  const [collapseData, setCollapseData] = useState([]);
+
+  useEffect(() => {
+    const data = getLocalStorageData('componentsData')[`${componentType}`];
+    setCollapseData(data);
+  }, [componentType]);
+
+  return (
+    <>
+      <Collapse>
+        {collapseData.map((v, i) => {
+          return (
+            <CollapseItem
+              key={i}
+              name={`${v.label}_${i}`}
+              header={
+                <span>
+                  <span style={{ marginRight: 8 }}>{v.label}</span>
+                  <Tag color="arcoblue">{v.children.length}</Tag>
+                </span>
+              }
+            >
+              {v.children.map((v, i) => {
+                return (
+                  <div key={i}>
+                    <Tag>{v.label}</Tag>
+                  </div>
+                );
+              })}
+            </CollapseItem>
+          );
+        })}
+      </Collapse>
+    </>
+  );
+};
+
+export default CollapseBox;
+

src/pages/componentLibrary/index.tsx

@@ -1,10 +1,65 @@
 import React 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() {
   return (
     <>
-      <div>
+      <div className={styles['comp-library-container']}>
-        组件库
+        <CustomCard>
+          <Space
+            size={20}
+            style={{ marginBottom: '5px' }}
+          >
+            <InputSearch allowClear placeholder="输入名称搜索组件" style={{ width: 350 }} />
+            <Button type="primary">组件推荐</Button>
+          </Space>
+          <Tabs defaultActiveTab="1">
+            <TabPane
+              key="1"
+              title={
+                <span>
+                  <span>我的组件</span>
+                  <Tag color="arcoblue">
+                    216
+                  </Tag>
+                </span>
+              }
+            >
+              <CollapseBox componentType="myLibs" />
+            </TabPane>
+            <TabPane
+              key="2"
+              title={
+                <span>
+                  <span>公开组件</span>
+                  <Tag color="arcoblue">
+                    31
+                  </Tag>
+                </span>
+              }>
+              <CollapseBox componentType="pubLibs" />
+            </TabPane>
+            <TabPane
+              key="3"
+              title={
+                <span>
+                  <span>协同组件</span>
+                  <Tag color="arcoblue">
+                    0
+                  </Tag>
+                </span>
+              }
+            >
+              <CollapseBox componentType="teamLibs" />
+            </TabPane>
+          </Tabs>
+        </CustomCard>
       </div>
     </>
   );

src/pages/compositeCompLibrary/index.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
+import styles from './style/index.module.less';
+import CustomCard from '@/components/CustomCard/index';
 
 function CompositeCompLibrary() {
   return (
     <>
-      <div>
+      <div className={styles['composite-comp-library-container']}>
-        复合组件库
+        <CustomCard>
+          复合组件库
+        </CustomCard>
       </div>
     </>
   );

src/pages/compositeCompLibrary/style/index.module.less

@@ -0,0 +1,3 @@
+.composite-comp-library-container{
+
+}

src/utils/storage.ts

@@ -0,0 +1,17 @@
+export const getLocalStorageData = <T>(key: string): T => {
+  try {
+    const storedData = localStorage.getItem(key);
+    return JSON.parse(storedData);
+  } catch (error) {
+    console.error(`获取 localStorage 数据失败 (${key}):`, error);
+    return null;
+  }
+};
+
+export const setLocalStorageData = <T>(key: string, data: T): void => {
+  try {
+    localStorage.setItem(key, JSON.stringify(data));
+  } catch (error) {
+    console.error(`设置 localStorage 数据失败 (${key}):`, error);
+  }
+};