工具收藏按钮样式与位置统一 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），文字显示"已收藏"

2.5 KiB Raw Blame History Unescape Escape