中文 | English

安装

npm install antd-app-layout

在线演示

本地启动预览：

npm run preview

依赖要求

| 依赖 | 版本 | |------|------| | react | >=18.2.0 | | react-dom | >=18.2.0 | | antd | >=6.0.0 |

使用示例

import { AppLayout } from "antd-app-layout";
import type { MenuProps } from "antd";
import {
  DatabaseOutlined,
  DesktopOutlined,
  HomeOutlined,
} from "@ant-design/icons";

const menuItems: MenuProps["items"] = [
  { key: "/home", label: "首页", icon: <HomeOutlined /> },
  {
    key: "/data",
    label: "基础数据",
    icon: <DatabaseOutlined />,
    children: [
      { key: "/customer_list", label: "客户管理" },
      { key: "/product_list", label: "产品管理" },
    ],
  },
  {
    key: "/system",
    label: "系统设置",
    icon: <DesktopOutlined />,
    children: [
      { key: "/role_list", label: "角色权限" },
      { key: "/user_list", label: "用户管理" },
    ],
  },
];

function Dashboard() {
  const [activeKey, setActiveKey] = useState("/home");

  return (
    <AppLayout
      menuItems={menuItems}
      menuActiveKey={activeKey}
      onMenuClick={({ key }) => setActiveKey(key)}
      headerExtra={
        <Button type="text" icon={<UserOutlined />}>Admin</Button>
      }
      siderHeader={
        <Flex align="center" gap={8} style={{ height: 64, padding: "0 16px" }}>
          <AppstoreOutlined style={{ color: "#fff", fontSize: 24 }} />
          <span style={{ color: "#fff", fontSize: 18, fontWeight: "bold" }}>MyApp</span>
        </Flex>
      }
      pageContent={<div style={{ padding: 24 }}>页面内容</div>}
    />
  );
}

配合 react-router-dom

import { AppLayout } from "antd-app-layout";
import { Outlet, useLocation, useNavigate } from "react-router-dom";

function AppLayoutWrapper() {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <AppLayout
      menuItems={menuItems}
      menuActiveKey={location.pathname}
      onMenuClick={({ key }) => navigate(key)}
      pageContent={<Outlet />}
    />
  );
}

侧边栏底部插槽

<AppLayout
  menuItems={menuItems}
  siderFooter={
    <Flex align="center" gap={8} style={{ padding: "12px 16px", borderTop: "1px solid rgba(255,255,255,0.08)" }}>
      <Avatar size={28} style={{ background: "rgba(255,255,255,0.15)" }}>U</Avatar>
      <div>
        <div style={{ color: "rgba(255,255,255,0.85)", fontSize: 13 }}>用户名</div>
        <div style={{ color: "rgba(255,255,255,0.35)", fontSize: 11 }}>[email protected]</div>
      </div>
    </Flex>
  }
  // ...
/>

API

AppLayoutProps

| 属性 | 类型 | 说明 | |------|------|------| | menuItems | MenuProps["items"] | 菜单配置，直接透传 Ant Design Menu 的 items 格式 | | menuActiveKey | string | 当前选中的菜单项 key，对应当前路由 | | onMenuClick | MenuProps["onClick"] | 菜单点击回调 | | headerExtra | ReactNode | 顶栏右侧功能插槽 | | siderHeader | ReactNode | 侧边栏顶部内容，未传时显示默认占位 | | siderFooter | ReactNode | 侧边栏底部内容，常用于用户信息、版本号等 | | pageContent | ReactNode | 页面内容区域 |

导出类型

| 导出 | 说明 | |------|------| | AppLayout | 应用布局组件 | | AppLayoutProps | 组件 Props 类型 |

功能特性

• 可折叠侧边栏：点击顶栏左侧按钮完全隐藏/显示侧边栏，带平滑动画过渡
• 可配置菜单：菜单项通过 menuItems prop 传入，支持两级嵌套和任意图标
• 路由联动：menuActiveKey 驱动菜单高亮和子菜单自动展开
• 顶栏插槽：headerExtra 支持自由放置通知、用户菜单、设置入口等
• 侧边栏插槽：顶部 siderHeader 和底部 siderFooter 两个插槽，适应品牌展示和用户信息
• 深色主题：侧边栏默认 Ant Design 深色主题
• 内容区滚动：pageContent 超出容器高度时自动内部滚动，不影响布局

本地开发

git clone https://github.com/Czw96/antd-app-layout.git
cd antd-app-layout
npm install

npm run dev         # 监听构建
npm run build       # 生产构建
npm run preview     # 启动预览页面
npm run lint        # 代码检查

许可证

MIT © Czw96