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 · DragUpload</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./DragUpload.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">DragUpload 拖拽上传</h2>
+    <p class="aa-desc">支持点击或拖拽文件上传，显示进度与缩略图，可删除。</p>
+
+    <div class="aa-demo">
+      <div class="aa-upload" id="upload">
+        <div class="aa-upload-drop" id="drop">
+          <span class="aa-upload-icon">⬆️</span>
+          <div class="aa-upload-hint">将文件拖到此处，或 <b>点击选择</b></div>
+        </div>
+        <input type="file" id="file" multiple style="display:none" />
+        <div class="aa-upload-list" id="list"></div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    var drop = document.getElementById('drop');
+    var input = document.getElementById('file');
+    var list = document.getElementById('list');
+    var files = [];
+
+    drop.addEventListener('click', function () { input.click(); });
+    input.addEventListener('change', function () { addFiles(input.files); input.value = ''; });
+    ['dragenter', 'dragover'].forEach(function (ev) {
+      drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.add('is-over'); });
+    });
+    ['dragleave', 'drop'].forEach(function (ev) {
+      drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.remove('is-over'); });
+    });
+    drop.addEventListener('drop', function (e) { addFiles(e.dataTransfer.files); });
+
+    function addFiles(flist) {
+      Array.prototype.forEach.call(flist, function (f) {
+        var id = 'f' + Date.now() + Math.random().toString(36).slice(2, 6);
+        var item = { id: id, name: f.name, progress: 0, done: false, thumb: '' };
+        if (/^image\//.test(f.type) && f.size < 2 * 1024 * 1024) {
+          var reader = new FileReader();
+          reader.onload = function (e) { item.thumb = e.target.result; render(); };
+          reader.readAsDataURL(f);
+        }
+        files.push(item);
+        render();
+        simulate(item);
+      });
+    }
+    function simulate(item) {
+      var timer = setInterval(function () {
+        item.progress = Math.min(100, item.progress + Math.random() * 22);
+        if (item.progress >= 100) { item.progress = 100; item.done = true; clearInterval(timer); }
+        render();
+      }, 220);
+    }
+    function render() {
+      list.innerHTML = files.map(function (it) {
+        var thumb = it.thumb ? '<img src="' + it.thumb + '">' : '文件';
+        return '<div class="aa-upload-item">' +
+          '<div class="aa-upload-thumb">' + thumb + '</div>' +
+          '<div class="aa-upload-meta">' +
+            '<div class="aa-upload-name">' + it.name + '</div>' +
+            '<div class="aa-upload-bar"><i style="width:' + it.progress + '%"></i></div>' +
+          '</div>' +
+          '<div class="aa-upload-status">' + (it.done ? '已完成' : Math.round(it.progress) + '%') + '</div>' +
+          '<button class="aa-upload-del" data-id="' + it.id + '">×</button>' +
+        '</div>';
+      }).join('');
+    }
+    list.addEventListener('click', function (e) {
+      var del = e.target.closest('[data-id]');
+      if (del) { files = files.filter(function (x) { return x.id !== del.dataset.id; }); render(); }
+    });
+  </script>
+</body>
+</html>