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-page-api-doc.html ADDED Viewed

@@ -0,0 +1,906 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>API 文档详情页 · 标准参考范例 — v7.8.4</title>
+<!--
+  ★ API 文档详情页标准参考范例（API Doc Detail Page Reference）
+  ─────────────────────────────────────────────────────────────
+  页面类型：DetailPage
+  子类型：ApiDocDetailPage
+  版本：v7.7
+  场景：模型 API 接口文档详情
+  ─────────────────────────────────────────────────────────────
+  布局：TWO_COL（Sidebar + ContentCard 单例容器）
+  Sidebar：完整 L2 框架（折叠/展开 240px↔68px）
+  内容区模式：模式B + 模式C 组合（Card + Tabs）
+  ─────────────────────────────────────────────────────────────
+  组件清单：
+    • PageHeader — 面包屑模式 + 操作按钮组
+    • ApiEndpoint — HTTP 方法 + 路径 + 状态
+    • DescriptionList — 键值对列表，3列布局
+    • Tabs — 请求参数/响应参数/请求示例/响应示例
+    • ParameterTable — 可展开嵌套参数表
+    • CodeBlock — 多语言代码示例
+    • Badge — 状态/类型展示
+  ─────────────────────────────────────────────────────────────
+  规范来源：pages/detail-page/SKILL.md v7.8.4
+  Tokens 版本：v7.8.4（v7.6 ContentCard 表面规则 + v7.8.4 字体族变量 + ApiEndpoint/ParameterTable/CodeBlock 组件）
+  表面边界：PageHeader / Tabs / Separator 的 border 为「功能性分割线」，不受 v7.6 surface 约束
+-->
+<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%;
+  --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%;
+  --success: 142 76% 36%;
+  --success-bg: 152 82% 96%;
+  --warning: 40 88% 48%;
+  --warning-bg: 43 100% 94%;
+  --destructive: 0 72% 51%;
+  --destructive-bg: 0 86% 97%;
+  --info: 221 83% 53%;
+  --info-bg: 214 100% 97%;
+  --background: 220 18% 97%;
+  --card: 0 0% 100%;
+  --card-foreground: 220 9% 7%;
+  --border: 210 9% 91%;
+  --ring: 218.6 100% 46.7%;
+  --sidebar: 220 18% 97%;
+  --sidebar-foreground: 220 9% 7%;
+  --sidebar-active: 210 12% 93%;
+  --sidebar-active-foreground: 220 9% 7%;
+  --sidebar-hover: 220 18% 97%;
+  --sidebar-item: 220 9% 7%;
+  --sidebar-item-muted: 216 4% 26%;
+  --sidebar-border: 210 9% 91%;
+  --sidebar-group: 216 2% 45%;
+  --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-padding: 16px;
+  --page-container-padding-left: 0px;
+  --card-padding-x: 20px;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --font-size-base: 12px;
+  --font-size-lg: 14px;
+  --font-size-xl: 16px;
+  --font-size-2xl: 18px;
+  --font-size-page-header: 18px;
+  --font-sans: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-black: 900;
+  --input-height: 32px;
+  --input-radius: 8px;
+  --layout-sidebar-width: 240px;
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --easing-ease: ease;
+}
+body {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary));
+  background: hsl(var(--background));
+  min-height: 100vh;
+}
+/* ===== Sidebar ===== */
+.sidebar {
+  position: fixed; top: 0; left: 0; bottom: 0;
+  width: var(--layout-sidebar-width);
+  background: hsl(var(--sidebar));
+  z-index: 100;
+  display: flex; flex-direction: column;
+  overflow: hidden;
+  transition: width 0.2s ease;
+}
+.sidebar-header {
+  height: 56px; padding: 0 16px;
+  display: flex; align-items: center; gap: var(--gap-xs);
+  flex-shrink: 0;
+}
+.sidebar-logo {
+  height: 28px; flex-shrink: 0;
+  display: flex; align-items: center;
+  overflow: hidden;
+}
+.sidebar-logo img {
+  height: 28px; width: auto; display: block;
+}
+.sidebar-logo .collapsed-logo {
+  display: none; width: 30px; height: 30px;
+}
+.sidebar-logo .expand-logo {
+  display: none; width: 18px; height: 18px;
+  color: hsl(var(--muted-foreground));
+}
+.sidebar-collapse-btn {
+  margin-left: auto; width: 18px; height: 18px;
+  background: none; border: none; padding: 0; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  color: hsl(var(--muted-foreground)); flex-shrink: 0;
+}
+.sidebar-collapse-btn svg { width: 18px; height: 18px; }
+/* ===== Sidebar Collapsed State ===== */
+.sidebar.collapsed { width: 68px; overflow: visible; }
+.sidebar.collapsed .sidebar-header { padding: 0 12px; justify-content: center; }
+.sidebar.collapsed .sidebar-logo { cursor: pointer; }
+.sidebar.collapsed .sidebar-logo img { display: none; }
+.sidebar.collapsed .sidebar-logo .collapsed-logo { display: block; }
+.sidebar.collapsed .sidebar-logo:hover .collapsed-logo { display: none; }
+.sidebar.collapsed .sidebar-logo:hover .expand-logo { display: block; }
+.sidebar.collapsed .sidebar-collapse-btn { display: none; }
+.sidebar.collapsed .sidebar-content { padding: 12px 0; overflow-y: auto; overflow-x: hidden; }
+.sidebar.collapsed .sidebar-menu { padding: 0; }
+.sidebar.collapsed .sidebar-menu > li { display: flex; justify-content: center; }
+.sidebar.collapsed .sidebar-menu > li > a.sidebar-menu-item {
+  justify-content: center; padding: 0; width: 40px; height: 40px;
+  border-radius: var(--radius-md); position: relative; flex-shrink: 0;
+  gap: 0;
+}
+.sidebar.collapsed .sidebar-menu > li > a.sidebar-menu-item .item-icon { margin: 0; }
+.sidebar.collapsed .sidebar-menu > li > a > span:not(.item-icon),
+.sidebar.collapsed .sidebar-menu > li > a > .expand-icon,
+.sidebar.collapsed .sidebar-menu-item:not(.item-icon):after { display: none; }
+/* 隐藏文字节点（直接文本） */
+.sidebar.collapsed .sidebar-menu > li > a { font-size: 0; }
+.sidebar.collapsed .sidebar-menu > li > a > .item-icon { font-size: var(--font-size-lg); }
+.sidebar.collapsed .sidebar-sub-menu { display: none !important; }
+.sidebar.collapsed .sidebar-divider { margin: 0 14px; }
+.sidebar.collapsed .sidebar-footer { padding: 12px 10px 16px; justify-content: center; }
+.sidebar.collapsed .sidebar-username,
+.sidebar.collapsed .sidebar-more { display: none; }
+/* ===== Sidebar Collapsed Flyout (hover 浮层展示二级菜单) ===== */
+.sidebar.collapsed .sidebar-menu > li { position: relative; }
+.sidebar.collapsed .sidebar-menu > li:hover > .sidebar-flyout {
+  display: block;
+}
+.sidebar-flyout {
+  display: none;
+  position: absolute; left: 100%; top: 0;
+  min-width: 160px; padding: 4px;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--gray-line));
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  z-index: 200;
+}
+.sidebar-flyout .sidebar-menu-item {
+  height: 36px; padding: 0 12px;
+  font-size: var(--font-size-base) !important;
+  font-weight: var(--font-weight-normal);
+  color: hsl(var(--gray-primary));
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+}
+.sidebar-flyout .sidebar-menu-item:hover {
+  background: hsl(var(--gray-muted));
+}
+/* Main content 响应 sidebar 收起 */
+.main-content {
+  margin-left: var(--layout-sidebar-width);
+  min-height: 100vh;
+  transition: margin-left 0.2s ease;
+}
+.sidebar.collapsed ~ .main-content { margin-left: 68px; }
+.sidebar-product {
+  font-size: var(--font-size-xl); font-weight: var(--font-weight-black);
+  color: hsl(var(--sidebar-foreground)); letter-spacing: -0.025em;
+  white-space: nowrap; line-height: 1;
+}
+.sidebar-content {
+  flex: 1; overflow-y: auto; padding: 12px 0;
+}
+/* twoLevel 变体：去掉 sidebar-group-label，主菜单之间间距由 li padding 提供；保留 sidebar-group-label 样式以兼容其他页面。 */
+.sidebar-group-label {
+  padding: 0 16px; height: 26px; line-height: 26px;
+  font-size: var(--font-size-base); font-weight: var(--font-weight-normal);
+  color: hsl(var(--sidebar-group));
+}
+.sidebar-group-label:not(:first-child) { margin-top: 16px; }
+.sidebar-menu { list-style: none; padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
+.sidebar-menu-item {
+  display: flex; align-items: center; gap: var(--button-gap);
+  padding: 0 12px; height: 40px;
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-lg); font-weight: var(--font-weight-medium);
+  color: hsl(var(--sidebar-item-muted));
+  text-decoration: none; cursor: pointer;
+  transition: background var(--duration-fast), color var(--duration-fast);
+  white-space: nowrap;
+}
+.sidebar-menu-item:hover {
+  background: hsl(var(--sidebar-hover));
+  color: hsl(var(--sidebar-item));
+}
+.sidebar-menu-item.active {
+  background: hsl(var(--sidebar-active));
+  color: hsl(var(--sidebar-active-foreground));
+}
+.sidebar-menu-item .item-icon {
+  width: 16px; height: 16px; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+}
+.sidebar-menu-item .expand-icon {
+  margin-left: auto; width: 16px; height: 16px;
+  transition: transform var(--duration-fast);
+}
+.sidebar-menu-item.expanded .expand-icon { transform: rotate(90deg); }
+.sidebar-sub-menu {
+  list-style: none; padding: 0 0 0 24px;
+  display: none;
+}
+/* twoLevel 变体：子菜单与主菜单在同一列上下对齐。sub-menu 不再加左 padding，由子菜单项自身 padding-left = 12+16+8 = 36px 代替主菜单的 "padding+icon+gap"，使文字起点 x 坐标与主菜单一致。 */
+.sidebar-menu > li > .sidebar-sub-menu { padding-left: 0; }
+.sidebar-sub-menu.show { display: block; }
+.sidebar-sub-menu .sidebar-menu-item {
+  height: 36px; font-size: var(--font-size-base); font-weight: var(--font-weight-normal);
+  /* twoLevel 变体对齐规则：36px = 主菜单 padding-left(12) + item-icon(16) + gap(8)，使文字与主菜单文字上下对齐。 */
+  padding-left: 36px;
+}
+.sidebar-divider {
+  height: 1px; background: hsl(var(--sidebar-border));
+  margin: 0 12px; flex-shrink: 0;
+}
+.sidebar-footer {
+  flex-shrink: 0; display: flex; align-items: center;
+  gap: var(--button-gap); padding: 12px 12px 16px 24px;
+}
+.sidebar-avatar {
+  width: 28px; height: 28px; border-radius: 50%;
+  background: hsl(var(--sidebar-active));
+  display: flex; align-items: center; justify-content: center;
+  font-size: var(--font-size-base); font-weight: 600;
+  color: hsl(var(--gray-primary)); flex-shrink: 0;
+}
+.sidebar-username {
+  flex: 1; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium);
+  color: hsl(var(--sidebar-item)); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap;
+}
+.sidebar-more {
+  width: 28px; height: 28px; border-radius: var(--radius-sm);
+  border: none; background: transparent; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  color: hsl(var(--muted-foreground));
+}
+.sidebar-more:hover { background: hsl(var(--sidebar-hover)); color: hsl(var(--gray-primary)); }
+/* ===== Main Content ===== */
+.page-container { padding: var(--page-container-padding) var(--page-container-padding) var(--page-container-padding) var(--page-container-padding-left); }
+.card {
+  background: hsl(var(--card));
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
+  overflow: hidden;
+  display: flex; flex-direction: column;
+  min-height: calc(100vh - 40px);
+  padding: 0 var(--card-padding-x);
+}
+/* ===== PageHeader — Breadcrumb Mode ===== */
+/* L2 面包屑模式：无 border、无 background、无 box-shadow；高度 64px，padding 由外层 Card 提供 */
+.page-header {
+  height: 64px; padding: 0;
+  display: flex; align-items: center; justify-content: space-between;
+  flex-shrink: 0;
+}
+.page-header-left { display: flex; align-items: center; }
+.breadcrumb { display: flex; align-items: center; gap: 4px; font-size: var(--font-size-page-header); font-weight: var(--font-weight-medium); color: hsl(var(--gray-secondary-foreground)); }
+.breadcrumb a { color: hsl(var(--gray-secondary-foreground)); text-decoration: none; }
+.breadcrumb a:hover { color: hsl(var(--gray-primary)); }
+.breadcrumb .separator { color: hsl(var(--muted-foreground)); display: flex; align-items: center; }
+.breadcrumb .separator svg { width: 20px; height: 20px; }
+.breadcrumb .current { color: hsl(var(--gray-primary)); }
+.page-header-right { display: flex; align-items: center; gap: var(--button-gap); }
+/* ===== Buttons ===== */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs);
+  height: var(--input-height); padding: 0 var(--btn-padding-x);
+  border-radius: var(--radius-md); font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium); border: none; cursor: pointer;
+  transition: background var(--duration-fast), opacity var(--duration-fast);
+  white-space: nowrap;
+}
+.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
+.btn-primary:hover { background: hsl(var(--primary-hover)); }
+.btn-outline { background: hsl(var(--card)); color: hsl(var(--gray-primary)); border: 1px solid hsl(var(--gray-line)); }
+.btn-outline:hover { background: hsl(var(--gray-muted)); }
+.btn-ghost { background: transparent; color: hsl(var(--gray-primary)); }
+.btn-ghost:hover { background: hsl(var(--gray-muted)); }
+.btn-icon { width: var(--input-height); padding: 0; }
+/* ===== ApiEndpoint ===== */
+.api-endpoint {
+  height: 48px; background: hsl(var(--gray-muted));
+  border-radius: var(--radius-md); padding: 0 16px;
+  display: flex; align-items: center; gap: 12px;
+  margin: 16px 0;
+}
+.method-badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 2px 8px; border-radius: var(--radius-sm);
+  font-size: var(--font-size-base); font-weight: 600;
+  color: hsl(var(--gray-white)); line-height: 1.5;
+}
+.method-post { background: hsl(var(--success)); }
+.method-get { background: hsl(var(--primary)); }
+.method-delete { background: hsl(var(--destructive)); }
+.api-path { font-family: var(--font-mono); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: hsl(var(--gray-primary)); }
+.api-copy-btn { width: 24px; height: 24px; background: none; border: none; cursor: pointer; color: hsl(var(--muted-foreground)); opacity: 0; transition: opacity var(--duration-fast); display: flex; align-items: center; justify-content: center; }
+.api-endpoint:hover .api-copy-btn { opacity: 1; }
+.api-copy-btn:hover { color: hsl(var(--primary)); }
+.api-status { margin-left: auto; }
+.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1.5; }
+.badge-success { background: hsl(var(--success-bg)); color: hsl(var(--success)); }
+.badge-dot { width: 6px; height: 6px; border-radius: 50%; }
+.badge-success .badge-dot { background: hsl(var(--success)); }
+/* ===== DescriptionList ===== */
+.description-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
+.description-item { display: flex; align-items: center; height: 36px; padding: 8px 0; gap: 12px; }
+.description-label { min-width: 72px; max-width: 140px; font-size: var(--font-size-base); color: hsl(var(--gray-secondary-foreground)); font-weight: var(--font-weight-normal); flex-shrink: 0; }
+.description-value { font-size: var(--font-size-base); color: hsl(var(--gray-primary)); font-weight: var(--font-weight-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
+.description-value.link { color: hsl(var(--primary)); cursor: pointer; }
+.description-value.link:hover { text-decoration: underline; }
+.description-section { padding: 16px 0; }
+/* ===== Tabs ===== */
+.tabs { border-bottom: 1px solid hsl(var(--gray-line)); padding-top: 4px; }
+.tabs-list { display: flex; gap: var(--tabs-gap); list-style: none; }
+.tab-item {
+  padding: 10px 0; font-size: var(--font-size-lg);
+  color: hsl(var(--gray-secondary-foreground)); cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: color var(--duration-fast), border-color var(--duration-fast);
+  font-weight: var(--font-weight-normal);
+}
+.tab-item:hover { color: hsl(var(--gray-primary)); }
+.tab-item.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); font-weight: var(--font-weight-medium); }
+.tab-content { padding: 16px 0; display: none; }
+.tab-content.active { display: block; }
+/* ===== ParameterTable ===== */
+.param-table { width: 100%; border-collapse: collapse; }
+.param-table th {
+  height: 36px; background: hsl(var(--gray-muted));
+  font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
+  color: hsl(var(--gray-secondary-foreground)); text-align: left; padding: 0 12px;
+}
+.param-table th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
+.param-table th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
+.param-table td { height: 40px; padding: 0 12px; font-size: 13px; border-bottom: 1px solid hsl(var(--gray-line)); vertical-align: middle; }
+.param-name { font-family: var(--font-mono); font-size: 13px; color: hsl(var(--gray-primary)); font-weight: var(--font-weight-medium); }
+.param-toggle { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
+.param-toggle .arrow { font-size: 10px; color: hsl(var(--muted-foreground)); transition: transform var(--duration-fast); display: inline-block; }
+.param-toggle .arrow.expanded { transform: rotate(90deg); }
+.type-badge {
+  display: inline-flex; padding: 1px 6px; border-radius: var(--radius-sm);
+  font-size: 11px; font-weight: var(--font-weight-medium); line-height: 1.6;
+}
+.type-string { background: hsl(214 100% 97%); color: hsl(218 100% 47%); }
+.type-number { background: hsl(152 82% 96%); color: hsl(142 76% 36%); }
+.type-boolean { background: hsl(43 100% 94%); color: hsl(40 88% 48%); }
+.type-object { background: hsl(270 100% 97%); color: hsl(262 83% 58%); }
+.type-array { background: hsl(180 40% 94%); color: hsl(180 60% 40%); }
+.param-required { color: hsl(var(--destructive)); font-weight: 600; }
+.param-optional { color: hsl(var(--gray-disabled)); }
+.param-desc { color: hsl(var(--muted-foreground)); }
+.param-child { display: none; }
+.param-child.show { display: table-row; }
+.param-child td:first-child { position: relative; }
+.param-indent-1 { padding-left: 24px !important; }
+.param-indent-2 { padding-left: 48px !important; }
+.param-indent-1::before, .param-indent-2::before {
+  content: ''; position: absolute; left: 20px; top: 0; bottom: 0;
+  width: 1px; background: hsl(var(--gray-line));
+}
+.param-indent-2::before { left: 44px; }
+/* ===== CodeBlock ===== */
+.code-block { background: hsl(var(--gray-muted)); border-radius: var(--radius-md); position: relative; overflow: hidden; }
+.code-tabs { display: flex; gap: 0; border-bottom: 1px solid hsl(var(--gray-line)); padding: 0 16px; }
+.code-tab {
+  padding: 8px 12px; font-size: var(--font-size-base); cursor: pointer;
+  color: hsl(var(--gray-secondary-foreground)); border-bottom: 2px solid transparent;
+  transition: color var(--duration-fast), border-color var(--duration-fast);
+}
+.code-tab:hover { color: hsl(var(--gray-primary)); }
+.code-tab.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); font-weight: var(--font-weight-medium); }
+.code-content { padding: 16px; overflow-x: auto; }
+.code-content pre {
+  font-family: var(--font-mono);
+  font-size: 13px; line-height: 1.6;
+  color: hsl(var(--gray-primary)); white-space: pre; margin: 0;
+}
+.code-copy-btn {
+  position: absolute; top: 44px; right: 12px;
+  width: 24px; height: 24px; background: hsl(var(--card));
+  border: 1px solid hsl(var(--gray-line)); border-radius: var(--radius-sm);
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  color: hsl(var(--muted-foreground)); opacity: 0; transition: opacity var(--duration-fast);
+}
+.code-block:hover .code-copy-btn { opacity: 1; }
+.code-copy-btn:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary)); }
+.code-panel { display: none; }
+.code-panel.active { display: block; }
+/* ===== Responsive ===== */
+@media (max-width: 1199px) { .description-list { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 768px) { .description-list { grid-template-columns: 1fr; } }
+</style>
+</head>
+<body>
+<!-- ===== Sidebar ===== -->
+<aside class="sidebar">
+  <div class="sidebar-header">
+    <div class="sidebar-logo" id="sidebarLogoArea">
+      <img src="./_assets/op-ai-gateway-logo.svg" alt="OP AI Gateway" />
+      <img class="collapsed-logo" src="./_assets/op-logo-collapsed.png" alt="OP" />
+      <svg class="expand-logo" viewBox="0 0 1024 1024" fill="currentColor" width="18" height="18"><path d="M151.68 616.96l82.56-82.56c12.8-12.8 12.8-32.64 0-45.44L151.68 406.4c-19.84-19.84-54.4-5.76-54.4 22.4v165.76c-0.64 28.16 33.92 42.88 54.4 22.4zM128.64 288h768c14.08 0 32-14.08 32-32s-17.92-32-32-32h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32zM896.64 736h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32h768c14.08 0 32-14.08 32-32s-17.28-32-32-32zM896.64 480h-480c-14.08 0-32 14.08-32 32s17.92 32 32 32h480c14.08 0 32-14.08 32-32s-17.28-32-32-32z"/></svg>
+    </div>
+    <button class="sidebar-collapse-btn" title="收起侧边栏">
+      <svg viewBox="0 0 1024 1024" fill="currentColor" width="18" height="18"><path d="M874.24 406.4l-82.56 82.56c-12.8 12.8-12.8 32.64 0 45.44l82.56 82.56c19.84 19.84 54.4 5.76 54.4-22.4V428.8c0-28.16-33.92-42.88-54.4-22.4zM128.64 288h768c14.08 0 32-14.08 32-32s-17.92-32-32-32h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32zM896.64 736h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32h768c14.08 0 32-14.08 32-32s-17.28-32-32-32zM128.64 544h480c14.08 0 32-14.08 32-32s-17.92-32-32-32h-480c-14.08 0-32 14.08-32 32s17.92 32 32 32z"/></svg>
+    </button>
+  </div>
+  <!-- sidebar：按 PRD 导航结构，L1 为一级菜单，L2 为二级子菜单。 -->
+  <div class="sidebar-content">
+    <ul class="sidebar-menu">
+      <!-- L1: AI 网关（叶子菜单，当前活跃） -->
+      <li><a class="sidebar-menu-item active" href="#">
+        <span class="item-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+        </span>
+        AI 网关
+      </a></li>
+      <!-- L1: API 网关（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item expanded" href="#" data-toggle="api-gateway">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
+          </span>
+          API 网关
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu show" id="api-gateway">
+          <li><a class="sidebar-menu-item" href="#">实例管理</a></li>
+          <li><a class="sidebar-menu-item" href="#">共享实例管理</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">实例管理</a>
+          <a class="sidebar-menu-item" href="#">共享实例管理</a>
+        </div>
+      </li>
+      <!-- L1: 云原生网关（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item" href="#" data-toggle="cloud-native-gw">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>
+          </span>
+          云原生网关
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu" id="cloud-native-gw">
+          <li><a class="sidebar-menu-item" href="#">实例列表</a></li>
+          <li><a class="sidebar-menu-item" href="#">Nginx Ingress 迁移</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">实例列表</a>
+          <a class="sidebar-menu-item" href="#">Nginx Ingress 迁移</a>
+        </div>
+      </li>
+      <!-- L1: 集群管理（叶子菜单） -->
+      <li><a class="sidebar-menu-item" href="#">
+        <span class="item-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
+        </span>
+        集群管理
+      </a></li>
+      <!-- L1: 级联管理（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item" href="#" data-toggle="cascade-mgmt">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6v12M12 3v18M20 6v12M2 6h4M10 3h4M18 6h4M2 12h4M10 9h4M18 12h4M2 18h4M10 21h4M18 18h4"/></svg>
+          </span>
+          级联管理
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu" id="cascade-mgmt">
+          <li><a class="sidebar-menu-item" href="#">级联网关</a></li>
+          <li><a class="sidebar-menu-item" href="#">级联链路</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">级联网关</a>
+          <a class="sidebar-menu-item" href="#">级联链路</a>
+        </div>
+      </li>
+      <!-- L1: 容灾管理（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item" href="#" data-toggle="disaster-mgmt">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+          </span>
+          容灾管理
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu" id="disaster-mgmt">
+          <li><a class="sidebar-menu-item" href="#">容灾网关实例</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">容灾网关实例</a>
+        </div>
+      </li>
+      <!-- L1: 认证授权（父菜单） -->
+      <li>
+        <a class="sidebar-menu-item" href="#" data-toggle="auth-mgmt">
+          <span class="item-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
+          </span>
+          认证授权
+          <span class="expand-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </span>
+        </a>
+        <ul class="sidebar-sub-menu" id="auth-mgmt">
+          <li><a class="sidebar-menu-item" href="#">用户管理</a></li>
+          <li><a class="sidebar-menu-item" href="#">角色管理</a></li>
+          <li><a class="sidebar-menu-item" href="#">权限插件</a></li>
+          <li><a class="sidebar-menu-item" href="#">访问凭证</a></li>
+        </ul>
+        <div class="sidebar-flyout">
+          <a class="sidebar-menu-item" href="#">用户管理</a>
+          <a class="sidebar-menu-item" href="#">角色管理</a>
+          <a class="sidebar-menu-item" href="#">权限插件</a>
+          <a class="sidebar-menu-item" href="#">访问凭证</a>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div class="sidebar-divider"></div>
+  <div class="sidebar-footer">
+    <div class="sidebar-avatar">A</div>
+    <span class="sidebar-username">admin</span>
+    <button class="sidebar-more">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
+    </button>
+  </div>
+</aside>
+<!-- ===== Main Content ===== -->
+<main class="main-content">
+  <div class="page-container">
+    <div class="card">
+      <!-- PageHeader — 面包屑模式 -->
+      <div class="page-header">
+        <div class="page-header-left">
+          <nav class="breadcrumb">
+            <a href="#">模型 API</a>
+            <span class="separator"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></span>
+            <a href="#">API 列表</a>
+            <span class="separator"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></span>
+            <span class="current">chat-completions</span>
+          </nav>
+        </div>
+        <div class="page-header-right">
+          <button class="btn btn-primary">在线调试</button>
+          <button class="btn btn-outline">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+            编辑
+          </button>
+          <button class="btn btn-ghost btn-icon" title="关闭">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+          </button>
+        </div>
+      </div>
+      <!-- ApiEndpoint -->
+      <div class="api-endpoint">
+        <span class="method-badge method-post">POST</span>
+        <span class="api-path">/v1/chat/completions</span>
+        <button class="api-copy-btn" 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 class="api-status"><span class="badge badge-success"><span class="badge-dot"></span>已发布</span></span>
+      </div>
+      <!-- DescriptionList: 基本信息 -->
+      <div class="description-section">
+        <div class="description-list">
+          <div class="description-item"><span class="description-label">所属服务</span><span class="description-value link">gpt-4o-service</span></div>
+          <div class="description-item"><span class="description-label">关联模型</span><span class="description-value">GPT-4o</span></div>
+          <div class="description-item"><span class="description-label">创建时间</span><span class="description-value">2026-03-15 10:00:00</span></div>
+          <div class="description-item"><span class="description-label">调用次数</span><span class="description-value">1,258,432</span></div>
+          <div class="description-item"><span class="description-label">平均延迟</span><span class="description-value">856ms</span></div>
+          <div class="description-item"><span class="description-label">认证方式</span><span class="description-value">Bearer Token</span></div>
+          <div class="description-item"><span class="description-label">限流策略</span><span class="description-value link">100 RPM / 消费者</span></div>
+          <div class="description-item"><span class="description-label">超时设置</span><span class="description-value">60s</span></div>
+          <div class="description-item"><span class="description-label">描述</span><span class="description-value">OpenAI 兼容的聊天补全接口</span></div>
+        </div>
+      </div>
+      <!-- Tabs -->
+      <div class="tabs">
+        <ul class="tabs-list">
+          <li class="tab-item active" onclick="switchTab(0)">请求参数</li>
+          <li class="tab-item" onclick="switchTab(1)">响应参数</li>
+          <li class="tab-item" onclick="switchTab(2)">请求示例</li>
+          <li class="tab-item" onclick="switchTab(3)">响应示例</li>
+        </ul>
+      </div>
+      <!-- Tab 0: 请求参数 -->
+      <div class="tab-content active" id="tab-0">
+        <table class="param-table">
+          <thead><tr><th style="width:200px">参数名</th><th style="width:80px">类型</th><th style="width:60px">必填</th><th>说明</th></tr></thead>
+          <tbody>
+            <tr><td><span class="param-name">model</span></td><td><span class="type-badge type-string">string</span></td><td><span class="param-required">*</span></td><td class="param-desc">模型名称，如 "gpt-4o"</td></tr>
+            <tr><td><span class="param-name param-toggle" onclick="toggleParam('req-messages')">
+              <span class="arrow" id="arrow-req-messages">▶</span> messages
+            </span></td><td><span class="type-badge type-array">array</span></td><td><span class="param-required">*</span></td><td class="param-desc">消息列表</td></tr>
+            <tr class="param-child" data-group="req-messages"><td class="param-indent-1"><span class="param-name">role</span></td><td><span class="type-badge type-string">string</span></td><td><span class="param-required">*</span></td><td class="param-desc">角色: system / user / assistant</td></tr>
+            <tr class="param-child" data-group="req-messages"><td class="param-indent-1"><span class="param-name">content</span></td><td><span class="type-badge type-string">string</span></td><td><span class="param-required">*</span></td><td class="param-desc">消息内容</td></tr>
+            <tr><td><span class="param-name">temperature</span></td><td><span class="type-badge type-number">number</span></td><td><span class="param-optional">选填</span></td><td class="param-desc">温度参数，0-2，默认 1</td></tr>
+            <tr><td><span class="param-name">max_tokens</span></td><td><span class="type-badge type-number">number</span></td><td><span class="param-optional">选填</span></td><td class="param-desc">最大输出 token 数</td></tr>
+            <tr><td><span class="param-name">stream</span></td><td><span class="type-badge type-boolean">boolean</span></td><td><span class="param-optional">选填</span></td><td class="param-desc">是否流式输出，默认 false</td></tr>
+            <tr><td><span class="param-name">top_p</span></td><td><span class="type-badge type-number">number</span></td><td><span class="param-optional">选填</span></td><td class="param-desc">核采样参数，0-1</td></tr>
+            <tr><td><span class="param-name">frequency_penalty</span></td><td><span class="type-badge type-number">number</span></td><td><span class="param-optional">选填</span></td><td class="param-desc">频率惩罚，-2.0 到 2.0</td></tr>
+          </tbody>
+        </table>
+      </div>
+      <!-- Tab 1: 响应参数 -->
+      <div class="tab-content" id="tab-1">
+        <table class="param-table">
+          <thead><tr><th style="width:200px">参数名</th><th style="width:80px">类型</th><th style="width:60px">必填</th><th>说明</th></tr></thead>
+          <tbody>
+            <tr><td><span class="param-name">id</span></td><td><span class="type-badge type-string">string</span></td><td>—</td><td class="param-desc">请求唯一标识</td></tr>
+            <tr><td><span class="param-name">object</span></td><td><span class="type-badge type-string">string</span></td><td>—</td><td class="param-desc">固定为 "chat.completion"</td></tr>
+            <tr><td><span class="param-name">created</span></td><td><span class="type-badge type-number">number</span></td><td>—</td><td class="param-desc">Unix 时间戳</td></tr>
+            <tr><td><span class="param-name">model</span></td><td><span class="type-badge type-string">string</span></td><td>—</td><td class="param-desc">实际使用的模型</td></tr>
+            <tr><td><span class="param-name param-toggle" onclick="toggleParam('res-choices')">
+              <span class="arrow" id="arrow-res-choices">▶</span> choices
+            </span></td><td><span class="type-badge type-array">array</span></td><td>—</td><td class="param-desc">返回结果列表</td></tr>
+            <tr class="param-child" data-group="res-choices"><td class="param-indent-1"><span class="param-name">index</span></td><td><span class="type-badge type-number">number</span></td><td>—</td><td class="param-desc">结果索引</td></tr>
+            <tr class="param-child" data-group="res-choices"><td class="param-indent-1"><span class="param-name param-toggle" onclick="toggleParam('res-message')">
+              <span class="arrow" id="arrow-res-message">▶</span> message
+            </span></td><td><span class="type-badge type-object">object</span></td><td>—</td><td class="param-desc">消息对象</td></tr>
+            <tr class="param-child" data-group="res-message"><td class="param-indent-2"><span class="param-name">role</span></td><td><span class="type-badge type-string">string</span></td><td>—</td><td class="param-desc">"assistant"</td></tr>
+            <tr class="param-child" data-group="res-message"><td class="param-indent-2"><span class="param-name">content</span></td><td><span class="type-badge type-string">string</span></td><td>—</td><td class="param-desc">回复内容</td></tr>
+            <tr class="param-child" data-group="res-choices"><td class="param-indent-1"><span class="param-name">finish_reason</span></td><td><span class="type-badge type-string">string</span></td><td>—</td><td class="param-desc">结束原因</td></tr>
+            <tr><td><span class="param-name param-toggle" onclick="toggleParam('res-usage')">
+              <span class="arrow" id="arrow-res-usage">▶</span> usage
+            </span></td><td><span class="type-badge type-object">object</span></td><td>—</td><td class="param-desc">Token 用量</td></tr>
+            <tr class="param-child" data-group="res-usage"><td class="param-indent-1"><span class="param-name">prompt_tokens</span></td><td><span class="type-badge type-number">number</span></td><td>—</td><td class="param-desc">提示词 token 数</td></tr>
+            <tr class="param-child" data-group="res-usage"><td class="param-indent-1"><span class="param-name">completion_tokens</span></td><td><span class="type-badge type-number">number</span></td><td>—</td><td class="param-desc">补全 token 数</td></tr>
+            <tr class="param-child" data-group="res-usage"><td class="param-indent-1"><span class="param-name">total_tokens</span></td><td><span class="type-badge type-number">number</span></td><td>—</td><td class="param-desc">总 token 数</td></tr>
+          </tbody>
+        </table>
+      </div>
+      <!-- Tab 2: 请求示例 -->
+      <div class="tab-content" id="tab-2">
+        <div class="code-block">
+          <div class="code-tabs">
+            <span class="code-tab active" onclick="switchCodeTab(this, 'code-req')">curl</span>
+            <span class="code-tab" onclick="switchCodeTab(this, 'code-req')">Python</span>
+            <span class="code-tab" onclick="switchCodeTab(this, 'code-req')">Node.js</span>
+            <span class="code-tab" onclick="switchCodeTab(this, 'code-req')">Java</span>
+          </div>
+          <button class="code-copy-btn" 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>
+          <div class="code-content">
+            <div class="code-panel active" data-group="code-req"><pre>curl -X POST https://api.ai-gateway.com/v1/chat/completions \
+  -H "Authorization: Bearer sk-xxxx" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "model": "gpt-4o",
+    "messages": [
+      {"role": "system", "content": "You are a helpful assistant."},
+      {"role": "user", "content": "Hello!"}
+    ],
+    "temperature": 0.7
+  }'</pre></div>
+            <div class="code-panel" data-group="code-req"><pre>import requests
+response = requests.post(
+    "https://api.ai-gateway.com/v1/chat/completions",
+    headers={
+        "Authorization": "Bearer sk-xxxx",
+        "Content-Type": "application/json"
+    },
+    json={
+        "model": "gpt-4o",
+        "messages": [
+            {"role": "system", "content": "You are a helpful assistant."},
+            {"role": "user", "content": "Hello!"}
+        ],
+        "temperature": 0.7
+    }
+)
+print(response.json())</pre></div>
+            <div class="code-panel" data-group="code-req"><pre>const response = await fetch(
+  'https://api.ai-gateway.com/v1/chat/completions',
+  {
+    method: 'POST',
+    headers: {
+      'Authorization': 'Bearer sk-xxxx',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      model: 'gpt-4o',
+      messages: [
+        { role: 'system', content: 'You are a helpful assistant.' },
+        { role: 'user', content: 'Hello!' }
+      ],
+      temperature: 0.7
+    })
+  }
+);
+const data = await response.json();
+console.log(data);</pre></div>
+            <div class="code-panel" data-group="code-req"><pre>import java.net.http.*;
+import java.net.URI;
+HttpClient client = HttpClient.newHttpClient();
+String body = """
+  {
+    "model": "gpt-4o",
+    "messages": [
+      {"role": "system", "content": "You are a helpful assistant."},
+      {"role": "user", "content": "Hello!"}
+    ],
+    "temperature": 0.7
+  }
+  """;
+HttpRequest request = HttpRequest.newBuilder()
+    .uri(URI.create("https://api.ai-gateway.com/v1/chat/completions"))
+    .header("Authorization", "Bearer sk-xxxx")
+    .header("Content-Type", "application/json")
+    .POST(HttpRequest.BodyPublishers.ofString(body))
+    .build();
+HttpResponse&lt;String&gt; response = client.send(
+    request, HttpResponse.BodyHandlers.ofString());
+System.out.println(response.body());</pre></div>
+          </div>
+        </div>
+      </div>
+      <!-- Tab 3: 响应示例 -->
+      <div class="tab-content" id="tab-3">
+        <div class="code-block">
+          <div class="code-tabs">
+            <span class="code-tab active">JSON</span>
+          </div>
+          <button class="code-copy-btn" 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>
+          <div class="code-content">
+            <div class="code-panel active"><pre>{
+  "id": "chatcmpl-abc123",
+  "object": "chat.completion",
+  "created": 1716825600,
+  "model": "gpt-4o",
+  "choices": [
+    {
+      "index": 0,
+      "message": {
+        "role": "assistant",
+        "content": "Hello! How can I help you today?"
+      },
+      "finish_reason": "stop"
+    }
+  ],
+  "usage": {
+    "prompt_tokens": 12,
+    "completion_tokens": 9,
+    "total_tokens": 21
+  }
+}</pre></div>
+          </div>
+        </div>
+      </div>
+    </div><!-- /card -->
+  </div><!-- /page-container -->
+</main>
+<script>
+// Sidebar collapse toggle
+const sidebar = document.querySelector('.sidebar');
+document.querySelector('.sidebar-collapse-btn').addEventListener('click', function() {
+  sidebar.classList.toggle('collapsed');
+});
+// Sidebar expand via logo click (collapsed state)
+document.getElementById('sidebarLogoArea').addEventListener('click', function() {
+  if (sidebar.classList.contains('collapsed')) {
+    sidebar.classList.remove('collapsed');
+  }
+});
+// Sidebar sub-menu toggle
+document.querySelectorAll('.sidebar-menu-item[data-toggle]').forEach(item => {
+  item.addEventListener('click', function(e) {
+    e.preventDefault();
+    this.classList.toggle('expanded');
+    const targetId = this.getAttribute('data-toggle');
+    const target = document.getElementById(targetId);
+    if (target) target.classList.toggle('show');
+  });
+});
+function switchTab(index) {
+  document.querySelectorAll('.tab-item').forEach((t, i) => t.classList.toggle('active', i === index));
+  document.querySelectorAll('.tab-content').forEach((c, i) => c.classList.toggle('active', i === index));
+}
+function toggleParam(group) {
+  const arrow = document.getElementById('arrow-' + group);
+  const rows = document.querySelectorAll('[data-group="' + group + '"]');
+  const expanded = arrow.classList.toggle('expanded');
+  rows.forEach(r => r.classList.toggle('show', expanded));
+}
+function switchCodeTab(el, group) {
+  const parent = el.closest('.code-block');
+  parent.querySelectorAll('.code-tab').forEach(t => t.classList.remove('active'));
+  el.classList.add('active');
+  const panels = parent.querySelectorAll('.code-panel[data-group="' + group + '"]');
+  const idx = Array.from(el.parentElement.children).indexOf(el);
+  panels.forEach((p, i) => p.classList.toggle('active', i === idx));
+}
+</script>
+</body>
+</html>