whistle.mock-plugins 1.2.2-beta.12 → 1.2.2-beta.18

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

@@ -152,8 +152,6 @@
 
 /**![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/models.js

@@ -22,6 +22,15 @@
  * @property {string} name - 响应名称
  * @property {string} description - 响应描述
  * @property {string} content - 响应内容，使用 Mock.js 语法
+ * @property {Array<ParamMatcher>} paramMatchers - 响应级入参匹配规则，运行时按顺序匹配，第一个满足所有规则的响应被返回；无规则的响应作为默认兜底
+ */
+
+/**
+ * 参数匹配规则数据模型
+ * @typedef {Object} ParamMatcher
+ * @property {string} paramPath - 参数路径，支持嵌套路径（如 data.user.id）
+ * @property {string} paramValue - 期望值
+ * @property {string} matchType - 匹配类型，可选值: 'exact'(精确匹配), 'contains'(包含), 'regex'(正则)
  */
 
 /**

package/lib/routes/interfaces.js

@@ -87,7 +87,8 @@ const processInterfaceData = (data) => {
       id: Math.random().toString(36).substring(2, 15),
       name: '默认响应',
       description: '',
-      content: result.responseContent
+      content: result.responseContent,
+      paramMatchers: []
     }];
     result.activeResponseId = result.responses[0].id;
     console.log('创建的默认响应:', result.responses[0]);
@@ -99,7 +100,8 @@ const processInterfaceData = (data) => {
       id: Math.random().toString(36).substring(2, 15),
       name: '默认响应',
       description: '',
-      content: '{}'
+      content: '{}',
+      paramMatchers: []
     }];
     result.activeResponseId = result.responses[0].id;
     result.responseContent = '{}';

package/lib/ruleManager.js

@@ -268,36 +268,19 @@ const ruleManager = {
       return null;
     }
     
-    // 在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) {
+    // 在URL匹配的接口中，查找参数也匹配的接口
+    for (const intf of urlMatchedInterfaces) {
+      // 检查参数匹配
       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 = legacyInterfaces.find(intf => 
+    // 如果没有参数匹配的接口，返回第一个没有参数匹配规则的接口
+    const fallbackInterface = urlMatchedInterfaces.find(intf => 
       !intf.paramMatchers || !Array.isArray(intf.paramMatchers) || intf.paramMatchers.length === 0
     );
     
@@ -454,9 +437,9 @@ const ruleManager = {
         }
       }
       
-      // 对于有多个响应的接口，添加当前响应标识
-      if (config.responses && config.activeResponseId) {
-        const activeResponse = config.responses.find(r => r.id === config.activeResponseId);
+      // 对于有多个响应的接口，添加当前响应标识（优先展示实际命中的响应，在 handleDataTemplate 前此处只能用 activeResponseId 作为预估）
+      if (config.responses && config.responses.length > 0) {
+        const activeResponse = config.responses.find(r => r.id === config.activeResponseId) || config.responses[0];
         if (activeResponse && activeResponse.name) {
           res.setHeader('X-Whistle-Mock-Response', activeResponse.name);
         }
@@ -768,38 +751,36 @@ const ruleManager = {
     
     // 支持多响应系统
     let template = '';
-    let matchedResponse = null;
+    let hitResponse = null;
     
     // 检查是否有多响应配置
     if (config.responses && Array.isArray(config.responses) && config.responses.length > 0) {
-      // 优先：遍历响应，找第一个 paramMatchers 匹配的响应（响应级匹配）
+      let selectedResponse = null;
+
+      // 1. 按顺序查找第一个入参匹配的响应
       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 || '未命名'}`);
+            selectedResponse = resp;
+            this.log(`[规则处理器] 响应级入参匹配成功，使用响应: ${resp.name || '未命名'}`);
             break;
+          } else {
+            this.log(`[规则处理器] 响应 "${resp.name || '未命名'}" 入参不匹配，继续检查下一个`);
           }
         }
       }
 
-      // 兜底：使用 activeResponseId 对应的响应，或第一个响应
-      if (!matchedResponse) {
+      // 2. 无匹配则回退到 activeResponseId 指定的默认响应
+      if (!selectedResponse) {
         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 || '未命名'}`);
-        }
+        selectedResponse = (activeResponseId && config.responses.find(r => r.id === activeResponseId))
+          || config.responses[0];
+        this.log(`[规则处理器] 无响应级匹配，使用默认响应: ${selectedResponse ? (selectedResponse.name || '未命名') : '无'}`);
       }
 
-      if (matchedResponse) {
-        template = matchedResponse.content;
+      if (selectedResponse) {
+        hitResponse = selectedResponse;
+        template = selectedResponse.content;
       }
     }
     
@@ -827,8 +808,10 @@ const ruleManager = {
       const enableMockHeaders = process.env.WHISTLE_MOCK_HEADERS !== 'false';
       if (enableMockHeaders) {
         res.setHeader('X-Whistle-Mock-Data-Type', 'template');
-        if (matchedResponse) {
-          res.setHeader('X-Whistle-Mock-Template', matchedResponse.name || 'unnamed');
+        if (hitResponse) {
+          res.setHeader('X-Whistle-Mock-Template', hitResponse.name || 'unnamed');
+          // 覆盖 processRequest 中预设的响应头，确保反映实际命中的响应
+          res.setHeader('X-Whistle-Mock-Response', hitResponse.name || 'unnamed');
         }
       }
       
@@ -841,7 +824,7 @@ const ruleManager = {
         mockInfo: {
           delay: parseInt(config.responseDelay || config.delay || 0, 10),
           timestamp: new Date().toISOString(),
-          responseName: matchedResponse?.name || '默认响应'
+          responseName: hitResponse ? (hitResponse.name || '未命名') : '默认响应'
         }
       };
     } catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whistle.mock-plugins",
-  "version": "1.2.2-beta.12",
+  "version": "1.2.2-beta.18",
   "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/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;
+