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-config.html ADDED Viewed

@@ -0,0 +1,993 @@
+<!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>
+<!--
+  ★ 配置详情页标准参考范例（Config Detail Page Reference）
+  ─────────────────────────────────────────────────────────────
+  用途：AI 生成配置详情页时的基础参考，展示 YAML/JSON 配置展示、版本历史与对比
+  ─────────────────────────────────────────────────────────────
+  布局：TWO_COL（Sidebar + ContentCard 单例容器）
+  Sidebar：完整 L2 框架（折叠/展开 240px↔68px）
+  内容区模式：模式B + 模式C 组合（Card + Tabs）
+  子类型：配置详情页
+  ─────────────────────────────────────────────────────────────
+  组件清单：
+    • PageHeader — 面包屑模式 + 操作按钮组
+    • InfoCard — 顶部摘要（嵌入模式B）
+    • Tabs — 当前配置/版本历史/基本信息
+    • CodeBlock — YAML 语法高亮 + 行号 + 复制按钮
+    • VersionHistory — 时间线 + ConfigDiff 双栏对比
+    • DescriptionList — 键值对列表，3列布局
+    • Badge — 状态展示
+    • DropdownMenu — “更多”操作
+  ─────────────────────────────────────────────────────────────
+  规范来源：pages/detail-page/SKILL.md v7.8.4
+  Tokens 版本：v7.8.4（v7.6 ContentCard 表面规则 + v7.8.4 字体族变量）
+  表面边界：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%;
+  --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%;
+  --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: 221 83% 53%;
+  --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-group: 216 2% 45%;
+  --sidebar-item: 220 9% 7%;
+  --sidebar-item-muted: 216 4% 26%;
+  --sidebar-border: 210 9% 91%;
+  --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-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;
+}
+.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;
+}
+.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);
+  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)); font-weight: var(--font-weight-medium); }
+.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; }
+/* ===== InfoCard — 嵌入模式B（无分割线） ===== */
+.info-card {
+  padding: 16px 0;
+  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
+}
+.info-card-field { display: flex; align-items: center; gap: 6px; }
+.info-card-field-label { font-size: var(--font-size-base); color: hsl(var(--muted-foreground)); }
+.info-card-field-value { font-size: var(--font-size-base); color: hsl(var(--gray-primary)); font-weight: var(--font-weight-medium); }
+/* ===== 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; display: none; }
+.tab-content.active { display: block; }
+/* ===== CodeBlock ===== */
+.code-block {
+  position: relative;
+  background: hsl(var(--gray-muted));
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.code-block-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 16px; font-size: var(--font-size-base);
+  color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--gray-line));
+}
+.code-block-copy {
+  position: absolute; top: 8px; right: 12px;
+  width: 24px; height: 24px; border: none; background: transparent;
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  border-radius: var(--radius-sm); color: hsl(var(--muted-foreground));
+  opacity: 0; transition: opacity var(--duration-fast);
+}
+.code-block:hover .code-block-copy { opacity: 1; }
+.code-block-copy:hover { background: hsl(var(--gray-line)); color: hsl(var(--gray-primary)); }
+.code-block-body { display: flex; padding: 16px 0; overflow-x: auto; }
+.code-line-numbers {
+  width: 40px; flex-shrink: 0; text-align: right; padding-right: 12px;
+  border-right: 1px solid hsl(var(--gray-line));
+  font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
+  color: hsl(var(--gray-disabled)); user-select: none;
+}
+.code-content {
+  flex: 1; padding-left: 16px; padding-right: 16px;
+  font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
+  white-space: pre; color: hsl(var(--gray-primary));
+}
+.code-content .kw { color: hsl(218 80% 50%); } /* keyword blue */
+.code-content .str { color: hsl(142 60% 35%); } /* string green */
+.code-content .cmt { color: hsl(var(--muted-foreground)); } /* comment gray */
+.code-content .num { color: hsl(30 80% 45%); } /* number orange */
+/* ===== VersionHistory ===== */
+.version-history { display: flex; gap: 24px; }
+.version-timeline { width: 320px; flex-shrink: 0; }
+.version-item { display: flex; gap: 12px; position: relative; padding-bottom: 20px; }
+.version-item:last-child { padding-bottom: 0; }
+.version-item::before {
+  content: ''; position: absolute; left: 3.5px; top: 16px; bottom: 0;
+  width: 1px; background: hsl(var(--gray-line));
+}
+.version-item:last-child::before { display: none; }
+.version-dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: hsl(var(--gray-disabled)); flex-shrink: 0; margin-top: 5px;
+}
+.version-item.current .version-dot { background: hsl(var(--primary)); }
+.version-info { flex: 1; min-width: 0; }
+.version-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
+.version-number { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: hsl(var(--gray-primary)); }
+.version-tag {
+  font-size: 10px; padding: 1px 6px; border-radius: var(--radius-sm);
+  background: hsl(var(--info-bg)); color: hsl(var(--primary)); font-weight: var(--font-weight-medium);
+}
+.version-meta { font-size: var(--font-size-base); color: hsl(var(--muted-foreground)); margin-bottom: 2px; }
+.version-msg { font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground)); }
+.version-actions { margin-top: 4px; }
+.version-actions .btn { height: 24px; padding: 0 8px; font-size: 11px; opacity: 0; transition: opacity var(--duration-fast); }
+.version-item:hover .version-actions .btn { opacity: 1; }
+/* ===== ConfigDiff ===== */
+.config-diff { flex: 1; min-width: 0; border: 1px solid hsl(var(--gray-line)); border-radius: var(--radius-md); overflow: hidden; }
+.config-diff-header {
+  height: 36px; display: flex; align-items: center;
+  background: hsl(var(--gray-muted)); padding: 0 12px;
+  font-size: var(--font-size-base); color: hsl(var(--muted-foreground));
+  border-bottom: 1px solid hsl(var(--gray-line));
+}
+.config-diff-body { display: flex; }
+.config-diff-panel { flex: 1; min-width: 0; }
+.config-diff-panel + .config-diff-panel { border-left: 1px solid hsl(var(--gray-line)); }
+.config-diff-panel-header {
+  height: 28px; display: flex; align-items: center;
+  padding: 0 12px; font-size: 11px; font-weight: var(--font-weight-medium);
+  color: hsl(var(--muted-foreground)); background: hsl(var(--gray-muted));
+  border-bottom: 1px solid hsl(var(--gray-line));
+}
+.diff-line {
+  padding: 2px 12px; font-family: var(--font-mono);
+  font-size: 12px; line-height: 1.6; white-space: pre;
+}
+.diff-line.added { background: hsl(152 82% 96%); }
+.diff-line.removed { background: hsl(0 72% 96%); }
+.diff-line.context { background: transparent; color: hsl(var(--muted-foreground)); }
+.config-diff-footer {
+  height: 28px; display: flex; align-items: center; gap: 12px;
+  padding: 0 12px; font-size: 11px; color: hsl(var(--muted-foreground));
+  border-top: 1px solid hsl(var(--gray-line)); background: hsl(var(--gray-muted));
+}
+.diff-stat-add { color: hsl(var(--success)); }
+.diff-stat-del { color: hsl(var(--destructive)); }
+/* ===== DescriptionList ===== */
+.description-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
+.description-item { display: flex; align-items: center; height: 36px; padding: 8px 0; gap: 12px; }
+.description-label {
+  min-width: 80px; max-width: 140px;
+  font-size: var(--font-size-base); color: hsl(var(--muted-foreground));
+  font-weight: var(--font-weight-normal); flex-shrink: 0;
+}
+.description-value {
+  font-size: var(--font-size-base); color: hsl(var(--gray-primary));
+  font-weight: var(--font-weight-normal);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  display: flex; align-items: center; gap: 4px;
+}
+.description-value.copyable { cursor: pointer; }
+.description-value.copyable .copy-icon {
+  width: 16px; height: 16px; color: hsl(var(--muted-foreground));
+  opacity: 0; transition: opacity var(--duration-fast); flex-shrink: 0;
+}
+.description-item:hover .description-value.copyable .copy-icon { opacity: 1; }
+.description-value.link { color: hsl(var(--primary)); cursor: pointer; }
+.description-value.link:hover { text-decoration: underline; }
+/* ===== 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-dot { width: 6px; height: 6px; border-radius: 50%; }
+.badge-success .badge-dot { background: hsl(var(--success)); }
+/* ===== DropdownMenu ===== */
+.dropdown { position: relative; display: inline-block; }
+.dropdown-menu {
+  display: none; position: absolute; top: calc(100% + 4px); right: 0;
+  min-width: 140px; padding: 4px;
+  background: hsl(var(--card)); border: 1px solid hsl(var(--gray-line));
+  border-radius: var(--radius-md);
+  box-shadow: 0 6px 24px rgba(0,0,0,0.1); z-index: 50;
+}
+.dropdown.open .dropdown-menu { display: block; }
+.dropdown-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px; border-radius: var(--radius-sm);
+  font-size: var(--font-size-base); color: hsl(var(--gray-primary));
+  cursor: pointer; transition: background var(--duration-fast);
+}
+.dropdown-item:hover { background: hsl(var(--gray-muted)); }
+.dropdown-item.danger { color: hsl(var(--destructive)); }
+.dropdown-item.danger:hover { background: hsl(var(--destructive-bg)); }
+/* ===== Responsive ===== */
+@media (max-width: 1199px) {
+  .description-list { grid-template-columns: repeat(2, 1fr); }
+  .version-history { flex-direction: column; }
+  .version-timeline { width: 100%; }
+}
+@media (max-width: 768px) {
+  .description-list { 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="#">规则列表</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">default-route</span>
+          </nav>
+        </div>
+        <div class="page-header-right">
+          <button class="btn btn-primary">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+            编辑
+          </button>
+          <button class="btn btn-outline">回滚</button>
+          <div class="dropdown" id="moreDropdown">
+            <button class="btn btn-outline btn-icon" onclick="toggleDropdown()">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+            </button>
+            <div class="dropdown-menu">
+              <div class="dropdown-item">复制规则</div>
+              <div class="dropdown-item">导出 YAML</div>
+              <div class="dropdown-item danger">删除规则</div>
+            </div>
+          </div>
+          <button class="btn btn-ghost btn-icon" title="关闭">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+          </button>
+        </div>
+      </div>
+      <!-- InfoCard — 嵌入模式B，仅 padding 控制间距 -->
+      <div class="info-card">
+        <div class="info-card-field">
+          <span class="info-card-field-label">规则名称:</span>
+          <span class="info-card-field-value">default-route</span>
+        </div>
+        <div class="info-card-field">
+          <span class="info-card-field-label">状态:</span>
+          <span class="badge badge-success"><span class="badge-dot"></span>已生效</span>
+        </div>
+        <div class="info-card-field">
+          <span class="info-card-field-label">当前版本:</span>
+          <span class="info-card-field-value">v3</span>
+        </div>
+        <div class="info-card-field">
+          <span class="info-card-field-label">最后修改:</span>
+          <span class="info-card-field-value">2026-05-25 14:30</span>
+        </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: 当前配置 — CodeBlock -->
+      <div class="tab-content active" id="tab-0">
+        <div class="code-block">
+          <button class="code-block-copy" title="复制">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+          </button>
+          <div class="code-block-body">
+            <div class="code-line-numbers">1
+2
+3
+4
+5
+6
+7
+8
+9
+10
+11
+12
+13
+14
+15
+16
+17
+18
+19
+20
+21
+22</div>
+            <div class="code-content"><span class="kw">apiVersion</span>: networking.k8s.io/v1
+<span class="kw">kind</span>: HTTPRoute
+<span class="kw">metadata</span>:
+  <span class="kw">name</span>: <span class="str">default-route</span>
+  <span class="kw">namespace</span>: <span class="str">ai-gateway</span>
+<span class="kw">spec</span>:
+  <span class="kw">parentRefs</span>:
+    - <span class="kw">name</span>: <span class="str">ai-gateway</span>
+      <span class="kw">sectionName</span>: <span class="str">https</span>
+  <span class="kw">rules</span>:
+    - <span class="kw">matches</span>:
+        - <span class="kw">path</span>:
+            <span class="kw">type</span>: <span class="str">PathPrefix</span>
+            <span class="kw">value</span>: <span class="str">/v1/chat/completions</span>
+      <span class="kw">backendRefs</span>:
+        - <span class="kw">name</span>: <span class="str">openai-service</span>
+          <span class="kw">port</span>: <span class="num">8080</span>
+          <span class="kw">weight</span>: <span class="num">80</span>
+        - <span class="kw">name</span>: <span class="str">deepseek-service</span>
+          <span class="kw">port</span>: <span class="num">8080</span>
+          <span class="kw">weight</span>: <span class="num">20</span>
+</div>
+          </div>
+        </div>
+      </div>
+      <!-- Tab 1: 版本历史 — Timeline + Diff -->
+      <div class="tab-content" id="tab-1">
+        <div class="version-history">
+          <!-- 左侧：时间线 -->
+          <div class="version-timeline">
+            <div class="version-item current">
+              <div class="version-dot"></div>
+              <div class="version-info">
+                <div class="version-header">
+                  <span class="version-number">v3</span>
+                  <span class="version-tag">当前</span>
+                </div>
+                <div class="version-meta">张三 · 2026-05-25 14:30</div>
+                <div class="version-msg">调整权重比例为 80:20</div>
+              </div>
+            </div>
+            <div class="version-item">
+              <div class="version-dot"></div>
+              <div class="version-info">
+                <div class="version-header">
+                  <span class="version-number">v2</span>
+                </div>
+                <div class="version-meta">李四 · 2026-05-20 09:15</div>
+                <div class="version-msg">新增 deepseek-service 后端</div>
+                <div class="version-actions">
+                  <button class="btn btn-ghost">回滚</button>
+                </div>
+              </div>
+            </div>
+            <div class="version-item">
+              <div class="version-dot"></div>
+              <div class="version-info">
+                <div class="version-header">
+                  <span class="version-number">v1</span>
+                </div>
+                <div class="version-meta">张三 · 2026-05-15 16:00</div>
+                <div class="version-msg">初始创建路由规则</div>
+                <div class="version-actions">
+                  <button class="btn btn-ghost">回滚</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 右侧：ConfigDiff -->
+          <div class="config-diff">
+            <div class="config-diff-header">v2 → v3 配置对比</div>
+            <div class="config-diff-body">
+              <div class="config-diff-panel">
+                <div class="config-diff-panel-header">v2 (旧版本)</div>
+                <div class="diff-line context">      backendRefs:</div>
+                <div class="diff-line context">        - name: openai-service</div>
+                <div class="diff-line context">          port: 8080</div>
+                <div class="diff-line removed">          weight: 50</div>
+                <div class="diff-line context">        - name: deepseek-service</div>
+                <div class="diff-line context">          port: 8080</div>
+                <div class="diff-line removed">          weight: 50</div>
+              </div>
+              <div class="config-diff-panel">
+                <div class="config-diff-panel-header">v3 (新版本)</div>
+                <div class="diff-line context">      backendRefs:</div>
+                <div class="diff-line context">        - name: openai-service</div>
+                <div class="diff-line context">          port: 8080</div>
+                <div class="diff-line added">          weight: 80</div>
+                <div class="diff-line context">        - name: deepseek-service</div>
+                <div class="diff-line context">          port: 8080</div>
+                <div class="diff-line added">          weight: 20</div>
+              </div>
+            </div>
+            <div class="config-diff-footer">
+              <span class="diff-stat-add">+2 行</span>
+              <span class="diff-stat-del">-2 行</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Tab 2: 基本信息 — DescriptionList -->
+      <div class="tab-content" id="tab-2">
+        <div class="description-list">
+          <div class="description-item">
+            <span class="description-label">规则名称</span>
+            <span class="description-value copyable">
+              default-route
+              <svg class="copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            </span>
+          </div>
+          <div class="description-item">
+            <span class="description-label">命名空间</span>
+            <span class="description-value">ai-gateway</span>
+          </div>
+          <div class="description-item">
+            <span class="description-label">关联网关</span>
+            <span class="description-value link">ai-gateway-prod</span>
+          </div>
+          <div class="description-item">
+            <span class="description-label">匹配路径</span>
+            <span class="description-value copyable">
+              /v1/chat/completions
+              <svg class="copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            </span>
+          </div>
+          <div class="description-item">
+            <span class="description-label">后端服务</span>
+            <span class="description-value"><span class="link" style="margin-right:4px">openai-service</span><span class="link">deepseek-service</span></span>
+          </div>
+          <div class="description-item">
+            <span class="description-label">创建时间</span>
+            <span class="description-value">2026-05-15 16:00:00</span>
+          </div>
+          <div class="description-item">
+            <span class="description-label">最后修改</span>
+            <span class="description-value">2026-05-25 14:30:00</span>
+          </div>
+          <div class="description-item">
+            <span class="description-label">修改人</span>
+            <span class="description-value">张三</span>
+          </div>
+          <div class="description-item">
+            <span class="description-label">描述</span>
+            <span class="description-value">AI 聊天补全接口的默认路由规则</span>
+          </div>
+        </div>
+      </div>
+    </div><!-- /card -->
+  </div><!-- /page-container -->
+</main>
+<script>
+// Sidebar collapse toggle
+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');
+  });
+});
+function toggleDropdown() {
+  document.getElementById('moreDropdown').classList.toggle('open');
+}
+document.addEventListener('click', (e) => {
+  if (!e.target.closest('#moreDropdown')) {
+    document.getElementById('moreDropdown').classList.remove('open');
+  }
+});
+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('active', i === index);
+  });
+}
+</script>
+</body>
+</html>