OmniRoute 设计系统落地全解Graph-Paper 网格壁纸、语义化 Token 与组件标准化实践【免费下载链接】OmniRouteNever stop coding. Free MIT AI gateway: one endpoint, 352 providers (150 free), 1200 models Kimi, Claude, GPT, Gemini, GLM, DeepSeek, MiniMax. Works with Claude Code, Codex, Cursor, OpenCode, Cline Copilot. Quota-aware auto-fallback, RTKCaveman compression saves 15-95% tokens, MCP/A2A, Desktop/PWA. Built by 550 contributors项目地址: https://gitcode.com/GitHub_Trending/om/OmniRoute本文导读OmniRoute 的控制台仪表盘src/与官方营销站点共享同一套视觉身份——同一张 32px 图网格背景、同一套颜色令牌、同一批标准化组件。本文以仓库中的权威设计文档 DESIGN_SYSTEM.md 为主干逐一拆解网格壁纸如何穿透仪表盘渲染设计令牌如何从:root进入 Tailwind 工具类组件如何从硬编码 hex 收敛到语义令牌三件事的实现细节与分阶段演进路径。读完你可以掌握OmniRoute 视觉系统每一层CSS 令牌 →theme inline→ 工具类 → 组件是如何打通的为什么 DashboardLayout 外层不能有bg-bg以及一次看起来是配色小改动背后隐藏的回归风险与守卫测试策略。1. 背景一个产品、两个入口、同一张脸OmniRoute 由两部分组成产品仪表盘本仓库src/网关路由、提供商管理、健康监控、会话控制等全部管理能力所在的 Next.js 应用营销站点设计文档中以_mono_repo/omnirouteSite/命名的独立站点viral/why/ 主站等品牌落地页。两者应当看起来像同一个产品。营销站点早已从仪表盘借色——它的css/tokens.css甚至直接写着Palette mirrors the OmniRoute dashboard (src/app/globals.css)因此在颜色层面两者已经对齐了约 80%。真正的缺口在仪表盘侧文档将其归纳为三件事营销站点每个页面都有的Graph-Paper 图纸网格背景dashboard 缺失站点有而仪表盘没有的共享设计令牌radius 刻度、品牌渐变、surface-2、等宽字体组件级一致性——一批仪表盘组件绕过主题令牌直接写死了 hex / rgba。该文档同时声明状态这套标准化已经实现落地Phase 1–6本文即是对其规范形态、决策理由与实现细节的完整展开。2. 设计原则先把该信谁说清楚整个系统的约束写在 DESIGN_SYSTEM.md 的 Principles 一节共五条后续所有代码与决策都可以回溯到它们单一事实来源 src/app/globals.css。站点镜像仪表盘而不是反过来的新令牌必须先落进globals.css。只用令牌不写字面量。组件消费bg-surface、text-primary、border-border这类语义令牌绝不消费裸#hex。克制而非喧宾夺主。网格只是内容背后的淡色壁纸绝不能降低文本对比度或与 UI 抢戏。主题感知。所有东西在.dark产品标志性外观与浅色下都可用。外科手术式推进。先交付低风险、高可见度的网格与令牌再分波次清理组件。3. 现状盘点哪些已对齐、哪些有缺口3.1 颜色已经统一 ✅在 globals.css 的:root中所有品牌色与表面色按值与站点一致仅命名不同——仪表盘以--color-为前缀。逐项核对如下概念站点 Token仪表盘 Token结果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相同✅traffic lights#ff5f56 / #ffbd2e / #27c93f相同✅暗色 bg / surface / border#0b0e14 / #161b22 / rgba(255,255,255,.08)相同✅亮色 bg / surface / text#f9f9fb / #fff / #1a1a2e相同✅结论不存在颜色迁移工作。身份已经共享接下来是补齐不是重建。3.2 缺口仪表盘缺什么缺口站点有仪表盘行动网格壁纸body::before图纸网格、--grid-line、--grid-size 32px、--section-alt✅ Phase 1 已补Part ARadius 刻度--radius 14px、--radius-sm 9px--radius已加-sm及组件换用待办Part B / Phase 2品牌渐变--grad-brand 135deg primary→accent-3✅ Phase 1 加 TokenPhase 2 消费Part B嵌套表面--surface-2 #1c2230✅ Phase 1 已补Part B等宽字体--font-monoui-monospace 栈Phase 4 随消费者一起补Part Btext-muted暗色#8b8b9e#a1a1aazinc-400统一推荐保留仪表盘的#a1a1aa3.3 主题机制别破坏的东西Tailwind v4、CSS-first仓库没有tailwind.config.*。令牌定义在:root/.dark中通过theme inline见 globals.css 的 130–227 行区域暴露给工具类。暗色通过html上的.dark类custom-variant dark (:where(.dark, .dark *))globals.css 第 24 行由自定义 Zustand store 切换默认主题是system。营销站点用的是html[data-themelight]——两者机制不同但永不交会不同源因此无冲突dashboard 保留.dark机制。运行时主色覆盖用户可在 UI 里切换主色store 会直接改写--color-primary与其 hover 值见 themeStore.ts。任何引用--color-primary的新令牌如渐变自动继承这套运行时覆盖这是一条关键设计红利。Tailwind v4 保留了 radius 保留名--radius-sm/md/lg/...支撑rounded-*工具类。若重定义--radius-sm会追溯性地改变每一个既有rounded-*例如rounded-sm在 12 个文件中被使用。所以小半径值与组件换点是刻意推迟到 Phase 2、让消费者一起变。3.3.1 深入主题 Store主色是如何在运行时被替换的themeStore.ts 值得单独展开因为它决定了任何新令牌能否免费继承用户主色内置COLOR_THEMEScoral(#e54d5e)、blue(#3b82f6)、red(#ef4444)、green(#22c55e)、violet(#8b5cf6)、orange(#f97316)、cyan(#06b6d4)另有custom自由取色applyColorTheme()调用shadeHexColor(baseColor, -0.14)自动派生--color-primary-hover随后root.style.setProperty(--color-primary, baseColor); root.style.setProperty(--color-primary-hover, hoverColor);applyTheme()负责把system解析成真实主题window.matchMedia((prefers-color-scheme: dark))再决定是否向html添加.dark持久化通过zustand/middleware的persiststorageKey 由 appConfig.ts 提供defaultTheme: system。这解释了为什么设计文档断言--grad-brand引用--color-primary的渐变可以在不修改一行 JS 的情况下跟随用户的珊瑚红/蓝/紫主色切换。4. Part A — Graph-Paper 网格壁纸头号诉求Phase 1 已实现4.1 它是什么一段可复制的 CSS 配方Recipe 直接取自营销站点一个固定、占满整个视口的伪元素用两条 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); }这条规则原样存在于当前仓库的 globals.cssbody::before区块。为什么在body有不透明background-color时依然有效z-index:-1的::before会绘制在元素自身背景之上、但位于其正常流内容之下。于是层次是——--color-bg打底 → 网格浮在底色上 → 应用内容渲染在网格之上。4.2 代码库内已有先例landing/page.tsx16–26 行区域已经按页面实现过同一个网格红色线条#E54D5E、透明度 0.06、间距 50px外加动画光斑。这说明该模式在产品中已被验证本次工作是把同一模式提升为全局、主题感知的壁纸——间距收敛到 32px、线条收敛到中性色。4.3 新增令牌在 globals.css 中:root { /* 亮色 —— 网格不透明度相对站点的 0.045 上调 因为密集的仪表盘卡片/chrome 覆盖大部分视口需要更高的可见度 */ --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); }从源码可以进一步看到浅色--surface-2: #f5f5fa、暗色--surface-2: #1c2230浅色--table-*系列令牌是旧的恒暗硬编码的修复暗色--table-*则与原硬编码值字节级一致见 globals.css:root/.dark的 Data-table surfaces 注释。所有网格/令牌注释都写明了为什么上调不透明度的设计决策阅读源码时值得一并参考。4.4 唯一的阻塞点——已被移除网格天然是全局的它一次性覆盖 panel、auth/login、错误页……所有路由。恰好有一个元素曾在 panel 内部把它藏住DashboardLayout.tsx外层 wrapper 涂了不透明的bg-bg而其下的一切main、滚动容器、内部容器本来就是透明的。移除bg-bg后body 的--color-bg依然是底色网格即可穿过内容区显现- div classNameflex h-dvh min-h-0 w-full overflow-hidden bg-bg div classNameflex h-dvh min-h-0 w-full overflow-hidden当前源码中的 DashboardLayout 外层 wrapper80–82 行区域就是这一状态并保留着说明注释。网格在内容区可见、而由 body 底色提供填充。4.5 Chrome 的交互侧边栏 / 顶栏Headerbg-bg与Sidebarbg-sidebar保持不透明——因此网格只出现在内容区由实心的 chrome 框住它。这是刻意的克制默认与站点把 chrome 与画布分开的做法一致对应决策D3 solid。4.6 登录 / 认证 / 错误页这些页面直接在body之下渲染没有 panel chrome因此全局网格应当自动出现在它们背后。Phase 5 已完成此前独立的全屏 wrapper 确实是不透明的min-h-screen … bg-bg而bg-bg与body是同一实心填充导致不只是登录页——所有非 dashboard 页面都被挡住了网格。现在这些页面全部改为透明以便共享壁纸透出login、forgot-password、callback、maintenance、offline、status、terms、privacy、onboarding以及覆盖400/401的ErrorPageScaffold。这关闭了决策D4从仅登录扩展到每个独立页面。4.7 落地页landing/page.tsx 保留其更丰富的动画背景光斑 暗角因为它是自有营销主视觉决策D5 保留原样。落地球上的网格依然是品牌红 50px 0.06 透明度不参与全局壁纸。5. Part B — Token 统一Phase 1 先补入惰性、无冲突的身份令牌--surface-2/--color-surface-2、--grad-brand、--radiusPhase 2 把 radius 刻度接入 Tailwind 并重指组件Phase 4 添加--font-mono及其消费者。Token为什么需要阶段--radius/--radius-sm用一套 14/9 刻度取代 6/8/12 的临时值1值/ 2接线 重指--grad-brand主 CTA 用品牌渐变红→紫与站点一致1Token/ 2Button--surface-2嵌套面板 / 表头 / 内嵌行1--font-mono代码块、终端、ID、端点4--text-muted统一站点与面板二选一推荐#a1a1aa2关于--text-muted站点#8b8b9evs 仪表盘#a1a1aa文档推荐保留仪表盘现有的#a1a1aa并让站点来对齐纯外观层面无风险。这与仓库实际一致——globals.css 中暗色--color-text-muted: #a1a1aa。5.1 Radius 刻度的接线方式为什么不会炸 400 个文件Tailwind v4 中--radius-sm/md/lg是保留命名会直接改变既有rounded-*工具类。因此仓库没有覆盖它们而是在theme inline中注册了两个自定义名称见 globals.csstheme inline区块--radius-card: var(--radius); /* → rounded-card14px用于表面 */ --radius-control: var(--radius-control); /* → rounded-control9px用于控件 */自定义名称意味着默认的rounded-sm/md/lg/xl完全不动——没有400 文件级联爆炸。之后组件层才按语义换用Card/Modal →rounded-card14pxButton/Input/Select →rounded-control9px。6. Part C — 组件标准化Phase 2–4仪表盘全部是自定义组件无 shadcn/Radix基于 Tailwind v4语义令牌大体已被采用195 个文件 import 共享 barrel。本阶段的工作是清掉那些绕过令牌的旁路。主战场src/shared/components/。#条目涉及文件问题 → 目标阶段C1Radius 对齐Button.tsx、Card.tsx、Modal.tsx、Input.tsx、Select.tsx混用 6/8/12px →--radius/--radius-sm14/92C2Button 渐变 accent变体Button.tsxprimary 是红→红平涂 → 对齐--grad-brand补缺失的accent变体。约 195 个 importer可见度最高2C3表格DataTable.tsx、logTableStyles.ts、globals.css100% 内联硬编码 rgba 不存在的变量 → 迁移到令牌、退役分歧样式3C4集中状态色flow/edgeStyles.ts、TokenHealthBadge.tsx、DegradationBadge.tsx、ProviderCascadeNode.tsx、Badge.tsx等 5 个辅助模块6 份相同的 hex → 基于--color-success/warning/error的单一模块3C5Card 边框Card.tsxborder-white/5→ 品牌色/82C6Focus Ring 统一✅ DONEglobals.css--focus-ringvs 表单控件ring-primary/30统一到accent紫与全局 ring 一致、并与红色错误 ring 区分错误态仍为红4C7新增CheckboxTextarea裸input/textarea内联accentColor:#6366f1令牌驱动的 primitives4C8硬编码 hex 清扫ConsoleLogViewer.tsx、ComboLiveStudio.tsx、Modal 圆点、约 14 个图表文件字面量 → 令牌4C9cn()→ clsx tailwind-mergesrc/shared/utils/cn.ts冲突类叠层 → 后者替换前者2已完全符合品牌令牌驱动、只差 radiusBadge、Toggle、SegmentedControl、Input、Select。6.1 C2 落地的实态Button 变体与尺寸Button.tsx 当前的变体映射可以反推该设计的完成形态const variants { primary: bg-[image:var(--grad-brand)] text-white shadow-sm hover:brightness-105, accent: bg-accent text-white shadow-sm hover:bg-accent-hover, secondary: bg-white dark:bg-white/10 border ... , outline: border ... , ghost: text-text-muted ... , warning: bg-amber-500 ... , danger: bg-red-500 ... , }; const sizes { sm: h-7 px-3 text-xs rounded-control, md: h-9 px-4 text-sm rounded-control, lg: h-11 px-6 text-sm rounded-control, };要点primary已经不是红→红平涂而是bg-[image:var(--grad-brand)]——通过 Tailwind arbitrary property 直接引用 CSS 变量中的渐变因此运行时主色覆盖自动生效accent变体紫也已补上所有尺寸统一使用rounded-control9px。6.2 C4 落地的实态状态色的单点事实文档引用了src/shared/constants/statusColors.ts——它正是 C4 的产物全文件只有一份导出export const STATUS_HEX { success: #22c55e, warning: #f59e0b, error: #ef4444, muted: #6b7280, /** 人工审批门waiting_approval——紫色符合业界事实标准调色板 */ approval: #8b5cf6, } as const;文件头注释还约束了使用边界这些 HEX 只能用在 CSS 类无法触达的地方——canvas、ReactFlow SVG 描边、第三方节点的内联样式普通 DOM 应优先使用已经读取同一令牌的 Tailwind 工具类text-success、bg-error/10。像flow/edgeStyles.ts、TokenHealthBadge这类组件都改从该模块取色不再硬编码#22c55e。6.3 C3 落地的实态--table-*令牌DataTable曾 100% 使用内联 rgba 指向不存在变量的var(--bg-table-header)/var(--text-secondary)兜底死回退导致浅色主题恒暗。现在它消费一组主题感知令牌表头var(--table-header-bg)斑马行var(--table-row-zebra)行悬停var(--table-row-hover)单元格边框var(--table-cell-border)选中行var(--table-row-selected)accent 色调双主题可读表头边框var(--color-border)次要文本var(--color-text-muted)暗色值rgba(15,15,25,.95)等与原硬编码字节级一致所以暗色体验不变浅色值是修复此前是经死亡var()回退导致的错误恒暗。logTableStyles.ts与历史 Ant.ant-table规则未动——独立、低优先级。6.4 C6/C7/C9 落地的实态C9cn.ts 现在是twMerge(clsx(...))clsx tailwind-merge 已作为依赖加入。调用者的className现在会正确替换primitive 的冲突类而不是叠在一起例如传入rounded-full会覆盖 primitive 自带 radius此前只能依赖 CSS 源码顺序碰运气。C7新增CheckboxTextarea两个令牌驱动 primitives并从 barrel 导出。Checkbox使用accent-[var(--color-accent)]Textarea使用rounded-control。属于纯增量——那 32 个裸 checkbox / 41 个裸 textarea 的替换可以后续渐进进行。C6表单控件Input/Select/Textarea/Toggle/Checkbox的键盘焦点统一到accent紫ringring-accent/30与全局--focus-ring一致并停止与红色错误 ring 冲突红色错误态ring-red-500/20保持不变。全局 focus ring 定义在 globals.css 的 Focus Indicators 区块--focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent)且:focus:not(:focus-visible)去掉 ring——即仅键盘导航显示焦点环。C8 不是盲替换已确认属于故意保留、绝不能被清扫进令牌的硬编码有——ConsoleLogViewer.tsx中的恒暗终端、TokenHealthBadge的 popover、ReactFlow 的 SVG 描边。只有真正意图主题感知的 hex 才迁移。7. 分阶段交付计划阶段内容状态Phase 1Grid 身份令牌globals.css网格与--surface-2/--grad-brand/--radiusbody::before壁纸移除bg-bg阻塞点静态守卫测试。低风险、一次 commit 可回滚✅ 完成Phase 2PrimitivesC1、C2、C5语义 radius 工具类rounded-card/rounded-controlCard/Modal→14px、Button/Input/Select→9pxButton primary→--grad-brand 新accent变体Card 边框→border-border。推迟cn()→tailwind-merge需新依赖、326 文件的临时rounded-lg清扫✅ 完成Phase 3状态色 表格C3、C4--font-monostatusColors.ts单点edgeStyles/TokenHealthBadge重指DataTable 全部内联 rgba 与死回退替换为--table-*令牌集✅ 完成合并前需视觉走查Phase 4清理C6、C7、C9 完成C8 待办cn()→twMergeCheckbox/Textarea primitivesfocus ring 统一到 accent✅C8 ⏳Phase 5网格到达每个独立页面 4K 流体内容壳D4/D8✅ 完成Phase 6不透明数据表让所有无 Card 的表格自涂bg-surface阻止网格从透明斑马行透出✅ 完成每个阶段的验收动作统一为npm run lintnpm run typecheck:core 一次视觉走查本仓库的 typecheck 分片命令在根目录package.json与各tsconfig.typecheck-*.json中可查。7.1 Phase 5 的 D8流体 4K 内容壳决策D8曾要求 dashboard 内容壳以max-w-7xl1280px封顶在大屏上左右留出空荡的侧槽。现已改为流体max-w-[3840px]真正的 4K内容在到达 ~4K 前跟随视口只在此之上才居中。见 DashboardLayout.tsxdiv classNamemax-w-[3840px] mx-auto w-full h-full min-h-0 flex flex-col刻意收窄的页面则靠设计保持窄如ProviderOnboardingWizard用max-w-5xl、Rtk/CavemanContextPageClient用max-w-6xl。7.2 Phase 6 的 D9不透明数据表内容区透明后让网格透出Phase 5最近祖先不是不透明表面的数据表会让网格从透明的偶数行 / 低透明度斑马纹中透出。修复手段每个无 Card 的表格现在自涂bg-surfaceDataTableprimitive 在其滚动容器上涂background: var(--color-surface)。已修复清单来自文档并部分可对照测试DataTableprimitive、ProxyLogger/RequestLoggerV2它们的Card曾用bg-black/5 dark:bg-black/20通过 tailwind-merge 压过 Card 自己的bg-surface结果 ~95% 透明、BatchListTab/FilesListTab/CacheEntriesTab/ReasoningCacheTab/cache 页/FreePoolTab/ModelMappingTable/HeaderTable外加 cache 视图里的两个 CSS-grid 表格bg-surface/35→bg-surface。已在Card/Modal 内部的表格经核实本就是不透明的被刻意不动那里的bg-surface是冗余空操作。网格本身不需要改动——dashboard 的body::before与站点字节一致--grid-size: 32px如果你在运行实例上看到更大的网格那是旧的构建产物不是代码问题。8. 决策记录开放项与最终裁决文档保留了一份完整决策表每一行对应一次有意的取舍D1 — Button primary保留红→红还是切换成红→紫--grad-brand→ 已定红→紫Phase 2。D2 — 网格线颜色中性色站点风格✓ 选中而非品牌红尺寸32px根据 owner 反馈从最初 46px 缩小约 30%——46px 单元格在 dashboard 布局上显得过大。D3 — Chrome 质感侧边栏/顶栏实心✓ 选中。D4 — 认证/登录页网格✅ Phase 5 完成——不仅登录页所有独立全屏 wrapper 都移除了不透明bg-bg。D5 — 落地页保留动画 splash ✓ 选中。D6 — 全产品 14/9 radius建议采纳Phase 2。D7 — Phase 1 先行✓ 选中。D8 — 布局宽度✅ 完成——流体max-w-[3840px]。D9 — 不透明数据表✅ 完成——无 Card 表格统一bg-surface。9. 质量保障静态守卫测试如何锁死设计契约整套工作由单一守卫测试 tests/unit/design-grid-background.test.ts 守护。它用node:test直接读源码字符串做断言把设计契约变成可回归的机器检查覆盖了上面所有阶段网格令牌双主题亮色rgba(0,0,0,.07)、暗色rgba(255,255,255,.06)、--grid-size: 32px、--section-alt双值渲染机制body::before必须存在且含position: fixed、z-index: -1、pointer-events: none、两条 1px 渐变与background-size: var(--grid-size)身份令牌--surface-2双主题值、--radius: 14px、--grad-brand的 135deg 渐变表达式、--color-surface-2DashboardLayout 不得有bg-bg断言 wrapper 字符串精确等于透明的flex h-dvh min-h-0 w-full overflow-hiddenradius 工具类--radius-control: 9px、--radius-card: var(--radius)存在Button必须用bg-[image:var(--grad-brand)]、有accent变体、不得再包含from-primary to-primary-hover、尺寸含rounded-controlCard/Modal/Input/SelectCard 用border border-borderrounded-card且不得再有border-black/5Input/Select 用rounded-control状态色单点statusColors.ts导出STATUS_HEXedgeStyles.ts与TokenHealthBadgeimport 该模块、使用STATUS_HEX.success、不得再硬编码#22c55e等宽令牌--font-mono: ui-monospaceDataTable 主题感知--table-*暗色值等于旧 rgba、亮色为修复值DataTable 源码使用var(--table-header-bg)/var(--row-zebra)/var(--color-border)无任何颜色字面量且旧的死亡回退--text-secondary、--bg-table-header已消失cn()import tailwind-merge 与 clsx调用twMerge(clsx(...))Checkbox/Textarea存在于 barrelcheckbox 用accent-[var(--color-accent)]textarea 用rounded-controlFocus ring全局--focus-ring引用--color-accent五个表单控件均用ring-accent/30且不再用focus:ring-primary/30有 error 态的保留红色ring-red-500/20独立页面透明性逐页扫描 login/forgot-password/callback/maintenance/offline/status/terms/privacy/onboarding/ErrorPageScaffold禁止min-h-screen与bg-bg同现4K 流体壳DashboardLayout 含max-w-[3840px] mx-auto且max-w-7xl已消失数据表不透明DataTable 滚动容器含var(--color-surface)ProxyLogger/RequestLoggerV2不得含bg-black/5|20且含bg-surface6 个无 Card 表格必须出现各自的 opaque 表面类cache 表格不得再出现bg-surface/35。这套测试的存在意味着任何人包括未来维护者试图顺手加回一个背景色或扩大某个 radiusCI 会直接拦住——视觉规范被编码成了不可回退的静态契约。10. 范围外与风险不做调色板改动——颜色已经一致只补缺失令牌产品被重新上色的风险为零。不换主题引擎——保留.dark Zustand store 机制。Phase 2 的 radius 变动范围广——触及每张卡片/按钮/输入框合入前要人工目检繁忙页面表格、模态框。表格C3携带最多硬编码样式、回归面最大——被隔离在独立 PR 中处理。刻意保留的硬编码恒暗终端、ReactFlow SVG 描边、Badge popover不得被无脑清扫进令牌——设计文档与源码注释均明确标记了这一点。11. 参考索引可继续深挖的文件领域路径本文权威依据原始设计文档docs/architecture/DESIGN_SYSTEM.md仪表盘令牌:root/.dark/theme inline/body/body::beforesrc/app/globals.css主题 Store.dark切换 运行时主色覆盖src/store/themeStore.ts、src/shared/components/ThemeProvider.tsx默认主题配置defaultTheme: systemsrc/shared/constants/appConfig.tsPanel 壳网格在此被解锁、4K 流体src/shared/components/layouts/DashboardLayout.tsxChrome保持不透明src/shared/components/Header.tsx、src/shared/components/Sidebar.tsx网格先例落地页动画版src/app/landing/page.tsxPrimitivessrc/shared/components/ 下的Button.tsx/Card.tsx/Input.tsx/Select.tsx/Badge.tsx/Modal.tsx/Toggle.tsx/Checkbox.tsx/Textarea.tsx/DataTable.tsx等状态色单点来源src/shared/constants/statusColors.tscn()工具src/shared/utils/cn.tsPhase 1–6 守卫测试tests/unit/design-grid-background.test.ts注意营销站点设计文档写作_mono_repo/omnirouteSite/不在当前仓库检出范围之内本文所引 token 值均以当前仓库 src/app/globals.css 的实际声明为准文档中与站点一致的描述可直接与该文件相互印证。结语OmniRoute 的这次设计系统落地提供了一个可复用的工程范式先让两处代码库在颜色上按值对齐再补齐网格壁纸与身份令牌最后按低风险高可见度 → 组件大扫除的顺序逐波推进。最值得带走的三个实操结论透明 vs 不透明是网格壁纸能否存活的分水岭——body::before的z-index:-1技巧天然绕过了 body 的不透明底色但任何一层自涂bg-bg的 wrapper 都会把它拦下所以这类改动必须配静态守卫测试而不是靠肉眼。Tailwind v4 的theme inline是令牌进工具类的主通道——用自定义命名rounded-card/rounded-control而非覆盖保留名是避免全局级联爆炸的关键一步。所有引用--color-primary的令牌会自动继承运行时主题切换——设计令牌的引用关系设计得越收敛后续换肤能力就越免费。【免费下载链接】OmniRouteNever stop coding. Free MIT AI gateway: one endpoint, 352 providers (150 free), 1200 models Kimi, Claude, GPT, Gemini, GLM, DeepSeek, MiniMax. Works with Claude Code, Codex, Cursor, OpenCode, Cline Copilot. Quota-aware auto-fallback, RTKCaveman compression saves 15-95% tokens, MCP/A2A, Desktop/PWA. Built by 550 contributors项目地址: https://gitcode.com/GitHub_Trending/om/OmniRoute创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考