后端返回菜單的格式

menuList:[{index: true,name: "",component: "../views/Home",meta: { title: "首頁", requiresAuth: true,roles:['user']},},{path: "/admin",name: "admin",meta: { title: "管理頁", roles: ["admin"] },children: [{path: "/admin/user",name: "User",component: "@/pages/Admin/User",meta: { title: "用戶管理" },children: [{path: "/admin/user",name: "User",component: "@/pages/Admin/User",meta: { title: "用戶管理1" },},],},],},],

遞歸轉換 menuList 為 Ant Design Menu 的 items 格式

const convertMenuListToItems = (menuList: any[]): MenuItem[] => {return menuList.map((menu) => {const item: any = {key: menu.path || menu.name, // 使用 path 或 name 作為 keylabel: menu.meta?.title || menu.name, // 顯示標題};// 如果有子菜單，遞歸處理if (menu.children) {item.children = convertMenuListToItems(menu.children);}// 如果是 index 路由，可以標記特殊 key（可選）if (menu.index) {item.key = 'home'; // 強制指定 key，避免重復}return item;});
};const Menu1: React.FC = () => {const { menuList } = useBoundStore()
const items =convertMenuListToItems(menuList)const [current, setCurrent] = useState('mail');const onClick: MenuProps['onClick'] = (e) => {console.log('click ', e);setCurrent(e.key);};return <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} style={{display:'flex',justifyContent:'center',alignItems:'center'}}/>;
};export default Menu1;