From 8d180679a6db963f55ae4ae46742ad2ffdd655ad Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Thu, 21 Aug 2025 16:50:27 +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=E9=A1=B5=E9=9D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加组件库页面布局和样式
- 实现搜索框、组件推荐按钮和标签页功能
- 新增 CollapseBox组件用于展示组件数据
- 添加本地存储数据获取和设置工具函数
---
 src/pages/componentLibrary/collapseBox.tsx    | 50 ++++++++++++++++
 src/pages/componentLibrary/index.tsx          | 59 ++++++++++++++++++-
 .../componentLibrary/style/index.module.less  |  0
 src/pages/compositeCompLibrary/index.tsx      |  8 ++-
 .../style/index.module.less                   |  3 +
 src/utils/storage.ts                          | 17 ++++++
 6 files changed, 133 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/componentLibrary/collapseBox.tsx
 create mode 100644 src/pages/componentLibrary/style/index.module.less
 create mode 100644 src/pages/compositeCompLibrary/style/index.module.less
 create mode 100644 src/utils/storage.ts

diff --git a/src/pages/componentLibrary/collapseBox.tsx b/src/pages/componentLibrary/collapseBox.tsx
new file mode 100644
index 0000000..1e29a38
--- /dev/null
+++ b/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;
+
diff --git a/src/pages/componentLibrary/index.tsx b/src/pages/componentLibrary/index.tsx
index 141df1c..a3dacb3 100644
--- a/src/pages/componentLibrary/index.tsx
+++ b/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>
     </>
   );
diff --git a/src/pages/componentLibrary/style/index.module.less b/src/pages/componentLibrary/style/index.module.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/compositeCompLibrary/index.tsx b/src/pages/compositeCompLibrary/index.tsx
index ccc6cf2..6c35569 100644
--- a/src/pages/compositeCompLibrary/index.tsx
+++ b/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>
     </>
   );
diff --git a/src/pages/compositeCompLibrary/style/index.module.less b/src/pages/compositeCompLibrary/style/index.module.less
new file mode 100644
index 0000000..a6e6e42
--- /dev/null
+++ b/src/pages/compositeCompLibrary/style/index.module.less
@@ -0,0 +1,3 @@
+.composite-comp-library-container{
+
+}
\ No newline at end of file
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
new file mode 100644
index 0000000..0f41156
--- /dev/null
+++ b/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);
+  }
+};
\ No newline at end of file