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

package/ui/src/pages/InterfaceManagementV2.js

@@ -42,13 +42,13 @@ const COLUMN_CONFIG = [
   { key: 'group', title: '分组', required: false },
   { key: 'urlPattern', title: 'URL匹配规则', required: false },
   { key: 'proxyType', title: '处理方式', required: false },
-  { key: 'currentResponse', title: '当前响应', required: false },
+  { key: 'currentResponse', title: '响应配置', required: false },
   { key: 'responseDelay', title: '延迟(毫秒)', required: false },
   { key: 'httpStatus', title: '状态码', required: false },
   { key: 'contentType', title: '内容类型', required: false },
   { key: 'targetUrl', title: '目标URL', required: false },
   { key: 'customHeaders', title: '自定义头', required: false },
-  { key: 'paramMatchers', title: '参数匹配', required: false },
+  { key: 'paramMatchers', title: '匹配规则', required: false },
   { key: 'httpMethod', title: '请求方法', required: false },
   { key: 'action', title: '操作', required: true }
 ];
@@ -800,35 +800,74 @@ const InterfaceManagement = () => {
       },
     },
     {
-      title: '当前响应',
+      title: '响应配置',
       dataIndex: 'activeResponseId',
       key: 'currentResponse',
-      width: 180,
+      width: 160,
       render: (activeResponseId, record) => {
-        // 如果没有响应数据，返回空
+        if (record.proxyType !== 'response') {
+          return <span style={{ color: '#ccc' }}>-</span>;
+        }
         if (!record.responses || !Array.isArray(record.responses) || record.responses.length === 0) {
-          return <span className="no-response">无响应数据</span>;
+          return <span style={{ color: '#ff4d4f', fontSize: '12px' }}>无响应数据</span>;
         }
-        
-        // 找到当前激活的响应
-        const activeResponse = record.responses.find(resp => resp.id === activeResponseId);
-        
-        // 如果没有找到激活的响应，使用第一个
-        const currentResponse = activeResponse || record.responses[0];
-        
+
+        const total = record.responses.length;
+        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];
+
+        const tooltipContent = (
+          <div style={{ maxWidth: 260 }}>
+            {record.responses.map((resp) => {
+              const matchers = resp.paramMatchers || [];
+              return (
+                <div key={resp.id} style={{ marginBottom: 6 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                    {matchers.length > 0 ? (
+                      <Tag color="blue" style={{ fontSize: '11px', margin: 0 }}>{matchers.length}条规则</Tag>
+                    ) : (
+                      <Tag color="default" style={{ fontSize: '11px', margin: 0 }}>兜底</Tag>
+                    )}
+                    <span style={{ fontWeight: resp.id === activeResponseId ? 'bold' : 'normal' }}>
+                      {resp.name}
+                    </span>
+                  </div>
+                  {matchers.length > 0 && (
+                    <div style={{ paddingLeft: 8, marginTop: 2 }}>
+                      {matchers.map((m, i) => (
+                        <div key={i} style={{ fontSize: '11px', color: '#666' }}>
+                          {m.paramPath} = {m.paramValue}
+                          <span style={{ color: '#52c41a', marginLeft: 4 }}>
+                            ({m.matchType === 'exact' ? '精确' : m.matchType === 'contains' ? '包含' : '正则'})
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        );
+
         return (
-          <Select
-            value={activeResponseId || record.responses[0]?.id}
-            style={{ width: '100%' }}
-            onChange={(value) => handleResponseSwitch(record.id, value)}
-            disabled={record.proxyType !== 'response'}
-          >
-            {record.responses.map(resp => (
-              <Option key={resp.id} value={resp.id}>
-                {resp.name}
-              </Option>
-            ))}
-          </Select>
+          <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>
+            )}
+          </Tooltip>
         );
       },
     },
@@ -945,38 +984,75 @@ const InterfaceManagement = () => {
       }
     },
     {
-      title: '参数匹配',
-      dataIndex: 'paramMatchers',
+      title: '匹配规则',
+      dataIndex: 'responses',
       key: 'paramMatchers',
       width: 100,
-      render: (_, record) => {
+      render: (responses, record) => {
         if (record.proxyType !== 'response') {
-          return '-';
+          return <span style={{ color: '#ccc' }}>-</span>;
         }
-        
-        const matchers = record.paramMatchers || [];
-        const count = matchers.length;
-        
-        if (count === 0) {
-          return '-';
+
+        // 汇总所有响应的 paramMatchers（响应级），兼容旧数据接口级 paramMatchers
+        const responsesWithMatchers = Array.isArray(responses)
+          ? responses.filter(r => r.paramMatchers && Array.isArray(r.paramMatchers) && r.paramMatchers.length > 0)
+          : [];
+        const totalRules = responsesWithMatchers.reduce((sum, r) => sum + r.paramMatchers.length, 0);
+
+        // 兼容旧数据：接口级 paramMatchers
+        const legacyMatchers = record.paramMatchers || [];
+
+        if (totalRules === 0 && legacyMatchers.length === 0) {
+          return <span style={{ color: '#ccc' }}>-</span>;
         }
-        
-        return (
-          <Tooltip title={
-            <div>
-              {matchers.map((matcher, index) => (
-                <div key={index}>
-                  {matcher.paramPath}: {matcher.paramValue}
-                  <span style={{ color: '#52c41a', marginLeft: 4 }}>
-                    ({matcher.matchType === 'exact' ? '精确' : matcher.matchType === 'contains' ? '包含' : '正则'})
-                  </span>
+
+        // 新数据：按响应分组展示
+        if (totalRules > 0) {
+          const tooltipContent = (
+            <div style={{ maxWidth: 280 }}>
+              {responsesWithMatchers.map(resp => (
+                <div key={resp.id} style={{ marginBottom: 6 }}>
+                  <div style={{ fontWeight: 'bold', marginBottom: 2 }}>{resp.name}：</div>
+                  {resp.paramMatchers.map((m, i) => (
+                    <div key={i} style={{ paddingLeft: 8, fontSize: '12px' }}>
+                      {m.paramPath} = {m.paramValue}
+                      <span style={{ color: '#52c41a', marginLeft: 4 }}>
+                        ({m.matchType === 'exact' ? '精确' : m.matchType === 'contains' ? '包含' : '正则'})
+                      </span>
+                    </div>
+                  ))}
                 </div>
               ))}
+              {Array.isArray(responses) && responses.some(r => !r.paramMatchers || r.paramMatchers.length === 0) && (
+                <div style={{ color: '#999', fontSize: '12px', marginTop: 4 }}>
+                  + 兜底响应（无规则）
+                </div>
+              )}
             </div>
-          }>
-            <span style={{ color: '#1890ff' }}>
-              {count}条规则
-            </span>
+          );
+          return (
+            <Tooltip title={tooltipContent} placement="left">
+              <span style={{ color: '#1890ff', cursor: 'default' }}>{totalRules}条规则</span>
+            </Tooltip>
+          );
+        }
+
+        // 旧数据兼容展示
+        const tooltipContent = (
+          <div>
+            {legacyMatchers.map((matcher, index) => (
+              <div key={index}>
+                {matcher.paramPath}: {matcher.paramValue}
+                <span style={{ color: '#52c41a', marginLeft: 4 }}>
+                  ({matcher.matchType === 'exact' ? '精确' : matcher.matchType === 'contains' ? '包含' : '正则'})
+                </span>
+              </div>
+            ))}
+          </div>
+        );
+        return (
+          <Tooltip title={tooltipContent} placement="left">
+            <span style={{ color: '#fa8c16', cursor: 'default' }}>{legacyMatchers.length}条(旧)</span>
           </Tooltip>
         );
       }
@@ -1698,97 +1774,9 @@ const InterfaceManagement = () => {
                         </div>
                       </div>
 
-                      {/* 请求入参匹配设置 */}
-                      <Form.Item
-                        label="请求入参匹配"
-                        tooltip="设置请求参数的匹配条件，只有当请求参数满足条件时才返回对应的响应。支持嵌套属性路径，如：a.b.c"
-                      >
-                        <Form.List name="paramMatchers">
-                          {(fields, { add, remove }) => (
-                            <>
-                              {fields.map(({ key, name, ...restField }) => (
-                                <div key={key} style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px' }}>
-                                  <Form.Item
-                                    {...restField}
-                                    name={[name, 'paramPath']}
-                                    rules={[
-                                      { required: true, message: '请输入参数路径' },
-                                      {
-                                        pattern: /^[a-zA-Z_$][a-zA-Z0-9_$.]*$/,
-                                        message: '请输入有效的参数路径，如：userId 或 data.user.id'
-                                      }
-                                    ]}
-                                    style={{ flex: 1, margin: 0 }}
-                                  >
-                                    <Input placeholder="参数路径（如：userId 或 data.user.id）" />
-                                  </Form.Item>
-                                  <Form.Item
-                                    {...restField}
-                                    name={[name, 'paramValue']}
-                                    rules={[{ required: true, message: '请输入期望值' }]}
-                                    style={{ flex: 1, margin: 0 }}
-                                  >
-                                    <Input placeholder="期望值（如：123 或 admin）" />
-                                  </Form.Item>
-                                  <Form.Item
-                                    {...restField}
-                                    name={[name, 'matchType']}
-                                    style={{ width: 100, margin: 0 }}
-                                    initialValue="exact"
-                                  >
-                                    <Select placeholder="匹配类型">
-                                      <Option value="exact">精确匹配</Option>
-                                      <Option value="contains">包含</Option>
-                                      <Option value="regex">正则</Option>
-                                    </Select>
-                                  </Form.Item>
-                              <Button 
-                                    type="text" 
-                                    danger 
-                                    icon={<DeleteOutlined />}
-                                    onClick={() => remove(name)}
-                                  />
-                                </div>
-                              ))}
-                              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>
-                                <Button
-                                  type="dashed"
-                                  onClick={() => add()}
-                                  icon={<PlusOutlined />}
-                                  style={{ flex: 1 }}
-                                >
-                                  添加参数匹配规则
-                                </Button>
-                                <Popover
-                                  content={
-                                    <div style={{ maxWidth: '300px' }}>
-                                      <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>匹配规则说明：</div>
-                                      <div style={{ lineHeight: '1.6' }}>
-                                        <div>• <strong>精确匹配</strong>：参数值完全相等</div>
-                                        <div>• <strong>包含</strong>：参数值包含指定内容</div>
-                                        <div>• <strong>正则</strong>：参数值符合正则表达式</div>
-                                        <div>• <strong>嵌套路径</strong>：使用点号分隔，如 data.user.id</div>
-                                      </div>
-                                    </div>
-                                  }
-                                  title="参数匹配规则"
-                                  trigger="click"
-                                  placement="top"
-                                >
-                                  <Button
-                                    type="text"
-                                    icon={<QuestionCircleOutlined />}
-                                    style={{ 
-                                      color: '#999',
-                                      padding: '4px'
-                                    }}
-                                    size="small"
-                                  />
-                                </Popover>
-                              </div>
-                            </>
-                          )}
-                        </Form.List>
+                      {/* 入参匹配规则已移至各响应内部配置，此处保留隐藏字段向后兼容旧数据 */}
+                      <Form.Item name="paramMatchers" hidden initialValue={[]}>
+                        <Input />
                       </Form.Item>
 
                       {/* 隐藏的表单字段用于存储响应数据 */}