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

frameworks/Steps.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import './Steps.css';
+
+/**
+ * Aurora Admin Steps（React）
+ * 对齐 组件2/7 StepList 规范：序号、标题、描述、状态、连接线、横/纵
+ *
+ * props:
+ *  - steps    : [{ title, desc? }]
+ *  - current  : 当前步骤索引
+ *  - errorAt  : 异常步骤索引（-1 表示无）
+ *  - direction: 'horizontal' | 'vertical'
+ */
+export default function Steps({ steps = [], current = 0, errorAt = -1, direction = 'horizontal' }) {
+  const statusOf = (i) => {
+    if (i === errorAt) return 'error';
+    if (i < current) return 'finish';
+    if (i === current) return 'process';
+    return 'wait';
+  };
+  const icon = (s) => (s === 'finish' ? '✓' : s === 'error' ? '!' : null);
+
+  return (
+    <div className={`aa-steps ${direction}`}>
+      {steps.map((s, i) => {
+        const st = statusOf(i);
+        return (
+          <div key={i} className={`aa-step is-${st}`}>
+            <div className="aa-step-icon">{icon(st) !== null ? icon(st) : i + 1}</div>
+            <div className="aa-step-body">
+              <div className="aa-step-title">{s.title}</div>
+              {s.desc && <div className="aa-step-desc">{s.desc}</div>}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/*
+用法示例：
+import Steps from './Steps';
+const steps = [{ title: '填写订单' }, { title: '审核' }, { title: '付款' }];
+<Steps steps={steps} current={1} direction="horizontal" />
+*/