ngskcloud
/
flow-playform-react
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
master
钟良源 4 months ago
parent 6cfc87a42d
commit ad592ef134
5 changed files with 315 additions and 1 deletions
Show Stats Download Patch File Download Diff File

228
src/pages/componentDevelopment/componentDeployment/collapseList.tsx
Unescape Escape View File

@ -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;

48
src/pages/componentDevelopment/componentDeployment/index.tsx
Unescape Escape View File

@ -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;

25
src/pages/componentDevelopment/componentDeployment/style/collapseList.module.less
Unescape Escape View File

@ -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;
}
}

13
src/pages/componentDevelopment/componentDeployment/style/index.module.less
Unescape Escape View File

@ -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;
}
}

2
src/pages/ideContainer/index.tsx
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save