fix(web/default): api-info color dot shows wrong color due to semantic token mismatch

[Micah-Zheng]

问题描述

系统管理 → 内容 → API 地址页面，设置徽章颜色后，概览页面 API 信息卡片里显示的颜色与设置的颜色不一致（例如设置 Blue 显示红色，设置 Purple 显示黄色）。

根本原因

colorToBgClass（lib/colors.ts）将颜色名映射到语义 token（bg-chart-1、bg-warning 等），而这些 token 的实际颜色与颜色名称不对应：

// 修复前：语义 token 与颜色名不对应
blue: 'bg-chart-1',   // chart-1 实际是红色
purple: 'bg-chart-4', // chart-4 实际是黄色
orange: 'bg-warning', // warning 是橙色，但 amber/yellow 也映射到同一个 token

同时，设置页面的颜色预览用的是 Tailwind 硬编码类（bg-blue-500），而概览卡片用的是 getBgColorClass（语义 token），两套系统不一致，导致设置页面预览正确但概览卡片显示错误。

修复方案

1. colorToBgClass 改用直接的 Tailwind 颜色类（bg-blue-500、bg-green-500 等），确保颜色名与显示颜色一致
2. 设置页面颜色预览统一改用 getBgColorClass，与概览卡片保持一致
3. 新增 slate 到 SemanticColor 类型和 colorToBgClass 映射（前端颜色选项已有 slate 但类型定义缺失）

影响范围

colorToBgClass 目前仅被 api-info-item.tsx 和 api-info-section.tsx 使用，影响范围仅限 API 地址功能。

Signed-off-by: Micah-Zheng [email protected]

Summary by CodeRabbit

• New Features

  • Added support for a new slate color option across the application's color system.

• Refactor

  • Improved color styling consistency by centralizing color class mappings. API information section now uses unified color handling for a more cohesive visual experience.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 120cf200-c485-4c12-9998-a6136347a79f

📥 Commits

Reviewing files that changed from the base of the PR and between aa56667 and e3f62fb.

📒 Files selected for processing (2)

• web/default/src/features/system-settings/content/api-info-section.tsx
• web/default/src/lib/colors.ts

---

Walkthrough

This PR consolidates semantic color background class mappings to explicit Tailwind utilities and refactors the API info section component to derive badge colors from the centralized getBgColorClass helper instead of inline option values. A new slate color is added to the system.

Changes

Color System Centralization

Layer / File(s)	Summary
Semantic color type and mapping updates web/default/src/lib/colors.ts	SemanticColor union adds 'slate'; colorToBgClass mapping replaces non-uniform aliases with explicit Tailwind bg-* classes per color; avatarColorMap extended with slate entry.
API info section color class consolidation web/default/src/features/system-settings/content/api-info-section.tsx	Import of getBgColorClass added; colorOptions refactored to remove bgClass field; local getColorClass delegates to centralized helper; color dot rendering updated to call getBgColorClass(option.value) in both mapped labels and select items.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

A palette refined, with colors so bright,
From scattered defaults to Tailwind's light,
Slate joins the spectrum, a muted tone,
One helper to rule them—no more alone! 🎨✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the primary issue (API info color dot showing wrong color) and the root cause (semantic token mismatch), accurately summarizing the main fix implemented in the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}