@fusion-ops/layout

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

✨ 特性

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

📦 安装

npm install @fusion-ops/layout
# 或
yarn add @fusion-ops/layout
# 或
pnpm add @fusion-ops/layout

🔧 依赖要求

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

🚀 快速开始

基础用法

import React from 'react';
import { App, ConfigProvider } from 'antd';
import { BaseLayout } from '@fusion-ops/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 框架中使用

import { App, ConfigProvider } from 'antd';
import { BaseLayout } from '@fusion-ops/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：

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();

标签页管理

支持动态标签页管理：

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

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

🎨 主题定制

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

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

🔐 权限控制

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

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

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

📱 响应式设计

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

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

🛠️ 开发

本地开发

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

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建项目
npm run build

发布

# 构建并发布
npm run release

📄 许可证

MIT License

🤝 贡献

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

📞 支持

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

• 提交 Issue
• 发送邮件至 [[email protected]]
• 查看文档 [https://docs.fusion-aiops.com]

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