npm - @teamix-evo/skills - Versions diffs - 0.5.0 → 0.7.0 - Mend

@teamix-evo/skills 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/src/teamix-evo-design-opentrek/examples/detail-page-monitor.html ADDED Viewed

@@ -0,0 +1,1339 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>监控详情页 · 标准参考范例 — v7.8.4</title>
+<!--
+  ★ 监控详情页标准参考范例（Standard Monitor Detail Page Reference）
+  ─────────────────────────────────────────────────────────────
+  页面类型 : DetailPage
+  子类型   : MonitorDetailPage（监控面板详情页）
+  版本     : v7.7
+  场景     : AI 网关实例监控面板 — 请求量 / 成功率 / 延迟 / Token 等核心指标
+  ─────────────────────────────────────────────────────────────
+  布局：TWO_COL（Sidebar + ContentCard 单例容器）
+  内容区结构：PageHeader → MetricCard Row → ChartPanel(请求趋势) → Tabs
+  ─────────────────────────────────────────────────────────────
+  组件清单：
+    • PageHeader — 面包屑模式 + TimeRangeSelector + 刷新
+    • TimeRangeSelector — SegmentedControl（1h/6h/24h/7d/30d）
+    • MetricCard — 4 卡横排，标题 + 数值 + 趋势 + 迷你折线图
+    • ChartPanel — 全宽请求趋势图 + 2×2 性能指标网格
+    • AlertList — 告警记录列表（Critical/Warning/Info）
+    • DataTable — 调用明细表
+    • Tabs — 性能指标 / 告警记录 / 调用明细
+    • Badge — 状态展示
+  ─────────────────────────────────────────────────────────────
+  规范来源：pages/detail-page/SKILL.md v7.8.4
+  Tokens 版本：v7.8.4（v7.6 ContentCard 表面规则 + v7.8.4 字体族变量 + MetricCard/ChartPanel/AlertList 组件）
+  表面边界：PageHeader / Tabs / Separator 的 border 为「功能性分割线」，不受 v7.6 surface 约束
+-->
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --primary: 218.6 100% 46.7%;
+  --primary-foreground: 0 0% 100%;
+  --primary-hover: 218.6 100% 42%;
+  --primary-click: 218.6 100% 37.5%;
+  --gray-primary: 220 9% 7%;
+  --gray-primary-foreground: 210 33% 99%;
+  --gray-secondary-foreground: 216 4% 26%;
+  --muted-foreground: 216 2% 45%;
+  --gray-disabled: 210 3% 63%;
+  --gray-line: 210 9% 91%;
+  --gray-sidebar-accent: 210 12% 93%;
+  --gray-muted: 220 18% 97%;
+  --gray-white: 0 0% 100%;
+  /* Legacy 别名（v7.4 向后兼容） */
+  --gray-title: 220 9% 7%;
+  --gray-secondary: 216 4% 26%;
+  --gray-tertiary: 216 2% 45%;
+  --gray-border: 210 9% 91%;
+  --gray-fill: 220 18% 97%;
+  --gray-bg-dark: 220 18% 97%;
+  --gray-bg: 220 18% 97%;
+  --success: 142 76% 36%;
+  --success-bg: 152 82% 96%;
+  --success-border: 142 77% 73%;
+  --warning: 40 88% 48%;
+  --warning-bg: 43 100% 94%;
+  --destructive: 0 72% 51%;
+  --destructive-bg: 0 86% 97%;
+  --info: 218 100% 47%;
+  --info-bg: 214 100% 97%;
+  --background: 220 18% 97%;
+  --card: 0 0% 100%;
+  --card-foreground: 220 9% 7%;
+  --border: 210 9% 91%;
+  --ring: 218.6 100% 46.7%;
+  --sidebar: 220 18% 97%;
+  --sidebar-foreground: 220 9% 7%;
+  --sidebar-active: 210 12% 93%;
+  --sidebar-active-foreground: 220 9% 7%;
+  --sidebar-hover: 220 18% 97%;
+  --sidebar-item: 220 9% 7%;
+  --sidebar-item-muted: 216 4% 26%;
+  --sidebar-border: 210 9% 91%;
+  --sidebar-group: 216 2% 45%;
+  --radius: 1rem;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --gap-xs: 4px;
+  --btn-padding-x: 16px;
+  --btn-padding-x-sm: 12px;
+  --button-gap: 8px;
+  --tabs-gap: 24px;
+  --card-gap: 16px;
+  --page-container-gap: 16px;
+  --page-container-padding: 16px;
+  --page-container-padding-left: 0px;
+  --card-padding-x: 20px;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --font-size-base: 12px;
+  --font-size-lg: 14px;
+  --font-size-xl: 16px;
+  --font-size-2xl: 18px;
+  --font-size-page-header: 18px;
+  --font-sans: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-black: 900;
+  --input-height: 32px;
+  --input-radius: 8px;
+  --layout-sidebar-width: 240px;
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --easing-ease: ease;
+}
+body {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary));
+  background: hsl(var(--background));
+  min-height: 100vh;
+}
+/* ===== Sidebar ===== */
+.sidebar {
+  position: fixed; top: 0; left: 0; bottom: 0;
+  width: var(--layout-sidebar-width);
+  background: hsl(var(--sidebar));
+  z-index: 100;
+  display: flex; flex-direction: column;
+  overflow: hidden;
+  transition: width 0.2s ease;
+}
+.sidebar-header {
+  height: 56px; padding: 0 16px;
+  display: flex; align-items: center; gap: var(--gap-xs);
+  flex-shrink: 0;
+}
+.sidebar-logo {
+  height: 28px; flex-shrink: 0;
+  display: flex; align-items: center;
+  overflow: hidden;
+}
+.sidebar-logo img {
+  height: 28px; width: auto; display: block;
+}
+.sidebar-logo .collapsed-logo {
+  display: none; width: 30px; height: 30px;
+}
+.sidebar-logo .expand-logo {
+  display: none; width: 18px; height: 18px;
+  color: hsl(var(--muted-foreground));
+}
+.sidebar-collapse-btn {
+  margin-left: auto; width: 18px; height: 18px;
+  background: none; border: none; padding: 0; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  color: hsl(var(--muted-foreground)); flex-shrink: 0;
+}
+.sidebar-collapse-btn svg { width: 18px; height: 18px; }
+/* ===== Sidebar Collapsed State ===== */
+.sidebar.collapsed { width: 68px; overflow: visible; }
+.sidebar.collapsed .sidebar-header { padding: 0 12px; justify-content: center; }
+.sidebar.collapsed .sidebar-logo { cursor: pointer; }
+.sidebar.collapsed .sidebar-logo img { display: none; }
+.sidebar.collapsed .sidebar-logo .collapsed-logo { display: block; }
+.sidebar.collapsed .sidebar-logo:hover .collapsed-logo { display: none; }
+.sidebar.collapsed .sidebar-logo:hover .expand-logo { display: block; }
+.sidebar.collapsed .sidebar-collapse-btn { display: none; }
+.sidebar.collapsed .sidebar-content { padding: 12px 0; overflow-y: auto; overflow-x: hidden; }
+.sidebar.collapsed .sidebar-menu { padding: 0; }
+.sidebar.collapsed .sidebar-menu > li { display: flex; justify-content: center; }
+.sidebar.collapsed .sidebar-menu > li > a.sidebar-menu-item {
+  justify-content: center; padding: 0; width: 40px; height: 40px;
+  border-radius: var(--radius-md); position: relative; flex-shrink: 0;
+  gap: 0;
+}
+.sidebar.collapsed .sidebar-menu > li > a.sidebar-menu-item .item-icon { margin: 0; }
+.sidebar.collapsed .sidebar-menu > li > a > span:not(.item-icon),
+.sidebar.collapsed .sidebar-menu > li > a > .expand-icon,
+.sidebar.collapsed .sidebar-menu-item:not(.item-icon):after { display: none; }
+/* 隐藏文字节点（直接文本） */
+.sidebar.collapsed .sidebar-menu > li > a { font-size: 0; }
+.sidebar.collapsed .sidebar-menu > li > a > .item-icon { font-size: var(--font-size-lg); }
+.sidebar.collapsed .sidebar-sub-menu { display: none !important; }
+.sidebar.collapsed .sidebar-divider { margin: 0 14px; }
+.sidebar.collapsed .sidebar-footer { padding: 12px 10px 16px; justify-content: center; }
+.sidebar.collapsed .sidebar-username,
+.sidebar.collapsed .sidebar-more { display: none; }
+/* ===== Sidebar Collapsed Flyout (hover 浮层展示二级菜单) ===== */
+.sidebar.collapsed .sidebar-menu > li { position: relative; }
+.sidebar.collapsed .sidebar-menu > li:hover > .sidebar-flyout {
+  display: block;
+}
+.sidebar-flyout {
+  display: none;
+  position: absolute; left: 100%; top: 0;
+  min-width: 160px; padding: 4px;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--gray-line));
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  z-index: 200;
+}
+.sidebar-flyout .sidebar-menu-item {
+  height: 36px; padding: 0 12px;
+  font-size: var(--font-size-base) !important;
+  font-weight: var(--font-weight-normal);
+  color: hsl(var(--gray-primary));
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+}
+.sidebar-flyout .sidebar-menu-item:hover {
+  background: hsl(var(--gray-muted));
+}
+/* Main content 响应 sidebar 收起 */
+.main-content {
+  margin-left: var(--layout-sidebar-width);
+  min-height: 100vh;
+  transition: margin-left 0.2s ease;
+}
+.sidebar.collapsed ~ .main-content { margin-left: 68px; }
+.sidebar-product {
+  font-size: var(--font-size-xl); font-weight: var(--font-weight-black);
+  color: hsl(var(--sidebar-foreground)); letter-spacing: -0.025em;
+  white-space: nowrap; line-height: 1;
+}
+.sidebar-content {
+  flex: 1; overflow-y: auto; padding: 12px 0;
+}
+/* twoLevel 变体：去掉 sidebar-group-label，主菜单之间间距由 li padding 提供；保留 sidebar-group-label 样式以兼容其他页面。 */
+.sidebar-group-label {
+  padding: 0 16px; height: 26px; line-height: 26px;
+  font-size: var(--font-size-base); font-weight: var(--font-weight-normal);
+  color: hsl(var(--sidebar-group));
+}
+.sidebar-group-label:not(:first-child) { margin-top: 16px; }
+.sidebar-menu { list-style: none; padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
+.sidebar-menu-item {
+  display: flex; align-items: center; gap: var(--button-gap);
+  padding: 0 12px; height: 40px;
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-lg); font-weight: var(--font-weight-medium);
+  color: hsl(var(--sidebar-item-muted));
+  text-decoration: none; cursor: pointer;
+  transition: background var(--duration-fast), color var(--duration-fast);
+  white-space: nowrap;
+}
+.sidebar-menu-item:hover {
+  background: hsl(var(--sidebar-hover));
+  color: hsl(var(--sidebar-item));
+}
+.sidebar-menu-item.active {
+  background: hsl(var(--sidebar-active));
+  color: hsl(var(--sidebar-active-foreground));
+}
+.sidebar-menu-item .item-icon {
+  width: 16px; height: 16px; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+}
+.sidebar-menu-item .expand-icon {
+  margin-left: auto; width: 16px; height: 16px;
+  transition: transform var(--duration-fast);
+}
+.sidebar-menu-item.expanded .expand-icon { transform: rotate(90deg); }
+.sidebar-sub-menu {
+  list-style: none; padding: 0 0 0 24px;
+  display: none;
+}
+/* twoLevel 变体：子菜单与主菜单在同一列上下对齐。sub-menu 不再加左 padding，由子菜单项自身 padding-left = 12+16+8 = 36px 代替主菜单的 "padding+icon+gap"，使文字起点 x 坐标与主菜单一致。 */
+.sidebar-menu > li > .sidebar-sub-menu { padding-left: 0; }
+.sidebar-sub-menu.show { display: block; }
+.sidebar-sub-menu .sidebar-menu-item {
+  height: 36px; font-size: var(--font-size-base); font-weight: var(--font-weight-normal);
+  /* twoLevel 变体对齐规则：36px = 主菜单 padding-left(12) + item-icon(16) + gap(8)，使文字与主菜单文字上下对齐。 */
+  padding-left: 36px;
+}
+.sidebar-divider {
+  height: 1px; background: hsl(var(--sidebar-border));
+  margin: 0 12px; flex-shrink: 0;
+}
+.sidebar-footer {
+  flex-shrink: 0; display: flex; align-items: center;
+  gap: var(--button-gap); padding: 12px 12px 16px 24px;
+}
+.sidebar-avatar {
+  width: 28px; height: 28px; border-radius: 50%;
+  background: hsl(var(--sidebar-active));
+  display: flex; align-items: center; justify-content: center;
+  font-size: var(--font-size-base); font-weight: 600;
+  color: hsl(var(--gray-primary)); flex-shrink: 0;
+}
+.sidebar-username {
+  flex: 1; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium);
+  color: hsl(var(--sidebar-item)); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap;
+}
+.sidebar-more {
+  width: 28px; height: 28px; border-radius: var(--radius-sm);
+  border: none; background: transparent; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  color: hsl(var(--muted-foreground));
+}
+.sidebar-more:hover { background: hsl(var(--sidebar-hover)); color: hsl(var(--gray-primary)); }
+/* ===== Main Content ===== */
+.page-container {
+  padding: var(--page-container-padding) var(--page-container-padding) var(--page-container-padding) var(--page-container-padding-left);
+}
+.card {
+  background: hsl(var(--card));
+  border-radius: var(--radius-lg);
+  /* v7.6：去掉 1px border，使用最弱阴影 var(--shadow-sm) */
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
+  overflow: hidden;
+  display: flex; flex-direction: column;
+  min-height: calc(100vh - 40px);
+  padding: 0 var(--card-padding-x);
+}
+/* ===== PageHeader — Breadcrumb Mode ===== */
+/* L2 面包屑模式：无 border、无 background、无 box-shadow；高度 64px，padding 由外层 Card 提供 */
+.page-header {
+  height: 64px; padding: 0;
+  display: flex; align-items: center; justify-content: space-between;
+  flex-shrink: 0;
+}
+.page-header-left { display: flex; align-items: center; }
+.breadcrumb {
+  display: flex; align-items: center; gap: 4px;
+  font-size: var(--font-size-page-header); font-weight: var(--font-weight-medium);
+  color: hsl(var(--gray-secondary-foreground));
+}
+.breadcrumb a { color: hsl(var(--gray-secondary-foreground)); text-decoration: none; }
+.breadcrumb a:hover { color: hsl(var(--gray-primary)); }
+.breadcrumb .separator { color: hsl(var(--muted-foreground)); display: flex; align-items: center; }
+.breadcrumb .separator svg { width: 20px; height: 20px; }
+.breadcrumb .current { color: hsl(var(--gray-primary)); }
+.page-header-right { display: flex; align-items: center; gap: var(--button-gap); }
+/* ===== Buttons ===== */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs);
+  height: var(--input-height); padding: 0 var(--btn-padding-x);
+  border-radius: var(--radius-md); font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium); border: none; cursor: pointer;
+  transition: background var(--duration-fast), opacity var(--duration-fast);
+  white-space: nowrap;
+}
+.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
+.btn-primary:hover { background: hsl(var(--primary-hover)); }
+.btn-outline { background: hsl(var(--card)); color: hsl(var(--gray-primary)); border: 1px solid hsl(var(--gray-line)); }
+.btn-outline:hover { background: hsl(var(--gray-muted)); }
+.btn-ghost { background: transparent; color: hsl(var(--gray-primary)); }
+.btn-ghost:hover { background: hsl(var(--gray-muted)); }
+.btn-icon { width: var(--input-height); padding: 0; }
+/* ===== TimeRangeSelector — SegmentedControl ===== */
+.time-range-selector {
+  display: inline-flex; align-items: center;
+  height: 32px; padding: 2px;
+  background: hsl(var(--gray-muted));
+  border-radius: var(--radius-md);
+  gap: 2px;
+}
+.time-range-item {
+  height: 28px; padding: 0 12px;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
+  color: hsl(var(--gray-secondary-foreground));
+  background: transparent; border: none; cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background var(--duration-fast), color var(--duration-fast);
+  white-space: nowrap;
+}
+.time-range-item:hover { color: hsl(var(--gray-primary)); }
+.time-range-item.active {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+}
+/* ===== MetricCard Row ===== */
+.metric-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  padding: 16px 0;
+}
+.metric-card {
+  height: 96px;
+  padding: 12px 16px;
+  background: hsl(var(--gray-muted));
+  border-radius: var(--radius-md);
+  display: flex; flex-direction: column;
+  position: relative; overflow: hidden;
+}
+.metric-card-head {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 4px;
+}
+.metric-card-title {
+  font-size: var(--font-size-base); font-weight: var(--font-weight-normal);
+  color: hsl(var(--gray-secondary-foreground));
+}
+.metric-card-icon {
+  width: 16px; height: 16px;
+  color: hsl(var(--muted-foreground));
+}
+.metric-card-body {
+  display: flex; align-items: baseline; gap: 8px;
+  flex: 1;
+}
+.metric-card-value {
+  font-size: 24px; font-weight: var(--font-weight-semibold);
+  color: hsl(var(--gray-primary)); line-height: 1.2;
+  letter-spacing: -0.01em;
+}
+.metric-card-trend {
+  display: inline-flex; align-items: center; gap: 2px;
+  font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
+}
+.metric-card-trend.up { color: hsl(var(--success)); }
+.metric-card-trend.down { color: hsl(var(--destructive)); }
+.metric-card-trend.down-good { color: hsl(var(--success)); } /* 延迟下降是好事 */
+.metric-card-trend.flat { color: hsl(var(--muted-foreground)); }
+.metric-card-spark {
+  position: absolute; left: 0; right: 0; bottom: 0;
+  height: 24px; width: 100%;
+  pointer-events: none;
+}
+.metric-card-spark svg { width: 100%; height: 100%; display: block; }
+/* ===== ChartPanel ===== */
+.chart-panel {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--gray-line));
+  border-radius: var(--radius-md);
+  padding: 16px;
+  margin-bottom: 16px;
+  display: flex; flex-direction: column;
+}
+.chart-panel-full { height: 280px; }
+.chart-panel-grid-cell { height: 220px; }
+.chart-panel-head {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 8px; flex-shrink: 0;
+}
+.chart-panel-title {
+  font-size: var(--font-size-lg); font-weight: var(--font-weight-medium);
+  color: hsl(var(--gray-primary));
+}
+.chart-panel-actions {
+  display: flex; align-items: center; gap: 8px;
+}
+.chart-panel-link {
+  font-size: var(--font-size-base); color: hsl(var(--primary));
+  background: transparent; border: none; cursor: pointer;
+  padding: 4px 8px; border-radius: var(--radius-sm);
+  display: inline-flex; align-items: center; gap: 4px;
+}
+.chart-panel-link:hover { background: hsl(var(--info-bg)); }
+.chart-panel-body {
+  flex: 1; min-height: 0; position: relative;
+}
+.chart-panel-body svg { width: 100%; height: 100%; display: block; }
+.chart-axis-label {
+  font-size: 11px;
+  fill: hsl(var(--muted-foreground));
+}
+.chart-grid-line {
+  stroke: hsl(var(--gray-line));
+  stroke-width: 0.5;
+  stroke-dasharray: 3 3;
+}
+.chart-area-fill { fill: hsl(var(--primary) / 0.08); }
+.chart-line { fill: none; stroke: hsl(var(--primary)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.chart-line-success { stroke: hsl(var(--success)); }
+.chart-line-warning { stroke: hsl(var(--warning)); }
+.chart-line-destructive { stroke: hsl(var(--destructive)); }
+.chart-bar { fill: hsl(var(--primary)); }
+.chart-bar-alt { fill: hsl(var(--primary) / 0.65); }
+.chart-grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+/* ===== Tabs ===== */
+.tabs {
+  border-bottom: 1px solid hsl(var(--gray-line));
+  padding-top: 4px;
+}
+.tabs-list {
+  display: flex; gap: var(--tabs-gap); list-style: none;
+}
+.tab-item {
+  padding: 10px 0; font-size: var(--font-size-lg);
+  color: hsl(var(--gray-secondary-foreground)); cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: color var(--duration-fast), border-color var(--duration-fast);
+  font-weight: var(--font-weight-normal);
+}
+.tab-item:hover { color: hsl(var(--gray-primary)); }
+.tab-item.active {
+  color: hsl(var(--primary));
+  border-bottom-color: hsl(var(--primary));
+  font-weight: var(--font-weight-medium);
+}
+.tab-content { padding: 20px 0; }
+.tab-content.hidden { display: none; }
+/* ===== AlertList ===== */
+.alert-list {
+  display: flex; flex-direction: column;
+}
+.alert-item {
+  display: flex; align-items: flex-start; gap: 12px;
+  min-height: 56px; padding: 12px 16px;
+  border-bottom: 1px solid hsl(var(--gray-line));
+  background: hsl(var(--card));
+  transition: background var(--duration-fast);
+}
+.alert-item:last-child { border-bottom: none; }
+.alert-item:hover { background: hsl(var(--gray-muted)); }
+.alert-dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  flex-shrink: 0; margin-top: 6px;
+}
+.alert-dot.critical { background: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.15); }
+.alert-dot.warning { background: hsl(var(--warning)); box-shadow: 0 0 0 3px hsl(var(--warning) / 0.15); }
+.alert-dot.info { background: hsl(var(--info)); box-shadow: 0 0 0 3px hsl(var(--info) / 0.15); }
+.alert-content { flex: 1; min-width: 0; }
+.alert-head {
+  display: flex; align-items: center; gap: 8px;
+  margin-bottom: 4px;
+}
+.alert-severity {
+  font-size: 11px; font-weight: var(--font-weight-medium);
+  padding: 1px 6px; border-radius: var(--radius-sm);
+  letter-spacing: 0.02em;
+}
+.alert-severity.critical { background: hsl(var(--destructive-bg)); color: hsl(var(--destructive)); }
+.alert-severity.warning { background: hsl(var(--warning-bg)); color: hsl(var(--warning)); }
+.alert-severity.info { background: hsl(var(--info-bg)); color: hsl(var(--info)); }
+.alert-title {
+  font-size: 13px; font-weight: var(--font-weight-medium);
+  color: hsl(var(--gray-primary));
+}
+.alert-time {
+  font-size: var(--font-size-base); color: hsl(var(--muted-foreground));
+  margin-left: auto;
+}
+.alert-desc {
+  font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground));
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.alert-empty {
+  padding: 48px 16px; text-align: center;
+  color: hsl(var(--gray-secondary-foreground));
+  display: flex; flex-direction: column; align-items: center; gap: 12px;
+}
+.alert-empty-icon {
+  width: 48px; height: 48px; border-radius: 50%;
+  background: hsl(var(--success-bg));
+  color: hsl(var(--success));
+  display: flex; align-items: center; justify-content: center;
+}
+/* ===== DataTable ===== */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-base);
+  border: 1px solid hsl(var(--gray-line));
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.data-table thead tr {
+  height: 36px;
+  background: hsl(var(--gray-muted));
+}
+.data-table th {
+  text-align: left;
+  padding: 0 12px;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: hsl(var(--gray-secondary-foreground));
+  border-bottom: 1px solid hsl(var(--gray-line));
+}
+.data-table tbody tr {
+  height: 40px;
+  transition: background var(--duration-fast);
+}
+.data-table tbody tr:hover { background: hsl(var(--gray-muted)); }
+.data-table tbody tr + tr td { border-top: 1px solid hsl(var(--gray-line)); }
+.data-table td {
+  padding: 0 12px;
+  color: hsl(var(--gray-primary));
+  vertical-align: middle;
+}
+.data-table td.numeric { font-variant-numeric: tabular-nums; }
+.data-table td.muted { color: hsl(var(--muted-foreground)); }
+/* ===== Badge ===== */
+.badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 8px; border-radius: var(--radius-sm);
+  font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
+  line-height: 1.5;
+}
+.badge-success { background: hsl(var(--success-bg)); color: hsl(var(--success)); }
+.badge-warning { background: hsl(var(--warning-bg)); color: hsl(var(--warning)); }
+.badge-destructive { background: hsl(var(--destructive-bg)); color: hsl(var(--destructive)); }
+.badge-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+}
+.badge-success .badge-dot { background: hsl(var(--success)); }
+.badge-warning .badge-dot { background: hsl(var(--warning)); }
+.badge-destructive .badge-dot { background: hsl(var(--destructive)); }
+/* ===== Responsive ===== */
+@media (max-width: 1199px) {
+  .metric-row { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 768px) {
+  .metric-row { grid-template-columns: 1fr; }
+  .chart-grid-2 { grid-template-columns: 1fr; }
+}
+</style>
+</head>
+<body>
+<!-- ===== Sidebar ===== -->
+<aside class="sidebar">
+  <div class="sidebar-header">
+    <div class="sidebar-logo" id="sidebarLogoArea">
+      <img src="./_assets/op-ai-gateway-logo.svg" alt="OP AI Gateway" />
+      <img class="collapsed-logo" src="./_assets/op-logo-collapsed.png" alt="OP" />
+      <svg class="expand-logo" viewBox="0 0 1024 1024" fill="currentColor" width="18" height="18"><path d="M151.68 616.96l82.56-82.56c12.8-12.8 12.8-32.64 0-45.44L151.68 406.4c-19.84-19.84-54.4-5.76-54.4 22.4v165.76c-0.64 28.16 33.92 42.88 54.4 22.4zM128.64 288h768c14.08 0 32-14.08 32-32s-17.92-32-32-32h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32zM896.64 736h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32h768c14.08 0 32-14.08 32-32s-17.28-32-32-32zM896.64 480h-480c-14.08 0-32 14.08-32 32s17.92 32 32 32h480c14.08 0 32-14.08 32-32s-17.28-32-32-32z"/></svg>
+    </div>
+    <button class="sidebar-collapse-btn" title="收起侧边栏">
+      <svg viewBox="0 0 1024 1024" fill="currentColor" width="18" height="18"><path d="M874.24 406.4l-82.56 82.56c-12.8 12.8-12.8 32.64 0 45.44l82.56 82.56c19.84 19.84 54.4 5.76 54.4-22.4V428.8c0-28.16-33.92-42.88-54.4-22.4zM128.64 288h768c14.08 0 32-14.08 32-32s-17.92-32-32-32h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32zM896.64 736h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32h768c14.08 0 32-14.08 32-32s-17.28-32-32-32zM128.64 544h480c14.08 0 32-14.08 32-32s-17.92-32-32-32h-480c-14.08 0-32 14.08-32 32s17.92 32 32 32z"/></svg>
+    </button>
+  </div>
+  <!-- sidebar：按 PRD 导航结构，L1 为一级菜单，L2 为二级子菜单。 -->
+  <div class="sidebar-content">
+    <ul class="sidebar-menu">
+      <!-- L1: AI 网关（叶子菜单，当前活跃） -->
+      <li><a class="sidebar-menu-item active" href="#">
+        <span class="item-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+        </span>
+        AI 网关
+      </a></li>
+      <!-- L1: API 网关（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item expanded" href="#" data-toggle="api-gateway">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
+          </span>
+          API 网关
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu show" id="api-gateway">
+          <li><a class="sidebar-menu-item" href="#">实例管理</a></li>
+          <li><a class="sidebar-menu-item" href="#">共享实例管理</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">实例管理</a>
+          <a class="sidebar-menu-item" href="#">共享实例管理</a>
+        </div>
+      </li>
+      <!-- L1: 云原生网关（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item" href="#" data-toggle="cloud-native-gw">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>
+          </span>
+          云原生网关
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu" id="cloud-native-gw">
+          <li><a class="sidebar-menu-item" href="#">实例列表</a></li>
+          <li><a class="sidebar-menu-item" href="#">Nginx Ingress 迁移</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">实例列表</a>
+          <a class="sidebar-menu-item" href="#">Nginx Ingress 迁移</a>
+        </div>
+      </li>
+      <!-- L1: 集群管理（叶子菜单） -->
+      <li><a class="sidebar-menu-item" href="#">
+        <span class="item-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
+        </span>
+        集群管理
+      </a></li>
+      <!-- L1: 级联管理（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item" href="#" data-toggle="cascade-mgmt">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6v12M12 3v18M20 6v12M2 6h4M10 3h4M18 6h4M2 12h4M10 9h4M18 12h4M2 18h4M10 21h4M18 18h4"/></svg>
+          </span>
+          级联管理
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu" id="cascade-mgmt">
+          <li><a class="sidebar-menu-item" href="#">级联网关</a></li>
+          <li><a class="sidebar-menu-item" href="#">级联链路</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">级联网关</a>
+          <a class="sidebar-menu-item" href="#">级联链路</a>
+        </div>
+      </li>
+      <!-- L1: 容灾管理（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item" href="#" data-toggle="disaster-mgmt">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+          </span>
+          容灾管理
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu" id="disaster-mgmt">
+          <li><a class="sidebar-menu-item" href="#">容灾网关实例</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">容灾网关实例</a>
+        </div>
+      </li>
+      <!-- L1: 认证授权（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item" href="#" data-toggle="auth-mgmt">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
+          </span>
+          认证授权
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu" id="auth-mgmt">
+          <li><a class="sidebar-menu-item" href="#">用户管理</a></li>
+          <li><a class="sidebar-menu-item" href="#">角色管理</a></li>
+          <li><a class="sidebar-menu-item" href="#">权限插件</a></li>
+          <li><a class="sidebar-menu-item" href="#">访问凭证</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">用户管理</a>
+          <a class="sidebar-menu-item" href="#">角色管理</a>
+          <a class="sidebar-menu-item" href="#">权限插件</a>
+          <a class="sidebar-menu-item" href="#">访问凭证</a>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div class="sidebar-divider"></div>
+  <div class="sidebar-footer">
+    <div class="sidebar-avatar">A</div>
+    <span class="sidebar-username">admin</span>
+    <button class="sidebar-more">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
+    </button>
+  </div>
+</aside>
+<!-- ===== Main Content ===== -->
+<main class="main-content">
+  <div class="page-container">
+    <div class="card">
+      <!-- ============ PageHeader — 面包屑 + 时间范围 + 刷新 ============ -->
+      <div class="page-header">
+        <div class="page-header-left">
+          <nav class="breadcrumb">
+            <a href="#">实例管理</a>
+            <span class="separator"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></span>
+            <a href="#">ai-gateway-prod</a>
+            <span class="separator"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></span>
+            <span class="current">监控</span>
+          </nav>
+        </div>
+        <div class="page-header-right">
+          <!-- TimeRangeSelector -->
+          <div class="time-range-selector" role="tablist" aria-label="时间范围">
+            <button class="time-range-item" onclick="selectTimeRange(this)">1h</button>
+            <button class="time-range-item" onclick="selectTimeRange(this)">6h</button>
+            <button class="time-range-item active" onclick="selectTimeRange(this)">24h</button>
+            <button class="time-range-item" onclick="selectTimeRange(this)">7d</button>
+            <button class="time-range-item" onclick="selectTimeRange(this)">30d</button>
+          </div>
+          <button class="btn btn-outline" onclick="refresh()">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>
+            刷新
+          </button>
+        </div>
+      </div>
+      <!-- ============ MetricCard Row — 4 卡横排 ============ -->
+      <div class="metric-row">
+        <!-- 请求总量 -->
+        <div class="metric-card">
+          <div class="metric-card-head">
+            <span class="metric-card-title">请求总量</span>
+            <svg class="metric-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
+          </div>
+          <div class="metric-card-body">
+            <span class="metric-card-value">12,583</span>
+            <span class="metric-card-trend up">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+              23.5%
+            </span>
+          </div>
+          <div class="metric-card-spark">
+            <svg viewBox="0 0 100 24" preserveAspectRatio="none">
+              <polyline class="chart-line" points="0,18 8,16 16,17 24,14 32,15 40,11 48,13 56,9 64,10 72,7 80,8 88,5 96,4 100,3"/>
+            </svg>
+          </div>
+        </div>
+        <!-- 成功率 -->
+        <div class="metric-card">
+          <div class="metric-card-head">
+            <span class="metric-card-title">成功率</span>
+            <svg class="metric-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
+          </div>
+          <div class="metric-card-body">
+            <span class="metric-card-value">99.2%</span>
+            <span class="metric-card-trend up">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+              0.3%
+            </span>
+          </div>
+          <div class="metric-card-spark">
+            <svg viewBox="0 0 100 24" preserveAspectRatio="none">
+              <polyline class="chart-line chart-line-success" points="0,8 8,9 16,7 24,8 32,6 40,7 48,5 56,6 64,4 72,5 80,3 88,4 96,3 100,2"/>
+            </svg>
+          </div>
+        </div>
+        <!-- 平均延迟 -->
+        <div class="metric-card">
+          <div class="metric-card-head">
+            <span class="metric-card-title">平均延迟</span>
+            <svg class="metric-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+          </div>
+          <div class="metric-card-body">
+            <span class="metric-card-value">128<span style="font-size:14px;color:hsl(var(--muted-foreground));font-weight:var(--font-weight-normal);margin-left:2px;">ms</span></span>
+            <span class="metric-card-trend down-good">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
+              12.1%
+            </span>
+          </div>
+          <div class="metric-card-spark">
+            <svg viewBox="0 0 100 24" preserveAspectRatio="none">
+              <polyline class="chart-line chart-line-success" points="0,5 8,7 16,6 24,9 32,8 40,11 48,10 56,13 64,12 72,15 80,14 88,17 96,16 100,18"/>
+            </svg>
+          </div>
+        </div>
+        <!-- Token 消耗 -->
+        <div class="metric-card">
+          <div class="metric-card-head">
+            <span class="metric-card-title">Token 消耗</span>
+            <svg class="metric-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 12h8M12 8v8"/></svg>
+          </div>
+          <div class="metric-card-body">
+            <span class="metric-card-value">1.2<span style="font-size:14px;color:hsl(var(--muted-foreground));font-weight:var(--font-weight-normal);margin-left:2px;">M</span></span>
+            <span class="metric-card-trend up">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+              8.7%
+            </span>
+          </div>
+          <div class="metric-card-spark">
+            <svg viewBox="0 0 100 24" preserveAspectRatio="none">
+              <polyline class="chart-line" points="0,16 8,15 16,17 24,13 32,14 40,12 48,10 56,11 64,8 72,9 80,6 88,7 96,5 100,4"/>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <!-- ============ ChartPanel — 全宽请求趋势 ============ -->
+      <div class="chart-panel chart-panel-full">
+        <div class="chart-panel-head">
+          <span class="chart-panel-title">请求趋势</span>
+          <div class="chart-panel-actions">
+            <button class="chart-panel-link">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
+              导出
+            </button>
+          </div>
+        </div>
+        <div class="chart-panel-body">
+          <!-- 主请求趋势折线图：横向时间 00:00~23:00，纵向请求数 -->
+          <svg viewBox="0 0 800 220" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- 网格线（横向 5 条） -->
+            <line class="chart-grid-line" x1="40" y1="20" x2="780" y2="20"/>
+            <line class="chart-grid-line" x1="40" y1="60" x2="780" y2="60"/>
+            <line class="chart-grid-line" x1="40" y1="100" x2="780" y2="100"/>
+            <line class="chart-grid-line" x1="40" y1="140" x2="780" y2="140"/>
+            <line class="chart-grid-line" x1="40" y1="180" x2="780" y2="180"/>
+            <!-- Y 轴标签 -->
+            <text class="chart-axis-label" x="32" y="24" text-anchor="end">800</text>
+            <text class="chart-axis-label" x="32" y="64" text-anchor="end">600</text>
+            <text class="chart-axis-label" x="32" y="104" text-anchor="end">400</text>
+            <text class="chart-axis-label" x="32" y="144" text-anchor="end">200</text>
+            <text class="chart-axis-label" x="32" y="184" text-anchor="end">0</text>
+            <!-- X 轴标签（每 4 小时） -->
+            <text class="chart-axis-label" x="40" y="200" text-anchor="middle">00:00</text>
+            <text class="chart-axis-label" x="163" y="200" text-anchor="middle">04:00</text>
+            <text class="chart-axis-label" x="287" y="200" text-anchor="middle">08:00</text>
+            <text class="chart-axis-label" x="410" y="200" text-anchor="middle">12:00</text>
+            <text class="chart-axis-label" x="533" y="200" text-anchor="middle">16:00</text>
+            <text class="chart-axis-label" x="657" y="200" text-anchor="middle">20:00</text>
+            <text class="chart-axis-label" x="780" y="200" text-anchor="middle">23:00</text>
+            <!-- 面积填充 -->
+            <path class="chart-area-fill" d="M40,170 L70,165 L100,160 L130,158 L160,150 L190,140 L220,130 L250,115 L280,105 L310,90 L340,80 L370,70 L400,55 L430,60 L460,75 L490,85 L520,95 L550,80 L580,70 L610,60 L640,55 L670,50 L700,55 L730,65 L760,80 L780,90 L780,180 L40,180 Z"/>
+            <!-- 折线 -->
+            <polyline class="chart-line" points="40,170 70,165 100,160 130,158 160,150 190,140 220,130 250,115 280,105 310,90 340,80 370,70 400,55 430,60 460,75 490,85 520,95 550,80 580,70 610,60 640,55 670,50 700,55 730,65 760,80 780,90"/>
+            <!-- 数据点（高亮关键点） -->
+            <circle cx="400" cy="55" r="3.5" fill="hsl(var(--primary))"/>
+            <circle cx="670" cy="50" r="3.5" fill="hsl(var(--primary))"/>
+          </svg>
+        </div>
+      </div>
+      <!-- ============ Tabs ============ -->
+      <div class="tabs">
+        <ul class="tabs-list">
+          <li class="tab-item active" onclick="switchTab(0)">性能指标</li>
+          <li class="tab-item" onclick="switchTab(1)">告警记录</li>
+          <li class="tab-item" onclick="switchTab(2)">调用明细</li>
+        </ul>
+      </div>
+      <!-- ===== Tab 0: 性能指标（2x2 ChartPanel Grid） ===== -->
+      <div class="tab-content" id="tab-0">
+        <div class="chart-grid-2">
+          <!-- 延迟分布（柱状图） -->
+          <div class="chart-panel chart-panel-grid-cell" style="margin-bottom:0;">
+            <div class="chart-panel-head">
+              <span class="chart-panel-title">延迟分布</span>
+              <div class="chart-panel-actions">
+                <button class="chart-panel-link">查看详情</button>
+              </div>
+            </div>
+            <div class="chart-panel-body">
+              <svg viewBox="0 0 600 180" preserveAspectRatio="none">
+                <!-- 网格线 -->
+                <line class="chart-grid-line" x1="40" y1="20" x2="580" y2="20"/>
+                <line class="chart-grid-line" x1="40" y1="60" x2="580" y2="60"/>
+                <line class="chart-grid-line" x1="40" y1="100" x2="580" y2="100"/>
+                <line class="chart-grid-line" x1="40" y1="140" x2="580" y2="140"/>
+                <text class="chart-axis-label" x="32" y="24" text-anchor="end">2k</text>
+                <text class="chart-axis-label" x="32" y="64" text-anchor="end">1.5k</text>
+                <text class="chart-axis-label" x="32" y="104" text-anchor="end">1k</text>
+                <text class="chart-axis-label" x="32" y="144" text-anchor="end">500</text>
+                <!-- 柱体 -->
+                <rect class="chart-bar" x="60"  y="120" width="42" height="20"/>
+                <rect class="chart-bar" x="118" y="80"  width="42" height="60"/>
+                <rect class="chart-bar" x="176" y="40"  width="42" height="100"/>
+                <rect class="chart-bar" x="234" y="55"  width="42" height="85"/>
+                <rect class="chart-bar" x="292" y="75"  width="42" height="65"/>
+                <rect class="chart-bar-alt" x="350" y="100" width="42" height="40"/>
+                <rect class="chart-bar-alt" x="408" y="115" width="42" height="25"/>
+                <rect class="chart-bar-alt" x="466" y="125" width="42" height="15"/>
+                <rect class="chart-bar-alt" x="524" y="132" width="42" height="8"/>
+                <!-- X 轴标签 -->
+                <text class="chart-axis-label" x="81"  y="160" text-anchor="middle">0-50</text>
+                <text class="chart-axis-label" x="139" y="160" text-anchor="middle">50-100</text>
+                <text class="chart-axis-label" x="197" y="160" text-anchor="middle">100-200</text>
+                <text class="chart-axis-label" x="255" y="160" text-anchor="middle">200-300</text>
+                <text class="chart-axis-label" x="313" y="160" text-anchor="middle">300-500</text>
+                <text class="chart-axis-label" x="371" y="160" text-anchor="middle">500-800</text>
+                <text class="chart-axis-label" x="429" y="160" text-anchor="middle">800-1.2k</text>
+                <text class="chart-axis-label" x="487" y="160" text-anchor="middle">1.2k-2k</text>
+                <text class="chart-axis-label" x="545" y="160" text-anchor="middle">2k+</text>
+              </svg>
+            </div>
+          </div>
+          <!-- 吞吐量（折线图） -->
+          <div class="chart-panel chart-panel-grid-cell" style="margin-bottom:0;">
+            <div class="chart-panel-head">
+              <span class="chart-panel-title">吞吐量 (QPS)</span>
+              <div class="chart-panel-actions">
+                <button class="chart-panel-link">查看详情</button>
+              </div>
+            </div>
+            <div class="chart-panel-body">
+              <svg viewBox="0 0 600 180" preserveAspectRatio="none">
+                <line class="chart-grid-line" x1="40" y1="20" x2="580" y2="20"/>
+                <line class="chart-grid-line" x1="40" y1="60" x2="580" y2="60"/>
+                <line class="chart-grid-line" x1="40" y1="100" x2="580" y2="100"/>
+                <line class="chart-grid-line" x1="40" y1="140" x2="580" y2="140"/>
+                <text class="chart-axis-label" x="32" y="24" text-anchor="end">200</text>
+                <text class="chart-axis-label" x="32" y="64" text-anchor="end">150</text>
+                <text class="chart-axis-label" x="32" y="104" text-anchor="end">100</text>
+                <text class="chart-axis-label" x="32" y="144" text-anchor="end">50</text>
+                <polyline class="chart-line" points="40,130 80,125 120,118 160,112 200,95 240,85 280,72 320,60 360,55 400,68 440,80 480,72 520,60 560,52 580,48"/>
+                <text class="chart-axis-label" x="40"  y="160" text-anchor="middle">00:00</text>
+                <text class="chart-axis-label" x="175" y="160" text-anchor="middle">06:00</text>
+                <text class="chart-axis-label" x="310" y="160" text-anchor="middle">12:00</text>
+                <text class="chart-axis-label" x="445" y="160" text-anchor="middle">18:00</text>
+                <text class="chart-axis-label" x="580" y="160" text-anchor="middle">23:00</text>
+              </svg>
+            </div>
+          </div>
+          <!-- 错误率（面积图） -->
+          <div class="chart-panel chart-panel-grid-cell" style="margin-bottom:0;">
+            <div class="chart-panel-head">
+              <span class="chart-panel-title">错误率</span>
+              <div class="chart-panel-actions">
+                <button class="chart-panel-link">查看详情</button>
+              </div>
+            </div>
+            <div class="chart-panel-body">
+              <svg viewBox="0 0 600 180" preserveAspectRatio="none">
+                <line class="chart-grid-line" x1="40" y1="20" x2="580" y2="20"/>
+                <line class="chart-grid-line" x1="40" y1="60" x2="580" y2="60"/>
+                <line class="chart-grid-line" x1="40" y1="100" x2="580" y2="100"/>
+                <line class="chart-grid-line" x1="40" y1="140" x2="580" y2="140"/>
+                <text class="chart-axis-label" x="32" y="24" text-anchor="end">10%</text>
+                <text class="chart-axis-label" x="32" y="64" text-anchor="end">7.5%</text>
+                <text class="chart-axis-label" x="32" y="104" text-anchor="end">5%</text>
+                <text class="chart-axis-label" x="32" y="144" text-anchor="end">2.5%</text>
+                <!-- 阈值线 5% -->
+                <line x1="40" y1="100" x2="580" y2="100" stroke="hsl(var(--destructive))" stroke-width="0.8" stroke-dasharray="4 4" opacity="0.6"/>
+                <!-- 面积填充（红色） -->
+                <path d="M40,150 L80,148 L120,145 L160,142 L200,140 L240,135 L280,128 L320,115 L360,90 L400,95 L440,110 L480,125 L520,135 L560,142 L580,145 L580,160 L40,160 Z" fill="hsl(var(--destructive) / 0.1)"/>
+                <polyline class="chart-line chart-line-destructive" points="40,150 80,148 120,145 160,142 200,140 240,135 280,128 320,115 360,90 400,95 440,110 480,125 520,135 560,142 580,145"/>
+                <!-- 异常点（错误率超阈值） -->
+                <circle cx="360" cy="90" r="4" fill="hsl(var(--destructive))"/>
+                <text class="chart-axis-label" x="40"  y="160" text-anchor="middle">00:00</text>
+                <text class="chart-axis-label" x="175" y="160" text-anchor="middle">06:00</text>
+                <text class="chart-axis-label" x="310" y="160" text-anchor="middle">12:00</text>
+                <text class="chart-axis-label" x="445" y="160" text-anchor="middle">18:00</text>
+                <text class="chart-axis-label" x="580" y="160" text-anchor="middle">23:00</text>
+              </svg>
+            </div>
+          </div>
+          <!-- Token 消耗趋势（折线图） -->
+          <div class="chart-panel chart-panel-grid-cell" style="margin-bottom:0;">
+            <div class="chart-panel-head">
+              <span class="chart-panel-title">Token 消耗趋势</span>
+              <div class="chart-panel-actions">
+                <button class="chart-panel-link">查看详情</button>
+              </div>
+            </div>
+            <div class="chart-panel-body">
+              <svg viewBox="0 0 600 180" preserveAspectRatio="none">
+                <line class="chart-grid-line" x1="40" y1="20" x2="580" y2="20"/>
+                <line class="chart-grid-line" x1="40" y1="60" x2="580" y2="60"/>
+                <line class="chart-grid-line" x1="40" y1="100" x2="580" y2="100"/>
+                <line class="chart-grid-line" x1="40" y1="140" x2="580" y2="140"/>
+                <text class="chart-axis-label" x="32" y="24" text-anchor="end">100k</text>
+                <text class="chart-axis-label" x="32" y="64" text-anchor="end">75k</text>
+                <text class="chart-axis-label" x="32" y="104" text-anchor="end">50k</text>
+                <text class="chart-axis-label" x="32" y="144" text-anchor="end">25k</text>
+                <!-- 输入 Token -->
+                <polyline class="chart-line" points="40,140 80,135 120,128 160,120 200,108 240,98 280,88 320,75 360,65 400,72 440,80 480,68 520,55 560,45 580,42"/>
+                <!-- 输出 Token (warning 色) -->
+                <polyline class="chart-line chart-line-warning" points="40,150 80,148 120,142 160,135 200,128 240,120 280,112 320,100 360,92 400,98 440,105 480,95 520,85 560,75 580,72"/>
+                <text class="chart-axis-label" x="40"  y="160" text-anchor="middle">00:00</text>
+                <text class="chart-axis-label" x="175" y="160" text-anchor="middle">06:00</text>
+                <text class="chart-axis-label" x="310" y="160" text-anchor="middle">12:00</text>
+                <text class="chart-axis-label" x="445" y="160" text-anchor="middle">18:00</text>
+                <text class="chart-axis-label" x="580" y="160" text-anchor="middle">23:00</text>
+                <!-- 图例 -->
+                <g transform="translate(420,15)">
+                  <line x1="0" y1="6" x2="14" y2="6" stroke="hsl(var(--primary))" stroke-width="2"/>
+                  <text class="chart-axis-label" x="18" y="9">输入</text>
+                  <line x1="60" y1="6" x2="74" y2="6" stroke="hsl(var(--warning))" stroke-width="2"/>
+                  <text class="chart-axis-label" x="78" y="9">输出</text>
+                </g>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- ===== Tab 1: 告警记录（AlertList） ===== -->
+      <div class="tab-content hidden" id="tab-1">
+        <div class="alert-list" style="border:1px solid hsl(var(--gray-line)); border-radius: var(--radius-md); overflow:hidden;">
+          <div class="alert-item">
+            <span class="alert-dot critical"></span>
+            <div class="alert-content">
+              <div class="alert-head">
+                <span class="alert-severity critical">严重</span>
+                <span class="alert-title">错误率超过阈值 (5%)</span>
+                <span class="alert-time">2026-05-27 14:23</span>
+              </div>
+              <div class="alert-desc">错误率达到 5.2%, 超过告警阈值 5%。受影响模型: gpt-4o, claude-4。建议检查上游服务连通性与限流配置。</div>
+            </div>
+          </div>
+          <div class="alert-item">
+            <span class="alert-dot warning"></span>
+            <div class="alert-content">
+              <div class="alert-head">
+                <span class="alert-severity warning">警告</span>
+                <span class="alert-title">平均延迟升高</span>
+                <span class="alert-time">2026-05-27 11:05</span>
+              </div>
+              <div class="alert-desc">P99 延迟达到 2.3s, 超过预期 2s。建议关注模型 deepseek-v3 的响应时间趋势。</div>
+            </div>
+          </div>
+          <div class="alert-item">
+            <span class="alert-dot info"></span>
+            <div class="alert-content">
+              <div class="alert-head">
+                <span class="alert-severity info">提示</span>
+                <span class="alert-title">Token 消耗接近配额</span>
+                <span class="alert-time">2026-05-27 09:30</span>
+              </div>
+              <div class="alert-desc">本月 Token 使用已达配额 85%。建议提前评估是否需要扩容或调整限速策略。</div>
+            </div>
+          </div>
+          <div class="alert-item">
+            <span class="alert-dot info"></span>
+            <div class="alert-content">
+              <div class="alert-head">
+                <span class="alert-severity info">提示</span>
+                <span class="alert-title">新增消费者接入</span>
+                <span class="alert-time">2026-05-27 08:12</span>
+              </div>
+              <div class="alert-desc">consumer-D 已成功接入并完成首次调用，当前实例消费者总数: 12。</div>
+            </div>
+          </div>
+        </div>
+        <!-- 空态参考（注释保留） -->
+        <!--
+        <div class="alert-empty">
+          <div class="alert-empty-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
+          </div>
+          <div>暂无告警，系统运行正常</div>
+        </div>
+        -->
+      </div>
+      <!-- ===== Tab 2: 调用明细（DataTable） ===== -->
+      <div class="tab-content hidden" id="tab-2">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th style="width:180px;">时间</th>
+              <th style="width:140px;">模型</th>
+              <th style="width:140px;">消费者</th>
+              <th style="width:100px;">状态</th>
+              <th style="width:120px;">延迟</th>
+              <th>Token</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="muted numeric">2026-05-27 15:42:18</td>
+              <td>gpt-4o</td>
+              <td>consumer-A</td>
+              <td><span class="badge badge-success"><span class="badge-dot"></span>成功</span></td>
+              <td class="numeric">856 ms</td>
+              <td class="numeric">1,234</td>
+            </tr>
+            <tr>
+              <td class="muted numeric">2026-05-27 15:42:15</td>
+              <td>deepseek-v3</td>
+              <td>consumer-B</td>
+              <td><span class="badge badge-success"><span class="badge-dot"></span>成功</span></td>
+              <td class="numeric">342 ms</td>
+              <td class="numeric">567</td>
+            </tr>
+            <tr>
+              <td class="muted numeric">2026-05-27 15:42:10</td>
+              <td>gpt-4o</td>
+              <td>consumer-A</td>
+              <td><span class="badge badge-destructive"><span class="badge-dot"></span>失败</span></td>
+              <td class="numeric">60,000 ms</td>
+              <td class="numeric muted">0</td>
+            </tr>
+            <tr>
+              <td class="muted numeric">2026-05-27 15:42:05</td>
+              <td>claude-4</td>
+              <td>consumer-C</td>
+              <td><span class="badge badge-success"><span class="badge-dot"></span>成功</span></td>
+              <td class="numeric">1,205 ms</td>
+              <td class="numeric">2,341</td>
+            </tr>
+            <tr>
+              <td class="muted numeric">2026-05-27 15:41:58</td>
+              <td>gpt-4o</td>
+              <td>consumer-A</td>
+              <td><span class="badge badge-success"><span class="badge-dot"></span>成功</span></td>
+              <td class="numeric">923 ms</td>
+              <td class="numeric">1,876</td>
+            </tr>
+            <tr>
+              <td class="muted numeric">2026-05-27 15:41:42</td>
+              <td>deepseek-v3</td>
+              <td>consumer-B</td>
+              <td><span class="badge badge-success"><span class="badge-dot"></span>成功</span></td>
+              <td class="numeric">298 ms</td>
+              <td class="numeric">412</td>
+            </tr>
+            <tr>
+              <td class="muted numeric">2026-05-27 15:41:30</td>
+              <td>claude-4</td>
+              <td>consumer-C</td>
+              <td><span class="badge badge-success"><span class="badge-dot"></span>成功</span></td>
+              <td class="numeric">1,402 ms</td>
+              <td class="numeric">3,108</td>
+            </tr>
+            <tr>
+              <td class="muted numeric">2026-05-27 15:41:18</td>
+              <td>gpt-4o</td>
+              <td>consumer-D</td>
+              <td><span class="badge badge-success"><span class="badge-dot"></span>成功</span></td>
+              <td class="numeric">762 ms</td>
+              <td class="numeric">1,022</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div><!-- /card -->
+  </div><!-- /page-container -->
+</main>
+<script>
+// ===== Sidebar =====
+const sidebar = document.querySelector('.sidebar');
+document.querySelector('.sidebar-collapse-btn').addEventListener('click', function() {
+  sidebar.classList.toggle('collapsed');
+});
+// Sidebar expand via logo click (collapsed state)
+document.getElementById('sidebarLogoArea').addEventListener('click', function() {
+  if (sidebar.classList.contains('collapsed')) {
+    sidebar.classList.remove('collapsed');
+  }
+});
+// Sidebar sub-menu toggle
+document.querySelectorAll('.sidebar-menu-item[data-toggle]').forEach(item => {
+  item.addEventListener('click', function(e) {
+    e.preventDefault();
+    this.classList.toggle('expanded');
+    const targetId = this.getAttribute('data-toggle');
+    const target = document.getElementById(targetId);
+    if (target) target.classList.toggle('show');
+  });
+});
+// ===== TimeRangeSelector =====
+function selectTimeRange(el) {
+  document.querySelectorAll('.time-range-item').forEach(t => t.classList.remove('active'));
+  el.classList.add('active');
+  // 实际场景下这里会触发图表数据重拉
+}
+// ===== Refresh =====
+function refresh() {
+  // 轻量旋转动效
+  const btn = event.currentTarget;
+  const icon = btn.querySelector('svg');
+  if (icon) {
+    icon.style.transition = 'transform 0.6s ease';
+    icon.style.transform = 'rotate(360deg)';
+    setTimeout(() => {
+      icon.style.transition = 'none';
+      icon.style.transform = 'rotate(0deg)';
+    }, 600);
+  }
+}
+// ===== Tabs =====
+function switchTab(index) {
+  document.querySelectorAll('.tab-item').forEach((t, i) => {
+    t.classList.toggle('active', i === index);
+  });
+  document.querySelectorAll('.tab-content').forEach((c, i) => {
+    c.classList.toggle('hidden', i !== index);
+  });
+}
+</script>
+</body>
+</html>