whistle.mock-plugins 1.2.0-beta.9 → 1.2.1-beta.1

package/ui/src/pages/InterfaceManagementV2.js

@@ -10,12 +10,12 @@ import AppLayout from '../components/AppLayout';
 import { 
   Table, Button, Modal, Form, Input, Select, message, Switch, 
   Popconfirm, Alert, Space, Card, Badge, Tooltip, Row, Col,
-  Popover, Checkbox, Tag, Input as AntInput, Radio, Drawer, Dropdown, Menu, Collapse, Divider
+  Popover, Checkbox, Tag, Input as AntInput, Radio, Drawer, Dropdown, Menu, Collapse
 } from 'antd';
 import { 
   PlusOutlined, EditOutlined, DeleteOutlined, 
   FileTextOutlined, PlusCircleOutlined, SettingOutlined,
-  SearchOutlined, FilterOutlined, ReloadOutlined, DownOutlined, QuestionCircleOutlined
+  SearchOutlined, FilterOutlined, ReloadOutlined, DownOutlined, QuestionCircleOutlined, CopyOutlined
 } from '@ant-design/icons';
 import '../styles/interface-management.css';
 import axios from 'axios';
@@ -32,6 +32,7 @@ import {
   formatResponseContent,
   generateResponseId
 } from '../components/interface-management';
+import DataManagementModal from '../components/interface-management/DataManagementModal';
 
 const { Option } = Select;
 const { Search } = AntInput;
@@ -70,11 +71,13 @@ const InterfaceManagement = () => {
   const [groups, setGroups] = useState([]);
   const [selectedGroup, setSelectedGroup] = useState(null);
   const [groupActionLoading, setGroupActionLoading] = useState(false);
-  const [newGroupName, setNewGroupName] = useState('');
   
   // 模态框状态
   const [modalVisible, setModalVisible] = useState(false);
   const [previewVisible, setPreviewVisible] = useState(false);
+  const [isDuplicateMode, setIsDuplicateMode] = useState(false);
+  const [dataModalVisible, setDataModalVisible] = useState(false);
+  const [dataModalRecord, setDataModalRecord] = useState(null);
   
   // 列配置状态
   const [columnConfigVisible, setColumnConfigVisible] = useState(false);
@@ -223,17 +226,6 @@ const InterfaceManagement = () => {
       setSelectedGroup(null);
     }
   };
-
-  // 添加新分组
-  const addNewGroup = () => {
-    if (newGroupName.trim() && !groups.includes(newGroupName.trim())) {
-      const updatedGroups = [...groups, newGroupName.trim()].sort();
-      setGroups(updatedGroups);
-      setNewGroupName('');
-      return newGroupName.trim();
-    }
-    return null;
-  };
   
   // 根据分组和搜索关键词筛选接口
   const getFilteredInterfaces = () => {
@@ -265,6 +257,7 @@ const InterfaceManagement = () => {
       return;
     }
     form.resetFields();
+    setIsDuplicateMode(false);
     
     // 创建默认响应
     const defaultResponseId = generateResponseId();
@@ -304,6 +297,7 @@ const InterfaceManagement = () => {
     
     // 重置表单
     form.resetFields();
+    setIsDuplicateMode(false);
     
     // 处理响应数据
     let responses = [];
@@ -363,6 +357,91 @@ const InterfaceManagement = () => {
     setModalVisible(true);
   };
 
+  // 复制新增接口
+  const handleDuplicate = (record) => {
+    if (!selectedFeatureId) {
+      message.warning('请先选择一个功能模块');
+      return;
+    }
+    if (!record) {
+      message.warning('接口数据不完整，无法复制');
+      return;
+    }
+
+    form.resetFields();
+
+    // 深拷贝源数据
+    const source = JSON.parse(JSON.stringify(record));
+
+    // 处理响应数据
+    let responses = [];
+    let activeResponseId = '';
+
+    if (Array.isArray(source.responses) && source.responses.length > 0) {
+      // 为每条响应生成新的ID，并重映射activeResponseId
+      const idMap = new Map();
+      responses = source.responses.map((resp) => {
+        const newId = generateResponseId();
+        idMap.set(resp.id, newId);
+        return {
+          id: newId,
+          name: resp.name || '未命名响应',
+          description: resp.description || '',
+          content: resp.content || '{}'
+        };
+      });
+      const mapped = idMap.get(source.activeResponseId) || responses[0]?.id;
+      activeResponseId = mapped || '';
+    } else if (source.responseContent) {
+      // 兼容旧数据格式
+      const defaultResponseId = generateResponseId();
+      responses = [{
+        id: defaultResponseId,
+        name: '默认响应',
+        description: '',
+        content: source.responseContent
+      }];
+      activeResponseId = defaultResponseId;
+    }
+
+    // 处理自定义请求头 -> 表单需要的数组结构
+    let headerItems = [];
+    if (source.headers && typeof source.headers === 'object') {
+      headerItems = Object.entries(source.headers).map(([headerName, headerValue]) => ({
+        headerName,
+        headerValue
+      }));
+    }
+
+    // 分组值保证为字符串
+    let groupValue = source.group;
+    if (Array.isArray(groupValue)) {
+      groupValue = groupValue.length > 0 ? groupValue[0] : undefined;
+    }
+
+    // 设定表单初值
+    form.setFieldsValue({
+      name: `${source.name || '未命名接口'} - 副本`,
+      group: groupValue || undefined,
+      pattern: source.urlPattern,
+      proxyType: source.proxyType || 'response',
+      statusCode: (source.httpStatus || source.statusCode || 200).toString(),
+      contentType: source.contentType || 'application/json; charset=utf-8',
+      responses,
+      activeResponseId,
+      httpMethod: source.httpMethod || source.method || 'ALL',
+      targetUrl: source.targetUrl || '',
+      headerItems,
+      paramMatchers: Array.isArray(source.paramMatchers) ? source.paramMatchers : [],
+      responseDelay: source.responseDelay ? String(source.responseDelay) : '0'
+    });
+
+    setCurrentResponseId(activeResponseId || null);
+    setEditingInterface(null); // 新增模式
+    setIsDuplicateMode(true);
+    setModalVisible(true);
+  };
+
   const handleDeleteInterface = async (id) => {
     try {
       const response = await axios.delete(`/cgi-bin/interfaces?id=${id}`);
@@ -403,8 +482,9 @@ const InterfaceManagement = () => {
 
   const handleSubmit = async () => {
     try {
-      // 表单验证
-      const values = await form.validateFields();
+      // 表单验证 - 先验证所有字段，再获取所有字段值（包括折叠的）
+      await form.validateFields();
+      const values = form.getFieldsValue(true); // true表示获取所有字段，包括未渲染的
       console.log('表单提交数据:', values);
       
       // 处理自定义请求头
@@ -423,19 +503,19 @@ const InterfaceManagement = () => {
         groupValue = groupValue.length > 0 ? groupValue[0] : '';
       }
       
-      // 构建接口数据
+      // 构建接口数据 - 在编辑模式下，确保关键字段不丢失
       const interfaceData = {
-        name: values.name,
-        group: groupValue || '', // 确保group不为undefined
-        urlPattern: values.pattern,
-        proxyType: values.proxyType,
+        name: values.name || (editingInterface ? editingInterface.name : ''),
+        group: groupValue || (editingInterface ? editingInterface.group : '') || '', // 确保group不为undefined
+        urlPattern: values.pattern || (editingInterface ? editingInterface.urlPattern : ''),
+        proxyType: values.proxyType || (editingInterface ? editingInterface.proxyType : 'response'),
         featureId: selectedFeatureId,
-        responses: values.responses,
-        activeResponseId: values.activeResponseId,
-        httpStatus: parseInt(values.statusCode, 10), // 转换为数字
-        contentType: values.contentType,
-        responseDelay: parseInt(values.responseDelay, 10) || 0,
-        httpMethod: values.httpMethod,
+        responses: values.responses || (editingInterface ? editingInterface.responses : []),
+        activeResponseId: values.activeResponseId || (editingInterface ? editingInterface.activeResponseId : null),
+        httpStatus: parseInt(values.statusCode, 10) || (editingInterface ? editingInterface.httpStatus : 200), // 转换为数字
+        contentType: values.contentType || (editingInterface ? editingInterface.contentType : 'application/json; charset=utf-8'),
+        responseDelay: parseInt(values.responseDelay, 10) || (editingInterface ? editingInterface.responseDelay : 0) || 0,
+        httpMethod: values.httpMethod || (editingInterface ? editingInterface.httpMethod : 'ALL'),
         active: true
       };
       
@@ -447,13 +527,11 @@ const InterfaceManagement = () => {
         interfaceData.headers = headers;
       }
       
-      // 添加参数匹配规则
-      if (values.paramMatchers && Array.isArray(values.paramMatchers) && values.paramMatchers.length > 0) {
-        // 过滤掉空的匹配规则
-        interfaceData.paramMatchers = values.paramMatchers.filter(matcher => 
-          matcher && matcher.paramPath && matcher.paramValue
-        );
-      }
+      // 添加参数匹配规则（始终发送，空数组用于清空后端旧值）
+      const filteredParamMatchers = Array.isArray(values.paramMatchers)
+        ? values.paramMatchers.filter(matcher => matcher && matcher.paramPath && matcher.paramValue)
+        : [];
+      interfaceData.paramMatchers = filteredParamMatchers;
       
       console.log('提交接口数据:', interfaceData);
       
@@ -494,6 +572,7 @@ const InterfaceManagement = () => {
 
   const handleCancel = () => {
     setModalVisible(false);
+    setIsDuplicateMode(false);
   };
 
   const handleSelectFeature = (featureId) => {
@@ -923,7 +1002,7 @@ const InterfaceManagement = () => {
     {
       title: '操作',
       key: 'action',
-      width: 180,
+      width: 220,
       render: (_, record) => (
         <div className="action-buttons">
           <Button 
@@ -931,6 +1010,22 @@ const InterfaceManagement = () => {
             icon={<EditOutlined />} 
             onClick={() => handleEditInterface(record)}
           />
+          {record.proxyType === 'response' && (
+            <Tooltip title="数据管理">
+              <Button 
+                type="text" 
+                icon={<FileTextOutlined />} 
+                onClick={() => { setDataModalRecord(record); setDataModalVisible(true); }}
+              />
+            </Tooltip>
+          )}
+          <Tooltip title="复制新增">
+            <Button 
+              type="text" 
+              icon={<CopyOutlined />} 
+              onClick={() => handleDuplicate(record)}
+            />
+          </Tooltip>
           <Popconfirm
             title="确定要删除此接口吗？"
             onConfirm={() => handleDeleteInterface(record.id)}
@@ -1283,7 +1378,7 @@ const InterfaceManagement = () => {
               alignItems: 'center',
               gap: '8px'
             }}>
-              <span>{editingInterface ? '编辑接口' : '添加接口'}</span>
+              <span>{editingInterface ? '编辑接口' : (isDuplicateMode ? '复制新增接口' : '添加接口')}</span>
               <Badge 
                 count="配置向导" 
                 style={{ 
@@ -1332,8 +1427,8 @@ const InterfaceManagement = () => {
               <Collapse 
                 defaultActiveKey={
                   editingInterface && editingInterface.proxyType === 'response'
-                    ? ['3'] 
-                    : ['1', '2', '3']
+                    ? ['3'] // mock代理场景：只展开第3步（高级配置）
+                    : ['1', '2', '3'] // 其他场景：展开所有步骤
                 }
                 style={{ marginBottom: '16px' }}
                 ghost
@@ -1365,55 +1460,27 @@ const InterfaceManagement = () => {
                   tooltip="为接口设置分组，便于管理和批量操作"
                 >
                   <Select
-                    placeholder="选择或输入新分组名称"
+                    placeholder="选择或创建分组"
                     showSearch
                     allowClear
                     style={{ width: '100%' }}
-                    dropdownMatchSelectWidth={false}
-                    filterOption={(input, option) =>
-                      option?.children?.toLowerCase()?.indexOf(input.toLowerCase()) >= 0
-                    }
+                    mode="tags"
+                    maxTagCount="responsive"
+                    maxTagTextLength={10}
+                    onChange={(value) => {
+                      // 如果值是数组（tags模式），只取第一个元素
+                      if (Array.isArray(value) && value.length > 0) {
+                        // 如果第一个元素是空字符串，则设置为undefined
+                        const groupValue = value[0] === '' ? undefined : value[0];
+                        form.setFieldsValue({ group: groupValue });
+                      }
+                    }}
                     onInputKeyDown={(e) => {
                       // 防止回车键提交表单
                       if (e.key === 'Enter') {
                         e.stopPropagation();
                       }
                     }}
-                    dropdownRender={(menu) => (
-                      <div>
-                        {menu}
-                        <Divider style={{ margin: '4px 0' }} />
-                        <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
-                          <Input
-                            style={{ flex: 'auto' }}
-                            value={newGroupName}
-                            onChange={(e) => setNewGroupName(e.target.value)}
-                            placeholder="输入新分组名称"
-                            onPressEnter={(e) => {
-                              e.stopPropagation();
-                              const groupName = addNewGroup();
-                              if (groupName) {
-                                form.setFieldsValue({ group: groupName });
-                              }
-                            }}
-                          />
-                          <Button
-                            type="text"
-                            icon={<PlusOutlined />}
-                            style={{ flex: 'none', padding: '4px 8px', cursor: 'pointer' }}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              const groupName = addNewGroup();
-                              if (groupName) {
-                                form.setFieldsValue({ group: groupName });
-                              }
-                            }}
-                          >
-                            添加
-                          </Button>
-                        </div>
-                      </div>
-                    )}
                   >
                     {Array.from(new Set(interfaces.map(item => item.group).filter(Boolean))).map(group => (
                       <Option key={group} value={group}>{group}</Option>
@@ -1871,6 +1938,16 @@ const InterfaceManagement = () => {
           onCancel={() => setPreviewVisible(false)}
           previewContent={previewContent}
         />
+
+        {/* 数据管理弹窗 */}
+        <DataManagementModal
+          visible={dataModalVisible}
+          onCancel={() => { setDataModalVisible(false); setDataModalRecord(null); }}
+          interfaceItem={dataModalRecord}
+          onSaved={() => {
+            fetchInterfaces();
+          }}
+        />
       </div>
     </AppLayout>
   );

package/ui/src/pages/MockDataV2.js

@@ -6,8 +6,8 @@
 import React, { useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import AppLayout from '../components/AppLayout';
-import { Card, Row, Col, Button, Modal, Form, Input, message, Switch, Empty, Spin, Typography, Tooltip, Badge, Select, Pagination, Tag, List } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, ExportOutlined, InfoCircleOutlined, CalendarOutlined, SortAscendingOutlined, AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { Card, Row, Col, Button, Modal, Form, Input, message, Switch, Empty, Spin, Typography, Tooltip, Badge, Select, Pagination } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, ExportOutlined, InfoCircleOutlined, CalendarOutlined, SortAscendingOutlined } from '@ant-design/icons';
 import '../styles/mock-data.css';
 import axios from 'axios';
 
@@ -34,12 +34,6 @@ const MockData = () => {
   const [loading, setLoading] = useState(true);
   const [form] = Form.useForm();
 
-  // 视图模式配置（卡片/列表）
-  const [viewMode, setViewMode] = useState(() => {
-    const savedViewMode = localStorage.getItem('feature-view-mode');
-    return savedViewMode === 'list' ? 'list' : 'card'; // 默认为卡片视图
-  });
-  
   // 排序和分页配置（支持缓存）
   const [listConfig, setListConfig] = useState(() => {
     const cached = localStorage.getItem('feature-list-config');
@@ -57,13 +51,6 @@ const MockData = () => {
     setListConfig(newConfig);
     localStorage.setItem('feature-list-config', JSON.stringify(newConfig));
   };
-  
-  // 切换视图模式（卡片/列表）
-  const toggleViewMode = () => {
-    const newMode = viewMode === 'card' ? 'list' : 'card';
-    setViewMode(newMode);
-    localStorage.setItem('feature-view-mode', newMode);
-  };
 
   // 加载功能列表
   useEffect(() => {
@@ -426,98 +413,6 @@ const MockData = () => {
     return sortedFeatures.slice(startIndex, endIndex);
   };
 
-  // 渲染功能模块列表项
-  const renderFeatureListItem = (feature) => {
-    const formattedDate = feature.createdAt 
-      ? new Date(feature.createdAt).toLocaleDateString()
-      : '未知日期';
-    
-    return (
-      <div 
-        key={feature.id} 
-        className={`feature-list-item ${!feature.active ? 'inactive-feature' : ''}`}
-        onClick={() => viewInterfaces(feature)}
-      >
-        <div className="feature-list-content">
-          <div className="feature-list-main">
-            <div className="feature-list-name">
-              <h3>{feature.name}</h3>
-              {!feature.active && <Tag color="red">已禁用</Tag>}
-              {feature.active && <Tag color="green">已启用</Tag>}
-            </div>
-            <div className="feature-list-description">
-              {feature.description || '无描述'}
-            </div>
-          </div>
-          
-          <div className="feature-list-meta">
-            <div className="feature-list-stats">
-              <span><InfoCircleOutlined /> {feature.interfaceCount || 0} 个接口</span>
-              <span><CalendarOutlined /> {formattedDate}</span>
-            </div>
-          </div>
-        </div>
-        
-        <div className="feature-list-actions">
-          <Switch
-            checked={feature.active}
-            onChange={(checked, e) => {
-              e.stopPropagation();
-              handleToggleActive(feature.id, feature.active);
-            }}
-            onClick={(e) => e.stopPropagation()}
-            size="small"
-          />
-          <Tooltip title="管理接口">
-            <Button 
-              icon={<ApiOutlined />}
-              size="small"
-              type="text"
-              onClick={(e) => {
-                e.stopPropagation();
-                viewInterfaces(feature);
-              }}
-            />
-          </Tooltip>
-          <Tooltip title="编辑功能">
-            <Button 
-              icon={<EditOutlined />}
-              size="small"
-              type="text"
-              onClick={(e) => {
-                e.stopPropagation();
-                openModal(feature);
-              }}
-            />
-          </Tooltip>
-          <Tooltip title="删除功能">
-            <Button 
-              icon={<DeleteOutlined />}
-              size="small"
-              type="text"
-              danger
-              onClick={(e) => {
-                e.stopPropagation();
-                deleteFeature(feature.id);
-              }}
-            />
-          </Tooltip>
-          <Tooltip title="导出配置">
-            <Button 
-              icon={<ExportOutlined />}
-              size="small"
-              type="text"
-              onClick={(e) => {
-                e.stopPropagation();
-                exportFeatureConfig(feature);
-              }}
-            />
-          </Tooltip>
-        </div>
-      </div>
-    );
-  };
-  
   // 渲染功能模块卡片
   const renderFeatureCard = (feature) => {
     const formattedDate = feature.createdAt 
@@ -722,7 +617,7 @@ const MockData = () => {
               </Col>
               
               {/* 分页控制区域 */}
-              <Col xs={24} sm={12} md={5} lg={6}>
+              <Col xs={24} sm={24} md={8} lg={9}>
                 <div className="pagination-controls">
                   <div className="control-group">
                     <span className="control-label">每页显示</span>
@@ -743,22 +638,6 @@ const MockData = () => {
                   </div>
                 </div>
               </Col>
-              
-              {/* 视图切换按钮区域 */}
-              <Col xs={24} sm={12} md={3} lg={3}>
-                <div className="view-toggle-controls">
-                  <Tooltip title={viewMode === 'card' ? '切换到列表视图' : '切换到卡片视图'}>
-                    <Button
-                      type="default"
-                      icon={viewMode === 'card' ? <UnorderedListOutlined /> : <AppstoreOutlined />}
-                      onClick={toggleViewMode}
-                      className="view-toggle-button"
-                    >
-                      {viewMode === 'card' ? '列表视图' : '卡片视图'}
-                    </Button>
-                  </Tooltip>
-                </div>
-              </Col>
             </Row>
           </Card>
         )}
@@ -771,16 +650,9 @@ const MockData = () => {
             </div>
           ) : mockFeatures.length > 0 ? (
             <>
-              {/* 根据视图模式渲染不同的视图 */}
-              {viewMode === 'card' ? (
-                <Row gutter={[20, 20]} className="feature-grid">
-                  {getPaginatedFeatures().map(feature => renderFeatureCard(feature))}
-                </Row>
-              ) : (
-                <div className="feature-list-view">
-                  {getPaginatedFeatures().map(feature => renderFeatureListItem(feature))}
-                </div>
-              )}
+              <Row gutter={[20, 20]} className="feature-grid">
+                {getPaginatedFeatures().map(feature => renderFeatureCard(feature))}
+              </Row>
               
               {/* 分页组件 */}
               {mockFeatures.length > listConfig.pageSize && (