@aloudata/big-framework

Aloudata Big Framework 是一个基于React的微前端框架和组件库，提供了完整的应用管理、路由管理、权限控制等功能。

安装

npm install @aloudata/big-framework
# 或
yarn add @aloudata/big-framework

同等依赖

请确保您的项目中已安装以下依赖：

npm install react react-dom react-router-dom

基本使用

1. 导入主应用组件

import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from '@aloudata/big-framework';
import '@aloudata/big-framework/styles';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(<App />);

2. 使用单独的组件

import {
  MainLayout,
  AppRouter,
  PermissionGate,
  NoPermissionPage,
} from '@aloudata/big-framework';

function MyApp() {
  return (
    <MainLayout>
      <PermissionGate permissions={['read', 'write']}>
        <AppRouter />
      </PermissionGate>
    </MainLayout>
  );
}

3. 使用Hooks

import {
  useAppManager,
  useRouteManager,
  usePermissions,
} from '@aloudata/big-framework';

function MyComponent() {
  const appManager = useAppManager();
  const routeManager = useRouteManager();
  const { hasPermission } = usePermissions();

  // 使用管理器功能
  const apps = appManager.getStatistics();
  const routes = routeManager.getStatistics();

  return <div>{hasPermission('admin') && <AdminPanel />}</div>;
}

API 文档

组件

• App - 主应用组件，包含完整的应用初始化逻辑
• MainLayout - 主布局组件
• AppRouter - 应用路由组件
• PermissionGate - 权限网关组件
• NoPermissionPage - 无权限页面组件
• ErrorBoundary - 错误边界组件
• FullScreenLoading - 全屏加载组件

Hooks

• useAppManager - 应用管理器Hook
• useRouteManager - 路由管理器Hook
• usePermissions - 权限管理Hook
• useIframeMessenger - Iframe消息通信Hook

管理器

• AppManager - 统一应用管理器
• RouteManager - 路由管理器

特性

• 🚀 基于React 18和TypeScript
• 📦 支持微前端应用集成
• 🔒 完整的权限控制系统
• 🎨 丰富的UI组件
• 📱 响应式设计
• 🔧 完整的TypeScript支持

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

# 发布
npm publish

许可证

MIT