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

@teamix-evo/skills 0.4.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 (97) hide show

package/src/teamix-evo-design-opentrek/examples/standard-card-list.html ADDED Viewed

@@ -0,0 +1,1094 @@
+<!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 Card List Reference）
+  ─────────────────────────────────────────────────────────────
+  用途：AI 生成卡片列表页时的基础参考，展示完整页面骨架与组件组合
+  ─────────────────────────────────────────────────────────────
+  布局：TWO_COL（Sidebar + ContentCard 单例容器）
+  Sidebar：完整 L1 框架（折叠/展开 240px↔68px / flyout / sub-menu）
+  内容区模式：D-CARD（standard-card）
+  ─────────────────────────────────────────────────────────────
+  组件清单：
+    • PageHeader
+    • ActionToolbar — 含 SearchCombo (来源 _shared/search-combo-spec.md)
+    • CardGrid — preset=standard, min 300px / gap 16px
+    • ItemCard — density=standard, iconStyle=avatar
+    • CardActionBar — mode=hover-slidebar
+    • Pagination — 12 条/页
+  ─────────────────────────────────────────────────────────────
+  规范来源：pages/list-page/patterns/card-list.md §0/§1/§9
+  Tokens 版本：v7.8.4（分层 padding 模型 v7.5 + v7.6 ContentCard 表面规则 + v7.8.4 字体族变量）
+-->
+<style>
+/* ====================================================================
+   Design Tokens v7.3
+   ==================================================================== */
+:root {
+  /* Brand */
+  --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 (v7.4) */
+  --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%;
+  /* Semantic */
+  --background: 220 18% 97%;
+  --foreground: 220 9% 7%;
+  --card: 0 0% 100%;
+  --border: 210 9% 91%;
+  --ring: 218.6 100% 46.7%;
+  /* Status */
+  --success: 142 76% 36%;
+  --success-bg: 142 84% 95%;
+  --success-text: 142 76.6% 35%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+  --destructive-bg: 0 86% 97%;
+  --warning: 40 88% 48%;
+  --warning-bg: 43 100% 94%;
+  --warning-text: 40 88% 40%;
+  --info: 217 91% 53%;
+  --info-bg: 214 100% 97%;
+  --info-text: 217 91% 45%;
+  --status-running: 142 76% 36%;
+  --status-stopped: 222 7.6% 74.1%;
+  --status-error: 0 72% 51%;
+  /* Sidebar */
+  --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%;
+  /* Avatar 色块 */
+  --avatar-blue: 218.6 100% 46.7%;
+  --avatar-success: 142 76% 36%;
+  --avatar-mcp: 271 81% 56%;
+  --avatar-warning: 40 88% 48%;
+  --avatar-data8: 49.4 65.0% 42.5%;
+  --avatar-berry: 341.2 80.1% 66.5%;
+  /* Layout（分层模型 v7.5）*/
+  --layout-sidebar-width: 240px;
+  --page-container-padding: 16px;
+  --page-container-padding-left: 0px;
+  --card-padding-x: 20px;
+  --page-container-gap: 16px;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --page-header-height: 64px;
+  /* Typography */
+  --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;
+  /* Spacing & gap */
+  --gap-xs: 4px;
+  --btn-padding-x: 16px;
+  --btn-padding-x-sm: 12px;
+  --button-gap: 8px;
+  --tabs-gap: 24px;
+  --card-gap: 16px;
+  /* CardGrid presets */
+  --card-grid-min-compact: 240px;
+  --card-grid-min-standard: 300px;
+  --card-grid-min-comfortable: 320px;
+  --card-grid-min-feature: 360px;
+  /* Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --card-radius: 12px;
+  --input-radius: 8px;
+  /* Shadow */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  /* Animation */
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --easing-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+/* ==================================================================== */
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary));
+  background: hsl(var(--background));
+  -webkit-font-smoothing: antialiased;
+}
+button { font-family: inherit; }
+/* ====================================================================
+   Sidebar — 完整 L1 框架（含折叠/展开/flyout）
+   ==================================================================== */
+.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 */
+.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)); }
+/* Sidebar Content */
+.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 — PageContainer
+   ==================================================================== */
+.main-content {
+  margin-left: var(--layout-sidebar-width);
+  min-height: 100vh;
+  padding: var(--page-container-padding)
+           var(--page-container-padding)
+           var(--page-container-padding)
+           var(--page-container-padding-left);
+  transition: margin-left 0.2s ease;
+}
+.sidebar.collapsed ~ .main-content { margin-left: 68px; }
+/* ====================================================================
+   ContentCard — 白卡容器，分层 padding 模型 v7.5
+   ==================================================================== */
+.card-wrapper {
+  background: hsl(var(--card));
+  /* v7.6：去掉 1px border，使用最弱阴影 var(--shadow-sm) */
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
+  border-radius: var(--card-radius);
+  overflow: hidden;
+  display: flex; flex-direction: column;
+}
+.card-wrapper > .page-header   { padding: 0 var(--card-padding-x); }
+.card-wrapper > .action-toolbar { padding: 16px var(--card-padding-x); }
+.card-wrapper > .card-grid     { padding: 0 var(--card-padding-x) 16px; }
+.card-wrapper > .pagination    {
+  padding: 16px var(--card-padding-x);
+  margin-top: 16px;
+  border-top: 1px solid hsl(var(--gray-line));
+}
+/* ====================================================================
+   PageHeader — Mode 1 简单标题，64px
+   ==================================================================== */
+.page-header {
+  height: var(--page-header-height);
+  display: flex; align-items: center; justify-content: space-between;
+}
+.page-header-title {
+  font-size: var(--font-size-page-header);
+  font-weight: var(--font-weight-medium);
+  color: hsl(var(--gray-primary));
+  line-height: 1.4;
+}
+/* ====================================================================
+   ActionToolbar
+   ==================================================================== */
+.action-toolbar { display: flex; align-items: center; gap: var(--button-gap); }
+.action-toolbar-left  { display: flex; align-items: center; gap: var(--button-gap); }
+.action-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--button-gap); }
+/* Button */
+.btn {
+  display: inline-flex; align-items: center; gap: var(--button-gap);
+  height: 32px; padding: 0 var(--btn-padding-x-sm);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
+  cursor: pointer; border: none;
+  transition: all var(--duration-normal) var(--easing-ease);
+  white-space: nowrap;
+}
+.btn svg { width: 14px; height: 14px; }
+.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
+.btn-primary:hover { background: hsl(var(--primary-hover)); }
+.btn-default { background: hsl(var(--gray-white)); color: hsl(var(--gray-primary)); border: 1px solid hsl(var(--gray-line)); }
+.btn-default:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
+/* SearchCombo — 容器式 border */
+.search-combo {
+  display: inline-flex; align-items: center;
+  height: 32px; min-width: 280px;
+  border: 1px solid hsl(var(--gray-line));
+  border-radius: var(--input-radius);
+  background: hsl(var(--gray-white));
+  margin-left: 12px;
+}
+.search-combo:focus-within { border-color: hsl(var(--primary)); }
+.search-combo-dim {
+  height: 100%; padding: 0 8px;
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground));
+  border-right: 1px solid hsl(var(--gray-line));
+  cursor: pointer;
+}
+.search-combo-dim svg { width: 12px; height: 12px; color: hsl(var(--muted-foreground)); }
+.search-combo input {
+  flex: 1; height: 100%; border: none; outline: none;
+  background: transparent; padding: 0 8px;
+  font-size: var(--font-size-base); color: hsl(var(--gray-primary));
+}
+.search-combo input::placeholder { color: hsl(var(--muted-foreground)); }
+.search-combo-search-btn {
+  height: 100%; width: 32px; border: none; background: transparent;
+  display: inline-flex; align-items: center; justify-content: center;
+  cursor: pointer; color: hsl(var(--muted-foreground));
+}
+.search-combo-search-btn:hover { color: hsl(var(--primary)); }
+.search-combo-search-btn svg { width: 14px; height: 14px; }
+/* ToggleGroup */
+.toggle-group {
+  display: inline-flex; background: hsl(var(--gray-muted));
+  border-radius: var(--radius-md); padding: 2px;
+}
+.toggle-item {
+  height: 26px; padding: 0 12px;
+  display: inline-flex; align-items: center;
+  font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground));
+  border-radius: var(--radius-sm); cursor: pointer;
+  transition: all var(--duration-fast) var(--easing-ease);
+  white-space: nowrap; border: none; background: transparent;
+}
+.toggle-item:hover { color: hsl(var(--gray-primary)); }
+.toggle-item.active {
+  background: hsl(var(--gray-white)); color: hsl(var(--gray-primary));
+  font-weight: var(--font-weight-medium); box-shadow: var(--shadow-sm);
+}
+/* ====================================================================
+   CardGrid — preset=standard
+   ==================================================================== */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min, var(--card-grid-min-standard)), 1fr));
+  gap: var(--card-gap);
+  align-content: start;
+}
+/* ====================================================================
+   ItemCard — density=standard / iconStyle=avatar
+   ==================================================================== */
+.item-card {
+  position: relative;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--gray-line));
+  border-radius: var(--radius-lg);
+  padding: 16px;
+  display: flex; flex-direction: column;
+  cursor: pointer; overflow: hidden;
+  transition: border-color var(--duration-normal) var(--easing-ease),
+              box-shadow var(--duration-normal) var(--easing-ease);
+}
+.item-card:hover { border-color: hsl(var(--primary)); box-shadow: var(--shadow-sm); }
+.item-card[data-disabled="true"] { background: hsl(var(--gray-muted)); cursor: not-allowed; opacity: 0.7; }
+.card-title-row { display: flex; align-items: center; gap: 10px; }
+.card-avatar {
+  position: relative; width: 32px; height: 32px;
+  border-radius: var(--input-radius); flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  color: hsl(var(--gray-white)); font-size: 14px; font-weight: 600; overflow: hidden;
+}
+.card-avatar::after {
+  content: ""; position: absolute; width: 18px; height: 32px; right: 0; top: 0;
+  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.2) 40%, transparent 100%);
+  pointer-events: none;
+}
+.avatar-blue    { background: hsl(var(--avatar-blue)); }
+.avatar-success { background: hsl(var(--avatar-success)); }
+.avatar-mcp     { background: hsl(var(--avatar-mcp)); }
+.avatar-warning { background: hsl(var(--avatar-warning)); }
+.avatar-data8   { background: hsl(var(--avatar-data8)); }
+.avatar-berry   { background: hsl(var(--avatar-berry)); }
+.card-title {
+  flex: 1; min-width: 0; font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium); color: hsl(var(--gray-primary));
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.card-badge {
+  display: inline-flex; align-items: center; height: 16px; padding: 1px 4px;
+  font-size: 10px; border: 1px solid hsl(var(--gray-line));
+  border-radius: 2px; color: hsl(var(--gray-secondary-foreground)); background: transparent; flex-shrink: 0;
+}
+.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.status-running { background: hsl(var(--status-running)); }
+.status-stopped { background: hsl(var(--status-stopped)); }
+.status-error   { background: hsl(var(--status-error)); }
+.card-desc {
+  margin-top: 4px; font-size: var(--font-size-base); color: hsl(var(--muted-foreground));
+  line-height: 1.5; overflow: hidden; text-overflow: ellipsis;
+  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
+}
+.card-field-row { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
+.card-field { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground)); }
+.card-field svg { width: 12px; height: 12px; flex-shrink: 0; color: hsl(var(--muted-foreground)); }
+.card-field-label { color: hsl(var(--muted-foreground)); flex-shrink: 0; }
+.card-field-value { font-size: var(--font-size-lg); color: hsl(var(--gray-primary)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.card-supplementary {
+  margin-top: 8px; padding-bottom: 12px;
+  display: flex; align-items: center; gap: 12px;
+  font-size: var(--font-size-base); color: hsl(var(--muted-foreground));
+}
+.card-supplementary .item { display: inline-flex; align-items: center; gap: 4px; }
+.card-supplementary svg { width: 12px; height: 12px; }
+/* CardActionBar — mode=hover-slidebar */
+.card-action-bar {
+  position: absolute; bottom: 0; left: 0; right: 0;
+  background: hsl(var(--card));
+  border-top: 1px solid hsl(var(--gray-line));
+  display: flex; z-index: 2;
+  transform: translateY(100%);
+  transition: transform var(--duration-normal) var(--easing-ease);
+}
+.item-card:hover .card-action-bar { transform: translateY(0); }
+.card-action-bar .action-btn {
+  flex: 1; padding: 8px; text-align: center;
+  color: hsl(var(--gray-primary)); font-size: 13px;
+  font-weight: var(--font-weight-medium); cursor: pointer;
+  border: none; background: transparent;
+  border-right: 1px solid hsl(var(--gray-line));
+  transition: background var(--duration-fast), color var(--duration-fast);
+}
+.card-action-bar .action-btn:last-child { border-right: none; }
+.card-action-bar .action-btn:hover { background: hsl(var(--gray-muted)); color: hsl(var(--primary)); }
+.card-action-bar .action-btn.destructive { color: hsl(var(--destructive)); }
+.card-action-bar .action-btn.destructive:hover { background: hsl(var(--destructive-bg)); }
+/* ====================================================================
+   Pagination
+   ==================================================================== */
+.pagination { display: flex; align-items: center; justify-content: space-between; }
+.pagination-info { font-size: var(--font-size-base); color: hsl(var(--muted-foreground)); }
+.pagination-controls { display: flex; align-items: center; gap: 4px; }
+.page-btn {
+  min-width: 32px; height: 32px; padding: 0 8px;
+  border: 1px solid hsl(var(--gray-line)); border-radius: var(--radius-sm);
+  background: hsl(var(--gray-white)); color: hsl(var(--gray-primary));
+  font-size: var(--font-size-base); cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: all var(--duration-fast);
+}
+.page-btn:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
+.page-btn.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
+.page-btn:disabled { cursor: not-allowed; color: hsl(var(--gray-disabled)); border-color: hsl(var(--gray-line)); }
+.page-size { margin-left: 12px; font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground)); }
+.page-size select {
+  height: 28px; padding: 0 6px;
+  border: 1px solid hsl(var(--gray-line)); border-radius: var(--radius-sm);
+  background: hsl(var(--gray-white)); font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary)); margin-left: 6px;
+}
+</style>
+</head>
+<body>
+<!-- ===== Sidebar — 完整 L1 框架 ===== -->
+<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>
+  <div class="sidebar-content">
+    <ul class="sidebar-menu">
+      <!-- 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>
+      <!-- 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>
+      <!-- 云原生网关 -->
+      <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>
+      <!-- 集群管理 -->
+      <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>
+      <!-- 认证授权 -->
+      <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>
+        </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>
+        </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 — ContentCard 单例容器
+     ============================================================ -->
+<main class="main-content">
+  <div class="card-wrapper">
+    <!-- PageHeader -->
+    <div class="page-header">
+      <h1 class="page-header-title">实例管理</h1>
+    </div>
+    <!-- ActionToolbar -->
+    <div class="action-toolbar">
+      <div class="action-toolbar-left">
+        <button class="btn btn-primary">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          新建实例
+        </button>
+        <button class="btn btn-default">
+          <svg 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"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+          导入
+        </button>
+      </div>
+      <!-- SearchCombo -->
+      <div class="search-combo">
+        <span class="search-combo-dim">
+          实例名称
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+        </span>
+        <input type="text" placeholder="请输入关键字" />
+        <button class="search-combo-search-btn" aria-label="搜索">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        </button>
+      </div>
+      <div class="action-toolbar-right">
+        <div class="toggle-group" role="tablist" aria-label="状态筛选">
+          <span class="toggle-item active">全部</span>
+          <span class="toggle-item">运行中</span>
+          <span class="toggle-item">已停止</span>
+          <span class="toggle-item">异常</span>
+        </div>
+      </div>
+    </div>
+    <!-- ============================================================
+         CardGrid → ItemCard × 8
+         density=standard / iconStyle=avatar / mode=hover-slidebar
+         ============================================================ -->
+    <div class="card-grid" style="--card-grid-min: var(--card-grid-min-standard);">
+      <!-- ItemCard 1 — 运行中 -->
+      <article class="item-card" data-status="running">
+        <div class="card-title-row">
+          <div class="card-avatar avatar-blue" aria-hidden="true">P</div>
+          <span class="card-title">prod-gateway-cn-east</span>
+          <span class="card-badge">v2.1</span>
+          <span class="status-dot status-running" title="运行中"></span>
+        </div>
+        <p class="card-desc">production-cluster · 生产环境主集群</p>
+        <div class="card-field-row">
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+            <span class="card-field-label">对外访问</span>
+            <span class="card-field-value">api.gw.example.com</span>
+          </div>
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+            <span class="card-field-label">命名空间</span>
+            <span class="card-field-value">prod-default</span>
+          </div>
+        </div>
+        <div class="card-supplementary">
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+            华东 1（杭州）
+          </span>
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            2 天前
+          </span>
+        </div>
+        <div class="card-action-bar" role="toolbar" aria-label="实例操作">
+          <button class="action-btn">停止</button>
+          <button class="action-btn">详情</button>
+          <button class="action-btn">编辑</button>
+          <button class="action-btn destructive">删除</button>
+        </div>
+      </article>
+      <!-- ItemCard 2 — 运行中 -->
+      <article class="item-card" data-status="running">
+        <div class="card-title-row">
+          <div class="card-avatar avatar-success" aria-hidden="true">D</div>
+          <span class="card-title">dev-gateway-test-01</span>
+          <span class="card-badge">v2.0</span>
+          <span class="status-dot status-running" title="运行中"></span>
+        </div>
+        <p class="card-desc">dev-cluster · 开发联调环境</p>
+        <div class="card-field-row">
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+            <span class="card-field-label">对外访问</span>
+            <span class="card-field-value">dev-api.gw.example.com</span>
+          </div>
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+            <span class="card-field-label">命名空间</span>
+            <span class="card-field-value">dev-team-a</span>
+          </div>
+        </div>
+        <div class="card-supplementary">
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+            华北 2（北京）
+          </span>
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            5 小时前
+          </span>
+        </div>
+        <div class="card-action-bar">
+          <button class="action-btn">停止</button>
+          <button class="action-btn">详情</button>
+          <button class="action-btn">编辑</button>
+          <button class="action-btn destructive">删除</button>
+        </div>
+      </article>
+      <!-- ItemCard 3 — 已停止 -->
+      <article class="item-card" data-status="stopped">
+        <div class="card-title-row">
+          <div class="card-avatar avatar-data8" aria-hidden="true">S</div>
+          <span class="card-title">staging-gateway-bak</span>
+          <span class="card-badge">v1.9</span>
+          <span class="status-dot status-stopped" title="已停止"></span>
+        </div>
+        <p class="card-desc">staging-cluster · 预发环境备用节点</p>
+        <div class="card-field-row">
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+            <span class="card-field-label">对外访问</span>
+            <span class="card-field-value">—</span>
+          </div>
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+            <span class="card-field-label">命名空间</span>
+            <span class="card-field-value">staging-default</span>
+          </div>
+        </div>
+        <div class="card-supplementary">
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+            华东 1（杭州）
+          </span>
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            7 天前
+          </span>
+        </div>
+        <div class="card-action-bar">
+          <button class="action-btn">启动</button>
+          <button class="action-btn">详情</button>
+          <button class="action-btn">编辑</button>
+          <button class="action-btn destructive">删除</button>
+        </div>
+      </article>
+      <!-- ItemCard 4 — 异常 -->
+      <article class="item-card" data-status="error">
+        <div class="card-title-row">
+          <div class="card-avatar avatar-berry" aria-hidden="true">E</div>
+          <span class="card-title">edge-gateway-sg-01</span>
+          <span class="card-badge">v2.1</span>
+          <span class="status-dot status-error" title="异常"></span>
+        </div>
+        <p class="card-desc">edge-cluster · 海外边缘节点（连接异常）</p>
+        <div class="card-field-row">
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+            <span class="card-field-label">对外访问</span>
+            <span class="card-field-value">sg-api.gw.example.com</span>
+          </div>
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+            <span class="card-field-label">命名空间</span>
+            <span class="card-field-value">edge-overseas</span>
+          </div>
+        </div>
+        <div class="card-supplementary">
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+            新加坡
+          </span>
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            12 分钟前
+          </span>
+        </div>
+        <div class="card-action-bar">
+          <button class="action-btn">重启</button>
+          <button class="action-btn">详情</button>
+          <button class="action-btn">编辑</button>
+          <button class="action-btn destructive">删除</button>
+        </div>
+      </article>
+      <!-- ItemCard 5 — 运行中 -->
+      <article class="item-card" data-status="running">
+        <div class="card-title-row">
+          <div class="card-avatar avatar-mcp" aria-hidden="true">M</div>
+          <span class="card-title">mcp-gateway-prod</span>
+          <span class="card-badge">v2.1</span>
+          <span class="status-dot status-running" title="运行中"></span>
+        </div>
+        <p class="card-desc">mcp-cluster · MCP 协议生产网关</p>
+        <div class="card-field-row">
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+            <span class="card-field-label">对外访问</span>
+            <span class="card-field-value">mcp.gw.example.com</span>
+          </div>
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+            <span class="card-field-label">命名空间</span>
+            <span class="card-field-value">prod-mcp</span>
+          </div>
+        </div>
+        <div class="card-supplementary">
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+            华东 1（杭州）
+          </span>
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            1 天前
+          </span>
+        </div>
+        <div class="card-action-bar">
+          <button class="action-btn">停止</button>
+          <button class="action-btn">详情</button>
+          <button class="action-btn">编辑</button>
+          <button class="action-btn destructive">删除</button>
+        </div>
+      </article>
+      <!-- ItemCard 6 — 运行中 -->
+      <article class="item-card" data-status="running">
+        <div class="card-title-row">
+          <div class="card-avatar avatar-warning" aria-hidden="true">L</div>
+          <span class="card-title">llm-router-gateway</span>
+          <span class="card-badge">Beta</span>
+          <span class="status-dot status-running" title="运行中"></span>
+        </div>
+        <p class="card-desc">router-cluster · LLM 多模型智能路由网关</p>
+        <div class="card-field-row">
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+            <span class="card-field-label">对外访问</span>
+            <span class="card-field-value">llm.gw.example.com</span>
+          </div>
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+            <span class="card-field-label">命名空间</span>
+            <span class="card-field-value">prod-llm</span>
+          </div>
+        </div>
+        <div class="card-supplementary">
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+            华南 1（深圳）
+          </span>
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            刚刚
+          </span>
+        </div>
+        <div class="card-action-bar">
+          <button class="action-btn">停止</button>
+          <button class="action-btn">详情</button>
+          <button class="action-btn">编辑</button>
+          <button class="action-btn destructive">删除</button>
+        </div>
+      </article>
+      <!-- ItemCard 7 — 运行中 -->
+      <article class="item-card" data-status="running">
+        <div class="card-title-row">
+          <div class="card-avatar avatar-blue" aria-hidden="true">F</div>
+          <span class="card-title">finance-gateway-cn</span>
+          <span class="card-badge">v2.1</span>
+          <span class="status-dot status-running" title="运行中"></span>
+        </div>
+        <p class="card-desc">finance-cluster · 金融业务专用集群</p>
+        <div class="card-field-row">
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+            <span class="card-field-label">对外访问</span>
+            <span class="card-field-value">fin.gw.example.com</span>
+          </div>
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+            <span class="card-field-label">命名空间</span>
+            <span class="card-field-value">prod-finance</span>
+          </div>
+        </div>
+        <div class="card-supplementary">
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+            华东 2（上海）
+          </span>
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            3 天前
+          </span>
+        </div>
+        <div class="card-action-bar">
+          <button class="action-btn">停止</button>
+          <button class="action-btn">详情</button>
+          <button class="action-btn">编辑</button>
+          <button class="action-btn destructive">删除</button>
+        </div>
+      </article>
+      <!-- ItemCard 8 — 已停止 -->
+      <article class="item-card" data-status="stopped">
+        <div class="card-title-row">
+          <div class="card-avatar avatar-success" aria-hidden="true">A</div>
+          <span class="card-title">archive-gateway-old</span>
+          <span class="card-badge">v1.8</span>
+          <span class="status-dot status-stopped" title="已停止"></span>
+        </div>
+        <p class="card-desc">archive-cluster · 旧版归档（待清理）</p>
+        <div class="card-field-row">
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+            <span class="card-field-label">对外访问</span>
+            <span class="card-field-value">—</span>
+          </div>
+          <div class="card-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+            <span class="card-field-label">命名空间</span>
+            <span class="card-field-value">archive-default</span>
+          </div>
+        </div>
+        <div class="card-supplementary">
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+            华北 1（青岛）
+          </span>
+          <span class="item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            30 天前
+          </span>
+        </div>
+        <div class="card-action-bar">
+          <button class="action-btn">启动</button>
+          <button class="action-btn">详情</button>
+          <button class="action-btn">编辑</button>
+          <button class="action-btn destructive">删除</button>
+        </div>
+      </article>
+    </div>
+    <!-- Pagination — standard-card 默认 12 条/页 -->
+    <div class="pagination">
+      <span class="pagination-info">共 28 条</span>
+      <div class="pagination-controls">
+        <button class="page-btn" disabled aria-label="上一页">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
+        <button class="page-btn active">1</button>
+        <button class="page-btn">2</button>
+        <button class="page-btn">3</button>
+        <button class="page-btn" aria-label="下一页">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+        </button>
+        <span class="page-size">
+          每页
+          <select>
+            <option>12</option>
+            <option>24</option>
+            <option>48</option>
+          </select>
+          条
+        </span>
+      </div>
+    </div>
+  </div>
+</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 expand 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');
+  });
+});
+// ToggleGroup 切换
+document.querySelectorAll('.toggle-group').forEach(group => {
+  group.addEventListener('click', e => {
+    const item = e.target.closest('.toggle-item');
+    if (!item) return;
+    group.querySelectorAll('.toggle-item').forEach(i => i.classList.remove('active'));
+    item.classList.add('active');
+  });
+});
+// ItemCard 点击导航
+document.querySelectorAll('.item-card').forEach(card => {
+  card.addEventListener('click', () => {
+    console.log('navigate to detail:', card.querySelector('.card-title').textContent);
+  });
+});
+// ActionBar stopPropagation
+document.querySelectorAll('.card-action-bar .action-btn').forEach(btn => {
+  btn.addEventListener('click', e => {
+    e.stopPropagation();
+    console.log('action:', btn.textContent.trim());
+  });
+});
+</script>
+</body>
+</html>