| 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 截图记录
在修改前获取当前页面的完整截图：
browser-use open <url>
browser-use screenshot screenshots/before-refactor.png
tauri-mcp webview-screenshot --file screenshots/tauri/before-refactor.png
mrc screenshot ./screenshots/weapp/before-refactor.png --port 9420
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：执行重构
根据确认的需求进行代码修改：
- 按模块逐步修改，避免一次性大面积改动
- 保留关键逻辑，只调整 UI 层
- 注释标记被删除的功能，方便回溯
步骤 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：对比检查
功能完整性检查清单
功能丢失报告（如发现问题）
⚠️ 功能丢失检测
重构后发现以下问题：
| 丢失功能 | 原位置 | 影响 | 处理建议 |
|---------|-------|-----|---------|
| 批量选择 | 订单列表 | 无法多选删除 | 需重新实现 |
处理方案：
- [ ] 重新实现批量选择功能
- [ ] 更新测试用例
快速检查表
重构前必须完成：
重构后必须完成：
示例：按钮重构
场景
用户要求将「删除」按钮从红色改为灰色，并移动到更多菜单中。
功能清单
表格 A：交互功能
| 序号 | 功能 | 元素 | 位置 | 预期行为 |
|---|
| 1 | 删除项目 | button | 行尾 → 更多菜单 | 点击后确认删除 |
表格 B：数据展示
验证步骤
- 截图记录重构前按钮位置（行尾，红色）
- 重构后将按钮移入更多菜单，改为灰色
- 截图验证新位置
- 点击测试删除功能正常工作
- 确认功能未丢失，仅样式和位置变更
