47 lines
2.5 KiB
Markdown
47 lines
2.5 KiB
Markdown
# 工具收藏按钮样式与位置统一 Spec
|
||
|
||
## Why
|
||
当前 16 个工具详情页的收藏按钮放置位置不统一（有的嵌套在 action 组内、有的直接在工具栏、有的在 `regex-toolbar-actions` 内），且 `ToolFavoriteButton` 组件使用硬编码 inline style（`background: rgba(255,255,255,0.6)`、`color: #64748b`），在暗色模式下视觉效果很差，与页面工具栏风格格格不入。
|
||
|
||
## What Changes
|
||
|
||
### 位置统一
|
||
- 将收藏按钮统一放置在工具栏顶层，位于返回按钮之后、其他操作按钮之前（即工具栏的直接子元素，不再嵌套在 `*-actions` 组内）
|
||
- 受影响的需要调整的页面：JsonFormatter、Base64Tool、CodeFormatter、EncodingConverter、TextDiff、RegexTool（共 6 个页面需要将按钮从 actions 组中移出）
|
||
|
||
### 样式改造
|
||
- 将 `ToolFavoriteButton` 的硬编码 inline style 替换为 CSS 类，支持亮色/暗色双模式
|
||
- 亮色模式：透明背景、浅灰边框，悬停时轻微高亮
|
||
- 暗色模式：适配深色背景，文字和图标使用柔和色调
|
||
- 收藏状态的金色星标保持不变
|
||
|
||
## Impact
|
||
- Affected specs: tool-fav-button-missing
|
||
- Affected code:
|
||
- `src/components/ToolFavoriteButton/ToolFavoriteButton.tsx`（样式改造）
|
||
- `src/components/ToolFavoriteButton/ToolFavoriteButton.css`（新建 CSS 文件）
|
||
- 6 个页面调整按钮位置：JsonFormatter, Base64Tool, CodeFormatter, EncodingConverter, TextDiff, RegexTool
|
||
|
||
## MODIFIED Requirements
|
||
### Requirement: 收藏按钮位置
|
||
所有工具详情页的收藏按钮 SHALL 放置在页面顶部工具栏中，作为工具栏直接子元素，位于返回按钮之后、其他操作按钮之前。
|
||
|
||
#### Scenario: 统一位置
|
||
- **WHEN** 用户打开任意工具详情页
|
||
- **THEN** 收藏按钮位于工具栏顶层，返回按钮右侧，操作按钮左侧
|
||
|
||
### Requirement: 收藏按钮样式
|
||
收藏按钮 SHALL 通过 CSS 类而非 inline style 控制外观，并支持亮色/暗色双模式。
|
||
|
||
#### Scenario: 亮色模式
|
||
- **WHEN** 用户在亮色模式下查看收藏按钮
|
||
- **THEN** 按钮背景透明，边框为浅灰色，未收藏时图标为灰色（#94a3b8），文字为暗色
|
||
|
||
#### Scenario: 暗色模式
|
||
- **WHEN** 用户在暗色模式下查看收藏按钮
|
||
- **THEN** 按钮背景透明适配深色背景，未收藏时图标为柔和色调（#8b5cf6），文字为浅色
|
||
|
||
#### Scenario: 收藏状态
|
||
- **WHEN** 工具已被收藏
|
||
- **THEN** 星标图标为金色（#f5c518），文字显示"已收藏"
|