refactor: 对话输入框响应式布局重构，支持水平/垂直布局自动切换

README.md

@@ -446,4 +446,63 @@ api.logs.filter({ user, type, status });
 
 ---
 
-*最后更新：2026-03-30*
+## 对话输入框布局
+
+### 布局结构
+
+对话输入框采用响应式水平布局，根据屏幕宽度自动调整组件排列方式。
+
+**桌面端（>= 768px）**：
+- 水平布局：模型选择器 → 输入区域 → 工具按钮 → 发送按钮
+- 模型选择器：标准模式（显示完整模型名称，宽度 160px）
+- 分隔方式：右侧垂直边框
+
+**平板端（480-768px）**：
+- 水平布局：模型选择器 → 输入区域 → 工具按钮 → 发送按钮
+- 模型选择器：紧凑模式（仅显示图标，宽度 100px）
+- 工具按钮：上传文件、代码块
+- 分隔方式：右侧垂直边框
+
+**移动端（< 480px）**：
+- 垂直布局：模型选择器在上，输入区域在下
+- 模型选择器：标准模式（显示完整模型名称，宽度 160px）
+- 分隔方式：底部水平边框
+
+### ModelSelector 组件
+
+ModelSelector 组件支持 `variant` 属性，控制显示模式：
+
+```jsx
+<ModelSelector
+  selectedModel={selectedModel}
+  onSelectModel={setSelectedModel}
+  variant="standard"  // 或 "compact"
+/>
+```
+
+**variant 属性值**：
+- `standard`：标准模式，显示完整模型名称
+- `compact`：紧凑模式，仅显示图标
+
+### 响应式断点
+
+| 断点名称 | 屏幕宽度 | 布局模式 | 模型选择器 | 宽度 |
+|---------|---------|---------|-----------|------|
+| 桌面端 | >= 768px | 水平 | 标准 | 160px |
+| 平板端 | 480-768px | 水平 | 紧凑 | 100px |
+| 移动端 | < 480px | 垂直 | 标准 | 160px |
+
+### 工具按钮
+
+- 工具按钮横向排列在输入区域右侧（水平布局）或下方（垂直布局）
+- 当前工具按钮：上传文件、代码块
+- 工具按钮右侧显示分隔边框（水平布局）
+
+### 下拉菜单方向
+
+- 默认向下展开
+- 如果下方空间不足，自动向上展开
+
+---
+
+*最后更新：2026-04-10*