From 95a132c061773a7f2713d51ae4fb5d5ea51dabb1 Mon Sep 17 00:00:00 2001 From: ZLY Date: Sun, 28 Sep 2025 10:53:38 +0800 Subject: [PATCH] =?UTF-8?q?feat(ideContainer):=20=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E5=BA=94=E7=94=A8=E5=88=A0=E9=99=A4=E6=97=B6=E8=87=AA=E5=8A=A8?= =?UTF-8?q?=E5=85=B3=E9=97=AD=E7=9B=B8=E5=85=B3=E6=A0=87=E7=AD=BE=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 引入 useRef 和 useImperativeHandle 支持父子组件通信 - 添加 NavBarRef 类型定义及 deleteTabByKey 方法 -通过 ref 调用 NavBar 的删除 tab 方法 - 在 SideBar 中新增 onDeleteApp 回调处理应用删除逻辑- 更新 tab 关闭逻辑以支持根据 key 删除 - 表单提交后调整 onRefresh 和 onClose 执行顺序- 删除应用时同步清理已打开的标签页状态 --- src/pages/ideContainer/index.tsx | 28 +++++++++++++++++++++++----- src/pages/ideContainer/navBar.tsx | 26 +++++++++++++++++++++++--- src/pages/ideContainer/sideBar.tsx | 30 +++++++++++++++++------------- 3 files changed, 63 insertions(+), 21 deletions(-) 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(); } });