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

package/package.json

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

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

@@ -209,6 +209,111 @@ 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) {
@@ -538,99 +643,7 @@ const ResponseContentEditor = ({
       </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 && renderParamMatchersSection()}
 
       {/* 响应内容编辑区域 */}
       {activeResponse && (

package/ui/src/pages/InterfaceManagementV2.js

@@ -816,8 +816,26 @@ 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) => {
@@ -854,19 +872,9 @@ const InterfaceManagement = () => {
 
         return (
           <Tooltip title={tooltipContent} placement="left">
-            {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>
-            )}
+            <Tag color="blue" style={{ cursor: 'default' }}>
+              智能匹配 · {total}个响应
+            </Tag>
           </Tooltip>
         );
       },