# typeScrpt-react-app

**Repository Path**: joshua_er/type-scrpt-react-app

## Basic Information

- **Project Name**: typeScrpt-react-app
- **Description**: 一个使用TypeScript和React构建现代Web应用的开源项目，提供高质量的组件和工具，助力开发者快速搭建响应式、可维护的应用。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-08
- **Last Updated**: 2026-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ts-react-app 使用说明（read.md）

在线演示地址：https://platform.bigkel.com/
账号：test 密码：test123

## 1. 项目简介

这是一个基于 Vite + React 19 + TypeScript + Ant Design 的后台前端项目。

项目核心特性：
- 登录后业务路由由后端返回的权限菜单在运行时动态生成。
- 使用 Redux Toolkit 管理认证与权限状态。
- 使用 i18next 做国际化。
- 使用 axios 作为请求基础能力。

## 2. 技术栈

- 构建工具：Vite 7
- 前端框架：React 19
- 语言：TypeScript 5
- UI：Ant Design 6 + Pro Components
- 状态管理：Redux Toolkit
- 路由：React Router 7
- 样式：SCSS（含模块化样式）

## 3. 环境要求

- Node.js 18+
- npm 9+

建议先检查版本：

```bash
node -v
npm -v
```

## 4. 安装与启动

安装依赖：

```bash
npm install
```

本地开发：

```bash
npm run dev
```

启动后访问终端中显示的本地地址（默认通常是 http://localhost:5173）。

## 5. 构建与校验

### 5.1 快速打包（默认）

```bash
npm run build
```

说明：
- 当前 `build` 脚本仅执行 `vite build`。
- 适合先出包验证，不会阻塞在 TypeScript 类型检查。

### 5.2 仅做类型检查

```bash
npm run build:typecheck
```

### 5.3 完整构建（类型检查 + 打包）

```bash
npm run build:full
```

### 5.4 代码规范检查

```bash
npm run lint
```

### 5.5 预览生产包

```bash
npm run preview
```

## 6. 关键目录说明

```text
ts-react-app/
├─ public/                 # 静态资源
├─ src/
│  ├─ api/                 # 业务 API 封装
│  ├─ components/          # 通用组件
│  ├─ contexts/            # 主题/语言上下文
│  ├─ i18n/                # 国际化配置与语言包
│  ├─ layout/              # 主布局与菜单相关
│  ├─ pages/               # 页面级模块
│  ├─ routes/              # 路由与动态路由构建
│  ├─ store/               # Redux store 与切片
│  ├─ styles/              # 全局主题样式
│  ├─ types/               # TypeScript 类型声明
│  ├─ ui/                  # 业务 UI 组件
│  └─ utils/               # 工具函数
├─ .env.development        # 开发环境变量
├─ .env.production         # 生产环境变量
├─ vite.config.ts          # Vite 配置
├─ tsconfig.*.json         # TS 配置
└─ package.json            # 项目脚本与依赖
```

## 7. 路由与权限（重要）

- 运行时路由由权限菜单动态构建。
- 后端返回的 `componentPath` 需要与 `src/pages` 中实际文件路径对应。
- `menuType` 中按钮权限不应当作为普通页面菜单处理。

如果你修改了路由、菜单、登录或权限逻辑，建议一起检查：
- routes
- layout
- store/slices 中的权限与认证逻辑

## 8. 国际化说明

- 新增文案建议优先补 i18n key，避免硬编码。
- 新增语言时要同时更新语言资源与语言上下文。
- 可参考项目根目录文档：国际化扩展新语言指南.md。

## 9. 常见问题

### 9.1 为什么 `npm run build` 不做 TS 类型检查？

为了提高出包效率，当前默认脚本已改为快速打包。
如果你需要严格检查，请使用：

```bash
npm run build:full
```

### 9.2 构建出现 chunk 体积警告怎么办？

这是 Vite/Rollup 的常见提示，不一定会导致构建失败。可后续优化：
- 使用动态导入做拆包
- 配置 `manualChunks`
- 调整 `chunkSizeWarningLimit`

## 10. 建议工作流

日常开发建议：

1. `npm run dev` 进行开发联调。
2. 提交前执行 `npm run lint`。
3. 先执行 `npm run build` 快速验证可出包。
4. 发布前执行 `npm run build:full` 做完整校验。