whistle.mock-plugins 1.2.0 → 1.2.1-beta.1

package/app/public/js/index.js.LICENSE.txt

@@ -4,6 +4,12 @@
 	http://jedwatson.github.io/classnames
 */
 
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 
 /**
@@ -55,6 +61,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/**!
+ * Sortable 1.15.6
+ * @author	RubaXa   <trash@rubaxa.org>
+ * @author	owenm    <owen23355@gmail.com>
+ * @license MIT
+ */
+
 /**![api](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkxNy43IDE0OC44bC00Mi40LTQyLjRjLTEuNi0xLjYtMy42LTIuMy01LjctMi4zcy00LjEuOC01LjcgMi4zbC03Ni4xIDc2LjFhMTk5LjI3IDE5OS4yNyAwIDAwLTExMi4xLTM0LjNjLTUxLjIgMC0xMDIuNCAxOS41LTE0MS41IDU4LjZMNDMyLjMgMzA4LjdhOC4wMyA4LjAzIDAgMDAwIDExLjNMNzA0IDU5MS43YzEuNiAxLjYgMy42IDIuMyA1LjcgMi4zIDIgMCA0LjEtLjggNS43LTIuM2wxMDEuOS0xMDEuOWM2OC45LTY5IDc3LTE3NS43IDI0LjMtMjUzLjVsNzYuMS03Ni4xYzMuMS0zLjIgMy4xLTguMyAwLTExLjR6TTc2OS4xIDQ0MS43bC01OS40IDU5LjQtMTg2LjgtMTg2LjggNTkuNC01OS40YzI0LjktMjQuOSA1OC4xLTM4LjcgOTMuNC0zOC43IDM1LjMgMCA2OC40IDEzLjcgOTMuNCAzOC43IDI0LjkgMjQuOSAzOC43IDU4LjEgMzguNyA5My40IDAgMzUuMy0xMy44IDY4LjQtMzguNyA5My40em0tMTkwLjIgMTA1YTguMDMgOC4wMyAwIDAwLTExLjMgMEw1MDEgNjEzLjMgNDEwLjcgNTIzbDY2LjctNjYuN2MzLjEtMy4xIDMuMS04LjIgMC0xMS4zTDQ0MSA0MDguNmE4LjAzIDguMDMgMCAwMC0xMS4zIDBMMzYzIDQ3NS4zbC00My00M2E3Ljg1IDcuODUgMCAwMC01LjctMi4zYy0yIDAtNC4xLjgtNS43IDIuM0wyMDYuOCA1MzQuMmMtNjguOSA2OS03NyAxNzUuNy0yNC4zIDI1My41bC03Ni4xIDc2LjFhOC4wMyA4LjAzIDAgMDAwIDExLjNsNDIuNCA0Mi40YzEuNiAxLjYgMy42IDIuMyA1LjcgMi4zczQuMS0uOCA1LjctMi4zbDc2LjEtNzYuMWMzMy43IDIyLjkgNzIuOSAzNC4zIDExMi4xIDM0LjMgNTEuMiAwIDEwMi40LTE5LjUgMTQxLjUtNTguNmwxMDEuOS0xMDEuOWMzLjEtMy4xIDMuMS04LjIgMC0xMS4zbC00My00MyA2Ni43LTY2LjdjMy4xLTMuMSAzLjEtOC4yIDAtMTEuM2wtMzYuNi0zNi4yek00NDEuNyA3NjkuMWExMzEuMzIgMTMxLjMyIDAgMDEtOTMuNCAzOC43Yy0zNS4zIDAtNjguNC0xMy43LTkzLjQtMzguN2ExMzEuMzIgMTMxLjMyIDAgMDEtMzguNy05My40YzAtMzUuMyAxMy43LTY4LjQgMzguNy05My40bDU5LjQtNTkuNCAxODYuOCAxODYuOC01OS40IDU5LjR6IiAvPjwvc3ZnPg==) */
 
 /**![appstore](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQ2NCAxNDRIMTYwYy04LjggMC0xNiA3LjItMTYgMTZ2MzA0YzAgOC44IDcuMiAxNiAxNiAxNmgzMDRjOC44IDAgMTYtNy4yIDE2LTE2VjE2MGMwLTguOC03LjItMTYtMTYtMTZ6bS01MiAyNjhIMjEyVjIxMmgyMDB2MjAwem00NTItMjY4SDU2MGMtOC44IDAtMTYgNy4yLTE2IDE2djMwNGMwIDguOCA3LjIgMTYgMTYgMTZoMzA0YzguOCAwIDE2LTcuMiAxNi0xNlYxNjBjMC04LjgtNy4yLTE2LTE2LTE2em0tNTIgMjY4SDYxMlYyMTJoMjAwdjIwMHpNNDY0IDU0NEgxNjBjLTguOCAwLTE2IDcuMi0xNiAxNnYzMDRjMCA4LjggNy4yIDE2IDE2IDE2aDMwNGM4LjggMCAxNi03LjIgMTYtMTZWNTYwYzAtOC44LTcuMi0xNi0xNi0xNnptLTUyIDI2OEgyMTJWNjEyaDIwMHYyMDB6bTQ1Mi0yNjhINTYwYy04LjggMC0xNiA3LjItMTYgMTZ2MzA0YzAgOC44IDcuMiAxNiAxNiAxNmgzMDRjOC44IDAgMTYtNy4yIDE2LTE2VjU2MGMwLTguOC03LjItMTYtMTYtMTZ6bS01MiAyNjhINjEyVjYxMmgyMDB2MjAweiIgLz48L3N2Zz4=) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whistle.mock-plugins",
-  "version": "1.2.0",
+  "version": "1.2.1-beta.1",
   "description": "Whistle 插件，用于快速创建 API 模拟数据",
   "main": "lib/index.js",
   "scripts": {
@@ -39,6 +39,8 @@
     "jest": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-sortablejs": "^6.1.4",
+    "sortablejs": "^1.15.3",
     "react-markdown": "^8.0.7",
     "style-loader": "^3.3.2",
     "webpack": "^5.79.0",

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

@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Input, message } from 'antd';
+import axios from 'axios';
+import { ResponseContentEditor, PreviewModal, formatResponseContent, refreshCacheAfterUpdate } from '.';
+
+const DataManagementModal = ({ 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 (
+    <>
+      <Modal
+        title="数据管理"
+        open={visible}
+        onOk={handleOk}
+        onCancel={onCancel}
+        width={900}
+        destroyOnClose
+        okText="保存"
+        cancelText="取消"
+        bodyStyle={{ maxHeight: '70vh', overflow: 'auto', padding: '24px' }}
+      >
+        <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>
+      </Modal>
+
+      <PreviewModal
+        visible={previewVisible}
+        onCancel={() => setPreviewVisible(false)}
+        previewContent={previewContent}
+      />
+    </>
+  );
+};
+
+export default DataManagementModal;
+
+

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

@@ -1,4 +1,5 @@
 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 } from 'antd';
 import { 
@@ -22,7 +23,8 @@ const ResponseContentEditor = ({
   form,
   responses, 
   activeResponseId, 
-  onPreview
+  onPreview,
+  enableSorting = false
 }) => {
   const { getFieldValue, setFieldsValue } = form;
   const [isEditing, setIsEditing] = useState(false);
@@ -32,6 +34,20 @@ const ResponseContentEditor = ({
   // 查找激活的响应
   const activeResponseIndex = responses.findIndex(r => r.id === activeResponseId);
   const activeResponse = activeResponseIndex >= 0 ? responses[activeResponseIndex] : null;
+  // 拖拽排序：基于 ReactSortable 管理一个本地列表镜像
+  const [sortableList, setSortableList] = useState(() => {
+    return Array.isArray(responses) ? responses.map(r => ({ ...r })) : [];
+  });
+
+  useEffect(() => {
+    setSortableList(Array.isArray(responses) ? responses.map(r => ({ ...r })) : []);
+  }, [responses]);
+
+  const handleAfterSort = (newList) => {
+    // 将排序后的列表写回表单 responses 字段；activeResponseId 不变
+    setFieldsValue({ responses: newList });
+  };
+
 
   // 全屏切换函数
   const toggleTextareaFullscreen = () => {
@@ -313,6 +329,48 @@ const ResponseContentEditor = ({
       style={{ marginBottom: 16 }}
       bodyStyle={{ padding: '16px' }}
     >
+      {enableSorting && Array.isArray(sortableList) && sortableList.length > 1 && (
+        <div style={{ marginBottom: '16px' }}>
+          <div style={{ marginBottom: '8px' }}>
+            <label style={{ fontSize: '12px', color: '#666', fontWeight: 'bold' }}>响应排序（拖拽调整顺序）</label>
+          </div>
+          <ReactSortable
+            list={sortableList}
+            setList={(newState) => {
+              setSortableList(newState);
+              handleAfterSort(newState);
+            }}
+            animation={150}
+            handle={undefined}
+            ghostClass="sortable-ghost"
+          >
+            {sortableList.map((item) => (
+              <div
+                key={item.id}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '6px 10px',
+                  border: '1px solid #f0f0f0',
+                  borderRadius: '4px',
+                  marginBottom: '6px',
+                  background: item.id === activeResponseId ? '#e6f7ff' : '#fff',
+                  cursor: 'move'
+                }}
+                onClick={() => handleResponseSelect(item.id)}
+                title="拖拽以排序，点击选择"
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  <Badge status={item.id === activeResponseId ? 'processing' : 'default'} />
+                  <span style={{ fontWeight: 500 }}>{item.name || '未命名响应'}</span>
+                </div>
+                <div style={{ color: '#999', fontSize: 12 }}>拖拽</div>
+              </div>
+            ))}
+          </ReactSortable>
+        </div>
+      )}
       {/* 响应选择和名称编辑合并区域 */}
       <div style={{ marginBottom: '16px' }}>
         <Row gutter={12} align="middle">

package/ui/src/pages/InterfaceManagement.js

@@ -26,6 +26,7 @@ import {
   formatResponseContent,
   generateResponseId
 } from '../components/interface-management';
+import DataManagementModal from '../components/interface-management/DataManagementModal';
 
 const { Option } = Select;
 const { Search } = AntInput;
@@ -69,6 +70,8 @@ const InterfaceManagement = () => {
   const [modalVisible, setModalVisible] = useState(false);
   const [previewVisible, setPreviewVisible] = useState(false);
   const [isDuplicateMode, setIsDuplicateMode] = useState(false);
+  const [dataModalVisible, setDataModalVisible] = useState(false);
+  const [dataModalRecord, setDataModalRecord] = useState(null);
   
   // 列配置状态
   const [columnConfigVisible, setColumnConfigVisible] = useState(false);
@@ -1001,6 +1004,15 @@ const InterfaceManagement = () => {
             icon={<EditOutlined />} 
             onClick={() => handleEditInterface(record)}
           />
+          {record.proxyType === 'response' && (
+            <Tooltip title="数据管理">
+              <Button 
+                type="text" 
+                icon={<FileTextOutlined />} 
+                onClick={() => { setDataModalRecord(record); setDataModalVisible(true); }}
+              />
+            </Tooltip>
+          )}
           <Tooltip title="复制新增">
             <Button 
               type="text" 
@@ -1833,6 +1845,16 @@ const InterfaceManagement = () => {
           onCancel={() => setPreviewVisible(false)}
           previewContent={previewContent}
         />
+
+        {/* 数据管理弹窗 */}
+        <DataManagementModal
+          visible={dataModalVisible}
+          onCancel={() => { setDataModalVisible(false); setDataModalRecord(null); }}
+          interfaceItem={dataModalRecord}
+          onSaved={() => {
+            fetchInterfaces();
+          }}
+        />
       </div>
     </AppLayout>
   );

package/ui/src/pages/InterfaceManagementV2.js

@@ -32,6 +32,7 @@ import {
   formatResponseContent,
   generateResponseId
 } from '../components/interface-management';
+import DataManagementModal from '../components/interface-management/DataManagementModal';
 
 const { Option } = Select;
 const { Search } = AntInput;
@@ -75,6 +76,8 @@ const InterfaceManagement = () => {
   const [modalVisible, setModalVisible] = useState(false);
   const [previewVisible, setPreviewVisible] = useState(false);
   const [isDuplicateMode, setIsDuplicateMode] = useState(false);
+  const [dataModalVisible, setDataModalVisible] = useState(false);
+  const [dataModalRecord, setDataModalRecord] = useState(null);
   
   // 列配置状态
   const [columnConfigVisible, setColumnConfigVisible] = useState(false);
@@ -1007,6 +1010,15 @@ const InterfaceManagement = () => {
             icon={<EditOutlined />} 
             onClick={() => handleEditInterface(record)}
           />
+          {record.proxyType === 'response' && (
+            <Tooltip title="数据管理">
+              <Button 
+                type="text" 
+                icon={<FileTextOutlined />} 
+                onClick={() => { setDataModalRecord(record); setDataModalVisible(true); }}
+              />
+            </Tooltip>
+          )}
           <Tooltip title="复制新增">
             <Button 
               type="text" 
@@ -1926,6 +1938,16 @@ const InterfaceManagement = () => {
           onCancel={() => setPreviewVisible(false)}
           previewContent={previewContent}
         />
+
+        {/* 数据管理弹窗 */}
+        <DataManagementModal
+          visible={dataModalVisible}
+          onCancel={() => { setDataModalVisible(false); setDataModalRecord(null); }}
+          interfaceItem={dataModalRecord}
+          onSaved={() => {
+            fetchInterfaces();
+          }}
+        />
       </div>
     </AppLayout>
   );