sync from local backup
This commit is contained in:
chunyu
@@ -0,0 +1,29 @@
|
||||
# 翻译工具收藏按钮与返回按钮优化 Checklist
|
||||
|
||||
## 功能验证
|
||||
|
||||
- [x] 收藏按钮与标题在同一行显示
|
||||
- [x] 收藏按钮在标题右侧，垂直居中对齐
|
||||
- [x] 收藏按钮与标题间距为16px
|
||||
- [x] 收藏按钮在移动端可以换行到下一行（不重叠）
|
||||
- [x] 返回按钮样式与工具栏其他按钮协调
|
||||
- [x] 返回按钮有悬停效果
|
||||
|
||||
## 视觉验证
|
||||
|
||||
- [x] Hero区域整体居中对齐
|
||||
- [x] 标题行容器使用flex布局
|
||||
- [x] 深色模式下收藏按钮样式正确
|
||||
- [x] 深色模式下返回按钮样式正确
|
||||
- [x] 原有的绝对定位收藏按钮样式已移除
|
||||
|
||||
## 响应式验证
|
||||
|
||||
- [x] 桌面端（>768px）显示正常
|
||||
- [x] 移动端（<=768px）显示正常
|
||||
- [x] 收藏按钮在小屏幕上换行显示
|
||||
|
||||
## 一致性验证
|
||||
|
||||
- [x] 翻译工具的收藏按钮布局与取色器一致
|
||||
- [x] 返回按钮样式与工具栏其他操作按钮风格一致
|
||||
@@ -0,0 +1,42 @@
|
||||
# 翻译工具收藏按钮与返回按钮优化 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** 整体内容居中对齐
|
||||
@@ -0,0 +1,25 @@
|
||||
# 翻译工具收藏按钮与返回按钮优化 Tasks
|
||||
|
||||
- [x] 任务1：调整翻译工具Hero区域结构
|
||||
- [x] 任务1.1：将ToolFavoriteButton从Hero区域内部独立定位移到标题行内
|
||||
- [x] 任务1.2：创建标题行容器，包含标题和收藏按钮，使用flex布局水平对齐
|
||||
- [x] 任务1.3：添加响应式支持，小屏幕时允许换行
|
||||
|
||||
- [x] 任务2：优化返回按钮样式
|
||||
- [x] 任务2.1：调整返回按钮的视觉样式，与工具栏其他按钮保持协调
|
||||
- [x] 任务2.2：添加合适的悬停效果和过渡动画
|
||||
|
||||
- [x] 任务3：更新CSS样式
|
||||
- [x] 任务3.1：添加标题行容器样式（`.translator-hero-title-row`或类似）
|
||||
- [x] 任务3.2：移除原有的绝对定位收藏按钮样式（`.hero-favorite-btn`）
|
||||
- [x] 任务3.3：优化返回按钮相关样式
|
||||
|
||||
- [x] 任务4：验证和测试
|
||||
- [x] 任务4.1：检查桌面端显示效果
|
||||
- [x] 任务4.2：检查移动端响应式效果
|
||||
- [x] 任务4.3：检查深色模式下的显示效果
|
||||
|
||||
# Task Dependencies
|
||||
- 任务2 依赖于 任务1（Hero结构调整后，工具栏区域更清晰）
|
||||
- 任务3 依赖于 任务1和任务2（CSS更新需要配合结构调整）
|
||||
- 任务4 依赖于 任务1、2、3（最后验证）
|
||||
Reference in New Issue
Block a user