fec-code-reviewlisted

# 前端代码评审 ## 用途 从架构、类型安全、可访问性、样式一致性、性能和可测试性等 8 个维度审查前端代码质量，输出分级评审报告。 ## 流程 1. 先读项目事实：package scripts、框架、目录约定、最近 diff、现有测试和相关规则。 2. 按风险找问题，而不是按个人偏好挑风格；每个发现都要能指向具体文件、行号和用户影响。 3. 用五轴收敛结论：正确性、可维护性、类型/接口、用户体验、验证覆盖。 4. 对安全、无障碍、E2E、性能等深水区只做初筛；需要专项调查时明确分流。 5. 多维评审时先按职责拆分，再合并同类发现；同一文件同一根因只保留一条主发现，避免重复噪声。 6. 报告先列阻塞问题，再列建议项；没有证据的问题不要写成确定结论。 ## 多维评审编排 当改动跨越多个质量维度时，按“主评审 + 专项分流”组织，而不是让所有维度重复检查同一处代码。 | 维度 | 触发条件 | 分流边界 | | ------------------- | ---------------------------------------------------- | ------------------------------------ | | TypeScript 工程与类型契约 | DTO、泛型、公共类型、类型守卫、`any`、断言、tsconfig | 深入类型建模和 TS 配置交给 TypeScript 流程 | | 状态管理 | 状态归属、全局 store、URL 状态、派生状态、跨页面同步 | 状态选型与迁移交给状态管理专项流程 | | 安全 | 用户输入、HTML 渲染、token、上传、第三方脚本 | 漏洞级分析交给安全专项流程 | | 无障碍 | 弹窗、菜单、表单、键盘操作、焦点管理 | WCAG 细查交给无障碍专项流程 | | 性能 | 大列表、重依赖、重复请求、长任务、包体积 | 性能证据与预算交给性能专项流程 | | E2E | 关键用户路径、登录态、支付、跨页面流程 | 浏览器用例与 trace 交给 E2E 专项流程 | 发现合并规则： - 同一根因出现在多个维度时，只保留最高严重级别，并在 `Dimension` 中列出相关维度。 - 同一文件多处重复模式，合并为一条模式级发现，列出代表性位置。 - 置信度不足的问题放入 Open Questions，不升级为阻塞项。 - 自动化可稳定捕获的格式问题交给 lint/format，不作为人工评审主发现。 ## 评审维度 1. 架构 - 组件边界是否清晰 - 展示逻辑与业务逻辑是否分离 - 是否有可复用抽象 - 是否存在上帝组件 2. 类型安全 - 是否存在不必要的 `any` - props 类型是否明确 - hooks/composables 返回值是否稳定 - 在可行情况下 API 契约是否有类型约束 3. 渲染与状态 - 是否存在不必要的重复渲染 - key 的使用是否稳定