feat(ideContainer): 子菜单增加动态图标赋值,修改原先的empty图片路径

master
钟良源 4 months ago
parent bd89012fb9
commit 6156857bfd

@ -54,7 +54,7 @@ export const menuData1 = [
parentKey: 'event' parentKey: 'event'
}, },
{ {
title: '全局变量', title: '全局参数',
children: null, children: null,
path: 'globalVar', path: 'globalVar',
key: 'globalVar', key: 'globalVar',

@ -109,7 +109,7 @@ function IDEContainer() {
backgroundColor: '#ffffff' backgroundColor: '#ffffff'
}}> }}>
<img <img
src={'/ideContainer/empty.png'} src={'/ideContainer/background/empty.png'}
/> />
<span style={{ <span style={{
fontSize: '20px', fontSize: '20px',

@ -12,7 +12,7 @@ import {
Menu, Menu,
Popconfirm Popconfirm
} from '@arco-design/web-react'; } from '@arco-design/web-react';
import { IconApps, IconMore } from '@arco-design/web-react/icon'; import { IconApps, IconMore, IconDelete, IconEdit } from '@arco-design/web-react/icon';
import { menuData1, menuData2 } from './config/menuData'; import { menuData1, menuData2 } from './config/menuData';
import { IconSearch, IconPlus } from '@arco-design/web-react/icon'; import { IconSearch, IconPlus } from '@arco-design/web-react/icon';
import { Selected } from '@/pages/ideContainer/types'; import { Selected } from '@/pages/ideContainer/types';
@ -180,14 +180,17 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
v.key = `compFlow-${v.id}`; v.key = `compFlow-${v.id}`;
v.path = 'compFlow'; v.path = 'compFlow';
v.parentKey = subMenuKey; v.parentKey = subMenuKey;
v.icon = '/ideContainer/icon/app.png';
v.children = [ v.children = [
{ {
title: '事件', title: '事件',
children: null children: null,
icon: '/ideContainer/icon/list.png'
}, },
{ {
title: '组件列表', title: '组件列表',
children: null children: null,
icon: '/ideContainer/icon/list.png'
} }
]; ];
}); });
@ -243,16 +246,19 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
children.children[0].children = res.data.events.map(item => { children.children[0].children = res.data.events.map(item => {
return { return {
title: item, title: item,
children: null children: null,
icon: '/ideContainer/icon/list.png'
}; };
}); });
children.children[1].children = Object.keys(res.data.compList).map(item => { children.children[1].children = Object.keys(res.data.compList).map(item => {
return { return {
title: compTypeMap[item], title: compTypeMap[item],
icon: item === 'appComponent' ? '/ideContainer/icon/app1.png' : '/ideContainer/icon/complexApp.png',
children: res.data.compList[item].map(item => { children: res.data.compList[item].map(item => {
return { return {
title: item, title: item,
children: null children: null,
icon: '/ideContainer/icon/tool.png'
}; };
}) })
}; };
@ -265,6 +271,7 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
// 同时更新本地 menu 状态以触发重新渲染 // 同时更新本地 menu 状态以触发重新渲染
setMenu(prevMenu => { setMenu(prevMenu => {
console.log('prevMenu:', prevMenu);
const newMenu = [...prevMenu]; const newMenu = [...prevMenu];
newMenu[activeKey] = { ...newMenu[activeKey], children: currentMenu[index].children }; newMenu[activeKey] = { ...newMenu[activeKey], children: currentMenu[index].children };
return newMenu; return newMenu;
@ -284,13 +291,23 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
}; };
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
return ( return (
<TreeNode {...treeNodeProps} title={item.title} key={key}> <TreeNode
{...treeNodeProps}
title={item.title}
key={key}
icon={item?.icon ? <img src={item.icon as string} style={{ width: 14, height: 14 }} /> : null}
>
{renderMenuItems(item.children, key)} {renderMenuItems(item.children, key)}
</TreeNode> </TreeNode>
); );
} }
else { else {
return <TreeNode {...treeNodeProps} title={item.title} key={key} />; return (<TreeNode
{...treeNodeProps}
title={item.title}
key={key}
icon={item?.icon ? <img src={item.icon as string} style={{ width: 14, height: 14 }} /> : null}
/>);
} }
}); });
} }
@ -317,7 +334,11 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
setModalType('EDIT'); setModalType('EDIT');
setShowModal(true); setShowModal(true);
}} }}
> >
<span style={{ color: 'rgba(161, 165, 194, 1)' }}>
<IconEdit style={{ marginRight: 6 }} />
</span>
</MenuItem> </MenuItem>
<MenuItem <MenuItem
key="deleteApp" key="deleteApp"
@ -339,7 +360,10 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
}); });
}} }}
> >
<span style={{ color: 'rgba(255, 82, 25, 1)' }}>
<IconDelete style={{ marginRight: 6 }} />
</span>
</MenuItem> </MenuItem>
</Menu> </Menu>
); );

Loading…
Cancel
Save