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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whistle.mock-plugins",
-  "version": "1.2.1",
+  "version": "1.2.2-beta.3",
   "description": "Whistle 插件，用于快速创建 API 模拟数据",
   "main": "lib/index.js",
   "scripts": {
@@ -39,6 +39,7 @@
     "jest": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-resizable": "^3.0.5",
     "react-sortablejs": "^6.1.4",
     "sortablejs": "^1.15.3",
     "react-markdown": "^8.0.7",

package/ui/src/pages/InterfaceManagementV2.js

@@ -15,6 +15,7 @@ import {
   FileTextOutlined, PlusCircleOutlined, SettingOutlined,
   SearchOutlined, FilterOutlined, ReloadOutlined, DownOutlined, QuestionCircleOutlined, CopyOutlined
 } from '@ant-design/icons';
+// 移除 react-resizable，改用原生实现
 import '../styles/interface-management.css';
 import axios from 'axios';
 
@@ -97,13 +98,27 @@ const InterfaceManagement = () => {
   const [tableConfig, setTableConfig] = useState(() => {
     const cached = localStorage.getItem('interface-table-config');
     const defaultVisibleColumns = COLUMN_CONFIG.map(col => col.key);
-    return cached ? JSON.parse(cached) : {
+    const defaultConfig = {
       sortOrder: null,
       sortField: null,
       pageSize: 10,
       current: 1,
-      visibleColumns: defaultVisibleColumns
+      visibleColumns: defaultVisibleColumns,
+      columnWidths: {
+        currentResponse: 180
+      }
     };
+    
+    if (cached) {
+      const parsedConfig = JSON.parse(cached);
+      // 确保 columnWidths 存在
+      if (!parsedConfig.columnWidths) {
+        parsedConfig.columnWidths = { currentResponse: 180 };
+      }
+      return parsedConfig;
+    }
+    
+    return defaultConfig;
   });
 
   // 保存表格配置到localStorage
@@ -675,7 +690,12 @@ const InterfaceManagement = () => {
   // 重置列配置
   const handleResetColumns = () => {
     const defaultColumns = COLUMN_CONFIG.map(col => col.key);
-    saveTableConfig({ visibleColumns: defaultColumns });
+    saveTableConfig({ 
+      visibleColumns: defaultColumns,
+      columnWidths: {
+        currentResponse: 180
+      }
+    });
   };
 
   // 切换列配置面板显示
@@ -706,6 +726,61 @@ const InterfaceManagement = () => {
     message.success('数据已刷新');
   };
 
+  // 可调整大小的表头组件（使用原生实现）
+  const ResizableTitle = (props) => {
+    const { onResize, width, columnKey, ...restProps } = props;
+
+    if (!width || !onResize) {
+      return <th {...restProps} />;
+    }
+
+    const handleMouseDown = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      const startX = e.clientX;
+      const startWidth = width;
+
+      const handleMouseMove = (moveEvent) => {
+        const deltaX = moveEvent.clientX - startX;
+        const newWidth = Math.max(50, startWidth + deltaX); // 最小宽度 50px
+        onResize(columnKey, newWidth);
+      };
+
+      const handleMouseUp = () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      };
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    };
+
+    return (
+      <th {...restProps} style={{ ...restProps.style, position: 'relative' }}>
+        {restProps.children}
+        <span
+          className="column-resize-handle"
+          onMouseDown={handleMouseDown}
+          onClick={(e) => e.stopPropagation()}
+        />
+      </th>
+    );
+  };
+
+  // 处理列宽调整
+  const handleResize = (columnKey, newWidth) => {
+    const newColumnWidths = {
+      ...tableConfig.columnWidths,
+      [columnKey]: newWidth
+    };
+    saveTableConfig({ columnWidths: newColumnWidths });
+  };
+
   // 批量操作接口状态
   const handleBatchOperation = async (active) => {
     if (!selectedRowKeys || selectedRowKeys.length === 0) {
@@ -803,7 +878,16 @@ const InterfaceManagement = () => {
       title: '当前响应',
       dataIndex: 'activeResponseId',
       key: 'currentResponse',
-      width: 180,
+      width: tableConfig.columnWidths?.currentResponse || 180,
+      className: 'current-response-column',
+      onHeaderCell: (column) => ({
+        width: column.width,
+        columnKey: 'currentResponse',
+        onResize: handleResize,
+      }),
+      onCell: () => ({
+        className: 'current-response-cell',
+      }),
       render: (activeResponseId, record) => {
         // 如果没有响应数据，返回空
         if (!record.responses || !Array.isArray(record.responses) || record.responses.length === 0) {
@@ -822,6 +906,7 @@ const InterfaceManagement = () => {
             style={{ width: '100%' }}
             onChange={(value) => handleResponseSwitch(record.id, value)}
             disabled={record.proxyType !== 'response'}
+            getPopupContainer={(trigger) => trigger.parentNode}
           >
             {record.responses.map(resp => (
               <Option key={resp.id} value={resp.id}>
@@ -1333,6 +1418,11 @@ const InterfaceManagement = () => {
                 selectedRowKeys,
                 onChange: onSelectChange,
               }}
+              components={{
+                header: {
+                  cell: ResizableTitle,
+                },
+              }}
               size="middle"
               pagination={{
                 current: tableConfig.current,

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

@@ -298,6 +298,11 @@
   text-overflow: ellipsis;
 }
 
+/* 当前响应列需要 overflow: visible 以显示完整的下拉菜单 */
+.interface-table td.current-response-cell {
+  overflow: visible !important;
+}
+
 /* 卡片视图样式 */
 .interface-card-view {
   padding-bottom: 20px;
@@ -1283,3 +1288,35 @@
 .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;
+}