dsh-files-native 0.1.2 → 0.1.3

package/lib/client.js

@@ -125,8 +125,8 @@ function subscribe(fn) {
     listeners.delete(fn);
   };
 }
-function pending() {
-  return items.slice();
+function pendingFor(sessionId) {
+  return items.filter((item) => item.sessionId === sessionId);
 }
 function add(sessionId, item) {
   items.push({ ...item, sessionId: item.sessionId || sessionId });
@@ -344,7 +344,7 @@ function uid() {
 }
 async function uploadFile(sessionId, file) {
   const id = uid();
-  const pending2 = {
+  const pending = {
     id,
     sessionId,
     name: file.name,
@@ -353,14 +353,14 @@ async function uploadFile(sessionId, file) {
     mediaType: file.type || "application/octet-stream",
     status: "uploading"
   };
-  add(sessionId, pending2);
+  add(sessionId, pending);
   const url = `/plugins/file-native/upload?sessionId=${encodeURIComponent(sessionId)}&name=${encodeURIComponent(file.name)}&type=${encodeURIComponent(file.type)}`;
   try {
     const res = await fetch(url, { method: "POST", body: file });
     const body = await res.json();
     if (!res.ok || !body.ok || body.file === void 0) {
       patch(sessionId, id, { status: "error", error: body.error ?? "\u4E0A\u4F20\u5931\u8D25" });
-      return { ...pending2, status: "error", error: body.error ?? "\u4E0A\u4F20\u5931\u8D25" };
+      return { ...pending, status: "error", error: body.error ?? "\u4E0A\u4F20\u5931\u8D25" };
     }
     patch(sessionId, id, {
       status: "done",
@@ -369,10 +369,10 @@ async function uploadFile(sessionId, file) {
       size: body.file.size,
       mediaType: body.file.mediaType
     });
-    return { ...pending2, ...body.file, status: "done" };
+    return { ...pending, ...body.file, status: "done" };
   } catch {
     patch(sessionId, id, { status: "error", error: "\u7F51\u7EDC\u9519\u8BEF" });
-    return { ...pending2, status: "error", error: "\u7F51\u7EDC\u9519\u8BEF" };
+    return { ...pending, status: "error", error: "\u7F51\u7EDC\u9519\u8BEF" };
   }
 }
 function intake(sessionId, files, onAddImages) {
@@ -436,9 +436,10 @@ function ImageTile({ item, onRemove, onOpen }) {
 }
 function FileTile({ item, sessionId }) {
   const remove2 = () => {
-    remove(sessionId, item.id);
+    const sid = item.sessionId || sessionId;
+    remove(sid, item.id);
     if (item.relPath) {
-      void fetch(`/plugins/file-native/remove?sessionId=${encodeURIComponent(sessionId)}&path=${encodeURIComponent(item.relPath)}`, { method: "POST" });
+      void fetch(`/plugins/file-native/remove?sessionId=${encodeURIComponent(sid)}&path=${encodeURIComponent(item.relPath)}`, { method: "POST" });
     }
   };
   const meta = item.status === "uploading" ? "\u4E0A\u4F20\u4E2D\u2026" : item.status === "error" ? item.error ?? "\u5931\u8D25" : formatSize(item.size);
@@ -462,7 +463,7 @@ function FileTile({ item, sessionId }) {
 function FileRail(props) {
   ensureStyles();
   const sessionId = String(props.sessionId ?? "");
-  const [files, setFiles] = (0, import_react2.useState)(() => pending());
+  const [files, setFiles] = (0, import_react2.useState)(() => pendingFor(sessionId));
   const [, setVersion] = (0, import_react2.useState)(() => version());
   const [preview, setPreview] = (0, import_react2.useState)(null);
   const [edges, setEdges] = (0, import_react2.useState)({ left: false, right: false });
@@ -470,12 +471,12 @@ function FileRail(props) {
   const countRef = (0, import_react2.useRef)(0);
   (0, import_react2.useEffect)(() => {
     const sync = () => {
-      setFiles(pending());
+      setFiles(pendingFor(sessionId));
       setVersion(version());
     };
     sync();
     return subscribe(sync);
-  }, []);
+  }, [sessionId]);
   const updateEdges = () => {
     const el = rowRef.current;
     if (el === null) return;
@@ -483,7 +484,8 @@ function FileRail(props) {
     const right = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
     setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
   };
-  const itemCount = props.attachments.length + files.length;
+  const visibleFiles = files.filter((item) => item.sessionId === sessionId);
+  const itemCount = props.attachments.length + visibleFiles.length;
   (0, import_react2.useLayoutEffect)(() => {
     const grew = countRef.current !== 0 && itemCount > countRef.current;
     countRef.current = itemCount;
@@ -519,7 +521,7 @@ function FileRail(props) {
     el.scrollBy({ left: direction * Math.max(el.clientWidth - 64, 200), behavior: "smooth" });
   };
   const hasImages = props.attachments.length > 0;
-  const hasFiles = files.length > 0;
+  const hasFiles = visibleFiles.length > 0;
   if (!hasImages && !hasFiles) return null;
   return (0, import_react2.createElement)(
     "div",
@@ -537,7 +539,7 @@ function FileRail(props) {
           onRemove: () => props.onRemoveImage(item.id),
           onOpen: () => setPreview(item)
         })),
-        ...files.map((item) => (0, import_react2.createElement)(FileTile, { key: item.id, item, sessionId }))
+        ...visibleFiles.map((item) => (0, import_react2.createElement)(FileTile, { key: item.id, item, sessionId }))
       ),
       edges.right ? (0, import_react2.createElement)("button", { type: "button", className: "fr-arrow fr-arrow-right", "aria-label": "\u5411\u53F3", onClick: () => page(1) }, (0, import_react2.createElement)(IconChevronRight)) : null
     ),
@@ -581,7 +583,9 @@ var import_react_dom2 = require("react-dom");
 var owner = null;
 var lastSessionId = "";
 var dragDepth = 0;
+var generation2 = 0;
 var listeners2 = /* @__PURE__ */ new Set();
+var queuedImages = /* @__PURE__ */ new Map();
 function emit2() {
   for (const fn of [...listeners2]) fn();
 }
@@ -591,14 +595,42 @@ function subscribeLive(fn) {
     listeners2.delete(fn);
   };
 }
+function flushQueuedImages() {
+  if (!owner?.onAddImages) return;
+  const sid = owner.sessionId;
+  const files = (queuedImages.get(sid) ?? []).concat(sid ? queuedImages.get("") ?? [] : []);
+  queuedImages.delete(sid);
+  if (sid) queuedImages.delete("");
+  if (files.length === 0) return;
+  owner.onAddImages(files);
+}
 function setLiveOwner(next) {
+  generation2 += 1;
   owner = next;
   if (next?.sessionId) lastSessionId = next.sessionId;
   emit2();
+  if (next) flushQueuedImages();
+  return generation2;
+}
+function clearLiveOwner(token) {
+  if (token !== generation2) return;
+  owner = null;
+  emit2();
 }
 function getLiveOwner() {
   return owner;
 }
+function addImages(sessionId, files) {
+  if (files.length === 0) return;
+  const sid = sessionId || currentSessionId();
+  if (owner?.onAddImages && (!owner.sessionId || owner.sessionId === sid)) {
+    owner.onAddImages(files);
+    return;
+  }
+  const key = sid || owner?.sessionId || lastSessionId;
+  const prev = queuedImages.get(key) ?? [];
+  queuedImages.set(key, prev.concat([...files]));
+}
 function setDragDepth(depth) {
   const next = Math.max(0, depth);
   if (next === dragDepth) return;
@@ -696,11 +728,9 @@ function PaperclipButton(props) {
   const onChange = (event) => {
     const files = Array.from(event.currentTarget.files ?? []);
     event.currentTarget.value = "";
-    const live = getLiveOwner();
-    const sid = String(props.sessionId || live?.sessionId || currentSessionId());
+    const sid = String(props.sessionId || currentSessionId());
     if (files.length === 0) return;
-    intakeFiles(sid, files, live?.onAddImages ?? (() => {
-    }));
+    intakeFiles(sid, files, (images) => addImages(sid, images));
   };
   return (0, import_react5.createElement)(
     "span",
@@ -1035,15 +1065,19 @@ var inject = ["slots"];
 function RailSlot(props) {
   ensureStyles();
   const sessionId = resolveSessionId(props);
-  setLiveOwner({
-    attachments: props.attachments,
-    canAcceptDrop: props.canAcceptDrop,
-    onAddImages: props.onAddImages,
-    onRemoveImage: props.onRemoveImage,
-    sessionId,
-    dropLimits: props.dropLimits
-  });
-  (0, import_react8.useEffect)(() => () => setLiveOwner(null), []);
+  rememberSessionId(sessionId);
+  const tokenRef = (0, import_react8.useRef)(0);
+  (0, import_react8.useLayoutEffect)(() => {
+    tokenRef.current = setLiveOwner({
+      attachments: props.attachments,
+      canAcceptDrop: props.canAcceptDrop,
+      onAddImages: props.onAddImages,
+      onRemoveImage: props.onRemoveImage,
+      sessionId,
+      dropLimits: props.dropLimits
+    });
+  }, [sessionId, props.attachments, props.canAcceptDrop, props.onAddImages, props.onRemoveImage, props.dropLimits]);
+  (0, import_react8.useLayoutEffect)(() => () => clearLiveOwner(tokenRef.current), []);
   return null;
 }
 function PickerSlot(props) {
@@ -1082,11 +1116,8 @@ function installLiveIntercept() {
     canAccept: () => true,
     onDepth: (depth) => setDragDepth(depth),
     onFiles: (files) => {
-      const live = getLiveOwner();
-      const sessionId = live?.sessionId || currentSessionId();
-      const addImages = live?.onAddImages ?? (() => {
-      });
-      intakeFiles(sessionId, files, addImages);
+      const sessionId = currentSessionId();
+      intakeFiles(sessionId, files, (images) => addImages(sessionId, images));
     }
   });
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-files-native",
   "description": "DSH 插件:接近原生质感的附件上传——拖入/粘贴/回形针,图片缩略图与文件卡片混排在官方附件栏",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "main": "lib/index.js",
   "exports": {