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

@teamix-evo/skills 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

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

@@ -0,0 +1,1361 @@
+<!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 Table List Reference）
+  ─────────────────────────────────────────────────────────────
+  用途：AI 生成表格列表页时的基础参考，展示完整页面骨架与组件组合
+  ─────────────────────────────────────────────────────────────
+  布局：TWO_COL（Sidebar + ContentCard 单例容器）
+  Sidebar：完整 L1 框架（折叠/展开 240px↔68px / flyout / sub-menu）
+  内容区模式：D-TABLE（standard-list）
+  ─────────────────────────────────────────────────────────────
+  组件清单：
+    • PageHeader
+    • ActionToolbar — 含 SearchCombo (来源 _shared/search-combo-spec.md)
+    • DataTable — 含 Checkbox列、可排序列、状态 Badge、操作列
+    • Pagination — 10 条/页，含前往跳转 + 每页选择器
+  ─────────────────────────────────────────────────────────────
+  规范来源：pages/list-page/patterns/standard-list.md
+  Tokens 版本：v7.8.4（分层 padding 模型 v7.5 + v7.6 ContentCard 表面规则 + v7.8.4 字体族变量/Button token）
+-->
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --primary: 218.6 100% 46.7%;
+  --primary-foreground: 0 0% 100%;
+  --primary-hover: 218.6 100% 42%;
+  --primary-click: 218.6 100% 37.5%;
+  --gray-primary: 220 9% 7%;
+  --gray-primary-foreground: 210 33% 99%;
+  --gray-secondary-foreground: 216 4% 26%;
+  --muted-foreground: 216 2% 45%;
+  --gray-disabled: 210 3% 63%;
+  --gray-line: 210 9% 91%;
+  --gray-sidebar-accent: 210 12% 93%;
+  --gray-muted: 220 18% 97%;
+  --gray-white: 0 0% 100%;
+  /* Legacy 别名（v7.4 向后兼容） */
+  --gray-title: 220 9% 7%;
+  --gray-secondary: 216 4% 26%;
+  --gray-tertiary: 216 2% 45%;
+  --gray-border: 210 9% 91%;
+  --gray-fill: 220 18% 97%;
+  --gray-bg-dark: 220 18% 97%;
+  --gray-bg: 220 18% 97%;
+  --success: 142 76.6% 43.1%;
+  --success-bg: 142 84% 95%;
+  --success-border: 144 65% 76%;
+  --warning: 40 88% 48%;
+  --warning-bg: 43 100% 94%;
+  --warning-border: 40 92% 68%;
+  --destructive: 0 88.7% 53.1%;
+  --destructive-bg: 0 93.3% 97.5%;
+  --destructive-border: 0 88.7% 86.1%;
+  --info: 217 91% 53%;
+  --info-bg: 214 100% 97%;
+  --info-border: 213 94% 82.5%;
+  --background: 220 18% 97%;
+  --card: 0 0% 100%;
+  --card-foreground: 220 9% 7%;
+  --border: 210 9% 91%;
+  --ring: 218.6 100% 46.7%;
+  --sidebar: 220 18% 97%;
+  --sidebar-foreground: 220 9% 7%;
+  --sidebar-active: 210 12% 93%;
+  --sidebar-active-foreground: 220 9% 7%;
+  --sidebar-hover: 220 18% 97%;
+  --sidebar-group: 216 2% 45%;
+  --sidebar-item: 220 9% 7%;
+  --sidebar-item-muted: 216 4% 26%;
+  --sidebar-border: 210 9% 91%;
+  --radius: 1rem;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --gap-xs: 4px;
+  --btn-padding-x: 16px;
+  --btn-padding-x-sm: 12px;
+  --button-gap: 8px;
+  --tabs-gap: 24px;
+  --card-gap: 16px;
+  --page-container-gap: 16px;
+  --page-container-padding: 16px;
+  --page-container-padding-left: 0px;
+  --card-padding-x: 20px;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --font-size-base: 12px;
+  --font-size-lg: 14px;
+  --font-size-xl: 16px;
+  --font-size-2xl: 18px;
+  --font-size-page-header: 18px;
+  --font-sans: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-black: 900;
+  --input-height: 32px;
+  --input-font-size: 12px;
+  --input-line-height: 18px;
+  --input-radius: 8px;
+  --layout-sidebar-width: 240px;
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --easing-ease: ease;
+}
+body {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary));
+  background: hsl(var(--background));
+  min-height: 100vh;
+}
+/* ===== Sidebar ===== */
+.sidebar {
+  position: fixed; top: 0; left: 0; bottom: 0;
+  width: var(--layout-sidebar-width);
+  background: hsl(var(--sidebar));
+  z-index: 100;
+  display: flex; flex-direction: column;
+  overflow: hidden;
+  transition: width 0.2s ease;
+}
+.sidebar-header {
+  height: 56px; padding: 0 16px;
+  display: flex; align-items: center; gap: var(--gap-xs);
+  flex-shrink: 0;
+}
+.sidebar-logo {
+  height: 28px; flex-shrink: 0;
+  display: flex; align-items: center;
+  overflow: hidden;
+}
+.sidebar-logo img {
+  height: 28px; width: auto; display: block;
+}
+.sidebar-logo .collapsed-logo {
+  display: none; width: 30px; height: 30px;
+}
+.sidebar-logo .expand-logo {
+  display: none; width: 18px; height: 18px;
+  color: hsl(var(--muted-foreground));
+}
+.sidebar-collapse-btn {
+  margin-left: auto; width: 18px; height: 18px;
+  background: none; border: none; padding: 0; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  color: hsl(var(--muted-foreground)); flex-shrink: 0;
+}
+.sidebar-collapse-btn svg { width: 18px; height: 18px; }
+/* ===== Sidebar Collapsed State ===== */
+.sidebar.collapsed { width: 68px; overflow: visible; }
+.sidebar.collapsed .sidebar-header { padding: 0 12px; justify-content: center; }
+.sidebar.collapsed .sidebar-logo { cursor: pointer; }
+.sidebar.collapsed .sidebar-logo img { display: none; }
+.sidebar.collapsed .sidebar-logo .collapsed-logo { display: block; }
+.sidebar.collapsed .sidebar-logo:hover .collapsed-logo { display: none; }
+.sidebar.collapsed .sidebar-logo:hover .expand-logo { display: block; }
+.sidebar.collapsed .sidebar-collapse-btn { display: none; }
+.sidebar.collapsed .sidebar-content { padding: 12px 0; overflow-y: auto; overflow-x: hidden; }
+.sidebar.collapsed .sidebar-menu { padding: 0; }
+.sidebar.collapsed .sidebar-menu > li { display: flex; justify-content: center; }
+.sidebar.collapsed .sidebar-menu > li > a.sidebar-menu-item {
+  justify-content: center; padding: 0; width: 40px; height: 40px;
+  border-radius: var(--radius-md); position: relative; flex-shrink: 0;
+  gap: 0;
+}
+.sidebar.collapsed .sidebar-menu > li > a.sidebar-menu-item .item-icon { margin: 0; }
+.sidebar.collapsed .sidebar-menu > li > a > span:not(.item-icon),
+.sidebar.collapsed .sidebar-menu > li > a > .expand-icon,
+.sidebar.collapsed .sidebar-menu-item:not(.item-icon):after { display: none; }
+/* 隐藏文字节点（直接文本） */
+.sidebar.collapsed .sidebar-menu > li > a { font-size: 0; }
+.sidebar.collapsed .sidebar-menu > li > a > .item-icon { font-size: var(--font-size-lg); }
+.sidebar.collapsed .sidebar-sub-menu { display: none !important; }
+.sidebar.collapsed .sidebar-divider { margin: 0 14px; }
+.sidebar.collapsed .sidebar-footer { padding: 12px 10px 16px; justify-content: center; }
+.sidebar.collapsed .sidebar-username,
+.sidebar.collapsed .sidebar-more { display: none; }
+/* ===== Sidebar Collapsed Flyout (hover 浮层展示二级菜单) ===== */
+.sidebar.collapsed .sidebar-menu > li { position: relative; }
+.sidebar.collapsed .sidebar-menu > li:hover > .sidebar-flyout {
+  display: block;
+}
+.sidebar-flyout {
+  display: none;
+  position: absolute; left: 100%; top: 0;
+  min-width: 160px; padding: 4px;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--gray-line));
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  z-index: 200;
+}
+.sidebar-flyout .sidebar-menu-item {
+  height: 36px; padding: 0 12px;
+  font-size: var(--font-size-base) !important;
+  font-weight: var(--font-weight-normal);
+  color: hsl(var(--gray-primary));
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+}
+.sidebar-flyout .sidebar-menu-item:hover {
+  background: hsl(var(--gray-muted));
+}
+/* Main content 响应 sidebar 收起 */
+.main-content {
+  margin-left: var(--layout-sidebar-width);
+  min-height: 100vh;
+  transition: margin-left 0.2s ease;
+}
+.sidebar.collapsed ~ .main-content { margin-left: 68px; }
+.sidebar-product {
+  font-size: var(--font-size-xl); font-weight: var(--font-weight-black);
+  color: hsl(var(--sidebar-foreground)); letter-spacing: -0.025em;
+  white-space: nowrap; line-height: 1;
+}
+.sidebar-content {
+  flex: 1; overflow-y: auto; padding: 12px 0;
+}
+/* twoLevel 变体：去掉 sidebar-group-label，主菜单之间间距由 li padding 提供；保留 sidebar-group-label 样式以兼容其他页面。 */
+.sidebar-group-label {
+  padding: 0 16px; height: 26px; line-height: 26px;
+  font-size: var(--font-size-base); font-weight: var(--font-weight-normal);
+  color: hsl(var(--sidebar-group));
+}
+.sidebar-group-label:not(:first-child) { margin-top: 16px; }
+.sidebar-menu { list-style: none; padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
+.sidebar-menu-item {
+  display: flex; align-items: center; gap: var(--button-gap);
+  padding: 0 12px; height: 40px;
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-lg); font-weight: var(--font-weight-medium);
+  color: hsl(var(--sidebar-item-muted));
+  text-decoration: none; cursor: pointer;
+  transition: background var(--duration-fast), color var(--duration-fast);
+  white-space: nowrap;
+}
+.sidebar-menu-item:hover {
+  background: hsl(var(--sidebar-hover));
+  color: hsl(var(--sidebar-item));
+}
+.sidebar-menu-item.active {
+  background: hsl(var(--sidebar-active));
+  color: hsl(var(--sidebar-active-foreground));
+}
+.sidebar-menu-item .item-icon {
+  width: 16px; height: 16px; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+}
+.sidebar-menu-item .expand-icon {
+  margin-left: auto; width: 16px; height: 16px;
+  transition: transform var(--duration-fast);
+}
+.sidebar-menu-item.expanded .expand-icon { transform: rotate(90deg); }
+.sidebar-sub-menu {
+  list-style: none; padding: 0 0 0 24px;
+  display: none;
+}
+/* twoLevel 变体：子菜单与主菜单在同一列上下对齐。sub-menu 不再加左 padding，由子菜单项自身 padding-left = 12+16+8 = 36px 代替主菜单的 "padding+icon+gap"，使文字起点 x 坐标与主菜单一致。 */
+.sidebar-menu > li > .sidebar-sub-menu { padding-left: 0; }
+.sidebar-sub-menu.show { display: block; }
+.sidebar-sub-menu .sidebar-menu-item {
+  height: 36px; font-size: var(--font-size-base); font-weight: var(--font-weight-normal);
+  /* twoLevel 变体对齐规则：36px = 主菜单 padding-left(12) + item-icon(16) + gap(8)，使文字与主菜单文字上下对齐。 */
+  padding-left: 36px;
+}
+.sidebar-divider {
+  height: 1px; background: hsl(var(--sidebar-border));
+  margin: 0 12px; flex-shrink: 0;
+}
+.sidebar-footer {
+  flex-shrink: 0; display: flex; align-items: center;
+  gap: var(--button-gap); padding: 12px 12px 16px 24px;
+}
+.sidebar-avatar {
+  width: 28px; height: 28px; border-radius: 50%;
+  background: hsl(var(--sidebar-active));
+  display: flex; align-items: center; justify-content: center;
+  font-size: var(--font-size-base); font-weight: 600;
+  color: hsl(var(--gray-primary)); flex-shrink: 0;
+}
+.sidebar-username {
+  flex: 1; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium);
+  color: hsl(var(--sidebar-item)); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap;
+}
+.sidebar-more {
+  width: 28px; height: 28px; border-radius: var(--radius-sm);
+  border: none; background: transparent; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  color: hsl(var(--muted-foreground));
+}
+.sidebar-more:hover { background: hsl(var(--sidebar-hover)); color: hsl(var(--gray-primary)); }
+/* ===== Main Content ===== */
+.page-container {
+  padding: var(--page-container-padding) var(--page-container-padding) var(--page-container-padding) var(--page-container-padding-left);
+}
+.content-wrapper {
+  /* wraps the card */
+}
+.card {
+  background: hsl(var(--card));
+  border-radius: var(--radius-lg);
+  /* v7.6：去掉 1px border，使用最弱阴影 var(--shadow-sm) */
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
+  overflow: hidden;
+  display: flex; flex-direction: column;
+  max-height: calc(100vh - 40px);
+  padding: 0 var(--card-padding-x);
+}
+.card-scrollable {
+  overflow-y: auto; flex: 1;
+  --wc-pad-x: var(--card-padding-x);
+}
+/* ===== PageHeader ===== */
+.sticky-wrapper {
+  position: sticky; top: 0; z-index: 10;
+  flex-shrink: 0;
+}
+.page-header {
+  height: 64px; padding: 0;
+  display: flex; align-items: center; justify-content: space-between;
+  background: transparent; border: none;
+}
+.page-header-title {
+  font-size: var(--font-size-page-header); font-weight: var(--font-weight-medium);
+  line-height: 36px; color: hsl(var(--gray-primary));
+}
+/* ===== ActionToolbar ===== */
+.action-toolbar {
+  display: flex; align-items: center; gap: var(--button-gap);
+  padding: 0;
+  padding-bottom: var(--card-gap);
+  flex-wrap: nowrap;
+}
+.action-toolbar .left-actions { display: flex; align-items: center; gap: var(--button-gap); }
+/* SearchCombo 固定跟随在 left-actions 后方，间距 20px（独立于 toolbar gap） */
+.action-toolbar > .search-combo { margin-left: calc(20px - var(--button-gap)); }
+.action-toolbar .right-tools {
+  margin-left: auto; display: flex; align-items: center; gap: var(--button-gap);
+}
+/* ===== Buttons ===== */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs);
+  height: var(--input-height); padding: 0 var(--btn-padding-x);
+  border-radius: var(--radius-md); font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium); border: none; cursor: pointer;
+  transition: background var(--duration-fast), opacity var(--duration-fast);
+  white-space: nowrap;
+}
+.btn-primary {
+  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
+}
+.btn-primary:hover { background: hsl(var(--primary-hover)); }
+.btn-outline {
+  background: transparent; color: hsl(var(--gray-primary));
+  border: 1px solid hsl(var(--gray-line));
+}
+.btn-outline:hover { background: hsl(var(--gray-muted)); }
+.btn-ghost {
+  background: transparent; color: hsl(var(--gray-secondary-foreground));
+}
+.btn-ghost:hover { background: hsl(var(--gray-muted)); color: hsl(var(--gray-primary)); }
+.btn-icon {
+  width: var(--input-height); height: var(--input-height); padding: 0;
+  background: transparent; border: 1px solid hsl(var(--gray-line));
+  border-radius: var(--radius-md); cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  color: hsl(var(--gray-secondary-foreground));
+}
+.btn-icon:hover { background: hsl(var(--gray-muted)); color: hsl(var(--gray-primary)); }
+/* ===== SearchCombo ===== */
+.search-combo {
+  display: flex; align-items: center;
+  border: 1px solid hsl(var(--border)); border-radius: 6px;
+  height: var(--input-height); min-width: 200px;
+  transition: border-color var(--duration-fast);
+}
+.search-combo:focus-within {
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1);
+}
+.search-combo:hover { border-color: hsl(var(--muted-foreground)); }
+.search-dimension {
+  border: none; padding-left: 8px; font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary)); outline: none; appearance: none;
+  background: transparent; cursor: pointer; min-width: 60px;
+}
+.search-divider {
+  width: 1px; height: 20px; background: hsl(var(--border)); flex-shrink: 0;
+}
+.search-input {
+  border: none; padding: 0 8px; font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary)); outline: none; flex: 1;
+  min-width: 80px; background: transparent;
+}
+.search-input::placeholder { color: hsl(var(--muted-foreground)); }
+.search-btn {
+  border: none; background: transparent; padding: 0 8px;
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  color: hsl(var(--gray-secondary-foreground));
+}
+.search-btn:hover { color: hsl(var(--primary)); }
+/* ===== DataTable ===== */
+.data-table-wrapper {
+  width: 100%; overflow-x: auto;
+}
+.data-table {
+  width: 100%; border-collapse: collapse;
+}
+.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(--gray-secondary-foreground));
+  background: hsl(var(--gray-muted));
+  border-bottom: 1px solid hsl(var(--gray-line));
+  white-space: nowrap; position: sticky; top: 0; z-index: 5;
+  user-select: none;
+}
+.data-table thead th.sortable { cursor: pointer; }
+.data-table thead th.sortable:hover { color: hsl(var(--gray-primary)); }
+.data-table thead th .sort-icon {
+  display: inline-block; width: 12px; height: 12px; margin-left: 4px;
+  vertical-align: middle; opacity: 0.4;
+}
+.data-table thead th.sort-active .sort-icon { opacity: 1; color: hsl(var(--primary)); }
+.data-table tbody tr {
+  border-bottom: 1px solid hsl(var(--gray-line));
+  transition: background var(--duration-fast);
+}
+/* dropdown 展开时提升当前行层级，防止浮层被下方行遮挡 */
+.data-table tbody tr.has-dropdown-open { position: relative; z-index: 10; }
+.data-table tbody tr:hover { background: hsl(var(--gray-muted)); }
+.data-table tbody tr:hover td.col-action { background: hsl(var(--gray-muted)); }
+.data-table tbody tr:last-child { border-bottom: none; }
+.data-table tbody td {
+  padding: 12px 12px; font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary)); vertical-align: middle;
+}
+/* 首末列额外缩进 20px：表格作为密集数据区，享有除 Card.paddingX 之外的 20px 视觉呈息 */
+.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; }
+.data-table .col-checkbox { width: 48px; }
+.data-table .col-id { min-width: 200px; }
+.data-table .col-status { min-width: 100px; }
+.data-table .col-access { min-width: 220px; }
+.data-table .col-version { min-width: 100px; }
+.data-table .col-cluster { min-width: 120px; }
+.data-table .col-namespace { min-width: 140px; }
+.data-table .col-time { min-width: 160px; }
+.data-table .col-action { width: 140px; text-align: left; position: sticky; right: 0; background: hsl(var(--card)); }
+.data-table thead th.col-action { background: hsl(var(--gray-muted)); text-align: left; }
+.data-table tbody td.col-action { text-align: left; }
+/* ===== Checkbox ===== */
+.checkbox {
+  width: 16px; height: 16px; border-radius: var(--radius-sm);
+  border: 1px solid hsl(var(--gray-line)); cursor: pointer;
+  appearance: none; -webkit-appearance: none;
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: all var(--duration-fast);
+}
+.checkbox:checked {
+  background: hsl(var(--primary)); border-color: hsl(var(--primary));
+}
+.checkbox:checked::after {
+  content: ''; width: 10px; height: 7px;
+  border-left: 2px solid white; border-bottom: 2px solid white;
+  transform: rotate(-45deg) translateY(-1px);
+}
+/* ===== Status Badge ===== */
+.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(--warning)); animation: pulse 1.5s infinite; }
+.status-stopped .status-dot { background: hsl(var(--gray-disabled)); }
+.status-error .status-dot { background: hsl(var(--destructive)); }
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+/* ===== Access Display ===== */
+.access-item {
+  display: inline-flex; align-items: center; gap: 4px;
+}
+.access-tag {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 1px 4px; border-radius: var(--radius-sm);
+  font-size: 10px; font-weight: var(--font-weight-medium);
+  line-height: 16px;
+}
+.access-tag.public {
+  background: hsl(var(--warning-bg)); color: hsl(var(--warning));
+  border: 1px solid hsl(var(--warning-border));
+}
+.access-tag.private {
+  background: hsl(var(--info-bg)); color: hsl(var(--info));
+  border: 1px solid hsl(var(--info-border));
+}
+.access-ip {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground));
+}
+.access-type {
+  font-size: var(--font-size-base); color: hsl(var(--muted-foreground));
+}
+.access-list { display: flex; flex-direction: column; gap: 2px; }
+/* ===== ID/Name ===== */
+.id-name { display: flex; flex-direction: column; gap: 2px; }
+.id-name-name {
+  font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
+  color: hsl(var(--gray-primary));
+}
+.id-name-id {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground));
+}
+/* ===== Action Column ===== */
+.action-link {
+  color: hsl(var(--primary)); text-decoration: none; cursor: pointer;
+  font-size: var(--font-size-base); vertical-align: middle;
+}
+.action-link:hover { text-decoration: underline; }
+.action-divider {
+  display: inline-block; width: 1px; height: 12px;
+  background: hsl(var(--gray-line)); margin: 0 6px; vertical-align: middle;
+}
+.action-more {
+  position: relative; display: inline-block; vertical-align: middle;
+}
+.action-more-btn {
+  border: none; background: transparent; cursor: pointer;
+  color: hsl(var(--gray-secondary-foreground)); padding: 2px 4px;
+  border-radius: var(--radius-sm); font-size: var(--font-size-base);
+}
+.action-more-btn:hover { background: hsl(var(--gray-muted)); }
+.action-dropdown {
+  position: absolute; right: 0; top: 100%; z-index: 50;
+  background: hsl(var(--card)); border: 1px solid hsl(var(--gray-line));
+  border-radius: var(--radius-md); box-shadow: 0 6px 24px rgba(0,0,0,0.1);
+  display: none; padding: 4px; min-width: 128px; white-space: nowrap;
+}
+.action-dropdown.show { display: block; }
+.action-dropdown-item {
+  display: flex; align-items: center; width: 100%; height: 32px; padding: 0 8px;
+  font-size: var(--font-size-base); text-align: left;
+  border: none; background: transparent; cursor: pointer;
+  color: hsl(var(--gray-primary)); border-radius: var(--radius-sm);
+  white-space: nowrap;
+}
+.action-dropdown-item:hover { background: hsl(var(--gray-muted)); }
+.action-dropdown-item.danger { color: hsl(var(--destructive)); }
+.action-dropdown-item.danger:hover { background: hsl(var(--destructive) / 0.1); }
+.action-dropdown-item:disabled {
+  opacity: 0.45; pointer-events: none; cursor: not-allowed;
+}
+/* ===== BulkActionBar ===== */
+.bulk-action-bar {
+  display: none; align-items: center; gap: var(--button-gap);
+  padding: 10px 0; background: #ffffff;
+  border-top: 1px solid hsl(var(--gray-line));
+}
+.bulk-action-bar.show { display: flex; }
+.bulk-action-bar .bulk-actions { display: flex; gap: var(--button-gap); }
+.bulk-action-bar .bulk-stats {
+  display: flex; align-items: center; gap: 16px;
+  margin-left: auto;
+}
+.bulk-action-bar .bulk-count {
+  font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground));
+}
+/* ===== Pagination ===== */
+.pagination-wrapper {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 0; border-top: 1px solid hsl(var(--gray-line));
+}
+.pagination-info {
+  font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground));
+}
+.pagination-right {
+  display: flex; align-items: center; gap: var(--button-gap);
+}
+.pagination {
+  display: flex; align-items: center; gap: 4px;
+}
+.pagination-btn {
+  min-width: 32px; height: 32px; padding: 0 6px;
+  border: 1px solid hsl(var(--gray-line)); border-radius: var(--radius-md);
+  background: hsl(var(--card)); color: hsl(var(--gray-primary));
+  font-size: var(--font-size-base); cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: all var(--duration-fast);
+}
+.pagination-btn:hover:not(:disabled):not(.active) {
+  background: hsl(var(--gray-muted)); border-color: hsl(var(--gray-line));
+}
+.pagination-btn.active {
+  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
+  border-color: hsl(var(--primary)); font-weight: var(--font-weight-medium);
+}
+.pagination-btn:disabled {
+  opacity: 0.45; cursor: not-allowed;
+}
+.pagination-size select {
+  height: var(--input-height); padding: 0 8px;
+  border: 1px solid hsl(var(--gray-line)); border-radius: var(--radius-md);
+  font-size: var(--font-size-base); color: hsl(var(--gray-primary));
+  background: hsl(var(--card)); appearance: none; cursor: pointer;
+}
+.pagination-goto {
+  display: flex; align-items: center; gap: 4px;
+  margin-left: 4px;
+  font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground));
+}
+.pagination-goto-input {
+  width: 40px; height: 32px; padding: 0 4px;
+  border: 1px solid hsl(var(--gray-line)); border-radius: var(--radius-md);
+  font-size: var(--font-size-base); text-align: center;
+  color: hsl(var(--gray-primary)); background: hsl(var(--card));
+  outline: none; transition: border-color 200ms;
+}
+.pagination-goto-input:focus {
+  border-color: hsl(var(--primary));
+}
+.pagination-goto-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 32px; padding: 0 8px;
+  border-radius: var(--radius-md); border: none;
+  background: transparent; color: hsl(var(--gray-secondary-foreground));
+  cursor: pointer; font-size: var(--font-size-base); font-family: inherit;
+  transition: background var(--duration-fast), color var(--duration-fast);
+}
+.pagination-goto-btn:hover {
+  background: hsl(var(--gray-muted)); color: hsl(var(--gray-primary));
+}
+</style>
+</head>
+<body>
+<!-- ===== Sidebar ===== -->
+<aside class="sidebar">
+  <div class="sidebar-header">
+    <div class="sidebar-logo" id="sidebarLogoArea">
+      <img src="./_assets/op-ai-gateway-logo.svg" alt="OP AI Gateway" />
+      <img class="collapsed-logo" src="./_assets/op-logo-collapsed.png" alt="OP" />
+      <svg class="expand-logo" viewBox="0 0 1024 1024" fill="currentColor" width="18" height="18"><path d="M151.68 616.96l82.56-82.56c12.8-12.8 12.8-32.64 0-45.44L151.68 406.4c-19.84-19.84-54.4-5.76-54.4 22.4v165.76c-0.64 28.16 33.92 42.88 54.4 22.4zM128.64 288h768c14.08 0 32-14.08 32-32s-17.92-32-32-32h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32zM896.64 736h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32h768c14.08 0 32-14.08 32-32s-17.28-32-32-32zM896.64 480h-480c-14.08 0-32 14.08-32 32s17.92 32 32 32h480c14.08 0 32-14.08 32-32s-17.28-32-32-32z"/></svg>
+    </div>
+    <button class="sidebar-collapse-btn" title="收起侧边栏">
+      <svg viewBox="0 0 1024 1024" fill="currentColor" width="18" height="18"><path d="M874.24 406.4l-82.56 82.56c-12.8 12.8-12.8 32.64 0 45.44l82.56 82.56c19.84 19.84 54.4 5.76 54.4-22.4V428.8c0-28.16-33.92-42.88-54.4-22.4zM128.64 288h768c14.08 0 32-14.08 32-32s-17.92-32-32-32h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32zM896.64 736h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32h768c14.08 0 32-14.08 32-32s-17.28-32-32-32zM128.64 544h480c14.08 0 32-14.08 32-32s-17.92-32-32-32h-480c-14.08 0-32 14.08-32 32s17.92 32 32 32z"/></svg>
+    </button>
+  </div>
+  <!-- sidebar：按 PRD 导航结构，L1 为一级菜单，L2 为二级子菜单。 -->
+  <div class="sidebar-content">
+    <ul class="sidebar-menu">
+      <!-- L1: AI 网关（叶子菜单，当前活跃） -->
+      <li><a class="sidebar-menu-item active" href="#">
+        <span class="item-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+        </span>
+        AI 网关
+      </a></li>
+      <!-- L1: API 网关（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item expanded" href="#" data-toggle="api-gateway">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
+          </span>
+          API 网关
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu show" id="api-gateway">
+          <li><a class="sidebar-menu-item" href="#">实例管理</a></li>
+          <li><a class="sidebar-menu-item" href="#">共享实例管理</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">实例管理</a>
+          <a class="sidebar-menu-item" href="#">共享实例管理</a>
+        </div>
+      </li>
+      <!-- L1: 云原生网关（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item" href="#" data-toggle="cloud-native-gw">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>
+          </span>
+          云原生网关
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu" id="cloud-native-gw">
+          <li><a class="sidebar-menu-item" href="#">实例列表</a></li>
+          <li><a class="sidebar-menu-item" href="#">Nginx Ingress 迁移</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">实例列表</a>
+          <a class="sidebar-menu-item" href="#">Nginx Ingress 迁移</a>
+        </div>
+      </li>
+      <!-- L1: 集群管理（叶子菜单） -->
+      <li><a class="sidebar-menu-item" href="#">
+        <span class="item-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
+        </span>
+        集群管理
+      </a></li>
+      <!-- L1: 级联管理（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item" href="#" data-toggle="cascade-mgmt">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6v12M12 3v18M20 6v12M2 6h4M10 3h4M18 6h4M2 12h4M10 9h4M18 12h4M2 18h4M10 21h4M18 18h4"/></svg>
+          </span>
+          级联管理
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu" id="cascade-mgmt">
+          <li><a class="sidebar-menu-item" href="#">级联网关</a></li>
+          <li><a class="sidebar-menu-item" href="#">级联链路</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">级联网关</a>
+          <a class="sidebar-menu-item" href="#">级联链路</a>
+        </div>
+      </li>
+      <!-- L1: 容灾管理（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item" href="#" data-toggle="disaster-mgmt">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+          </span>
+          容灾管理
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu" id="disaster-mgmt">
+          <li><a class="sidebar-menu-item" href="#">容灾网关实例</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">容灾网关实例</a>
+        </div>
+      </li>
+      <!-- L1: 认证授权（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item" href="#" data-toggle="auth-mgmt">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
+          </span>
+          认证授权
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu" id="auth-mgmt">
+          <li><a class="sidebar-menu-item" href="#">用户管理</a></li>
+          <li><a class="sidebar-menu-item" href="#">角色管理</a></li>
+          <li><a class="sidebar-menu-item" href="#">权限插件</a></li>
+          <li><a class="sidebar-menu-item" href="#">访问凭证</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">用户管理</a>
+          <a class="sidebar-menu-item" href="#">角色管理</a>
+          <a class="sidebar-menu-item" href="#">权限插件</a>
+          <a class="sidebar-menu-item" href="#">访问凭证</a>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div class="sidebar-divider"></div>
+  <div class="sidebar-footer">
+    <div class="sidebar-avatar">A</div>
+    <span class="sidebar-username">admin</span>
+    <button class="sidebar-more">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
+    </button>
+  </div>
+</aside>
+<!-- ===== Main Content ===== -->
+<div class="main-content">
+  <div class="page-container">
+    <div class="content-wrapper">
+      <div class="card">
+        <div class="card-scrollable">
+          <!-- PageHeader -->
+          <div class="sticky-wrapper">
+            <header class="page-header">
+              <h1 class="page-header-title">网关实例</h1>
+            </header>
+          </div>
+          <!-- ActionToolbar -->
+          <div class="action-toolbar">
+            <div class="left-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="M12 5v14M5 12h14"/></svg>
+                创建实例
+              </button>
+            </div>
+            <!-- SearchCombo 紧跟 left-actions 后方，间距 20px -->
+            <div class="search-combo">
+              <select class="search-dimension" id="searchDimension">
+                <option value="all">全部</option>
+                <option value="id">实例 ID/名称</option>
+                <option value="name">实例名称</option>
+              </select>
+              <span class="search-divider"></span>
+              <input class="search-input" id="searchInput" placeholder="搜索实例 ID / 名称" />
+              <button class="search-btn" id="searchBtn">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+              </button>
+            </div>
+            <div class="right-tools">
+              <button class="btn-icon" title="刷新">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
+              </button>
+            </div>
+          </div>
+          <!-- DataTable -->
+          <div class="data-table-wrapper">
+            <table class="data-table">
+              <thead>
+                <tr>
+                  <th class="col-checkbox"><input type="checkbox" class="checkbox" id="selectAll" /></th>
+                  <th class="col-id sortable sort-active" data-sort="id">
+                    实例 ID/名称
+                    <span class="sort-icon">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7-7 7 7"/></svg>
+                    </span>
+                  </th>
+                  <th class="col-status sortable" data-sort="status">
+                    实例状态
+                    <span class="sort-icon">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7-7 7 7"/></svg>
+                    </span>
+                  </th>
+                  <th class="col-access">对外访问</th>
+                  <th class="col-version">引擎版本</th>
+                  <th class="col-cluster">集群</th>
+                  <th class="col-namespace">命名空间</th>
+                  <th class="col-time sortable" data-sort="time">
+                    创建时间
+                    <span class="sort-icon">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7-7 7 7"/></svg>
+                    </span>
+                  </th>
+                  <th class="col-action">操作</th>
+                </tr>
+              </thead>
+              <tbody id="tableBody">
+                <!-- Row 1: 运行中 -->
+                <tr>
+                  <td><input type="checkbox" class="checkbox" /></td>
+                  <td>
+                    <div class="id-name">
+                      <span class="id-name-name">ai-gateway-prod</span>
+                      <span class="id-name-id">agw-uf6a8b3c2d1e0f4a</span>
+                    </div>
+                  </td>
+                  <td>
+                    <span class="status-badge status-running">
+                      <span class="status-dot"></span>
+                      运行中
+                    </span>
+                  </td>
+                  <td>
+                    <div class="access-list">
+                      <div class="access-item">
+                        <span class="access-tag public">公</span>
+                        <span class="access-ip">47.98.123.45</span>
+                        <span class="access-type">公网</span>
+                      </div>
+                      <div class="access-item">
+                        <span class="access-tag private">内</span>
+                        <span class="access-ip">172.16.0.12</span>
+                        <span class="access-type">内网</span>
+                      </div>
+                    </div>
+                  </td>
+                  <td><span style="font-family: var(--font-mono);">2.1.11</span></td>
+                  <td>prod-cluster-01</td>
+                  <td>ai-gateway</td>
+                  <td>2026-05-10 14:30:00</td>
+                  <td class="col-action">
+                    <a class="action-link" href="#">详情</a>
+                    <span class="action-divider"></span>
+                    <span class="action-more">
+                      <button class="action-more-btn" onclick="toggleDropdown(this)">
+                        <svg width="16" height="16" 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 class="action-dropdown">
+                        <button class="action-dropdown-item">重启</button>
+                        <button class="action-dropdown-item">停止</button>
+                        <button class="action-dropdown-item danger">删除</button>
+                      </div>
+                    </span>
+                  </td>
+                </tr>
+                <!-- Row 2: 运行中 -->
+                <tr>
+                  <td><input type="checkbox" class="checkbox" /></td>
+                  <td>
+                    <div class="id-name">
+                      <span class="id-name-name">ai-gateway-staging</span>
+                      <span class="id-name-id">agw-7c9d2e4f5a6b1c3d</span>
+                    </div>
+                  </td>
+                  <td>
+                    <span class="status-badge status-running">
+                      <span class="status-dot"></span>
+                      运行中
+                    </span>
+                  </td>
+                  <td>
+                    <div class="access-list">
+                      <div class="access-item">
+                        <span class="access-tag public">公</span>
+                        <span class="access-ip">47.98.200.88</span>
+                        <span class="access-type">公网</span>
+                      </div>
+                      <div class="access-item">
+                        <span class="access-tag private">内</span>
+                        <span class="access-ip">172.16.1.25</span>
+                        <span class="access-type">内网</span>
+                      </div>
+                    </div>
+                  </td>
+                  <td><span style="font-family: var(--font-mono);">2.1.11</span></td>
+                  <td>staging-cluster-01</td>
+                  <td>ai-gateway-test</td>
+                  <td>2026-05-12 09:15:00</td>
+                  <td class="col-action">
+                    <a class="action-link" href="#">详情</a>
+                    <span class="action-divider"></span>
+                    <span class="action-more">
+                      <button class="action-more-btn" onclick="toggleDropdown(this)">
+                        <svg width="16" height="16" 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 class="action-dropdown">
+                        <button class="action-dropdown-item">重启</button>
+                        <button class="action-dropdown-item">停止</button>
+                        <button class="action-dropdown-item danger">删除</button>
+                      </div>
+                    </span>
+                  </td>
+                </tr>
+                <!-- Row 3: 创建中 -->
+                <tr>
+                  <td><input type="checkbox" class="checkbox" /></td>
+                  <td>
+                    <div class="id-name">
+                      <span class="id-name-name">ai-gateway-dev</span>
+                      <span class="id-name-id">agw-3e5f7a8b9c0d1e2f</span>
+                    </div>
+                  </td>
+                  <td>
+                    <span class="status-badge status-creating">
+                      <span class="status-dot"></span>
+                      创建中
+                    </span>
+                  </td>
+                  <td>
+                    <div class="access-list">
+                      <div class="access-item">
+                        <span class="access-tag private">内</span>
+                        <span class="access-ip">172.16.2.10</span>
+                        <span class="access-type">内网</span>
+                      </div>
+                    </div>
+                  </td>
+                  <td><span style="font-family: var(--font-mono);">2.1.10</span></td>
+                  <td>dev-cluster-01</td>
+                  <td>default</td>
+                  <td>2026-05-20 10:05:00</td>
+                  <td class="col-action">
+                    <a class="action-link" href="#">详情</a>
+                    <span class="action-divider"></span>
+                    <span class="action-more">
+                      <button class="action-more-btn" onclick="toggleDropdown(this)">
+                        <svg width="16" height="16" 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 class="action-dropdown">
+                        <button class="action-dropdown-item" disabled>重启</button>
+                        <button class="action-dropdown-item" disabled>停止</button>
+                        <button class="action-dropdown-item danger" disabled>删除</button>
+                      </div>
+                    </span>
+                  </td>
+                </tr>
+                <!-- Row 4: 已停止 -->
+                <tr>
+                  <td><input type="checkbox" class="checkbox" /></td>
+                  <td>
+                    <div class="id-name">
+                      <span class="id-name-name">ai-gateway-old</span>
+                      <span class="id-name-id">agw-9a1b2c3d4e5f6a7b</span>
+                    </div>
+                  </td>
+                  <td>
+                    <span class="status-badge status-stopped">
+                      <span class="status-dot"></span>
+                      已停止
+                    </span>
+                  </td>
+                  <td>
+                    <div class="access-list">
+                      <div class="access-item">
+                        <span class="access-tag public">公</span>
+                        <span class="access-ip">47.98.55.100</span>
+                        <span class="access-type">公网</span>
+                      </div>
+                    </div>
+                  </td>
+                  <td><span style="font-family: var(--font-mono);">2.0.8</span></td>
+                  <td>prod-cluster-01</td>
+                  <td>ai-gateway-legacy</td>
+                  <td>2026-03-15 16:45:00</td>
+                  <td class="col-action">
+                    <a class="action-link" href="#">详情</a>
+                    <span class="action-divider"></span>
+                    <span class="action-more">
+                      <button class="action-more-btn" onclick="toggleDropdown(this)">
+                        <svg width="16" height="16" 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 class="action-dropdown">
+                        <button class="action-dropdown-item">启动</button>
+                        <button class="action-dropdown-item danger">删除</button>
+                      </div>
+                    </span>
+                  </td>
+                </tr>
+                <!-- Row 5: 异常 -->
+                <tr>
+                  <td><input type="checkbox" class="checkbox" /></td>
+                  <td>
+                    <div class="id-name">
+                      <span class="id-name-name">ai-gateway-error-test</span>
+                      <span class="id-name-id">agw-5c6d7e8f9a0b1c2d</span>
+                    </div>
+                  </td>
+                  <td>
+                    <span class="status-badge status-error">
+                      <span class="status-dot"></span>
+                      异常
+                    </span>
+                  </td>
+                  <td>
+                    <div class="access-list">
+                      <div class="access-item">
+                        <span class="access-tag private">内</span>
+                        <span class="access-ip">172.16.3.88</span>
+                        <span class="access-type">内网</span>
+                      </div>
+                    </div>
+                  </td>
+                  <td><span style="font-family: var(--font-mono);">2.1.11</span></td>
+                  <td>test-cluster-02</td>
+                  <td>ai-gateway</td>
+                  <td>2026-05-18 08:20:00</td>
+                  <td class="col-action">
+                    <a class="action-link" href="#">详情</a>
+                    <span class="action-divider"></span>
+                    <span class="action-more">
+                      <button class="action-more-btn" onclick="toggleDropdown(this)">
+                        <svg width="16" height="16" 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 class="action-dropdown">
+                        <button class="action-dropdown-item">重启</button>
+                        <button class="action-dropdown-item danger">删除</button>
+                      </div>
+                    </span>
+                  </td>
+                </tr>
+                <!-- Row 6: 运行中 -->
+                <tr>
+                  <td><input type="checkbox" class="checkbox" /></td>
+                  <td>
+                    <div class="id-name">
+                      <span class="id-name-name">ai-gateway-multi</span>
+                      <span class="id-name-id">agw-1f2a3b4c5d6e7f8a</span>
+                    </div>
+                  </td>
+                  <td>
+                    <span class="status-badge status-running">
+                      <span class="status-dot"></span>
+                      运行中
+                    </span>
+                  </td>
+                  <td>
+                    <div class="access-list">
+                      <div class="access-item">
+                        <span class="access-tag public">公</span>
+                        <span class="access-ip">47.98.77.200</span>
+                        <span class="access-type">公网</span>
+                      </div>
+                      <div class="access-item">
+                        <span class="access-tag private">内</span>
+                        <span class="access-ip">172.16.5.33</span>
+                        <span class="access-type">内网</span>
+                      </div>
+                    </div>
+                  </td>
+                  <td><span style="font-family: var(--font-mono);">2.1.11</span></td>
+                  <td>prod-cluster-02</td>
+                  <td>ai-gateway-multi</td>
+                  <td>2026-05-19 11:00:00</td>
+                  <td class="col-action">
+                    <a class="action-link" href="#">详情</a>
+                    <span class="action-divider"></span>
+                    <span class="action-more">
+                      <button class="action-more-btn" onclick="toggleDropdown(this)">
+                        <svg width="16" height="16" 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 class="action-dropdown">
+                        <button class="action-dropdown-item">重启</button>
+                        <button class="action-dropdown-item">停止</button>
+                        <button class="action-dropdown-item danger">删除</button>
+                      </div>
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <!-- BulkActionBar -->
+          <div class="bulk-action-bar" id="bulkActionBar">
+            <div class="bulk-actions">
+              <button class="btn btn-outline" style="height: 28px; font-size: 12px; padding: 0 12px;">启动</button>
+              <button class="btn btn-outline" style="height: 28px; font-size: 12px; padding: 0 12px;">停止</button>
+              <button class="btn btn-outline" style="height: 28px; font-size: 12px; padding: 0 12px;">重启</button>
+              <button class="btn btn-outline" style="height: 28px; font-size: 12px; padding: 0 12px; color: hsl(var(--destructive)); border-color: hsl(var(--destructive-border));">删除</button>
+            </div>
+            <div class="bulk-stats">
+              <span class="bulk-count">已选 <span id="selectedCount">0</span> 项</span>
+              <span class="bulk-count">共 24 条</span>
+            </div>
+          </div>
+          <!-- Pagination (v7: 两段布局 — 左侧: 总条数 / 右侧: 页码导航 + 前往跳转 + 每页选择器) -->
+          <div class="pagination-wrapper">
+            <div>
+              <span class="pagination-info">共 24 条</span>
+            </div>
+            <div class="pagination-right">
+              <!-- 页码导航 -->
+              <div class="pagination">
+                <button class="pagination-btn" disabled>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+                </button>
+                <button class="pagination-btn active">1</button>
+                <button class="pagination-btn">2</button>
+                <button class="pagination-btn">3</button>
+                <button class="pagination-btn">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+                </button>
+              </div>
+              <!-- 前往跳转 -->
+              <div class="pagination-goto">
+                <span>前往</span>
+                <input type="text" class="pagination-goto-input" id="gotoPageInput" maxlength="3">
+                <span>页</span>
+                <button class="pagination-goto-btn" id="gotoPageBtn">确定</button>
+              </div>
+              <!-- 每页选择器 -->
+              <div class="pagination-size">
+                <select>
+                  <option value="10" selected>10</option>
+                  <option value="20">20</option>
+                  <option value="50">50</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+// SearchCombo
+document.getElementById('searchBtn').addEventListener('click', function() {
+  console.log('Search: ' + document.getElementById('searchDimension').value + ' - ' + document.getElementById('searchInput').value);
+});
+document.getElementById('searchInput').addEventListener('keydown', function(e) {
+  if (e.key === 'Enter') {
+    console.log('Search on Enter: ' + document.getElementById('searchDimension').value + ' - ' + this.value);
+  }
+});
+document.getElementById('searchDimension').addEventListener('change', function() {
+  document.getElementById('searchInput').value = '';
+  document.getElementById('searchInput').focus();
+});
+// Action dropdown
+function toggleDropdown(btn) {
+  const dropdown = btn.nextElementSibling;
+  const currentRow = btn.closest('tr');
+  // Close all other dropdowns & remove row elevation
+  document.querySelectorAll('.action-dropdown.show').forEach(d => {
+    if (d !== dropdown) {
+      d.classList.remove('show');
+      const row = d.closest('tr');
+      if (row) row.classList.remove('has-dropdown-open');
+    }
+  });
+  dropdown.classList.toggle('show');
+  if (currentRow) currentRow.classList.toggle('has-dropdown-open', dropdown.classList.contains('show'));
+}
+document.addEventListener('click', function(e) {
+  if (!e.target.closest('.action-more')) {
+    document.querySelectorAll('.action-dropdown.show').forEach(d => {
+      d.classList.remove('show');
+      const row = d.closest('tr');
+      if (row) row.classList.remove('has-dropdown-open');
+    });
+  }
+});
+// 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 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');
+  });
+});
+// Bulk selection
+const selectAll = document.getElementById('selectAll');
+const checkboxes = document.querySelectorAll('#tableBody .checkbox');
+const bulkActionBar = document.getElementById('bulkActionBar');
+const selectedCount = document.getElementById('selectedCount');
+selectAll.addEventListener('change', function() {
+  checkboxes.forEach(cb => { cb.checked = this.checked; });
+  updateBulkActionBar();
+});
+checkboxes.forEach(cb => {
+  cb.addEventListener('change', updateBulkActionBar);
+});
+function updateBulkActionBar() {
+  const count = Array.from(checkboxes).filter(cb => cb.checked).length;
+  selectedCount.textContent = count;
+  if (count > 0) {
+    bulkActionBar.classList.add('show');
+  } else {
+    bulkActionBar.classList.remove('show');
+  }
+  // Update selectAll state
+  const allChecked = Array.from(checkboxes).every(cb => cb.checked);
+  const someChecked = Array.from(checkboxes).some(cb => cb.checked);
+  selectAll.checked = allChecked;
+  selectAll.indeterminate = someChecked && !allChecked;
+}
+// Sticky header scroll
+const cardScrollable = document.querySelector('.card-scrollable');
+const stickyWrapper = document.querySelector('.sticky-wrapper');
+cardScrollable.addEventListener('scroll', function() {
+  if (this.scrollTop > 0) {
+    stickyWrapper.style.background = 'hsl(var(--card))';
+  } else {
+    stickyWrapper.style.background = 'transparent';
+  }
+});
+// Pagination
+document.querySelectorAll('.pagination-btn:not(:disabled)').forEach(btn => {
+  btn.addEventListener('click', function() {
+    document.querySelectorAll('.pagination-btn.active').forEach(b => b.classList.remove('active'));
+    this.classList.add('active');
+  });
+});
+// Pagination Goto
+const gotoInput = document.getElementById('gotoPageInput');
+const gotoBtn = document.getElementById('gotoPageBtn');
+function doGotoPage() {
+  var page = parseInt(gotoInput.value, 10);
+  if (!isNaN(page) && page >= 1) {
+    console.log('跳转到第', page, '页');
+    gotoInput.value = '';
+  }
+}
+gotoBtn.addEventListener('click', doGotoPage);
+gotoInput.addEventListener('keydown', function(e) {
+  if (e.key === 'Enter') doGotoPage();
+});
+</script>
+</body>
+</html>