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/settings-page.html ADDED Viewed

@@ -0,0 +1,1119 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1400">
+<title>配置表单页 · 标准参考范例 — v7.8.4</title>
+<!--
+  ★ 配置表单页标准参考范例（Standard Settings Form Reference）
+  ─────────────────────────────────────────────────────────────
+  用途：AI 生成配置/创建表单页时的基础参考，展示分组表单骨架与组件组合
+  ─────────────────────────────────────────────────────────────
+  布局：TWO_COL（Sidebar + ContentCard 单例容器）
+  Sidebar：完整 L1 框架（折叠/展开 240px↔68px / flyout / sub-menu）
+  内容区模式：D-FORM（settings-form 分组表单）
+  ─────────────────────────────────────────────────────────────
+  组件清单：
+    • Breadcrumb — 2级面包屑（L2 模式，禁止标题组件）
+    • Settings Section — 分组表单（title + description + form-rows）
+    • Form Controls — Input / Select / Stepper / Switch
+    • Settings Footer — 固定底栏（取消 + 提交）
+  ─────────────────────────────────────────────────────────────
+  规范来源：pages/form-page/SKILL.md
+  Tokens 版本：v7.8.4
+-->
+<style>
+/* ===== Reset & v7 Design Tokens ===== */
+*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+:root {
+  /* Primary */
+  --primary: 218.6 100% 46.7%;
+  --primary-foreground: 0 0% 100%;
+  --primary-hover: 218.6 100% 42%;
+  /* Gray (v7.4) */
+  --gray-primary: 220 9% 7%;
+  --gray-primary-foreground: 210 33% 99%;
+  --gray-secondary-foreground: 216 4% 26%;
+  --muted-foreground: 216 2% 45%;
+  --gray-disabled: 210 3% 63%;
+  --gray-line: 210 9% 91%;
+  --gray-sidebar-accent: 210 12% 93%;
+  --gray-muted: 220 18% 97%;
+  --gray-white: 0 0% 100%;
+  /* Legacy 别名（v7.4 向后兼容） */
+  --gray-title: 220 9% 7%;
+  --gray-secondary: 216 4% 26%;
+  --gray-tertiary: 216 2% 45%;
+  --gray-border: 210 9% 91%;
+  --gray-fill: 220 18% 97%;
+  --gray-bg: 220 18% 97%;
+  /* Feedback */
+  --success: 142 76% 36%;
+  --success-bg: 145 65% 95%;
+  --success-border: 142 72% 73%;
+  --warning: 40 88% 48%;
+  --warning-bg: 40 95% 93%;
+  --warning-border: 44 92% 70%;
+  --destructive: 0 72% 51%;
+  --destructive-bg: 0 93% 96%;
+  --destructive-border: 0 91% 82%;
+  --info: 217 91% 60%;
+  --info-bg: 214 85% 95%;
+  --info-border: 214 89% 82%;
+  /* Semantic */
+  --background: 220 18% 97%;
+  --card: 0 0% 100%;
+  --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 */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius: 12px;
+  --radius-lg: 16px;
+  /* Spacing */
+  --gap-xs: 4px;
+  --gap-sm: 8px;
+  --gap-md: 12px;
+  --gap-lg: 16px;
+  --gap-xl: 20px;
+  --gap-2xl: 24px;
+  --btn-padding-x: 16px;
+  --btn-padding-x-sm: 12px;
+  --button-gap: 8px;
+  --tabs-gap: 24px;
+  /* Typography */
+  --font-size-xs: 12px;
+  --font-size-base: 12px;
+  --font-size-sm: 13px;
+  --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-semibold: 600;
+  --font-weight-black: 900;
+  /* Layout（分层模型 v7.5）*/
+  --layout-sidebar-width: 240px;
+  --sidebar-collapsed-width: 68px;
+  --page-container-padding: 16px;          /* 层级 1：PageContainer 外层间距（v7.5 由 20→16） */
+  --page-container-padding-left: 0px;      /* sidebar 与内容区之间无间距 */
+  --card-padding-x: 20px;                  /* 层级 2：白卡容器内部左右内边距（v7.5 由 24→20；独立于 page-container-padding） */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); /* v7.6 ContentCard 唯一阴影源（无边框方案） */
+  --card-gap: 16px;
+  /* Transitions */
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --easing-ease: ease;
+}
+body {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-lg);
+  color: hsl(var(--gray-primary));
+  background: hsl(var(--background));
+  line-height: 1.5;
+}
+/* ===== Sidebar (v7 fixed positioning, twoLevel variant) ===== */
+.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 */
+.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 Content */
+.sidebar-content {
+  flex: 1;
+  flex-shrink: 0;
+  overflow-y: auto;
+  padding: 12px 0;
+}
+.sidebar-menu {
+  list-style: none;
+  padding: 0 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.sidebar-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--button-gap);
+  padding: 0 12px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  color: hsl(var(--sidebar-item-muted));
+  text-decoration: none;
+  cursor: pointer;
+  transition: background var(--duration-fast), color var(--duration-fast);
+  white-space: nowrap;
+}
+.sidebar-menu-item:hover {
+  background: hsl(var(--sidebar-hover));
+  color: hsl(var(--sidebar-item));
+}
+.sidebar-menu-item.active {
+  background: hsl(var(--sidebar-active));
+  color: hsl(var(--sidebar-active-foreground));
+}
+/* 展开箭头 */
+.sidebar-menu-item .expand-icon {
+  margin-left: auto;
+  width: 16px;
+  height: 16px;
+  transition: transform var(--duration-fast);
+}
+.sidebar-menu-item.expanded .expand-icon {
+  transform: rotate(90deg);
+}
+/* 子菜单容器 - twoLevel变体对齐规则 */
+.sidebar-sub-menu {
+  list-style: none;
+  padding: 0 0 0 24px;
+  display: none;
+}
+.sidebar-menu > li > .sidebar-sub-menu {
+  padding-left: 0;
+}
+.sidebar-sub-menu.show {
+  display: block;
+}
+/* 子菜单项：36px = padding(12) + icon(16) + gap(8) */
+.sidebar-sub-menu .sidebar-menu-item {
+  padding-left: 36px;
+  height: 36px;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+}
+/* 图标 */
+.item-icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.item-icon svg {
+  width: 16px;
+  height: 16px;
+}
+/* ===== 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.sidebar-menu-item > span:not(.item-icon),
+.sidebar.collapsed .sidebar-menu > li > a.sidebar-menu-item > .expand-icon,
+.sidebar.collapsed .sidebar-menu > li > a.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));
+}
+/* Sidebar Separator */
+.sidebar-divider {
+  height: 1px;
+  background: hsl(var(--sidebar-border));
+  margin: 0 12px;
+  flex-shrink: 0;
+}
+/* Sidebar Footer */
+.sidebar-footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  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)); }
+/* ===== PageContainer ===== */
+.page-container {
+  margin-left: var(--layout-sidebar-width);
+  padding: var(--page-container-padding) var(--page-container-padding) var(--page-container-padding) var(--page-container-padding-left);
+  min-height: 100vh;
+  transition: margin-left 0.2s ease;
+}
+.sidebar.collapsed ~ .page-container { margin-left: 68px; }
+/* ===== Breadcrumb ===== */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-medium);
+  color: hsl(var(--gray-secondary-foreground));
+  padding: 0;
+  height: 64px;
+  flex-shrink: 0;
+  margin-bottom: 0; /* Breadcrumb 底边直接与 section 顶边贴合 */
+}
+.breadcrumb a {
+  color: hsl(var(--gray-secondary-foreground));
+  text-decoration: none;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.breadcrumb a:hover { color: hsl(var(--gray-primary)); }
+.breadcrumb-sep {
+  display: flex;
+  align-items: center;
+  color: hsl(var(--muted-foreground));
+}
+.breadcrumb-sep svg { width: 20px; height: 20px; }
+.breadcrumb-current {
+  color: hsl(var(--gray-primary));
+  font-weight: var(--font-weight-medium);
+  cursor: default;
+}
+/* ===== PageHeader — L2面包屑模式下禁止标题组件，已移除 ===== */
+/* ===== ContentWrapper + Card (白卡容器) ===== */
+.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 - 2 * var(--page-container-padding));
+  padding-left: var(--card-padding-x);
+  padding-right: var(--card-padding-x);
+}
+.card-scrollable {
+  overflow-y: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+/* ===== Section (分区) ===== */
+.settings-section {
+  padding: var(--card-gap) 0;
+}
+.settings-section + .settings-section {
+  border-top: 1px solid hsl(var(--gray-line));
+}
+.section-title {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  color: hsl(var(--gray-primary));
+  margin-bottom: var(--gap-lg);
+}
+.section-desc {
+  font-size: var(--font-size-sm);
+  color: hsl(var(--gray-secondary-foreground));
+  margin-bottom: var(--gap-xl);
+}
+/* ===== Form Row ===== */
+.form-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-2xl);
+  padding: 12px 0;
+}
+.form-row + .form-row {
+  border-top: none;
+}
+.form-label {
+  width: 140px;
+  flex-shrink: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  color: hsl(var(--gray-primary));
+}
+.form-label .required {
+  color: hsl(var(--destructive));
+  margin-left: 2px;
+}
+.form-control {
+  flex: 1;
+  min-width: 0;
+  max-width: 400px;
+}
+/* ===== Input ===== */
+.input {
+  height: 32px;
+  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));
+  outline: none;
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+  width: 100%;
+}
+.input:focus {
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
+}
+.input::placeholder { color: hsl(var(--muted-foreground)); }
+.input[disabled] {
+  background: hsl(var(--gray-muted));
+  color: hsl(var(--gray-disabled));
+  cursor: not-allowed;
+}
+textarea.input {
+  height: auto;
+  padding: 8px 12px;
+  resize: vertical;
+  min-height: 80px;
+}
+/* ===== Custom Select (@teamix-evo/ui C23-Select) ===== */
+.select-wrapper {
+  position: relative;
+  width: 100%;
+}
+.select-trigger {
+  height: 32px;
+  padding: 0 8px;
+  padding-right: 28px;
+  border: 1px solid hsl(var(--gray-line));
+  border-radius: var(--radius-md);
+  background: hsl(var(--card));
+  font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary));
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  outline: none;
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+  position: relative;
+}
+.select-trigger:focus {
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
+}
+.select-trigger::after {
+  content: '';
+  position: absolute;
+  right: 7px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  pointer-events: none;
+}
+.select-trigger.placeholder {
+  color: hsl(var(--muted-foreground));
+}
+.select-content {
+  display: none;
+  position: absolute;
+  z-index: 50;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  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);
+  padding: 8px;
+  min-width: 100%;
+}
+.select-content.show {
+  display: block;
+}
+.select-item {
+  height: 32px;
+  padding: 0 8px;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-base);
+  color: hsl(var(--gray-primary));
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+.select-item:hover {
+  background: hsl(var(--gray-muted));
+}
+.select-item.selected {
+  color: hsl(var(--primary));
+  font-weight: var(--font-weight-medium);
+}
+.select-item[data-disabled] {
+  opacity: 0.45;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+/* ===== Switch ===== */
+.switch {
+  position: relative;
+  width: 28px;
+  height: 16px;
+  cursor: pointer;
+}
+.switch input { display: none; }
+.switch-track {
+  position: absolute;
+  inset: 0;
+  background: hsl(var(--gray-line));
+  border-radius: 8px;
+  transition: background var(--duration-fast);
+}
+.switch input:checked + .switch-track {
+  background: hsl(var(--success));
+}
+.switch-thumb {
+  position: absolute;
+  top: 2px; left: 2px;
+  width: 12px; height: 12px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+  transition: transform var(--duration-fast);
+  pointer-events: none;
+}
+.switch input:checked ~ .switch-thumb {
+  transform: translateX(12px);
+}
+/* ===== Buttons ===== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  padding: 0 var(--btn-padding-x);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: all var(--duration-fast);
+  white-space: nowrap;
+  gap: 6px;
+}
+.btn-primary {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+.btn-primary:hover { background: hsl(var(--primary-hover)); }
+.btn-secondary {
+  background: hsl(var(--card));
+  color: hsl(var(--gray-primary));
+  border-color: hsl(var(--gray-line));
+}
+.btn-secondary:hover { background: hsl(var(--gray-muted)); }
+.btn-ghost {
+  background: transparent;
+  color: hsl(var(--gray-secondary-foreground));
+  border: none;
+}
+.btn-ghost:hover { background: hsl(var(--gray-muted)); color: hsl(var(--gray-primary)); }
+.btn-danger {
+  background: hsl(var(--destructive));
+  color: white;
+}
+.btn-danger:hover { background: hsl(var(--destructive) / 0.9); }
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/* ===== Action footer (SubmitBar) — justify-content: flex-end，行动点居右 ===== */
+.settings-footer {
+  display: flex;
+  gap: var(--gap-sm);
+  height: 72px;
+  align-items: center;
+  border-top: 1px solid hsl(var(--gray-line));
+  background: hsl(var(--card));
+  justify-content: flex-end;
+  flex-shrink: 0;
+  z-index: 10;
+  /* 分割线出血：负外边距抵消 Card.paddingX，使 border-top 延伸到 Card 左右边缘 */
+  margin-left: calc(-1 * var(--card-padding-x));
+  margin-right: calc(-1 * var(--card-padding-x));
+  padding-left: var(--card-padding-x);
+  padding-right: var(--card-padding-x);
+}
+/* ===== Stepper ===== */
+.stepper {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+.stepper-btn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid hsl(var(--border, var(--gray-line)));
+  background: hsl(var(--card));
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: hsl(var(--gray-primary));
+}
+.stepper-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
+.stepper-btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
+.stepper input {
+  width: 60px;
+  height: 32px;
+  text-align: center;
+  border: 1px solid hsl(var(--gray-line));
+  border-left: none;
+  border-right: none;
+  font-size: var(--font-size-lg);
+  color: hsl(var(--gray-primary));
+  outline: none;
+}
+/* ===== Optional Tag ===== */
+.optional-tag {
+  font-size: 12px;
+  color: hsl(var(--gray-secondary-foreground));
+  font-weight: normal;
+  margin-left: 4px;
+}
+/* ===== Form Description ===== */
+.form-description {
+  font-size: 13px;
+  color: hsl(var(--gray-secondary-foreground));
+  margin-top: 4px;
+}
+</style>
+</head>
+<body>
+<!-- ===== Sidebar (v7: fixed, ul>li>a, pill items) ===== -->
+<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>
+<!-- ===== PageContainer ===== -->
+<div class="page-container">
+  <!-- ContentWrapper + Card -->
+  <div class="content-wrapper">
+    <div class="card">
+      <!-- 可滚动区域，Breadcrumb + PageHeader 在白卡内顶部 -->
+      <div class="card-scrollable" id="cardScrollable">
+        <!-- Breadcrumb (两级) — L2面包屑模式，禁止标题组件 -->
+        <nav class="breadcrumb">
+          <a href="#">AI 网关</a>
+          <span class="breadcrumb-sep"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></span>
+          <span class="breadcrumb-current">创建实例</span>
+        </nav>
+        <!-- 分组 1: 基本信息 -->
+        <div class="settings-section">
+          <h2 class="section-title">基本信息</h2>
+          <p class="section-desc">配置实例的基本属性</p>
+          <div class="form-row">
+            <div class="form-label">实例类型<span class="required">*</span></div>
+            <div class="form-control">
+              <div class="select-wrapper">
+                <button type="button" class="select-trigger" data-value="AI网关">AI网关</button>
+                <div class="select-content">
+                  <div class="select-item selected" data-value="AI网关">AI网关</div>
+                  <div class="select-item" data-value="API网关">API网关</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-label">实例名称<span class="required">*</span></div>
+            <div class="form-control">
+              <input class="input" type="text" placeholder="请输入实例名称（小写字母、数字、连字符）">
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-label">实例规格<span class="required">*</span></div>
+            <div class="form-control">
+              <div class="select-wrapper">
+                <button type="button" class="select-trigger" data-value="mini">mini</button>
+                <div class="select-content">
+                  <div class="select-item selected" data-value="mini">mini</div>
+                  <div class="select-item" data-value="small">small</div>
+                  <div class="select-item" data-value="standard">standard</div>
+                  <div class="select-item" data-value="large">large</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-label">实例节点数<span class="required">*</span></div>
+            <div class="form-control">
+              <div class="stepper">
+                <button class="stepper-btn">-</button><input type="number" value="1" min="1"><button class="stepper-btn">+</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 分组 2: 集群配置 -->
+        <div class="settings-section">
+          <h2 class="section-title">集群配置</h2>
+          <p class="section-desc">选择实例部署的集群和命名空间</p>
+          <div class="form-row">
+            <div class="form-label">集群<span class="required">*</span></div>
+            <div class="form-control">
+              <div class="select-wrapper">
+                <button type="button" class="select-trigger placeholder" data-value="">请选择集群</button>
+                <div class="select-content">
+                  <div class="select-item" data-value="cluster-prod-01">cluster-prod-01</div>
+                  <div class="select-item" data-value="cluster-staging-02">cluster-staging-02</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-label">命名空间<span class="required">*</span></div>
+            <div class="form-control">
+              <div class="select-wrapper">
+                <button type="button" class="select-trigger placeholder" data-value="">请选择命名空间</button>
+                <div class="select-content">
+                  <div class="select-item" data-value="default">default</div>
+                  <div class="select-item" data-value="higress-system">higress-system</div>
+                  <div class="select-item" data-value="istio-system">istio-system</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-label">Ingress 类名<span class="required">*</span></div>
+            <div class="form-control">
+              <input class="input" type="text" placeholder="请输入 IngressClass 名称">
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-label">镜像拉取密钥</div>
+            <div class="form-control">
+              <input class="input" type="text" placeholder="请输入 imagePullSecret 名称（可选）">
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-label">服务暴露方式</div>
+            <div class="form-control">
+              <div class="select-wrapper">
+                <button type="button" class="select-trigger" data-value="LoadBalancer（负载均衡）">LoadBalancer（负载均衡）</button>
+                <div class="select-content">
+                  <div class="select-item selected" data-value="LoadBalancer（负载均衡）">LoadBalancer（负载均衡）</div>
+                  <div class="select-item" data-value="NodePort（节点端口）">NodePort（节点端口）</div>
+                  <div class="select-item" data-value="ClusterIP（集群内部）">ClusterIP（集群内部）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 分组 3: 可观测性配置 -->
+        <div class="settings-section">
+          <h2 class="section-title">可观测性配置</h2>
+          <p class="section-desc">启用日志和监控服务</p>
+          <div class="form-row">
+            <div class="form-label">日志服务</div>
+            <div class="form-control">
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <label class="switch">
+                  <input type="checkbox" checked>
+                  <span class="switch-track"></span>
+                  <span class="switch-thumb"></span>
+                </label>
+                <div class="form-description" style="margin: 0;">开启后为实例采集运行日志</div>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-label">Prometheus 监控</div>
+            <div class="form-control">
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <label class="switch">
+                  <input type="checkbox" checked>
+                  <span class="switch-track"></span>
+                  <span class="switch-thumb"></span>
+                </label>
+                <div class="form-description" style="margin: 0;">启用 Prometheus 指标采集</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><!-- /.card-scrollable -->
+      <!-- Footer -->
+      <div class="settings-footer">
+        <button class="btn btn-secondary">取消</button>
+        <button class="btn btn-primary">提交</button>
+      </div>
+    </div><!-- /.card -->
+  </div><!-- /.content-wrapper -->
+</div><!-- /.page-container -->
+<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 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');
+  });
+});
+// Custom Select component
+document.querySelectorAll('.select-wrapper').forEach(wrapper => {
+  const trigger = wrapper.querySelector('.select-trigger');
+  const content = wrapper.querySelector('.select-content');
+  const items = wrapper.querySelectorAll('.select-item');
+  trigger.addEventListener('click', function(e) {
+    e.stopPropagation();
+    // Close all other selects
+    document.querySelectorAll('.select-content.show').forEach(c => {
+      if (c !== content) c.classList.remove('show');
+    });
+    content.classList.toggle('show');
+  });
+  items.forEach(item => {
+    if (item.hasAttribute('data-disabled')) return;
+    item.addEventListener('click', function() {
+      items.forEach(i => i.classList.remove('selected'));
+      this.classList.add('selected');
+      trigger.textContent = this.textContent;
+      trigger.dataset.value = this.dataset.value;
+      trigger.classList.remove('placeholder');
+      content.classList.remove('show');
+    });
+  });
+});
+// Close selects on outside click
+document.addEventListener('click', function(e) {
+  if (!e.target.closest('.select-wrapper')) {
+    document.querySelectorAll('.select-content.show').forEach(c => c.classList.remove('show'));
+  }
+});
+// Stepper buttons
+document.querySelectorAll('.stepper-btn').forEach(btn => {
+  btn.addEventListener('click', function() {
+    const input = this.parentElement.querySelector('input[type="number"]');
+    const min = parseInt(input.min) || 1;
+    let val = parseInt(input.value) || min;
+    if (this.textContent.trim() === '+') val++;
+    else if (val > min) val--;
+    input.value = val;
+  });
+});
+</script>
+</body>
+</html>