# 收藏按钮功能验证与统一 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 动态查找