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

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

@@ -150,6 +150,8 @@
 
 /**![menu-unfold](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQwOCA0NDJoNDgwYzQuNCAwIDgtMy42IDgtOHYtNTZjMC00LjQtMy42LTgtOC04SDQwOGMtNC40IDAtOCAzLjYtOCA4djU2YzAgNC40IDMuNiA4IDggOHptLTggMjA0YzAgNC40IDMuNiA4IDggOGg0ODBjNC40IDAgOC0zLjYgOC04di01NmMwLTQuNC0zLjYtOC04LThINDA4Yy00LjQgMC04IDMuNi04IDh2NTZ6bTUwNC00ODZIMTIwYy00LjQgMC04IDMuNi04IDh2NTZjMCA0LjQgMy42IDggOCA4aDc4NGM0LjQgMCA4LTMuNiA4LTh2LTU2YzAtNC40LTMuNi04LTgtOHptMCA2MzJIMTIwYy00LjQgMC04IDMuNi04IDh2NTZjMCA0LjQgMy42IDggOCA4aDc4NGM0LjQgMCA4LTMuNiA4LTh2LTU2YzAtNC40LTMuNi04LTgtOHpNMTQyLjQgNjQyLjFMMjk4LjcgNTE5YTguODQgOC44NCAwIDAwMC0xMy45TDE0Mi40IDM4MS45Yy01LjgtNC42LTE0LjQtLjUtMTQuNCA2Ljl2MjQ2LjNhOC45IDguOSAwIDAwMTQuNCA3eiIgLz48L3N2Zz4=) */
 
+/**![menu](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkwNCAxNjBIMTIwYy00LjQgMC04IDMuNi04IDh2NjRjMCA0LjQgMy42IDggOCA4aDc4NGM0LjQgMCA4LTMuNiA4LTh2LTY0YzAtNC40LTMuNi04LTgtOHptMCA2MjRIMTIwYy00LjQgMC04IDMuNi04IDh2NjRjMCA0LjQgMy42IDggOCA4aDc4NGM0LjQgMCA4LTMuNiA4LTh2LTY0YzAtNC40LTMuNi04LTgtOHptMC0zMTJIMTIwYy00LjQgMC04IDMuNi04IDh2NjRjMCA0LjQgMy42IDggOCA4aDc4NGM0LjQgMCA4LTMuNiA4LTh2LTY0YzAtNC40LTMuNi04LTgtOHoiIC8+PC9zdmc+) */
+
 /**![minus-square](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMyOCA1NDRoMzY4YzQuNCAwIDgtMy42IDgtOHYtNDhjMC00LjQtMy42LTgtOC04SDMyOGMtNC40IDAtOCAzLjYtOCA4djQ4YzAgNC40IDMuNiA4IDggOHoiIC8+PHBhdGggZD0iTTg4MCAxMTJIMTQ0Yy0xNy43IDAtMzIgMTQuMy0zMiAzMnY3MzZjMCAxNy43IDE0LjMgMzIgMzIgMzJoNzM2YzE3LjcgMCAzMi0xNC4zIDMyLTMyVjE0NGMwLTE3LjctMTQuMy0zMi0zMi0zMnptLTQwIDcyOEgxODRWMTg0aDY1NnY2NTZ6IiAvPjwvc3ZnPg==) */
 
 /**![plus-circle](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTY5NiA0ODBINTQ0VjMyOGMwLTQuNC0zLjYtOC04LThoLTQ4Yy00LjQgMC04IDMuNi04IDh2MTUySDMyOGMtNC40IDAtOCAzLjYtOCA4djQ4YzAgNC40IDMuNiA4IDggOGgxNTJ2MTUyYzAgNC40IDMuNiA4IDggOGg0OGM0LjQgMCA4LTMuNiA4LThWNTQ0aDE1MmM0LjQgMCA4LTMuNiA4LTh2LTQ4YzAtNC40LTMuNi04LTgtOHoiIC8+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0em0wIDgyMGMtMjA1LjQgMC0zNzItMTY2LjYtMzcyLTM3MnMxNjYuNi0zNzIgMzcyLTM3MiAzNzIgMTY2LjYgMzcyIDM3Mi0xNjYuNiAzNzItMzcyIDM3MnoiIC8+PC9zdmc+) */

package/package.json

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

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

@@ -65,11 +65,11 @@ const DataManagementModal = ({ visible, onCancel, interfaceItem, onSaved }) => {
         open={visible}
         onOk={handleOk}
         onCancel={onCancel}
-        width={900}
+        width={1040}
         destroyOnClose
         okText="保存"
         cancelText="取消"
-        bodyStyle={{ maxHeight: '70vh', overflow: 'auto', padding: '24px' }}
+        bodyStyle={{ maxHeight: '80vh', overflow: 'auto', padding: '24px' }}
       >
         <Form form={form} layout="vertical" initialValues={{ responses: [], activeResponseId: '' }}>
           <Form.Item name="responses" hidden>

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

@@ -12,7 +12,8 @@ import {
   CheckCircleOutlined,
   EditOutlined,
   FullscreenOutlined,
-  FullscreenExitOutlined 
+  FullscreenExitOutlined,
+  MenuOutlined
 } from '@ant-design/icons';
 import { generateResponseId } from './utils';
 
@@ -30,6 +31,7 @@ const ResponseContentEditor = ({
   const [isEditing, setIsEditing] = useState(false);
   const [editingName, setEditingName] = useState('');
   const [isTextareaFullscreen, setIsTextareaFullscreen] = useState(false);
+  const [showSorting, setShowSorting] = useState(false);
 
   // 查找激活的响应
   const activeResponseIndex = responses.findIndex(r => r.id === activeResponseId);
@@ -279,6 +281,17 @@ const ResponseContentEditor = ({
       }
       extra={
         <Space size="small">
+          {enableSorting && (
+            <Button 
+              type="default" 
+              icon={<MenuOutlined />} 
+              onClick={() => setShowSorting(!showSorting)}
+              size="small"
+              style={{ display: 'flex', alignItems: 'center', gap: '4px' }}
+            >
+              排序
+            </Button>
+          )}
           <Button 
             type="default" 
             icon={<PlusCircleOutlined />} 
@@ -329,11 +342,8 @@ 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>
+      {enableSorting && showSorting && Array.isArray(sortableList) && sortableList.length > 1 && (
+        <div style={{ marginBottom: 12 }}>
           <ReactSortable
             list={sortableList}
             setList={(newState) => {
@@ -341,31 +351,17 @@ const ResponseContentEditor = ({
               handleAfterSort(newState);
             }}
             animation={150}
-            handle={undefined}
             ghostClass="sortable-ghost"
+            style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 4 }}
           >
             {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'
-                }}
+                className={`sortable-chip${item.id === activeResponseId ? ' sortable-chip-active' : ''}`}
                 onClick={() => handleResponseSelect(item.id)}
-                title="拖拽以排序，点击选择"
+                title={item.name || '未命名响应'}
               >
-                <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>
+                {item.name || '未命名响应'}
               </div>
             ))}
           </ReactSortable>
@@ -503,7 +499,7 @@ const ResponseContentEditor = ({
           
           <div style={{ position: 'relative' }}>
             <TextArea 
-              rows={12} 
+              rows={18} 
               placeholder="请输入响应内容..." 
               style={{ 
                 fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',

package/ui/src/styles/interface-management.css

@@ -1144,6 +1144,37 @@
   background: #e6f4ff;
 }
 
+/* 紧凑排序 Chips */
+.sortable-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  height: 24px;
+  border: 1px solid #e6e6e6;
+  border-radius: 12px;
+  background: #fff;
+  font-size: 12px;
+  color: #595959;
+  cursor: move;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.sortable-chip:hover {
+  border-color: #bfbfbf;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+}
+
+.sortable-chip-active {
+  background: #e6f7ff;
+  border-color: #91d5ff;
+  color: #1677ff;
+}
+
+.sortable-ghost {
+  opacity: 0.6;
+}
+
 /* 接口弹窗样式 */
 .interface-modal .ant-modal-header {
   border-bottom: 1px solid #f0f0f0;