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 · FormModal</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./FormModal.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">FormModal 表单弹窗</h2>
+    <p class="aa-desc">弹窗内嵌表单，确认提交前进行校验，校验失败阻止关闭。</p>
+
+    <div class="aa-demo">
+      <button class="aa-btn aa-btn--primary" id="open">新建用户</button>
+      <p class="aa-code-tip" id="out"></p>
+    </div>
+  </div>
+
+  <div class="aa-formmodal-mask" id="mask" style="display:none">
+    <div class="aa-formmodal">
+      <div class="aa-formmodal-head"><span>新建用户</span><button class="aa-formmodal-close" id="close">×</button></div>
+      <div class="aa-formmodal-body">
+        <div class="aa-form-row">
+          <label class="aa-form-label"><span class="req">*</span>姓名</label>
+          <input class="aa-form-input" id="f-name" placeholder="请输入姓名" />
+          <div class="aa-form-err" id="e-name" style="display:none">姓名不能为空</div>
+        </div>
+        <div class="aa-form-row">
+          <label class="aa-form-label"><span class="req">*</span>邮箱</label>
+          <input class="aa-form-input" id="f-email" placeholder="name@example.com" />
+          <div class="aa-form-err" id="e-email" style="display:none">邮箱格式不正确</div>
+        </div>
+        <div class="aa-form-row">
+          <label class="aa-form-label">角色</label>
+          <input class="aa-form-input" id="f-role" placeholder="如：管理员" />
+        </div>
+      </div>
+      <div class="aa-formmodal-foot">
+        <button class="aa-btn" id="cancel">取消</button>
+        <button class="aa-btn aa-btn--primary" id="ok">提交</button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    var mask = document.getElementById('mask');
+    var out = document.getElementById('out');
+    document.getElementById('open').onclick = function () { mask.style.display = 'flex'; };
+    document.getElementById('close').onclick = close;
+    document.getElementById('cancel').onclick = close;
+    function close() { mask.style.display = 'none'; }
+
+    document.getElementById('ok').onclick = function () {
+      var name = document.getElementById('f-name').value.trim();
+      var email = document.getElementById('f-email').value.trim();
+      var ok = true;
+      var eName = document.getElementById('e-name'), eEmail = document.getElementById('e-email');
+      var iName = document.getElementById('f-name'), iEmail = document.getElementById('f-email');
+      eName.style.display = name ? 'none' : 'block'; iName.classList.toggle('is-error', !name); if (!name) ok = false;
+      var emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+      eEmail.style.display = emailOk ? 'none' : 'block'; iEmail.classList.toggle('is-error', !emailOk); if (!emailOk) ok = false;
+      if (!ok) return;
+      out.textContent = '提交成功：' + name + ' / ' + email + ' / ' + document.getElementById('f-role').value;
+      close();
+    };
+  </script>
+</body>
+</html>