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 (
: }
onClick={() => setCollapsed(!collapsed)}
/>
{/* 渲染子路由 */}
);
}
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()}>
}
>
{user?.username}
)
}