whistle.mock-plugins 1.0.6-beta.20 → 1.0.6-beta.21

package/package.json

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

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Card, Button, Space, Badge, Row, Col, Input, Select, Tooltip, message } from 'antd';
+import React, { useState } from 'react';
+import { Card, Button, Space, Badge, Row, Col, Input, Select, Tooltip, message, AutoComplete } from 'antd';
 import { 
   CodeOutlined, 
   EyeOutlined, 
@@ -7,7 +7,8 @@ import {
   FileTextOutlined,
   PlusCircleOutlined,
   DeleteOutlined,
-  CheckCircleOutlined 
+  CheckCircleOutlined,
+  EditOutlined 
 } from '@ant-design/icons';
 import { generateResponseId } from './utils';
 
@@ -21,6 +22,8 @@ const ResponseContentEditor = ({
   onPreview
 }) => {
   const { getFieldValue, setFieldsValue } = form;
+  const [isEditing, setIsEditing] = useState(false);
+  const [editingName, setEditingName] = useState('');
 
   // 查找激活的响应
   const activeResponseIndex = responses.findIndex(r => r.id === activeResponseId);
@@ -88,15 +91,34 @@ const ResponseContentEditor = ({
   // 切换响应
   const handleResponseSelect = (responseId) => {
     setFieldsValue({ activeResponseId: responseId });
+    setIsEditing(false);
   };
 
-  // 更新响应名称
-  const handleNameChange = (responseId, name) => {
-    const currentResponses = getFieldValue('responses') || [];
-    const updatedResponses = currentResponses.map(resp => 
-      resp.id === responseId ? { ...resp, name } : resp
-    );
-    setFieldsValue({ responses: updatedResponses });
+  // 开始编辑响应名称
+  const handleStartEdit = () => {
+    if (activeResponse) {
+      setEditingName(activeResponse.name || '');
+      setIsEditing(true);
+    }
+  };
+
+  // 完成编辑响应名称
+  const handleFinishEdit = () => {
+    if (activeResponseId && editingName.trim()) {
+      const currentResponses = getFieldValue('responses') || [];
+      const updatedResponses = currentResponses.map(resp => 
+        resp.id === activeResponseId ? { ...resp, name: editingName.trim() } : resp
+      );
+      setFieldsValue({ responses: updatedResponses });
+    }
+    setIsEditing(false);
+    setEditingName('');
+  };
+
+  // 取消编辑
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+    setEditingName('');
   };
 
   // 更新响应内容
@@ -219,73 +241,95 @@ const ResponseContentEditor = ({
       style={{ marginBottom: 16 }}
       bodyStyle={{ padding: '16px' }}
     >
-      {/* 响应选择和名称编辑 */}
+      {/* 响应选择和名称编辑合并区域 */}
       <div style={{ marginBottom: '16px' }}>
         <Row gutter={12} align="middle">
-          <Col span={10}>
+          <Col span={20}>
             <div style={{ marginBottom: '8px' }}>
               <label style={{ 
                 fontSize: '12px', 
                 color: '#666', 
                 fontWeight: 'bold' 
               }}>
-                选择响应
+                选择响应 / 编辑名称
               </label>
             </div>
-            <Select
-              style={{ width: '100%' }}
-              placeholder="选择要编辑的响应"
-              value={activeResponseId}
-              onChange={handleResponseSelect}
-              optionLabelProp="label"
-            >
-              {responses.map((resp, index) => (
-                <Option 
-                  key={resp.id} 
-                  value={resp.id}
-                  label={
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      <CheckCircleOutlined style={{ color: '#52c41a' }} />
-                      <span>{resp.name || `响应 ${index + 1}`}</span>
-                    </div>
-                  }
-                >
-                  <div style={{ padding: '4px 0' }}>
-                    <div style={{ 
-                      display: 'flex', 
-                      alignItems: 'center', 
-                      justifyContent: 'space-between',
-                      marginBottom: '4px'
-                    }}>
-                      <span style={{ fontWeight: 'bold' }}>
-                        {resp.name || `响应 ${index + 1}`}
-                      </span>
-                      {resp.id === activeResponseId && (
-                        <Badge status="processing" text="当前选中" />
-                      )}
-                    </div>
-                  </div>
-                </Option>
-              ))}
-            </Select>
-          </Col>
-          
-          <Col span={10}>
-            <div style={{ marginBottom: '8px' }}>
-              <label style={{ 
-                fontSize: '12px', 
-                color: '#666', 
-                fontWeight: 'bold' 
-              }}>
-                响应名称
-              </label>
+            
+            <div style={{ position: 'relative' }}>
+              {isEditing ? (
+                // 编辑模式：显示输入框
+                <Input.Group compact>
+                  <Input
+                    style={{ width: 'calc(100% - 80px)' }}
+                    value={editingName}
+                    onChange={(e) => setEditingName(e.target.value)}
+                    onPressEnter={handleFinishEdit}
+                    onBlur={handleFinishEdit}
+                    placeholder="输入响应名称"
+                    autoFocus
+                  />
+                  <Button 
+                    style={{ width: '40px' }}
+                    type="primary" 
+                    icon={<CheckCircleOutlined />}
+                    onClick={handleFinishEdit}
+                  />
+                  <Button 
+                    style={{ width: '40px' }}
+                    icon={<DeleteOutlined />}
+                    onClick={handleCancelEdit}
+                  />
+                </Input.Group>
+              ) : (
+                // 选择模式：显示下拉选择器
+                <Input.Group compact>
+                  <Select
+                    style={{ width: 'calc(100% - 40px)' }}
+                    placeholder="选择要编辑的响应"
+                    value={activeResponseId}
+                    onChange={handleResponseSelect}
+                    optionLabelProp="label"
+                  >
+                    {responses.map((resp, index) => (
+                      <Option 
+                        key={resp.id} 
+                        value={resp.id}
+                        label={
+                          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                            <CheckCircleOutlined style={{ color: '#52c41a' }} />
+                            <span>{resp.name || `响应 ${index + 1}`}</span>
+                          </div>
+                        }
+                      >
+                        <div style={{ padding: '4px 0' }}>
+                          <div style={{ 
+                            display: 'flex', 
+                            alignItems: 'center', 
+                            justifyContent: 'space-between',
+                            marginBottom: '4px'
+                          }}>
+                            <span style={{ fontWeight: 'bold' }}>
+                              {resp.name || `响应 ${index + 1}`}
+                            </span>
+                            {resp.id === activeResponseId && (
+                              <Badge status="processing" text="当前选中" />
+                            )}
+                          </div>
+                        </div>
+                      </Option>
+                    ))}
+                  </Select>
+                  <Tooltip title="编辑响应名称">
+                    <Button 
+                      style={{ width: '40px' }}
+                      icon={<EditOutlined />}
+                      onClick={handleStartEdit}
+                      disabled={!activeResponse}
+                    />
+                  </Tooltip>
+                </Input.Group>
+              )}
             </div>
-            <Input 
-              placeholder="响应名称" 
-              value={activeResponse?.name || ''}
-              onChange={(e) => activeResponseId && handleNameChange(activeResponseId, e.target.value)}
-              disabled={!activeResponse}
-            />
           </Col>
           
           <Col span={4}>