feat(orchestration): 实现全局变量管理页面

- 新增 GlobalVarContainer 组件用于全局变量管理- 添加全局变量页面样式文件
- 在路由中替换原有的占位组件为新实现的容器组件
- 实现左侧菜单导航与内容区域基础布局- 添加搜索框与新增参数按钮功能
- 支持多种变量类型的菜单切换展示
master
钟良源 4 months ago
parent 3e1ae07849
commit 90562d6f43

@ -13,6 +13,7 @@ import { getAppListBySceneId } from '@/api/apps';
import ProjectContainer from '@/pages/orchestration/project'; import ProjectContainer from '@/pages/orchestration/project';
import ApplicationContainer from '@/pages/orchestration/application'; import ApplicationContainer from '@/pages/orchestration/application';
import EventContainer from '@/pages/orchestration/event'; import EventContainer from '@/pages/orchestration/event';
import GlobalVarContainer from '@/pages/orchestration/globalVar';
type UrlParamsOptions = { type UrlParamsOptions = {
identity?: string; identity?: string;
@ -21,7 +22,6 @@ type UrlParamsOptions = {
const CompListComponent = () => <div style={{ height: '100%', width: '100%' }}></div>; const CompListComponent = () => <div style={{ height: '100%', width: '100%' }}></div>;
const AppInstanceComponent = () => <div style={{ height: '100%', width: '100%' }}></div>; const AppInstanceComponent = () => <div style={{ height: '100%', width: '100%' }}></div>;
const GlobalVarComponent = () => <div style={{ height: '100%', width: '100%' }}></div>;
const AppCompComponent = () => <div style={{ height: '100%', width: '100%' }}></div>; const AppCompComponent = () => <div style={{ height: '100%', width: '100%' }}></div>;
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>;
@ -139,7 +139,7 @@ function IDEContainer() {
case 'event': case 'event':
return <EventContainer />; return <EventContainer />;
case 'globalVar': case 'globalVar':
return <GlobalVarComponent />; return <GlobalVarContainer />;
case 'appCompList': case 'appCompList':
return <AppCompComponent />; return <AppCompComponent />;
case 'myComponents': case 'myComponents':

@ -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…
Cancel
Save