You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import styles from './style/index.module.less';
|
|
import SideBar from './sideBar';
|
|
import LogBar from './logBar';
|
|
import RightSideBar from './rightSideBar';
|
|
|
|
interface Selected {
|
|
currentPath?: string;
|
|
currentKey?: string;
|
|
}
|
|
|
|
// 假设您有这些组件
|
|
const AppFlowComponent = () => <div style={{ height: '70vh', width: '100%' }}>应用编排</div>;
|
|
const CompListComponent = () => <div style={{ height: '70vh', width: '100%' }}>组件列表</div>;
|
|
const AppInstanceComponent = () => <div style={{ height: '70vh', width: '100%' }}>应用实例</div>;
|
|
const EventComponent = () => <div style={{ height: '70vh', width: '100%' }}>事件</div>;
|
|
const GlobalVarComponent = () => <div style={{ height: '70vh', width: '100%' }}>全局变量</div>;
|
|
|
|
function IDEContainer() {
|
|
|
|
const [selected, setSelected] = useState<Selected>({});
|
|
|
|
// 根据选中的菜单项渲染对应组件
|
|
const renderContent = () => {
|
|
switch (selected.currentPath) {
|
|
case 'appFlow':
|
|
return <AppFlowComponent />;
|
|
case 'compList':
|
|
return <CompListComponent />;
|
|
case 'appInstance':
|
|
return <AppInstanceComponent />;
|
|
case 'event':
|
|
return <EventComponent />;
|
|
case 'globalVar':
|
|
return <GlobalVarComponent />;
|
|
default:
|
|
return <AppFlowComponent />;
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
<div className={styles.IDEContainer}>
|
|
<SideBar
|
|
onMenuSelect={(select) => setSelected(select)}
|
|
selectedKey={selected.currentKey}
|
|
/>
|
|
<div className={styles.content}>
|
|
<div className={styles.mainContent}>
|
|
{renderContent()}
|
|
</div>
|
|
<LogBar></LogBar>
|
|
</div>
|
|
|
|
<RightSideBar></RightSideBar>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default IDEContainer; |