whistle.mock-plugins 1.2.2-beta.7 → 1.2.2-beta.9

package/ui/src/pages/Settings.js

@@ -1,45 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import AppLayout from '../components/AppLayout';
-import { Card, Typography, Switch, Space, Divider } from 'antd';
+import { Card, Typography, Empty } from 'antd';
 import '../styles/settings.css';
 
 const { Title, Text, Paragraph } = Typography;
 
 const Settings = () => {
-  const [displayMode, setDisplayMode] = useState('modal');
-  const [interfaceFormDisplayMode, setInterfaceFormDisplayMode] = useState('modal');
-
-  useEffect(() => {
-    // 从 localStorage 读取配置
-    const savedMode = localStorage.getItem('dataManagementDisplayMode');
-    if (savedMode) {
-      setDisplayMode(savedMode);
-    }
-
-    const savedInterfaceFormMode = localStorage.getItem('interfaceFormDisplayMode');
-    if (savedInterfaceFormMode) {
-      setInterfaceFormDisplayMode(savedInterfaceFormMode);
-    }
-  }, []);
-
-  const handleDisplayModeChange = (checked) => {
-    const newMode = checked ? 'drawer' : 'modal';
-    setDisplayMode(newMode);
-    localStorage.setItem('dataManagementDisplayMode', newMode);
-    
-    // 触发 storage 事件，通知其他页面
-    window.dispatchEvent(new Event('storage'));
-  };
-
-  const handleInterfaceFormDisplayModeChange = (checked) => {
-    const newMode = checked ? 'drawer' : 'modal';
-    setInterfaceFormDisplayMode(newMode);
-    localStorage.setItem('interfaceFormDisplayMode', newMode);
-    
-    // 触发 storage 事件，通知其他页面
-    window.dispatchEvent(new Event('storage'));
-  };
-
   return (
     <AppLayout>
       <div className="page-container">
@@ -53,45 +19,10 @@ const Settings = () => {
         </div>
 
         <Card title="界面设置" className="settings-card">
-          <div className="settings-item">
-            <div className="settings-item-header">
-              <div>
-                <div className="settings-item-title">数据管理交互</div>
-                <div className="settings-item-description">
-                  选择数据管理的显示方式
-                </div>
-              </div>
-              <Space>
-                <Text type="secondary">
-                  {displayMode === 'drawer' ? '抽屉模式' : '弹窗模式'}
-                </Text>
-                <Switch 
-                  checked={displayMode === 'drawer'}
-                  onChange={handleDisplayModeChange}
-                />
-              </Space>
-            </div>
-          </div>
-
-          <div className="settings-item">
-            <div className="settings-item-header">
-              <div>
-                <div className="settings-item-title">接口表单交互</div>
-                <div className="settings-item-description">
-                  选择添加/编辑接口的显示方式
-                </div>
-              </div>
-              <Space>
-                <Text type="secondary">
-                  {interfaceFormDisplayMode === 'drawer' ? '抽屉模式' : '弹窗模式'}
-                </Text>
-                <Switch 
-                  checked={interfaceFormDisplayMode === 'drawer'}
-                  onChange={handleInterfaceFormDisplayModeChange}
-                />
-              </Space>
-            </div>
-          </div>
+          <Empty 
+            description="暂无可配置项" 
+            style={{ padding: '40px 0' }}
+          />
         </Card>
       </div>
     </AppLayout>

package/ui/src/styles/interface-management.css

@@ -295,11 +295,7 @@
   padding: 12px 16px !important;
   white-space: nowrap;
   overflow: hidden;
-}
-
-/* 当前响应列需要 overflow: visible 以显示完整的下拉菜单 */
-.interface-table td.current-response-cell {
-  overflow: visible !important;
+  text-overflow: ellipsis;
 }
 
 /* 卡片视图样式 */
@@ -1287,35 +1283,3 @@
 .interface-table .ant-pagination-options {
   margin-right: 16px;
 }
-
-/* 可调整列宽样式 */
-.column-resize-handle {
-  position: absolute;
-  right: -5px;
-  top: 0;
-  bottom: 0;
-  width: 10px;
-  cursor: col-resize;
-  z-index: 1;
-  user-select: none;
-}
-
-.column-resize-handle:hover {
-  background-color: rgba(24, 144, 255, 0.2);
-}
-
-.column-resize-handle::after {
-  content: '';
-  position: absolute;
-  right: 4px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 2px;
-  height: 20px;
-  background-color: #d9d9d9;
-  transition: background-color 0.3s;
-}
-
-.column-resize-handle:hover::after {
-  background-color: #1890ff;
-}

package/ui/src/styles/settings.css

@@ -33,35 +33,6 @@
   font-weight: 500;
 }
 
-/* 设置项样式 */
-.settings-item {
-  padding: 16px 0;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.settings-item:last-child {
-  border-bottom: none;
-}
-
-.settings-item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.settings-item-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: #262626;
-  margin-bottom: 4px;
-}
-
-.settings-item-description {
-  font-size: 12px;
-  color: #8c8c8c;
-  line-height: 1.5;
-}
-
 .settings-section {
   margin-bottom: 32px;
 }

package/COLUMN_RESIZE_IMPLEMENTATION.md

@@ -1,162 +0,0 @@
-# 列宽拖动调整功能实现说明
-
-## 实现日期
-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

@@ -1,156 +0,0 @@
-# 列宽拖动功能测试指南
-
-## 测试环境
-- ✅ 依赖已安装（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/ui/src/components/interface-management/DataManagementDrawer.js

@@ -1,115 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Drawer, Form, Input, message, Button, Space } from 'antd';
-import axios from 'axios';
-import { ResponseContentEditor, PreviewModal, formatResponseContent, refreshCacheAfterUpdate } from '.';
-
-const DataManagementDrawer = ({ visible, onCancel, interfaceItem, onSaved }) => {
-  const [form] = Form.useForm();
-  const [previewVisible, setPreviewVisible] = useState(false);
-  const [previewContent, setPreviewContent] = useState(null);
-
-  useEffect(() => {
-    if (visible && interfaceItem) {
-      let responses = Array.isArray(interfaceItem.responses) ? interfaceItem.responses : [];
-      let activeResponseId = interfaceItem.activeResponseId || (responses[0] && responses[0].id) || '';
-      form.setFieldsValue({ responses, activeResponseId });
-    }
-  }, [visible, interfaceItem]);
-
-  const handlePreview = () => {
-    const values = form.getFieldsValue(true);
-    const responses = Array.isArray(values.responses) ? values.responses : [];
-    const activeResponse = responses.find(r => r.id === values.activeResponseId) || responses[0];
-    if (!activeResponse) {
-      message.error('未找到有效的响应内容');
-      return;
-    }
-    const contentType = 'application/json; charset=utf-8';
-    const formatted = formatResponseContent(activeResponse.content || '', contentType);
-    setPreviewContent({ title: `预览: ${activeResponse.name || '未命名响应'}`, content: formatted, contentType, description: '' });
-    setPreviewVisible(true);
-  };
-
-  const handleOk = async () => {
-    try {
-      await form.validateFields();
-      const values = form.getFieldsValue(true);
-      const payload = {
-        responses: Array.isArray(values.responses) ? values.responses : [],
-        activeResponseId: values.activeResponseId || (values.responses && values.responses[0] && values.responses[0].id) || ''
-      };
-      if (!interfaceItem || !interfaceItem.id) {
-        message.error('缺少接口ID，无法保存');
-        return;
-      }
-      const res = await axios.patch(`/cgi-bin/interfaces/${interfaceItem.id}`, payload);
-      if (res.data && res.data.code === 0) {
-        message.success('保存成功');
-        await refreshCacheAfterUpdate();
-        if (onSaved) onSaved();
-        if (onCancel) onCancel();
-      } else {
-        throw new Error(res.data?.message || '保存失败');
-      }
-    } catch (err) {
-      if (err && err.errorFields) return; // 表单校验错误
-      console.error('保存失败', err);
-      message.error(err.response?.data?.message || err.message || '保存失败');
-    }
-  };
-
-  return (
-    <>
-      <Drawer
-        title="数据管理"
-        placement="right"
-        width={1040}
-        open={visible}
-        onClose={onCancel}
-        destroyOnClose
-        bodyStyle={{ paddingBottom: 80 }}
-        footer={
-          <div style={{ textAlign: 'right' }}>
-            <Space>
-              <Button onClick={onCancel}>取消</Button>
-              <Button type="primary" onClick={handleOk}>保存</Button>
-            </Space>
-          </div>
-        }
-      >
-        <Form form={form} layout="vertical" initialValues={{ responses: [], activeResponseId: '' }}>
-          <Form.Item name="responses" hidden>
-            <Input />
-          </Form.Item>
-          <Form.Item name="activeResponseId" hidden>
-            <Input />
-          </Form.Item>
-          <Form.Item noStyle shouldUpdate>
-            {({ getFieldValue }) => {
-              const responses = getFieldValue('responses') || [];
-              const activeResponseId = getFieldValue('activeResponseId') || (responses[0] && responses[0].id) || '';
-              return (
-                <ResponseContentEditor
-                  form={form}
-                  responses={responses}
-                  activeResponseId={activeResponseId}
-                  onPreview={handlePreview}
-                  enableSorting={true}
-                />
-              );
-            }}
-          </Form.Item>
-        </Form>
-      </Drawer>
-
-      <PreviewModal
-        visible={previewVisible}
-        onCancel={() => setPreviewVisible(false)}
-        previewContent={previewContent}
-      />
-    </>
-  );
-};
-
-export default DataManagementDrawer;
-