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

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

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

@@ -22,22 +22,20 @@ const PreviewModal = ({
         <div style={{ 
           marginBottom: '16px',
           padding: '8px',
-          background: '#f9f9f9',
           borderRadius: '4px',
-          borderLeft: '4px solid #1890ff'
+          borderLeft: '4px solid #00f0ff'
         }}>
           <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>描述：</div>
-          <div>{previewContent.description}</div>
+          <div style={{ opacity: 0.7 }}>{previewContent.description}</div>
         </div>
       )}
       
       <div style={{ 
         maxHeight: '60vh', 
         overflow: 'auto', 
-        backgroundColor: '#f5f5f5', 
         padding: '16px',
         borderRadius: '4px',
-        fontFamily: 'monospace'
+        fontFamily: "'Share Tech Mono', monospace",
       }}>
         <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
           {previewContent?.content}
@@ -47,4 +45,4 @@ const PreviewModal = ({
   );
 };
 
-export default PreviewModal; 
+export default PreviewModal;

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

@@ -0,0 +1,165 @@
+import React, { useState } from 'react';
+import { Button, Input, message, Space, Tabs, Tag } from 'antd';
+import { DownloadOutlined, ThunderboltOutlined, CopyOutlined } from '@ant-design/icons';
+import axios from 'axios';
+
+const { TextArea } = Input;
+
+/**
+ * JSON 转 Mock.js 模板
+ * 简单转换：字符串 -> '@string', 数字 -> '@integer(1,100)', 布尔 -> '@boolean'
+ * 保留对象结构
+ */
+const jsonToMockTemplate = (obj, depth = 0) => {
+  if (obj === null) return null;
+  if (typeof obj === 'string') {
+    // 保留特定格式字符串的提示
+    if (/^\d{4}-\d{2}-\d{2}/.test(obj)) return '@date';
+    if (/^\d{4}-\d{2}-\d{2}T/.test(obj)) return '@datetime';
+    if (/^https?:\/\//.test(obj)) return '@url';
+    if (/^\w+@\w+\.\w+/.test(obj)) return '@email';
+    if (/^1[3-9]\d{9}$/.test(obj)) return '@string("number", 11)';
+    return '@csentence(3, 10)';
+  }
+  if (typeof obj === 'number') {
+    if (Number.isInteger(obj)) return '@integer(1, 999)';
+    return '@float(1, 100, 2, 2)';
+  }
+  if (typeof obj === 'boolean') return '@boolean';
+  if (Array.isArray(obj)) {
+    if (obj.length === 0) return [];
+    const template = jsonToMockTemplate(obj[0], depth + 1);
+    // 用 |1-5 表示数组长度随机
+    return [template];
+  }
+  if (typeof obj === 'object') {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = jsonToMockTemplate(value, depth + 1);
+    }
+    return result;
+  }
+  return obj;
+};
+
+const RealResponseRecorder = ({ urlPattern, onApply }) => {
+  const [fetchUrl, setFetchUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [response, setResponse] = useState(null);
+  const [activeTab, setActiveTab] = useState('preview');
+
+  const handleFetch = async () => {
+    const targetUrl = fetchUrl.trim() || urlPattern;
+    if (!targetUrl) {
+      message.warning('请输入目标 URL');
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await axios.post('/cgi-bin/proxy-fetch', {
+        url: targetUrl,
+        method: 'GET',
+      });
+      if (res.data.code === 0) {
+        setResponse(res.data.data);
+        setActiveTab('preview');
+        message.success('抓取成功');
+      } else {
+        throw new Error(res.data.message);
+      }
+    } catch (err) {
+      message.error('抓取失败: ' + (err.response?.data?.message || err.message));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGenerateMock = () => {
+    if (!response?.body) return;
+    try {
+      const json = JSON.parse(response.body);
+      const template = jsonToMockTemplate(json);
+      const mockTemplate = JSON.stringify(template, null, 2);
+      onApply?.(mockTemplate);
+      message.success('Mock 模板已生成');
+    } catch (e) {
+      message.error('响应不是 JSON，无法生成模板: ' + e.message);
+    }
+  };
+
+  const handleCopy = () => {
+    if (response?.body) {
+      navigator.clipboard.writeText(response.body);
+      message.success('已复制');
+    }
+  };
+
+  return (
+    <div style={{ padding: '16px 0' }}>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Space style={{ width: '100%' }}>
+          <Input
+            placeholder={urlPattern || '输入真实接口 URL'}
+            value={fetchUrl}
+            onChange={(e) => setFetchUrl(e.target.value)}
+            style={{ width: 400 }}
+            onPressEnter={handleFetch}
+          />
+          <Button
+            type="primary"
+            icon={<ThunderboltOutlined />}
+            loading={loading}
+            onClick={handleFetch}
+          >
+            抓取真实响应
+          </Button>
+        </Space>
+
+        {response && (
+          <>
+            <Space>
+              <Tag color={response.status >= 200 && response.status < 300 ? 'success' : 'error'}>
+                {response.status} {response.statusText}
+              </Tag>
+              <Button size="small" icon={<CopyOutlined />} onClick={handleCopy}>
+                复制原文
+              </Button>
+              <Button size="small" icon={<DownloadOutlined />} onClick={handleGenerateMock} type="primary">
+                生成 Mock 模板
+              </Button>
+            </Space>
+
+            <Tabs activeKey={activeTab} onChange={setActiveTab}>
+              <Tabs.TabPane tab="响应预览" key="preview">
+                <TextArea
+                  value={response.body}
+                  readOnly
+                  rows={12}
+                  style={{ fontFamily: 'monospace', fontSize: 12 }}
+                />
+              </Tabs.TabPane>
+              <Tabs.TabPane tab="生成的 Mock 模板" key="mock">
+                <TextArea
+                  value={(() => {
+                    try {
+                      const json = JSON.parse(response.body);
+                      const template = jsonToMockTemplate(json);
+                      return JSON.stringify(template, null, 2);
+                    } catch (e) {
+                      return '// 响应不是 JSON，无法生成模板\n' + response.body;
+                    }
+                  })()}
+                  readOnly
+                  rows={12}
+                  style={{ fontFamily: 'monospace', fontSize: 12 }}
+                />
+              </Tabs.TabPane>
+            </Tabs>
+          </>
+        )}
+      </Space>
+    </div>
+  );
+};
+
+export default RealResponseRecorder;