81 lines
3.6 KiB
Markdown
81 lines
3.6 KiB
Markdown
# 收藏按钮功能验证与统一 Spec
|
||
|
||
## Why
|
||
当前实用工具页面的收藏按钮存在以下问题：
|
||
1. **移动端页面缺失收藏按钮**：CalculatorMobile、Base64ToolMobile、CharsetConverterMobile、CodeFormatterMobile、ColorConverterMobile、EncodingConverterMobile、ImageCompressorMobile、JsonFormatterMobile、TextDiffMobile 共 9 个移动端页面没有收藏按钮
|
||
2. **桌面端按钮位置不统一**：部分页面在工具栏顶层（返回按钮旁），部分在英雄区标题旁
|
||
3. **ID 使用不一致**：部分页面使用硬编码 toolId，部分使用 urlPath
|
||
4. **需要验证功能完整性**：确认未登录点击弹出登录弹窗，登录后实现收藏功能
|
||
|
||
## What Changes
|
||
|
||
### 位置统一（桌面端）
|
||
- 将所有桌面端工具页面的收藏按钮统一放置在英雄区标题旁边
|
||
- 统一使用 `variant="hero"` 样式（毛玻璃效果，适配渐变背景）
|
||
- 受影响页面：JsonFormatter、Base64Tool、EncodingConverter、CodeFormatter、RegexTool、TextDiff、TimestampTool、QRCodeGenerator、ColorConverter、ImageCompressor（共 10 个）
|
||
|
||
### 移动端补全
|
||
- 为 9 个移动端页面添加收藏按钮，放置在英雄区标题旁
|
||
- 受影响页面：CalculatorMobile、Base64ToolMobile、CharsetConverterMobile、CodeFormatterMobile、ColorConverterMobile、EncodingConverterMobile、ImageCompressorMobile、JsonFormatterMobile、TextDiffMobile
|
||
|
||
### ID 统一
|
||
- 将所有硬编码 toolId 改为 urlPath 动态查找
|
||
|
||
## Impact
|
||
- Affected specs: tool-fav-button-missing, tool-fav-button-layout
|
||
- Affected code:
|
||
- `src/pages/*/` 下 19 个页面组件
|
||
- 可能需要新增移动端英雄区样式
|
||
|
||
## ADDED Requirements
|
||
|
||
### Requirement: 移动端收藏按钮
|
||
所有移动端工具详情页 SHALL 在英雄区标题旁边提供收藏按钮。
|
||
|
||
#### Scenario: 移动端页面显示收藏按钮
|
||
- **WHEN** 用户访问移动端工具详情页（如 CalculatorMobile）
|
||
- **THEN** 收藏按钮显示在英雄区标题旁边，使用 hero variant 样式
|
||
|
||
### Requirement: 收藏按钮位置统一
|
||
所有工具详情页（含桌面端和移动端）的收藏按钮 SHALL 统一放置在英雄区标题旁边。
|
||
|
||
#### Scenario: 桌面端按钮位置
|
||
- **WHEN** 用户访问桌面端工具详情页
|
||
- **THEN** 收藏按钮位于英雄区标题旁边，与标题水平对齐
|
||
|
||
#### Scenario: 移动端按钮位置
|
||
- **WHEN** 用户访问移动端工具详情页
|
||
- **THEN** 收藏按钮位于英雄区标题旁边
|
||
|
||
### Requirement: ID 使用统一
|
||
所有收藏按钮 SHALL 使用 urlPath 动态查找 toolId，不再硬编码 toolId。
|
||
|
||
#### Scenario: urlPath 查找
|
||
- **WHEN** 页面加载收藏按钮
|
||
- **THEN** 通过 urlPath 从 API 获取 toolId 并缓存
|
||
|
||
## MODIFIED Requirements
|
||
|
||
### Requirement: 收藏按钮桌面端样式
|
||
收藏按钮在英雄区 SHALL 使用 `variant="hero"` 样式，提供毛玻璃效果，适配渐变背景。
|
||
|
||
#### Scenario: hero variant 样式
|
||
- **WHEN** 收藏按钮位于英雄区
|
||
- **THEN** 背景半透明白色，带毛玻璃模糊效果，边框半透明
|
||
|
||
### Requirement: 收藏功能验证
|
||
- **WHEN** 未登录用户点击收藏按钮
|
||
- **THEN** 显示提示"请先登录"（不弹出登录弹窗，仅提示消息）
|
||
|
||
- **WHEN** 已登录用户点击收藏按钮（未收藏状态）
|
||
- **THEN** 按钮变为实心金色星标，显示"已收藏"，收藏数 +1，显示成功提示
|
||
|
||
- **WHEN** 已登录用户点击收藏按钮（已收藏状态）
|
||
- **THEN** 按钮变为空心星标，显示"收藏"，收藏数 -1，显示取消提示
|
||
|
||
## REMOVED Requirements
|
||
|
||
### Requirement: 硬编码 toolId
|
||
**Reason**: 硬编码 toolId 维护困难，容易与后端数据不一致
|
||
**Migration**: 统一使用 urlPath 动态查找
|