接入桌面图片拖入创作槽位

CreativeImageInputPanel 订阅 file.imageDropped 桌面拖入事件按拖入坐标命中主图卡片后转换为现有 File 回调避免窗口级拖入被多个创作面板同时消费更新组件测试和原生壳架构文档
2026-06-18 03:27:55 +08:00
parent d5cab219a1
commit d261cc8d0b
5 changed files with 244 additions and 3 deletions
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -35,6 +35,7 @@
 - 2026-06-18 桌面图片导入：新增 `file.importImage` 与 `file.imageDropped` HostBridge capability，Tauri 壳通过系统文件选择框和主窗口拖拽事件读取用户选择 / 拖入的真实图片，只允许 `image/png`、`image/jpeg`、`image/webp` 且单次不超过 10 MiB；H5 统一使用 `importHostImageFile()` / `subscribeHostImageDrop()`，宿主只回传文件名、MIME、base64 内容、字节数和可选坐标，不暴露本地绝对路径，也不开放通用文件系统。
 - 2026-06-18 移动图片导入：Expo 壳开始声明并实现 `file.importImage`，通过 `expo-image-picker` 请求相册权限并打开系统相册选择器，只允许 `image/png`、`image/jpeg`、`image/webp` 且单次不超过 10 MiB；成功只回传清洗后的文件名、MIME、base64 内容和字节数，不暴露设备本地 URI，不请求相机或麦克风权限，用户取消返回 `cancelled` 并由 H5 facade 归为 `false`。
 - 2026-06-18 H5 图片上传接入宿主导入：`CreativeImageInputPanel` 在 `native_app` 且声明 `file.importImage` 时，主图上传和描述参考图上传优先调用 `importHostImageFile()`，并把宿主返回的 base64 图片转换为现有 `File` 回调；浏览器、小程序和未声明能力的裁剪壳继续走原生 `<input type="file">` 路径，不新增玩法侧上传分叉。
+- 2026-06-18 桌面图片拖入接入主图槽位：`CreativeImageInputPanel` 在桌面壳声明 `file.imageDropped` 时订阅宿主拖入事件，只在拖入坐标命中当前主图卡片且未被上层元素遮挡时消费事件，避免窗口级拖入被多个创作面板同时接收；成功后仍转换为现有 `File` 上传回调。
 - 影响范围：`src/services/host-bridge/`、未来 `apps/mobile-shell/`、未来 `apps/desktop-shell/`、移动端支付 / 分享 / 深链 / 推送、桌面端系统能力、AI H5 sandbox 的 GameBridge 边界。
 - 验证方式：普通浏览器、小程序、Expo 壳、Tauri 壳都能返回正确 `getHostRuntime()`；未支持能力能回退 H5；固定玩法在各宿主中读取同一作品数据和运行态 snapshot；AI sandbox 无法直接调用 HostBridge；Tauri release 不允许任意远端页面调用桌面命令。
 - 关联文档：`docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md`、`docs/【前端架构】宿主壳能力统一协议-2026-06-17.md`。
--- a/docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md
+++ b/docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md
@@ -260,7 +260,7 @@ GameBridge 禁止：
 - 实现 runtime、openExternalUrl、clipboard、share fallback、窗口标题同步。
 - 验证 macOS / Windows / Linux 至少一条本地 smoke。

-当前状态：已新增 `apps/desktop-shell/`，Tauri dev 直接加载本地主站 Vite，release 打包根 `dist` 主站资产。Rust 侧只把 `host_bridge_request` command 授给主窗口，`appearance.getColorScheme` 由 Rust 内部读取主窗口 `theme()` 并返回 `light` / `dark` / `unknown`，不设置或覆盖系统主题；`app.lifecycle` 由主窗口 focus / blur 事件注入 `active` / `inactive` 统一状态，不开放 Tauri event 插件给前端；`network.status` 由 Rust 对 `app.genarrative.world:443` 做短超时 TCP 可达性查询，`network.statusChanged` 由主 WebView 的 `online` / `offline` 事件注入，不开放任意网络探测给 H5；`app.openExternalUrl` 由 Rust 内部通过 opener 插件执行且只允许 `http:`、`https:`、`mailto:`、`tel:` 外链协议，ICP备案号和资产调试原图等 H5 外链入口在 `native_app` 中优先通过该能力离开主窗口并交给系统浏览器；`navigation.openNativePage` 只接受 `https://app.genarrative.world` 同源 H5 route 并在主窗口内受控跳转，`clipboard.writeText` 由 Rust 内部通过 clipboard-manager 插件写入系统剪贴板并由 H5 复制服务优先调用，`app.setTitle` 通过 Tauri 主窗口 API 同步窗口标题并拒绝空标题 / 控制字符，`app.setBadgeCount` 通过主窗口 `set_badge_count` 设置任务栏角标，数量只接受 `0-99999` 整数且 `0` 表示清除；H5 主站会按当前平台阶段先更新 `document.title`，再通过 `app.setTitle` 把同一标题同步给 Tauri 窗口，Expo 移动壳不声明该能力时静默忽略；不把 opener、clipboard 或 dialog 插件命令直接暴露给前端。当前真实能力为 `host.getRuntime`、`appearance.getColorScheme`、`app.lifecycle`、`network.status`、`network.statusChanged`、`share.setTarget`、`share.open`、`navigation.openNativePage`、`app.openExternalUrl`、`app.setTitle`、`app.setBadgeCount`、`clipboard.writeText`、`file.exportText`、`file.exportImage`、`file.importImage` 和 `file.imageDropped`；H5 会在主 App 启动时通过真实 `host.getRuntime` 回读并缓存这些能力，即使入口 URL 缺少 `hostCapabilities`，也只按宿主真实回包开启能力入口；其中 `share.open` 会把直接传入的分享 payload 或 `share.setTarget` 缓存的作品目标整理成非空分享文本并写入系统剪贴板，返回 `copied_to_clipboard`，发布分享弹窗在桌面壳中也通过该能力提供“系统分享”动作；`file.exportText` 通过系统保存对话框让用户选择本地路径，清洗文件名、限制单次文本导出不超过 5 MiB，写入成功后只返回文件名和字节数，不把本机绝对路径暴露给 H5，用户取消返回 `cancelled`；`file.exportImage` 同样通过系统保存对话框写入 H5 生成的图片字节，只接受 `image/png` / `image/jpeg` / `image/webp` base64 数据，单次不超过 5 MiB，分享卡下载会优先走该能力，用户取消返回 `cancelled`；`file.importImage` 通过系统选择框读取用户选择的图片，`file.imageDropped` 通过主窗口拖拽事件读取用户拖入的图片，二者都只接受 `image/png` / `image/jpeg` / `image/webp`、单次不超过 10 MiB，成功只返回文件名、MIME、base64 内容和字节数，不把本机绝对路径暴露给 H5，也不开放通用文件系统；通用创作图片输入面板 `CreativeImageInputPanel` 在桌面壳声明 `file.importImage` 时会优先打开系统图片选择框，并把结果转换为现有 `File` 上传回调，普通浏览器、小程序和未声明能力的壳继续保留原文件输入路径。原生系统分享面板、登录和支付未接入真实插件 / 渠道前不声明支持，不返回 mock 成功。
+当前状态：已新增 `apps/desktop-shell/`，Tauri dev 直接加载本地主站 Vite，release 打包根 `dist` 主站资产。Rust 侧只把 `host_bridge_request` command 授给主窗口，`appearance.getColorScheme` 由 Rust 内部读取主窗口 `theme()` 并返回 `light` / `dark` / `unknown`，不设置或覆盖系统主题；`app.lifecycle` 由主窗口 focus / blur 事件注入 `active` / `inactive` 统一状态，不开放 Tauri event 插件给前端；`network.status` 由 Rust 对 `app.genarrative.world:443` 做短超时 TCP 可达性查询，`network.statusChanged` 由主 WebView 的 `online` / `offline` 事件注入，不开放任意网络探测给 H5；`app.openExternalUrl` 由 Rust 内部通过 opener 插件执行且只允许 `http:`、`https:`、`mailto:`、`tel:` 外链协议，ICP备案号和资产调试原图等 H5 外链入口在 `native_app` 中优先通过该能力离开主窗口并交给系统浏览器；`navigation.openNativePage` 只接受 `https://app.genarrative.world` 同源 H5 route 并在主窗口内受控跳转，`clipboard.writeText` 由 Rust 内部通过 clipboard-manager 插件写入系统剪贴板并由 H5 复制服务优先调用，`app.setTitle` 通过 Tauri 主窗口 API 同步窗口标题并拒绝空标题 / 控制字符，`app.setBadgeCount` 通过主窗口 `set_badge_count` 设置任务栏角标，数量只接受 `0-99999` 整数且 `0` 表示清除；H5 主站会按当前平台阶段先更新 `document.title`，再通过 `app.setTitle` 把同一标题同步给 Tauri 窗口，Expo 移动壳不声明该能力时静默忽略；不把 opener、clipboard 或 dialog 插件命令直接暴露给前端。当前真实能力为 `host.getRuntime`、`appearance.getColorScheme`、`app.lifecycle`、`network.status`、`network.statusChanged`、`share.setTarget`、`share.open`、`navigation.openNativePage`、`app.openExternalUrl`、`app.setTitle`、`app.setBadgeCount`、`clipboard.writeText`、`file.exportText`、`file.exportImage`、`file.importImage` 和 `file.imageDropped`；H5 会在主 App 启动时通过真实 `host.getRuntime` 回读并缓存这些能力，即使入口 URL 缺少 `hostCapabilities`，也只按宿主真实回包开启能力入口；其中 `share.open` 会把直接传入的分享 payload 或 `share.setTarget` 缓存的作品目标整理成非空分享文本并写入系统剪贴板，返回 `copied_to_clipboard`，发布分享弹窗在桌面壳中也通过该能力提供“系统分享”动作；`file.exportText` 通过系统保存对话框让用户选择本地路径，清洗文件名、限制单次文本导出不超过 5 MiB，写入成功后只返回文件名和字节数，不把本机绝对路径暴露给 H5，用户取消返回 `cancelled`；`file.exportImage` 同样通过系统保存对话框写入 H5 生成的图片字节，只接受 `image/png` / `image/jpeg` / `image/webp` base64 数据，单次不超过 5 MiB，分享卡下载会优先走该能力，用户取消返回 `cancelled`；`file.importImage` 通过系统选择框读取用户选择的图片，`file.imageDropped` 通过主窗口拖拽事件读取用户拖入的图片，二者都只接受 `image/png` / `image/jpeg` / `image/webp`、单次不超过 10 MiB，成功只返回文件名、MIME、base64 内容和字节数，不把本机绝对路径暴露给 H5，也不开放通用文件系统；通用创作图片输入面板 `CreativeImageInputPanel` 在桌面壳声明 `file.importImage` 时会优先打开系统图片选择框，在同时声明 `file.imageDropped` 时会按宿主拖入坐标把图片交给命中的主图槽位，并把结果转换为现有 `File` 上传回调，普通浏览器、小程序和未声明能力的壳继续保留原文件输入路径。原生系统分享面板、登录和支付未接入真实插件 / 渠道前不声明支持，不返回 mock 成功。

 ### Phase 4：宿主能力扩展

--- a/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md
+++ b/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md
@@ -56,7 +56,7 @@ AI H5 sandbox
 - `navigateHostNativePage()`：受控跳转宿主页，供订阅授权、支付、登录等 adapter 复用。Expo 移动壳首版只接受同源 H5 route 并切换 WebView URL；Tauri 桌面壳同样只接受 `https://app.genarrative.world` 同源 H5 route 并在主窗口内跳转。真正原生页面、登录和支付能力必须等对应 SDK / 页面接入后再声明支持。
 - `exportHostTextFile()`：原生 App 宿主的受控文本导出入口。Expo 移动壳通过 `file.exportText` 写入缓存文本文件并交给系统分享 / 保存面板；Tauri 桌面壳通过 `file.exportText` 打开系统保存对话框并写入用户选择的文件。文件名必须清洗，单次文本不超过 5 MiB，成功只返回文件名和字节数，不把本机绝对路径暴露给 H5；系统分享不可用或用户取消时返回明确错误，由 H5 fallback 承接。
 - `exportHostImageFile()`：原生 App 宿主的受控图片导出入口。H5 只传自己生成的图片 `base64Data`、清洗后的文件名和允许的 `image/png` / `image/jpeg` / `image/webp` MIME；Expo 移动壳写入缓存图片后交给系统分享 / 保存面板，Tauri 桌面壳打开系统保存对话框并写入图片字节。单次图片不超过 5 MiB，成功只返回文件名和字节数，不回传本机绝对路径。当前分享卡下载在 native app 中优先走 `file.exportImage`，宿主未声明时保留浏览器下载路径。
- `importHostImageFile()` / `subscribeHostImageDrop()`：原生 App 宿主的受控图片导入入口。Expo 移动壳通过 Expo ImagePicker 请求相册权限并打开系统相册选择器，Tauri 壳通过系统文件选择框或主窗口拖拽事件读取用户选择 / 拖入的图片；两端都只接受 `image/png`、`image/jpeg`、`image/webp`，单次不超过 10 MiB，成功只返回文件名、MIME、base64 内容、字节数和可选拖入坐标，不暴露设备本地 URI 或本机绝对路径，也不开放通用文件系统能力。H5 的通用图片输入面板 `CreativeImageInputPanel` 在 `native_app` 且声明 `file.importImage` 时优先调用宿主导入，并把结果转换成现有 `File` 回调；普通浏览器、小程序和未声明能力的裁剪壳继续使用浏览器文件输入。
+- `importHostImageFile()` / `subscribeHostImageDrop()`：原生 App 宿主的受控图片导入入口。Expo 移动壳通过 Expo ImagePicker 请求相册权限并打开系统相册选择器，Tauri 壳通过系统文件选择框或主窗口拖拽事件读取用户选择 / 拖入的图片；两端都只接受 `image/png`、`image/jpeg`、`image/webp`，单次不超过 10 MiB，成功只返回文件名、MIME、base64 内容、字节数和可选拖入坐标，不暴露设备本地 URI 或本机绝对路径，也不开放通用文件系统能力。H5 的通用图片输入面板 `CreativeImageInputPanel` 在 `native_app` 且声明 `file.importImage` 时优先调用宿主导入，并把结果转换成现有 `File` 回调；在桌面壳同时声明 `file.imageDropped` 时，只有拖入坐标命中当前主图卡片且未被上层元素遮挡的面板会消费该事件。普通浏览器、小程序和未声明能力的裁剪壳继续使用浏览器文件输入。

 ## 迁移顺序

--- a/src/components/common/CreativeImageInputPanel.test.tsx
+++ b/src/components/common/CreativeImageInputPanel.test.tsx
@@ -12,12 +12,14 @@ import { afterEach, expect, test, vi } from 'vitest';
 import {
  canUseNativeHostCapability,
  importHostImageFile,
+  subscribeHostImageDrop,
 } from '../../services/host-bridge/hostBridge';
 import { CreativeImageInputPanel } from './CreativeImageInputPanel';

 vi.mock('../../services/host-bridge/hostBridge', () => ({
  canUseNativeHostCapability: vi.fn(() => false),
  importHostImageFile: vi.fn(),
+  subscribeHostImageDrop: vi.fn(() => () => undefined),
 }));

 vi.mock('../ResolvedAssetImage', () => ({
@@ -34,12 +36,22 @@ vi.mock('../ResolvedAssetImage', () => ({

 const canUseNativeHostCapabilityMock = vi.mocked(canUseNativeHostCapability);
 const importHostImageFileMock = vi.mocked(importHostImageFile);
+const subscribeHostImageDropMock = vi.mocked(subscribeHostImageDrop);
+type HostImageDropListener = Parameters<typeof subscribeHostImageDrop>[0];

 afterEach(() => {
  vi.clearAllMocks();
  canUseNativeHostCapabilityMock.mockReturnValue(false);
+  subscribeHostImageDropMock.mockReturnValue(() => undefined);
 });

+function requireHostImageDropListener(
+  listener: HostImageDropListener | null,
+) {
+  expect(listener).not.toBeNull();
+  return listener as HostImageDropListener;
+}
+
 test('creative image input panel handles reference uploads and preview', () => {
  const onPromptReferenceFilesSelect = vi.fn();
  const onPromptReferenceRemove = vi.fn();
@@ -901,3 +913,183 @@ test('creative image input panel keeps callbacks quiet when native image import
  });
  expect(onMainImageFileSelect).not.toHaveBeenCalled();
 });
+
+test('creative image input panel accepts desktop host image drops inside the main image card', async () => {
+  const onMainImageFileSelect = vi.fn();
+  let dropListener: HostImageDropListener | null = null;
+  canUseNativeHostCapabilityMock.mockImplementation(
+    (capability) =>
+      capability === 'file.importImage' || capability === 'file.imageDropped',
+  );
+  subscribeHostImageDropMock.mockImplementation((listener) => {
+    dropListener = listener;
+    return () => undefined;
+  });
+
+  const { container } = render(
+    <CreativeImageInputPanel
+      uploadedImageSrc=""
+      uploadedImageAlt="拼图图片"
+      mainImageInputId="dropped-main-image-upload-input"
+      promptTextareaId="dropped-native-prompt-input"
+      prompt="旧街灯牌下的猫。"
+      promptLabel="画面描述"
+      aiRedraw
+      promptReferenceImages={[]}
+      imageModelPicker={null}
+      submitLabel="生成"
+      submitDisabled={false}
+      labels={{
+        imageField: '拼图画面',
+        uploadImage: '上传拼图图片',
+        replaceImage: '更换拼图图片',
+        emptyImageHint: '上传图片/填写画面描述',
+        removeImage: '移除拼图图片',
+        removeImageConfirmTitle: '移除拼图图片？',
+        removeImageConfirmBody: '移除后需要重新上传图片。',
+        promptReferenceUpload: '上传参考图',
+        promptReferencePreviewAlt: '参考图预览',
+        closePromptReferencePreview: '关闭参考图预览',
+      }}
+      onMainImageFileSelect={onMainImageFileSelect}
+      onMainImageRemove={() => {}}
+      onAiRedrawChange={() => {}}
+      onPromptChange={() => {}}
+      onSubmit={() => {}}
+    />,
+  );
+
+  const card = container.querySelector('.creative-image-input-panel__image-card');
+  expect(card).not.toBeNull();
+  vi.spyOn(card as Element, 'getBoundingClientRect').mockReturnValue({
+    left: 10,
+    top: 20,
+    right: 210,
+    bottom: 220,
+    width: 200,
+    height: 200,
+    x: 10,
+    y: 20,
+    toJSON: () => ({}),
+  });
+  const elementFromPointMock = vi.fn(() => card);
+  Object.defineProperty(document, 'elementFromPoint', {
+    configurable: true,
+    value: elementFromPointMock,
+  });
+
+  requireHostImageDropListener(dropListener)({
+    action: 'dropped',
+    fileName: '拖入图.webp',
+    mimeType: 'image/webp',
+    base64Data: 'ZHJvcA==',
+    bytes: 4,
+    position: {
+      x: 32,
+      y: 48,
+    },
+  });
+
+  await waitFor(() => {
+    expect(onMainImageFileSelect).toHaveBeenCalledWith(expect.any(File));
+  });
+  const selectedFile = onMainImageFileSelect.mock.calls[0]?.[0] as File;
+  expect(selectedFile.name).toBe('拖入图.webp');
+  expect(selectedFile.type).toBe('image/webp');
+  Reflect.deleteProperty(document, 'elementFromPoint');
+});
+
+test('creative image input panel ignores desktop host image drops outside or behind another element', () => {
+  const onMainImageFileSelect = vi.fn();
+  let dropListener: HostImageDropListener | null = null;
+  canUseNativeHostCapabilityMock.mockImplementation(
+    (capability) =>
+      capability === 'file.importImage' || capability === 'file.imageDropped',
+  );
+  subscribeHostImageDropMock.mockImplementation((listener) => {
+    dropListener = listener;
+    return () => undefined;
+  });
+
+  const { container } = render(
+    <CreativeImageInputPanel
+      uploadedImageSrc=""
+      uploadedImageAlt="拼图图片"
+      mainImageInputId="ignored-drop-main-image-upload-input"
+      promptTextareaId="ignored-drop-prompt-input"
+      prompt="旧街灯牌下的猫。"
+      promptLabel="画面描述"
+      aiRedraw
+      promptReferenceImages={[]}
+      imageModelPicker={null}
+      submitLabel="生成"
+      submitDisabled={false}
+      labels={{
+        imageField: '拼图画面',
+        uploadImage: '上传拼图图片',
+        replaceImage: '更换拼图图片',
+        emptyImageHint: '上传图片/填写画面描述',
+        removeImage: '移除拼图图片',
+        removeImageConfirmTitle: '移除拼图图片？',
+        removeImageConfirmBody: '移除后需要重新上传图片。',
+        promptReferenceUpload: '上传参考图',
+        promptReferencePreviewAlt: '参考图预览',
+        closePromptReferencePreview: '关闭参考图预览',
+      }}
+      onMainImageFileSelect={onMainImageFileSelect}
+      onMainImageRemove={() => {}}
+      onAiRedrawChange={() => {}}
+      onPromptChange={() => {}}
+      onSubmit={() => {}}
+    />,
+  );
+
+  const card = container.querySelector('.creative-image-input-panel__image-card');
+  expect(card).not.toBeNull();
+  vi.spyOn(card as Element, 'getBoundingClientRect').mockReturnValue({
+    left: 10,
+    top: 20,
+    right: 210,
+    bottom: 220,
+    width: 200,
+    height: 200,
+    x: 10,
+    y: 20,
+    toJSON: () => ({}),
+  });
+
+  const emitDrop = requireHostImageDropListener(dropListener);
+
+  emitDrop({
+    action: 'dropped',
+    fileName: '卡片外.png',
+    mimeType: 'image/png',
+    base64Data: 'b3V0',
+    bytes: 3,
+    position: {
+      x: 4,
+      y: 48,
+    },
+  });
+  expect(onMainImageFileSelect).not.toHaveBeenCalled();
+
+  const overlay = document.createElement('div');
+  const elementFromPointMock = vi.fn(() => overlay);
+  Object.defineProperty(document, 'elementFromPoint', {
+    configurable: true,
+    value: elementFromPointMock,
+  });
+  emitDrop({
+    action: 'dropped',
+    fileName: '遮挡图.png',
+    mimeType: 'image/png',
+    base64Data: 'b3Zlcg==',
+    bytes: 4,
+    position: {
+      x: 32,
+      y: 48,
+    },
+  });
+  expect(onMainImageFileSelect).not.toHaveBeenCalled();
+  Reflect.deleteProperty(document, 'elementFromPoint');
+});
--- a/src/components/common/CreativeImageInputPanel.tsx
+++ b/src/components/common/CreativeImageInputPanel.tsx
@@ -5,6 +5,7 @@ import {
  canUseNativeHostCapability,
  type HostFileImportImageResult,
  importHostImageFile,
+  subscribeHostImageDrop,
 } from '../../services/host-bridge/hostBridge';
 import { puzzleReferenceImageDataUrlToFile } from '../../services/puzzleReferenceImage';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
@@ -144,6 +145,7 @@ export function CreativeImageInputPanel({
  onHistoryClick,
  onSubmit,
 }: CreativeImageInputPanelProps) {
+  const mainImageCardRef = useRef<HTMLDivElement | null>(null);
  const mainImageInputRef = useRef<HTMLInputElement | null>(null);
  const promptReferenceInputRef = useRef<HTMLInputElement | null>(null);
  const [previewReferenceImage, setPreviewReferenceImage] =
@@ -166,6 +168,8 @@ export function CreativeImageInputPanel({
  const shouldShowMainImageUploadButton =
    isMainImageUploadEnabled && shouldPreviewMainImage;
  const canImportHostImage = canUseNativeHostCapability('file.importImage');
+  const canReceiveHostImageDrop =
+    canUseNativeHostCapability('file.imageDropped');
  const promptReferenceInputId = `${mainImageInputId}-prompt-reference`;

  useEffect(() => {
@@ -187,6 +191,50 @@ export function CreativeImageInputPanel({
    }
  }, [previewReferenceImage, promptReferenceImages]);

+  useEffect(() => {
+    if (!canReceiveHostImageDrop || disabled || !isMainImageUploadEnabled) {
+      return undefined;
+    }
+
+    return subscribeHostImageDrop((payload) => {
+      const card = mainImageCardRef.current;
+      const position = payload.position;
+      if (!card || !position) {
+        return;
+      }
+
+      const bounds = card.getBoundingClientRect();
+      const isInsideCard =
+        position.x >= bounds.left &&
+        position.x <= bounds.right &&
+        position.y >= bounds.top &&
+        position.y <= bounds.bottom;
+      if (!isInsideCard) {
+        return;
+      }
+
+      const topElement =
+        typeof document.elementFromPoint === 'function'
+          ? document.elementFromPoint(position.x, position.y)
+          : null;
+      // 中文注释：桌面拖入是窗口级事件；只让坐标命中的最上层主图槽位消费，避免多个创作面板同时接收同一张图。
+      if (topElement && !card.contains(topElement)) {
+        return;
+      }
+
+      try {
+        onMainImageFileSelect(hostImageImportResultToFile(payload));
+      } catch {
+        // 中文注释：宿主已校验图片类型和体积；这里仅兜住浏览器 File 构造异常，保持当前表单状态。
+      }
+    });
+  }, [
+    canReceiveHostImageDrop,
+    disabled,
+    isMainImageUploadEnabled,
+    onMainImageFileSelect,
+  ]);
+
  const bodyClassName = fillHeight
    ? 'creative-image-input-panel__body puzzle-creation-form-body flex min-h-0 flex-1 flex-col overflow-hidden pr-0 lg:overflow-y-auto lg:pr-1'
    : 'creative-image-input-panel__body puzzle-creation-form-body flex flex-none flex-col overflow-visible pr-0 lg:pr-1';
@@ -282,7 +330,7 @@ export function CreativeImageInputPanel({
                {labels.imageField}
              </PlatformFieldLabel>
              <div className={imageFrameClassName}>
-                <div className={imageCardClassName}>
+                <div ref={mainImageCardRef} className={imageCardClassName}>
                  {isMainImageUploadEnabled ? (
                    <input
                      ref={mainImageInputRef}