feat(componentLibrary): 重构 CollapseBox 组件并添加 CompNode 组件

- 在 CollapseBox 组件中引入 Grid 组件，优化布局结构 - 新增 CompNode 组件，用于渲染组件节点信息 - 添加 formatDataType 工具函数，用于格式化数据类型 - 新增 compNode.module.less 样式文件，定义 CompNode 组件样式
6 months ago · 5c5c2d918c
parent 8d180679a6
commit 5c5c2d918c
4 changed files with 202 additions and 8 deletions
--- a/src/pages/componentLibrary/collapseBox.tsx
+++ b/src/pages/componentLibrary/collapseBox.tsx
@ -1,8 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { Collapse, Tag } from '@arco-design/web-react';
+import { Collapse, Tag, Grid } from '@arco-design/web-react';
 import { getLocalStorageData } from '@/utils/storage';
+import CompNode from './compNode';

 const CollapseItem = Collapse.Item;
+const Row = Grid.Row;
+const Col = Grid.Col;

 interface CollapseBoxProps {
  componentType: string;
@ -31,13 +34,22 @@ const CollapseBox: React.FC<CollapseBoxProps> = ({ componentType }) => {
                </span>
              }
            >
+              <Row style={{ marginBottom: 16 }}>
                {v.children.map((v, i) => {
                  return (
-                  <div key={i}>
-                    <Tag>{v.label}</Tag>
-                  </div>
+                    <Col
+                      xs={12}
+                      sm={12}
+                      md={12}
+                      lg={6}
+                      xl={6}
+                      xxl={6}
+                      key={i}>
+                      <CompNode nodeData={v} />
+                    </Col>
                  );
                })}
+              </Row>
            </CollapseItem>
          );
        })}
--- a/src/pages/componentLibrary/compNode.tsx
+++ b/src/pages/componentLibrary/compNode.tsx
@ -0,0 +1,81 @@
+import React from 'react';
+import styles from './style/compNode.module.less';
+import { Card, Divider, Tag } from '@arco-design/web-react';
+import { IconCaretRight } from '@arco-design/web-react/icon';
+import { formatDataType } from '@/utils/common';
+
+type NodeData = {
+  label: string;
+
+  [key: string]: any
+};
+
+interface CompNodeProps {
+  nodeData: NodeData;
+}
+
+const CompNode: React.FC<CompNodeProps> = ({ nodeData }) => {
+  return (
+    <div className={styles['comp-node-container']}>
+      <Card style={{ width: 450, margin: 10, border: '1px solid #dfe4ea' }}>
+        {/*节点渲染*/}
+        <div className={styles['comp-node-box']}>
+          {/*节点标题*/}
+          <div className={styles['comp-node-title']}>
+            {nodeData.label}
+          </div>
+          {/*节点api相关的输入输出*/}
+          <div className={styles['comp-node-api']}>
+            <div className={styles['api-in']}>
+              {nodeData.apis.map((v, i) => {
+                return (
+                  <div key={i} className={styles['flex-box']}>
+                    <div className={styles['right-arrow']}></div>
+                    <div style={{ marginLeft: 5 }}>{v.id}</div>
+                  </div>
+                );
+              })}
+            </div>
+            <div className={styles['api-out']}>
+              <div className={styles['flex-box']}>
+                <div style={{ marginRight: 5 }}>{nodeData.apiOut.id}</div>
+                <div className={styles['right-arrow']}></div>
+              </div>
+            </div>
+          </div>
+          <Divider></Divider>
+          {/*节点data相关的输入输出*/}
+          <div className={styles['comp-node-data']}>
+            <div className={styles['data-in']}>
+              {nodeData.dataIns.map((v, i) => {
+                return (
+                  <div key={i} className={styles['flex-box']}>
+                    <div className={styles['rectangular']}></div>
+                    <div style={{ marginLeft: 5 }}>{v.id} {formatDataType(v.dataType)}</div>
+                  </div>
+                );
+              })}
+            </div>
+            <div className={styles['data-out']}>
+              {nodeData.dataOuts.map((v, i) => {
+                return (
+                  <div key={i} className={styles['flex-box']}>
+                    <div style={{ marginRight: 5 }}>{v.id} {formatDataType(v.dataType)}</div>
+                    <div className={styles['rectangular']}></div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+        {/*其他信息渲染*/}
+        <div className={styles['comp-node-other']}>
+          <Tag color="arcoblue">{nodeData.comp.codeLanguage}</Tag>
+          <div className={styles['description']}>{nodeData.comp.description}</div>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default CompNode;
--- a/src/pages/componentLibrary/style/compNode.module.less
+++ b/src/pages/componentLibrary/style/compNode.module.less
@ -0,0 +1,82 @@
+.comp-node-container {
+
+  .comp-node-box {
+    width: 90%;
+    margin: 0 auto;
+    border-radius: 10px;
+    box-shadow: 0 0 10px #cccccc;
+    padding: 8px 0;
+
+    .comp-node-title {
+      text-align: center;
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+
+    .comp-node-api {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .api-in,
+      .api-out {
+        display: flex;
+        flex-direction: column;
+        font-size: 16px;
+        font-weight: 700;
+
+        .flex-box {
+          display: flex;
+          align-items: center;
+
+          .right-arrow {
+            width: 0;
+            height: 0;
+            border-top: 5px solid transparent;
+            border-bottom: 5px solid transparent;
+            border-left: 10px solid #68b25b; /* 箭头颜色 */
+          }
+        }
+      }
+
+      .api-out {
+        justify-content: flex-end;
+      }
+    }
+
+    .comp-node-data {
+
+      .data-in,
+      .data-out {
+        display: flex;
+        flex-direction: column;
+
+        .flex-box {
+          display: flex;
+          align-items: center;
+          flex: 1;
+
+          .rectangular {
+            width: 11px;
+            height: 8px;
+            background-color: #68b25b;
+            border-radius: 3px;
+          }
+        }
+      }
+
+      .data-out {
+        align-items: flex-end;
+      }
+    }
+  }
+
+
+  .comp-node-other {
+    margin-top: 20px;
+
+    .description {
+      margin-top: 10px;
+    }
+  }
+}
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@ -88,3 +88,22 @@ export function formatTimestamp(timestamp: number): string {
  const millisecondTimestamp = isMillisecond ? timestamp : timestamp * 1000;
  return dayjs(millisecondTimestamp).format('YYYY-MM-DD HH:mm:ss');
 }
+
+// 格式化数据类型
+export function formatDataType(value: string): string {
+  const dataTypeAbbr = new Map([
+    ['INTEGER', 'INT'],
+    ['STRING', 'STR'],
+    ['FLOAT', 'FLOAT'],
+    ['DOUBLE', 'DOU'],
+    ['ARRAY', 'ARR'],
+    ['BOOLEAN', 'BOOL'],
+    ['OBJECT', 'OBJECT'],
+    ['DATE', 'DATE'],
+    ['DATETIME', 'DT'],
+    ['TIMESTAMP', 'TS'],
+    ['JSON', 'JSON']
+  ]);
+
+  return dataTypeAbbr.get(value) || value;
+}