whistle.mock-plugins 1.2.2-beta.2 → 1.2.2-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whistle.mock-plugins",
-  "version": "1.2.2-beta.2",
+  "version": "1.2.2-beta.4",
   "description": "Whistle 插件，用于快速创建 API 模拟数据",
   "main": "lib/index.js",
   "scripts": {

package/ui/src/components/interface-management/DataManagementDrawer.js

@@ -0,0 +1,115 @@
+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;
+

package/ui/src/components/interface-management/index.js

@@ -2,5 +2,6 @@
 export { default as ResponseContentEditor } from './ResponseContentEditor';
 export { default as InterfaceTestModal } from './InterfaceTestModal';
 export { default as PreviewModal } from './PreviewModal';
+export { default as DataManagementDrawer } from './DataManagementDrawer';
 export * from './constants';
 export * from './utils'; 

package/ui/src/pages/InterfaceManagementV2.js

@@ -32,6 +32,7 @@ import {
   generateResponseId
 } from '../components/interface-management';
 import DataManagementModal from '../components/interface-management/DataManagementModal';
+import { DataManagementDrawer } from '../components/interface-management';
 
 const { Option } = Select;
 const { Search } = AntInput;
@@ -91,6 +92,9 @@ const InterfaceManagement = () => {
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [drawerVisible, setDrawerVisible] = useState(false);
   
+  // 数据管理显示模式
+  const [displayMode, setDisplayMode] = useState('modal');
+  
   // 表单实例
   const [form] = Form.useForm();
 
@@ -138,6 +142,29 @@ const InterfaceManagement = () => {
     }
   }, [selectedFeatureId]);
 
+  // 监听数据管理显示模式变化
+  useEffect(() => {
+    // 初始化时从 localStorage 读取配置
+    const savedMode = localStorage.getItem('dataManagementDisplayMode');
+    if (savedMode) {
+      setDisplayMode(savedMode);
+    }
+
+    // 监听 storage 事件，实现设置立即生效
+    const handleStorageChange = () => {
+      const newMode = localStorage.getItem('dataManagementDisplayMode');
+      if (newMode) {
+        setDisplayMode(newMode);
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
+
   // 获取当前选中的功能模块
   const selectedFeature = features.find(f => f.id === selectedFeatureId);
 
@@ -693,7 +720,17 @@ const InterfaceManagement = () => {
     saveTableConfig({ 
       visibleColumns: defaultColumns,
       columnWidths: {
-        currentResponse: 180
+        active: 80,
+        name: 150,
+        group: 120,
+        urlPattern: 250,
+        proxyType: 120,
+        currentResponse: 180,
+        responseDelay: 100,
+        httpStatus: 100,
+        contentType: 120,
+        targetUrl: 200,
+        customHeaders: 100
       }
     });
   };
@@ -740,11 +777,21 @@ const InterfaceManagement = () => {
       
       const startX = e.clientX;
       const startWidth = width;
+      let currentWidth = startWidth;
 
       const handleMouseMove = (moveEvent) => {
         const deltaX = moveEvent.clientX - startX;
-        const newWidth = Math.max(50, startWidth + deltaX); // 最小宽度 50px
-        onResize(columnKey, newWidth);
+        currentWidth = Math.max(50, startWidth + deltaX); // 最小宽度 50px
+        
+        // 实时更新列宽（不保存到 localStorage）
+        const newColumnWidths = {
+          ...tableConfig.columnWidths,
+          [columnKey]: currentWidth
+        };
+        setTableConfig(prev => ({
+          ...prev,
+          columnWidths: newColumnWidths
+        }));
       };
 
       const handleMouseUp = () => {
@@ -752,6 +799,9 @@ const InterfaceManagement = () => {
         document.removeEventListener('mouseup', handleMouseUp);
         document.body.style.cursor = '';
         document.body.style.userSelect = '';
+        
+        // 拖动结束后保存到 localStorage
+        onResize(columnKey, currentWidth);
       };
 
       document.addEventListener('mousemove', handleMouseMove);
@@ -815,7 +865,12 @@ const InterfaceManagement = () => {
       title: '状态',
       dataIndex: 'active',
       key: 'active',
-      width: 80,
+      width: tableConfig.columnWidths?.active || 80,
+      onHeaderCell: (column) => ({
+        width: column.width,
+        columnKey: 'active',
+        onResize: handleResize,
+      }),
       render: (active, record) => (
         <Switch
           checked={active !== false}
@@ -828,6 +883,12 @@ const InterfaceManagement = () => {
       title: '名称',
       dataIndex: 'name',
       key: 'name',
+      width: tableConfig.columnWidths?.name || 150,
+      onHeaderCell: (column) => ({
+        width: column.width,
+        columnKey: 'name',
+        onResize: handleResize,
+      }),
       sorter: (a, b) => a.name.localeCompare(b.name),
       render: (text) => <span className="interface-name">{text}</span>,
     },
@@ -835,7 +896,12 @@ const InterfaceManagement = () => {
       title: '分组',
       dataIndex: 'group',
       key: 'group',
-      width: 120,
+      width: tableConfig.columnWidths?.group || 120,
+      onHeaderCell: (column) => ({
+        width: column.width,
+        columnKey: 'group',
+        onResize: handleResize,
+      }),
       sorter: (a, b) => {
         const groupA = a.group || '';
         const groupB = b.group || '';
@@ -856,6 +922,12 @@ const InterfaceManagement = () => {
       title: 'URL匹配规则',
       dataIndex: 'urlPattern',
       key: 'urlPattern',
+      width: tableConfig.columnWidths?.urlPattern || 250,
+      onHeaderCell: (column) => ({
+        width: column.width,
+        columnKey: 'urlPattern',
+        onResize: handleResize,
+      }),
       ellipsis: true,
       render: (text) => <span className="url-pattern">{text}</span>,
     },
@@ -863,7 +935,12 @@ const InterfaceManagement = () => {
       title: '处理方式',
       dataIndex: 'proxyType',
       key: 'proxyType',
-      width: 120,
+      width: tableConfig.columnWidths?.proxyType || 120,
+      onHeaderCell: (column) => ({
+        width: column.width,
+        columnKey: 'proxyType',
+        onResize: handleResize,
+      }),
       render: (text) => {
         const proxyType = proxyTypes.find(item => item.value === text);
         return (
@@ -879,11 +956,15 @@ const InterfaceManagement = () => {
       dataIndex: 'activeResponseId',
       key: 'currentResponse',
       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) {
@@ -917,7 +998,12 @@ const InterfaceManagement = () => {
       title: '延迟(毫秒)',
       dataIndex: 'responseDelay',
       key: 'responseDelay',
-      width: 100,
+      width: tableConfig.columnWidths?.responseDelay || 100,
+      onHeaderCell: (column) => ({
+        width: column.width,
+        columnKey: 'responseDelay',
+        onResize: handleResize,
+      }),
       sorter: (a, b) => (a.responseDelay || 0) - (b.responseDelay || 0),
       render: (delay) => {
         const delayValue = parseInt(delay, 10) || 0;
@@ -932,7 +1018,12 @@ const InterfaceManagement = () => {
       title: '状态码',
       dataIndex: 'httpStatus',
       key: 'httpStatus',
-      width: 100,
+      width: tableConfig.columnWidths?.httpStatus || 100,
+      onHeaderCell: (column) => ({
+        width: column.width,
+        columnKey: 'httpStatus',
+        onResize: handleResize,
+      }),
       render: (status) => {
         const statusCode = status || 200;
         let statusClass = 'status-success';
@@ -948,7 +1039,12 @@ const InterfaceManagement = () => {
       title: '内容类型',
       dataIndex: 'contentType',
       key: 'contentType',
-      width: 120,
+      width: tableConfig.columnWidths?.contentType || 120,
+      onHeaderCell: (column) => ({
+        width: column.width,
+        columnKey: 'contentType',
+        onResize: handleResize,
+      }),
       sorter: (a, b) => {
         const aType = a.contentType || '';
         const bType = b.contentType || '';
@@ -967,6 +1063,12 @@ const InterfaceManagement = () => {
       title: '目标URL',
       dataIndex: 'targetUrl',
       key: 'targetUrl',
+      width: tableConfig.columnWidths?.targetUrl || 200,
+      onHeaderCell: (column) => ({
+        width: column.width,
+        columnKey: 'targetUrl',
+        onResize: handleResize,
+      }),
       ellipsis: true,
       sorter: (a, b) => {
         const aUrl = a.targetUrl || '';
@@ -982,7 +1084,12 @@ const InterfaceManagement = () => {
       title: '自定义头',
       dataIndex: 'customHeaders',
       key: 'customHeaders',
-      width: 100,
+      width: tableConfig.columnWidths?.customHeaders || 100,
+      onHeaderCell: (column) => ({
+        width: column.width,
+        columnKey: 'customHeaders',
+        onResize: handleResize,
+      }),
       sorter: (a, b) => {
         const aCount = Object.keys(a.customHeaders || {}).length;
         const bCount = Object.keys(b.customHeaders || {}).length;
@@ -2008,15 +2115,26 @@ const InterfaceManagement = () => {
           previewContent={previewContent}
         />
 
-        {/* 数据管理弹窗 */}
-        <DataManagementModal
-          visible={dataModalVisible}
-          onCancel={() => { setDataModalVisible(false); setDataModalRecord(null); }}
-          interfaceItem={dataModalRecord}
-          onSaved={() => {
-            fetchInterfaces();
-          }}
-        />
+        {/* 数据管理弹窗/抽屉 */}
+        {displayMode === 'drawer' ? (
+          <DataManagementDrawer
+            visible={dataModalVisible}
+            onCancel={() => { setDataModalVisible(false); setDataModalRecord(null); }}
+            interfaceItem={dataModalRecord}
+            onSaved={() => {
+              fetchInterfaces();
+            }}
+          />
+        ) : (
+          <DataManagementModal
+            visible={dataModalVisible}
+            onCancel={() => { setDataModalVisible(false); setDataModalRecord(null); }}
+            interfaceItem={dataModalRecord}
+            onSaved={() => {
+              fetchInterfaces();
+            }}
+          />
+        )}
       </div>
     </AppLayout>
   );

package/ui/src/pages/Settings.js

@@ -1,11 +1,30 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import AppLayout from '../components/AppLayout';
-import { Card, Typography, Empty } from 'antd';
+import { Card, Typography, Switch, Space, Divider } from 'antd';
 import '../styles/settings.css';
 
 const { Title, Text, Paragraph } = Typography;
 
 const Settings = () => {
+  const [displayMode, setDisplayMode] = useState('modal');
+
+  useEffect(() => {
+    // 从 localStorage 读取配置
+    const savedMode = localStorage.getItem('dataManagementDisplayMode');
+    if (savedMode) {
+      setDisplayMode(savedMode);
+    }
+  }, []);
+
+  const handleDisplayModeChange = (checked) => {
+    const newMode = checked ? 'drawer' : 'modal';
+    setDisplayMode(newMode);
+    localStorage.setItem('dataManagementDisplayMode', newMode);
+    
+    // 触发 storage 事件，通知其他页面
+    window.dispatchEvent(new Event('storage'));
+  };
+
   return (
     <AppLayout>
       <div className="page-container">
@@ -19,10 +38,25 @@ const Settings = () => {
         </div>
 
         <Card title="界面设置" className="settings-card">
-          <Empty 
-            description="暂无可配置项" 
-            style={{ padding: '40px 0' }}
-          />
+          <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>
         </Card>
       </div>
     </AppLayout>

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

@@ -294,20 +294,12 @@
 .interface-table td {
   padding: 12px 16px !important;
   white-space: nowrap;
-  overflow: visible !important;
+  overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/* 确保表格容器不裁剪下拉菜单 */
-.interface-list-container {
-  overflow: visible !important;
-}
-
-.interface-list-container .ant-table-container {
-  overflow: visible !important;
-}
-
-.interface-list-container .ant-table-body {
+/* 当前响应列需要 overflow: visible 以显示完整的下拉菜单 */
+.interface-table td.current-response-cell {
   overflow: visible !important;
 }
 

package/ui/src/styles/settings.css

@@ -33,6 +33,35 @@
   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;
 }