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

openspec/specs/responsive-chat-input/spec.md

@@ -0,0 +1,110 @@
+# Capability: responsive-chat-input
+
+## Purpose
+
+系统 SHALL 支持响应式对话输入框布局，根据屏幕宽度自动切换水平/垂直布局模式，优化在不同设备上的用户体验。
+
+## ADDED Requirements
+
+### Requirement: 响应式布局切换
+
+系统 SHALL 根据屏幕宽度自动切换对话输入框的布局模式。
+
+#### Scenario: 桌面端水平布局
+- **WHEN** 用户在桌面端访问（屏幕宽度 >= 768px）
+- **THEN** 系统应用水平布局模式
+- **THEN** 输入框容器使用 `flex-direction: row`
+- **THEN** 组件从左到右依次排列：模型选择器、输入区域、工具按钮组、发送按钮
+
+#### Scenario: 平板端水平布局
+- **WHEN** 用户在平板端访问（屏幕宽度 480-768px）
+- **THEN** 系统应用水平布局模式
+- **THEN** 输入框容器使用 `flex-direction: row`
+- **THEN** 模型选择器使用紧凑型显示
+- **THEN** 工具按钮组显示当前可用的工具按钮
+
+#### Scenario: 移动端垂直布局
+- **WHEN** 用户在移动端访问（屏幕宽度 < 480px）
+- **THEN** 系统应用垂直布局模式
+- **THEN** 输入框容器使用 `flex-direction: column`
+- **THEN** 组件从上到下依次排列：模型选择器、输入区域、工具按钮组、发送按钮
+- **THEN** 模型选择器使用标准显示模式
+
+### Requirement: 模型选择器布局适配
+
+系统 SHALL 在不同布局模式下调整模型选择器的显示样式。
+
+#### Scenario: 水平布局中的模型选择器
+- **WHEN** 输入框使用水平布局（桌面端/平板端）
+- **THEN** 模型选择器位于输入框左侧
+- **THEN** 模型选择器右侧显示垂直分隔边框（1px solid）
+- **THEN** 桌面端（>= 768px）使用标准显示模式（宽度 160px）
+- **THEN** 平板端（480-768px）使用紧凑显示模式（宽度 100px，图标型）
+
+#### Scenario: 垂直布局中的模型选择器
+- **WHEN** 输入框使用垂直布局（移动端）
+- **THEN** 模型选择器位于输入框上方
+- **THEN** 模型选择器底部显示水平分隔边框（1px solid）
+- **THEN** 使用标准显示模式（显示完整模型名称）
+
+### Requirement: 输入区域布局适配
+
+系统 SHALL 在不同布局模式下调整输入区域的尺寸和样式。
+
+#### Scenario: 水平布局中的输入区域
+- **WHEN** 输入框使用水平布局（桌面端/平板端）
+- **THEN** 输入区域占据剩余水平空间（`flex: 1`）
+- **THEN** 输入区域高度固定或使用自动高度
+
+#### Scenario: 垂直布局中的输入区域
+- **WHEN** 输入框使用垂直布局（移动端）
+- **THEN** 输入区域占据垂直空间，高度自适应内容
+- **THEN** 输入区域宽度占满容器宽度
+
+### Requirement: 工具按钮组布局适配
+
+系统 SHALL 在不同布局模式下调整工具按钮组的排列方式。
+
+#### Scenario: 水平布局中的工具按钮
+- **WHEN** 输入框使用水平布局（桌面端/平板端）
+- **THEN** 工具按钮组横向排列在输入区域右侧
+- **THEN** 工具按钮包括：上传文件、代码块
+- **THEN** 每个按钮使用图标型显示
+- **THEN** 工具按钮右侧使用垂直分隔边框（1px solid）
+
+#### Scenario: 垂直布局中的工具按钮
+- **WHEN** 输入框使用垂直布局（移动端）
+- **THEN** 工具按钮组横向排列在输入区域下方
+- **THEN** 工具按钮包括：上传文件、代码块
+- **THEN** 每个按钮使用图标型显示
+- **THEN** 工具按钮组不显示右侧分隔边框
+
+### Requirement: 发送按钮布局适配
+
+系统 SHALL 在不同布局模式下调整发送按钮的位置和样式。
+
+#### Scenario: 水平布局中的发送按钮
+- **WHEN** 输入框使用水平布局（桌面端/平板端）
+- **THEN** 发送按钮位于工具按钮组右侧
+- **THEN** 发送按钮与工具按钮组之间保持适当间距
+
+#### Scenario: 垂直布局中的发送按钮
+- **WHEN** 输入框使用垂直布局（移动端）
+- **THEN** 发送按钮位于工具按钮组下方或与工具按钮组并排
+- **THEN** 发送按钮占据合适宽度
+
+### Requirement: 视觉分隔适配
+
+系统 SHALL 在不同布局模式下使用适当的视觉分隔方式。
+
+#### Scenario: 水平布局中的垂直分隔
+- **WHEN** 输入框使用水平布局
+- **THEN** 模型选择器和输入框之间显示垂直分隔边框
+- **THEN** 分隔边框颜色与输入框边框一致
+- **THEN** 分隔边框宽度为 1px
+
+#### Scenario: 垂直布局中的水平分隔
+- **WHEN** 输入框使用垂直布局
+- **THEN** 模型选择器和输入框之间显示水平分隔边框
+- **THEN** 分隔边框颜色与输入框边框一致
+- **THEN** 分隔边框宽度为 1px