whistle.mock-plugins/TEST_GUIDE.md

Whistle 插件，用于快速创建 API 模拟数据

# 列宽拖动功能测试指南

## 测试环境
- ✅ 依赖已安装（react-resizable@3.0.5）
- ✅ 项目已构建（2025-11-06 15:03）
- ✅ Whistle 服务已重启

## 访问地址
打开浏览器访问：http://127.0.0.1:8899/ 或 http://10.181.134.20:8899/

## 测试步骤

### 1. 进入接口管理页面
1. 在 Whistle 管理界面中找到 mock-plugin 插件
2. 点击进入接口管理页面（InterfaceManagementV2）

### 2. 测试列宽拖动功能

#### 测试点 1：拖动调整列宽
1. 找到表格中的"当前响应"列
2. 将鼠标移动到"当前响应"列标题的右边缘
3. **预期结果**：光标应该变为调整大小的图标（↔️）
4. 按住鼠标左键并拖动
5. **预期结果**：
   - 列宽随鼠标移动而变化
   - 拖动手柄区域显示蓝色高亮
   - 列内的下拉框（Select）宽度自动调整

#### 测试点 2：Select 下拉框自适应
1. 调整"当前响应"列的宽度（拖宽或拖窄）
2. 观察列内的下拉框
3. **预期结果**：
   - 下拉框宽度始终占满整列
   - 下拉框内容正常显示，不会溢出
   - 点击下拉框，下拉菜单正确显示

#### 测试点 3：列宽持久化
1. 调整"当前响应"列的宽度到一个特定值（如 250px）
2. 刷新浏览器页面（F5 或 Cmd+R）
3. **预期结果**：
   - 页面重新加载后，列宽保持为调整后的值
   - 不会恢复到默认的 180px

#### 测试点 4：重置列宽
1. 调整"当前响应"列的宽度
2. 点击表格右上角的"列设置"按钮
3. 点击"重置"按钮
4. **预期结果**：
   - 列宽恢复到默认值 180px
   - 其他列配置也恢复到默认状态

#### 测试点 5：拖动视觉反馈
1. 将鼠标悬停在"当前响应"列的右边缘
2. **预期结果**：
   - 显示一个灰色的竖线指示器
   - 鼠标悬停时，指示器变为蓝色
   - 拖动区域有半透明蓝色背景

### 3. 边界情况测试

#### 测试点 6：最小宽度
1. 尝试将列宽拖到非常窄
2. **预期结果**：
   - 列宽可以调整到很小（当前没有硬性限制）
   - Select 下拉框仍然可以正常点击和使用

#### 测试点 7：最大宽度
1. 尝试将列宽拖到非常宽
2. **预期结果**：
   - 列宽可以调整到很宽（当前没有硬性限制）
   - 不会影响其他列的显示

#### 测试点 8：多次调整
1. 多次来回拖动调整列宽
2. **预期结果**：
   - 每次调整都流畅响应
   - 没有卡顿或延迟
   - localStorage 正确更新

### 4. 功能交互测试

#### 测试点 9：与其他功能的兼容性
1. 调整列宽后，测试以下功能：
   - 切换响应数据（点击下拉框选择不同的响应）
   - 排序功能（点击列标题排序）
   - 分页功能（切换页码）
   - 搜索功能（搜索接口）
   - 分组筛选（选择不同分组）
2. **预期结果**：
   - 所有功能正常工作
   - 列宽保持不变

#### 测试点 10：兼容旧数据
1. 清除浏览器的 localStorage（开发者工具 > Application > Local Storage）
2. 刷新页面
3. **预期结果**：
   - 页面正常加载
   - "当前响应"列显示默认宽度 180px
   - 没有控制台错误

## 已知问题和限制

1. **没有最小/最大宽度限制**：当前实现允许列宽调整到任意大小
2. **仅支持"当前响应"列**：其他列暂不支持拖动调整
3. **桌面端优化**：主要针对鼠标操作，触摸屏可能需要额外配置

## 测试结果记录

### 测试环境信息
- 浏览器：__________
- 操作系统：__________
- 测试日期：__________

### 测试结果
- [ ] 测试点 1：拖动调整列宽
- [ ] 测试点 2：Select 下拉框自适应
- [ ] 测试点 3：列宽持久化
- [ ] 测试点 4：重置列宽
- [ ] 测试点 5：拖动视觉反馈
- [ ] 测试点 6：最小宽度
- [ ] 测试点 7：最大宽度
- [ ] 测试点 8：多次调整
- [ ] 测试点 9：与其他功能的兼容性
- [ ] 测试点 10：兼容旧数据

### 发现的问题
（如有问题，请在此记录）

---

## 调试技巧

### 查看 localStorage 中的列宽配置
1. 打开浏览器开发者工具（F12）
2. 切换到 Console 标签
3. 输入以下命令查看配置：
```javascript
JSON.parse(localStorage.getItem('interface-table-config'))
```

### 手动设置列宽
```javascript
const config = JSON.parse(localStorage.getItem('interface-table-config'));
config.columnWidths.currentResponse = 250;
localStorage.setItem('interface-table-config', JSON.stringify(config));
location.reload();
```

### 清除列宽配置
```javascript
const config = JSON.parse(localStorage.getItem('interface-table-config'));
delete config.columnWidths;
localStorage.setItem('interface-table-config', JSON.stringify(config));
location.reload();
```