feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json

2026-09-12 14:18:41 +08:00
parent 16f365a045
commit c65a69c34e
401 changed files with 22932 additions and 140 deletions
@@ -0,0 +1,65 @@
+import React, { useRef, useState } from 'react';
+import './DragUpload.css';
+
+export default function DragUpload() {
+  const [files, setFiles] = useState([]);
+  const [over, setOver] = useState(false);
+  const fileRef = useRef(null);
+
+  const addFiles = (flist) => {
+    Array.prototype.forEach.call(flist, (f) => {
+      const id = 'f' + Date.now() + Math.random().toString(36).slice(2, 6);
+      const item = { id, name: f.name, progress: 0, done: false, thumb: '' };
+      if (/^image\//.test(f.type) && f.size < 2 * 1024 * 1024) {
+        const reader = new FileReader();
+        reader.onload = (e) => setFiles((fs) => fs.map((x) => (x.id === id ? { ...x, thumb: e.target.result } : x)));
+        reader.readAsDataURL(f);
+      }
+      setFiles((fs) => [...fs, item]);
+      const t = setInterval(() => {
+        setFiles((fs) =>
+          fs.map((x) => {
+            if (x.id !== id) return x;
+            const p = Math.min(100, x.progress + Math.random() * 22);
+            return { ...x, progress: p, done: p >= 100 };
+          })
+        );
+        setFiles((fs) => {
+          if (fs.find((x) => x.id === id && x.progress >= 100)) clearInterval(t);
+          return fs;
+        });
+      }, 220);
+    });
+  };
+
+  const remove = (id) => setFiles((fs) => fs.filter((x) => x.id !== id));
+
+  return (
+    <div className="aa-upload">
+      <div
+        className={'aa-upload-drop' + (over ? ' is-over' : '')}
+        onClick={() => fileRef.current.click()}
+        onDragOver={(e) => { e.preventDefault(); setOver(true); }}
+        onDragLeave={() => setOver(false)}
+        onDrop={(e) => { e.preventDefault(); setOver(false); addFiles(e.dataTransfer.files); }}
+      >
+        <span className="aa-upload-icon">⬆️</span>
+        <div className="aa-upload-hint">将文件拖到此处，或 <b>点击选择</b></div>
+      </div>
+      <input ref={fileRef} type="file" multiple style={{ display: 'none' }} onChange={(e) => { addFiles(e.target.files); e.target.value = ''; }} />
+      <div className="aa-upload-list">
+        {files.map((it) => (
+          <div key={it.id} className="aa-upload-item">
+            <div className="aa-upload-thumb">{it.thumb ? <img src={it.thumb} alt="" /> : '文件'}</div>
+            <div className="aa-upload-meta">
+              <div className="aa-upload-name">{it.name}</div>
+              <div className="aa-upload-bar"><i style={{ width: it.progress + '%' }} /></div>
+            </div>
+            <div className="aa-upload-status">{it.done ? '已完成' : Math.round(it.progress) + '%'}</div>
+            <button className="aa-upload-del" onClick={() => remove(it.id)}>×</button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}