From d5cab219a133eda0a6d450c00469bc5875a9b7b2 Mon Sep 17 00:00:00 2001 From: kdletters Date: Thu, 18 Jun 2026 03:19:00 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=85=A5=E5=88=9B=E4=BD=9C=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0=E5=AE=BF=E4=B8=BB=E5=AF=BC=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CreativeImageInputPanel 在原生壳优先使用 file.importImage 宿主图片导入结果转换为现有 File 上传回调 浏览器和小程序继续保留原文件输入路径 更新测试和原生壳架构文档 --- .../shared-memory/decision-log.md | 1 + ...ExpoReactNative与Tauri宿主壳方案-2026-06-17.md | 6 +- ...前端架构】宿主壳能力统一协议-2026-06-17.md | 4 +- .../common/CreativeImageInputPanel.test.tsx | 194 +++++++++++++++++- .../common/CreativeImageInputPanel.tsx | 176 ++++++++++++---- 5 files changed, 332 insertions(+), 49 deletions(-) diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md index ff47bd94..d17fcf21 100644 --- a/docs/project-memory/shared-memory/decision-log.md +++ b/docs/project-memory/shared-memory/decision-log.md @@ -34,6 +34,7 @@ - 2026-06-18 原生壳网络状态：新增 `network.status` 与 `network.statusChanged` HostBridge capability，Expo 壳通过 `expo-network` 查询和订阅真实系统网络状态，Tauri 壳通过短超时连接 `app.genarrative.world:443` 查询主站可达性，并通过 WebView `online` / `offline` 注入变化事件；H5 统一使用 `getHostNetworkStatus()` / `subscribeHostNetworkStatusChange()`，不得直接读取 Expo / Tauri 私有网络 API。 - 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` 回调；浏览器、小程序和未声明能力的裁剪壳继续走原生 `` 路径，不新增玩法侧上传分叉。 - 影响范围：`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`。 diff --git a/docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md b/docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md index 629507af..6f5dbf58 100644 --- a/docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md +++ b/docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md @@ -1,6 +1,6 @@ # Expo React Native 与 Tauri 宿主壳方案 -更新时间：`2026-06-17` +更新时间：`2026-06-18` ## 结论 @@ -249,7 +249,7 @@ GameBridge 禁止： - iOS / Android 深链打开作品详情、创作页和邀请码。 - 登录和支付先 fallback 到 H5；只把能力边界跑通。 -当前状态：已新增 `apps/mobile-shell/`，通过 Expo development build 运行，`react-native-webview` 加载 H5 URL 并附加 `native_app` 宿主 query。移动壳使用真实品牌图标资产，已接入 `genarrative://` scheme、iOS associated domain 和 Android app link filter，启动和运行时 deep link 只会映射到同源 H5 路径并继续附加 HostBridge 上下文，外域和危险协议回退到默认主站入口。首轮真实能力包括 `host.getRuntime`、`appearance.getColorScheme`、`host.events`、`app.lifecycle`、`network.status`、`network.statusChanged`、`share.open`、`share.setTarget`、`navigation.openNativePage`、`navigation.canGoBack`、`app.openExternalUrl`、`clipboard.writeText`、`file.exportText`、`file.exportImage`、`file.importImage`、`haptics.impact` 和 Android 返回键回退；其中 `appearance.getColorScheme` 只读系统配色偏好，不强改 H5 或系统主题；`app.lifecycle` 通过 React Native `AppState` 注入 `active` / `inactive` / `background` 统一状态，供 H5 游戏循环、音频和轮询做真实暂停 / 恢复判断；`network.status` / `network.statusChanged` 通过 `expo-network` 查询并订阅真实系统网络状态，供 H5 游戏运行态和生成页识别离线 / 弱网回退；iOS 额外声明 `app.setBadgeCount`，通过 React Native `PushNotificationIOS` 设置应用图标角标，Android 不声明该能力。H5 会解析并过滤 `hostCapabilities`，也会在主 App 启动时通过真实 `host.getRuntime` 回读并缓存能力，只对声明或回读到的能力展示入口或调用宿主能力；其中 `share.setTarget` / `share.open` 会解析统一分享目标里的 `title`、`message`、`url`、`work`、`path` 或 `targetPath` 并调用 React Native 系统分享面板；发布分享弹窗只有在宿主声明 `share.open` 时才提供“系统分享”动作，失败时保留复制链接回退路径；`navigation.openNativePage` 在 Expo 壳内只接受同源 H5 route 并切换 WebView URL，不伪造尚未存在的登录、支付或其它原生页面，`navigation.canGoBack` 由 WebView 导航状态变化实时注入 H5，WebView 自身拦截到外域导航时只会把 `http:`、`https:`、`mailto:`、`tel:` 交给系统，危险协议直接阻断；`app.openExternalUrl` 也只允许同一协议白名单，ICP备案号和资产调试原图等 H5 外链入口在 `native_app` 中优先通过该能力离开 WebView 并交给系统浏览器；`clipboard.writeText` 由 H5 复制服务优先调用并写入系统剪贴板；`file.exportText` 通过 Expo 文件系统写入缓存文本文件，再交给系统分享 / 保存面板，文件名必须清洗，单次文本不超过 5 MiB，成功只返回文件名和字节数；`file.exportImage` 通过 Expo 文件系统写入缓存图片，再交给系统分享 / 保存面板，H5 只传允许 MIME 的 base64 图片数据，单次不超过 5 MiB，分享卡下载会优先走该能力；`file.importImage` 通过 Expo ImagePicker 请求相册权限并打开系统相册选择器，只接受 `image/png` / `image/jpeg` / `image/webp`、单次不超过 10 MiB，成功只返回清洗后的文件名、MIME、base64 内容和字节数，不把设备本地 URI 暴露给 H5，用户取消返回 `cancelled` 并由 H5 视作无选择；`haptics.impact` 通过 Expo Haptics 承接运行时轻触反馈，H5 在宿主不支持时回退到浏览器 vibration。登录和支付尚未接入渠道 SDK / 原生页面时明确返回 unsupported，让 H5 fallback 承接。 +当前状态：已新增 `apps/mobile-shell/`，通过 Expo development build 运行，`react-native-webview` 加载 H5 URL 并附加 `native_app` 宿主 query。移动壳使用真实品牌图标资产，已接入 `genarrative://` scheme、iOS associated domain 和 Android app link filter，启动和运行时 deep link 只会映射到同源 H5 路径并继续附加 HostBridge 上下文，外域和危险协议回退到默认主站入口。首轮真实能力包括 `host.getRuntime`、`appearance.getColorScheme`、`host.events`、`app.lifecycle`、`network.status`、`network.statusChanged`、`share.open`、`share.setTarget`、`navigation.openNativePage`、`navigation.canGoBack`、`app.openExternalUrl`、`clipboard.writeText`、`file.exportText`、`file.exportImage`、`file.importImage`、`haptics.impact` 和 Android 返回键回退；其中 `appearance.getColorScheme` 只读系统配色偏好，不强改 H5 或系统主题；`app.lifecycle` 通过 React Native `AppState` 注入 `active` / `inactive` / `background` 统一状态，供 H5 游戏循环、音频和轮询做真实暂停 / 恢复判断；`network.status` / `network.statusChanged` 通过 `expo-network` 查询并订阅真实系统网络状态，供 H5 游戏运行态和生成页识别离线 / 弱网回退；iOS 额外声明 `app.setBadgeCount`，通过 React Native `PushNotificationIOS` 设置应用图标角标，Android 不声明该能力。H5 会解析并过滤 `hostCapabilities`，也会在主 App 启动时通过真实 `host.getRuntime` 回读并缓存能力，只对声明或回读到的能力展示入口或调用宿主能力；其中 `share.setTarget` / `share.open` 会解析统一分享目标里的 `title`、`message`、`url`、`work`、`path` 或 `targetPath` 并调用 React Native 系统分享面板；发布分享弹窗只有在宿主声明 `share.open` 时才提供“系统分享”动作，失败时保留复制链接回退路径；`navigation.openNativePage` 在 Expo 壳内只接受同源 H5 route 并切换 WebView URL，不伪造尚未存在的登录、支付或其它原生页面，`navigation.canGoBack` 由 WebView 导航状态变化实时注入 H5，WebView 自身拦截到外域导航时只会把 `http:`、`https:`、`mailto:`、`tel:` 交给系统，危险协议直接阻断；`app.openExternalUrl` 也只允许同一协议白名单，ICP备案号和资产调试原图等 H5 外链入口在 `native_app` 中优先通过该能力离开 WebView 并交给系统浏览器；`clipboard.writeText` 由 H5 复制服务优先调用并写入系统剪贴板；`file.exportText` 通过 Expo 文件系统写入缓存文本文件，再交给系统分享 / 保存面板，文件名必须清洗，单次文本不超过 5 MiB，成功只返回文件名和字节数；`file.exportImage` 通过 Expo 文件系统写入缓存图片，再交给系统分享 / 保存面板，H5 只传允许 MIME 的 base64 图片数据，单次不超过 5 MiB，分享卡下载会优先走该能力；`file.importImage` 通过 Expo ImagePicker 请求相册权限并打开系统相册选择器，只接受 `image/png` / `image/jpeg` / `image/webp`、单次不超过 10 MiB，成功只返回清洗后的文件名、MIME、base64 内容和字节数，不把设备本地 URI 暴露给 H5，用户取消返回 `cancelled` 并由 H5 视作无选择；通用创作图片输入面板 `CreativeImageInputPanel` 在原生壳声明 `file.importImage` 时会优先调用该宿主能力，并把导入结果转换为现有 `File` 上传回调，拼图、拼消消、敲木鱼等复用该面板的主图和描述参考图选择无需新增玩法分叉；`haptics.impact` 通过 Expo Haptics 承接运行时轻触反馈，H5 在宿主不支持时回退到浏览器 vibration。登录和支付尚未接入渠道 SDK / 原生页面时明确返回 unsupported，让 H5 fallback 承接。 ### Phase 3：Tauri 桌面壳 MVP @@ -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，也不开放通用文件系统。原生系统分享面板、登录和支付未接入真实插件 / 渠道前不声明支持，不返回 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` 上传回调，普通浏览器、小程序和未声明能力的壳继续保留原文件输入路径。原生系统分享面板、登录和支付未接入真实插件 / 渠道前不声明支持，不返回 mock 成功。 ### Phase 4：宿主能力扩展 diff --git a/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md b/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md index 4c3f746b..2eae5694 100644 --- a/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md +++ b/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md @@ -1,6 +1,6 @@ # 宿主壳能力统一协议 -更新时间：`2026-06-17` +更新时间：`2026-06-18` ## 背景 @@ -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 或本机绝对路径，也不开放通用文件系统能力。 +- `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` 回调；普通浏览器、小程序和未声明能力的裁剪壳继续使用浏览器文件输入。 ## 迁移顺序 diff --git a/src/components/common/CreativeImageInputPanel.test.tsx b/src/components/common/CreativeImageInputPanel.test.tsx index e2efcd73..ff0be292 100644 --- a/src/components/common/CreativeImageInputPanel.test.tsx +++ b/src/components/common/CreativeImageInputPanel.test.tsx @@ -1,10 +1,25 @@ /* @vitest-environment jsdom */ -import { fireEvent, render, screen, within } from '@testing-library/react'; -import { expect, test, vi } from 'vitest'; +import { + fireEvent, + render, + screen, + waitFor, + within, +} from '@testing-library/react'; +import { afterEach, expect, test, vi } from 'vitest'; +import { + canUseNativeHostCapability, + importHostImageFile, +} from '../../services/host-bridge/hostBridge'; import { CreativeImageInputPanel } from './CreativeImageInputPanel'; +vi.mock('../../services/host-bridge/hostBridge', () => ({ + canUseNativeHostCapability: vi.fn(() => false), + importHostImageFile: vi.fn(), +})); + vi.mock('../ResolvedAssetImage', () => ({ ResolvedAssetImage: ({ src, @@ -17,6 +32,14 @@ vi.mock('../ResolvedAssetImage', () => ({ }) => (src ? {alt} : null), })); +const canUseNativeHostCapabilityMock = vi.mocked(canUseNativeHostCapability); +const importHostImageFileMock = vi.mocked(importHostImageFile); + +afterEach(() => { + vi.clearAllMocks(); + canUseNativeHostCapabilityMock.mockReturnValue(false); +}); + test('creative image input panel handles reference uploads and preview', () => { const onPromptReferenceFilesSelect = vi.fn(); const onPromptReferenceRemove = vi.fn(); @@ -711,3 +734,170 @@ test('creative image input panel can upload prompt references while showing a ma screen.getByRole('button', { name: '预览参考图 描述参考图 1' }), ).toBeTruthy(); }); + +test('creative image input panel imports the main image from native host capability', async () => { + const onMainImageFileSelect = vi.fn(); + const inputClickSpy = vi + .spyOn(HTMLInputElement.prototype, 'click') + .mockImplementation(() => undefined); + canUseNativeHostCapabilityMock.mockReturnValue(true); + importHostImageFileMock.mockResolvedValue({ + action: 'selected', + fileName: '参考图.png', + mimeType: 'image/png', + base64Data: 'aW1hZ2U=', + bytes: 5, + }); + + try { + render( + {}} + onAiRedrawChange={() => {}} + onPromptChange={() => {}} + onSubmit={() => {}} + />, + ); + + fireEvent.click(screen.getByRole('button', { name: '上传拼图图片' })); + + await waitFor(() => { + expect(onMainImageFileSelect).toHaveBeenCalledWith(expect.any(File)); + }); + const selectedFile = onMainImageFileSelect.mock.calls[0]?.[0] as File; + expect(selectedFile.name).toBe('参考图.png'); + expect(selectedFile.type).toBe('image/png'); + expect(inputClickSpy).not.toHaveBeenCalled(); + } finally { + inputClickSpy.mockRestore(); + } +}); + +test('creative image input panel imports prompt reference image from native host capability', async () => { + const onPromptReferenceFilesSelect = vi.fn(); + canUseNativeHostCapabilityMock.mockReturnValue(true); + importHostImageFileMock.mockResolvedValue({ + action: 'selected', + fileName: '描述参考.webp', + mimeType: 'image/webp', + base64Data: 'cmVm', + bytes: 3, + }); + + render( + {}} + onMainImageRemove={() => {}} + onAiRedrawChange={() => {}} + onPromptChange={() => {}} + onPromptReferenceFilesSelect={onPromptReferenceFilesSelect} + onSubmit={() => {}} + />, + ); + + fireEvent.click(screen.getByRole('button', { name: '上传参考图' })); + + await waitFor(() => { + expect(onPromptReferenceFilesSelect).toHaveBeenCalledWith([ + expect.any(File), + ]); + }); + const selectedFile = onPromptReferenceFilesSelect.mock.calls[0]?.[0]?.[0] as + | File + | undefined; + expect(selectedFile?.name).toBe('描述参考.webp'); + expect(selectedFile?.type).toBe('image/webp'); +}); + +test('creative image input panel keeps callbacks quiet when native image import is cancelled', async () => { + const onMainImageFileSelect = vi.fn(); + canUseNativeHostCapabilityMock.mockReturnValue(true); + importHostImageFileMock.mockResolvedValue(false); + + render( + {}} + onAiRedrawChange={() => {}} + onPromptChange={() => {}} + onSubmit={() => {}} + />, + ); + + fireEvent.click(screen.getByRole('button', { name: '上传拼图图片' })); + + await waitFor(() => { + expect(importHostImageFileMock).toHaveBeenCalledTimes(1); + }); + expect(onMainImageFileSelect).not.toHaveBeenCalled(); +}); diff --git a/src/components/common/CreativeImageInputPanel.tsx b/src/components/common/CreativeImageInputPanel.tsx index ea0b9b24..9687fd6c 100644 --- a/src/components/common/CreativeImageInputPanel.tsx +++ b/src/components/common/CreativeImageInputPanel.tsx @@ -1,6 +1,12 @@ import { History, ImagePlus, Loader2, Sparkles, Trash2 } from 'lucide-react'; import { type ReactNode, useEffect, useRef, useState } from 'react'; +import { + canUseNativeHostCapability, + type HostFileImportImageResult, + importHostImageFile, +} from '../../services/host-bridge/hostBridge'; +import { puzzleReferenceImageDataUrlToFile } from '../../services/puzzleReferenceImage'; import { ResolvedAssetImage } from '../ResolvedAssetImage'; import { PlatformActionButton } from './PlatformActionButton'; import { PlatformFieldLabel } from './PlatformFieldLabel'; @@ -86,6 +92,13 @@ export type CreativeImageInputPanelProps = { const DEFAULT_IMAGE_ACCEPT = 'image/png,image/jpeg,image/webp'; const DEFAULT_PROMPT_REFERENCE_LIMIT = 5; +function hostImageImportResultToFile(result: HostFileImportImageResult) { + return puzzleReferenceImageDataUrlToFile( + `data:${result.mimeType};base64,${result.base64Data}`, + result.fileName, + ); +} + export function CreativeImageInputPanel({ className = '', fillHeight = true, @@ -132,6 +145,7 @@ export function CreativeImageInputPanel({ onSubmit, }: CreativeImageInputPanelProps) { const mainImageInputRef = useRef(null); + const promptReferenceInputRef = useRef(null); const [previewReferenceImage, setPreviewReferenceImage] = useState(null); const [isMainImagePreviewOpen, setIsMainImagePreviewOpen] = useState(false); @@ -151,6 +165,8 @@ export function CreativeImageInputPanel({ mainImageClickMode === 'preview' && Boolean(uploadedImageSrc); const shouldShowMainImageUploadButton = isMainImageUploadEnabled && shouldPreviewMainImage; + const canImportHostImage = canUseNativeHostCapability('file.importImage'); + const promptReferenceInputId = `${mainImageInputId}-prompt-reference`; useEffect(() => { if (uploadedImageSrc) { @@ -188,6 +204,60 @@ export function CreativeImageInputPanel({ ? 'creative-image-input-panel__image-card puzzle-image-upload-card relative aspect-square h-full min-h-[14rem] max-h-full max-w-full overflow-hidden rounded-[1.25rem] border border-[var(--platform-subpanel-border)] bg-white/90 shadow-[0_12px_28px_rgba(15,23,42,0.08)] transition sm:min-h-[18rem] lg:h-auto lg:w-full' : 'creative-image-input-panel__image-card puzzle-image-upload-card relative aspect-square w-full min-h-[14rem] max-w-full overflow-hidden rounded-[1.25rem] border border-[var(--platform-subpanel-border)] bg-white/90 shadow-[0_12px_28px_rgba(15,23,42,0.08)] transition sm:min-h-[18rem]'; + const importHostImageAsFile = async () => { + const result = await importHostImageFile(); + if (!result) { + return null; + } + return hostImageImportResultToFile(result); + }; + + const handleMainImageUploadClick = () => { + if (disabled || !isMainImageUploadEnabled) { + return; + } + if (!canImportHostImage) { + mainImageInputRef.current?.click(); + return; + } + + void (async () => { + try { + const file = await importHostImageAsFile(); + if (file) { + onMainImageFileSelect(file); + } + } catch { + // 中文注释：宿主导入失败时不再弹浏览器文件框，避免权限失败后重复打扰用户。 + } + })(); + }; + + const handlePromptReferenceUploadClick = () => { + if ( + promptReferenceUploadDisabled || + !shouldShowPromptReferences || + !onPromptReferenceFilesSelect + ) { + return; + } + if (!canImportHostImage) { + promptReferenceInputRef.current?.click(); + return; + } + + void (async () => { + try { + const file = await importHostImageAsFile(); + if (file) { + onPromptReferenceFilesSelect([file]); + } + } catch { + // 中文注释：宿主导入失败时保持当前表单状态，由外层错误通道继续承接后续重试。 + } + })(); + }; + return (
setIsMainImagePreviewOpen(true)} /> ) : isMainImageUploadEnabled ? ( - + ) : null} {uploadedImageSrc ? ( mainImageInputRef.current?.click()} + onClick={handleMainImageUploadClick} icon={} className="absolute bottom-3 right-3 z-10 h-10 w-10" /> @@ -323,16 +400,18 @@ export function CreativeImageInputPanel({ className="absolute left-3 top-3 z-10 h-10 w-10" /> ) : isMainImageUploadEnabled && !uploadedImageSrc ? ( - + ) : null}
@@ -370,39 +449,52 @@ export function CreativeImageInputPanel({ {imageModelPicker} {shouldShowPromptReferences && onPromptReferenceFilesSelect ? ( - - - { - const files = Array.from( - event.currentTarget.files ?? [], - ); - event.currentTarget.value = ''; - if (files.length > 0) { - onPromptReferenceFilesSelect(files); - } - }} - className="sr-only" - /> - - } - className={`absolute bottom-3 right-3 z-10 h-8 w-8 border-[var(--platform-subpanel-border)] bg-white/96 hover:bg-[var(--platform-subpanel-fill)] ${ - promptReferenceUploadDisabled - ? 'cursor-not-allowed opacity-55' - : 'cursor-pointer' - }`} - /> + <> + { + const files = Array.from( + event.currentTarget.files ?? [], + ); + event.currentTarget.value = ''; + if (files.length > 0) { + onPromptReferenceFilesSelect(files); + } + }} + className="sr-only" + /> + {canImportHostImage ? ( + } + className="absolute bottom-3 right-3 z-10 h-8 w-8 border-[var(--platform-subpanel-border)] bg-white/96 hover:bg-[var(--platform-subpanel-fill)]" + /> + ) : ( + } + className={`absolute bottom-3 right-3 z-10 h-8 w-8 border-[var(--platform-subpanel-border)] bg-white/96 hover:bg-[var(--platform-subpanel-fill)] ${ + promptReferenceUploadDisabled + ? 'cursor-not-allowed opacity-55' + : 'cursor-pointer' + }`} + /> + )} + ) : null} {shouldShowPromptReferences &&