frontend-architecture-governance

前端架构治理

使用目标

统一管理端前端项目的目录、路由、API、状态、组件和页面开发规范，让后续页面按同一套架构推进。

适用场景

• 用户要求“统一前端架构”“整理目录”“重构组件”“统一请求”“统一表格/表单”。
• 多个页面重复实现相同表格、表单、弹窗或 API 调用。
• 菜单、权限、路由和页面结构不一致。
• 请求封装、错误处理、token、状态管理不统一。

工作流程

1. 盘点现状：
   • src/app 路由
   • src/api API 层
   • src/components 公共组件
   • src/constants/menuConfig.tsx
   • src/store
   • src/utils/request.ts
2. 找出重复和不一致点。
3. 设计目标架构和迁移计划。
4. 分阶段治理，每阶段可验证。
5. 未经用户要求，不做大范围重构。

统一范围

• 路由和菜单：App Router、dashboard layout、权限码。
• API 层：模块化 API、types、统一请求和错误处理。
• 页面模式：列表页、编辑页、详情页、导入导出页。
• 公共组件：ProDataTable、UploadImage、布局组件、业务弹窗。
• 状态管理：登录用户、权限、菜单、全局缓存。
• 样式规范：Semi UI 优先，避免页面内大段临时样式。

输出建议

• 当前架构现状。
• 不一致点和风险。
• 目标架构规则。
• 分阶段改造计划。
• 影响页面和验证方式。