OmniRoute 仪表盘导航重构实战：Monitoring 与 Costs 分区结构与源码实现解析

OmniRoute 仪表盘导航重构实战Monitoring 与 Costs 分区结构与源码实现解析【免费下载链接】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/OmniRouteMonitoring Costs监控与成本是 OmniRoute 网关仪表盘中最常被使用、也最容易因条目膨胀而变得难以导航的两类功能。本文基于 MONITORING_SECTIONS.md 记录的分区设计对应 Group B / plan 16系统梳理新版侧边栏的顶层分区顺序、独立出来的 Costs 一级分区、重组后的 Monitoring 三分组结构并从仓库源码层面验证 Activity 与 Audit Log 的数据边界、HIGH_LEVEL_ACTIONS白名单机制、旧路径重定向与 i18n 回退策略。读完你既能按新导航快速定位成本与监控功能也能理解这套侧边栏定义的实现骨架便于后续扩展自己的可见性/成本类模块。高层面导航分区顺序与侧边栏骨架Group B 改造后Dashboard 侧边栏的顶层分区Section按固定顺序排列其定义全部收敛在 sections.ts 的SIDEBAR_SECTIONS中Home Providers (OmniProxy 分区内含 Endpoints、API Keys、Combos、Quota 等) Analytics Costs ← 新增一级分区Group B, plan 16 Monitoring ← 重组Group B, plan 16 Dev Tools Agentic Features Other Features Configuration Help从源码结构看每个分区对应 types.ts 中的SidebarSectionId联合类型home | omni-proxy | analytics | costs | monitoring | devtools | agentic-features | other-features | configuration | help分区可携带visibility: debug标记如 Dev Tools用于调试环境也可声明featureFlagKey如 Radar 条目用RADAR_ENABLED做特性开关门控。顶层分区顺序是可通过设置调整的——sidebarVisibility.ts 提供了applySectionOrder()/applyItemOrder()与sidebarSectionOrder/sidebarItemOrder持久化键同时内置 5 个预设all/essentials/minimal/developer/admin对应SIDEBAR_PRESETS例如admin预设会额外展开costs-pricing、costs-budget、costs-quota-share、activity、audit、audit-mcp、audit-a2a等运维条目而essentials只保留核心路径。Costs独立的一级分区成本类功能从原先嵌套在Monitoring Costs Parameters的位置提升为独立一级分区路由前缀统一为/dashboard/costs/条目URL说明Overview概览/dashboard/costs聚合成本看板从 Analytics 迁入Pricing定价/dashboard/costs/pricing按模型区分的价格表Budget预算/dashboard/costs/budget预算阈值与告警Quota Sharing配额共享/dashboard/costs/quota-shareQuota Share 池与用量Plan Config计划配置/dashboard/costs/quota-share/plans按 provider 的计划覆盖配置Rationale设计动机Pricing、Budget、Quota Sharing 原本藏在Monitoring Costs Parameters导致用户必须先进入可观测性工具才能触达成本管理。把它们提到一级分区能让成本治理在不动用监控链路的前提下被直接发现。在 sections.ts 中成本类条目进一步细化为COSTS_ITEMS含costs、costs-pricing、costs-budget、costs-free-tiers、free-provider-rankings以及带RADAR_ENABLED特性的radar其中costs-quota-share指向/dashboard/costs/quota-share同时出现在 OmniProxy 分区便于在配额管理语境中直达配额池。对应页面源码位于 costs/page.tsx/dashboard/costs/page.tsx)、costs/budget/page.tsx/dashboard/costs/budget/page.tsx)、costs/pricing/page.tsx/dashboard/costs/pricing/page.tsx) 与 costs/quota-share/page.tsx/dashboard/costs/quota-share/page.tsx)。Monitoring重组为「Activity 三个分组」重组后的 Monitoring 分区把Activity 提到分组最顶部其后跟随 3 个分组GroupMonitoring ├── Activity ← 时间线信息流顶层条目 ├── Logs group │ ├── Logs (all) │ ├── Proxy Logs │ └── Console Logs ├── Audit group │ ├── Audit Log │ ├── MCP Audit │ └── A2A Audit └── System group ├── Health └── Runtime在 sections.ts 中可看到该结构的精确表达MONITORING_ITEMS先放入activity随后依次展开LOGS_GROUP、AUDIT_GROUP、SYSTEM_GROUP三个SidebarItemGroup注意getSectionItems()会把 group 内的 items 摊平用于隐藏项计算。侧边栏图标强调色映射见 sidebarVisibility.ts 中的SIDEBAR_ICON_ACCENTS如logs-activity: #60A5FA、costs: #FB923C、audit: #F43F5E。相对旧结构的变化对照改造前改造后Activity 是 Logs 内的一个 tab渲染的就是 Audit LogActivity 成为独立信息流/dashboard/activityMonitoring 中带 Costs Parameters 分组已迁至独立 Costs 分区扁平列表Logs、Activity(logs)、Audit、Health、Runtime、Pricing、Budget、Quota结构化 3 分组 独立 Costs 分区Activity 与 Audit Log两种语义、一个数据底座改造后两者彻底区分。区分点可用下表快速记忆维度Activity/dashboard/activityAudit Log/dashboard/audit用途面向用户的事件信息流“最近发生了什么”合规 / 安全审计日志数据来源GET /api/compliance/audit-log?levelhighGET /api/compliance/audit-log?levelall展示形式时间线、按天分组、人类可读动词 图标密集分页表格50 条/页筛选事件类型分类动作、严重级别、操作者、时间范围导出不支持JSON 导出操作者筛选不适用支持按 actor 过滤展示事件仅高层级动作白名单全部审计事件值得强调的是两者共享同一数据底座——Audit Log API audit-log/route.ts 通过level查询参数区分返回集合Activity 只消费levelhigh子集Audit Log 消费levelall全量。换句话说Activity 是白名单过滤后的“人话时间线”Audit Log 才是完整的事实记录二者天然互补而非替代。HIGH_LEVEL_ACTIONSActivity 的「顶层动作白名单」哪些事件会进入 Activity 时间线由 highLevelActions.ts 中的HIGH_LEVEL_ACTIONS白名单唯一决定。白名单覆盖了以下类别Action 字符串与仓库内logAuditEvent()实际发射名严格对齐源码注释明确要求“不要用自造的干净名字”Provider 增删改查/测试类provider.credentials.*created / applied / updated / revoked / batch_revoked / batch_updated / bulk_created / bulk_imported / imported以及provider.validation.ssrf_blockedAPI Key 生命周期同步令牌sync.token.created/sync.token.revoked认证登录登出auth.login.success/auth.login.failed/auth.login.locked/auth.logout.success等设置变更settings.update/settings.update_failed敏感操作service.reveal_api_keyQuota 池与计划变更Group B 新增quota.pool.created/quota.pool.updated/quota.pool.deleted/quota.plan.updated/quota.store.driver_changed名单之外的事件例如细粒度的内部操作只会出现在 Audit Log不会污染 Activity 时间线。判定函数isHighLevelAction(action)底层用Set做常量级查找const SET: ReadonlySetstring new Setstring(HIGH_LEVEL_ACTIONS); export function isHighLevelAction(action: string): boolean { return SET.has(action); }新增一个高层级动作的正确姿势若要让某类事件进入 Activity 时间线需要按以下步骤走代码路径白名单是代码而非数据库配置因此必须走 PR 流程打开 highLevelActions.ts先全局grep logAuditEvent确认上游事件发射名是否已存在把真实 action 字符串追加进HIGH_LEVEL_ACTIONS数组严禁使用“美化过”的别名否则列表与实际事件永远对不上同步在 activityIcons.ts 的ACTIVITY_ICONS中为该 action 注册图标与动词 i18n key如quota.pool.created: { icon: pie_chart, i18nKeyVerb: quotaPoolCreated },getActivityIcon()对未注册的动作会回退到通用info图标与genericEvent动词保证渲染不崩溃若上游发射名将来变化须同时原子化更新发射点与白名单源码注释明确强调这一点。Activity 页面的前端实现由 activity/page.tsx/dashboard/activity/page.tsx)强制 dynamic 渲染与其客户端组件ActivityFeedClient承担时间线聚合逻辑在 src/lib/audit/timeline.ts。兼容旧路径/dashboard/logs/activity 永久重定向为避免破坏既有书签与集成旧路径/dashboard/logs/activity通过 logs/activity/page.tsx/dashboard/logs/activity/page.tsx) 内的permanentRedirect()以HTTP 308永久重定向至/dashboard/activityimport { permanentRedirect } from next/navigation; export default function LogsActivityRedirect() { permanentRedirect(/dashboard/activity); }同时旧侧边栏 IDlogs-activity被保留在HIDEABLE_SIDEBAR_ITEM_IDS见 types.ts但移出SIDEBAR_DEFINITIONSsections.ts。这样做的目的是兼容用户侧已持久化的隐藏项/排序配置hiddenSidebarItems、sidebarItemOrder等设置键常量定义见 sidebarVisibility.ts 的HIDDEN_SIDEBAR_ITEMS_SETTING_KEY等避免用户旧预设中引用的旧 ID 在规范化时被当作非法项丢弃——normalizeHiddenSidebarItems()只会保留白名单内 ID若从HIDEABLE_SIDEBAR_ITEM_IDS中删掉logs-activity老配置就会被静默清掉。国际化命名空间与多语言回退Group B 新增的所有 UI 文案都走next-intl新增命名空间如下命名空间 key覆盖内容sidebar.costsSectionCosts 分区标签sidebar.activityActivity 侧边栏条目sidebar.logsGroupLogs 分组标签sidebar.systemGroupSystem 分组标签sidebar.costsOverviewCosts 概览条目activity.*Activity 页面全部文案标题、动词、筛选、空状态i18n 的真实性语言source-of-truth locales为pt-BR 与 en其余 41 个语言通过next-intl的 fallback 机制回退到英文配置位于 src/i18n/config.ts。前端组件侧的 fallback 也有一层兜底sections.ts 中每条SidebarItemDefinition均带labelFallback/subtitleFallback用于翻译缺失时直接展示字面量避免出现空标签。关键实现文件速查MONITORING_SECTIONS.md —— 本文依据的分区设计文档Group B / plan 16src/shared/constants/sidebarVisibility/sections.ts ——SIDEBAR_SECTIONS分区/分组/条目定义侧边栏结构的唯一真源src/shared/constants/sidebarVisibility/types.ts ——SidebarItemId、SidebarSectionId、HIDEABLE_SIDEBAR_ITEM_IDS等类型契约src/shared/constants/sidebarVisibility.ts —— 图标强调色、预设集、顺序/隐藏设置与运行时项解析resolveRuntimeSidebarSectionssrc/lib/audit/highLevelActions.ts —— Activity 顶层动作白名单src/lib/audit/activityIcons.ts —— 动作图标与人类可读动词映射src/app/api/compliance/audit-log/route.ts —— Activity 与 Audit Log 的共同数据 APIlevelhigh/levelallsrc/app/(dashboard)/dashboard/logs/activity/page.tsx/dashboard/logs/activity/page.tsx) —— 旧路径 308 重定向入口小结本次重构的本质是把「成本治理」与「可观测性」两类心智模型解耦Costs 独立成区让预算与配额管理前置可及Monitoring 以 Activity 时间线打头并收敛为 Logs / Audit / System 三组使安全审计、日志排障、健康观测各归其位。Activity 与 Audit Log 共用一套审计数据底座却呈现两种视图靠HIGH_LEVEL_ACTIONS白名单与level参数完成取舍兼顾“易读”与“完整”。对开发者而言若要扩展监控或成本模块只需沿着侧边栏定义、白名单常量、图标映射与 i18n 命名空间四条代码链路做增量修改即可让新功能无缝接入这套导航体系。【免费下载链接】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），仅供参考