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

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, Tag } from 'antd';
+import { Card, Button, Space, Badge, Row, Col, Input, Select, Tooltip, message, Tag, Divider } from 'antd';
 import { 
   CodeOutlined, 
   EyeOutlined, 
@@ -15,13 +15,20 @@ import {
   FullscreenExitOutlined,
   MenuOutlined,
   FilterOutlined,
-  MinusCircleOutlined
+  PlusOutlined,
+  QuestionCircleOutlined
 } from '@ant-design/icons';
 import { generateResponseId } from './utils';
 
 const { TextArea } = Input;
 const { Option } = Select;
 
+const MATCH_TYPE_LABELS = {
+  exact: '精确',
+  contains: '包含',
+  regex: '正则',
+};
+
 const ResponseContentEditor = ({ 
   form,
   responses, 
@@ -48,7 +55,6 @@ const ResponseContentEditor = ({
   }, [responses]);
 
   const handleAfterSort = (newList) => {
-    // 将排序后的列表写回表单 responses 字段；activeResponseId 不变
     setFieldsValue({ responses: newList });
   };
 
@@ -72,7 +78,6 @@ const ResponseContentEditor = ({
     const newResponseId = generateResponseId();
     let currentResponses = getFieldValue('responses') || [];
     
-    // 确保数组格式
     if (!Array.isArray(currentResponses)) {
       try {
         if (typeof currentResponses === 'string') {
@@ -97,7 +102,6 @@ const ResponseContentEditor = ({
     
     const updatedResponses = [...currentResponses, newResponse];
     
-    // 更新表单字段
     setFieldsValue({ 
       responses: updatedResponses,
       activeResponseId: newResponseId
@@ -115,7 +119,6 @@ const ResponseContentEditor = ({
     
     const updatedResponses = currentResponses.filter(resp => resp.id !== responseId);
     
-    // 如果删除的是当前选中的响应，切换到第一个响应
     let newActiveId = activeResponseId;
     if (responseId === activeResponseId) {
       newActiveId = updatedResponses[0]?.id;
@@ -186,27 +189,29 @@ const ResponseContentEditor = ({
     }
   };
 
-  // 添加一条匹配规则
-  const handleAddMatcher = () => {
-    const currentMatchers = activeResponse?.paramMatchers || [];
+  // 添加入参匹配规则
+  const handleAddParamMatcher = () => {
+    const currentMatchers = (activeResponse && activeResponse.paramMatchers) || [];
     updateActiveResponseParamMatchers([
       ...currentMatchers,
       { paramPath: '', paramValue: '', matchType: 'exact' }
     ]);
   };
 
-  // 删除一条匹配规则
-  const handleDeleteMatcher = (index) => {
-    const currentMatchers = [...(activeResponse?.paramMatchers || [])];
-    currentMatchers.splice(index, 1);
-    updateActiveResponseParamMatchers(currentMatchers);
+  // 删除入参匹配规则
+  const handleRemoveParamMatcher = (index) => {
+    const currentMatchers = (activeResponse && activeResponse.paramMatchers) || [];
+    const newMatchers = currentMatchers.filter((_, i) => i !== index);
+    updateActiveResponseParamMatchers(newMatchers);
   };
 
-  // 更新某条匹配规则的字段
-  const handleMatcherChange = (index, field, value) => {
-    const currentMatchers = [...(activeResponse?.paramMatchers || [])];
-    currentMatchers[index] = { ...currentMatchers[index], [field]: value };
-    updateActiveResponseParamMatchers(currentMatchers);
+  // 更新入参匹配规则某个字段
+  const handleParamMatcherChange = (index, field, value) => {
+    const currentMatchers = (activeResponse && activeResponse.paramMatchers) || [];
+    const newMatchers = currentMatchers.map((m, i) => 
+      i === index ? { ...m, [field]: value } : m
+    );
+    updateActiveResponseParamMatchers(newMatchers);
   };
 
   // 格式化JSON内容
@@ -272,6 +277,83 @@ const ResponseContentEditor = ({
     );
   };
 
+  // 渲染响应级入参匹配规则区域
+  const renderParamMatchers = () => {
+    if (!activeResponse) return null;
+
+    const matchers = activeResponse.paramMatchers || [];
+
+    return (
+      <div style={{ marginBottom: '12px' }}>
+        <Divider orientation="left" orientationMargin={0} style={{ margin: '0 0 10px 0', fontSize: '12px' }}>
+          <Space size={6}>
+            <FilterOutlined style={{ color: '#1890ff' }} />
+            <span style={{ fontWeight: 'bold', color: '#333' }}>入参匹配规则</span>
+            {matchers.length > 0 ? (
+              <Tag color="blue" style={{ fontSize: '11px', padding: '0 4px' }}>{matchers.length}条</Tag>
+            ) : (
+              <Tag color="default" style={{ fontSize: '11px', padding: '0 4px' }}>无规则（默认响应）</Tag>
+            )}
+            <Tooltip title="满足所有规则时返回此响应；无规则的响应作为默认兜底。响应按列表顺序依次检查，第一个匹配的响应被返回。">
+              <QuestionCircleOutlined style={{ color: '#bbb', cursor: 'help', fontSize: '12px' }} />
+            </Tooltip>
+          </Space>
+        </Divider>
+        <div>
+          {matchers.map((matcher, index) => (
+            <div key={index} style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px' }}>
+              <Input
+                style={{ flex: 1 }}
+                placeholder="参数路径（如：userId 或 data.user.id）"
+                value={matcher.paramPath || ''}
+                onChange={(e) => handleParamMatcherChange(index, 'paramPath', e.target.value)}
+                size="small"
+              />
+              <Input
+                style={{ flex: 1 }}
+                placeholder="期望值（如：123 或 admin）"
+                value={matcher.paramValue || ''}
+                onChange={(e) => handleParamMatcherChange(index, 'paramValue', e.target.value)}
+                size="small"
+              />
+              <Select
+                style={{ width: 90 }}
+                value={matcher.matchType || 'exact'}
+                onChange={(val) => handleParamMatcherChange(index, 'matchType', val)}
+                size="small"
+              >
+                <Option value="exact">精确匹配</Option>
+                <Option value="contains">包含</Option>
+                <Option value="regex">正则</Option>
+              </Select>
+              <Button
+                type="text"
+                danger
+                icon={<DeleteOutlined />}
+                size="small"
+                onClick={() => handleRemoveParamMatcher(index)}
+              />
+            </div>
+          ))}
+          <Button
+            type="dashed"
+            size="small"
+            icon={<PlusOutlined />}
+            onClick={handleAddParamMatcher}
+            style={{ width: '100%' }}
+          >
+            添加匹配规则
+          </Button>
+          {matchers.length === 0 && (
+            <div style={{ color: '#bbb', fontSize: '12px', marginTop: '6px', textAlign: 'center' }}>
+              无规则时此响应作为默认兜底响应
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
   // 如果没有响应数据，显示创建按钮
   if (!Array.isArray(responses) || responses.length === 0) {
     return (
@@ -422,7 +504,6 @@ const ResponseContentEditor = ({
             
             <div style={{ position: 'relative' }}>
               {isEditing ? (
-                // 编辑模式：显示输入框
                 <Input.Group compact>
                   <Input
                     style={{ width: 'calc(100% - 80px)' }}
@@ -446,7 +527,6 @@ const ResponseContentEditor = ({
                   />
                 </Input.Group>
               ) : (
-                // 选择模式：显示下拉选择器
                 <Input.Group compact>
                   <Select
                     style={{ width: 'calc(100% - 40px)' }}
@@ -456,17 +536,21 @@ const ResponseContentEditor = ({
                     optionLabelProp="label"
                   >
                     {responses.map((resp, index) => {
-                      const matcherCount = resp.paramMatchers?.length || 0;
+                      const matcherCount = (resp.paramMatchers || []).filter(m => m.paramPath).length;
+                      const isDefault = resp.id === getFieldValue('activeResponseId');
+                      const labelContent = (
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                          <CheckCircleOutlined style={{ color: '#52c41a' }} />
+                          <span>{resp.name || `响应 ${index + 1}`}</span>
+                          {isDefault && <Tag color="green" style={{ marginLeft: 2, fontSize: '11px', padding: '0 4px' }}>默认</Tag>}
+                          {matcherCount > 0 && <Tag color="blue" style={{ marginLeft: 2, fontSize: '11px', padding: '0 4px' }}>{matcherCount}条规则</Tag>}
+                        </div>
+                      );
                       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>
-                          }
+                          label={labelContent}
                         >
                           <div style={{ padding: '4px 0' }}>
                             <div style={{ 
@@ -479,17 +563,11 @@ const ResponseContentEditor = ({
                                 {resp.name || `响应 ${index + 1}`}
                               </span>
                               <Space size={4}>
-                                {matcherCount > 0 ? (
-                                  <Tag color="blue" style={{ fontSize: '11px', margin: 0 }}>
+                                {isDefault && <Badge status="processing" text="默认" />}
+                                {matcherCount > 0 && (
+                                  <Tag color="blue" style={{ fontSize: '11px', padding: '0 4px' }}>
                                     {matcherCount}条规则
                                   </Tag>
-                                ) : (
-                                  <Tag color="default" style={{ fontSize: '11px', margin: 0 }}>
-                                    兜底
-                                  </Tag>
-                                )}
-                                {resp.id === activeResponseId && (
-                                  <Badge status="processing" text="当前选中" />
                                 )}
                               </Space>
                             </div>
@@ -537,100 +615,8 @@ 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 && renderParamMatchers()}
 
       {/* 响应内容编辑区域 */}
       {activeResponse && (
@@ -683,4 +669,4 @@ const ResponseContentEditor = ({
   );
 };
 
-export default ResponseContentEditor; 
+export default ResponseContentEditor;

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';