feat(orchestration): 实现全局变量管理页面
- 新增 GlobalVarContainer 组件用于全局变量管理- 添加全局变量页面样式文件 - 在路由中替换原有的占位组件为新实现的容器组件 - 实现左侧菜单导航与内容区域基础布局- 添加搜索框与新增参数按钮功能 - 支持多种变量类型的菜单切换展示master
parent
3e1ae07849
commit
90562d6f43
@ -0,0 +1,63 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import styles from './style/index.module.less';
|
||||||
|
import { Button, Divider, Input, Space, Table } from '@arco-design/web-react';
|
||||||
|
import { IconSearch } from '@arco-design/web-react/icon';
|
||||||
|
|
||||||
|
const GlobalVarContainer = () => {
|
||||||
|
const [selectedItem, setSelectedItem] = useState('数字类型');
|
||||||
|
|
||||||
|
const menuItems = [
|
||||||
|
'数字类型',
|
||||||
|
'字符串类型',
|
||||||
|
'布尔类型',
|
||||||
|
'复合类型',
|
||||||
|
'集合类型',
|
||||||
|
'元祖类型',
|
||||||
|
'实例类型',
|
||||||
|
'列表类型'
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles['global-var-container']}>
|
||||||
|
{/*左侧菜单*/}
|
||||||
|
<div className={styles['global-var-menu']}>
|
||||||
|
{menuItems.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={selectedItem === item ? styles['selected'] : ''}
|
||||||
|
onClick={() => setSelectedItem(item)}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className={styles['global-var-content']}>
|
||||||
|
{/*头部*/}
|
||||||
|
<div className={styles['global-var-header']}>
|
||||||
|
<div className={styles['global-var-title']}>全局参数</div>
|
||||||
|
<div className={styles['global-var-handle']}>
|
||||||
|
<Space split={<Divider type="vertical" />}>
|
||||||
|
<Input
|
||||||
|
prefix={<IconSearch />}
|
||||||
|
placeholder={'搜索'}
|
||||||
|
style={{ width: 236 }}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
style={{ marginLeft: 5, borderRadius: 4 }}
|
||||||
|
>
|
||||||
|
+ 新增参数
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/*数据列表*/}
|
||||||
|
<div className={styles['global-var-list']}>
|
||||||
|
{/*<Table columns={columns} data={eventData} pagination={false} />*/}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GlobalVarContainer;
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
.global-var-container {
|
||||||
|
display: flex;
|
||||||
|
height: 98%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 17px 19px 0 24px;
|
||||||
|
|
||||||
|
.global-var-menu {
|
||||||
|
flex: 1;
|
||||||
|
border-right: 4px solid #E5E6EB;
|
||||||
|
padding-left: 30px;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
width: 80%;
|
||||||
|
height: 36px;
|
||||||
|
margin: 6px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #F0EEFC;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.global-var-content {
|
||||||
|
flex: 8;
|
||||||
|
padding: 0 0 0 40px;
|
||||||
|
|
||||||
|
.global-var-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
.global-var-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-var-handle {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-var-list {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue