2.1 KiB
2.1 KiB
翻译工具收藏按钮与返回按钮优化 Spec
Why
翻译工具页面的收藏按钮当前位置（右上角绝对定位）显得孤立且不符合整体视觉流；返回按钮样式过于突兀，与页面其他元素不够协调。需要优化这两个按钮的布局和样式，使其与取色器等其他实用工具保持一致的设计语言。
What Changes
- 收藏按钮：从右上角绝对定位改为与标题在同一行显示（与取色器布局一致）
- 返回按钮：优化样式使其更加融入工具栏，减少突兀感
- Hero区域结构：调整布局使收藏按钮与标题水平对齐
Impact
- Affected specs: 无
- Affected code:
src/pages/BaiduTranslate/BaiduTranslate.tsx- 调整收藏按钮位置和Hero结构src/pages/BaiduTranslate/BaiduTranslate.css- 添加标题行容器样式，优化返回按钮样式
ADDED Requirements
Requirement: 收藏按钮与标题同行显示
收藏按钮应与标题在同一行水平对齐，居中对齐，与取色器的布局模式一致。
Scenario: 收藏按钮布局正确
- WHEN 用户访问翻译工具页面
- THEN 收藏按钮显示在标题右侧，与标题在同一行垂直居中对齐
- AND 收藏按钮与标题之间有适当间距（16px）
- AND 在移动端等小屏幕上，收藏按钮可以换行到下一行
Requirement: 返回按钮样式优化
返回按钮应与工具栏其他操作按钮视觉权重一致，减少突兀感。
Scenario: 返回按钮样式协调
- WHEN 用户查看翻译工具的工具栏区域
- THEN 返回按钮的视觉样式与复制、交换等操作按钮保持协调
- AND 返回按钮有适当的悬停反馈效果
MODIFIED Requirements
Requirement: Hero区域布局
Hero区域的内容结构需要调整，使收藏按钮成为标题行的内联元素而非绝对定位元素。
Scenario: Hero内容布局正确
- WHEN 渲染翻译工具Hero区域
- THEN 图标、标题行（含收藏按钮）、描述文字垂直堆叠
- AND 整体内容居中对齐