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

PwC RA shared components library

# create-ra-app

一个用于创建带有 PwC RA MainLayout、Sidebar、Breadcrumb 和 PageHeader 组件的 React 应用模板的工具。

## 使用方法

### 使用 npx

```bash
npx create-ra-app my-ra-app
```

### 使用全局安装

```bash
# 全局安装
npm install -g create-ra-app

# 创建应用
create-ra-app my-ra-app
```

## 命令行选项

- `--use-npm`: 使用 npm 而不是 yarn 安装依赖
- `--skip-install`: 跳过依赖安装

示例：

```bash
npx create-ra-app my-ra-app --use-npm
```

## 模板特点

- 集成了 PwC RA MainLayout 组件，提供统一的页面布局
- 集成了 PwC RA Sidebar 组件，提供侧边栏导航
- 集成了 PwC RA Breadcrumb 组件，提供面包屑导航
- 集成了 PwC RA PageHeader 组件，提供统一的页面头部导航栏
- 预配置了 React Router
- 使用 Ant Design 组件库
- 基于 TypeScript 和 Vite
- 包含示例页面和路由配置

## 项目结构

生成的项目结构如下：

```
my-ra-app/
├── public/
│   └── silent-check-sso.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── layouts/
│   │   └── MainLayout.tsx
│   ├── pages/
│   │   ├── AboutPage.tsx
│   │   ├── HomePage.tsx
│   │   └── NotFoundPage.tsx
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   └── main.tsx
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── README.md
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
```

## 开发说明

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

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

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

4. 在 `vite.config.ts` 中配置了 API 代理，根据实际后端服务地址修改 `target` 配置。