From 40ab74a9e0d4f39d507bca54e085988dc5e32f0f Mon Sep 17 00:00:00 2001
From: Jz0ojiang <hi@im0o.top>
Date: Sat, 5 Sep 2026 18:09:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=85=A8=E7=AA=97=E5=8F=A3=E6=8B=96?=
 =?UTF-8?q?=E6=94=BE=E6=90=AC=E5=87=BA=20SourcePanel=EF=BC=8C=E6=8F=90?=
 =?UTF-8?q?=E5=88=B0=20App=20=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

拖放原来挂在 SourcePanel 的 window 监听上，前提是那个面板常驻挂载。右栏改成
按选中显示之后前提不成立，拖图进来会静默失效。抽成 useFileDrop，由 App 挂一次，
和右栏显示什么解耦，并补上拖入时的提示遮罩。
---
 src/App.vue               |  41 +++++++++++-
 src/editor/useFileDrop.ts | 128 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 167 insertions(+), 2 deletions(-)
 create mode 100644 src/editor/useFileDrop.ts

diff --git a/src/App.vue b/src/App.vue
index c5f130d..dda2257 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,7 @@ import BottomDock from "./components/BottomDock.vue";
 import SelectionMenu from "./components/SelectionMenu.vue";
 import ContextMenu from "./components/ContextMenu.vue";
 import { useShortcuts } from "./editor/useShortcuts";
+import { useFileDrop } from "./editor/useFileDrop";
 
 /**
  * Figma 式布局：顶部工具栏 / 左侧图层 / 中间画布 / 右侧属性 / 底部悬浮胶囊。
@@ -17,8 +18,12 @@ import { useShortcuts } from "./editor/useShortcuts";
  * 它们放在 .stage 里而不是 grid 的格子里，就是这个原因。
  *
  * **这个文件由主控独占**，并行开发期间各线只实现自己那个组件。
+ *
+ * 全窗口拖放在这里挂一次：它原来长在 SourcePanel 里，靠那个面板常驻挂载才收得到
+ * window 事件；右栏改成按选中显示之后那个前提没了，所以提到 App 这一层。
  */
 useShortcuts();
+const { dragging, notice } = useFileDrop();
 </script>
 
 <template>
@@ -31,10 +36,14 @@ useShortcuts();
       <SelectionMenu />
       <BottomDock />
       <ContextMenu />
+
+      <!-- 拖文件进来时的提示遮罩。只是视觉反馈，事件在 window 上收，不靠它。 -->
+      <div v-if="dragging" class="drop-hint">松手把图片加成新图层</div>
+      <p v-if="notice" class="drop-notice">{{ notice }}</p>
     </div>
 
-    <!-- 右栏分两层：上半是选中对象的属性（T8），下半是背景 / 滤镜 / 文字 / 导出
-         这些工具面板（T10）。分开是为了让两条开发线各占一个文件，互不干扰。 -->
+    <!-- 右栏分两层：上半是选中对象的几何与外观，下半是滤镜 / 文字 / 导出。
+         两层都只显示与当前选中对象相关的内容，没选中就基本是空的。 -->
     <div class="area-right">
       <Inspector class="right-top" />
       <ToolPanels class="right-bottom" />
@@ -80,6 +89,34 @@ useShortcuts();
   border-top: 1px solid var(--line);
 }
 
+.drop-hint {
+  position: absolute;
+  inset: 12px;
+  z-index: 30;
+  display: grid;
+  place-items: center;
+  border: 2px dashed var(--accent);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  color: var(--fg);
+  pointer-events: none;
+}
+
+.drop-notice {
+  position: absolute;
+  left: 50%;
+  bottom: 64px;
+  transform: translateX(-50%);
+  z-index: 30;
+  margin: 0;
+  padding: 6px 12px;
+  border-radius: 8px;
+  background: var(--bg3);
+  border: 1px solid var(--line);
+  font-size: 12px;
+  pointer-events: none;
+}
+
 /* 画布区是浮层的定位上下文：选中菜单、底部胶囊、右键菜单都绝对定位在它里面。 */
 .area-stage {
   grid-area: stage;
diff --git a/src/editor/useFileDrop.ts b/src/editor/useFileDrop.ts
new file mode 100644
index 0000000..b6a4423
--- /dev/null
+++ b/src/editor/useFileDrop.ts
@@ -0,0 +1,128 @@
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import { pickImageFiles, fromUpload, releaseObjectUrl } from "@/sources/upload";
+import { useEditor } from "./useEditor";
+import { commit } from "./useHistory";
+
+/**
+ * 全窗口拖放：图片文件拖进窗口任意处，作为**新图层**加进画布。
+ *
+ * 这段原来长在 `SourcePanel.vue` 里，靠「面板常驻挂载」才能收到 window 事件。
+ * 2026-09-05 右栏改成「只显示与选中对象相关的内容」之后那个前提没了——
+ * 面板不再常驻，拖放会跟着一起失效。所以搬到这里，由 `App.vue` 挂一次，
+ * 和右栏显示什么彻底解耦。
+ *
+ * 落到原生 `<input type="file">` 上的拖放不抢：那是浏览器自己的行为，
+ * 抢了反而让文件选择框里的拖放不工作。
+ */
+export function useFileDrop() {
+  const { addImage } = useEditor();
+
+  /** 是否正有文件悬在窗口上，用来画那层提示遮罩。 */
+  const dragging = ref(false);
+  const busy = ref(false);
+  /** 最近一次拖放的结果，界面上闪一下就够，不做常驻状态。 */
+  const notice = ref("");
+
+  /**
+   * dragenter/dragleave 会在**每个子元素**上各触发一次，
+   * 光看 dragleave 就收遮罩的话，鼠标划过任何一个子元素都会闪。
+   * 用进出计数配平。
+   */
+  let depth = 0;
+  /** 本会话建过的 object URL，卸载时一次性释放，否则一直占着内存。 */
+  const liveUrls: string[] = [];
+
+  function hasFiles(dt: DataTransfer | null): boolean {
+    return !!dt && dt.types.includes("Files");
+  }
+
+  function onNativeInput(e: Event): boolean {
+    const el = e.target as Element | null;
+    return !!el && !!el.closest?.('input[type="file"]');
+  }
+
+  function onDragEnter(e: DragEvent) {
+    if (onNativeInput(e) || !hasFiles(e.dataTransfer)) return;
+    e.preventDefault();
+    depth++;
+    dragging.value = true;
+  }
+
+  function onDragOver(e: DragEvent) {
+    if (onNativeInput(e) || !hasFiles(e.dataTransfer)) return;
+    // 不 preventDefault 就根本不会有 drop 事件。
+    e.preventDefault();
+  }
+
+  function onDragLeave(e: DragEvent) {
+    if (onNativeInput(e) || !hasFiles(e.dataTransfer)) return;
+    depth = Math.max(0, depth - 1);
+    if (depth === 0) dragging.value = false;
+  }
+
+  async function onDrop(e: DragEvent) {
+    depth = 0;
+    dragging.value = false;
+    if (onNativeInput(e) || !hasFiles(e.dataTransfer)) return;
+    e.preventDefault();
+    const files = Array.from(e.dataTransfer?.files ?? []);
+    if (files.length === 0) return;
+    await addFiles(files);
+  }
+
+  /** 一张一张加，个别失败不影响其余。全部加完才记一步历史。 */
+  async function addFiles(files: readonly File[]) {
+    if (busy.value) return;
+    const images = pickImageFiles(files);
+    if (images.length === 0) {
+      notice.value = "拖进来的文件里没有图片";
+      return;
+    }
+    busy.value = true;
+    notice.value = "";
+    let ok = 0;
+    const failed: string[] = [];
+    try {
+      for (const file of images) {
+        try {
+          const asset = await fromUpload(file);
+          // 拖进来的图一律是新图层，不铺底——铺底走顶栏的背景工具。
+          await addImage(asset.src, { toBack: false });
+          liveUrls.push(asset.src);
+          ok++;
+        } catch {
+          failed.push(file.name || "未命名文件");
+        }
+      }
+    } finally {
+      busy.value = false;
+    }
+    if (ok > 0) commit();
+    if (failed.length > 0) {
+      notice.value =
+        ok === 0
+          ? `这 ${failed.length} 张都加不进去（图片读不出来）`
+          : `${ok} 张已加入，${failed.length} 张失败`;
+    } else if (ok > 1) {
+      notice.value = `已加进 ${ok} 张图片（最新一张在最上层）`;
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener("dragenter", onDragEnter);
+    window.addEventListener("dragover", onDragOver);
+    window.addEventListener("dragleave", onDragLeave);
+    window.addEventListener("drop", onDrop);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("dragenter", onDragEnter);
+    window.removeEventListener("dragover", onDragOver);
+    window.removeEventListener("dragleave", onDragLeave);
+    window.removeEventListener("drop", onDrop);
+    liveUrls.forEach(releaseObjectUrl);
+    liveUrls.length = 0;
+  });
+
+  return { dragging, busy, notice };
+}