From a8224cf4f7ec26def12bd9727bd107acdf901833 Mon Sep 17 00:00:00 2001 From: ZLY Date: Fri, 22 Aug 2025 11:31:53 +0800 Subject: [PATCH] =?UTF-8?q?feat(compositeCompLibrary):=20=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0=E5=A4=8D=E5=90=88=E7=BB=84=E4=BB=B6=E5=BA=93=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加Tabs组件，实现我的复合组件和公开复合组件切换 - 新增CompGrid组件，用于展示复合组件列表 - 新增CompNode组件，用于展示单个复合组件的详细信息 - 添加临时数据文件tempData，用于模拟复合组件数据 --- src/pages/compositeCompLibrary/compGrid.tsx | 52 +++ src/pages/compositeCompLibrary/compNode.tsx | 79 ++++ src/pages/compositeCompLibrary/index.tsx | 26 +- .../style/compGrid.module.less | 3 + .../style/compNode.module.less | 87 +++++ .../compositeCompLibrary/test/tempData.ts | 344 ++++++++++++++++++ 6 files changed, 590 insertions(+), 1 deletion(-) create mode 100644 src/pages/compositeCompLibrary/compGrid.tsx create mode 100644 src/pages/compositeCompLibrary/compNode.tsx create mode 100644 src/pages/compositeCompLibrary/style/compGrid.module.less create mode 100644 src/pages/compositeCompLibrary/style/compNode.module.less create mode 100644 src/pages/compositeCompLibrary/test/tempData.ts diff --git a/src/pages/compositeCompLibrary/compGrid.tsx b/src/pages/compositeCompLibrary/compGrid.tsx new file mode 100644 index 0000000..c3629c9 --- /dev/null +++ b/src/pages/compositeCompLibrary/compGrid.tsx @@ -0,0 +1,52 @@ +import React, { useEffect, useState } from 'react'; +import styles from './style/compGrid.module.less'; +import CompNode from './compNode'; +import { complexData } from './test/tempData'; +import { Input, Grid } from '@arco-design/web-react'; + +const InputSearch = Input.Search; +const Row = Grid.Row; +const Col = Grid.Col; + +interface CompGridProps { + componentType: 'myComplex' | 'publicComplex'; +} + +const CompGrid: React.FC = ({ componentType }) => { + const [currentComponentType, setCurrentComponentType] = useState(''); + const [compData, setCompData] = useState([]); + useEffect(() => { + setCurrentComponentType(componentType); + setCompData(complexData[`${componentType}`]); + }, [componentType]); + + return ( + <> +
+ + + {compData.map((v, i) => { + return ( + + + + ); + })} + +
+ + ); +}; + +export default CompGrid; \ No newline at end of file diff --git a/src/pages/compositeCompLibrary/compNode.tsx b/src/pages/compositeCompLibrary/compNode.tsx new file mode 100644 index 0000000..8b76990 --- /dev/null +++ b/src/pages/compositeCompLibrary/compNode.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import styles from './style/compNode.module.less'; +import { Card, Divider } from '@arco-design/web-react'; +import { IconDelete } 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 = ({ nodeData }) => { + return ( +
+ + {/*节点渲染*/} +
+ {/*节点标题*/} +
+ {nodeData.flowName} +
+ {/*节点api相关的输入输出*/} +
+
+
+
+
contour
+
+
+
+
+
done
+
+
+
+
+ + {/*节点data相关的输入输出*/} +
+
+ {nodeData.dataIns.length > 0 && nodeData.dataIns.map((v, i) => { + return ( +
+
+
{v.id} {formatDataType(v.dataType)}
+
+ ); + })} +
+
+ {nodeData.dataOuts.length > 0 && nodeData.dataOuts.map((v, i) => { + return ( +
+
{v.id} {formatDataType(v.dataType)}
+
+
+ ); + })} +
+
+
+ {/*其他信息渲染*/} +
+
+ +
+
{nodeData.description}
+
+ +
+ ); +}; + +export default CompNode; \ No newline at end of file diff --git a/src/pages/compositeCompLibrary/index.tsx b/src/pages/compositeCompLibrary/index.tsx index 6c35569..1a3dc67 100644 --- a/src/pages/compositeCompLibrary/index.tsx +++ b/src/pages/compositeCompLibrary/index.tsx @@ -1,13 +1,37 @@ import React from 'react'; import styles from './style/index.module.less'; import CustomCard from '@/components/CustomCard/index'; +import { Tabs } from '@arco-design/web-react'; +import CompGrid from './compGrid'; + +const TabPane = Tabs.TabPane; function CompositeCompLibrary() { return ( <>
- 复合组件库 + + + 我的复合组件 + + } + > + + + + 公开复合组件 + + }> + + +
diff --git a/src/pages/compositeCompLibrary/style/compGrid.module.less b/src/pages/compositeCompLibrary/style/compGrid.module.less new file mode 100644 index 0000000..6f73e38 --- /dev/null +++ b/src/pages/compositeCompLibrary/style/compGrid.module.less @@ -0,0 +1,3 @@ +.comp-grid-container { + +} \ No newline at end of file diff --git a/src/pages/compositeCompLibrary/style/compNode.module.less b/src/pages/compositeCompLibrary/style/compNode.module.less new file mode 100644 index 0000000..123585c --- /dev/null +++ b/src/pages/compositeCompLibrary/style/compNode.module.less @@ -0,0 +1,87 @@ +.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; + + .handleDelete { + width: 100%; + text-align: right; + } + + .description { + margin-top: 10px; + } + } +} \ No newline at end of file diff --git a/src/pages/compositeCompLibrary/test/tempData.ts b/src/pages/compositeCompLibrary/test/tempData.ts new file mode 100644 index 0000000..e4706b6 --- /dev/null +++ b/src/pages/compositeCompLibrary/test/tempData.ts @@ -0,0 +1,344 @@ +export const complexData = { + myComplex: [ + { + 'dataIns': [], + 'dataOuts': [], + 'description': '放小夹爪', + 'flowName': '放小夹爪', + 'id': '1950503157821997058', + 'published': 1, + 'tag': '放小夹爪' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': '切大夹爪', + 'flowName': '切大夹爪mk1', + 'id': '1950503083498930177', + 'published': 1, + 'tag': '切大夹爪' + }, + { + 'dataIns': [ + { + 'arrayType': 'ARRAY', + 'dataType': 'ARRAY', + 'defaultValue': [ + '' + ], + 'desc': '', + 'id': 'arrry' + } + ], + 'dataOuts': [], + 'description': '抓取底盘到打磨位', + 'flowName': '抓取底盘到打磨位', + 'id': '1950006961574699010', + 'published': 1, + 'tag': '抓取底盘到打磨位' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': '新地盘位到装配位', + 'flowName': '新地盘位到装配位', + 'id': '1949793478329425922', + 'published': 1, + 'tag': '新地盘位到装配位' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': '新切大夹爪', + 'flowName': '新切大夹爪', + 'id': '1949772493811277826', + 'published': 1, + 'tag': '新切大夹爪' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': '新放磨棒', + 'flowName': '新放磨棒', + 'id': '1949768489341476865', + 'published': 1, + 'tag': '新放磨棒' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': '新切磨棒', + 'flowName': '新切磨棒', + 'id': '1949752230570811394', + 'published': 1, + 'tag': '新切磨棒' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': '切磨棒', + 'flowName': '切磨棒', + 'id': '1949730326136938497', + 'published': 1, + 'tag': '切磨棒' + }, + { + 'dataIns': [], + 'dataOuts': [ + { + 'arrayType': null, + 'dataType': null, + 'defaultValue': null, + 'desc': '', + 'id': 'input' + }, + { + 'arrayType': 'DOUBLE', + 'dataType': 'ARRAY', + 'defaultValue': null, + 'desc': '末端点位', + 'id': 'strEndPos' + }, + { + 'arrayType': 'DOUBLE', + 'dataType': 'ARRAY', + 'defaultValue': null, + 'desc': '中间点位', + 'id': 'strMidPos' + }, + { + 'arrayType': 'DOUBLE', + 'dataType': 'ARRAY', + 'defaultValue': [ + -92.565, + -411.927, + -114.356, + -101.013, + -1.115, + -179.97 + ], + 'desc': '直线运动点位', + 'id': 'strPos' + }, + { + 'arrayType': null, + 'dataType': 'INTEGER', + 'defaultValue': -1, + 'desc': '工件号', + 'id': 'ufNum' + }, + { + 'arrayType': null, + 'dataType': 'INTEGER', + 'defaultValue': 11, + 'desc': '工具号', + 'id': 'utNum' + } + ], + 'description': '底盘打磨', + 'flowName': '底盘打磨', + 'id': '1949723817671843842', + 'published': 1, + 'tag': '底盘打磨' + }, + { + 'dataIns': [ + { + 'arrayType': 'ARRAY', + 'dataType': 'ARRAY', + 'defaultValue': [ + '' + ], + 'desc': '', + 'id': 'shuzu' + } + ], + 'dataOuts': [], + 'description': 'jiaqu', + 'flowName': 'jiaqu', + 'id': '1949655123964911617', + 'published': 1, + 'tag': 'jiaqu' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': 'h', + 'flowName': '发布test', + 'id': '1947850703236149250', + 'published': 1, + 'tag': '航' + } + ], + publicComplex: [ + { + 'dataIns': [], + 'dataOuts': [], + 'description': '放小夹爪', + 'flowName': '放小夹爪', + 'id': '1950503157821997058', + 'published': 1, + 'tag': '放小夹爪' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': '切大夹爪', + 'flowName': '切大夹爪mk1', + 'id': '1950503083498930177', + 'published': 1, + 'tag': '切大夹爪' + }, + { + 'dataIns': [ + { + 'arrayType': 'ARRAY', + 'dataType': 'ARRAY', + 'defaultValue': [ + '' + ], + 'desc': '', + 'id': 'arrry' + } + ], + 'dataOuts': [], + 'description': '抓取底盘到打磨位', + 'flowName': '抓取底盘到打磨位', + 'id': '1950006961574699010', + 'published': 1, + 'tag': '抓取底盘到打磨位' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': '新地盘位到装配位', + 'flowName': '新地盘位到装配位', + 'id': '1949793478329425922', + 'published': 1, + 'tag': '新地盘位到装配位' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': '新切大夹爪', + 'flowName': '新切大夹爪', + 'id': '1949772493811277826', + 'published': 1, + 'tag': '新切大夹爪' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': '新放磨棒', + 'flowName': '新放磨棒', + 'id': '1949768489341476865', + 'published': 1, + 'tag': '新放磨棒' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': '新切磨棒', + 'flowName': '新切磨棒', + 'id': '1949752230570811394', + 'published': 1, + 'tag': '新切磨棒' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': '切磨棒', + 'flowName': '切磨棒', + 'id': '1949730326136938497', + 'published': 1, + 'tag': '切磨棒' + }, + { + 'dataIns': [], + 'dataOuts': [ + { + 'arrayType': null, + 'dataType': null, + 'defaultValue': null, + 'desc': '', + 'id': 'input' + }, + { + 'arrayType': 'DOUBLE', + 'dataType': 'ARRAY', + 'defaultValue': null, + 'desc': '末端点位', + 'id': 'strEndPos' + }, + { + 'arrayType': 'DOUBLE', + 'dataType': 'ARRAY', + 'defaultValue': null, + 'desc': '中间点位', + 'id': 'strMidPos' + }, + { + 'arrayType': 'DOUBLE', + 'dataType': 'ARRAY', + 'defaultValue': [ + -92.565, + -411.927, + -114.356, + -101.013, + -1.115, + -179.97 + ], + 'desc': '直线运动点位', + 'id': 'strPos' + }, + { + 'arrayType': null, + 'dataType': 'INTEGER', + 'defaultValue': -1, + 'desc': '工件号', + 'id': 'ufNum' + }, + { + 'arrayType': null, + 'dataType': 'INTEGER', + 'defaultValue': 11, + 'desc': '工具号', + 'id': 'utNum' + } + ], + 'description': '底盘打磨', + 'flowName': '底盘打磨', + 'id': '1949723817671843842', + 'published': 1, + 'tag': '底盘打磨' + }, + { + 'dataIns': [ + { + 'arrayType': 'ARRAY', + 'dataType': 'ARRAY', + 'defaultValue': [ + '' + ], + 'desc': '', + 'id': 'shuzu' + } + ], + 'dataOuts': [], + 'description': 'jiaqu', + 'flowName': 'jiaqu', + 'id': '1949655123964911617', + 'published': 1, + 'tag': 'jiaqu' + }, + { + 'dataIns': [], + 'dataOuts': [], + 'description': 'h', + 'flowName': '发布test', + 'id': '1947850703236149250', + 'published': 1, + 'tag': '航' + } + ] +}; \ No newline at end of file