yy-frontend-vue3-review

审核 Vue3 项目 src 目录下所有改动文件，基于 Vue3 开发规范逐项检查 <script setup> 组合式 API、组件规范、代码风格、命名规范、逻辑错误、网络请求、computed 规范、安全漏洞、最佳实践及绝对禁止项。

核心原则：绝不审核 src 之外的文件，绝不使用 React 标准，绝不修改代码（除非用户明确要求修复）。

触发场景

• 用户明确要求审核 Vue3 前端代码
• 代码合并前全面审核
• 代码提交前质量检查
• 用户指定 src 目录下文件或文件夹范围
• 默认审核 git diff 获取的 src 目录下所有变动文件

不适用场景

• React 项目
• 项目不存在 src 目录
• 审核 src 目录之外的文件
• 直接修改代码自动化修复（除非用户明确要求）
• 纯后端代码审核

支持审核的文件类型

扩展名	审核内容
.vue	Vue3 单文件组件（模板、<script setup>、样式）
.js	JavaScript 文件（代码风格、导入顺序、命名规范、逻辑错误）
.ts	TypeScript 文件（类型注解、代码风格、导入顺序、命名规范）
.css	CSS 样式（BEM 命名、格式、scoped 使用）
.scss	SCSS 样式（BEM 命名、格式、嵌套规范）
.less	Less 样式（BEM 命名、格式、变量使用）

---

执行流程

步骤一：确定审核目标

1. 目录验证：检查项目是否存在 src 目录。若不存在，回复：

   当前项目不符合 Vue3 前端代码审核的目录要求，本技能仅支持包含 src 目录的前端项目。

   并终止。

2. 插件检测：检查项目是否安装 unplugin-vue-setup-extend-plus（检查 package.json 中依赖或 node_modules 目录）

   • 已安装（hasVueSetupExtendPlus = true）：审核 .vue 文件时，将 <script setup> 缺少 name="PascalCase组件名" 属性视为 🟢 轻微问题
   • 未安装（hasVueSetupExtendPlus = false）：不审核 name 属性，不视为问题

3. 用户指定：递归获取指定文件或文件夹内的 .vue、.js、.ts、.css、.scss、.less 文件。

4. 未指定：执行 git diff --name-only HEAD 和 git diff --cached --name-only，合并去重后严格过滤出 src 目录下的文件。

5. 无匹配文件：回复「当前 src 目录下没有需要审核的改动文件。」并终止。

步骤二：生成审核清单

逐维度生成 9 大维度审核清单（按严重程度排序）：

维度 ID	检查内容	严重程度	参考文件
D01	代码风格（缩进、引号、分号、尾随逗号、120 行宽、箭头函数、对象括号、12 组导入顺序、Prettier 配置、== 不视为问题）	🟢 轻微	code-style.md
D02	最佳实践（调试代码清理、BEM + scoped、未使用变量、defineExpose、组件拆分、懒加载、KeepAlive、Hooks 规范、函数 try/catch）	🟢 轻微	best-practice.md
D03	Vue3 组件规范（<script setup>、name 属性（需 unplugin-vue-setup-extend-plus）、脚本结构顺序、元素特性顺序、Props TS 定义、emit 顺序/生命周期 emit 限制、组件命名、v-slot 动态风格、ref/computed 使用、模块化、禁止 mixins、不要过度封装）	🟡 中等	component.md
D04	命名规范（API 函数、事件函数、变量/方法、常量、Props、组件名、文件名、emit 事件、Hooks、布尔值、TS 类型约束、禁止无意义命名）	🟡 中等	naming.md
D05	网络请求规范（async/await + try/catch/finally、禁止多层 try/catch、禁止连续解构、统一响应模式）	🟡 中等	network-request.md
D06	computed 规范（纯函数原则、有意义命名、复杂逻辑建议 try/catch 兜底）	🟡 中等	computed.md
D07	逻辑错误（空指针、数组越界、逻辑判断、方法内部顺序、ref .value 访问）	🔴 严重	logic-error.md
D08	安全漏洞（v-html XSS 风险、敏感信息硬编码/泄露）	🔴 严重	security.md
D09	绝对禁止项（连续解构、父改子数据、修改 ref/reactive 类型、修改 props、this、Options API、mixins、多层 try/catch、生命周期 emit、无意义命名）	🔴 严重	absolute-prohibitions.md

步骤三：逐维度审核

按 D01 → D09 顺序逐维度审核，按需查阅 references 目录下的详细规范文件。

审核注意事项：

• 注释相关问题默认忽略，不检查
• 使用 == 不视为问题
• catch 块中的 console.warn 不视为问题
• emit 事件必须在白名单范围内
• <script setup> 的 name 属性：仅在检测到项目安装了 unplugin-vue-setup-extend-plus 时才审核，未安装时不视为问题

步骤四：输出审核结果

按文件分组、按严重程度排序（🔴 严重 → 🟡 中等 → 🟢 轻微）输出审核报告。

步骤五：自动提交判断

审核结果	判断条件	后续动作
通过	无问题 OR 仅存在「轻微」问题	输出审核通过报告
不通过	存在「严重」或「中等」问题	输出完整审核结果和修复建议，等待用户修复后重新审核

---

严重程度分级标准

级别	图标	说明	示例
严重	🔴	可能导致功能异常、安全漏洞、运行时错误	空指针引用、XSS 风险、连续解构、直接修改 props
中等	🟡	不符合规范但不影响运行，可能降低可维护性	导入顺序错误、组件结构顺序不对、命名不规范、缺少 try/catch
轻微	🟢	代码风格、格式问题，不影响功能和可维护性	缩进不一致、引号不统一、缺少尾随逗号

---

详细审核规范

渐进式披露：以下 9 个规范文件按维度独立组织，审核时按需查阅对应文件。

• references/code-style.md — D01 代码风格（缩进、引号、分号、尾随逗号、箭头函数、导入顺序、Prettier 配置）
• references/best-practice.md — D02 最佳实践（调试代码、BEM+scoped、Hooks 规范、组件拆分、懒加载、KeepAlive）
• references/component.md — D03 Vue3 组件规范（<script setup>、name 属性、脚本结构、元素特性顺序、Props、Emit、v-slot、ref/computed）
• references/naming.md — D04 命名规范（API 函数、事件函数、常量、Props、组件名、emit 事件、Hooks、布尔值、TS 类型约束）
• references/network-request.md — D05 网络请求规范（async/await、try/catch/finally、统一响应模式）
• references/computed.md — D06 computed 规范（try/catch 包裹、有意义命名）
• references/logic-error.md — D07 逻辑错误（空指针、数组越界、方法内部顺序、ref .value）
• references/security.md — D08 安全漏洞（XSS 风险、敏感信息泄露）
• references/absolute-prohibitions.md — D09 绝对禁止项（连续解构、修改 props、this、Options API、mixins 等）

---

边界条件与注意事项

场景	处理方式
src 目录边界	严格只审核 src/ 目录下的文件，其他目录文件直接跳过
大型文件	超过 1000 行的文件按模块分段审核，避免上下文超限
部分审核	用户指定仅审核某些维度时，其他维度跳过
无问题文件	没有问题的文件也需在报告中列出，标注「✅ 无问题」
重复问题	同一类问题在多个文件出现时，统计总数并提供统一修复方案

---

输出契约

审核通过（无问题或仅轻微）

## 🔍 审核结果：✅ 通过

### 问题统计

| 严重程度 | 数量 |
| -------- | ---- |
| 🔴 严重  | 0    |
| 🟡 中等  | 0    |
| 🟢 轻微  | N    |

所有文件符合 Vue3 前端开发规范，审核通过。

审核不通过（存在严重或中等问题）

## 🔍 审核结果：❌ 不通过

### 问题统计

| 严重程度 | 数量 |
| -------- | ---- |
| 🔴 严重  | N    |
| 🟡 中等  | N    |
| 🟢 轻微  | N    |

### 问题详情

#### [文件路径]

**🔴 严重问题**：

1. **问题类型**：[类型描述]
   - **位置**：文件路径:行号
   - **描述**：[详细描述问题的影响和后果]
   - **代码片段**：
     ```ts
     // 涉及代码
     ```
   - **修复建议**：[具体可执行的修复建议]

**🟡 中等问题**：

...

### 修复建议

请优先修复「严重」和「中等」问题，修复完成后可再次发起审核。

不自动调用提交技能，等待用户修复后重新审核。