feat: PLANNING体系首版（00路线图/02任务总表/03执行协议/I-03/I-04/registry42口径）+M1止血交付

2026-09-12 14:25:25 +08:00
commit 8242e730b4
482 changed files with 37029 additions and 0 deletions
@@ -0,0 +1,13 @@
+# Checklist
+
+- [x] ToolFavoriteButton 组件不再使用硬编码 inline style
+- [x] 新建 `ToolFavoriteButton.css` 文件，包含亮色和暗色模式样式
+- [x] 暗色模式下收藏按钮文字和图标颜色正常，无白色/过亮元素
+- [x] 亮色模式下收藏按钮样式正常
+- [x] JsonFormatter：收藏按钮已移至 `tool-detail-toolbar` 顶层
+- [x] Base64Tool：收藏按钮已移至 `tool-detail-toolbar` 顶层
+- [x] CodeFormatter：收藏按钮已移至 `tool-detail-toolbar` 顶层
+- [x] EncodingConverter：收藏按钮已移至 `tool-detail-toolbar` 顶层
+- [x] TextDiff：收藏按钮已移至 `tool-detail-toolbar` 顶层
+- [x] RegexTool：收藏按钮已移至 `regex-toolbar` 顶层
+- [x] 剩余 10 个页面的按钮位置无需调整（已在工具栏顶层）
@@ -0,0 +1,46 @@
+# 工具收藏按钮样式与位置统一 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），文字显示"已收藏"
@@ -0,0 +1,41 @@
+# Tasks
+
+- [x] Task 1: 改造 ToolFavoriteButton 组件样式
+  - [x] 创建 `ToolFavoriteButton.css`，定义 `.tool-fav-btn` 亮色/暗色模式样式
+  - [x] 移除组件中的硬编码 inline style，改为引用 CSS 类
+  - [x] 暗色模式下颜色适配（图标、文字、边框均适配深色背景）
+
+- [x] Task 2: 调整 JsonFormatter 收藏按钮位置
+  - [x] 将 `<ToolFavoriteButton>` 从 `tool-detail-actions` 内移出到 `tool-detail-toolbar` 顶层，位于返回按钮与 `tool-detail-actions` 之间
+
+- [x] Task 3: 调整 Base64Tool 收藏按钮位置
+  - [x] 将 `<ToolFavoriteButton>` 从 `tool-detail-actions` 内移出到 `tool-detail-toolbar` 顶层
+
+- [x] Task 4: 调整 CodeFormatter 收藏按钮位置
+  - [x] 将 `<ToolFavoriteButton>` 从 `tool-detail-actions` 内移出到 `tool-detail-toolbar` 顶层
+
+- [x] Task 5: 调整 EncodingConverter 收藏按钮位置
+  - [x] 将 `<ToolFavoriteButton>` 从 `tool-detail-actions` 内移出到 `tool-detail-toolbar` 顶层
+
+- [x] Task 6: 调整 TextDiff 收藏按钮位置
+  - [x] 将 `<ToolFavoriteButton>` 从 `tool-detail-actions` 内移出到 `tool-detail-toolbar` 顶层
+
+- [x] Task 7: 调整 RegexTool 收藏按钮位置
+  - [x] 将 `<ToolFavoriteButton>` 从 `regex-toolbar-actions` 内移出到 `regex-toolbar` 顶层
+
+- [x] Task 8: 将收藏按钮移至英雄区标题旁并改用 variant="hero"
+  - [x] JsonFormatter: 移至英雄区，改用 variant="hero"，toolId={1} → urlPath="/utility/json-formatter"
+  - [x] Base64Tool: 移至英雄区，改用 variant="hero"，toolId={3} → urlPath="/utility/base64"
+  - [x] EncodingConverter: 移至英雄区，改用 variant="hero"，toolId={4} → urlPath="/utility/encoding-converter"
+  - [x] CodeFormatter: 移至英雄区，改用 variant="hero"，toolId={16} → urlPath="/utility/code-formatter"
+  - [x] RegexTool: 移至英雄区，改用 variant="hero"，toolId={5} → urlPath="/utility/regex-tool"
+  - [x] TextDiff: 移至英雄区，改用 variant="hero"，toolId={8} → urlPath="/utility/text-diff"
+  - [x] TimestampTool: 移至英雄区，改用 variant="hero"，toolId={2} → urlPath="/utility/timestamp"
+  - [x] QRCodeGenerator: 移至英雄区，改用 variant="hero"
+  - [x] ColorConverter: 移至英雄区，改用 variant="hero"
+  - [x] ImageCompressor: 移至英雄区，改用 variant="hero"
+
+# Task Dependencies
+- Task 2-7 均依赖 Task 1（需先完成组件样式改造）
+- Task 2-7 之间相互独立，可并行执行
+- Task 8 依赖 Task 1 和 Task 2-7（需在组件样式改造和位置调整基础上改为 hero 样式）