import React, { useState } from "react"; import { Outlet, useNavigate, useLocation } from "react-router-dom"; import { Layout, Menu, Button, Flex, Dropdown, Steps } from "antd"; import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LoginOutlined, ProfileOutlined, NodeExpandOutlined, LaptopOutlined } from "@ant-design/icons"; import { useAuth } from "../context/AuthContext"; import './Layout.css'; const { Header, Sider, Content } = Layout; export default function LayoutPage() { const { logout, user } = useAuth(); const [collapsed, setCollapsed] = useState(true); const navigate = useNavigate(); const location = useLocation(); const menuItems = [ { key: "1", icon: , label: "工作台", path: "/flow" }, { key: "2", icon: , label: "节点管理", path: "/client" }, ]; const selectedKey = menuItems.find(item => location.pathname.startsWith(item.path))?.key || ""; return ( { const item = menuItems.find(i => i.key === key); if (item) navigate(item.path); }} />
{/* 渲染子路由 */}
); } const Logo = ({ collapsed }) => { return
{collapsed ? "F" : "FLOW"}
} const HeaderRight = ({ logout, navigate, user }) => { const items = [ { label: '用户信息', key: '2', icon: }, { type: 'divider', }, { label: '退出登录', key: '1', icon: }, ]; const onClick = ({ key }) => { if (key === '1') { logout(); } if (key === '2') { navigate('/user/detail') } } return ( e.preventDefault()}> ) }