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,70 @@
+<!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 · BankCardInput</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./BankCardInput.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">BankCardInput 银行卡输入</h2>
+    <p class="aa-desc">自动每 4 位空格、识别卡组织、Luhn 校验。</p>
+
+    <div class="aa-demo">
+      <div class="aa-demo__title">基础用法</div>
+      <div class="aa-card" id="card">
+        <div class="aa-card-field" id="field">
+          <input class="aa-card-input" id="input" placeholder="请输入银行卡号" inputmode="numeric" maxlength="23" />
+          <span class="aa-card-type unknown" id="type">识别中</span>
+        </div>
+        <div class="aa-card-tip" id="tip">支持 Visa / MasterCard / 银联等</div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    function detectType(v) {
+      if (/^4/.test(v)) return 'Visa';
+      if (/^5[1-5]/.test(v)) return 'MasterCard';
+      if (/^62/.test(v)) return '银联';
+      if (/^3[47]/.test(v)) return 'AmEx';
+      if (/^35/.test(v)) return 'JCB';
+      return '';
+    }
+    function luhn(v) {
+      var sum = 0, alt = false;
+      for (var i = v.length - 1; i >= 0; i--) {
+        var n = parseInt(v[i], 10);
+        if (alt) { n *= 2; if (n > 9) n -= 9; }
+        sum += n; alt = !alt;
+      }
+      return sum % 10 === 0;
+    }
+
+    var field = document.getElementById('field');
+    var input = document.getElementById('input');
+    var typeEl = document.getElementById('type');
+    var tip = document.getElementById('tip');
+
+    input.addEventListener('input', function () {
+      var digits = input.value.replace(/\D/g, '').slice(0, 19);
+      var grouped = digits.replace(/(.{4})/g, '$1 ').trim();
+      input.value = grouped;
+      var t = detectType(digits);
+      typeEl.textContent = t || '未知';
+      typeEl.className = 'aa-card-type' + (t ? '' : ' unknown');
+      var len = digits.length;
+      field.classList.remove('is-valid', 'is-invalid');
+      tip.className = 'aa-card-tip';
+      if (!len) { tip.textContent = '支持 Visa / MasterCard / 银联等'; }
+      else if (len >= 13 && luhn(digits)) { field.classList.add('is-valid'); tip.className = 'aa-card-tip valid'; tip.textContent = '卡号校验通过'; }
+      else if (len >= 13) { field.classList.add('is-invalid'); tip.className = 'aa-card-tip invalid'; tip.textContent = '卡号未通过 Luhn 校验'; }
+      else { tip.textContent = '继续输入卡号…'; }
+    });
+    input.addEventListener('focus', function () { field.classList.add('is-focus'); });
+    input.addEventListener('blur', function () { field.classList.remove('is-focus'); });
+  </script>
+</body>
+</html>