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

@teamix-evo/skills 0.5.0 → 0.6.0

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

Files changed (72) hide show

package/src/teamix-evo-design-opentrek/examples/wizard-form-page.html ADDED Viewed

@@ -0,0 +1,877 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1400">
+<title>向导表单页 · 标准参考范例 — v7.8.4</title>
+<!--
+  ★ 向导表单页标准参考范例（Standard Wizard Form Reference）
+  ─────────────────────────────────────────────────────────────
+  用途：AI 生成多步骤向导表单页时的基础参考，展示步骤导航 + 分步表单骨架
+  ─────────────────────────────────────────────────────────────
+  布局：TWO_COL（Sidebar + ContentCard 单例容器）
+  Sidebar：完整 L1 框架（折叠/展开 240px↔68px / flyout / sub-menu）
+  内容区模式：D-WIZARD（wizard-form 向导表单）
+  ─────────────────────────────────────────────────────────────
+  组件清单：
+    • Breadcrumb — 2级面包屑（L2 模式）
+    • Steps — 横向步骤条（编号圆圈 + 连接线 + 步骤标签）
+    • Wizard Step Content — 分步表单（每步独立 section + form-rows）
+    • Form Controls — Input / Select / Stepper / Switch
+    • Wizard 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%;
+  --brand-primary: 213 94% 48%;
+  --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-placeholder: 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%;
+  --destructive: 0 72% 51%;
+  /* Semantic */
+  --background: 220 18% 97%;
+  --page-bg: 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: 10px;
+  --gap-lg: 12px;
+  --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;
+  /* Shadow */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  /* Layout */
+  --layout-sidebar-width: 240px;
+  --sidebar-collapsed-width: 68px;
+  --page-container-padding: 16px;
+  --page-container-padding-left: 0px;
+  --card-padding-x: 20px;
+  --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 ===== */
+.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-content { flex: 1; overflow-y: auto; padding: 12px 0; }
+.sidebar-menu { list-style: none; padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
+.sidebar-menu-item {
+  display: flex; align-items: center; gap: var(--button-gap);
+  padding: 0 12px; height: 40px; border-radius: var(--radius-md);
+  font-size: var(--font-size-lg); font-weight: var(--font-weight-medium);
+  color: hsl(var(--sidebar-item-muted)); text-decoration: none;
+  cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast);
+  white-space: nowrap;
+}
+.sidebar-menu-item:hover { background: hsl(var(--sidebar-hover)); color: hsl(var(--sidebar-item)); }
+.sidebar-menu-item.active { background: hsl(var(--sidebar-active)); color: hsl(var(--sidebar-active-foreground)); }
+.sidebar-menu-item .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; }
+.sidebar-menu > li > .sidebar-sub-menu { padding-left: 0; }
+.sidebar-sub-menu.show { display: block; }
+.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 */
+.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 { 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-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-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: 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)); }
+.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; }
+/* ===== 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 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; }
+/* ===== 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 - 48px); padding-left: var(--card-padding-x); padding-right: var(--card-padding-x);
+}
+.card-scrollable { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
+/* ===== Steps Component ===== */
+.steps-wrapper {
+  padding: var(--gap-2xl) 0;
+  flex-shrink: 0;
+}
+.steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.step-item {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+.step-item:last-child { flex: 0 0 auto; }
+.step-indicator {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  white-space: nowrap;
+  position: relative;
+  z-index: 1;
+}
+.step-circle {
+  width: 30px; height: 30px;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold);
+  flex-shrink: 0;
+  transition: all var(--duration-normal);
+  border: 2px solid hsl(var(--gray-line));
+  background: hsl(var(--card));
+  color: hsl(var(--gray-secondary-foreground));
+}
+.step-item:focus { outline: none; }
+.step-item:focus-visible .step-circle {
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.35);
+}
+.step-item.active .step-circle {
+  border-color: hsl(var(--brand-primary));
+  background: hsl(var(--brand-primary));
+  color: hsl(var(--primary-foreground));
+}
+.step-item.completed .step-circle {
+  border-color: hsl(var(--brand-primary));
+  background: hsl(var(--brand-primary));
+  color: hsl(var(--primary-foreground));
+}
+.step-label {
+  font-size: var(--font-size-lg);
+  color: hsl(var(--gray-secondary-foreground));
+  font-weight: var(--font-weight-normal);
+  transition: all var(--duration-normal);
+}
+.step-item.active .step-label {
+  color: hsl(var(--gray-primary));
+  font-weight: var(--font-weight-semibold);
+}
+.step-item.completed .step-label {
+  color: hsl(var(--gray-primary));
+  font-weight: var(--font-weight-medium);
+}
+.step-connector {
+  flex: 1;
+  height: 2px;
+  background: hsl(var(--gray-line));
+  margin: 0 var(--gap-lg);
+  border-radius: 9999px;
+  transition: background var(--duration-normal);
+}
+.step-item.completed .step-connector {
+  background: hsl(var(--brand-primary));
+}
+/* ===== Form Section ===== */
+.wizard-step-content {
+  display: none;
+  padding: var(--gap-2xl) 0;
+}
+.wizard-step-content.active { display: block; }
+.section-title {
+  font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold);
+  color: hsl(var(--gray-primary)); margin-bottom: var(--gap-sm);
+}
+.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-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(--gray-placeholder)); }
+/* ===== 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(--gray-placeholder)); }
+.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); }
+/* ===== 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); }
+/* ===== Stepper ===== */
+.stepper { display: flex; align-items: center; gap: 0; }
+.stepper-btn {
+  width: 32px; height: 36px;
+  border: 1px solid hsl(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: 36px; 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;
+}
+/* ===== 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-link { background: transparent; color: hsl(var(--gray-secondary-foreground)); border: none; padding: 0 8px; }
+.btn-link:hover { color: hsl(var(--gray-primary)); text-decoration: underline; }
+/* ===== Footer ===== */
+.settings-footer {
+  display: flex; align-items: center; justify-content: flex-end;
+  height: 72px; padding: 0; gap: var(--gap-sm);
+  border-top: 1px solid hsl(var(--gray-line)); background: hsl(var(--card));
+  flex-shrink: 0; z-index: 10;
+  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);
+}
+/* ===== Form Description ===== */
+.form-description { font-size: var(--font-size-sm); color: hsl(var(--gray-secondary-foreground)); margin-top: 4px; }
+</style>
+</head>
+<body>
+<!-- ===== Sidebar ===== -->
+<aside class="sidebar">
+  <div class="sidebar-header">
+    <div class="sidebar-logo" id="sidebarLogoArea">
+      <img src="./_assets/op-ai-gateway-logo.svg" alt="OP AI Gateway" />
+      <img class="collapsed-logo" src="./_assets/op-logo-collapsed.png" alt="OP" />
+      <svg class="expand-logo" viewBox="0 0 1024 1024" fill="currentColor" width="18" height="18"><path d="M151.68 616.96l82.56-82.56c12.8-12.8 12.8-32.64 0-45.44L151.68 406.4c-19.84-19.84-54.4-5.76-54.4 22.4v165.76c-0.64 28.16 33.92 42.88 54.4 22.4zM128.64 288h768c14.08 0 32-14.08 32-32s-17.92-32-32-32h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32zM896.64 736h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32h768c14.08 0 32-14.08 32-32s-17.28-32-32-32zM896.64 480h-480c-14.08 0-32 14.08-32 32s17.92 32 32 32h480c14.08 0 32-14.08 32-32s-17.28-32-32-32z"/></svg>
+    </div>
+    <button class="sidebar-collapse-btn" title="收起侧边栏">
+      <svg viewBox="0 0 1024 1024" fill="currentColor" width="18" height="18"><path d="M874.24 406.4l-82.56 82.56c-12.8 12.8-12.8 32.64 0 45.44l82.56 82.56c19.84 19.84 54.4 5.76 54.4-22.4V428.8c0-28.16-33.92-42.88-54.4-22.4zM128.64 288h768c14.08 0 32-14.08 32-32s-17.92-32-32-32h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32zM896.64 736h-768c-14.08 0-32 14.08-32 32s17.92 32 32 32h768c14.08 0 32-14.08 32-32s-17.28-32-32-32zM128.64 544h480c14.08 0 32-14.08 32-32s-17.92-32-32-32h-480c-14.08 0-32 14.08-32 32s17.92 32 32 32z"/></svg>
+    </button>
+  </div>
+  <div class="sidebar-content">
+    <ul class="sidebar-menu">
+      <li><a class="sidebar-menu-item active" href="#">
+        <span class="item-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></span>
+        AI 网关
+      </a></li>
+      <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>
+      <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>
+      <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>
+    </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">
+  <div class="content-wrapper">
+    <div class="card">
+      <div class="card-scrollable">
+        <!-- Breadcrumb -->
+        <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>
+        <!-- Steps -->
+        <div class="steps-wrapper" role="group" aria-label="创建实例步骤">
+          <div class="steps" role="tablist" aria-orientation="horizontal">
+            <div class="step-item active" data-step="1" role="tab" aria-selected="true" tabindex="0">
+              <div class="step-indicator">
+                <div class="step-circle" aria-label="第 1 步：基本信息">1</div>
+                <span class="step-label">基本信息</span>
+              </div>
+              <div class="step-connector" aria-hidden="true"></div>
+            </div>
+            <div class="step-item" data-step="2" role="tab" aria-selected="false" tabindex="-1">
+              <div class="step-indicator">
+                <div class="step-circle" aria-label="第 2 步：集群配置">2</div>
+                <span class="step-label">集群配置</span>
+              </div>
+              <div class="step-connector" aria-hidden="true"></div>
+            </div>
+            <div class="step-item" data-step="3" role="tab" aria-selected="false" tabindex="-1">
+              <div class="step-indicator">
+                <div class="step-circle" aria-label="第 3 步：可观测性配置">3</div>
+                <span class="step-label">可观测性配置</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Step 1: 基本信息 -->
+        <div class="wizard-step-content active" id="step-1">
+          <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>
+        <!-- Step 2: 集群配置 -->
+        <div class="wizard-step-content" id="step-2">
+          <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>
+        <!-- Step 3: 可观测性配置 -->
+        <div class="wizard-step-content" id="step-3">
+          <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>
+                <span class="form-description" style="margin: 0;">开启后为实例采集运行日志</span>
+              </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>
+                <span class="form-description" style="margin: 0;">启用 Prometheus 指标采集</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><!-- /.card-scrollable -->
+      <!-- Footer -->
+      <div class="settings-footer">
+        <button class="btn btn-link" id="btnCancel">取消</button>
+        <button class="btn btn-secondary" id="btnPrev" style="display: none;">上一步</button>
+        <button class="btn btn-primary" id="btnNext">下一步</button>
+        <button class="btn btn-primary" id="btnSubmit" style="display: none;">提交</button>
+      </div>
+    </div><!-- /.card -->
+  </div><!-- /.content-wrapper -->
+</div><!-- /.page-container -->
+<script>
+// ===== Wizard Step Logic =====
+let currentStep = 1;
+const totalSteps = 3;
+const stepItems = document.querySelectorAll('.step-item');
+const stepContents = document.querySelectorAll('.wizard-step-content');
+const btnPrev = document.getElementById('btnPrev');
+const btnNext = document.getElementById('btnNext');
+const btnSubmit = document.getElementById('btnSubmit');
+const btnCancel = document.getElementById('btnCancel');
+function updateWizard() {
+  // Update step indicators
+  stepItems.forEach((item, idx) => {
+    const stepNum = idx + 1;
+    item.classList.remove('active', 'completed');
+    const circle = item.querySelector('.step-circle');
+    const labelText = item.querySelector('.step-label').textContent.trim();
+    if (stepNum < currentStep) {
+      item.classList.add('completed');
+      circle.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+      circle.setAttribute('aria-label', '第 ' + stepNum + ' 步：' + labelText + '（已完成）');
+    } else if (stepNum === currentStep) {
+      item.classList.add('active');
+      circle.textContent = stepNum;
+      circle.setAttribute('aria-label', '第 ' + stepNum + ' 步：' + labelText);
+    } else {
+      circle.textContent = stepNum;
+      circle.setAttribute('aria-label', '第 ' + stepNum + ' 步：' + labelText);
+    }
+    // ARIA tab state & roving tabindex
+    item.setAttribute('aria-selected', stepNum === currentStep ? 'true' : 'false');
+    item.setAttribute('tabindex', stepNum === currentStep ? '0' : '-1');
+  });
+  // Update step content visibility
+  stepContents.forEach((content, idx) => {
+    content.classList.toggle('active', idx + 1 === currentStep);
+  });
+  // Update buttons
+  btnPrev.style.display = currentStep > 1 ? 'inline-flex' : 'none';
+  btnNext.style.display = currentStep < totalSteps ? 'inline-flex' : 'none';
+  btnSubmit.style.display = currentStep === totalSteps ? 'inline-flex' : 'none';
+}
+// ===== Steps Keyboard Navigation =====
+const stepsTablist = document.querySelector('.steps[role="tablist"]');
+if (stepsTablist) {
+  stepsTablist.addEventListener('keydown', function(e) {
+    if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
+    e.preventDefault();
+    if (e.key === 'ArrowRight' && currentStep < totalSteps) {
+      currentStep++;
+      updateWizard();
+    } else if (e.key === 'ArrowLeft' && currentStep > 1) {
+      currentStep--;
+      updateWizard();
+    }
+    // Move focus to the now-active step item
+    const activeItem = stepsTablist.querySelector('.step-item.active');
+    if (activeItem) activeItem.focus();
+  });
+}
+btnNext.addEventListener('click', function() {
+  if (currentStep < totalSteps) { currentStep++; updateWizard(); }
+});
+btnPrev.addEventListener('click', function() {
+  if (currentStep > 1) { currentStep--; updateWizard(); }
+});
+btnSubmit.addEventListener('click', function() {
+  alert('表单已提交！');
+});
+btnCancel.addEventListener('click', function() {
+  if (confirm('确定要取消吗？未保存的内容将丢失。')) {
+    currentStep = 1; updateWizard();
+  }
+});
+// ===== Sidebar collapse toggle =====
+const sidebar = document.querySelector('.sidebar');
+document.querySelector('.sidebar-collapse-btn').addEventListener('click', function() {
+  sidebar.classList.toggle('collapsed');
+});
+document.getElementById('sidebarLogoArea').addEventListener('click', function() {
+  if (sidebar.classList.contains('collapsed')) sidebar.classList.remove('collapsed');
+});
+// Sidebar expand toggle
+document.querySelectorAll('.sidebar-menu-item[data-toggle]').forEach(item => {
+  item.addEventListener('click', function(e) {
+    e.preventDefault();
+    this.classList.toggle('expanded');
+    const target = document.getElementById(this.getAttribute('data-toggle'));
+    if (target) target.classList.toggle('show');
+  });
+});
+// ===== Custom Select =====
+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();
+    document.querySelectorAll('.select-content.show').forEach(c => { if (c !== content) c.classList.remove('show'); });
+    content.classList.toggle('show');
+  });
+  items.forEach(item => {
+    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');
+    });
+  });
+});
+document.addEventListener('click', function(e) {
+  if (!e.target.closest('.select-wrapper')) {
+    document.querySelectorAll('.select-content.show').forEach(c => c.classList.remove('show'));
+  }
+});
+// ===== Stepper =====
+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>