feat(ideContainer): 引入事件容器并优化侧边栏显示逻辑

- 导入 EventContainer 组件替换原有的事件占位组件
- 新增 showSubMenu 属性控制子菜单显示状态
- 根据选中项动态控制右侧边栏及日志栏的显示
- 添加 selected 状态变化时的日志输出便于调试
- 优化 NavBar 中 tab 删除逻辑,确保关联应用被正确清理
- 调整部分 UI 渲染条件以提升用户体验一致性
master
钟良源 4 months ago
parent 566a8ed287
commit 4a310d573f

@ -5,13 +5,15 @@ import SideBar from './sideBar';
import LogBar from './logBar';
import RightSideBar from './rightSideBar';
import NavBar, { NavBarRef } from './navBar';
import ProjectContainer from '@/pages/orchestration/project';
import ApplicationContainer from '@/pages/orchestration/application';
import { Selected } from '@/pages/ideContainer/types';
import { updateInfo } from '@/store/ideContainer';
import { useDispatch, useSelector } from 'react-redux';
import { getAppListBySceneId } from '@/api/apps';
import ProjectContainer from '@/pages/orchestration/project';
import ApplicationContainer from '@/pages/orchestration/application';
import EventContainer from '@/pages/orchestration/event';
type UrlParamsOptions = {
identity?: string;
[key: string]: string
@ -19,7 +21,6 @@ type UrlParamsOptions = {
const CompListComponent = () => <div style={{ height: '100%', width: '100%' }}></div>;
const AppInstanceComponent = () => <div style={{ height: '100%', width: '100%' }}></div>;
const EventComponent = () => <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 MyComponents = () => <div style={{ height: '100%', width: '100%' }}></div>;
@ -68,6 +69,7 @@ function IDEContainer() {
// 当selected.path变化时添加到已打开的tab集合中
useEffect(() => {
console.log('selected:', selected);
if (selected.key) {
setOpenedTabs(prev => new Set(prev).add(selected.key!));
}
@ -135,7 +137,7 @@ function IDEContainer() {
case 'appInstance':
return <AppInstanceComponent />;
case 'event':
return <EventComponent />;
return <EventContainer />;
case 'globalVar':
return <GlobalVarComponent />;
case 'appCompList':
@ -215,6 +217,7 @@ function IDEContainer() {
selected={selected}
identity={urlParams.identity}
subMenuData={subMenuData}
showSubMenu={!['event', 'globalVar', 'appCompList'].includes(selected.key)}
onMenuSelect={(select) => setSelected(select)}
onRefresh={() => getAppList()}
onDeleteApp={(appId) => {
@ -247,11 +250,12 @@ function IDEContainer() {
{/*页面渲染*/}
{renderContent()}
{/*底部日志栏*/}
{urlParams.identity !== 'componentDevelopment' && <LogBar></LogBar>}
{urlParams.identity !== 'componentDevelopment' && !['event', 'globalVar', 'appCompList'].includes(selected.key) &&
<LogBar></LogBar>}
</div>
</div>
<RightSideBar></RightSideBar>
{!['event', 'globalVar', 'appCompList'].includes(selected.key) && <RightSideBar></RightSideBar>}
</div>
</>
);

@ -40,6 +40,7 @@ interface SideBarProps {
subMenuData: any;
selected?: any;
identity?: string;
showSubMenu: boolean;
onMenuSelect?: (selected: Selected) => void;
onRefresh: () => void;
onDeleteApp?: (appId: string) => void; // 添加删除应用的回调函数
@ -156,7 +157,15 @@ const AppHandleModal = ({ appInfo, visible, type, onChangeVisible, onClose, onRe
);
};
const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMenuSelect, onRefresh, onDeleteApp }) => {
const SideBar: React.FC<SideBarProps> = ({
selected,
identity,
subMenuData,
showSubMenu,
onMenuSelect,
onRefresh,
onDeleteApp
}) => {
const [menu, setMenu] = useState<MenuItemType[]>([]);
const [subMenuWidth, setSubMenuWidth] = useState(300); // 子菜单宽度状态
const [isSubMenuCollapsed, setIsSubMenuCollapsed] = useState(false); // 子菜单收起状态
@ -318,6 +327,10 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
Object.keys(subMenuData).length > 0 && setMenu(getMenuData());
}, [subMenuData, identity]);
useEffect(() => {
setSubMenuWidth(showSubMenu ? 300 : 0);
}, [showSubMenu]);
// 渲染节点的额外操作按钮
const renderNodeExtra = (node) => {
// 只有当 node.dataRef.id 存在时才渲染操作按钮

Loading…
Cancel
Save