菜单
重构 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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/LSTM-Kirigaya/jinhui-skills --skill refactoring-with-verification命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| 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] 对比检查 → 确保无功能丢失
↓
完成
在修改前获取当前页面的完整截图：
# 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 | 提交表单 | 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 |
| 序号 | 数据内容 | 展示位置 | 数据来源 | 格式/样式 | 更新频率 | 优先级 |
|---|---|---|---|---|---|---|
| 1 | 用户名 | 页面头部 | API: /user/info | 文本，粗体 | 页面加载 | P0 |
| 2 | 订单列表 | 主内容区 | API: /orders | 表格，带状态标签 | 每次操作后刷新 | P0 |
| 3 | 统计数字 | 顶部卡片 | 计算值/缓存 | 大字体，彩色 | 实时 | P1 |
| 4 | 空状态提示 | 列表为空时 | 静态文案 | 图标+文字 | - | P1 |
| 5 | 错误提示 | 表单下方 | 验证结果 | 红色文字 | 即时 | P0 |
向用户展示功能清单并确认重构范围：
## 重构功能确认
基于当前页面分析，我识别出以下功能点：
### 交互功能（5 项）
1. ✅ 提交表单 - **保留**
2. ✅ 展开详情 - **保留**
3. ⚠️ 输入搜索 - **根据需求，改为后端搜索**
4. ✅ 切换 Tab - **保留**
5. ❌ 删除项目 - **根据需求，删除此功能**
### 数据展示（5 项）
1. ✅ 用户名 - **保留**
2. ✅ 订单列表 - **保留，样式优化**
3. ✅ 统计数字 - **保留**
4. ✅ 空状态提示 - **保留，UI 优化**
5. ✅ 错误提示 - **保留**
### 确认问题：
1. 搜索功能从「前端过滤」改为「后端搜索」，是否确认？
2. 删除项目功能将被移除，是否确认？
3. 订单列表样式将更新为新设计稿，是否确认？
请确认以上理解是否正确，确认后我将开始重构。
根据确认的需求进行代码修改：
# 获取重构后的页面截图
browser-use screenshot screenshots/after-refactor.png
逐一验证表格 A 中的交互功能：
| 序号 | 功能 | 测试方法 | 结果 |
|-----|-----|---------|-----|
| 1 | 提交表单 | 点击 #submit-btn | ✅ 正常 |
| 2 | 展开详情 | 点击 .expand-icon | ✅ 正常 |
| 3 | 输入搜索 | 输入关键词 | ✅ 正常（后端搜索）|
| 4 | 切换 Tab | 点击 .tab-item | ✅ 正常 |
| 5 | 删除项目 | - | ❌ 已移除（符合预期）|
验证表格 B 中的数据展示点：
| 序号 | 数据内容 | 验证方法 | 结果 |
|-----|---------|---------|-----|
| 1 | 用户名 | 检查页面头部 | ✅ 显示正常 |
| 2 | 订单列表 | 检查主内容区 | ✅ 显示正常，新样式 |
| 3 | 统计数字 | 检查顶部卡片 | ✅ 显示正常 |
| 4 | 空状态提示 | 清空数据测试 | ✅ 显示正常，新 UI |
| 5 | 错误提示 | 提交无效表单 | ✅ 显示正常 |
⚠️ 功能丢失检测
重构后发现以下问题：
| 丢失功能 | 原位置 | 影响 | 处理建议 |
|---------|-------|-----|---------|
| 批量选择 | 订单列表 | 无法多选删除 | 需重新实现 |
处理方案：
- [ ] 重新实现批量选择功能
- [ ] 更新测试用例
重构前必须完成：
重构后必须完成：
用户要求将「删除」按钮从红色改为灰色，并移动到更多菜单中。
表格 A：交互功能
| 序号 | 功能 | 元素 | 位置 | 预期行为 |
|---|---|---|---|---|
| 1 | 删除项目 | button | 行尾 → 更多菜单 | 点击后确认删除 |
表格 B：数据展示
| 序号 | 数据 | 位置 | 说明 |
|---|---|---|---|
| 无 | - | - | 按钮不涉及数据展示 |
基于 SOC 职业分类
