whistle.mock-plugins 1.2.1-beta.6 → 1.2.2-beta.10

package/ui/src/pages/InterfaceManagementV2.js

@@ -42,13 +42,13 @@ const COLUMN_CONFIG = [
   { key: 'group', title: '分组', required: false },
   { key: 'urlPattern', title: 'URL匹配规则', required: false },
   { key: 'proxyType', title: '处理方式', required: false },
-  { key: 'currentResponse', title: '当前响应', required: false },
+  { key: 'currentResponse', title: '响应配置', required: false },
   { key: 'responseDelay', title: '延迟(毫秒)', required: false },
   { key: 'httpStatus', title: '状态码', required: false },
   { key: 'contentType', title: '内容类型', required: false },
   { key: 'targetUrl', title: '目标URL', required: false },
   { key: 'customHeaders', title: '自定义头', required: false },
-  { key: 'paramMatchers', title: '参数匹配', required: false },
+  { key: 'paramMatchers', title: '匹配规则', required: false },
   { key: 'httpMethod', title: '请求方法', required: false },
   { key: 'action', title: '操作', required: true }
 ];
@@ -302,7 +302,17 @@ const InterfaceManagement = () => {
     let activeResponseId = '';
     
     if (record.responses && Array.isArray(record.responses) && record.responses.length > 0) {
-      responses = record.responses;
+      responses = record.responses.map(r => ({
+        ...r,
+        paramMatchers: r.paramMatchers || []
+      }));
+      // 向后兼容：旧数据接口级 paramMatchers 迁移到第一个响应
+      if (
+        record.paramMatchers && Array.isArray(record.paramMatchers) && record.paramMatchers.length > 0 &&
+        responses.every(r => !r.paramMatchers || r.paramMatchers.length === 0)
+      ) {
+        responses[0] = { ...responses[0], paramMatchers: record.paramMatchers };
+      }
       activeResponseId = record.activeResponseId || responses[0].id;
     } else if (record.responseContent) {
       // 兼容旧数据格式，创建默认响应
@@ -502,13 +512,22 @@ const InterfaceManagement = () => {
       }
       
       // 构建接口数据 - 在编辑模式下，确保关键字段不丢失
+      // responses 隐藏字段可能被 Input 序列化为字符串，需要解析还原
+      let responsesValue = values.responses;
+      if (typeof responsesValue === 'string') {
+        try { responsesValue = JSON.parse(responsesValue); } catch (e) { responsesValue = []; }
+      }
+      if (!Array.isArray(responsesValue)) {
+        responsesValue = editingInterface ? editingInterface.responses : [];
+      }
+
       const interfaceData = {
         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 || (editingInterface ? editingInterface.responses : []),
+        responses: responsesValue,
         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'),
@@ -800,35 +819,82 @@ const InterfaceManagement = () => {
       },
     },
     {
-      title: '当前响应',
+      title: '响应配置',
       dataIndex: 'activeResponseId',
       key: 'currentResponse',
-      width: 180,
+      width: 160,
       render: (activeResponseId, record) => {
-        // 如果没有响应数据，返回空
+        if (record.proxyType !== 'response') {
+          return <span style={{ color: '#ccc' }}>-</span>;
+        }
         if (!record.responses || !Array.isArray(record.responses) || record.responses.length === 0) {
-          return <span className="no-response">无响应数据</span>;
+          return <span style={{ color: '#ff4d4f', fontSize: '12px' }}>无响应数据</span>;
         }
-        
-        // 找到当前激活的响应
-        const activeResponse = record.responses.find(resp => resp.id === activeResponseId);
-        
-        // 如果没有找到激活的响应，使用第一个
-        const currentResponse = activeResponse || record.responses[0];
-        
+
+        const total = record.responses.length;
+        const hasSmartMatch = record.responses.some(
+          r => r.paramMatchers && Array.isArray(r.paramMatchers) && r.paramMatchers.length > 0
+        );
+
+        // 场景一：所有响应都没有规则 → 显示 Select 快捷切换
+        if (!hasSmartMatch) {
+          return (
+            <Select
+              value={activeResponseId || record.responses[0]?.id}
+              style={{ width: '100%' }}
+              size="small"
+              onChange={(value) => handleResponseSwitch(record.id, value)}
+            >
+              {record.responses.map(resp => (
+                <Option key={resp.id} value={resp.id}>
+                  {resp.name}
+                </Option>
+              ))}
+            </Select>
+          );
+        }
+
+        // 场景二/三：有响应含规则 → 显示 Tag 摘要
+        const tooltipContent = (
+          <div style={{ maxWidth: 260 }}>
+            {record.responses.map((resp) => {
+              const matchers = resp.paramMatchers || [];
+              return (
+                <div key={resp.id} style={{ marginBottom: 6 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                    {matchers.length > 0 ? (
+                      <Tag color="blue" style={{ fontSize: '11px', margin: 0 }}>{matchers.length}条规则</Tag>
+                    ) : (
+                      <Tag color="default" style={{ fontSize: '11px', margin: 0 }}>兜底</Tag>
+                    )}
+                    <span style={{ fontWeight: resp.id === activeResponseId ? 'bold' : 'normal' }}>
+                      {resp.name}
+                    </span>
+                  </div>
+                  {matchers.length > 0 && (
+                    <div style={{ paddingLeft: 8, marginTop: 2 }}>
+                      {matchers.map((m, i) => (
+                        <div key={i} style={{ fontSize: '11px', color: '#666' }}>
+                          {m.paramPath} = {m.paramValue}
+                          <span style={{ color: '#52c41a', marginLeft: 4 }}>
+                            ({m.matchType === 'exact' ? '精确' : m.matchType === 'contains' ? '包含' : '正则'})
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        );
+
         return (
-          <Select
-            value={activeResponseId || record.responses[0]?.id}
-            style={{ width: '100%' }}
-            onChange={(value) => handleResponseSwitch(record.id, value)}
-            disabled={record.proxyType !== 'response'}
-          >
-            {record.responses.map(resp => (
-              <Option key={resp.id} value={resp.id}>
-                {resp.name}
-              </Option>
-            ))}
-          </Select>
+          <Tooltip title={tooltipContent} placement="left">
+            <Tag color="blue" style={{ cursor: 'default' }}>
+              智能匹配 · {total}个响应
+            </Tag>
+          </Tooltip>
         );
       },
     },
@@ -945,38 +1011,75 @@ const InterfaceManagement = () => {
       }
     },
     {
-      title: '参数匹配',
-      dataIndex: 'paramMatchers',
+      title: '匹配规则',
+      dataIndex: 'responses',
       key: 'paramMatchers',
       width: 100,
-      render: (_, record) => {
+      render: (responses, record) => {
         if (record.proxyType !== 'response') {
-          return '-';
+          return <span style={{ color: '#ccc' }}>-</span>;
         }
-        
-        const matchers = record.paramMatchers || [];
-        const count = matchers.length;
-        
-        if (count === 0) {
-          return '-';
+
+        // 汇总所有响应的 paramMatchers（响应级），兼容旧数据接口级 paramMatchers
+        const responsesWithMatchers = Array.isArray(responses)
+          ? responses.filter(r => r.paramMatchers && Array.isArray(r.paramMatchers) && r.paramMatchers.length > 0)
+          : [];
+        const totalRules = responsesWithMatchers.reduce((sum, r) => sum + r.paramMatchers.length, 0);
+
+        // 兼容旧数据：接口级 paramMatchers
+        const legacyMatchers = record.paramMatchers || [];
+
+        if (totalRules === 0 && legacyMatchers.length === 0) {
+          return <span style={{ color: '#ccc' }}>-</span>;
         }
-        
-        return (
-          <Tooltip title={
-            <div>
-              {matchers.map((matcher, index) => (
-                <div key={index}>
-                  {matcher.paramPath}: {matcher.paramValue}
-                  <span style={{ color: '#52c41a', marginLeft: 4 }}>
-                    ({matcher.matchType === 'exact' ? '精确' : matcher.matchType === 'contains' ? '包含' : '正则'})
-                  </span>
+
+        // 新数据：按响应分组展示
+        if (totalRules > 0) {
+          const tooltipContent = (
+            <div style={{ maxWidth: 280 }}>
+              {responsesWithMatchers.map(resp => (
+                <div key={resp.id} style={{ marginBottom: 6 }}>
+                  <div style={{ fontWeight: 'bold', marginBottom: 2 }}>{resp.name}：</div>
+                  {resp.paramMatchers.map((m, i) => (
+                    <div key={i} style={{ paddingLeft: 8, fontSize: '12px' }}>
+                      {m.paramPath} = {m.paramValue}
+                      <span style={{ color: '#52c41a', marginLeft: 4 }}>
+                        ({m.matchType === 'exact' ? '精确' : m.matchType === 'contains' ? '包含' : '正则'})
+                      </span>
+                    </div>
+                  ))}
                 </div>
               ))}
+              {Array.isArray(responses) && responses.some(r => !r.paramMatchers || r.paramMatchers.length === 0) && (
+                <div style={{ color: '#999', fontSize: '12px', marginTop: 4 }}>
+                  + 兜底响应（无规则）
+                </div>
+              )}
             </div>
-          }>
-            <span style={{ color: '#1890ff' }}>
-              {count}条规则
-            </span>
+          );
+          return (
+            <Tooltip title={tooltipContent} placement="left">
+              <span style={{ color: '#1890ff', cursor: 'default' }}>{totalRules}条规则</span>
+            </Tooltip>
+          );
+        }
+
+        // 旧数据兼容展示
+        const tooltipContent = (
+          <div>
+            {legacyMatchers.map((matcher, index) => (
+              <div key={index}>
+                {matcher.paramPath}: {matcher.paramValue}
+                <span style={{ color: '#52c41a', marginLeft: 4 }}>
+                  ({matcher.matchType === 'exact' ? '精确' : matcher.matchType === 'contains' ? '包含' : '正则'})
+                </span>
+              </div>
+            ))}
+          </div>
+        );
+        return (
+          <Tooltip title={tooltipContent} placement="left">
+            <span style={{ color: '#fa8c16', cursor: 'default' }}>{legacyMatchers.length}条(旧)</span>
           </Tooltip>
         );
       }
@@ -1698,97 +1801,9 @@ const InterfaceManagement = () => {
                         </div>
                       </div>
 
-                      {/* 请求入参匹配设置 */}
-                      <Form.Item
-                        label="请求入参匹配"
-                        tooltip="设置请求参数的匹配条件，只有当请求参数满足条件时才返回对应的响应。支持嵌套属性路径，如：a.b.c"
-                      >
-                        <Form.List name="paramMatchers">
-                          {(fields, { add, remove }) => (
-                            <>
-                              {fields.map(({ key, name, ...restField }) => (
-                                <div key={key} style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px' }}>
-                                  <Form.Item
-                                    {...restField}
-                                    name={[name, 'paramPath']}
-                                    rules={[
-                                      { required: true, message: '请输入参数路径' },
-                                      {
-                                        pattern: /^[a-zA-Z_$][a-zA-Z0-9_$.]*$/,
-                                        message: '请输入有效的参数路径，如：userId 或 data.user.id'
-                                      }
-                                    ]}
-                                    style={{ flex: 1, margin: 0 }}
-                                  >
-                                    <Input placeholder="参数路径（如：userId 或 data.user.id）" />
-                                  </Form.Item>
-                                  <Form.Item
-                                    {...restField}
-                                    name={[name, 'paramValue']}
-                                    rules={[{ required: true, message: '请输入期望值' }]}
-                                    style={{ flex: 1, margin: 0 }}
-                                  >
-                                    <Input placeholder="期望值（如：123 或 admin）" />
-                                  </Form.Item>
-                                  <Form.Item
-                                    {...restField}
-                                    name={[name, 'matchType']}
-                                    style={{ width: 100, margin: 0 }}
-                                    initialValue="exact"
-                                  >
-                                    <Select placeholder="匹配类型">
-                                      <Option value="exact">精确匹配</Option>
-                                      <Option value="contains">包含</Option>
-                                      <Option value="regex">正则</Option>
-                                    </Select>
-                                  </Form.Item>
-                              <Button 
-                                    type="text" 
-                                    danger 
-                                    icon={<DeleteOutlined />}
-                                    onClick={() => remove(name)}
-                                  />
-                                </div>
-                              ))}
-                              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>
-                                <Button
-                                  type="dashed"
-                                  onClick={() => add()}
-                                  icon={<PlusOutlined />}
-                                  style={{ flex: 1 }}
-                                >
-                                  添加参数匹配规则
-                                </Button>
-                                <Popover
-                                  content={
-                                    <div style={{ maxWidth: '300px' }}>
-                                      <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>匹配规则说明：</div>
-                                      <div style={{ lineHeight: '1.6' }}>
-                                        <div>• <strong>精确匹配</strong>：参数值完全相等</div>
-                                        <div>• <strong>包含</strong>：参数值包含指定内容</div>
-                                        <div>• <strong>正则</strong>：参数值符合正则表达式</div>
-                                        <div>• <strong>嵌套路径</strong>：使用点号分隔，如 data.user.id</div>
-                                      </div>
-                                    </div>
-                                  }
-                                  title="参数匹配规则"
-                                  trigger="click"
-                                  placement="top"
-                                >
-                                  <Button
-                                    type="text"
-                                    icon={<QuestionCircleOutlined />}
-                                    style={{ 
-                                      color: '#999',
-                                      padding: '4px'
-                                    }}
-                                    size="small"
-                                  />
-                                </Popover>
-                              </div>
-                            </>
-                          )}
-                        </Form.List>
+                      {/* 入参匹配规则已移至各响应内部配置，此处保留隐藏字段向后兼容旧数据 */}
+                      <Form.Item name="paramMatchers" hidden initialValue={[]}>
+                        <Input />
                       </Form.Item>
 
                       {/* 隐藏的表单字段用于存储响应数据 */}

package/ui/src/pages/MockDataV2.js

@@ -5,8 +5,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 } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, ExportOutlined, InfoCircleOutlined, CalendarOutlined, SortAscendingOutlined } from '@ant-design/icons';
+import { Card, Row, Col, Button, Modal, Form, Input, message, Switch, Empty, Spin, Typography, Tooltip, Badge, Select, Pagination, Table, Space, Tag } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, ExportOutlined, InfoCircleOutlined, CalendarOutlined, SortAscendingOutlined, AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons';
 import '../styles/mock-data.css';
 import axios from 'axios';
 
@@ -40,7 +40,8 @@ const MockData = () => {
       sortBy: 'name', // name, createdAt, interfaceCount, active
       sortOrder: 'ascend', // ascend, descend
       pageSize: 12,
-      current: 1
+      current: 1,
+      viewMode: 'card' // card, list
     };
   });
 
@@ -368,6 +369,10 @@ const MockData = () => {
     saveListConfig({ current: page, pageSize });
   };
 
+  const handleViewModeChange = (mode) => {
+    saveListConfig({ viewMode: mode, current: 1 });
+  };
+
   // 获取排序后的功能列表
   const getSortedFeatures = () => {
     const sorted = [...mockFeatures].sort((a, b) => {
@@ -516,6 +521,139 @@ const MockData = () => {
     );
   };
 
+  // 渲染列表视图
+  const renderListView = () => {
+    const columns = [
+      {
+        title: '状态',
+        dataIndex: 'active',
+        key: 'active',
+        width: 100,
+        render: (active, record) => (
+          <Switch
+            checked={active}
+            onChange={(checked, e) => {
+              e.stopPropagation();
+              handleToggleActive(record.id, active);
+            }}
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+          />
+        ),
+      },
+      {
+        title: '功能名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: { tooltip: true },
+        render: (name) => (
+          <Text strong style={{ fontSize: '14px' }}>{name}</Text>
+        ),
+      },
+      {
+        title: '功能描述',
+        dataIndex: 'description',
+        key: 'description',
+        ellipsis: { tooltip: true },
+        render: (description) => (
+          <Text type="secondary">{description || '无描述'}</Text>
+        ),
+      },
+      {
+        title: '接口数量',
+        dataIndex: 'interfaceCount',
+        key: 'interfaceCount',
+        width: 100,
+        align: 'center',
+        render: (count) => (
+          <Badge count={count || 0} showZero style={{ backgroundColor: '#1890ff' }} />
+        ),
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createdAt',
+        key: 'createdAt',
+        width: 120,
+        render: (createdAt) => (
+          <Text type="secondary">
+            {createdAt ? new Date(createdAt).toLocaleDateString() : '未知日期'}
+          </Text>
+        ),
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 200,
+        fixed: 'right',
+        render: (_, record) => (
+          <Space size="small">
+            <Tooltip title="管理接口">
+              <Button
+                type="link"
+                size="small"
+                icon={<ApiOutlined />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  viewInterfaces(record);
+                }}
+              >
+                接口
+              </Button>
+            </Tooltip>
+            <Tooltip title="编辑">
+              <Button
+                type="link"
+                size="small"
+                icon={<EditOutlined />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  openModal(record);
+                }}
+              />
+            </Tooltip>
+            <Tooltip title="导出">
+              <Button
+                type="link"
+                size="small"
+                icon={<ExportOutlined />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  exportFeatureConfig(record);
+                }}
+              />
+            </Tooltip>
+            <Tooltip title="删除">
+              <Button
+                type="link"
+                size="small"
+                danger
+                icon={<DeleteOutlined />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  deleteFeature(record.id);
+                }}
+              />
+            </Tooltip>
+          </Space>
+        ),
+      },
+    ];
+
+    return (
+      <Table
+        columns={columns}
+        dataSource={getPaginatedFeatures()}
+        rowKey="id"
+        pagination={false}
+        onRow={(record) => ({
+          onClick: () => viewInterfaces(record),
+          style: { cursor: 'pointer' }
+        })}
+        rowClassName={(record) => !record.active ? 'inactive-row' : ''}
+      />
+    );
+  };
+
   return (
     <AppLayout>
       <div className="page-container">
@@ -584,7 +722,7 @@ const MockData = () => {
                 </div>
               </Col>
               
-              {/* 排序控制区域 */}
+              {/* 排序和视图控制区域 */}
               <Col xs={24} sm={12} md={8} lg={9}>
                 <div className="sort-controls">
                   <div className="control-group">
@@ -615,8 +753,30 @@ const MockData = () => {
                 </div>
               </Col>
               
+              {/* 视图切换区域 */}
+              <Col xs={24} sm={12} md={4} lg={3}>
+                <div className="view-mode-controls">
+                  <Button.Group>
+                    <Tooltip title="卡片视图">
+                      <Button
+                        type={listConfig.viewMode === 'card' ? 'primary' : 'default'}
+                        icon={<AppstoreOutlined />}
+                        onClick={() => handleViewModeChange('card')}
+                      />
+                    </Tooltip>
+                    <Tooltip title="列表视图">
+                      <Button
+                        type={listConfig.viewMode === 'list' ? 'primary' : 'default'}
+                        icon={<UnorderedListOutlined />}
+                        onClick={() => handleViewModeChange('list')}
+                      />
+                    </Tooltip>
+                  </Button.Group>
+                </div>
+              </Col>
+              
               {/* 分页控制区域 */}
-              <Col xs={24} sm={24} md={8} lg={9}>
+              <Col xs={24} sm={24} md={12} lg={6}>
                 <div className="pagination-controls">
                   <div className="control-group">
                     <span className="control-label">每页显示</span>
@@ -649,9 +809,13 @@ const MockData = () => {
             </div>
           ) : mockFeatures.length > 0 ? (
             <>
-              <Row gutter={[20, 20]} className="feature-grid">
-                {getPaginatedFeatures().map(feature => renderFeatureCard(feature))}
-              </Row>
+              {listConfig.viewMode === 'card' ? (
+                <Row gutter={[20, 20]} className="feature-grid">
+                  {getPaginatedFeatures().map(feature => renderFeatureCard(feature))}
+                </Row>
+              ) : (
+                renderListView()
+              )}
               
               {/* 分页组件 */}
               {mockFeatures.length > listConfig.pageSize && (

package/ui/src/styles/mock-data.css

@@ -1115,4 +1115,71 @@ input:checked + .slider:before {
   .ant-card-extra {
     margin-right: 60px;
   }
+}
+
+/* 视图切换控制样式 */
+.view-mode-controls {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.view-mode-controls .ant-btn-group {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+/* 列表视图样式 */
+.feature-list-card .ant-table-wrapper {
+  margin-top: 0;
+}
+
+.feature-list-card .ant-table {
+  font-size: 14px;
+}
+
+.feature-list-card .ant-table-thead > tr > th {
+  background-color: #fafafa;
+  font-weight: 600;
+  color: #262626;
+  padding: 16px;
+}
+
+.feature-list-card .ant-table-tbody > tr > td {
+  padding: 16px;
+}
+
+.feature-list-card .ant-table-tbody > tr:hover {
+  background-color: #f5f5f5;
+}
+
+.feature-list-card .ant-table-tbody > tr.inactive-row {
+  background-color: #fafafa;
+  opacity: 0.7;
+}
+
+.feature-list-card .ant-table-tbody > tr.inactive-row:hover {
+  background-color: #f0f0f0;
+}
+
+/* 列表视图中的操作按钮样式 */
+.feature-list-card .ant-btn-link {
+  padding: 4px 8px;
+  height: auto;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .view-mode-controls {
+    justify-content: center;
+    margin-top: 12px;
+  }
+  
+  .feature-list-card .ant-table {
+    font-size: 13px;
+  }
+  
+  .feature-list-card .ant-table-thead > tr > th,
+  .feature-list-card .ant-table-tbody > tr > td {
+    padding: 12px 8px;
+  }
 }