style(componentTest): 实例列表和侧边栏组件的布局开发

src/pages/componentDevelopment/componentTest/instanceList.tsx

@@ -1,10 +1,44 @@
 import React from 'react';
+import { Button, Popconfirm, Table } from '@arco-design/web-react';
+import { IconDelete } from '@arco-design/web-react/icon';
 
 const InstanceList = () => {
+  const data = [];
+
+  // 定义表格列
+  const columns = [
+    {
+      title: '实例名',
+      dataIndex: 'name'
+    },
+    {
+      title: '实例标识',
+      dataIndex: 'dataType'
+    },
+    {
+      title: '运行类型',
+      dataIndex: 'defaultValue'
+    },
+    {
+      title: '实例状态',
+      dataIndex: 'description'
+    },
+    {
+      title: '实例测试时间',
+      dataIndex: 'description1'
+    },
+    {
+      title: '操作',
+      dataIndex: 'operations'
+    }
+  ];
   return (
-    <div>
+    <Table
-      实例列表
+      columns={columns}
-    </div>
+      data={data}
+      pagination={false}
+      rowKey="id"
+    />
   );
 };
 

src/pages/componentDevelopment/componentTest/sideBar.tsx

@@ -1,10 +1,39 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Input, Tree } from '@arco-design/web-react';
+import { IconSearch } from '@arco-design/web-react/icon';
+import { menu } from './test/data';
+
+const TreeNode = Tree.Node;
 
 const SideBar = () => {
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+  };
+
   return (
-    <div>
+    <>
-      侧边栏
+      <Input
-    </div>
+        prefix={<IconSearch />}
+        placeholder={'搜索'}
+        style={{ width: '90%' }}
+        value={searchValue}
+        onChange={handleSearchChange}
+      />
+
+      <Tree
+        onSelect={(value, info) => {
+          console.log(value, info);
+        }}
+        onExpand={(keys, info) => {
+          console.log(keys, info);
+        }}
+        treeData={menu}
+      >
+      </Tree>
+
+    </>
   );
 };
 

src/pages/componentDevelopment/componentTest/test/data.ts

@@ -0,0 +1,152 @@
+export const menu = [
+  {
+    'id': '1770647707245903873',
+    'tenantId': '000000',
+    'parentId': '1658394185466220545',
+    'code': 'component_classify',
+    'dictKey': '设备数采与控制交互组件',
+    'dictValue': '设备数采与控制交互组件',
+    'title': '设备数采与控制交互组件',
+    'sort': 0,
+    'remark': '',
+    'isSealed': -1,
+    'isDeleted': -1,
+    'parentName': '',
+    'hasChildren': false
+  },
+  {
+    'id': '1770647743455330305',
+    'tenantId': '000000',
+    'parentId': '1658394185466220545',
+    'code': 'component_classify',
+    'dictKey': '视觉AI组件',
+    'dictValue': '视觉AI组件',
+    'title': '视觉AI组件',
+    'sort': 1,
+    'remark': '',
+    'isSealed': -1,
+    'isDeleted': -1,
+    'parentName': '',
+    'hasChildren': false
+  },
+  {
+    'id': '1770647774937776129',
+    'tenantId': '000000',
+    'parentId': '1658394185466220545',
+    'code': 'component_classify',
+    'dictKey': '运动规划组件',
+    'dictValue': '运动规划组件',
+    'title': '运动规划组件',
+    'sort': 2,
+    'remark': '',
+    'isSealed': -1,
+    'isDeleted': -1,
+    'parentName': '',
+    'hasChildren': false
+  },
+  {
+    'id': '1770647807334580225',
+    'tenantId': '000000',
+    'parentId': '1658394185466220545',
+    'code': 'component_classify',
+    'dictKey': '工艺知识服务组件',
+    'dictValue': '工艺知识服务组件',
+    'title': '工艺知识服务组件',
+    'sort': 2,
+    'remark': '',
+    'isSealed': -1,
+    'isDeleted': -1,
+    'parentName': '',
+    'hasChildren': false
+  },
+  {
+    'id': '1770647842776449026',
+    'tenantId': '000000',
+    'parentId': '1658394185466220545',
+    'code': 'component_classify',
+    'dictKey': '网络通信组件',
+    'dictValue': '网络通信组件',
+    'title': '网络通信组件',
+    'sort': 4,
+    'remark': '',
+    'isSealed': -1,
+    'isDeleted': -1,
+    'parentName': '',
+    'hasChildren': false
+  },
+  {
+    'id': '1770647878029574145',
+    'tenantId': '000000',
+    'parentId': '1658394185466220545',
+    'code': 'component_classify',
+    'dictKey': '数据存取组件',
+    'dictValue': '数据存取组件',
+    'title': '数据存取组件',
+    'sort': 5,
+    'remark': '',
+    'isSealed': -1,
+    'isDeleted': -1,
+    'parentName': '',
+    'hasChildren': false
+  },
+  {
+    'id': '1770647908987731969',
+    'tenantId': '000000',
+    'parentId': '1658394185466220545',
+    'code': 'component_classify',
+    'dictKey': '时序数据AI组件',
+    'dictValue': '时序数据AI组件',
+    'title': '时序数据AI组件',
+    'sort': 6,
+    'remark': '',
+    'isSealed': -1,
+    'isDeleted': -1,
+    'parentName': '',
+    'hasChildren': false
+  },
+  {
+    'id': '1770647940654727170',
+    'tenantId': '000000',
+    'parentId': '1658394185466220545',
+    'code': 'component_classify',
+    'dictKey': '文本数据AI组件',
+    'dictValue': '文本数据AI组件',
+    'title': '文本数据AI组件',
+    'sort': 7,
+    'remark': '',
+    'isSealed': -1,
+    'isDeleted': -1,
+    'parentName': '',
+    'hasChildren': false
+  },
+  {
+    'id': '1770648447733497858',
+    'tenantId': '000000',
+    'parentId': '1658394185466220545',
+    'code': 'component_classify',
+    'dictKey': '测试组件',
+    'dictValue': '测试组件',
+    'title': '测试组件',
+    'sort': 999,
+    'remark': '',
+    'isSealed': -1,
+    'isDeleted': -1,
+    'parentName': '',
+    'hasChildren': false
+  },
+  {
+    'id': '1938074918032830465',
+    'tenantId': '000000',
+    'parentId': '1658394185466220545',
+    'code': 'component_classify',
+    'dictKey': '监听组件',
+    'dictValue': '监听组件',
+    'title': '监听组件',
+    'sort': 10,
+    'remark': '',
+    'isSealed': -1,
+    'isDeleted': -1,
+    'parentName': '',
+    'hasChildren': false
+  }
+];