refactoring-with-verification

name	refactoring-with-verification
description	重构 UI 组件或页面时的功能完整性验证指南。Use when refactoring or optimizing UI components/layouts to ensure: (1) No functionality is accidentally removed, (2) All interactive elements remain working, (3) All data display points are preserved, (4) Changes match user requirements exactly.

重构功能完整性验证

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

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

---

工作流程

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

---

步骤 1：获取当前状态

1.1 截图记录

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

# 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：用户确认

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

## 重构功能确认

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

### 交互功能（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 重构后截图

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

5.2 交互功能测试

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

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

5.3 数据展示验证

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

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

---

步骤 6：对比检查

功能完整性检查清单

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

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

⚠️ 功能丢失检测

重构后发现以下问题：

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

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

---

快速检查表

重构前必须完成：

• 获取重构前截图
• 列出所有交互功能点（表格 A）
• 列出所有数据展示点（表格 B）
• 与用户确认功能清单

重构后必须完成：

• 获取重构后截图
• 逐一验证交互功能
• 逐一验证数据展示
• 对比检查无功能丢失
• 向用户汇报验证结果

---

示例：按钮重构

场景

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

功能清单

表格 A：交互功能

序号	功能	元素	位置	预期行为
1	删除项目	button	行尾 → 更多菜单	点击后确认删除

表格 B：数据展示

序号	数据	位置	说明
无	-	-	按钮不涉及数据展示

验证步骤

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