feat(componentDeployment): 添加组件部署页面及相关组件

src/pages/componentDevelopment/componentDeployment/collapseList.tsx

@@ -0,0 +1,228 @@
+import React from 'react';
+import { Collapse, Space, Tag, Button, Table, TableColumnProps } from '@arco-design/web-react';
+import styles from './style/collapseList.module.less';
+import { IconEye } from '@arco-design/web-react/icon';
+
+const CollapseItem = Collapse.Item;
+
+
+const headerNode = () => {
+  return (
+    <div className={styles['header-node']}>
+      <Space size={7} style={{ marginRight: 50 }}>
+        <img src="https://picsum.photos/200/300"
+             style={{ width: 50, height: 50, borderRadius: 6, overflow: 'hidden' }} />
+        <div>小车零件中心点识别</div>
+      </Space>
+
+      <Space size={10}>
+        <Tag>视觉AI组件</Tag>
+        <Tag>X86_64</Tag>
+        <Tag color={'green'}>启用中</Tag>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/countIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>4</span>
+        </div>
+      </Space>
+    </div>
+  );
+};
+
+const extraNode = () => {
+  return (
+    <div className={styles['extra-node']}>
+      <Space size={20}>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/compileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>未编译</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/recompileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>重新编译</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/addIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>新增实例</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/removedIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>下架组件</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>更多操作</span>
+        </div>
+      </Space>
+    </div>
+  );
+};
+
+const extraNode1 = () => {
+  return (
+    <div className={styles['extra-node']}>
+      <Space size={20}>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/compiledIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#40BF6D' }}>已编译</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/recompileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>重新编译</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/addIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>新增实例</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/removedIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>下架组件</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>更多操作</span>
+        </div>
+      </Space>
+    </div>
+  );
+};
+
+const columns: TableColumnProps[] = [
+  {
+    title: '#',
+    dataIndex: 'key',
+    align: 'center'
+  },
+  {
+    title: '组件标识',
+    dataIndex: 'name',
+    align: 'center'
+  },
+  {
+    title: '实例名称',
+    dataIndex: 'salary',
+    align: 'center'
+  },
+  {
+    title: '运行类型',
+    dataIndex: 'address',
+    align: 'center'
+  },
+  {
+    title: '运行状态',
+    dataIndex: 'email',
+    align: 'center'
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'email',
+    align: 'center'
+  },
+  {
+    title: '操作',
+    dataIndex: '',
+    align: 'center',
+    render: (col, record, index) => (
+      <div className={styles['table-handle-box']}>
+        <Space size={20}>
+          <Button type="text">查看配置</Button>
+          <Button type="text">环境配置</Button>
+          <Button type="text">运行日志</Button>
+          <Button type="text">实例配置</Button>
+          <Button type="text"
+                  icon={<img
+                    src={'/icons/editIcon.png'}
+                    style={{ width: 16, height: 16, marginRight: 5 }} />}
+          >编辑</Button>
+          <Button type="text"
+                  icon={<img
+                    src={'/icons/powerUpIcon.png'}
+                    style={{ width: 16, height: 16, marginRight: 5 }} />}
+          >启用</Button>
+          <Button type="text"
+                  icon={<img
+                    src={'/icons/deleteIcon.png'}
+                    style={{ width: 16, height: 16, marginRight: 5 }} />}
+          >删除</Button>
+        </Space>
+      </div>
+    )
+  }
+];
+const data = [
+  {
+    key: '1',
+    name: 'Jane Doe',
+    salary: 23000,
+    address: '32 Park Road, London',
+    email: 'jane.doe@example.com'
+  },
+  {
+    key: '2',
+    name: 'Alisa Ross',
+    salary: 25000,
+    address: '35 Park Road, London',
+    email: 'alisa.ross@example.com'
+  },
+  {
+    key: '3',
+    name: 'Kevin Sandra',
+    salary: 22000,
+    address: '31 Park Road, London',
+    email: 'kevin.sandra@example.com'
+  },
+  {
+    key: '4',
+    name: 'Ed Hellen',
+    salary: 17000,
+    address: '42 Park Road, London',
+    email: 'ed.hellen@example.com'
+  },
+  {
+    key: '5',
+    name: 'William Smith',
+    salary: 27000,
+    address: '62 Park Road, London',
+    email: 'william.smith@example.com'
+  }
+];
+
+const listNode = () => {
+  return (
+    <Table pagination={false} border={false} columns={columns} data={data} />
+  );
+};
+
+const CollapseList = () => {
+  return (
+    <div className={styles['collapse-list']}>
+      <Collapse
+        expandIconPosition={'right'}
+        bordered={false}
+      >
+        <CollapseItem
+          header={headerNode()}
+          name="1"
+          extra={extraNode()}
+        >
+          {listNode()}
+        </CollapseItem>
+
+        <CollapseItem
+          header={headerNode()}
+          name="2"
+          extra={extraNode1()}>
+          {listNode()}
+        </CollapseItem>
+
+        <CollapseItem
+          header={headerNode()}
+          name="3"
+          extra={extraNode()}>
+          {listNode()}
+        </CollapseItem>
+      </Collapse>
+    </div>
+  );
+};
+
+export default CollapseList;

src/pages/componentDevelopment/componentDeployment/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import styles from './style/index.module.less';
+import { Button, Input, Radio, Space } from '@arco-design/web-react';
+import { IconSearch } from '@arco-design/web-react/icon';
+import CollapseList from './collapseList';
+
+const ComponentDeployment = () => {
+  return (
+    <div className={styles['component-deployment']}>
+      <div className={styles['header']}>
+        <Radio.Group defaultValue={'Beijing'} name="button-radio-group">
+          {['全部', '启用中', '已下架'].map((item) => {
+            return (
+              <Radio key={item} value={item}>
+                {({ checked }) => {
+                  return (
+                    <Button tabIndex={-1} key={item} shape="round" type={checked ? 'primary' : 'default'}>
+                      {item}
+                    </Button>
+                  );
+                }}
+              </Radio>
+            );
+          })}
+        </Radio.Group>
+
+        <Space>
+          <Input
+            prefix={<IconSearch />}
+            placeholder={'搜索'}
+            style={{ width: 236 }}
+          />
+          <Button
+            type="primary"
+            style={{ marginLeft: 5, borderRadius: 4 }}
+          >
+            实例指引
+          </Button>
+        </Space>
+      </div>
+      <div className="content">
+        <CollapseList></CollapseList>
+      </div>
+    </div>
+  );
+};
+
+export default ComponentDeployment;

src/pages/componentDevelopment/componentDeployment/style/collapseList.module.less

@@ -0,0 +1,25 @@
+.collapse-list {
+  :global(.arco-collapse-item-content-box) {
+    padding: 0;
+  }
+}
+
+.header-node {
+  display: flex;
+  align-items: center;
+}
+
+.extra-node {
+  margin-right: 20px;
+}
+
+.flex-box {
+  display: flex;
+  align-items: center;
+}
+
+.table-handle-box {
+  :global(.arco-btn) {
+    padding: 0;
+  }
+}

src/pages/componentDevelopment/componentDeployment/style/index.module.less

@@ -0,0 +1,13 @@
+.component-deployment {
+  height: 98%;
+  background-color: #ffffff;
+  padding: 17px 19px 0 24px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ebebeb;
+    margin-bottom: 25px;
+  }
+}

src/pages/ideContainer/index.tsx

@@ -17,6 +17,7 @@ import GlobalVarContainer from '@/pages/orchestration/globalVar';
 import AppCompComponent from '@/pages/orchestration/appCompComponent';
 import ComponentList from '@/pages/componentDevelopment/componentList';
 import ComponentCoding from '@/pages/componentDevelopment/componentCoding';
+import ComponentDeployment from '@/pages/componentDevelopment/componentDeployment';
 
 type UrlParamsOptions = {
   identity?: string;
@@ -28,7 +29,6 @@ const AppInstanceComponent = () => <div style={{ height: '100%', width: '100%' }
 const MyComponents = () => <div style={{ height: '100%', width: '100%' }}>我的组件</div>;
 const MatchingComponents = () => <div style={{ height: '100%', width: '100%' }}>协同组件</div>;
 const ComponentReview = () => <div style={{ height: '100%', width: '100%' }}>组件审核</div>;
-const ComponentDeployment = () => <div style={{ height: '100%', width: '100%' }}>组件部署</div>;
 const ComponentTest = () => <div style={{ height: '100%', width: '100%' }}>组件测试</div>;
 const EnvConfig = () => <div style={{ height: '100%', width: '100%' }}>环境配置</div>;