vscode-workbench/.trae/specs/tool-fav-button-layout/tasks.md

Tasks

• Task 1: 改造 ToolFavoriteButton 组件样式

  • 创建 ToolFavoriteButton.css，定义 .tool-fav-btn 亮色/暗色模式样式
  • 移除组件中的硬编码 inline style，改为引用 CSS 类
  • 暗色模式下颜色适配（图标、文字、边框均适配深色背景）

• Task 2: 调整 JsonFormatter 收藏按钮位置

  • 将 <ToolFavoriteButton> 从 tool-detail-actions 内移出到 tool-detail-toolbar 顶层，位于返回按钮与 tool-detail-actions 之间

• Task 3: 调整 Base64Tool 收藏按钮位置

  • 将 <ToolFavoriteButton> 从 tool-detail-actions 内移出到 tool-detail-toolbar 顶层

• Task 4: 调整 CodeFormatter 收藏按钮位置

  • 将 <ToolFavoriteButton> 从 tool-detail-actions 内移出到 tool-detail-toolbar 顶层

• Task 5: 调整 EncodingConverter 收藏按钮位置

  • 将 <ToolFavoriteButton> 从 tool-detail-actions 内移出到 tool-detail-toolbar 顶层

• Task 6: 调整 TextDiff 收藏按钮位置

  • 将 <ToolFavoriteButton> 从 tool-detail-actions 内移出到 tool-detail-toolbar 顶层

• Task 7: 调整 RegexTool 收藏按钮位置

  • 将 <ToolFavoriteButton> 从 regex-toolbar-actions 内移出到 regex-toolbar 顶层

• Task 8: 将收藏按钮移至英雄区标题旁并改用 variant="hero"

  • JsonFormatter: 移至英雄区，改用 variant="hero"，toolId={1} → urlPath="/utility/json-formatter"
  • Base64Tool: 移至英雄区，改用 variant="hero"，toolId={3} → urlPath="/utility/base64"
  • EncodingConverter: 移至英雄区，改用 variant="hero"，toolId={4} → urlPath="/utility/encoding-converter"
  • CodeFormatter: 移至英雄区，改用 variant="hero"，toolId={16} → urlPath="/utility/code-formatter"
  • RegexTool: 移至英雄区，改用 variant="hero"，toolId={5} → urlPath="/utility/regex-tool"
  • TextDiff: 移至英雄区，改用 variant="hero"，toolId={8} → urlPath="/utility/text-diff"
  • TimestampTool: 移至英雄区，改用 variant="hero"，toolId={2} → urlPath="/utility/timestamp"
  • QRCodeGenerator: 移至英雄区，改用 variant="hero"
  • ColorConverter: 移至英雄区，改用 variant="hero"
  • ImageCompressor: 移至英雄区，改用 variant="hero"

Task Dependencies

• Task 2-7 均依赖 Task 1（需先完成组件样式改造）
• Task 2-7 之间相互独立，可并行执行
• Task 8 依赖 Task 1 和 Task 2-7（需在组件样式改造和位置调整基础上改为 hero 样式）