# 前端编码规范索引

> **适用范围**: React 19 + TypeScript 6 + Ant Design 6 + ProComponents
> **版本**: v3.3

---

本目录包含 `front-demo`和`web-ui` 两个前端项目的前端开发规则。生成或修改代码前，先按任务类型读取对应规则。

## 文件清单

| 序号 | 文件名                                             | 主要内容                                                                                 |
| ---- | -------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| 01   | [01-基础规范.md](./01-基础规范.md)                 | 一 ~  技术栈基线、目录结构、命名、编码风格、TypeScript、样式、Vue→React 迁移映射表、总结 |
| 02   | [02-组件规范.md](./02-组件规范.md)                 | React 组件规范（函数组件 / Props / Hook）、上传组件、时间格式化                          |
| 03   | [03-列表规范.md](./03-列表规范.md)                 | ProTable 列表页标准模式（标准模板、列定义规则）                                          |
| 04   | [04-表单规范.md](./04-表单规范.md)                 | Modal / Drawer 使用标准规范（布局分级、标准模板、一栏~四栏布局）                         |
| 05   | [05-路由状态接口规范.md](./05-路由状态接口规范.md) | 路由（动态路由 / 守卫）、Zustand 状态管理、API 接口规范                                  |
| 06   | [06-国际化规范.md](./06-国际化规范.md)             | react-i18next 多语言支持（命名空间、语言包结构、切换）                                   |
| 07   | [07-字典权限规范.md](./07-字典权限规范.md)         | 字典系统（DictTag / getDictOptions）、权限系统（Access / useAccess）                     |
| 08   | [08-性能质量规范.md](./08-性能质量规范.md)         | 性能优化（lazy / memo / useMemo）、代码质量标准（复杂度 / ESLint / 构建）                |
| 09   | [09-常见问题规范.md](./09-常见问题规范.md)         | 项目实际踩坑与解决方案（16 条必读陷阱）                                                  |

---

## 按场景推荐阅读

### 新增普通业务页面

1. `01-基础规范.md` — 熟悉技术栈与目录约定
2. `05-路由状态接口规范.md` — 路由、状态、接口规范
3. `03-列表规范.md` — ProTable 列表页模板
4. `04-表单规范.md` — Modal / Drawer 表单模板
5. `07-字典权限规范.md` — 字典渲染与按钮权限

### 新增列表页

1. `03-列表规范.md` — ProTable 标准模板与列规则
2. `07-字典权限规范.md` — 字典下拉 + 权限按钮
3. `02-组件规范.md` — 时间格式化与上传组件

### 新增表单 / 流程页面

1. `04-表单规范.md` — Modal / Drawer 布局分级与标准模板
2. `05-路由状态接口规范.md` — API 接口规范
3. `09-常见问题规范.md` — 必读陷阱（validateFields、Upload、Tree 等）

### 国际化 / 字典 / 权限模块

1. `06-国际化规范.md` — i18n 命名空间、语言包结构
2. `07-字典权限规范.md` — 字典与权限系统

### 代码评审 / 质量检查

1. `08-性能质量规范.md` — 性能与质量标准
2. `09-常见问题规范.md` — 16 条踩坑清单
3. `01-基础规范.md` — 命名 / 编码风格 / TypeScript 规范

### 从 Vue 迁移到 React

1. `01-基础规范.md` — 熟悉技术栈与目录约定
2. `vue迁移到react规范.md` —  Vue → React 迁移映射表
3. `09-常见问题规范.md` — 常见差异点

---


## 维护说明

- 拆分后的各文件章节号已独立重编号，每份均从「一」开始，便于独立阅读。
- 更新规范时，请同步修改对应拆分文件及本索引。

## 总结

本规范文档涵盖了 React 19 + TypeScript 6 + Ant Design 6 项目的完整开发规范。团队成员必须严格遵守，以确保代码质量和协作效率。

**重要提醒**：
1. 所有新代码必须符合本规范
2. 代码评审时重点检查规范遵守情况
3. 定期更新规范以适应项目发展
4. 遇到规范未覆盖的情况，及时讨论并补充

**新模块自检清单**：

- [ ] 文件路径与后端菜单 path 对齐
- [ ] API、Mock handler、Mock data、菜单、权限码 五处全部更新
- [ ] 所有时间字段用 `dateFormatter` 渲染
- [ ] 所有字典字段用 `<DictTag>` + `valueEnum`
- [ ] 所有按钮用 `<Access code="...">` 包裹
- [ ] Modal 用 `open/id/onSuccess/onCancel` 四件套 + `originData` 合并
- [ ] ProTable 而非手撸 Card+Form+Table
- [ ] `npm run build` 通过
- [ ] `npx eslint <new-files>` 零错误
- [ ] 关键逻辑加中文注释，复杂分支说明「为什么这么写」
- [ ] 是否符合09-常见问题规范.md

---

**文档结束**

*本文档作为前端开发的标准规范，所有开发人员必须严格遵守。*