yy-frontend-vue2-doc

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

yy-frontend-vue2-doc

为 Vue 2 单文件组件（SFC）自动生成规范注释。解析模板区、脚本区、样式区的关键节点，添加结构化注释，使代码结构更清晰、可维护性更高。

边界：不生成新组件、不修改业务逻辑、不生成提交信息，仅添加注释。

Automatically generate standardized comments for Vue 2 Single-File Components (SFC). Parse key nodes in the template, script, and style blocks, add structured comments to make the code structure clearer and more maintainable.

Boundaries: Do not generate new components, modify business logic, or generate commit messages; only add comments.

何时使用

When to Use

用户提供了
```
.vue
```
文件内容，要求添加注释
用户要求为 Vue 2 组件补充文档注释
Code Review 时需要解读组件结构
用户明确要求为 Vue 2 组件添加注释

Users provide the content of
```
.vue
```
files and request to add comments
Users request to supplement document comments for Vue 2 components
Need to interpret component structure during Code Review
Users explicitly request to add comments for Vue 2 components

何时不要使用

When Not to Use

生成新组件或新功能代码
修改组件业务逻辑
生成 git 提交信息
Vue 3 项目（使用 yy-frontend-vue3-doc）
非
```
.vue
```
文件的代码优化

Generate new components or new feature code
Modify component business logic
Generate git commit messages
Vue 3 projects (use yy-frontend-vue3-doc)
Code optimization for non
```
.vue
```
files

注释工作流

Comment Workflow

步骤一：解析组件结构

Step 1: Parse Component Structure

识别
```
<template>
```
区块，分析节点层级和指令（
```
v-for
```
、
```
v-if
```
、
```
v-show
```
、
```
slot
```
、
```
component :is
```
）
识别
```
<script>
```
区块，解析 Options API 属性：
```
name
```
、
```
components
```
、
```
props
```
、
```
data
```
、
```
computed
```
、
```
watch
```
、
```
methods
```
、生命周期钩子、
```
provide
```
、
```
inject
```
识别
```
<style>
```
区块，解析选择器层级和作用域（
```
scoped
```
/ 全局）

Identify the
```
<template>
```
block, analyze node hierarchy and directives (
```
v-for
```
,
```
v-if
```
,
```
v-show
```
,
```
slot
```
,
```
component :is
```
)
Identify the
```
<script>
```
block, parse Options API properties:
```
name
```
,
```
components
```
,
```
props
```
,
```
data
```
,
```
computed
```
,
```
watch
```
,
```
methods
```
, lifecycle hooks,
```
provide
```
,
```
inject
```
Identify the
```
<style>
```
block, parse selector hierarchy and scope (
```
scoped
```
/ global)

步骤二：识别关键节点

Step 2: Identify Key Nodes

模板区：根节点、循环节点、条件节点、插槽、动态组件、逻辑区块

脚本区：组件名称、引入组件、props、data、computed、watch、methods、生命周期钩子、provide、inject

样式区：顶级选择器（模块）、子级选择器（子模块）、媒体查询

Template Area: Root nodes, loop nodes, conditional nodes, slots, dynamic components, logical blocks

Script Area: Component name, imported components, props, data, computed, watch, methods, lifecycle hooks, provide, inject

Style Area: Top-level selectors (modules), child-level selectors (sub-modules), media queries

步骤三：生成注释

Step 3: Generate Comments

根据识别到的关键节点，在对应位置添加注释：

模板区：使用 HTML 注释
```

```
脚本区：使用单行注释
```
// ...
```
或 JSDoc
```
/** ... */
```
样式区：使用块注释
```
/* ... */
```

关键原则：

不修改任何代码逻辑，只添加注释
保持原有缩进和格式
注释简洁：模板和样式区不超过一行，JSDoc 不超过五行
使用中文描述（代码标识符除外）
不添加空注释：没有关键内容的区块不强制注释
代码本身能说明意图的不写注释

Add comments at corresponding positions based on the identified key nodes:

Template Area: Use HTML comments
```

```
Script Area: Use single-line comments
```
// ...
```
or JSDoc
```
/** ... */
```
Style Area: Use block comments
```
/* ... */
```

Key Principles:

Do not modify any code logic, only add comments
Keep original indentation and format
Concise comments: No more than one line for template and style areas, no more than five lines for JSDoc
Use Chinese descriptions (except code identifiers)
Do not add empty comments: Blocks without key content are not forced to have comments
Do not write comments if the code itself explains the intent

步骤四：输出结果

Step 4: Output Results

直接输出完整的带注释代码，使用 ````vue` 代码块包裹，不添加解释说明。

Directly output the complete commented code, wrapped in ````vue` code blocks, without adding explanations.

读取详细规范

Read Detailed Specifications

执行注释生成时，按需读取以下参考文件获取详细规则：

```
references/comments.md
```
— 完整注释格式（模板 6 种、脚本 10 种、样式 4 种）+ 完整示例组件
```
references/component.md
```
— Vue2 SFC 结构、属性顺序、关键节点识别
```
references/css-style.md
```
— 样式注释格式、BEM 命名、作用域标注
```
references/naming.md
```
— 各场景注释命名规则（props/data/computed/watch/methods/lifecycle）

When generating comments, read the following reference files as needed to obtain detailed rules:

```
references/comments.md
```
— Complete comment formats (6 types for templates, 10 types for scripts, 4 types for styles) + complete sample components
```
references/component.md
```
— Vue2 SFC structure, property order, key node identification
```
references/css-style.md
```
— Style comment format, BEM naming, scope annotation
```
references/naming.md
```
— Comment naming rules for various scenarios (props/data/computed/watch/methods/lifecycle)

输出契约

Output Contract

输出完整 annotated Vue SFC 代码，使用 ````vue` 代码块
不修改业务逻辑，原有代码保持不变
保持原有缩进和格式
确保 Vue 2 Options API 语法正确
语气专业、简洁

Output complete annotated Vue SFC code, wrapped in ````vue` code blocks
Do not modify business logic, keep original code unchanged
Keep original indentation and format
Ensure correct Vue 2 Options API syntax
Professional and concise tone