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

package/app/public/js/index.js.LICENSE.txt

@@ -152,6 +152,8 @@
 
 /**![menu](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkwNCAxNjBIMTIwYy00LjQgMC04IDMuNi04IDh2NjRjMCA0LjQgMy42IDggOCA4aDc4NGM0LjQgMCA4LTMuNiA4LTh2LTY0YzAtNC40LTMuNi04LTgtOHptMCA2MjRIMTIwYy00LjQgMC04IDMuNi04IDh2NjRjMCA0LjQgMy42IDggOCA4aDc4NGM0LjQgMCA4LTMuNiA4LTh2LTY0YzAtNC40LTMuNi04LTgtOHptMC0zMTJIMTIwYy00LjQgMC04IDMuNi04IDh2NjRjMCA0LjQgMy42IDggOCA4aDc4NGM0LjQgMCA4LTMuNiA4LTh2LTY0YzAtNC40LTMuNi04LTgtOHoiIC8+PC9zdmc+) */
 
+/**![minus-circle](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTY5NiA0ODBIMzI4Yy00LjQgMC04IDMuNi04IDh2NDhjMCA0LjQgMy42IDggOCA4aDM2OGM0LjQgMCA4LTMuNiA4LTh2LTQ4YzAtNC40LTMuNi04LTgtOHoiIC8+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0em0wIDgyMGMtMjA1LjQgMC0zNzItMTY2LjYtMzcyLTM3MnMxNjYuNi0zNzIgMzcyLTM3MiAzNzIgMTY2LjYgMzcyIDM3Mi0xNjYuNiAzNzItMzcyIDM3MnoiIC8+PC9zdmc+) */
+
 /**![minus-square](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMyOCA1NDRoMzY4YzQuNCAwIDgtMy42IDgtOHYtNDhjMC00LjQtMy42LTgtOC04SDMyOGMtNC40IDAtOCAzLjYtOCA4djQ4YzAgNC40IDMuNiA4IDggOHoiIC8+PHBhdGggZD0iTTg4MCAxMTJIMTQ0Yy0xNy43IDAtMzIgMTQuMy0zMiAzMnY3MzZjMCAxNy43IDE0LjMgMzIgMzIgMzJoNzM2YzE3LjcgMCAzMi0xNC4zIDMyLTMyVjE0NGMwLTE3LjctMTQuMy0zMi0zMi0zMnptLTQwIDcyOEgxODRWMTg0aDY1NnY2NTZ6IiAvPjwvc3ZnPg==) */
 
 /**![plus-circle](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTY5NiA0ODBINTQ0VjMyOGMwLTQuNC0zLjYtOC04LThoLTQ4Yy00LjQgMC04IDMuNi04IDh2MTUySDMyOGMtNC40IDAtOCAzLjYtOCA4djQ4YzAgNC40IDMuNiA4IDggOGgxNTJ2MTUyYzAgNC40IDMuNiA4IDggOGg0OGM0LjQgMCA4LTMuNiA4LThWNTQ0aDE1MmM0LjQgMCA4LTMuNiA4LTh2LTQ4YzAtNC40LTMuNi04LTgtOHoiIC8+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0em0wIDgyMGMtMjA1LjQgMC0zNzItMTY2LjYtMzcyLTM3MnMxNjYuNi0zNzIgMzcyLTM3MiAzNzIgMTY2LjYgMzcyIDM3Mi0xNjYuNiAzNzItMzcyIDM3MnoiIC8+PC9zdmc+) */

package/lib/ruleManager.js

@@ -268,19 +268,36 @@ const ruleManager = {
       return null;
     }
     
-    // 在URL匹配的接口中，查找参数也匹配的接口
-    for (const intf of urlMatchedInterfaces) {
-      // 检查参数匹配
+    // 在URL匹配的接口中进行参数匹配
+    // 新数据（响应内含 paramMatchers）：接口级 paramMatchers 不参与接口筛选，直接返回第一个URL匹配的接口
+    // 旧数据（接口级 paramMatchers）：保留原有逻辑，通过接口级 paramMatchers 筛选接口
+    const hasResponseLevelMatchers = (intf) => {
+      return intf.responses && Array.isArray(intf.responses) &&
+        intf.responses.some(r => r.paramMatchers && Array.isArray(r.paramMatchers) && r.paramMatchers.length > 0);
+    };
+
+    // 分离新旧数据接口
+    const newStyleInterfaces = urlMatchedInterfaces.filter(intf => hasResponseLevelMatchers(intf));
+    const legacyInterfaces = urlMatchedInterfaces.filter(intf => !hasResponseLevelMatchers(intf));
+
+    // 新数据接口：只要URL匹配就直接返回第一个（参数匹配在响应选择阶段处理）
+    if (newStyleInterfaces.length > 0) {
+      this.log(`[规则处理器] 找到新式接口(响应级匹配): ${newStyleInterfaces[0].name}`);
+      return newStyleInterfaces[0];
+    }
+
+    // 旧数据接口：保留原有接口级 paramMatchers 筛选逻辑
+    for (const intf of legacyInterfaces) {
       if (isParamMatch(req, intf.paramMatchers, this.log)) {
-        this.log(`[规则处理器] 找到完全匹配的接口: ${intf.name} (URL + 参数匹配)`);
+        this.log(`[规则处理器] 找到完全匹配的接口: ${intf.name} (URL + 接口级参数匹配)`);
         return intf;
       } else {
         this.log(`[规则处理器] 接口 ${intf.name} URL匹配但参数不匹配，继续查找...`);
       }
     }
     
-    // 如果没有参数匹配的接口，返回第一个没有参数匹配规则的接口
-    const fallbackInterface = urlMatchedInterfaces.find(intf => 
+    // 旧数据兜底：返回第一个没有接口级参数匹配规则的接口
+    const fallbackInterface = legacyInterfaces.find(intf => 
       !intf.paramMatchers || !Array.isArray(intf.paramMatchers) || intf.paramMatchers.length === 0
     );
     
@@ -751,18 +768,38 @@ const ruleManager = {
     
     // 支持多响应系统
     let template = '';
+    let matchedResponse = null;
     
     // 检查是否有多响应配置
     if (config.responses && Array.isArray(config.responses) && config.responses.length > 0) {
-      // 获取当前激活的响应
-      const activeResponseId = config.activeResponseId;
-      const activeResponse = activeResponseId 
-        ? config.responses.find(r => r.id === activeResponseId)
-        : config.responses[0];
-      
-      if (activeResponse) {
-        this.log(`[规则处理器] 使用响应: ${activeResponse.name || '未命名'}`);
-        template = activeResponse.content;
+      // 优先：遍历响应，找第一个 paramMatchers 匹配的响应（响应级匹配）
+      for (const resp of config.responses) {
+        if (resp.paramMatchers && Array.isArray(resp.paramMatchers) && resp.paramMatchers.length > 0) {
+          if (isParamMatch(req, resp.paramMatchers, this.log)) {
+            matchedResponse = resp;
+            this.log(`[规则处理器] 响应级参数匹配命中: ${resp.name || '未命名'}`);
+            break;
+          }
+        }
+      }
+
+      // 兜底：使用 activeResponseId 对应的响应，或第一个响应
+      if (!matchedResponse) {
+        const activeResponseId = config.activeResponseId;
+        matchedResponse = activeResponseId
+          ? config.responses.find(r => r.id === activeResponseId)
+          : null;
+        
+        if (matchedResponse) {
+          this.log(`[规则处理器] 使用兜底响应(activeResponseId): ${matchedResponse.name || '未命名'}`);
+        } else {
+          matchedResponse = config.responses[0];
+          this.log(`[规则处理器] 使用第一个响应: ${matchedResponse?.name || '未命名'}`);
+        }
+      }
+
+      if (matchedResponse) {
+        template = matchedResponse.content;
       }
     }
     
@@ -790,11 +827,8 @@ const ruleManager = {
       const enableMockHeaders = process.env.WHISTLE_MOCK_HEADERS !== 'false';
       if (enableMockHeaders) {
         res.setHeader('X-Whistle-Mock-Data-Type', 'template');
-        if (config.responses && config.activeResponseId) {
-          const activeResponse = config.responses.find(r => r.id === config.activeResponseId);
-          if (activeResponse) {
-            res.setHeader('X-Whistle-Mock-Template', activeResponse.name || 'unnamed');
-          }
+        if (matchedResponse) {
+          res.setHeader('X-Whistle-Mock-Template', matchedResponse.name || 'unnamed');
         }
       }
       
@@ -807,9 +841,7 @@ const ruleManager = {
         mockInfo: {
           delay: parseInt(config.responseDelay || config.delay || 0, 10),
           timestamp: new Date().toISOString(),
-          responseName: config.responses && config.activeResponseId 
-            ? (config.responses.find(r => r.id === config.activeResponseId)?.name || '未命名')
-            : '默认响应'
+          responseName: matchedResponse?.name || '默认响应'
         }
       };
     } catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whistle.mock-plugins",
-  "version": "1.2.2-beta.7",
+  "version": "1.2.2-beta.8",
   "description": "Whistle 插件，用于快速创建 API 模拟数据",
   "main": "lib/index.js",
   "scripts": {
@@ -39,7 +39,6 @@
     "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/components/interface-management/ResponseContentEditor.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { ReactSortable } from 'react-sortablejs';
 import ReactDOM from 'react-dom';
-import { Card, Button, Space, Badge, Row, Col, Input, Select, Tooltip, message, AutoComplete } from 'antd';
+import { Card, Button, Space, Badge, Row, Col, Input, Select, Tooltip, message, AutoComplete, Tag } from 'antd';
 import { 
   CodeOutlined, 
   EyeOutlined, 
@@ -13,7 +13,9 @@ import {
   EditOutlined,
   FullscreenOutlined,
   FullscreenExitOutlined,
-  MenuOutlined
+  MenuOutlined,
+  FilterOutlined,
+  MinusCircleOutlined
 } from '@ant-design/icons';
 import { generateResponseId } from './utils';
 
@@ -89,7 +91,8 @@ const ResponseContentEditor = ({
       id: newResponseId,
       name: `响应 ${currentResponses.length + 1}`,
       description: '',
-      content: '{\n  "code": 0,\n  "message": "success",\n  "data": {}\n}'
+      content: '{\n  "code": 0,\n  "message": "success",\n  "data": {}\n}',
+      paramMatchers: []
     };
     
     const updatedResponses = [...currentResponses, newResponse];
@@ -170,6 +173,42 @@ const ResponseContentEditor = ({
     }
   };
 
+  // 更新当前响应的 paramMatchers
+  const updateActiveResponseParamMatchers = (paramMatchers) => {
+    if (activeResponseIndex >= 0) {
+      const currentResponses = getFieldValue('responses') || [];
+      const newResponses = [...currentResponses];
+      newResponses[activeResponseIndex] = {
+        ...newResponses[activeResponseIndex],
+        paramMatchers
+      };
+      setFieldsValue({ responses: newResponses });
+    }
+  };
+
+  // 添加一条匹配规则
+  const handleAddMatcher = () => {
+    const currentMatchers = activeResponse?.paramMatchers || [];
+    updateActiveResponseParamMatchers([
+      ...currentMatchers,
+      { paramPath: '', paramValue: '', matchType: 'exact' }
+    ]);
+  };
+
+  // 删除一条匹配规则
+  const handleDeleteMatcher = (index) => {
+    const currentMatchers = [...(activeResponse?.paramMatchers || [])];
+    currentMatchers.splice(index, 1);
+    updateActiveResponseParamMatchers(currentMatchers);
+  };
+
+  // 更新某条匹配规则的字段
+  const handleMatcherChange = (index, field, value) => {
+    const currentMatchers = [...(activeResponse?.paramMatchers || [])];
+    currentMatchers[index] = { ...currentMatchers[index], [field]: value };
+    updateActiveResponseParamMatchers(currentMatchers);
+  };
+
   // 格式化JSON内容
   const formatJsonContent = () => {
     if (!activeResponse || !activeResponse.content) {
@@ -416,34 +455,48 @@ const ResponseContentEditor = ({
                     onChange={handleResponseSelect}
                     optionLabelProp="label"
                   >
-                    {responses.map((resp, index) => (
-                      <Option 
-                        key={resp.id} 
-                        value={resp.id}
-                        label={
-                          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                            <CheckCircleOutlined style={{ color: '#52c41a' }} />
-                            <span>{resp.name || `响应 ${index + 1}`}</span>
-                          </div>
-                        }
-                      >
-                        <div style={{ padding: '4px 0' }}>
-                          <div style={{ 
-                            display: 'flex', 
-                            alignItems: 'center', 
-                            justifyContent: 'space-between',
-                            marginBottom: '4px'
-                          }}>
-                            <span style={{ fontWeight: 'bold' }}>
-                              {resp.name || `响应 ${index + 1}`}
-                            </span>
-                            {resp.id === activeResponseId && (
-                              <Badge status="processing" text="当前选中" />
-                            )}
+                    {responses.map((resp, index) => {
+                      const matcherCount = resp.paramMatchers?.length || 0;
+                      return (
+                        <Option 
+                          key={resp.id} 
+                          value={resp.id}
+                          label={
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                              <CheckCircleOutlined style={{ color: '#52c41a' }} />
+                              <span>{resp.name || `响应 ${index + 1}`}</span>
+                            </div>
+                          }
+                        >
+                          <div style={{ padding: '4px 0' }}>
+                            <div style={{ 
+                              display: 'flex', 
+                              alignItems: 'center', 
+                              justifyContent: 'space-between',
+                              marginBottom: '4px'
+                            }}>
+                              <span style={{ fontWeight: 'bold' }}>
+                                {resp.name || `响应 ${index + 1}`}
+                              </span>
+                              <Space size={4}>
+                                {matcherCount > 0 ? (
+                                  <Tag color="blue" style={{ fontSize: '11px', margin: 0 }}>
+                                    {matcherCount}条规则
+                                  </Tag>
+                                ) : (
+                                  <Tag color="default" style={{ fontSize: '11px', margin: 0 }}>
+                                    兜底
+                                  </Tag>
+                                )}
+                                {resp.id === activeResponseId && (
+                                  <Badge status="processing" text="当前选中" />
+                                )}
+                              </Space>
+                            </div>
                           </div>
-                        </div>
-                      </Option>
-                    ))}
+                        </Option>
+                      );
+                    })}
                   </Select>
                   <Tooltip title="编辑响应名称">
                     <Button 
@@ -484,6 +537,101 @@ const ResponseContentEditor = ({
         </Row>
       </div>
 
+      {/* 入参匹配规则编辑区域 */}
+      {activeResponse && (
+        <div style={{ 
+          marginBottom: '16px',
+          border: '1px solid #e8e8e8',
+          borderRadius: '6px',
+          padding: '12px',
+          background: '#fafafa'
+        }}>
+          <div style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            justifyContent: 'space-between',
+            marginBottom: '10px'
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+              <FilterOutlined style={{ color: '#1890ff' }} />
+              <label style={{ fontSize: '12px', color: '#333', fontWeight: 'bold' }}>
+                入参匹配规则
+              </label>
+              {activeResponse.paramMatchers && activeResponse.paramMatchers.length > 0 ? (
+                <Tag color="blue" style={{ fontSize: '11px', lineHeight: '18px', padding: '0 6px' }}>
+                  {activeResponse.paramMatchers.length}条
+                </Tag>
+              ) : (
+                <Tag color="default" style={{ fontSize: '11px', lineHeight: '18px', padding: '0 6px' }}>
+                  兜底响应
+                </Tag>
+              )}
+            </div>
+            <Button
+              type="dashed"
+              size="small"
+              icon={<PlusCircleOutlined />}
+              onClick={handleAddMatcher}
+              style={{ fontSize: '12px' }}
+            >
+              添加规则
+            </Button>
+          </div>
+
+          {(!activeResponse.paramMatchers || activeResponse.paramMatchers.length === 0) && (
+            <div style={{ 
+              color: '#999', 
+              fontSize: '12px', 
+              textAlign: 'center',
+              padding: '8px 0'
+            }}>
+              无匹配规则，当其他响应均不匹配时作为兜底返回
+            </div>
+          )}
+
+          {activeResponse.paramMatchers && activeResponse.paramMatchers.map((matcher, index) => (
+            <Row key={index} gutter={8} style={{ marginBottom: '8px' }} align="middle">
+              <Col span={8}>
+                <Input
+                  size="small"
+                  placeholder="参数路径，如 data.type"
+                  value={matcher.paramPath}
+                  onChange={(e) => handleMatcherChange(index, 'paramPath', e.target.value)}
+                />
+              </Col>
+              <Col span={5}>
+                <Select
+                  size="small"
+                  style={{ width: '100%' }}
+                  value={matcher.matchType || 'exact'}
+                  onChange={(val) => handleMatcherChange(index, 'matchType', val)}
+                >
+                  <Option value="exact">精确匹配</Option>
+                  <Option value="contains">包含</Option>
+                  <Option value="regex">正则</Option>
+                </Select>
+              </Col>
+              <Col span={9}>
+                <Input
+                  size="small"
+                  placeholder="期望值"
+                  value={matcher.paramValue}
+                  onChange={(e) => handleMatcherChange(index, 'paramValue', e.target.value)}
+                />
+              </Col>
+              <Col span={2} style={{ textAlign: 'center' }}>
+                <Tooltip title="删除此规则">
+                  <MinusCircleOutlined
+                    style={{ color: '#ff4d4f', cursor: 'pointer', fontSize: '16px' }}
+                    onClick={() => handleDeleteMatcher(index)}
+                  />
+                </Tooltip>
+              </Col>
+            </Row>
+          ))}
+        </div>
+      )}
+
       {/* 响应内容编辑区域 */}
       {activeResponse && (
         <>

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

@@ -2,6 +2,5 @@
 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';