|
|
|
@ -242,6 +242,20 @@ const SideBar: React.FC<SideBarProps> = ({
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 监听 subMenuData 和 identity 变化,更新菜单数据
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
if (identity === 'scene') {
|
|
|
|
|
|
|
|
if (Object.keys(subMenuData).length > 0) {
|
|
|
|
|
|
|
|
const newMenu = getMenuData();
|
|
|
|
|
|
|
|
setMenu(newMenu);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
else if (identity === 'componentDevelopment') {
|
|
|
|
|
|
|
|
const newMenu = getMenuData();
|
|
|
|
|
|
|
|
setMenu(newMenu);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}, [subMenuData, identity]);
|
|
|
|
|
|
|
|
|
|
|
|
// 处理子菜单区域的拖拽调整大小
|
|
|
|
// 处理子菜单区域的拖拽调整大小
|
|
|
|
const handleSubMenuResize = (e: MouseEvent, { width }: { width: number }) => {
|
|
|
|
const handleSubMenuResize = (e: MouseEvent, { width }: { width: number }) => {
|
|
|
|
resizeBoxRef.current.style.width = `${width}px`;
|
|
|
|
resizeBoxRef.current.style.width = `${width}px`;
|
|
|
|
@ -276,6 +290,59 @@ const SideBar: React.FC<SideBarProps> = ({
|
|
|
|
onMenuSelect?.({ ...item });
|
|
|
|
onMenuSelect?.({ ...item });
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 监听 selected 状态变化,更新 activeKey
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
if (menu.length > 0 && selected?.parentKey) {
|
|
|
|
|
|
|
|
// 查找匹配的菜单项索引
|
|
|
|
|
|
|
|
const index = menu.findIndex(item => item.key === selected.parentKey);
|
|
|
|
|
|
|
|
if (index !== -1) {
|
|
|
|
|
|
|
|
setActiveKey(index);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}, [selected, menu]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 监听 selected 状态变化,确保子菜单正确显示
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
if (selected?.key && menuData[identity]) {
|
|
|
|
|
|
|
|
// 确保子菜单区域根据selected状态正确展开或收起
|
|
|
|
|
|
|
|
if (['appList', 'appFlow'].includes(selected.parentKey)) {
|
|
|
|
|
|
|
|
// 如果应该显示子菜单但当前是收起状态,则展开
|
|
|
|
|
|
|
|
if (isSubMenuCollapsed) {
|
|
|
|
|
|
|
|
setIsSubMenuCollapsed(false);
|
|
|
|
|
|
|
|
resizeBoxRef.current.style.width = `300px`;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 强制更新filteredMenu以确保显示正确的子菜单
|
|
|
|
|
|
|
|
setSearchValue(''); // 清空搜索值以显示所有项
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}, [selected, menuData, identity]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 当菜单数据变化时更新本地状态
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
if (identity && menuData[identity]) {
|
|
|
|
|
|
|
|
setMenu(menuData[identity]);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}, [menuData, identity]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 当 selected 变化时,检查是否需要更新子菜单数据
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
if (selected?.parentKey === 'appList' && selected?.id) {
|
|
|
|
|
|
|
|
// 检查当前菜单数据是否已加载
|
|
|
|
|
|
|
|
const currentMenu = menuData[identity] || [];
|
|
|
|
|
|
|
|
const appParent = currentMenu.find(item => item.key === 'appList');
|
|
|
|
|
|
|
|
if (appParent && appParent.children) {
|
|
|
|
|
|
|
|
const appItem = appParent.children.find((item: any) => item.id === selected.id);
|
|
|
|
|
|
|
|
if (appItem) {
|
|
|
|
|
|
|
|
// 如果应用项没有子菜单数据或者子菜单数据为空,则获取它
|
|
|
|
|
|
|
|
if (!appItem.children || appItem.children.length === 0) {
|
|
|
|
|
|
|
|
getProjectEnvData(selected);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}, [selected, identity, menuData]);
|
|
|
|
|
|
|
|
|
|
|
|
// 根据搜索值过滤菜单数据
|
|
|
|
// 根据搜索值过滤菜单数据
|
|
|
|
const filteredMenu = useMemo(() => {
|
|
|
|
const filteredMenu = useMemo(() => {
|
|
|
|
if (!searchValue || activeKey === undefined || !menu[activeKey]?.children) {
|
|
|
|
if (!searchValue || activeKey === undefined || !menu[activeKey]?.children) {
|
|
|
|
@ -384,6 +451,7 @@ const SideBar: React.FC<SideBarProps> = ({
|
|
|
|
|
|
|
|
|
|
|
|
// 渲染子菜单
|
|
|
|
// 渲染子菜单
|
|
|
|
const renderMenuItems = (menuItems?: MenuItemType[], parentKey = '0') => {
|
|
|
|
const renderMenuItems = (menuItems?: MenuItemType[], parentKey = '0') => {
|
|
|
|
|
|
|
|
console.log('menuItems sidebar', menuItems);
|
|
|
|
if (menuItems && menuItems.length) {
|
|
|
|
if (menuItems && menuItems.length) {
|
|
|
|
return menuItems.map((item, index) => {
|
|
|
|
return menuItems.map((item, index) => {
|
|
|
|
const key = `${parentKey}-${index}`;
|
|
|
|
const key = `${parentKey}-${index}`;
|
|
|
|
@ -629,6 +697,8 @@ const SideBar: React.FC<SideBarProps> = ({
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
style={{ background: 'transparent' }} // 移除背景色
|
|
|
|
style={{ background: 'transparent' }} // 移除背景色
|
|
|
|
renderExtra={selected?.parentKey === 'appList' ? renderNodeExtra : null}
|
|
|
|
renderExtra={selected?.parentKey === 'appList' ? renderNodeExtra : null}
|
|
|
|
|
|
|
|
// 当selected或activeKey变化时,强制Tree组件重新渲染
|
|
|
|
|
|
|
|
key={`tree-${activeKey}-${selected?.key || 'none'}`}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{renderMenuItems(filteredMenu[activeKey]?.children)}
|
|
|
|
{renderMenuItems(filteredMenu[activeKey]?.children)}
|
|
|
|
</Tree>
|
|
|
|
</Tree>
|
|
|
|
|