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

package/package.json

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

package/ui/src/components/interface-management/README.md

@@ -18,11 +18,19 @@ src/components/interface-management/
 
 ## 组件优化说明
 
-### 1. 响应管理UI优化
+### 1. 响应管理UI优化历程
+
+#### 第一阶段：组件合并
 - **合并组件**：将原来的 `ResponseManager` 和 `ResponseEditor` 合并为一个 `ResponseContentEditor` 组件
 - **简化界面**：移除响应描述字段和内容统计信息，只保留响应名称设置
 - **一体化操作**：响应的添加、删除、切换和内容编辑都在同一个Card组件中完成
-- **更简洁的UI**：减少界面复杂度，提升用户体验
+
+#### 第二阶段：交互优化
+- **智能下拉框**：将响应选择和名称编辑合并为一个既可选择又可编辑的交互组件
+- **双模式切换**：
+  - **选择模式**：下拉选择器用于切换不同响应，右侧编辑按钮可进入编辑模式
+  - **编辑模式**：输入框直接编辑响应名称，确认或取消按钮完成操作
+- **更简洁的布局**：从三列布局（选择/名称/操作）优化为两列布局（选择编辑/删除）
 
 ### 2. 各组件职责
 
@@ -42,10 +50,9 @@ src/components/interface-management/
 - `generateResponseId()`: 生成唯一响应ID
 
 #### ResponseContentEditor.js
-**合并后的响应内容编辑器组件**，负责：
+**优化后的响应内容编辑器组件**，负责：
 - 响应的增删改查操作
-- 响应选择和切换
-- 响应名称编辑（简化，只保留名称字段）
+- 智能响应选择和名称编辑（双模式交互）
 - 响应内容编辑和格式化
 - 预览功能集成
 
@@ -55,6 +62,11 @@ Props:
 - `activeResponseId`: 当前激活的响应ID
 - `onPreview`: 预览回调
 
+特色功能：
+- **双模式交互界面**：选择模式下可快速切换响应，编辑模式下可直接修改名称
+- **一键切换**：点击编辑按钮立即进入编辑模式，支持回车确认和失焦保存
+- **优雅的状态管理**：使用useState管理编辑状态，实现流畅的模式切换
+
 #### InterfaceTestModal.js
 接口测试模态框组件，负责：
 - 接口测试表单
@@ -102,7 +114,7 @@ import {
   generateResponseId
 } from '../components/interface-management';
 
-// 使用合并后的响应编辑器
+// 使用优化后的响应编辑器
 <ResponseContentEditor
   form={form}
   responses={responses}
@@ -113,31 +125,60 @@ import {
 
 ## 优化效果
 
-### UI简化
-1. **移除冗余字段**：去掉响应描述和内容统计，界面更简洁
-2. **合并操作区域**：响应管理和内容编辑在同一界面完成
-3. **流程简化**：减少用户操作步骤，提升效率
+### UI简化与交互优化
+1. **智能交互**：一个组件同时支持选择和编辑功能，减少界面元素
+2. **操作直观**：下拉选择 + 编辑按钮的组合，用户操作更自然
+3. **状态清晰**：选择模式和编辑模式有明确的视觉区分
+4. **快速操作**：支持回车确认、失焦保存等快捷操作
+
+### 布局优化
+- **从3列布局简化为2列**：选择编辑区域（span=20）+ 删除操作（span=4）
+- **更好的空间利用**：合并后的组件占据更大空间，操作更便捷
+- **视觉统一**：保持与整体设计风格的一致性
 
 ### 代码优化
-1. **组件合并**：从2个组件合并为1个，减少组件复杂度
-2. **逻辑集中**：相关功能集中在一个组件中，便于维护
-3. **接口简化**：减少组件间的通信和状态传递
+1. **状态管理增强**：新增编辑状态和名称编辑状态管理
+2. **交互逻辑清晰**：分离选择、编辑开始、编辑完成、编辑取消等逻辑
+3. **事件处理完善**：支持多种编辑完成方式（回车、点击确认、失焦）
 
 ### 功能保持
-1. **完整功能**：所有原有功能都得到保留
+1. **完整功能**：所有原有功能都得到保留和增强
 2. **兼容性**：保持与现有数据结构的完全兼容
 3. **稳定性**：优化过程中不破坏任何现有功能
 
+## 新的UI布局
+
+优化后的响应模块布局：
+
+```
+┌─ 响应内容编辑 ─ [添加响应] [预览] [格式化JSON] ─┐
+│                                              │
+│ ┌─ 选择响应 / 编辑名称 ────────────┐ ┌─ 操作 ─┐  │
+│ │ 选择模式：[下拉选择器] [编辑按钮] │ │ [删除] │  │
+│ │ 编辑模式：[输入框] [确认] [取消]  │ │        │  │
+│ └─────────────────────────────┘ └──────┘  │
+│                                              │
+│ 响应内容：                                    │
+│ ┌──────────────────────────────────────────┐  │
+│ │                                          │  │
+│ │  JSON内容编辑区域                          │  │
+│ │                                          │  │
+│ └──────────────────────────────────────────┘  │
+└──────────────────────────────────────────────┘
+```
+
 ## 优势
 
-1. **用户体验**：更简洁的界面，更流畅的操作体验
-2. **代码维护**：更少的组件数量，更集中的业务逻辑
-3. **性能提升**：减少组件渲染和状态更新的复杂度
-4. **开发效率**：简化的代码结构，更容易理解和修改
+1. **用户体验**：更智能的交互设计，一个组件完成多种操作
+2. **界面简洁**：减少界面元素，视觉更清爽
+3. **操作效率**：快速切换选择和编辑模式，提升工作效率
+4. **代码质量**：清晰的状态管理和事件处理逻辑
+5. **扩展性**：良好的组件设计，便于后续功能扩展
 
 ## 兼容性
 
 - 完全兼容原有功能和数据格式
 - 保持所有API接口不变
 - 用户界面和交互逻辑保持一致
-- 构建和打包正常工作 
+- 构建和打包正常工作
+- 向前兼容，新功能不影响现有数据 

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

@@ -211,28 +211,49 @@ const ResponseContentEditor = ({
         </div>
       }
       extra={
-        <Space>
+        <Space size="small">
           <Button 
-            type="primary" 
+            type="default" 
             icon={<PlusCircleOutlined />} 
             onClick={handleAddResponse}
             size="small"
+            style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '4px',
+              borderColor: '#1890ff',
+              color: '#1890ff'
+            }}
           >
             添加响应
           </Button>
           <Button 
-            type="link" 
+            type="default" 
             icon={<EyeOutlined />} 
             onClick={handlePreview}
             size="small"
+            style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '4px',
+              borderColor: '#52c41a',
+              color: '#52c41a'
+            }}
           >
             预览
           </Button>
           <Button 
-            type="link" 
+            type="default" 
             icon={<FormatPainterOutlined />} 
             onClick={formatJsonContent}
             size="small"
+            style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '4px',
+              borderColor: '#fa8c16',
+              color: '#fa8c16'
+            }}
           >
             格式化JSON
           </Button>