OmniRoute — Design System & Visual Identity (中文 (繁體))

1. 目的

行銷網站（viral.omniroute.online、why.omniroute.online、omniroute.online）與產品儀表板應呈現為同一個產品。網站已從儀表板沿用其色彩配置——其 css/tokens.css 甚至寫著 「色盤對應 OmniRoute 儀表板（src/app/globals.css）」。因此，兩者在色彩層面已約有 80% 一致。儀表板目前缺少的是：

網站在每個頁面使用的方格紙網格桌布。
網站已有、但儀表板缺少的少數共用設計權杖（圓角尺度、品牌漸層、surface-2、等寬字型）。
元件層級的一致性——若干儀表板元件以硬編碼的 hex/rgba 繞過主題權杖。

本文件包含相關分析與計畫。

2. 原則

單一真實來源 = src/app/globals.css。 網站以儀表板為準，絕不反向進行。新的權杖會先加入 globals.css。
使用權杖，絕不使用常值。 元件使用語意化權杖（bg-surface、text-primary、border-border），絕不直接使用原始 #hex。
細緻，不喧賓奪主。 網格是位於內容後方的淡雅桌布——絕不能降低文字對比度或干擾 UI。
支援主題。 所有內容皆須在 .dark（產品的標誌性外觀）與淺色主題中正常運作。
精準分階段推出。 先發布網格與權杖（低風險、高能見度），再分批清理元件。

3. 目前狀態——哪些部分已一致，哪些尚未一致

3.1 色彩——已統一 ✅

所有品牌色彩與表面色彩在數值上都已與網站一致（只有名稱不同——儀表板使用 --color- 前綴）。已在 src/app/globals.css:30-128 中驗證：

概念	網站權杖（`tokens.css`）	儀表板權杖（`globals.css`）	是否相符
primary	`--primary #e54d5e`	`--color-primary #e54d5e`	✅
primary-hover	`--primary-hover #c93d4e`	`--color-primary-hover #c93d4e`	✅
accent	`--accent #6366f1`	`--color-accent #6366f1`	✅
accent-2	`--accent-2 #8b5cf6`	`--color-accent-hover #8b5cf6`	✅（已重新命名）
accent-3	`--accent-3 #a855f7`	`--color-accent-light #a855f7`	✅（已重新命名）
success / warning / error	`#22c55e / #f59e0b / #ef4444`	完全相同	✅
號誌燈	`#ff5f56 / #ffbd2e / #27c93f`	完全相同	✅
深色背景 / 表面 / 邊框	`#0b0e14 / #161b22 / rgba(255,255,255,.08)`	完全相同	✅
淺色背景 / 表面 / 文字	`#f9f9fb / #fff / #1a1a2e`	完全相同	✅

結論： 無需進行色彩遷移。視覺識別早已共用；我們是在_完成_它，而不是重新打造它。

3.2 差距——儀表板目前缺少的項目

差距	網站現有項目	儀表板	行動
網格桌布	`body::before` 方格紙、`--grid-line`、`--grid-size 32px`、`--section-alt`	✅ 已新增（階段 1）	Part A
圓角比例	`--radius 14px`、`--radius-sm 9px`	已新增 `--radius 14px`；`-sm` + 元件重新指向仍待處理	Part B / 階段 2
品牌漸層	`--grad-brand 135deg primary→accent-3`	✅ 已新增權杖（階段 1）；於階段 2 中使用	Part B
巢狀表面	`--surface-2 #1c2230`	✅ 已新增（階段 1）	Part B
等寬字型	`--font-mono`（ui-monospace 字型堆疊）	待處理（階段 4，連同使用端一併處理）	Part B
`text-muted`（深色模式）	`#8b8b9e`	`#a1a1aa`（zinc-400）	協調一致 — Part B

3.3 主題機制（確保我們不會破壞任何功能）

Tailwind v4，CSS 優先（無 tailwind.config.*）。權杖定義於 :root/.dark，並透過 @theme inline 暴露給工具類別（globals.css:130-179）。
透過 <html> 上的 .dark 類別啟用深色模式（globals.css:22 的 @custom-variant dark），由自訂 Zustand store（src/store/themeStore.ts）切換，預設主題 = system（src/shared/constants/appConfig.ts:11）。網站則使用 html[data-theme="light"] — 兩者機制不同且不會相遇（來源分離），因此不會發生衝突。我們會保留儀表板的 .dark 機制。
執行階段主要色彩覆寫已存在（themeStore.ts:85-97，預設組合位於 COLOR_THEMES）— 使用者可以替換 --color-primary。任何參照 --color-primary 的新權杖（漸層等）都會自動繼承這些覆寫。✅
Tailwind v4 保留的圓角名稱：--radius-sm/md/lg/... 是 rounded-* 工具類別的底層依據。重新定義它們會回溯性地改變所有現有的 rounded-*（例如，rounded-sm 使用於 12 個檔案中）。因此，小圓角值與元件重新指向會刻意延後至階段 2，屆時會連同使用端一起變更。

4. A 部分 — 方格紙網格背景（主要需求）— 已實作（階段 1）

4.1 內容說明

網站中的確切作法（_mono_repo/omnirouteSite/css/base.css）：使用一個固定、覆蓋整個視窗的偽元素繪製兩個 1px 線條漸層，並以 z-index:-1 放置於所有內容後方。

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

**即使 body 具有不透明的 background-color，此作法仍然有效的原因：**使用 z-index:-1 的 ::before 會繪製在元素本身的背景_上方_，但位於其正常流內容的_下方_。因此，--color-bg 是基礎填色，網格疊加於其上，而應用程式則渲染於網格上方。

4.2 程式碼庫中已有的先例

src/app/landing/page.tsx:16-26 已經在每個頁面的層級實作相同網格，但使用的是紅色線條（#E54D5E，不透明度 0.06），間距為 50px，並搭配動畫光球。因此，此模式已在產品中獲得驗證；這項工作會將其提升為全域、可感知主題的桌布。

4.3 新增的權杖（位於 `globals.css`）

:root {
  /* 淺色 — 將網格不透明度從網站的 0.045 調高，讓桌布在密集的儀表板上
     確實可見（卡片／介面框架覆蓋了視窗的大部分區域） */
  --grid-line: rgba(0, 0, 0, 0.07);
  --grid-size: 32px;
  --section-alt: rgba(0, 0, 0, 0.022);
}
.dark {
  /* 深色 — 基於相同原因，從 0.035 調高 */
  --grid-line: rgba(255, 255, 255, 0.06);
  --section-alt: rgba(255, 255, 255, 0.018);
}

4.4 唯一的阻礙 — 已移除

此網格在設計上就是全域的（會一次涵蓋面板、auth/login、錯誤頁面以及所有路由）。面板內部恰好有一個元素將其遮住：

src/shared/components/layouts/DashboardLayout.tsx — 最外層包裝器繪製了不透明的 bg-bg。其下方的所有元素都已經是透明的（<main>、捲動容器、max-w-7xl 內層），因此移除 bg-bg 即可讓 body 網格透過內容區域顯示（body 的 --color-bg 仍然作為基礎填色）。
```
<div className="flex h-dvh min-h-0 w-full overflow-hidden bg-bg">
<div className="flex h-dvh min-h-0 w-full overflow-hidden">
```

4.5 介面框架互動（側邊欄／頁首）

Header（Header.tsx:207，bg-bg）與 Sidebar（Sidebar.tsx:430，bg-sidebar）維持不透明 → 網格僅顯示於內容區域，由純色介面框架包圍。這是沉穩的預設呈現方式，也符合網站區隔介面框架與畫布的方式（決策 D3 = 純色）。

4.6 登入／驗證／錯誤頁面

這些頁面直接渲染於 <body> 之下（沒有面板介面框架），因此全域網格應會自動顯示在其後方。**階段 5 — 已完成：**獨立的全螢幕包裝器實際上是不透明的（min-h-screen … bg-bg，其中 bg-bg 與 <body> 使用相同的純色填色），因此網格會在所有非儀表板畫面上被遮住，而不只是登入頁面。現在這些包裝器全都已改為透明，讓共用桌布可以透出：login、forgot-password、callback、maintenance、offline、status、terms、privacy、onboarding，以及 ErrorPageScaffold（涵蓋 400/401）。這完成了 D4（從僅限登入頁面擴展至所有獨立畫面）。由 tests/unit/design-grid-background.test.ts 提供防護。

4.7 登陸頁面

landing/page.tsx 保留其更豐富的動畫背景（光球 + 暈影）— 這是其專屬的行銷視覺首頁（決策 D5 = 維持原樣）。

5. B 部分 — Token 統一

第 1 階段新增惰性且無衝突的識別 Token（--surface-2/--color-surface-2、--grad-brand、--radius）。第 2 階段將圓角尺度接入 Tailwind 並重新指向元件；第 4 階段新增 --font-mono 及其使用端。

Token	原因	階段
`--radius` / `--radius-sm`	採用單一圓角尺度（14/9），取代臨時拼湊的 6/8/12	1（值）/ 2（接入 + 重新指向）
`--grad-brand`	用於主要 CTA 的品牌漸層（紅→紫羅蘭），與網站風格一致	1（Token）/ 2（Button）
`--surface-2`	巢狀面板／表格標題列／內嵌資料列	1
`--font-mono`	程式碼區塊、終端機、ID、端點	4
`--text-muted` 協調	在網站↔面板之間選定單一值（建議使用 `#a1a1aa`）	2

D2（text-muted）：網站為 #8b8b9e，儀表板為 #a1a1aa。建議保留儀表板的 #a1a1aa，並更新_網站_以保持一致。此為視覺層面的調整。

6. C 部分 — 元件標準化（第 2–4 階段）

自訂元件（未使用 shadcn/Radix）、Tailwind v4，且大致上已採用語意化 Token（195 個檔案匯入共用 barrel）。目前的工作是移除繞過 Token 的用法。所在位置：src/shared/components/。

#	項目	檔案	問題 → 目標	階段
C1	圓角對齊	`Button.tsx:14-18`、`Card.tsx:39`、`Modal.tsx`、`Input.tsx`、`Select.tsx`	混用 6/8/12px → `--radius`/`--radius-sm`（14/9）	2
C2	Button 漸層 + `accent` 變體	`Button.tsx:5-12`	primary 為單調的紅→紅；改為與 `--grad-brand` 對齊；新增缺少的 `accent` 變體。約 195 個匯入端——可見度最高	2
C3	表格	`DataTable.tsx:122-176`、`logTableStyles.ts`、`globals.css:405-414`	100% 使用行內硬編碼 rgba + 不存在的變數；遷移至 Token，淘汰分歧的樣式	3
C4	集中管理狀態顏色	`flow/edgeStyles.ts`、`TokenHealthBadge.tsx`、`DegradationBadge.tsx`、`ProviderCascadeNode.tsx`、`Badge.tsx` + 5 個輔助程式	同一組十六進位色碼重複出現 6 次以上 → 建立一個基於 `--color-success/warning/error` 的模組	3
C5	Card 邊框	`Card.tsx:39`	`border-white/5` → 品牌色 `/8`	2
C6	協調焦點環 ✅ 已完成	`globals.css` 的 `--focus-ring`（accent）與表單控制項的 `ring-primary/30`	統一使用 accent（紫羅蘭），以符合全域焦點環，並與紅色錯誤環明確區分；錯誤狀態維持紅色	4
C7	新增 `Checkbox` + `Textarea`	原始 `<input>`/`<textarea>` 搭配行內 `accentColor:#6366f1`	改為 Token 驅動的基礎元件	4
C8	清查硬編碼十六進位色碼	`ConsoleLogViewer.tsx:240`、`ComboLiveStudio.tsx:306`、Modal 圓點、約 14 個圖表檔案	常值 → Token	4
C9	`cn()` → clsx + tailwind-merge	`src/shared/utils/cn.ts`	衝突的 class 會堆疊；C1 覆寫需要此調整	2

已符合品牌樣式（由 Token 驅動，僅需調整圓角）：Badge、Toggle、SegmentedControl、Input、Select。

7. 推出計畫

階段 1 — 網格 + 識別權杖（此 PR）。 globals.css 網格 + --surface-2/--grad-brand/--radius 權杖；body::before 桌布；移除造成阻擋的 bg-bg；靜態防護測試。風險低，可透過單一提交還原。
階段 2 — 基礎元件（C1、C2、C5）— 已在此 PR 中完成。 透過 @theme 新增語意化圓角工具 rounded-card（14px）/ rounded-control（9px）（使用自訂名稱，因此預設的 rounded-sm/md/lg/xl 不受影響，不會波及 400 個檔案）；Card/Modal → 14px，Button/Input/Select → 9px；Button primary → --grad-brand（紅→紫）+ 新增 accent 變體；Card 邊框 → border-border 權杖（0.08）。延後處理： cn()→tailwind-merge（C9）需要新增相依套件；臨時使用的 rounded-lg 全面清理（326 個檔案）維持原狀，因為基礎元件已涵蓋大部分介面。
階段 3 — 狀態色彩 + 表格（C3、C4）— 已在此 PR 中完成。 ✅ C4（src/shared/constants/statusColors.ts — 以 STATUS_HEX 作為單一來源；flow/edgeStyles.ts + TokenHealthBadge 已改為使用該來源，忠實保留相同的十六進位色碼）。✅ --font-mono 權杖。✅ C3（DataTable） — 將所有行內 rgba，以及無效的 var(--bg-table-header) / var(--text-secondary) 備援值，替換為一組 --table-* 權杖（--table-header-bg/-row-zebra/-row-hover/-cell-border/-row-selected），其深色模式值與舊有硬編碼 rgba 完全相同（深色模式逐位元組一致），而淺色模式值則修正了先前始終呈現深色的淺色主題。表頭邊框 → --color-border，次要文字 → --color-text-muted。合併前需要進行視覺檢查。（未調整：logTableStyles.ts 與舊版 Ant .ant-table 規則；這些項目獨立處理且優先級較低。）
階段 4 — 清理（C6、C7、C9 已完成；C8 待處理）。 ✅ C9 cn() → twMerge(clsx(...))（新增 clsx + tailwind-merge 作為相依套件）— 呼叫端的 className 現在會正確地_取代_基礎元件中有衝突的 class，而不是疊加。✅ C7 新增 Checkbox + Textarea 基礎元件（由權杖驅動，並從 barrel 匯出；屬於新增功能，32 個原生 checkbox / 41 個原生 textarea 可於後續逐步採用）。✅ C6 統一 focus ring — 表單控制項（Input/Select/Textarea/Toggle/Checkbox）現在聚焦時會使用 **accent（紫色）**外框，以符合全域 --focus-ring，並避免與紅色錯誤外框衝突；紅色錯誤狀態維持不變。⏳ C8 十六進位色碼清理並非盲目尋找/取代 — 已確認下列項目是_刻意設計_且必須保留：ConsoleLogViewer.tsx:240（永遠使用深色模式的終端機）、TokenHealthBadge 彈出視窗、ReactFlow SVG 筆畫。僅遷移確實應配合主題變化的十六進位色碼。

每個階段：npm run lint + npm run typecheck:core + 視覺檢查。

8. 待決事項（建議）

D1 — Button primary：維持紅→紅，或切換為紅→紫的 --grad-brand？建議：紅→紫（階段 2）。
**D2 — 網格線色彩：**中性色（網站風格）— 已選定 — 或品牌紅。大小為 32px（根據負責人的回饋，從原本的 46px 縮小約 30% — 在儀表板版面中，46px 的網格看起來太大）。
D3 — Chrome 鮮明度：側邊欄/頁首使用純色 — 已選定。
D4 — Auth/login 網格：✅ 已完成（階段 5） — 已從每個獨立的全螢幕包裝器中移除不透明的 bg-bg（不僅限於 login），因此網格現在會顯示於所有畫面。請參閱 §4.6。
**D5 — 登陸頁面：**維持動畫啟動畫面原樣。已選定。
**D6 — 全產品採用 14/9 圓角：**建議：是（階段 2）。
**D7 — 階段 1 優先發布：**已選定。
**D8 — 版面寬度（階段 5）：**儀表板內容外殼原本限制為 max-w-7xl（1280px），在大型顯示器上會置中並於兩側留下大片空白。✅ 已完成 — 提升為流動式 max-w-[3840px]（真正的 4K）：內容現在會跟隨視窗寬度延伸至約 4K，只有超過該寬度後才會置中（DashboardLayout.tsx）。刻意設計為窄版的頁面仍依設計維持窄版（ProviderOnboardingWizard max-w-5xl、Rtk/CavemanContextPageClient max-w-6xl）。
D9 — 不透明資料表格（階段 6）：儀表板內容區域現在為透明（讓網格桌布能透出，階段 5），因此容器_並非_不透明表面的資料表格，會讓網格從透明的偶數列/低 alpha 斑馬紋列中透出。✅ 已完成 — 所有不含 Card 的表格現在都會繪製 bg-surface（或對 <DataTable> 基礎元件而言，在其捲動容器上使用 background: var(--color-surface)）。已修正：DataTable（基礎元件）、ProxyLogger/RequestLoggerV2（其 <Card> 的 bg-black/5 dark:bg-black/20 色調透過 tailwind-merge 優先於 Card 的 bg-surface → 約 95% 透明）、BatchListTab/FilesListTab/CacheEntriesTab/ReasoningCacheTab/cache page/FreePoolTab/ModelMappingTable/HeaderTable，以及 cache 檢視中的兩個 CSS-grid「表格」（bg-surface/35 → bg-surface）。已確認位於 <Card>/Modal 內的表格皆為不透明，並刻意維持不變（在該處使用 bg-surface 只是多餘且無實際效果）。網格本身不需要任何變更 — 儀表板的 body::before 與網站逐位元組一致（--grid-size: 32px）；執行中實例上看到的任何「較大網格」，都是 #4143 之前的過時建置版本，而非程式碼所致。由 tests/unit/design-grid-background.test.ts 提供防護（階段 6 區塊）。

9. 範圍外項目／風險

不變更調色盤 — 顏色已相符；我們只新增缺少的 token。產品不會有任何重新著色的風險。
不變更主題引擎 — 保留 .dark + Zustand store。
圓角調整（階段 2）影響範圍廣泛 — 會影響每個卡片／按鈕／輸入欄位；合併前請目視檢查資訊密集的畫面（表格、彈出式視窗）。
**表格（C3）**包含最多的硬編碼樣式，且迴歸風險範圍最高 — 請將其隔離至獨立的 PR。

10. 參考索引

區域	路徑
儀表板 token	`src/app/globals.css`（`:root`、`.dark`、`@theme inline`、`body`、`body::before`）
主題 store	`src/store/themeStore.ts`、`src/shared/components/ThemeProvider.tsx`、`src/shared/constants/appConfig.ts:9-11`
面板外框（在此解除網格阻礙）	`src/shared/components/layouts/DashboardLayout.tsx`
介面框架	`src/shared/components/Header.tsx:207`、`src/shared/components/Sidebar.tsx:430`
網格先例	`src/app/landing/page.tsx:16-26`
基礎元件	`src/shared/components/{Button,Card,Input,Select,Badge,Modal,Toggle,SegmentedControl,Loading,Tooltip,DataTable}.tsx`
狀態顏色來源	`flow/edgeStyles.ts`、`TokenHealthBadge.tsx`、`DegradationBadge.tsx`、`logTableStyles.ts`
`cn` 工具	`src/shared/utils/cn.ts`
階段 1 防護測試	`tests/unit/design-grid-background.test.ts`
網站參考	`_mono_repo/omnirouteSite/css/tokens.css`、`css/base.css`

OmniRoute 原始碼 (a58000c7685f)

HagiCode

HagiCode 是智慧代理程式開發工作台，結合結構化工作流程、多代理程式執行與 Hero Dungeon 介面，將想法化為交付成果。

以更聰明、更快速且更有趣的智慧代理程式工作流程，打造實用的軟體。

Smart結構化流程將意圖轉化為從構想到交付的可執行步驟。
Efficient多代理程式工作流程讓研究、實作與審查並行進行。
FunHero Dungeon 讓長時間的程式協作更直覺、更有參與感。

造訪 HagiCode

選擇語言

選擇語言

OmniRoute — Design System & Visual Identity (中文 (繁體))

1. 目的

2. 原則

3. 目前狀態——哪些部分已一致，哪些尚未一致

3.1 色彩——已統一 ✅

3.2 差距——儀表板目前缺少的項目

3.3 主題機制（確保我們不會破壞任何功能）

4. A 部分 — 方格紙網格背景（主要需求）— 已實作（階段 1）

4.1 內容說明

4.2 程式碼庫中已有的先例

4.3 新增的權杖（位於 `globals.css`）

4.4 唯一的阻礙 — 已移除

4.5 介面框架互動（側邊欄／頁首）

4.6 登入／驗證／錯誤頁面

4.7 登陸頁面

5. B 部分 — Token 統一

6. C 部分 — 元件標準化（第 2–4 階段）

7. 推出計畫

8. 待決事項（建議）

9. 範圍外項目／風險

10. 參考索引

HagiCode

OmniRoute — Design System & Visual Identity (中文 (繁體))

1. 目的

2. 原則

3. 目前狀態——哪些部分已一致，哪些尚未一致

3.1 色彩——已統一 ✅

3.2 差距——儀表板目前缺少的項目

3.3 主題機制（確保我們不會破壞任何功能）

4. A 部分 — 方格紙網格背景（主要需求）— 已實作（階段 1）

4.1 內容說明

4.2 程式碼庫中已有的先例

4.3 新增的權杖（位於 globals.css）

4.4 唯一的阻礙 — 已移除

4.5 介面框架互動（側邊欄／頁首）

4.6 登入／驗證／錯誤頁面

4.7 登陸頁面

5. B 部分 — Token 統一

6. C 部分 — 元件標準化（第 2–4 階段）

7. 推出計畫

8. 待決事項（建議）

9. 範圍外項目／風險

10. 參考索引

HagiCode

4.3 新增的權杖（位於 `globals.css`）