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-ai-gateway-1.html ADDED Viewed

@@ -0,0 +1,1069 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AI 网关实例详情 · 概览 — v7.8.4</title>
+<!--
+  ★ AI 网关实例详情页（概览）— Detail Page Instance Overview
+  ─────────────────────────────────────────────────────────────
+  布局：TWO_COL（实例级 Sidebar + ContentCard 单例容器）
+  Sidebar：14 项实例上下文菜单（13 L1 + 1 父菜单含 2 L2 子项）
+  内容区模式：PageHeader（面包屑）+ 网关类型标签 + Tabs（基本信息 / 接入点）
+  ─────────────────────────────────────────────────────────────
+  组件清单：
+    • PageHeader — 面包屑模式
+    • GatewayTypeTag — 网关类型标签
+    • Tabs
+    • OverviewStatGrid — 7 张统计卡片
+    • StatCard — 三段式统计卡
+    • DescriptionList — 4 列布局
+    • StatusBadge — 状态徽章
+    • DataTable — 接入点表格
+  ─────────────────────────────────────────────────────────────
+  规范：page-rule-system v7.8.4 / Tokens v4.1 (TrekClaw)
+-->
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  /* ===== Brand / Primary ===== */
+  --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 Scale (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 aliases */
+  --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 ===== */
+  --success: 142 76% 36%;
+  --success-bg: 152 82% 96%;
+  --success-border: 142 77% 73%;
+  --warning: 40 88% 48%;
+  --warning-bg: 43 100% 94%;
+  --warning-border: 40 92% 68%;
+  --destructive: 0 72% 51%;
+  --destructive-bg: 0 86% 97%;
+  --destructive-border: 0 88.7% 86.1%;
+  --info: 221 83% 53%;
+  --info-bg: 214 100% 97%;
+  --info-border: 213 94% 82.5%;
+  /* ===== Surface ===== */
+  --background: 220 18% 97%;
+  --card: 0 0% 100%;
+  --card-foreground: 220 9% 7%;
+  --border: 210 9% 91%;
+  --ring: 218.6 100% 46.7%;
+  /* ===== 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%;
+  /* ===== Geometry ===== */
+  --radius: 1rem;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  /* ===== Spacing (v7.5 layered padding) ===== */
+  --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 (v7.6 surface) ===== */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  /* ===== 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;
+  /* ===== Input ===== */
+  --input-height: 32px;
+  --input-radius: 8px;
+  /* ===== Layout ===== */
+  --layout-sidebar-width: 240px;
+  /* ===== Motion ===== */
+  --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;
+  min-width: 1280px;
+}
+/* ===== 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 Flyout (collapsed 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 Layout ===== */
+.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-content {
+  flex: 1; overflow-y: auto; padding: 12px 0;
+}
+.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;
+  display: none;
+}
+.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)); }
+/* ===== Page Container ===== */
+.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);
+  border: none;
+  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 - 32px);
+  padding: 0 var(--card-padding-x);
+}
+/* ===== PageHeader — Breadcrumb Mode ===== */
+.page-header {
+  height: 64px; padding: 0;
+  display: flex; align-items: center; justify-content: space-between;
+  background: transparent; border: none; box-shadow: none;
+  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; cursor: pointer; }
+.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)); }
+/* ===== Gateway Type Tag (面包屑后缀) ===== */
+.gateway-type-tag {
+  margin-left: 16px;
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 10px;
+  font-size: 14px;
+  line-height: 16px;
+  color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.08);
+  border-radius: 4px;
+  font-weight: var(--font-weight-medium);
+}
+/* ===== Tabs ===== */
+.tabs {
+  border-bottom: 1px solid hsl(var(--gray-line));
+}
+.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);
+  background: transparent; border-left: none; border-right: none; border-top: none;
+}
+.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 { display: none; padding: 20px 0; }
+.tab-content.active { display: block; }
+/* ===== Section ===== */
+.list-section { padding-top: 24px; }
+.list-section:first-child { padding-top: 0; }
+.list-section-title {
+  font-size: var(--font-size-lg); font-weight: 600;
+  color: hsl(var(--gray-primary)); margin-bottom: 12px;
+}
+/* ===== StatCard + OverviewStatGrid ===== */
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px;
+}
+.stat-card {
+  position: relative;
+  border-radius: var(--radius-md);
+  padding: 16px;
+  display: flex; flex-direction: column;
+  gap: 6px;
+  cursor: pointer;
+  transition: background var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
+}
+.stat-card:hover {
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+.stat-card-icon {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  transition: color var(--duration-fast);
+}
+.stat-card-link {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  font-size: 12px;
+  line-height: 18px;
+  color: hsl(var(--primary));
+  opacity: 0;
+  transition: opacity var(--duration-fast);
+  cursor: pointer;
+}
+.stat-card:hover .stat-card-link {
+  opacity: 1;
+}
+.stat-card:hover .stat-card-icon {
+  opacity: 0;
+}
+.stat-card-label {
+  font-size: 12px;
+  line-height: 18px;
+  color: hsl(var(--muted-foreground));
+  font-weight: var(--font-weight-normal);
+}
+.stat-card-value {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 600;
+  color: hsl(var(--gray-primary));
+}
+/* 渐变背景 + 装饰 icon 配色（每张卡片不同色系） */
+.stat-card-1 { background: linear-gradient(135deg, hsl(210 100% 97%) 0%, hsl(210 80% 94%) 100%); }
+.stat-card-1:hover { background: linear-gradient(135deg, hsl(210 100% 95%) 0%, hsl(210 80% 91%) 100%); }
+.stat-card-1 .stat-card-icon { color: hsl(210 80% 75% / 0.4); }
+.stat-card-1:hover .stat-card-icon { color: hsl(210 80% 65% / 0.5); }
+.stat-card-2 { background: linear-gradient(135deg, hsl(142 60% 97%) 0%, hsl(142 50% 93%) 100%); }
+.stat-card-2:hover { background: linear-gradient(135deg, hsl(142 60% 95%) 0%, hsl(142 50% 90%) 100%); }
+.stat-card-2 .stat-card-icon { color: hsl(142 50% 70% / 0.4); }
+.stat-card-2:hover .stat-card-icon { color: hsl(142 50% 55% / 0.5); }
+.stat-card-3 { background: linear-gradient(135deg, hsl(262 60% 97%) 0%, hsl(262 50% 93%) 100%); }
+.stat-card-3:hover { background: linear-gradient(135deg, hsl(262 60% 95%) 0%, hsl(262 50% 90%) 100%); }
+.stat-card-3 .stat-card-icon { color: hsl(262 50% 75% / 0.4); }
+.stat-card-3:hover .stat-card-icon { color: hsl(262 50% 65% / 0.5); }
+.stat-card-4 { background: linear-gradient(135deg, hsl(40 80% 97%) 0%, hsl(40 60% 93%) 100%); }
+.stat-card-4:hover { background: linear-gradient(135deg, hsl(40 80% 95%) 0%, hsl(40 60% 90%) 100%); }
+.stat-card-4 .stat-card-icon { color: hsl(40 60% 70% / 0.4); }
+.stat-card-4:hover .stat-card-icon { color: hsl(40 60% 55% / 0.5); }
+.stat-card-5 { background: linear-gradient(135deg, hsl(190 60% 97%) 0%, hsl(190 50% 93%) 100%); }
+.stat-card-5:hover { background: linear-gradient(135deg, hsl(190 60% 95%) 0%, hsl(190 50% 90%) 100%); }
+.stat-card-5 .stat-card-icon { color: hsl(190 50% 70% / 0.4); }
+.stat-card-5:hover .stat-card-icon { color: hsl(190 50% 55% / 0.5); }
+.stat-card-6 { background: linear-gradient(135deg, hsl(340 60% 97%) 0%, hsl(340 50% 94%) 100%); }
+.stat-card-6:hover { background: linear-gradient(135deg, hsl(340 60% 95%) 0%, hsl(340 50% 91%) 100%); }
+.stat-card-6 .stat-card-icon { color: hsl(340 50% 75% / 0.4); }
+.stat-card-6:hover .stat-card-icon { color: hsl(340 50% 65% / 0.5); }
+.stat-card-7 { background: linear-gradient(135deg, hsl(25 70% 97%) 0%, hsl(25 60% 93%) 100%); }
+.stat-card-7:hover { background: linear-gradient(135deg, hsl(25 70% 95%) 0%, hsl(25 60% 90%) 100%); }
+.stat-card-7 .stat-card-icon { color: hsl(25 60% 70% / 0.4); }
+.stat-card-7:hover .stat-card-icon { color: hsl(25 60% 55% / 0.5); }
+/* ===== DescriptionList — 4 cols ===== */
+.description-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0 24px;
+}
+.description-item {
+  display: flex; align-items: center;
+  height: 36px; padding: 8px 0;
+  gap: 12px;
+  min-width: 0;
+}
+.description-label {
+  min-width: 96px;
+  font-size: var(--font-size-base);
+  color: hsl(var(--muted-foreground));
+  font-weight: var(--font-weight-normal);
+  flex-shrink: 0;
+}
+.description-value {
+  font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary));
+  font-weight: var(--font-weight-normal);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  display: flex; align-items: center; gap: 4px;
+  flex: 1; min-width: 0;
+}
+.description-value .copy-btn {
+  width: 16px; height: 16px; padding: 0;
+  background: transparent; border: none; cursor: pointer;
+  color: hsl(var(--muted-foreground));
+  display: inline-flex; align-items: center; justify-content: center;
+  opacity: 0;
+  transition: opacity var(--duration-fast), color var(--duration-fast);
+  flex-shrink: 0;
+}
+.description-item:hover .copy-btn { opacity: 1; }
+.copy-btn:hover { color: hsl(var(--primary)); }
+/* ===== StatusBadge ===== */
+.status-badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: var(--font-size-base);
+}
+.status-dot {
+  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+}
+.status-running .status-dot { background: hsl(var(--success)); }
+.status-creating .status-dot { background: hsl(var(--primary)); animation: pulse 1.5s infinite; }
+.status-stopped .status-dot { background: hsl(var(--gray-disabled)); }
+.status-error .status-dot { background: hsl(var(--destructive)); }
+.status-running { color: hsl(var(--success)); }
+.status-creating { color: hsl(var(--primary)); }
+.status-stopped { color: hsl(var(--gray-disabled)); }
+.status-error { color: hsl(var(--destructive)); }
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+/* ===== Endpoint Table ===== */
+.endpoint-section-title {
+  font-size: var(--font-size-lg); font-weight: 600;
+  color: hsl(var(--gray-primary)); margin-bottom: 12px;
+}
+.data-table-wrapper {
+  width: 100%; overflow-x: auto;
+}
+.data-table {
+  width: 100%; border-collapse: collapse;
+  background: hsl(var(--card));
+}
+.data-table thead th {
+  padding: 12px 12px; text-align: left;
+  font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--gray-muted));
+  border-bottom: 1px solid hsl(var(--gray-line));
+  white-space: nowrap;
+}
+.data-table tbody tr {
+  border-bottom: 1px solid hsl(var(--gray-line));
+  transition: background var(--duration-fast);
+}
+.data-table tbody tr:last-child { border-bottom: none; }
+.data-table tbody tr:hover { background: hsl(var(--gray-muted) / 0.5); }
+.data-table tbody td {
+  padding: 12px 12px;
+  font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary));
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.data-table thead th:first-child,
+.data-table tbody td:first-child { padding-left: 20px; }
+.data-table thead th:last-child,
+.data-table tbody td:last-child { padding-right: 20px; }
+.endpoint-tag {
+  display: inline-flex; align-items: center;
+  padding: 2px 8px;
+  font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
+  color: hsl(var(--primary));
+  background: hsl(var(--info-bg));
+  border: 1px solid hsl(var(--info-border));
+  border-radius: var(--radius-sm);
+}
+.network-tag {
+  display: inline-flex; align-items: center;
+  padding: 2px 8px;
+  font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-sm);
+}
+.network-tag.public {
+  color: hsl(var(--warning));
+  background: hsl(var(--warning-bg));
+  border: 1px solid hsl(var(--warning-border));
+}
+.mono {
+  font-family: var(--font-mono);
+}
+.ports-list {
+  display: flex; flex-direction: column; gap: 2px;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-base);
+  color: hsl(var(--gray-secondary-foreground));
+}
+/* ===== Sonner ===== */
+.toast {
+  position: fixed; top: 24px; left: 50%;
+  transform: translateX(-50%) translateY(-20px);
+  padding: 10px 20px;
+  background: hsl(var(--gray-primary));
+  color: hsl(var(--gray-white));
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  z-index: 1000;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-normal), transform var(--duration-normal);
+}
+.toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+/* ===== Responsive ===== */
+@media (max-width: 1399px) {
+  .description-list { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 1199px) {
+  .description-list { grid-template-columns: repeat(2, 1fr); }
+}
+</style>
+</head>
+<body>
+<!-- ===== Sidebar：实例上下文 14 项菜单 ===== -->
+<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">
+      <!-- 1. 概览（当前活跃） -->
+      <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>
+        概览
+      </a></li>
+      <!-- 2. 模型API -->
+      <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"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+        </span>
+        模型API
+      </a></li>
+      <!-- 3. MCP管理 -->
+      <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="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+        </span>
+        MCP管理
+      </a></li>
+      <!-- 4. AI服务 -->
+      <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"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"/></svg>
+        </span>
+        AI服务
+      </a></li>
+      <!-- 5. 服务 -->
+      <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"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+        </span>
+        服务
+      </a></li>
+      <!-- 6. 路由 -->
+      <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="6" cy="6" r="3"/><circle cx="18" cy="18" r="3"/><path d="M9 6h7a3 3 0 0 1 3 3v1M15 18H8a3 3 0 0 1-3-3v-1"/></svg>
+        </span>
+        路由
+      </a></li>
+      <!-- 7. 消费者 -->
+      <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"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+        </span>
+        消费者
+      </a></li>
+      <!-- 8. 域名 -->
+      <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="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>
+        域名
+      </a></li>
+      <!-- 9. 证书 -->
+      <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"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+        </span>
+        证书
+      </a></li>
+      <!-- 10. 插件 -->
+      <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"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+        </span>
+        插件
+      </a></li>
+      <!-- 11. 观测分析（父菜单，默认展开） -->
+      <li>
+        <a class="sidebar-menu-item expanded" href="#" data-toggle="observability">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></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 show" id="observability">
+          <li><a class="sidebar-menu-item" href="#">模型监控</a></li>
+          <li><a class="sidebar-menu-item" href="#">MCP监控</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">模型监控</a>
+          <a class="sidebar-menu-item" href="#">MCP监控</a>
+        </div>
+      </li>
+      <!-- 12. 代理服务器 -->
+      <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"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
+        </span>
+        代理服务器
+      </a></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="#" id="backToList">i-bp1a4mka2u4rl7b12</a>
+            <span class="separator"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></span>
+            <span class="current">概览</span>
+            <span class="gateway-type-tag">网关类型: AI网关</span>
+          </nav>
+        </div>
+      </div>
+      <!-- Tabs -->
+      <div class="tabs">
+        <ul class="tabs-list">
+          <li><button class="tab-item active" data-tab="basic">基本信息</button></li>
+          <li><button class="tab-item" data-tab="endpoint">接入点</button></li>
+        </ul>
+      </div>
+      <!-- Tab 1: 基本信息 -->
+      <div class="tab-content active" id="tab-basic">
+        <!-- 区块一：网关总览 -->
+        <div class="list-section">
+          <h3 class="list-section-title">网关总览</h3>
+          <div class="stat-grid">
+            <div class="stat-card stat-card-1" data-jump="mcp">
+              <svg class="stat-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg>
+              <span class="stat-card-link">查看详情</span>
+              <div class="stat-card-label">MCP服务总数</div>
+              <div class="stat-card-value">3</div>
+            </div>
+            <div class="stat-card stat-card-2" data-jump="model-api">
+              <svg class="stat-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="16" x="4" y="4" rx="2"/><rect width="6" height="6" x="9" y="9" rx="1"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg>
+              <span class="stat-card-link">查看详情</span>
+              <div class="stat-card-label">模型API总数</div>
+              <div class="stat-card-value">12</div>
+            </div>
+            <div class="stat-card stat-card-3" data-jump="ai-service">
+              <svg class="stat-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
+              <span class="stat-card-link">查看详情</span>
+              <div class="stat-card-label">AI服务总数</div>
+              <div class="stat-card-value">5</div>
+            </div>
+            <div class="stat-card stat-card-4" data-jump="route">
+              <svg class="stat-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
+              <span class="stat-card-link">查看详情</span>
+              <div class="stat-card-label">路由总数</div>
+              <div class="stat-card-value">8</div>
+            </div>
+            <div class="stat-card stat-card-5" data-jump="consumer">
+              <svg class="stat-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 1-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+              <span class="stat-card-link">查看详情</span>
+              <div class="stat-card-label">消费者数</div>
+              <div class="stat-card-value">4</div>
+            </div>
+            <div class="stat-card stat-card-6" data-jump="service">
+              <svg class="stat-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg>
+              <span class="stat-card-link">查看详情</span>
+              <div class="stat-card-label">服务总数</div>
+              <div class="stat-card-value">6</div>
+            </div>
+            <div class="stat-card stat-card-7" data-jump="plugin">
+              <svg class="stat-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.77c.24-.24.581-.353.917-.303.515.077.877.528 1.073 1.01a2.5 2.5 0 1 0 3.259-3.259c-.482-.196-.933-.558-1.01-1.073-.05-.336.062-.676.303-.917l1.525-1.525A2.402 2.402 0 0 1 12 1.998c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z"/></svg>
+              <span class="stat-card-link">查看详情</span>
+              <div class="stat-card-label">插件总数</div>
+              <div class="stat-card-value">15</div>
+            </div>
+          </div>
+        </div>
+        <!-- 区块二：基本信息 -->
+        <div class="list-section">
+          <h3 class="list-section-title">基本信息</h3>
+          <div class="description-list">
+            <div class="description-item">
+              <span class="description-label">实例ID</span>
+              <span class="description-value">
+                <span class="mono" id="instanceId">i-bp1a4mka2u4rl7b12</span>
+                <button class="copy-btn" data-copy="i-bp1a4mka2u4rl7b12" title="复制">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+                </button>
+              </span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">实例名称</span>
+              <span class="description-value">production-gateway</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">状态</span>
+              <span class="description-value">
+                <span class="status-badge status-running">
+                  <span class="status-dot"></span>
+                  运行中
+                </span>
+              </span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">部署架构</span>
+              <span class="description-value">K8s</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">集群</span>
+              <span class="description-value">cluster-prod-01</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">命名空间</span>
+              <span class="description-value">higress-system</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">IngressClass</span>
+              <span class="description-value">higress</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">实例规格</span>
+              <span class="description-value">Standard</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">节点数</span>
+              <span class="description-value">3</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">创建时间</span>
+              <span class="description-value">2026年03月15日 14:30:22</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">修改时间</span>
+              <span class="description-value">2026年05月20日 09:15:38</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">引擎类型</span>
+              <span class="description-value">AI网关</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">引擎版本</span>
+              <span class="description-value mono">2.1.11</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">容器服务集群ID</span>
+              <span class="description-value mono" title="cf5b2b5e2a8c14d...">cf5b2b5e2a8c14d...</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">SLS日志服务</span>
+              <span class="description-value">已开启</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">Prometheus监控</span>
+              <span class="description-value">已开启</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Tab 2: 接入点 -->
+      <div class="tab-content" id="tab-endpoint">
+        <div class="list-section">
+          <h3 class="endpoint-section-title">接入点 (1)</h3>
+          <div class="data-table-wrapper">
+            <table class="data-table">
+              <thead>
+                <tr>
+                  <th>类型</th>
+                  <th>网络类型</th>
+                  <th>ServiceName</th>
+                  <th>External IPs</th>
+                  <th>IP版本</th>
+                  <th>Ports</th>
+                  <th>ClusterIP</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><span class="endpoint-tag">LoadBalancer</span></td>
+                  <td><span class="network-tag public">公网</span></td>
+                  <td class="mono">higress-gateway</td>
+                  <td class="mono">47.108.232.137</td>
+                  <td class="mono">ipv4</td>
+                  <td>
+                    <div class="ports-list">
+                      <span>80:32423/TCP</span>
+                      <span>443:30816/TCP</span>
+                      <span>15001:31060/TCP</span>
+                    </div>
+                  </td>
+                  <td class="mono">172.16.107.115</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+<!-- Sonner -->
+<div class="toast" id="toast">已复制</div>
+<script>
+// Sidebar collapse
+const sidebar = document.querySelector('.sidebar');
+document.querySelector('.sidebar-collapse-btn').addEventListener('click', function() {
+  sidebar.classList.toggle('collapsed');
+});
+document.getElementById('sidebarLogoArea').addEventListener('click', function() {
+  if (sidebar.classList.contains('collapsed')) {
+    sidebar.classList.remove('collapsed');
+  }
+});
+// Sidebar parent 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');
+  });
+});
+// Tabs switching
+document.querySelectorAll('.tab-item').forEach(tab => {
+  tab.addEventListener('click', function() {
+    const target = this.getAttribute('data-tab');
+    document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+    this.classList.add('active');
+    const content = document.getElementById('tab-' + target);
+    if (content) content.classList.add('active');
+  });
+});
+// Sonner
+const toast = document.getElementById('toast');
+let toastTimer = null;
+function showToast(msg) {
+  toast.textContent = msg;
+  toast.classList.add('show');
+  if (toastTimer) clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => toast.classList.remove('show'), 1800);
+}
+// Copy buttons
+document.querySelectorAll('.copy-btn').forEach(btn => {
+  btn.addEventListener('click', function(e) {
+    e.stopPropagation();
+    const text = this.getAttribute('data-copy') || '';
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(() => showToast('已复制'));
+    } else {
+      // Fallback
+      const ta = document.createElement('textarea');
+      ta.value = text; document.body.appendChild(ta);
+      ta.select();
+      try { document.execCommand('copy'); showToast('已复制'); } catch (err) {}
+      document.body.removeChild(ta);
+    }
+  });
+});
+// Stat card click jump (placeholder)
+document.querySelectorAll('.stat-card-value').forEach(v => {
+  v.addEventListener('click', function() {
+    const target = this.getAttribute('data-jump');
+    console.log('跳转到', target);
+  });
+});
+// Breadcrumb back to instance list
+document.getElementById('backToList').addEventListener('click', function(e) {
+  e.preventDefault();
+  console.log('返回实例列表页');
+});
+</script>
+</body>
+</html>