whistle.mock-plugins 1.2.2-beta.10 → 1.2.2-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whistle.mock-plugins",
-  "version": "1.2.2-beta.10",
+  "version": "1.2.2-beta.11",
   "description": "Whistle 插件，用于快速创建 API 模拟数据",
   "main": "lib/index.js",
   "scripts": {

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

@@ -209,111 +209,6 @@ const ResponseContentEditor = ({
     updateActiveResponseParamMatchers(currentMatchers);
   };
 
-  // 渲染入参匹配规则编辑区域
-  const renderParamMatchersSection = () => {
-    // 整个接口中是否有任意响应含有匹配规则
-    const anyHasMatchers = responses.some(
-      r => r.paramMatchers && Array.isArray(r.paramMatchers) && r.paramMatchers.length > 0
-    );
-    const currentHasMatchers = activeResponse.paramMatchers && activeResponse.paramMatchers.length > 0;
-    // 只有当接口中存在规则时，无规则的响应才叫"兜底"
-    const isFallback = anyHasMatchers && !currentHasMatchers;
-
-    return (
-      <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>
-            {currentHasMatchers ? (
-              <Tag color="blue" style={{ fontSize: '11px', lineHeight: '18px', padding: '0 6px' }}>
-                {activeResponse.paramMatchers.length}条
-              </Tag>
-            ) : isFallback ? (
-              <Tag color="default" style={{ fontSize: '11px', lineHeight: '18px', padding: '0 6px' }}>
-                兜底响应
-              </Tag>
-            ) : null}
-          </div>
-          <Button
-            type="dashed"
-            size="small"
-            icon={<PlusCircleOutlined />}
-            onClick={handleAddMatcher}
-            style={{ fontSize: '12px' }}
-          >
-            添加规则
-          </Button>
-        </div>
-
-        {isFallback && (
-          <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>
-    );
-  };
-
   // 格式化JSON内容
   const formatJsonContent = () => {
     if (!activeResponse || !activeResponse.content) {
@@ -643,7 +538,99 @@ const ResponseContentEditor = ({
       </div>
 
       {/* 入参匹配规则编辑区域 */}
-      {activeResponse && renderParamMatchersSection()}
+      {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/pages/InterfaceManagementV2.js

@@ -302,17 +302,7 @@ const InterfaceManagement = () => {
     let activeResponseId = '';
     
     if (record.responses && Array.isArray(record.responses) && record.responses.length > 0) {
-      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 };
-      }
+      responses = record.responses;
       activeResponseId = record.activeResponseId || responses[0].id;
     } else if (record.responseContent) {
       // 兼容旧数据格式，创建默认响应
@@ -512,22 +502,13 @@ 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: responsesValue,
+        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'),
@@ -835,26 +816,8 @@ const InterfaceManagement = () => {
         const hasSmartMatch = record.responses.some(
           r => r.paramMatchers && Array.isArray(r.paramMatchers) && r.paramMatchers.length > 0
         );
+        const fallbackResp = record.responses.find(r => r.id === activeResponseId) || record.responses[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) => {
@@ -891,9 +854,19 @@ const InterfaceManagement = () => {
 
         return (
           <Tooltip title={tooltipContent} placement="left">
-            <Tag color="blue" style={{ cursor: 'default' }}>
-              智能匹配 · {total}个响应
-            </Tag>
+            {hasSmartMatch ? (
+              <Tag color="blue" style={{ cursor: 'default' }}>
+                智能匹配 · {total}个响应
+              </Tag>
+            ) : total > 1 ? (
+              <Tag color="orange" style={{ cursor: 'default' }}>
+                手动切换 · {total}个响应
+              </Tag>
+            ) : (
+              <span style={{ color: '#999', fontSize: '12px' }}>
+                {fallbackResp?.name || '1个响应'}
+              </span>
+            )}
           </Tooltip>
         );
       },