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/detail-ai-gateway-instance.html ADDED Viewed

@@ -0,0 +1,941 @@
+<!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 (resource-detail)
+  ─────────────────────────────────────────────────────────────
+  布局：TWO_COL（实例级 Sidebar + ContentCard 单例容器）
+  Sidebar：14 项实例上下文菜单（12 L1 + 1 父菜单含 2 L2 子项）
+  内容区模式：PageHeader（面包屑）+ InfoCard(嵌入模式B) + Tabs（基本信息 / 接入点 / Token配额）
+  ─────────────────────────────────────────────────────────────
+  组件清单：
+    • PageHeader — 面包屑模式
+    • InfoCard — 嵌入模式B（padding + border-bottom）
+    • Tabs — 页内分段
+    • DescriptionList — 4 列布局
+    • StatusBadge — 状态徽章
+    • CopyableText — 可复制字段
+    • DataTable — 接入点表格
+  ─────────────────────────────────────────────────────────────
+  规范：page-rule-system v7.8.4 / Tokens v4.1 (TrekClaw)
+  验证：无硬编码色值 / 无brand-scale / ContentCard border:none + shadow-sm
+-->
+<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%;
+  --primary-glow: 226.9 100% 68.6%;
+  /* ===== 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%;
+  /* ===== Semantic ===== */
+  --success: 142 76% 36%;
+  --success-bg: 152 82% 96%;
+  --destructive: 0 72% 51%;
+  --destructive-bg: 0 86% 97%;
+  --warning: 40 88% 48%;
+  --warning-bg: 43 100% 94%;
+  --warning-border: 40 92% 68%;
+  --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-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  /* ===== Spacing (v7.5) ===== */
+  --gap-xs: 4px;
+  --btn-padding-x: 16px;
+  --btn-padding-x-sm: 12px;
+  --button-gap: 8px;
+  --tabs-gap: 24px;
+  --card-gap: 16px;
+  --page-container-padding: 16px;
+  --page-container-padding-left: 0px;
+  --card-padding-x: 20px;
+  /* ===== Shadow (v7.6) ===== */
+  --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;
+  /* ===== Layout ===== */
+  --layout-sidebar-width: 240px;
+  /* ===== Motion ===== */
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+}
+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 */
+.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 { 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 */
+.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);
+  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)); }
+.page-header-actions { display: flex; align-items: center; gap: var(--button-gap); }
+/* ===== Buttons ===== */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs);
+  height: var(--input-height); padding: 0 var(--btn-padding-x);
+  font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-md); cursor: pointer;
+  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
+  border: 1px solid hsl(var(--gray-line));
+  background: hsl(var(--card)); color: hsl(var(--gray-primary));
+  white-space: nowrap;
+}
+.btn:hover { background: hsl(var(--gray-muted)); border-color: hsl(var(--gray-line)); }
+.btn-primary {
+  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
+  border-color: hsl(var(--primary));
+}
+.btn-primary:hover { background: hsl(var(--primary-hover)); border-color: hsl(var(--primary-hover)); }
+.btn-ghost { border: none; background: transparent; }
+.btn-ghost:hover { background: hsl(var(--gray-muted)); }
+.btn-icon {
+  width: var(--input-height); padding: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.btn svg { width: 14px; height: 14px; }
+/* ===== InfoCard — 嵌入模式B ===== */
+.info-card {
+  padding: 16px 0;
+  border-bottom: 1px solid hsl(var(--gray-line));
+}
+.info-card-grid {
+  display: flex; align-items: center; gap: 32px;
+  flex-wrap: wrap;
+}
+.info-card-item {
+  display: flex; align-items: center; gap: 8px;
+}
+.info-card-label {
+  font-size: var(--font-size-base);
+  color: hsl(var(--muted-foreground));
+}
+.info-card-value {
+  font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary));
+  font-weight: var(--font-weight-normal);
+}
+/* ===== 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;
+}
+/* ===== 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-running { color: hsl(var(--success)); }
+.status-stopped .status-dot { background: hsl(var(--gray-disabled)); }
+.status-stopped { color: hsl(var(--gray-disabled)); }
+@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.5} }
+/* ===== DataTable ===== */
+.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; }
+/* ===== Tags ===== */
+.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));
+}
+/* ===== Utility ===== */
+.mono { font-family: var(--font-mono); }
+.link { color: hsl(var(--primary)); cursor: pointer; text-decoration: none; }
+.link:hover { text-decoration: underline; }
+.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：实例上下文菜单 ===== -->
+<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">
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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">AI网关实例</a>
+            <span class="separator"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></span>
+            <span class="current">production-gateway</span>
+          </nav>
+        </div>
+        <div class="page-header-actions">
+          <button class="btn btn-primary">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+            编辑
+          </button>
+          <button class="btn">更多操作</button>
+          <button class="btn btn-icon btn-ghost" title="关闭">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+      </div>
+      <!-- InfoCard — 嵌入模式B -->
+      <div class="info-card">
+        <div class="info-card-grid">
+          <div class="info-card-item">
+            <span class="info-card-label">状态</span>
+            <span class="status-badge status-running"><span class="status-dot"></span>运行中</span>
+          </div>
+          <div class="info-card-item">
+            <span class="info-card-label">网关类型</span>
+            <span class="info-card-value">AI网关</span>
+          </div>
+          <div class="info-card-item">
+            <span class="info-card-label">部署架构</span>
+            <span class="info-card-value">K8s</span>
+          </div>
+          <div class="info-card-item">
+            <span class="info-card-label">实例规格</span>
+            <span class="info-card-value">Standard · 3 节点</span>
+          </div>
+          <div class="info-card-item">
+            <span class="info-card-label">创建时间</span>
+            <span class="info-card-value">2026-03-15 14:30</span>
+          </div>
+        </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>
+          <li><button class="tab-item" data-tab="quota">Token配额</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="description-list">
+            <div class="description-item">
+              <span class="description-label">实例ID</span>
+              <span class="description-value">
+                <span class="mono">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">AI网关</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 mono">2.1.11</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">容器服务集群ID</span>
+              <span class="description-value mono" title="cf5b2b5e2a8c14d7e9f3b2a1">cf5b2b5e2a8c14d...</span>
+            </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">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 class="description-item">
+              <span class="description-label">AI缓存</span>
+              <span class="description-value">已开启</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">内容安全</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="list-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>
+                    </div>
+                  </td>
+                  <td class="mono">172.16.107.115</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <!-- Tab 3: Token配额 -->
+      <div class="tab-content" id="tab-quota">
+        <div class="list-section">
+          <h3 class="list-section-title">Token 配额概览</h3>
+          <div class="description-list">
+            <div class="description-item">
+              <span class="description-label">配额策略</span>
+              <span class="description-value">按消费者分配</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">全局限额</span>
+              <span class="description-value">1,000,000 tokens/天</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">已用量</span>
+              <span class="description-value">356,780 tokens</span>
+            </div>
+            <div class="description-item">
+              <span class="description-label">剩余额度</span>
+              <span class="description-value">643,220 tokens</span>
+            </div>
+          </div>
+        </div>
+        <div class="list-section">
+          <h3 class="list-section-title">消费者配额分配</h3>
+          <div class="data-table-wrapper">
+            <table class="data-table">
+              <thead>
+                <tr>
+                  <th>消费者</th>
+                  <th>日限额</th>
+                  <th>今日已用</th>
+                  <th>使用率</th>
+                  <th>状态</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>frontend-app</td>
+                  <td>300,000</td>
+                  <td>156,200</td>
+                  <td>52.1%</td>
+                  <td><span class="status-badge status-running"><span class="status-dot"></span>正常</span></td>
+                </tr>
+                <tr>
+                  <td>backend-service</td>
+                  <td>500,000</td>
+                  <td>178,580</td>
+                  <td>35.7%</td>
+                  <td><span class="status-badge status-running"><span class="status-dot"></span>正常</span></td>
+                </tr>
+                <tr>
+                  <td>data-pipeline</td>
+                  <td>200,000</td>
+                  <td>22,000</td>
+                  <td>11.0%</td>
+                  <td><span class="status-badge status-running"><span class="status-dot"></span>正常</span></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', () => {
+  sidebar.classList.toggle('collapsed');
+});
+document.getElementById('sidebarLogoArea').addEventListener('click', () => {
+  if (sidebar.classList.contains('collapsed')) sidebar.classList.remove('collapsed');
+});
+// Sidebar parent menu toggle
+document.querySelectorAll('.sidebar-menu-item[data-toggle]').forEach(item => {
+  item.addEventListener('click', function(e) {
+    e.preventDefault();
+    this.classList.toggle('expanded');
+    const target = document.getElementById(this.getAttribute('data-toggle'));
+    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');
+    // URL hash sync
+    history.replaceState(null, '', '#' + target);
+  });
+});
+// Restore tab from hash
+(function() {
+  const hash = location.hash.replace('#', '');
+  if (hash) {
+    const tabBtn = document.querySelector(`.tab-item[data-tab="${hash}"]`);
+    if (tabBtn) tabBtn.click();
+  }
+})();
+// 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 {
+      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);
+    }
+  });
+});
+// Breadcrumb back
+document.getElementById('backToList').addEventListener('click', function(e) {
+  e.preventDefault();
+  console.log('返回实例列表页');
+});
+</script>
+</body>
+</html>