@pwc-ra/components/templates/create-ra-app/template/README.md

PwC RA shared components library

# PwC RA 应用模板

这是一个使用 PwC RA Components 库构建的 React 应用模板，集成了 MainLayout、Sidebar、Breadcrumb 和 PageHeader 组件。

## 功能特点

- 统一的主布局结构 (MainLayout)
- 可配置的侧边栏导航 (Sidebar)
- 自动生成的面包屑导航 (Breadcrumb)
- 统一的页面头部导航 (PageHeader)
- 产品菜单切换
- 用户信息显示
- 租户选择
- 全局状态管理

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

## 项目结构

```
src/
├── assets/        # 静态资源
├── components/    # 公共组件
├── layouts/       # 布局组件
├── pages/         # 页面组件
├── App.css        # 应用样式
├── App.tsx        # 应用入口组件
├── index.css      # 全局样式
└── main.tsx       # 入口文件
```

## 技术栈

- React
- TypeScript
- Ant Design
- React Router
- Vite

## 配置说明

### 代理配置

在 `vite.config.ts` 中配置了 API 代理：

```js
server: {
  port: 3000,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    },
    '/auth': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    }
  }
}
```

根据实际后端服务地址修改 `target` 配置。

## 注意事项

1. MainLayout 组件提供了整体应用布局结构，包含 Sidebar、Breadcrumb 和 PageHeader。

2. Sidebar 组件需要配置菜单数据，可以通过 props 传入或从 API 获取。

3. Breadcrumb 组件会根据当前路由自动生成面包屑导航。

4. PageHeader 组件需要配置 Keycloak 认证服务，默认会从 `/api/public/keycloak-config` 获取配置信息。

5. 产品菜单数据默认从 `/api/public/product-menu` 获取，需要后端提供相应的 API。

6. 用户信息默认从 `/auth/users/me` 获取，需要后端提供相应的 API。