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,106 @@
+<!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 · RangeQuickPicker</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./RangeQuickPicker.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">RangeQuickPicker 日期范围快捷选择</h2>
+    <p class="aa-desc">内置快捷选项（今天、近7天、本月等），也支持自定义起止日期。</p>
+
+    <div class="aa-demo">
+      <div class="aa-demo__title">报表时间筛选</div>
+      <div class="aa-range" id="range">
+        <div class="aa-range-trigger" id="trigger">
+          <span id="label" class="aa-range-placeholder">请选择时间范围</span>
+        </div>
+        <div class="aa-range-pop" id="pop" style="display:none">
+          <div class="aa-range-presets" id="presets"></div>
+          <div class="aa-range-custom">
+            <input type="date" id="start" />
+            <span class="aa-range-tilde">~</span>
+            <input type="date" id="end" />
+          </div>
+          <div class="aa-range-actions">
+            <button class="aa-range-cancel" id="cancel">取消</button>
+            <button class="aa-range-ok" id="ok">确定</button>
+          </div>
+        </div>
+      </div>
+      <p class="aa-code-tip" id="out"></p>
+    </div>
+  </div>
+
+  <script>
+    var PRESETS = [
+      { label: '今天', days: 0 },
+      { label: '昨天', days: -1, len: 1 },
+      { label: '近7天', days: -6 },
+      { label: '近30天', days: -29 },
+      { label: '本月', month: 'this' },
+      { label: '上月', month: 'last' },
+      { label: '本年', year: 'this' }
+    ];
+    function fmt(d) {
+      return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
+    }
+    function presetRange(p) {
+      var end = new Date(); end.setHours(0, 0, 0, 0);
+      var start = new Date(end);
+      if (p.year === 'this') { start = new Date(end.getFullYear(), 0, 1); }
+      else if (p.month === 'this') { start = new Date(end.getFullYear(), end.getMonth(), 1); }
+      else if (p.month === 'last') { start = new Date(end.getFullYear(), end.getMonth() - 1, 1); var e = new Date(end.getFullYear(), end.getMonth(), 1); end = new Date(e - 1); }
+      else { start.setDate(end.getDate() + (p.days || 0)); }
+      if (p.days === -1 && !p.len) { start = new Date(end); }
+      if (p.days === -1 && p.len) { start = new Date(end); start.setDate(end.getDate() - (p.len - 1)); }
+      return { start: fmt(start), end: fmt(end) };
+    }
+
+    var range = document.getElementById('range');
+    var trigger = document.getElementById('trigger');
+    var pop = document.getElementById('pop');
+    var label = document.getElementById('label');
+    var out = document.getElementById('out');
+    var cur = { start: '', end: '' };
+
+    var presetsEl = document.getElementById('presets');
+    PRESETS.forEach(function (p, i) {
+      var b = document.createElement('button');
+      b.className = 'aa-range-preset'; b.textContent = p.label;
+      b.onclick = function () {
+        var r = presetRange(p);
+        cur = r; document.getElementById('start').value = r.start; document.getElementById('end').value = r.end;
+        Array.prototype.forEach.call(presetsEl.children, function (c) { c.classList.remove('is-active'); });
+        b.classList.add('is-active');
+      };
+      presetsEl.appendChild(b);
+    });
+
+    function refresh() {
+      if (cur.start && cur.end) {
+        label.textContent = cur.start + '  ~  ' + cur.end;
+        label.classList.remove('aa-range-placeholder');
+        out.textContent = '已选范围：' + cur.start + ' 至 ' + cur.end;
+      }
+    }
+    trigger.onclick = function (e) {
+      e.stopPropagation();
+      pop.style.display = pop.style.display === 'none' ? 'block' : 'none';
+      trigger.classList.toggle('is-focus', pop.style.display === 'block');
+    };
+    document.getElementById('ok').onclick = function () {
+      cur.start = document.getElementById('start').value;
+      cur.end = document.getElementById('end').value;
+      pop.style.display = 'none'; trigger.classList.remove('is-focus');
+      Array.prototype.forEach.call(presetsEl.children, function (c) { c.classList.remove('is-active'); });
+      refresh();
+    };
+    document.getElementById('cancel').onclick = function () { pop.style.display = 'none'; trigger.classList.remove('is-focus'); };
+    document.addEventListener('click', function (e) { if (!range.contains(e.target)) { pop.style.display = 'none'; trigger.classList.remove('is-focus'); } });
+  </script>
+</body>
+</html>