lanyuanxiaoyao/GrandClaw-prototype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
兰缘小妖
2026-04-10 17:46:56 +08:00
parent 3f815db0b2
commit 6e73e6a297
8 changed files with 448 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
openspec/specs/model-selector/spec.md
View File

@@ -1,14 +1,14 @@
## ADDED Requirements
### Requirement: 融合式模型选择器触发器
### Requirement: 独立式模型选择器触发器
系统 SHALL 在对话输入框的顶部集成模型选择器触发器，显示当前选中的模型名称和默认标记。
系统 SHALL 在对话输入框的左侧集成模型选择器触发器，显示当前选中的模型名称。
#### Scenario: 显示模型选择器触发器
- **WHEN** 用户访问聊天页面
- **THEN** 系统在聊天输入框顶部显示模型选择器触发器
- **THEN** 触发器显示模型图标、模型名称、默认标记（如果适用）和下拉箭头
- **THEN** 触发器与输入框融合为一个整体
- **THEN** 系统在聊天输入框左侧显示模型选择器触发器
- **THEN** 触发器显示模型图标、模型名称和下拉箭头
- **THEN** 触发器作为独立组件显示在输入框左侧
#### Scenario: 显示默认标记
- **WHEN** 当前选中的模型是默认模型（`isDefault = true`）
@@ -30,6 +30,16 @@
- **THEN** 每个分组显示分组标题和该层级的模型列表
- **THEN** 展开时有平滑的动画效果
#### Scenario: 默认向下展开
- **WHEN** 用户点击模型选择器触发器且下方空间充足（> 350px）
- **THEN** 下拉列表向下展开
- **THEN** 下拉列表显示在触发器下方
#### Scenario: 向上展开
- **WHEN** 触发器下方空间不足以显示完整下拉列表（< 350px）且上方空间充足
- **THEN** 下拉列表向上展开
- **THEN** 下拉列表显示在触发器上方
#### Scenario: 分组标题显示
- **WHEN** 下拉列表展开
- **THEN** 平台模型分组显示标题"📍 平台模型"
@@ -88,17 +98,87 @@
### Requirement: 模型选择器样式
系统 SHALL 使用融合式设计，模型选择器与输入框风格一致，圆角、边框、阴影统一。
系统 SHALL 支持标准显示和紧凑显示两种模式，在水平布局中与输入框风格协调。
#### Scenario: 融合式设计
- **WHEN** 模型选择器展开
- **THEN** 触发器和下拉列表形成一个整体
- **THEN** 触发器使用浅灰色背景，圆角顶部 16px
- **THEN** 下拉列表使用白色背景，圆角底部 12px
- **THEN** 边框颜色和阴影与输入框一致
#### Scenario: 标准显示模式
- **WHEN** 模型选择器使用标准模式（桌面端）
- **THEN** 触发器使用最小宽度 160px
- **THEN** 触发器右侧显示垂直分隔边框
- **THEN** 触发器和输入框形成水平排列
#### Scenario: 紧凑显示模式
- **WHEN** 模型选择器使用紧凑模式（平板端）
- **THEN** 触发器使用最小宽度 120px
- **THEN** 触发器显示为图标型（仅显示模型图标，隐藏模型名称）
- **THEN** 触发器右侧显示垂直分隔边框
#### Scenario: 响应式设计
- **WHEN** 用户使用移动设备访问
- **THEN** 模型选择器自适应屏幕宽度
- **THEN** 触发器使用较小的内边距和字体大小
- **THEN** 下拉列表最大高度调整为 280px
- **WHEN** 用户使用桌面设备访问（屏幕宽度 >= 768px）
- **THEN** 模型选择器使用标准显示模式
- **THEN** 触发器显示模型图标和完整模型名称
- **THEN** 触发器宽度为 160px
- **WHEN** 用户使用平板设备访问（屏幕宽度 480-768px）
- **THEN** 模型选择器使用紧凑显示模式
- **THEN** 触发器显示为图标型（隐藏模型名称）
- **THEN** 触发器宽度为 100px
- **WHEN** 用户使用移动设备访问（屏幕宽度 < 480px）
- **THEN** 模型选择器回退到垂直布局
- **THEN** 触发器位于输入框上方
- **THEN** 触发器显示模型图标和完整模型名称
- **THEN** 触发器宽度为 160px
### Requirement: 紧凑型模型选择器
系统 SHALL 支持紧凑型显示模式，通过 `variant` 属性控制。
#### Scenario: 启用紧凑模式
- **WHEN** 模型选择器组件接收 `variant="compact"` 属性
- **THEN** 触发器应用紧凑型样式
- **THEN** 触发器最小宽度为 120px
- **THEN** 触发器显示模型图标和下拉箭头，隐藏模型名称
#### Scenario: 紧凑模式下的下拉展开
- **WHEN** 用户点击紧凑型触发器
- **THEN** 系统展开下拉列表
- **THEN** 下拉列表使用固定定位（position: fixed）
- **THEN** 下拉列表根据触发器位置和可用空间自动调整展开方向
### Requirement: 水平布局输入框
系统 SHALL 支持水平布局的对话输入框，模型选择器位于输入框左侧。
#### Scenario: 桌面端水平布局
- **WHEN** 用户在桌面端访问（屏幕宽度 > 768px）
- **THEN** 输入框容器使用水平 flex 布局
- **THEN** 从左到右依次显示：模型选择器、输入区域、工具按钮组、发送按钮
- **THEN** 模型选择器和输入框之间显示垂直分隔边框
#### Scenario: 平板端水平布局
- **WHEN** 用户在平板端访问（屏幕宽度 480-768px）
- **THEN** 输入框容器使用水平 flex 布局
- **THEN** 从左到右依次显示：紧凑型模型选择器、输入区域、工具按钮组、发送按钮
- **THEN** 工具按钮组限制最多显示 4 个按钮
- **THEN** 紧凑型模型选择器和输入框之间显示垂直分隔边框
#### Scenario: 移动端垂直布局
- **WHEN** 用户在移动端访问（屏幕宽度 < 480px）
- **THEN** 输入框容器使用垂直 flex 布局
- **THEN** 从上到下依次显示：模型选择器、输入区域、工具按钮组、发送按钮
- **THEN** 模型选择器和输入框之间显示水平分隔边框
### Requirement: 工具按钮优化
系统 SHALL 在水平布局中优化工具按钮的显示方式。
#### Scenario: 工具按钮横向排列
- **WHEN** 输入框使用水平布局（桌面端/平板端）
- **THEN** 工具按钮横向排列在输入区域右侧
- **THEN** 工具按钮限制最多显示 4 个
- **THEN** 超出 4 个的按钮不显示
#### Scenario: 工具按钮纵向排列
- **WHEN** 输入框使用垂直布局（移动端）
- **THEN** 工具按钮纵向排列在输入区域下方
- **THEN** 工具按钮横向排列，限制最多显示 4 个

110
openspec/specs/responsive-chat-input/spec.md Normal file
View File

@@ -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