bulls-cows yy-frontend-review
描述
对前端项目 git 变动文件进行代码审核，覆盖 Vue2/Vue3/React/原生 JS/TS/CSS 等技术栈，优先审查变更行及必要上下文，按严重程度输出问题描述、影响和修复建议。
审核覆盖类型安全、状态管理（Pinia/Redux Toolkit/Zustand）、TypeScript 类型质量等现代前端关注点。
核心原则：默认只审核，不修改代码；只有用户明确要求修复时，才进入代码修改流程。
使用场景
- 用户要求审核前端代码、前端代码 review、前端代码检查
- 用户提到"审核前端改动"、"review 前端代码"、"检查前端代码质量"
- 用户指定前端文件或目录范围，要求检查其中的代码质量
- 用户要求审核 UI 组件、页面布局、样式实现
- 用户说"帮我看看这几个 vue/react 文件"、"review 一下组件改动"
- PR 审核、合并前审核、提交前检查，且变更内容为前端代码
不应触发：
- 用户要求审核后端代码
- 用户要求审核全栈项目但未明确指定前端部分
- 用户要求直接修改代码（应使用其他优化或修复技能）
- 用户只是询问某个前端问题
- 用户要求生成 git 提交信息
- 用户要求运行构建、测试、部署或自动修复流程
指令
步骤 1. 获取审核目标
按以下规则获取需要审核的文件。
决策分支：
- 用户指定文件或目录：优先使用用户指定范围，递归收集支持的前端文件
- 用户未指定范围：使用 git 命令获取未暂存和已暂存的变更文件，并合并去重
- 无匹配前端文件：回复"当前没有需要审核的前端代码变更文件。"并终止
默认使用以下命令获取 git 变更：
git diff --name-only HEAD
git diff --cached --name-only
支持的前端文件类型：
- 组件与脚本：
.js、.jsx、.ts、.tsx、.vue - 样式文件：
.css、.scss、.less - 模板文件：
.html
默认排除以下文件和目录：
- 依赖与构建产物：
node_modules/、dist/、build/、coverage/、.next/、.nuxt/、.output/ - 锁文件与生成文件：
package-lock.json、pnpm-lock.yaml、yarn.lock、*.min.js、*.generated.* - 二进制文件、图片、字体、压缩包、快照文件
大变更量处理：
变更文件超过 20 个时，按以下优先级分层审核：
- 核心逻辑：组件、页面、路由、状态管理（优先审核）
- 支撑代码：工具函数、类型定义、配置文件
- 样式文件：CSS/SCSS/Less
- 其他：HTML 模板、静态资源引用
如果变更量超出上下文窗口，告知用户变更范围过大，建议分批审核或缩小指定范围。
步骤 2. 确定审核范围
优先审查 diff 变更行，并按需读取上下文。
决策分支：
- 变更行可独立判断问题：只基于变更行和相邻上下文（上下各 3 行）输出结论
- 问题依赖组件上下文：读取完整组件后再判断
- 问题依赖跨文件调用链：追踪相关调用链后再判断
- 历史遗留问题未被本次改动引入：不作为本次审核阻断项，在"补充观察"中简要说明
- 上下文不足无法确认：标记为"需人工确认"，说明缺失信息，不编造结论
上下文读取规则：
- 单行改动：读取前后各 3 行
- 函数/方法级改动：读取完整函数定义
- 组件级改动：读取完整组件文件
- 样式改动：读取完整样式块或样式文件
- 跨文件影响：读取相关依赖文件
步骤 3. 按维度审核代码
对每个目标文件按以下规则检查。规则按框架/语言特征自动适用，不要求预先声明。框架特定规则优先于通用规则。
框架与语言识别
- Vue2 特征：
.vue文件中使用 Options API（data/methods/computed/watch）、beforeDestroy/destroyed生命周期、this.$emit/this.$refs、Vue.filter/Vue.directive、mixin - Vue3 特征：
.vue文件中使用<script setup>、defineProps/defineEmits、ref/reactive/computed/watch、onUnmounted/onMounted、setup()函数、provide/inject - React 特征：
.jsx/.tsx文件、useState/useEffect/useCallback/useMemo、dangerouslySetInnerHTML、JSX 语法、函数组件、类组件 - 原生特征：无以上框架特征，仅使用原生 DOM API、原生事件绑定
- TypeScript 特征：文件扩展名为
.ts、.tsx，或.vue文件中<script lang="ts">；代码中出现interface、type、enum、as、<T>、extends（泛型语境）
同一文件同时包含多个特征时，合并适用对应规则。
报告口径
- 优先关注本次改动引入、放大或未收敛的问题
- 优先使用可跨项目复用的前端工程原则，不把单个项目的习惯直接当成通用阻断项
- 只有在项目约定已经形成明确契约、并且本次改动触发了该契约时，才按项目约定报告问题
- 所有问题都要说明可验证影响，不因个人偏好、代码风格偏好或 UI 审美偏好直接报问题
审核执行规则
- 严重问题：发现即审核不通过，必须修复
- 中等问题：发现则审核不通过，建议修复后再合并
- 轻微问题：发现则列出，不影响审核通过结论
catch块中用于记录异常的console.warn不视为问题
通用规则
以下规则适用于所有前端代码。
严重：
- XSS 漏洞：渲染用户输入或未转义内容（Vue：
v-html；React：dangerouslySetInnerHTML；原生：innerHTML） - 敏感信息暴露：API 密钥、Token、密码等硬编码在前端代码中
- 内存泄漏：定时器、事件监听器在组件卸载时未清理（Vue2：
beforeDestroy；Vue3：onUnmounted/onBeforeUnmount；React：useEffect清理函数）；组件卸载后仍尝试更新状态 - 状态管理错误：直接修改 Props（Vue 中直接修改
props对象属性；React 中直接修改props）；异步更新导致状态竞态；未清理的订阅 - 模板编译错误：未闭合的标签；列表渲染缺少唯一标识（Vue：
v-for缺少:key；React：缺少key或使用数组索引作为动态列表的key） - 运行时逻辑错误：空指针引用、数组越界、状态更新顺序错误、异步竞态、死循环
- 模块完整性破坏：循环依赖导致初始化异常、公共 API 签名变更但消费方未同步、导出遗漏导致运行时找不到模块
中等：
- 调试代码遗留：
console.log、debugger遗留在生产代码中（try-catch/catch块中用于记录异常的console.warn/console.error不视为问题） - 可选链无兜底：使用可选链
a?.b?.c访问属性但未提供兜底值（如?? 默认值、|| 默认值），导致链路结果为undefined可能引发下游错误 - 渲染性能：缺少缓存计算导致不必要重渲染（Vue：模板中重复计算应提取为
computed；React：缺少useMemo/useCallback）；大列表未虚拟化；图片未懒加载 - 组件设计缺陷：组件职责过多；Props 缺少类型校验（Vue2：缺少
type/default/validator；Vue3：defineProps缺少类型声明；React：缺少propTypes或 TypeScript 接口）或默认值；回调未做防抖/节流 - 样式问题：
!important滥用；全局样式污染；z-index 层级混乱；样式隔离穿透不当（Vue：scoped样式的/deep/、::v-deep、:deep()使用过宽；React：CSS Modules 命名冲突、内联样式滥用） - 异步处理不当：Promise 未处理；loading 状态未复位；并发请求未做竞态处理；错误状态未回滚
- 响应式设计缺陷：硬编码像素宽度；缺少断点适配；容器溢出未处理
- 可访问性缺失：交互元素缺少
aria属性；键盘导航不可达；表单缺少label；语义化标签使用不当 - 关联变更不完整：新增组件后路由、导航、导入、样式未同步；删除组件后引用未清理
- 资源加载风险：第三方脚本无 fallback；大资源无 loading 状态；CDN 资源无错误处理
- 模块设计问题：导入未使用的模块、导出缺少类型声明、模块职责混杂、硬编码分叉替代配置或映射
- 数据校验不足：空值与异常输入未处理、边界条件未覆盖、类型转换不完整、默认值缺失
- 可维护性问题：重复代码、过度嵌套、命名无法表达语义、死代码、无效抽象
- 嵌入内容安全：iframe 缺少 sandbox 属性或 sandbox 属性过于宽松；postMessage 未校验来源 origin
- 第三方脚本完整性：CDN 外部脚本缺少 integrity 属性（SRI）；动态注入的 script 未校验来源
- Web API 权限处理：敏感 API（Geolocation、Clipboard、Notification 等）调用未处理权限拒绝或不可用场景的降级逻辑
轻微：
- 低风险风格问题：临时注释、格式轻微不规范、代码缩进不一致、多余空行
- 命名与表达：变量名过短或不够语义化；注释与代码不同步；导入排序不规范
- 样式轻微问题：冗余样式声明；未使用的 CSS 类；颜色值格式不统一
- 项目约定偏差但未形成行为风险：命名、目录结构、轻量约定不一致，且未破坏功能
专项规则
识别到对应框架或语言特征时，读取并合并适用以下专项规则：
- Vue2 专项规则：见 resources/vue2.md
- Vue3 专项规则：见 resources/vue3.md
- React 专项规则：见 resources/react.md
- TypeScript 专项规则：见 resources/typescript.md
- 状态管理规则（Pinia/Redux Toolkit/Zustand）：见 resources/state-management.md
步骤 4. 处理边界条件
| 场景 | 处理方式 |
|---|---|
| 删除文件 | 只评估删除是否影响组件引用、路由、导出、样式或配置，不审查已删除内容 |
| 重命名文件 | 按新路径和实际 diff 审查，检查导入路径是否同步更新 |
| 大型组件 | 优先审查 diff hunk；超过 500 行时按函数或模块分段读取 |
| 仅样式改动 | 重点检查选择器冲突、响应式断点、主题变量、布局溢出 |
| 仅模板改动 | 重点检查无障碍属性、语义化标签、事件绑定、条件渲染逻辑 |
| 仅脚本改动 | 重点检查类型安全、异步处理、状态管理、事件清理 |
| 配置文件改动 | 重点检查构建配置、环境变量暴露、依赖版本、代理规则 |
| 新增组件或页面 | 检查路由、导航、导入、Props 定义、样式隔离、事件注册是否同步完成 |
| 无法确认的问题 | 标记为"需人工确认"，说明原因和建议确认方式 |
步骤 5. 输出审核结果
决策分支：
- 无问题：输出审核通过格式
- 只有轻微问题：输出审核通过格式，并列出轻微问题
- 存在严重或中等问题：输出审核不通过格式，按严重程度和文件分组列出问题
输出要求：
- 问题位置必须使用
文件路径:行号格式，使用相对于项目根目录的路径 - 每个问题必须包含问题类型、描述、影响和修复建议
- 问题按严重、中等、轻微顺序排列，同级别按文件路径排序
- 代码片段使用语言标签（如
vue、typescript、css） - 不要直接修改代码
通过格式：
## 审核结果：通过
### 问题统计
- 审核文件数：N
- 严重：0 个
- 中等：0 个
- 轻微：Z 个
### 轻微问题
[如无轻微问题，写"未发现轻微问题。"]
不通过格式：
## 审核结果：不通过
### 问题统计
- 审核文件数：N
- 严重：X 个
- 中等：Y 个
- 轻微：Z 个
### 问题详情
#### 严重问题
1. **问题类型**：[类型]
- **位置**：文件路径:行号
- **描述**：[问题说明]
- **影响**：[可能造成的后果]
- **代码片段**：
```语言
[相关代码]
```
- **修复建议**：[具体可执行建议]
#### 中等问题
[同上]
#### 轻微问题
[同上，可简化代码片段]
### 修复优先级
1. 先修复严重问题。
2. 再修复中等问题。
3. 轻微问题可按团队规范决定是否处理。
安全边界
允许执行的操作：
- 读取代码文件内容
- 执行 git diff 命令获取变更信息
- 读取 package.json（用于识别框架类型和版本，确定适用哪些专项规则）
- 输出审核结果报告
禁止主动执行的操作：
- 修改代码、格式化代码或自动修复代码
- 编译命令、构建命令、部署命令
- 自动执行测试命令
- 会改变 git 状态的命令（如 commit、push、merge、rebase）
- 删除文件、重置分支、清理工作区等破坏性操作
- 网络请求命令