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,93 @@
+<!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 · Popconfirm (H5)</title>
+<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
+<link rel="stylesheet" href="./Popconfirm.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: 32px; margin-bottom: 20px; }
+  .demo-block > .hint { color: #8C8C8C; font-size: 12px; margin: 0 0 16px; }
+  .aa-btn { height: 32px; padding: 0 16px; border-radius: 4px; font-size: 14px; cursor: pointer; border: 1px solid #E8ECF1; background: #fff; color: #262626; }
+  .aa-btn.danger { border-color: #F5222D; color: #F5222D; }
+  .aa-btn.danger:hover { background: #F5222D; color: #fff; }
+  .log { margin-top: 16px; font-size: 13px; color: #8C8C8C; }
+</style>
+</head>
+<body>
+<div class="demo">
+  <h1>Aurora Admin · Popconfirm 组件（纯 H5）</h1>
+  <p class="sub">对齐 Popconfirm 规范：气泡确认、图标+描述+确认/取消，点击外部关闭</p>
+
+  <div class="demo-block">
+    <p class="hint">删除确认（底部弹出）</p>
+    <span class="aa-popconfirm" data-popconfirm>
+      <button class="aa-btn danger">删除</button>
+      <div class="aa-popconfirm-pop placement-bottom" hidden>
+        <div class="aa-popconfirm-inner">
+          <span class="aa-popconfirm-icon">!</span>
+          <span class="aa-popconfirm-title">确定要删除该条记录吗？此操作不可撤销。</span>
+        </div>
+        <div class="aa-popconfirm-actions">
+          <button class="aa-popconfirm-btn" data-act="cancel">取消</button>
+          <button class="aa-popconfirm-btn primary" data-act="ok">确定</button>
+        </div>
+      </div>
+    </span>
+    <div class="log" id="log">结果：—</div>
+  </div>
+
+  <div class="demo-block">
+    <p class="hint">顶部弹出</p>
+    <span class="aa-popconfirm" data-popconfirm>
+      <button class="aa-btn">提交</button>
+      <div class="aa-popconfirm-pop placement-top" hidden>
+        <div class="aa-popconfirm-inner">
+          <span class="aa-popconfirm-icon">!</span>
+          <span class="aa-popconfirm-title">确定要提交审批吗？</span>
+        </div>
+        <div class="aa-popconfirm-actions">
+          <button class="aa-popconfirm-btn" data-act="cancel">取消</button>
+          <button class="aa-popconfirm-btn primary" data-act="ok">确定</button>
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+
+<script>
+document.querySelectorAll('[data-popconfirm]').forEach(root => {
+  const trigger = root.querySelector('button');
+  const pop = root.querySelector('.aa-popconfirm-pop');
+
+  trigger.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const open = pop.hidden;
+    closeAll();
+    pop.hidden = !open;
+  });
+
+  pop.querySelector('[data-act="cancel"]').addEventListener('click', (e) => {
+    e.stopPropagation(); pop.hidden = true;
+  });
+  pop.querySelector('[data-act="ok"]').addEventListener('click', (e) => {
+    e.stopPropagation(); pop.hidden = true;
+    const log = document.getElementById('log');
+    if (log) log.textContent = '结果：已确认（ok）';
+  });
+
+  // 点击气泡本身不关闭
+  pop.addEventListener('click', (e) => e.stopPropagation());
+});
+
+function closeAll() {
+  document.querySelectorAll('.aa-popconfirm-pop').forEach(p => p.hidden = true);
+}
+document.addEventListener('click', closeAll);
+</script>
+</body>
+</html>