diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx index 4709aca..18688ef 100644 --- a/src/pages/ideContainer/index.tsx +++ b/src/pages/ideContainer/index.tsx @@ -1,10 +1,10 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import { getUrlParams } from '@/utils/common'; import styles from './style/index.module.less'; import SideBar from './sideBar'; import LogBar from './logBar'; import RightSideBar from './rightSideBar'; -import NavBar from './navBar'; +import NavBar, { NavBarRef } from './navBar'; import ProjectContainer from '@/pages/orchestration/project'; import ApplicationContainer from '@/pages/orchestration/application'; import { Selected } from '@/pages/ideContainer/types'; @@ -45,7 +45,8 @@ function IDEContainer() { const [subMenuData, setSubMenuData] = useState({}); const { menuData } = useSelector((state) => state.ideContainer); const dispatch = useDispatch(); - + const navBarRef = useRef(null); + const getAppList = async () => { const res: any = await getAppListBySceneId({ pageSize: 999, @@ -195,10 +196,10 @@ function IDEContainer() { }; // 处理tab关闭 - const handleTabClose = (path: string) => { + const handleTabClose = (key: string) => { // 从已打开的tab集合中移除 const newOpenedTabs = new Set(openedTabs); - newOpenedTabs.delete(path); + newOpenedTabs.delete(key); setOpenedTabs(newOpenedTabs); // 如果关闭的是当前激活的tab，则重置selected状态 @@ -216,11 +217,28 @@ function IDEContainer() { subMenuData={subMenuData} onMenuSelect={(select) => setSelected(select)} onRefresh={() => getAppList()} + onDeleteApp={(appId) => { + // 从已打开的tab集合中移除被删除的应用 + const newOpenedTabs = new Set(openedTabs); + // 查找并删除与该应用相关的tab + const tabsToDelete = Array.from(newOpenedTabs).filter(key => key?.includes(appId)); + tabsToDelete.forEach(tabKey => newOpenedTabs.delete(tabKey)); + setOpenedTabs(newOpenedTabs); + + // 如果当前选中的tab与被删除的应用相关，则重置selected状态 + if (selected.key && selected.key.includes(appId)) { + setSelected({}); + } + + // 通知NavBar删除对应的tab + navBarRef.current?.deleteTabByKey(`compFlow-${appId}`); + }} />
{/*顶部导航栏*/} void; } -const NavBar: React.FC = ({ selected, menuData, onTabChange, onTabClose }) => { +// 添加ref类型定义 +export type NavBarRef = { + deleteTabByKey: (key: string) => void; +}; + +const NavBar: React.ForwardRefRenderFunction = ({ + selected, + menuData, + onTabChange, + onTabClose + }, ref) => { const [tabs, setTabs] = useState([]); const [activeTab, setActiveTab] = useState(''); @@ -84,6 +94,16 @@ const NavBar: React.FC = ({ selected, menuData, onTabChange, onTabC onTabClose?.(key); }; + // 提供给父组件调用的删除tab方法 + const deleteTabByKey = (key: string) => { + handleDeleteTab(key); + }; + + // 暴露方法给父组件使用 + useImperativeHandle(ref, () => ({ + deleteTabByKey + })); + const handleTabChange = (key: string) => { setActiveTab(key); // 查找对应的tab并通知父组件 @@ -121,4 +141,4 @@ const NavBar: React.FC = ({ selected, menuData, onTabChange, onTabC ); }; -export default NavBar; \ No newline at end of file +export default React.forwardRef(NavBar); diff --git a/src/pages/ideContainer/sideBar.tsx b/src/pages/ideContainer/sideBar.tsx index c96c285..96179a1 100644 --- a/src/pages/ideContainer/sideBar.tsx +++ b/src/pages/ideContainer/sideBar.tsx @@ -42,6 +42,7 @@ interface SideBarProps { identity?: string; onMenuSelect?: (selected: Selected) => void; onRefresh: () => void; + onDeleteApp?: (appId: string) => void; // 添加删除应用的回调函数 } const compTypeMap = { @@ -54,21 +55,11 @@ const AppHandleModal = ({ appInfo, visible, type, onChangeVisible, onClose, onRe const { info } = useSelector(state => state.ideContainer); const [form] = Form.useForm(); - if (appInfo) { - form.setFieldsValue({ - id: appInfo?.id, - name: appInfo?.name, - description: appInfo?.description, - published: appInfo?.published === 1, - logo: 'scene04.png', // 先写死 - sceneId: info.id - }); - } - const onOk = async () => { await form.validate(); const formData = form.getFields(); + // 新增 if (type === 'ADD') { // 新增应用的入参 const params = { @@ -82,7 +73,18 @@ const AppHandleModal = ({ appInfo, visible, type, onChangeVisible, onClose, onRe if (res.code === 200) Message.success('创建成功'); else Message.error(res.message); } + // 编辑 else { + if (appInfo) { + form.setFieldsValue({ + id: appInfo?.id, + name: appInfo?.name, + description: appInfo?.description, + published: appInfo?.published === 1, + logo: 'scene04.png', // 先写死 + sceneId: info.id + }); + } const res: any = await editApp(formData); if (res.code === 200) Message.success('编辑成功'); else Message.error(res.message); @@ -90,8 +92,8 @@ const AppHandleModal = ({ appInfo, visible, type, onChangeVisible, onClose, onRe // 清空表单数据和其他变量数据 form.resetFields(); - onClose(); onRefresh(); + onClose(); }; @@ -153,7 +155,7 @@ const AppHandleModal = ({ appInfo, visible, type, onChangeVisible, onClose, onRe ); }; -const SideBar: React.FC = ({ selected, identity, subMenuData, onMenuSelect, onRefresh }) => { +const SideBar: React.FC = ({ selected, identity, subMenuData, onMenuSelect, onRefresh, onDeleteApp }) => { const [menu, setMenu] = useState([]); const [subMenuWidth, setSubMenuWidth] = useState(300); // 子菜单宽度状态 const [isSubMenuCollapsed, setIsSubMenuCollapsed] = useState(false); // 子菜单收起状态 @@ -330,6 +332,8 @@ const SideBar: React.FC = ({ selected, identity, subMenuData, onMe closable: false, onOk: async () => { await deleteApp(node.dataRef.id); + // 通知父组件应用已被删除 + onDeleteApp?.(node.dataRef.id); onRefresh(); } });