vscode-workbench/.trae/specs/tool-fav-button-verify/spec.md

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