Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

2026-09-10 19:21:56 +08:00
commit 51ce3a28f7
654 changed files with 49082 additions and 0 deletions
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Aurora Admin · Steps (H5)</title>
+<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
+<link rel="stylesheet" href="./Steps.css">
+<style>
+  .demo { padding: 24px; background: #F5F7FA; font-family: var(--font-family); }
+  h1 { font-size: 20px; margin: 0 0 4px; color: #1F2329; }
+  .sub { color: #8C8C8C; margin: 0 0 24px; font-size: 12px; }
+  .demo-block { background: #fff; border-radius: 8px; padding: 24px; margin-bottom: 20px; }
+  .demo-block > .hint { color: #8C8C8C; font-size: 12px; margin: 0 0 16px; }
+</style>
+</head>
+<body>
+<div class="demo">
+  <h1>Aurora Admin · Steps 组件（纯 H5）</h1>
+  <p class="sub">对齐 StepList 规范：序号、标题、描述、状态、连接线</p>
+
+  <div class="demo-block">
+    <p class="hint">横向步骤条</p>
+    <div class="aa-steps horizontal" data-steps data-current="1"></div>
+  </div>
+
+  <div class="demo-block">
+    <p class="hint">纵向步骤条（含异常状态）</p>
+    <div class="aa-steps vertical" data-steps data-current="2" data-error="3"></div>
+  </div>
+</div>
+
+<script>
+const STEPS = [
+  { title: '填写订单', desc: '录入客户与商品信息' },
+  { title: '审核', desc: '主管确认订单合规' },
+  { title: '付款', desc: '完成支付流程' },
+  { title: '完成', desc: '生成发货单' }
+];
+
+function render(root) {
+  const current = +root.dataset.current;
+  const errorAt = root.dataset.error ? +root.dataset.error : -1;
+  const dir = root.classList.contains('horizontal') ? 'horizontal' : 'vertical';
+  root.innerHTML = STEPS.map((s, i) => {
+    let status = i < current ? 'finish' : (i === current ? 'process' : 'wait');
+    if (i === errorAt) status = 'error';
+    const icon = status === 'finish' ? '✓' : (status === 'error' ? '!' : (i + 1));
+    return `<div class="aa-step is-${status}">
+      <div class="aa-step-icon">${icon}</div>
+      <div class="aa-step-body">
+        <div class="aa-step-title">${s.title}</div>
+        <div class="aa-step-desc">${s.desc || ''}</div>
+      </div>
+    </div>`;
+  }).join('');
+}
+document.querySelectorAll('[data-steps]').forEach(render);
+</script>
+</body>
+</html>