whistle.mock-plugins 1.2.1 → 1.2.2-beta.3

package/COLUMN_RESIZE_IMPLEMENTATION.md

@@ -0,0 +1,162 @@
+# 列宽拖动调整功能实现说明
+
+## 实现日期
+2025-11-06
+
+## 功能概述
+为接口管理页面的"当前响应"列添加了拖动调整宽度的功能，列内的下拉框（Select）会自动根据列宽进行自适应。
+
+## 技术方案
+使用 Ant Design + react-resizable 的组合方案实现列宽拖动调整。
+
+## 修改文件清单
+
+### 1. package.json
+**修改内容：**
+- 添加 `react-resizable: ^3.0.5` 依赖到 devDependencies
+
+**位置：** 第42行
+
+### 2. InterfaceManagementV2.js
+**修改内容：**
+
+#### 2.1 导入模块（第18-19行）
+```javascript
+import { Resizable } from 'react-resizable';
+import 'react-resizable/css/styles.css';
+```
+
+#### 2.2 扩展 tableConfig 状态（第98-123行）
+- 添加 `columnWidths` 字段到状态中
+- 为"当前响应"列设置默认宽度 180px
+- 添加兼容性处理，确保旧缓存数据能正确加载
+
+#### 2.3 创建 ResizableTitle 组件（第714-740行）
+- 封装可调整大小的表头组件
+- 集成 react-resizable 的 Resizable 组件
+- 添加拖动手柄和事件处理
+
+#### 2.4 创建 handleResize 函数（第742-749行）
+- 处理列宽调整事件
+- 更新 tableConfig.columnWidths
+- 自动保存到 localStorage
+
+#### 2.5 修改"当前响应"列配置（第844-881行）
+- 将固定宽度改为动态读取：`tableConfig.columnWidths?.currentResponse || 180`
+- 添加 `onHeaderCell` 属性，配置可调整大小的表头
+- 为 Select 组件添加 `getPopupContainer` 属性，确保下拉菜单正确定位
+
+#### 2.6 修改 Table 组件（第1383-1387行）
+- 添加 `components` 属性
+- 配置自定义表头组件：`{ header: { cell: ResizableTitle } }`
+
+#### 2.7 更新 handleResetColumns 函数（第680-689行）
+- 重置列配置时同时重置列宽到默认值 180px
+
+### 3. interface-management.css
+**修改内容：**
+
+添加拖动手柄样式（第1287-1321行）：
+- `.react-resizable` - 可调整大小容器的基础样式
+- `.react-resizable-handle` - 拖动手柄的样式和定位
+- `.react-resizable-handle:hover` - 悬停时的视觉反馈
+- `.react-resizable-handle::after` - 拖动指示线的样式
+
+## 功能特性
+
+### 1. 列宽拖动
+- 鼠标悬停在"当前响应"列的右边缘时，光标变为调整大小的图标
+- 拖动边缘可以调整列宽
+- 拖动时有视觉反馈（蓝色高亮）
+
+### 2. 自动保存
+- 调整后的列宽自动保存到 localStorage
+- 页面刷新后保持用户设置的列宽
+
+### 3. Select 自适应
+- 列内的下拉框宽度设置为 100%
+- 随列宽变化自动调整
+- 下拉菜单正确定位，不会超出容器
+
+### 4. 重置功能
+- 点击"重置"按钮可以恢复默认列宽（180px）
+
+### 5. 兼容性处理
+- 兼容旧版本的缓存数据
+- 如果缓存中没有 columnWidths，自动初始化为默认值
+
+## 使用说明
+
+### 安装依赖
+```bash
+cd whistle.mock-plugin
+npm install
+```
+
+### 构建项目
+```bash
+npm run build
+```
+
+### 测试功能
+1. 启动 whistle 服务
+2. 打开接口管理页面
+3. 找到"当前响应"列
+4. 将鼠标移动到列标题的右边缘
+5. 当光标变为调整大小图标时，拖动调整列宽
+6. 刷新页面，验证列宽是否保持
+
+## 技术细节
+
+### 最小/最大宽度
+当前实现没有设置硬性的最小/最大宽度限制，但可以通过以下方式添加：
+
+```javascript
+onResize: (e, { size }) => {
+  const minWidth = 120;
+  const maxWidth = 400;
+  const newWidth = Math.max(minWidth, Math.min(maxWidth, size.width));
+  // 更新列宽...
+}
+```
+
+### 扩展到其他列
+如果需要为其他列也添加拖动调整功能：
+
+1. 在 `tableConfig.columnWidths` 中添加对应列的默认宽度
+2. 在列配置中添加 `onHeaderCell` 属性
+3. 使用动态宽度替代固定宽度
+
+示例：
+```javascript
+{
+  title: '延迟(毫秒)',
+  key: 'responseDelay',
+  width: tableConfig.columnWidths?.responseDelay || 100,
+  onHeaderCell: (column) => ({
+    width: column.width,
+    onResize: handleResize('responseDelay'),
+  }),
+  // ...
+}
+```
+
+## 注意事项
+
+1. **性能考虑**：拖动时会频繁更新状态和 localStorage，对于大量数据的表格可能需要添加防抖处理
+2. **浏览器兼容性**：react-resizable 依赖现代浏览器的 API，IE11 可能需要 polyfill
+3. **移动端支持**：当前实现主要针对桌面端，移动端的触摸拖动可能需要额外配置
+
+## 后续优化建议
+
+1. 添加最小/最大宽度限制，防止列宽过小或过大
+2. 为拖动操作添加防抖，减少状态更新频率
+3. 支持双击列边缘自动调整到最适宽度
+4. 支持更多列的宽度调整
+5. 添加"恢复默认列宽"的快捷按钮
+
+## 相关文档
+
+- [react-resizable 官方文档](https://github.com/react-grid-layout/react-resizable)
+- [Ant Design Table 可调整列宽示例](https://ant.design/components/table-cn#components-table-demo-resizable-column)
+

package/TEST_GUIDE.md

@@ -0,0 +1,156 @@
+# 列宽拖动功能测试指南
+
+## 测试环境
+- ✅ 依赖已安装（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();
+```
+

package/VERSION.md

@@ -1,4 +1,17 @@
 # 🔄 版本更新记录
+## v1.2.2-beta.3
+### ✨ Feature
+- **交互优化**：接口列表"当前响应"列支持拖动调整宽度
+- **自适应优化**：列内下拉框根据列宽自动调整显示
+- **配置持久化**：列宽调整后自动保存，刷新页面保持用户设置
+- **视觉反馈**：拖动时提供蓝色高亮视觉反馈，提升用户体验
+
+### 🔧 Technical
+- **原生实现**：使用原生鼠标事件实现列宽拖动，移除 react-resizable 依赖
+- **组件优化**：创建 ResizableTitle 组件封装可调整大小的表头
+- **状态管理**：扩展 tableConfig 支持 columnWidths 配置
+- **样式优化**：优化拖动手柄样式，提供更好的视觉反馈
+
 ## v1.2.1
 ### ✨ Feature
 - **界面优化**：功能模块页面支持列表/卡片视图切换，列表视图更加紧凑高效