<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · Steps (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Steps.css">
<style>
  .demo { padding: 24px; background: var(--kole-color-page-bg); font-family: var(--font-family); }
  h1 { font-size: 20px; margin: 0 0 4px; color: var(--kole-color-text-title); }
  .sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
  .demo-block { background: var(--kole-color-card-bg); border-radius: 8px; padding: 24px; margin-bottom: 20px; }
  .demo-block > .hint { color: var(--kole-color-text-secondary); font-size: 12px; margin: 0 0 16px; }
</style>
</head>
<body>
<div class="demo">
  <h1>Kole UI · Steps 组件（纯 H5）</h1>
  <p class="sub">对齐 StepList 规范：序号、标题、描述、状态、连接线</p>

  <div class="demo-block">
    <p class="hint">横向步骤条</p>
    <div class="kole-steps horizontal" role="list" data-steps data-current="1"></div>
  </div>

  <div class="demo-block">
    <p class="hint">纵向步骤条（含异常状态）</p>
    <div class="kole-steps vertical" role="list" 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="kole-step is-${status}" role="listitem">
      <div class="kole-step-icon">${icon}</div>
      <div class="kole-step-body">
        <div class="kole-step-title">${s.title}</div>
        <div class="kole-step-desc">${s.desc || ''}</div>
      </div>
    </div>`;
  }).join('');
}
document.querySelectorAll('[data-steps]').forEach(render);
</script>
</body>
</html>
