# Refactoring With Verification

> 重构功能完整性验证

- Skill: `lstm-kirigaya/refactoring-with-verification` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lstm-kirigaya/refactoring-with-verification`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lstm-kirigaya/refactoring-with-verification/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: lstm-kirigaya (https://skillmd.com/u/lstm-kirigaya)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lstm-kirigaya/refactoring-with-verification

---


# 重构功能完整性验证

> **目标：确保重构后的功能不丢失，所有交互和数据展示点都得到保留。**

当用户要求重构、优化布局或重做某个功能时，遵循此指南以避免意外删除现有功能。

---

## 工作流程

```
接收重构需求
    ↓
[步骤 1] 获取当前状态 → 截图 + 代码分析
    ↓
[步骤 2] 功能清单化 → 列出所有功能点（交互 + 展示）
    ↓
[步骤 3] 用户确认 → 展示清单并确认需求范围
    ↓
[步骤 4] 执行重构 → 根据需求修改代码
    ↓
[步骤 5] 功能验证 → 截图 + 交互测试
    ↓
[步骤 6] 对比检查 → 确保无功能丢失
    ↓
完成
```

---

## 步骤 1：获取当前状态

### 1.1 截图记录

在修改前获取当前页面的完整截图：

```bash
# Web 项目
browser-use open <url>
browser-use screenshot screenshots/before-refactor.png

# Tauri 项目
tauri-mcp webview-screenshot --file screenshots/tauri/before-refactor.png

# 小程序项目
mrc screenshot ./screenshots/weapp/before-refactor.png --port 9420
```

### 1.2 代码分析

定位需要重构的组件或页面代码：

1. **找到对应的源代码文件**
2. **记录关键实现细节**（状态管理、事件处理、数据流）

---

## 步骤 2：功能清单化

**创建功能清单表格，分为两类：**

### 表格 A：交互功能点

| 序号 | 功能描述 | 元素类型 | 选择器/位置 | 触发方式 | 预期行为 | 优先级 |
|-----|---------|---------|------------|---------|---------|-------|
| 1 | 提交表单 | button | `#submit-btn` | 点击 | 验证并提交数据 | P0 |
| 2 | 展开详情 | icon | `.expand-icon` | 点击 | 显示隐藏内容 | P1 |
| 3 | 输入搜索 | input | `#search-input` | 输入 | 实时过滤列表 | P0 |
| 4 | 切换 Tab | tab | `.tab-item` | 点击 | 切换内容区域 | P0 |
| 5 | 删除项目 | button | `.delete-btn` | 点击+确认 | 移除项目并刷新 | P1 |

### 表格 B：数据展示功能点

| 序号 | 数据内容 | 展示位置 | 数据来源 | 格式/样式 | 更新频率 | 优先级 |
|-----|---------|---------|---------|----------|---------|-------|
| 1 | 用户名 | 页面头部 | API: /user/info | 文本，粗体 | 页面加载 | P0 |
| 2 | 订单列表 | 主内容区 | API: /orders | 表格，带状态标签 | 每次操作后刷新 | P0 |
| 3 | 统计数字 | 顶部卡片 | 计算值/缓存 | 大字体，彩色 | 实时 | P1 |
| 4 | 空状态提示 | 列表为空时 | 静态文案 | 图标+文字 | - | P1 |
| 5 | 错误提示 | 表单下方 | 验证结果 | 红色文字 | 即时 | P0 |

---

## 步骤 3：用户确认

**向用户展示功能清单并确认重构范围：**

```markdown
## 重构功能确认

基于当前页面分析，我识别出以下功能点：

### 交互功能（5 项）
1. ✅ 提交表单 - **保留**
2. ✅ 展开详情 - **保留**
3. ⚠️ 输入搜索 - **根据需求，改为后端搜索**
4. ✅ 切换 Tab - **保留**
5. ❌ 删除项目 - **根据需求，删除此功能**

### 数据展示（5 项）
1. ✅ 用户名 - **保留**
2. ✅ 订单列表 - **保留，样式优化**
3. ✅ 统计数字 - **保留**
4. ✅ 空状态提示 - **保留，UI 优化**
5. ✅ 错误提示 - **保留**

### 确认问题：
1. 搜索功能从「前端过滤」改为「后端搜索」，是否确认？
2. 删除项目功能将被移除，是否确认？
3. 订单列表样式将更新为新设计稿，是否确认？

请确认以上理解是否正确，确认后我将开始重构。
```

---

## 步骤 4：执行重构

根据确认的需求进行代码修改：

1. **按模块逐步修改**，避免一次性大面积改动
2. **保留关键逻辑**，只调整 UI 层
3. **注释标记**被删除的功能，方便回溯

---

## 步骤 5：功能验证

### 5.1 重构后截图

```bash
# 获取重构后的页面截图
browser-use screenshot screenshots/after-refactor.png
```

### 5.2 交互功能测试

逐一验证表格 A 中的交互功能：

```markdown
| 序号 | 功能 | 测试方法 | 结果 |
|-----|-----|---------|-----|
| 1 | 提交表单 | 点击 #submit-btn | ✅ 正常 |
| 2 | 展开详情 | 点击 .expand-icon | ✅ 正常 |
| 3 | 输入搜索 | 输入关键词 | ✅ 正常（后端搜索）|
| 4 | 切换 Tab | 点击 .tab-item | ✅ 正常 |
| 5 | 删除项目 | - | ❌ 已移除（符合预期）|
```

### 5.3 数据展示验证

验证表格 B 中的数据展示点：

```markdown
| 序号 | 数据内容 | 验证方法 | 结果 |
|-----|---------|---------|-----|
| 1 | 用户名 | 检查页面头部 | ✅ 显示正常 |
| 2 | 订单列表 | 检查主内容区 | ✅ 显示正常，新样式 |
| 3 | 统计数字 | 检查顶部卡片 | ✅ 显示正常 |
| 4 | 空状态提示 | 清空数据测试 | ✅ 显示正常，新 UI |
| 5 | 错误提示 | 提交无效表单 | ✅ 显示正常 |
```

---

## 步骤 6：对比检查

### 功能完整性检查清单

- [ ] **所有标记为「保留」的交互功能都已验证通过**
- [ ] **所有标记为「保留」的数据展示点都已验证通过**
- [ ] **标记为「修改」的功能按新需求工作正常**
- [ ] **标记为「删除」的功能确实已移除**
- [ ] **重构前后的截图对比，UI 符合预期**
- [ ] **无意外删除的功能**

### 功能丢失报告（如发现问题）

```markdown
⚠️ 功能丢失检测

重构后发现以下问题：

| 丢失功能 | 原位置 | 影响 | 处理建议 |
|---------|-------|-----|---------|
| 批量选择 | 订单列表 | 无法多选删除 | 需重新实现 |

处理方案：
- [ ] 重新实现批量选择功能
- [ ] 更新测试用例
```

---

## 快速检查表

重构前必须完成：
- [ ] 获取重构前截图
- [ ] 列出所有交互功能点（表格 A）
- [ ] 列出所有数据展示点（表格 B）
- [ ] 与用户确认功能清单

重构后必须完成：
- [ ] 获取重构后截图
- [ ] 逐一验证交互功能
- [ ] 逐一验证数据展示
- [ ] 对比检查无功能丢失
- [ ] 向用户汇报验证结果

---

## 示例：按钮重构

### 场景
用户要求将「删除」按钮从红色改为灰色，并移动到更多菜单中。

### 功能清单

**表格 A：交互功能**
| 序号 | 功能 | 元素 | 位置 | 预期行为 |
|-----|-----|-----|-----|---------|
| 1 | 删除项目 | button | 行尾 → 更多菜单 | 点击后确认删除 |

**表格 B：数据展示**
| 序号 | 数据 | 位置 | 说明 |
|-----|-----|-----|-----|
| 无 | - | - | 按钮不涉及数据展示 |

### 验证步骤
1. 截图记录重构前按钮位置（行尾，红色）
2. 重构后将按钮移入更多菜单，改为灰色
3. 截图验证新位置
4. 点击测试删除功能正常工作
5. 确认功能未丢失，仅样式和位置变更