npm package: @fanghongbo/react-admin-layout
Description: 基于 Ant Design 6.x 的企业级中后台布局组件库，提供完整的布局解决方案。
Latest version: 1.7.8

#

基于 Ant Design 6.x 的企业级中后台布局组件库，提供完整的布局解决方案。

## ✨ 特性

- 🎨 **现代化设计** - 基于 Ant Design 6.x，提供优雅的视觉体验
- 📱 **响应式布局** - 支持桌面端和移动端自适应
- 🔐 **权限控制** - 内置菜单权限管理，支持细粒度权限控制
- 🏷️ **多标签页** - 支持多标签页管理，提升用户体验
- 🎯 **路由集成** - 与 React Router 深度集成，支持动态路由
- 💾 **状态管理** - 基于 Zustand 的轻量级状态管理
- 🎛️ **可定制** - 丰富的配置选项，满足不同业务需求
- 📦 **TypeScript** - 完整的 TypeScript 支持

## 📦 安装

```bash
npm install @fanghongbo/react-admin-layout
# 或
yarn add @fanghongbo/react-admin-layout
# 或
pnpm add @fanghongbo/react-admin-layout
```

## 🔧 依赖要求

- React >= 19.2.0
- React DOM >= 19.2.0
- Ant Design >= 6.0.0

## 🚀 快速开始

### 基础用法

```tsx
import React from 'react';
import { App, ConfigProvider } from 'antd';
import { BaseLayout } from '@fanghongbo/react-admin-layout';

export default function App() {
  return (
    <ConfigProvider>
      <App>
        <BaseLayout
          siteConfig={{
            siteName: '统一认证系统',
            siteLogo: '/logo.png',
          }}
          userInfo={{
            userId: 'user123',
            username: '张三',
            avatar: '/avatar.jpg',
          }}
          routes={clientRoutes}
          permissions={userPermissions}
          onLogout={() => {
            // 处理用户登出
            console.log('用户登出');
          }}
        />
      </App>
    </ConfigProvider>
  );
}
```

### 在 Umi 框架中使用

```tsx
import { App, ConfigProvider } from 'antd';
import { BaseLayout } from '@fanghongbo/react-admin-layout';
import { useModel, useAppData } from '@umijs/max';

export default function Layout() {
  const model = useModel('@@initialState');
  const initialState = model.initialState;
  const permissions = initialState?.currentUser?.permissions as string[];
  const { clientRoutes } = useAppData();

  return (
    <ConfigProvider>
      <App>
        <BaseLayout
          siteConfig={{
            siteName: '统一认证系统',
          }}
          userInfo={{
            userId: initialState?.currentUser?.id,
            username: initialState?.currentUser?.realName,
          }}
          routes={clientRoutes}
          permissions={permissions}
          onLogout={() => {
            // 用户登出回调
          }}
        />
      </App>
    </ConfigProvider>
  );
}
```

## 📚 组件说明

### BaseLayout

主要的布局组件，提供完整的页面布局结构。

#### Props

| 参数             | 说明             | 类型                                                      | 默认值  |
| ---------------- | ---------------- | --------------------------------------------------------- | ------- |
| siteConfig       | 站点配置信息     | `{ siteName?: string; siteLogo?: string }`                | -       |
| userInfo         | 用户信息         | `{ userId?: string; username?: string; avatar?: string }` | -       |
| routes           | 系统路由配置     | `any[]`                                                   | -       |
| permissions      | 用户权限列表     | `any[]`                                                   | -       |
| onLogout         | 登出回调函数     | `() => void`                                              | -       |
| onNavigateChange | 路由跳转回调     | `(path: string) => void`                                  | -       |
| showHomeButton   | 是否显示首页按钮 | `boolean`                                                 | `false` |

### PageContainer

页面容器组件，用于包装页面内容。

#### Props

| 参数           | 说明             | 类型                  | 默认值  |
| -------------- | ---------------- | --------------------- | ------- |
| title          | 页面标题         | `string \| ReactNode` | -       |
| subTitle       | 页面副标题       | `string \| ReactNode` | -       |
| extra          | 页面额外内容     | `ReactNode`           | -       |
| children       | 页面内容         | `ReactNode`           | -       |
| loading        | 加载状态         | `boolean`             | `false` |
| showPageHeader | 是否显示页面头部 | `boolean`             | `true`  |
| keepalive      | 是否开启页面缓存 | `string`              | -       |
| name           | 页面缓存名称     | `string`              | -       |

### 状态管理

组件库使用 Zustand 进行状态管理，提供以下 API：

```tsx
import {
  useStore,
  getMenus,
  getRoutes,
  getMenuCollapsed,
} from '@fusion-ops/layout';

// 使用状态
const menus = useStore((state) => state.menus);
const routes = useStore((state) => state.routes);
const menuCollapsed = useStore((state) => state.menuCollapsed);

// 获取状态
const menus = getMenus();
const routes = getRoutes();
const isCollapsed = getMenuCollapsed();
```

### 标签页管理

支持动态标签页管理：

```tsx
import { updateTabName } from '@fusion-ops/layout';

// 更新标签页名称
updateTabName('新的标签页名称');
```

## 🎨 主题定制

组件库支持通过 CSS 变量进行主题定制：

```css
:root {
  --site-header-height: 64px;
  --site-sider-width: 208px;
  --site-sider-collapsed-width: 64px;
  --site-primary-color: #1890ff;
}
```

## 🔐 权限控制

组件库内置权限控制机制，支持基于权限的菜单显示：

```tsx
// 路由配置示例
const routes = [
  {
    path: '/admin',
    name: '系统管理',
    permissions: ['admin'],
    routes: [
      {
        path: '/admin/users',
        name: '用户管理',
        permissions: ['admin.users'],
      },
    ],
  },
];

// 用户权限
const permissions = ['admin', 'admin.users'];
```

## 📱 响应式设计

组件库支持响应式设计，在不同屏幕尺寸下自动调整布局：

- 桌面端：完整布局，支持侧边栏展开/收起
- 移动端：自动收起侧边栏，支持抽屉式菜单

## 🛠️ 开发

### 本地开发

```bash
# 克隆项目
git clone <repository-url>

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建项目
npm run build
```

### 发布

```bash
# 构建并发布
npm run release
```

## 📄 许可证

[MIT License](./LICENSE)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

## 📞 支持

如有问题，请通过以下方式联系：

- 提交 Issue

---

基于 Ant Design 构建，为 React Admin 平台提供强大的布局解决方案。