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

@teamix-evo/skills 0.5.0 → 0.6.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 (72) hide show

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

@@ -0,0 +1,933 @@
+<!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 Detail Page Reference）
+  ─────────────────────────────────────────────────────────────
+  用途：AI 生成详情页时的基础参考，展示完整页面骨架与组件组合
+  ─────────────────────────────────────────────────────────────
+  布局：TWO_COL（Sidebar + ContentCard 单例容器）
+  Sidebar：完整 L2 框架（折叠/展开 240px↔68px）
+  内容区模式：模式B + 模式C 组合（Card + Tabs）
+  子类型：资源详情页
+  ─────────────────────────────────────────────────────────────
+  组件清单：
+    • PageHeader — 面包屑模式 + 操作按钮组
+    • InfoCard — 顶部摘要卡片
+    • Tabs — 实例详情/监控/关联资源
+    • DescriptionList — 键值对列表，3列布局
+    • DescriptionItem — 6种交互模式展示
+    • Badge — 状态展示
+    • DropdownMenu — “更多”操作
+    • Tooltip — 长文本悬浮提示
+  ─────────────────────────────────────────────────────────────
+  规范来源：pages/detail-page/SKILL.md v7.8.4
+  Tokens 版本：v7.8.4（间距与 v7.5 分层 padding 模型对齐 + v7.6 ContentCard/InfoCard 表面规则 + v7.8.4 字体族变量）
+  组件规格：component-specs.json C26-DescriptionList
+  表面边界：PageHeader / Tabs / Separator 的 border 为「功能性分割线」，不受 v7.6 surface 约束（见 SKILL.md §6.5.4）
+-->
+<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: 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;
+}
+/* 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-title {
+  font-size: var(--font-size-page-header); font-weight: var(--font-weight-medium);
+  color: hsl(var(--gray-primary)); line-height: 1.3;
+}
+.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-destructive { background: transparent; color: hsl(var(--destructive)); border: 1px solid hsl(var(--destructive)); }
+.btn-destructive:hover { background: hsl(var(--destructive-bg)); }
+.btn-icon { width: var(--input-height); padding: 0; }
+/* ===== InfoCard ===== */
+/* 本例 InfoCard 采用「嵌入主卡内的分组区块」实现（仅 padding 控制间距，无分割线），非独立 Card 容器。
+   如采用「独立 Card 容器」实现时，需跟随主卡 ContentCard 应用 v7.6 表面规则：
+   border: none + box-shadow: var(--shadow-sm) + border-radius: var(--radius-lg)。见 SKILL.md §6.5.3 */
+.info-card {
+  padding: 16px 0;
+}
+.info-card-header {
+  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
+}
+.info-card-icon {
+  width: 40px; height: 40px; border-radius: var(--radius-md);
+  background: hsl(var(--info-bg));
+  display: flex; align-items: center; justify-content: center;
+  color: hsl(var(--primary));
+}
+.info-card-meta { flex: 1; }
+.info-card-name { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); color: hsl(var(--gray-primary)); }
+.info-card-desc { font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground)); margin-top: 2px; }
+.info-card-summary {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
+}
+.info-card-item {
+  padding: 8px 0;
+}
+.info-card-item-label { font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground)); margin-bottom: 4px; }
+.info-card-item-value { font-size: var(--font-size-lg); 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; }
+/* ===== DescriptionList + DescriptionItem ===== */
+/* C26 规格：row.height=36px, row.paddingY=8px, label.color=gray-secondary, value.color=gray-primary */
+.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(--gray-secondary-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.copyable .copy-icon:hover { color: hsl(var(--primary)); }
+.description-value.link { color: hsl(var(--primary)); cursor: pointer; }
+.description-value.link:hover { text-decoration: underline; }
+.description-value .empty-val { color: hsl(var(--gray-disabled)); }
+/* ListSection 分组 */
+.list-section { padding-top: 20px; }
+.list-section:first-child { padding-top: 0; }
+.list-section:not(:first-child) { border-top: 1px solid hsl(var(--gray-line)); }
+.list-section-title {
+  font-size: var(--font-size-lg); font-weight: 600;
+  color: hsl(var(--gray-primary)); margin-bottom: 12px;
+}
+/* ===== 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)); }
+/* ===== Tooltip ===== */
+.tooltip-trigger { position: relative; }
+.tooltip-trigger:hover .tooltip-content { display: block; }
+.tooltip-content {
+  display: none; position: absolute; bottom: calc(100% + 6px); left: 50%;
+  transform: translateX(-50%);
+  background: hsl(var(--gray-primary)); color: hsl(var(--gray-white));
+  padding: 6px 10px; border-radius: var(--radius-sm);
+  font-size: var(--font-size-base); white-space: nowrap;
+  z-index: 500;
+}
+.tooltip-content::after {
+  content: ''; position: absolute; top: 100%; left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent; border-top-color: hsl(var(--gray-primary));
+}
+/* ===== 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); }
+  .info-card-summary { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 768px) {
+  .description-list { grid-template-columns: 1fr; }
+  .info-card-summary { 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">gateway-prod-01</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">降配</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 — 顶部摘要 -->
+      <div class="info-card">
+        <div class="info-card-header">
+          <div class="info-card-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
+          </div>
+          <div class="info-card-meta">
+            <div class="info-card-name">gateway-prod-01</div>
+            <div class="info-card-desc">AI 网关生产环境主实例 · 华东2（上海）</div>
+          </div>
+          <span class="badge badge-success"><span class="badge-dot"></span>运行中</span>
+        </div>
+        <div class="info-card-summary">
+          <div class="info-card-item">
+            <div class="info-card-item-label">所属组织</div>
+            <div class="info-card-item-value">平台技术部</div>
+          </div>
+          <div class="info-card-item">
+            <div class="info-card-item-label">资源集</div>
+            <div class="info-card-item-value">prod-resource-group</div>
+          </div>
+          <div class="info-card-item">
+            <div class="info-card-item-label">创建人</div>
+            <div class="info-card-item-value">张三</div>
+          </div>
+          <div class="info-card-item">
+            <div class="info-card-item-label">创建时间</div>
+            <div class="info-card-item-value">2026-03-15 10:30</div>
+          </div>
+        </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>
+          <li class="tab-item" onclick="switchTab(3)">操作日志</li>
+        </ul>
+      </div>
+      <!-- Tab Content: 实例详情 -->
+      <div class="tab-content" id="tab-0">
+        <!-- ListSection: 基本信息 -->
+        <div class="list-section">
+          <div class="list-section-title">基本信息</div>
+          <div class="description-list">
+            <div class="description-item">
+              <span class="description-label">实例 ID</span>
+              <span class="description-value copyable tooltip-trigger">
+                gw-2ze4a9f8k3x7b1c0
+                <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 class="tooltip-content">点击复制实例 ID</span>
+              </span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">实例名称</span>
+              <span class="description-value">gateway-prod-01</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">状态</span>
+              <span class="description-value"><span class="badge badge-success"><span class="badge-dot"></span>运行中</span></span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">地域</span>
+              <span class="description-value">华东2（上海）</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">可用区</span>
+              <span class="description-value">可用区 G</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">实例规格</span>
+              <span class="description-value">gateway.s3.large</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">架构</span>
+              <span class="description-value">X86</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"><span class="badge badge-warning"><span class="badge-dot"></span>2026-06-15（剩余 24 天）</span></span>
+            </div>
+          </div>
+        </div>
+        <!-- ListSection: 配置信息 -->
+        <div class="list-section">
+          <div class="list-section-title">配置信息</div>
+          <div class="description-list">
+            <div class="description-item">
+              <span class="description-label">vCPU</span>
+              <span class="description-value">8 核</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">内存</span>
+              <span class="description-value">16 GiB</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">最大 QPS</span>
+              <span class="description-value">10,000</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">最大连接数</span>
+              <span class="description-value">50,000</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">模型路由数</span>
+              <span class="description-value">128</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">流量限速</span>
+              <span class="description-value">1,000 req/s</span>
+            </div>
+          </div>
+        </div>
+        <!-- ListSection: 网络信息 -->
+        <div class="list-section">
+          <div class="list-section-title">网络信息</div>
+          <div class="description-list">
+            <div class="description-item">
+              <span class="description-label">VPC</span>
+              <span class="description-value link">vpc-2ze9f7k3x8b1a0c4</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">交换机</span>
+              <span class="description-value link">vsw-2ze4b8k1x9c0a7f3</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">私有 IP</span>
+              <span class="description-value copyable">
+                172.16.0.100
+                <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">公网 IP</span>
+              <span class="description-value copyable">
+                47.100.23.156
+                <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 link">sg-2ze5c9k4x0d2b8f1</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">域名</span>
+              <span class="description-value copyable tooltip-trigger">
+                gw-prod-01.ai-gateway.cn-shanghai...
+                <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 class="tooltip-content">gw-prod-01.ai-gateway.cn-shanghai.aliyuncs.com</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div><!-- /tab-content -->
+    </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');
+}
+// Close dropdown on click outside
+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);
+  });
+  // Simple demo: only tab-0 has content
+  document.querySelectorAll('.tab-content').forEach(c => c.style.display = 'none');
+  const target = document.getElementById('tab-' + index);
+  if (target) target.style.display = 'block';
+}
+</script>
+</body>
+</html>