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,84 @@
+<!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 · Collapse (H5)</title>
+<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
+<link rel="stylesheet" href="./Collapse.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 { max-width: 560px; margin-bottom: 24px; }
+  .demo-block > .hint { color: #8C8C8C; font-size: 12px; margin: 0 0 12px; }
+</style>
+</head>
+<body>
+<div class="demo">
+  <h1>Aurora Admin · Collapse 组件（纯 H5）</h1>
+  <p class="sub">对齐规范：标题栏高40px、左侧箭头旋转90°、内容分割线、手风琴模式</p>
+
+  <div class="demo-block">
+    <p class="hint">手风琴模式（同时仅展开一个）</p>
+    <div class="aa-collapse" data-accordion>
+      <div class="aa-collapse-item is-open">
+        <div class="aa-collapse-header"><span class="aa-collapse-arrow">▶</span><span class="aa-collapse-title">基本设置</span></div>
+        <div class="aa-collapse-content">系统名称、主题色、默认语言等基础配置。</div>
+      </div>
+      <div class="aa-collapse-item">
+        <div class="aa-collapse-header"><span class="aa-collapse-arrow">▶</span><span class="aa-collapse-title">通知设置</span></div>
+        <div class="aa-collapse-content" hidden>邮件、短信、站内信通知开关。</div>
+      </div>
+      <div class="aa-collapse-item">
+        <div class="aa-collapse-header"><span class="aa-collapse-arrow">▶</span><span class="aa-collapse-title">安全设置</span></div>
+        <div class="aa-collapse-content" hidden>登录保护、密码策略、IP 白名单。</div>
+      </div>
+      <div class="aa-collapse-item is-disabled">
+        <div class="aa-collapse-header"><span class="aa-collapse-arrow">▶</span><span class="aa-collapse-title">高级（无权限）</span></div>
+        <div class="aa-collapse-content" hidden>仅管理员可见的高级选项。</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="demo-block">
+    <p class="hint">非手风琴（可同时展开多个）</p>
+    <div class="aa-collapse">
+      <div class="aa-collapse-item is-open">
+        <div class="aa-collapse-header"><span class="aa-collapse-arrow">▶</span><span class="aa-collapse-title">订单管理</span></div>
+        <div class="aa-collapse-content">查看与处理所有订单。</div>
+      </div>
+      <div class="aa-collapse-item is-open">
+        <div class="aa-collapse-header"><span class="aa-collapse-arrow">▶</span><span class="aa-collapse-title">退款管理</span></div>
+        <div class="aa-collapse-content">退款审核与到账记录。</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+document.querySelectorAll('.aa-collapse').forEach(root => {
+  const accordion = root.hasAttribute('data-accordion');
+  root.addEventListener('click', (e) => {
+    const header = e.target.closest('.aa-collapse-header');
+    if (!header) return;
+    const item = header.parentElement;
+    if (item.classList.contains('is-disabled')) return;
+    const open = item.classList.toggle('is-open');
+    const content = item.querySelector('.aa-collapse-content');
+    if (content) content.hidden = !open;
+
+    if (accordion && open) {
+      root.querySelectorAll('.aa-collapse-item.is-open').forEach(other => {
+        if (other !== item) {
+          other.classList.remove('is-open');
+          const c = other.querySelector('.aa-collapse-content');
+          if (c) c.hidden = true;
+        }
+      });
+    }
+  });
+});
+</script>
+</body>
+</html>