From ab278158100d008ba4cf3576a1bb61e8fa535b3c Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Thu, 18 Jun 2026 19:02:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B9=E6=B4=9E=E7=BB=93=E6=9E=9C=E9=A1=B5?=
 =?UTF-8?q?=E6=8E=A5=E5=85=A5=E5=AE=BF=E4=B8=BB=E5=9B=BE=E7=89=87=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

方洞结果页图片槽位在原生壳内优先调用 file.importImage

保留浏览器文件输入回退并覆盖原生导入、回退和取消选择测试

同步方洞玩法链路、HostBridge 方案和团队决策记录
---
 .../shared-memory/decision-log.md             |   7 +
 ...��ExpoReactNative与Tauri宿主壳方案-2026-06-17.md |   4 +-
 ...�前端架构】宿主壳能力统一协议-2026-06-17.md |   2 +-
 ...�玩法创作】平台入口与玩法链路-2026-05-15.md |   2 +
 .../SquareHoleResultView.test.tsx             | 134 +++++++++++++++++-
 .../SquareHoleResultView.tsx                  |  87 ++++++++++--
 6 files changed, 221 insertions(+), 15 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index f1fdec6cd..6928e266f 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -2478,3 +2478,10 @@
 - 决策：三端桥接层按职责对齐，但保留各宿主真实边界。微信小程序页面路由不改，`miniprogram/host-bridge/protocol.js` 只沉淀微信壳能力、页面 URL、结果 hash / storage key 和分享消息类型等常量，`dispatch.js` 只作为 `protocol`、`webView`、`payment`、`shareGrid`、`subscribeMessage` 的薄索引，真实协议归一、支付 / 订阅 / 分享结果编解码仍分别放在 `webView.js`、`payment.js`、`shareGrid.js`、`subscribeMessage.js`，页面目录只保留生命周期和装配，不把微信小程序硬改成 Expo / Tauri 的 request 总线；Expo 移动壳拆成 `apps/mobile-shell/src/host-bridge/protocol.ts`、`capabilities.ts`、`dispatch.ts`、`files.ts`、`share.ts` 和 facade `bridge.ts`，分别负责 envelope / request 校验 / ok-failure 响应 / replay 基础类型、能力清单与 iOS 差异、method 分发、文件能力、分享能力和 WebView message 入口 / request id replay 编排；根 `App.tsx` 只装配 `apps/mobile-shell/src/shell/ShellApp.tsx`，`apps/mobile-shell/src/shell/*.ts(x)` 负责 WebView 容器、URL、导航、网络、生命周期、安全区和 WebView policy；Tauri 桌面壳拆成 `apps/desktop-shell/src-tauri/src/host_bridge/protocol.rs`、`capabilities.rs`、`dispatch.rs`、`files.rs`、`share.rs` 和 command facade `mod.rs`，分别负责 envelope / method 白名单 / request 校验 / replay 状态、能力清单、method 分发、文件能力、分享能力和 `host_bridge_request` command / replay 编排；`apps/desktop-shell/src-tauri/src/shell/*.rs` 承接运行态、入口 URL、导航 / 下载、网络、生命周期、拖拽图片、HostBridge 事件注入、深链、托盘和 WebView 门面，`main.rs` 只做 builder、plugin、窗口和状态装配。`scripts/check-native-shells.mjs` 锁定三端桥接层目录清单，并拒绝移动根入口直接引用 HostBridge。
 - 影响范围：`miniprogram/host-bridge/`、`miniprogram/pages/*/index.js`、`apps/mobile-shell/src/`、`apps/desktop-shell/src-tauri/src/`、`scripts/check-native-shells.mjs`、宿主壳方案文档。
 - 验证方式：`npm run test -- miniprogram/host-bridge/webView.test.js miniprogram/host-bridge/payment.test.js miniprogram/host-bridge/shareGrid.test.js miniprogram/host-bridge/subscribeMessage.test.js miniprogram/pages/web-view/index.style.test.js`、`npm run check:native-shells`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
+
+## 2026-06-18 方洞结果页图片槽位接入原生壳图片导入
+
+- 背景：方洞结果页的封面、背景、形状和洞口图片槽位已经支持浏览器文件输入、历史图选择、AI 生成和自动保存，但 Expo / Tauri 壳内点击上传仍只能触发 WebView 的浏览器文件输入，没有复用已落地的受控 `file.importImage` 能力。
+- 决策：`SquareHoleResultView` 图片槽位弹窗在 `native_app` 且宿主声明 `file.importImage` 时优先调用 `importHostImageFile()`，把宿主返回的图片内容副本转换为 `data:<mime>;base64,<data>` 并写回当前槽位 `imageSrc`。该动作继续走现有 result edit state、自动保存、试玩和发布链路，不新增后端上传路径，不暴露设备 URI、本机绝对路径或通用文件系统；普通浏览器、小程序和未声明能力的裁剪壳继续使用原浏览器文件输入。
+- 影响范围：`src/components/square-hole-result/SquareHoleResultView.tsx`、`src/services/host-bridge/hostBridge.ts`、方洞玩法链路文档与 Expo / Tauri HostBridge 方案文档。
+- 验证方式：`npm run test -- src/components/square-hole-result/SquareHoleResultView.test.tsx`、`npm run typecheck -- --pretty false`、`npm run check:encoding`、`npm run check:native-shells`、`git diff --check`。
diff --git a/docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md b/docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md
index 97ab475d7..58232f0b7 100644
--- a/docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md
+++ b/docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md
@@ -274,7 +274,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.reloadWebView`、`app.openExternalUrl`、`clipboard.writeText`、`clipboard.readText`、`file.exportText`、`file.exportImage`、`file.importImage`、`file.captureImage`、`file.importAudio`、`file.exportAudio`、`haptics.impact`、`notification.showLocal` 和 Android 返回键回退；其中 `appearance.getColorScheme` 只读系统配色偏好，不强改 H5 或系统主题；`app.lifecycle` 通过 React Native `AppState` 注入 `active` / `inactive` / `background` 统一状态，供 H5 游戏循环、音频和轮询做真实暂停 / 恢复判断，H5 的 `useHostLifecycleActive()` 会把该事件归一成运行态可播放状态，WebAudio 背景音乐和拼图、抓大鹅等固定玩法 `<audio>` 背景音乐都按该状态在宿主进后台时暂停、回到前台且原播放条件仍满足时恢复；`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，`app.reloadWebView` 只调用当前 `react-native-webview` 的 `reload()` 刷新内嵌 H5，不开放任意脚本执行或 URL 重写；WebView 自身拦截到外域导航时只会把 `http:`、`https:`、`mailto:`、`tel:` 交给系统，危险协议直接阻断；`app.openExternalUrl` 也只允许同一协议白名单，ICP备案号和资产调试原图等 H5 外链入口在 `native_app` 中优先通过该能力离开 WebView 并交给系统浏览器；`clipboard.writeText` 由 H5 复制服务优先调用并写入系统剪贴板；`clipboard.readText` 通过 Expo Clipboard 读取纯文本剪贴板并按 100000 字符上限返回，不读取图片、HTML 或监听剪贴板变化；`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 视作无选择；`file.captureImage` 通过 Expo ImagePicker 请求相机权限并打开系统相机拍摄图片，沿用同一 MIME、体积、base64 和文件名清洗规则，成功返回 `captured` 图片结果，不请求麦克风权限，也不把设备本地 URI 暴露给 H5；通用创作图片输入面板 `CreativeImageInputPanel` 在原生壳声明 `file.importImage` / `file.captureImage` 时分别展示受控上传 / 拍摄图标动作，并把宿主返回结果转换为现有 `File` 上传回调，拼图、拼消消、敲木鱼等复用该面板的主图和描述参考图选择无需新增玩法分叉；反馈页上传凭证和个人资料头像上传在原生壳声明 `file.importImage` 时优先打开宿主系统图片选择器，并把宿主返回结果转回现有 `File`，其中反馈页继续复用原本的 4 张数量限制、单张 1 MiB、总 4 MiB 和 data URL 提交流程，头像继续复用现有图片类型、5 MiB 大小限制、方形裁剪和资料更新链路；`file.importAudio` 通过 Expo DocumentPicker 打开系统音频选择器，只接受 `audio/mpeg`、`audio/mp4`、`audio/wav`、`audio/ogg`、`audio/webm` 或对应扩展名，单次不超过 20 MiB，成功只返回清洗后的文件名、MIME、base64 内容和字节数，不暴露设备本地 URI；`file.exportAudio` 通过 Expo 文件系统写入缓存音频，再交给系统分享 / 保存面板，H5 只传当前页面已持有的允许 MIME 音频 base64 数据，单次不超过 20 MiB，成功只返回文件名和字节数；通用音频输入面板 `CreativeAudioInputPanel` 在原生壳声明导入能力时优先调用宿主导入，在声明导出能力且当前资产为本地 `Blob` 时展示导出入口，并继续复用现有 `readFileAsAsset(file, 'uploaded')` 处理链路；`haptics.impact` 通过 Expo Haptics 承接运行时轻触反馈，H5 在宿主不支持时回退到浏览器 vibration；`notification.showLocal` 通过 `expo-notifications` 请求系统通知权限并调度即时本地通知，Android 只使用固定本地 channel，不启用后台远程通知、远程推送 token 或定时提醒。登录和支付尚未接入渠道 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.reloadWebView`、`app.openExternalUrl`、`clipboard.writeText`、`clipboard.readText`、`file.exportText`、`file.exportImage`、`file.importImage`、`file.captureImage`、`file.importAudio`、`file.exportAudio`、`haptics.impact`、`notification.showLocal` 和 Android 返回键回退；其中 `appearance.getColorScheme` 只读系统配色偏好，不强改 H5 或系统主题；`app.lifecycle` 通过 React Native `AppState` 注入 `active` / `inactive` / `background` 统一状态，供 H5 游戏循环、音频和轮询做真实暂停 / 恢复判断，H5 的 `useHostLifecycleActive()` 会把该事件归一成运行态可播放状态，WebAudio 背景音乐和拼图、抓大鹅等固定玩法 `<audio>` 背景音乐都按该状态在宿主进后台时暂停、回到前台且原播放条件仍满足时恢复；`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，`app.reloadWebView` 只调用当前 `react-native-webview` 的 `reload()` 刷新内嵌 H5，不开放任意脚本执行或 URL 重写；WebView 自身拦截到外域导航时只会把 `http:`、`https:`、`mailto:`、`tel:` 交给系统，危险协议直接阻断；`app.openExternalUrl` 也只允许同一协议白名单，ICP备案号和资产调试原图等 H5 外链入口在 `native_app` 中优先通过该能力离开 WebView 并交给系统浏览器；`clipboard.writeText` 由 H5 复制服务优先调用并写入系统剪贴板；`clipboard.readText` 通过 Expo Clipboard 读取纯文本剪贴板并按 100000 字符上限返回，不读取图片、HTML 或监听剪贴板变化；`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 视作无选择；`file.captureImage` 通过 Expo ImagePicker 请求相机权限并打开系统相机拍摄图片，沿用同一 MIME、体积、base64 和文件名清洗规则，成功返回 `captured` 图片结果，不请求麦克风权限，也不把设备本地 URI 暴露给 H5；通用创作图片输入面板 `CreativeImageInputPanel` 在原生壳声明 `file.importImage` / `file.captureImage` 时分别展示受控上传 / 拍摄图标动作，并把宿主返回结果转换为现有 `File` 上传回调，拼图、拼消消、敲木鱼等复用该面板的主图和描述参考图选择无需新增玩法分叉；反馈页上传凭证、个人资料头像上传和方洞结果页图片槽位上传在原生壳声明 `file.importImage` 时优先打开宿主系统图片选择器，并把宿主返回结果转回现有 H5 数据结构，其中反馈页继续复用原本的 4 张数量限制、单张 1 MiB、总 4 MiB 和 data URL 提交流程，头像继续复用现有图片类型、5 MiB 大小限制、方形裁剪和资料更新链路，方洞结果页继续写回现有封面 / 背景 / 形状 / 洞口槽位与自动保存链路；`file.importAudio` 通过 Expo DocumentPicker 打开系统音频选择器，只接受 `audio/mpeg`、`audio/mp4`、`audio/wav`、`audio/ogg`、`audio/webm` 或对应扩展名，单次不超过 20 MiB，成功只返回清洗后的文件名、MIME、base64 内容和字节数，不暴露设备本地 URI；`file.exportAudio` 通过 Expo 文件系统写入缓存音频，再交给系统分享 / 保存面板，H5 只传当前页面已持有的允许 MIME 音频 base64 数据，单次不超过 20 MiB，成功只返回文件名和字节数；通用音频输入面板 `CreativeAudioInputPanel` 在原生壳声明导入能力时优先调用宿主导入，在声明导出能力且当前资产为本地 `Blob` 时展示导出入口，并继续复用现有 `readFileAsAsset(file, 'uploaded')` 处理链路；`haptics.impact` 通过 Expo Haptics 承接运行时轻触反馈，H5 在宿主不支持时回退到浏览器 vibration；`notification.showLocal` 通过 `expo-notifications` 请求系统通知权限并调度即时本地通知，Android 只使用固定本地 channel，不启用后台远程通知、远程推送 token 或定时提醒。登录和支付尚未接入渠道 SDK / 原生页面时明确返回 unsupported，让 H5 fallback 承接。
 
 2026-06-18 追加：移动壳声明并实现 `file.importText`，通过 Expo DocumentPicker 打开系统文档选择器，只接受 `text/plain`、`text/markdown`、`text/csv`、`application/json` 或对应扩展名，单次不超过 5 MiB；成功只返回清洗后的文件名、MIME、UTF-8 文本内容和字节数，不暴露设备本地 URI，也不开放通用文件系统。H5 创作 Agent 工作台在原生壳声明该能力时优先打开宿主系统选择器，再把返回文本转换成现有浏览器 `File` 并继续调用 `/api/runtime/creation-agent/document-inputs/parse`，不在前端绕过后端文档解析、大小校验或 docx 处理。
 
@@ -331,7 +331,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 插件给前端，H5 通过 `useHostLifecycleActive()` 统一归一窗口焦点状态，WebAudio 背景音乐和拼图、抓大鹅等固定玩法 `<audio>` 背景音乐都会在窗口失焦时暂停、恢复焦点且原播放条件仍满足时恢复；`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 并在主窗口内受控跳转，`app.reloadWebView` 只调用 Tauri 主 WebViewWindow 的 `reload()` 刷新当前 H5，不开放 JS guest API、任意命令或任意 URL 导航，`clipboard.writeText` 由 Rust 内部通过 clipboard-manager 插件写入系统剪贴板并由 H5 复制服务优先调用，`clipboard.readText` 由 Rust 内部通过同一插件读取纯文本剪贴板并按 100000 字符上限返回，不开放剪贴板插件 JS guest API、图片读取、HTML 读取或监听事件，`app.setTitle` 通过 Tauri 主窗口 API 同步窗口标题并拒绝空标题 / 控制字符，`app.setBadgeCount` 通过主窗口 `set_badge_count` 设置任务栏角标，数量只接受 `0-99999` 整数且 `0` 表示清除；H5 主站会按当前平台阶段先更新 `document.title`，再通过 `app.setTitle` 把同一标题同步给 Tauri 窗口，Expo 移动壳不声明该能力时静默忽略；不把 opener、clipboard、dialog 或 notification 插件命令直接暴露给前端。当前真实能力为 `host.getRuntime`、`appearance.getColorScheme`、`host.events`、`app.lifecycle`、`network.status`、`network.statusChanged`、`share.setTarget`、`share.open`、`navigation.openNativePage`、`app.reloadWebView`、`app.openExternalUrl`、`app.setTitle`、`app.setBadgeCount`、`clipboard.writeText`、`clipboard.readText`、`file.exportText`、`file.exportImage`、`file.importImage`、`file.importAudio`、`file.exportAudio`、`file.imageDropped` 和 `notification.showLocal`；H5 会在主 App 启动时通过真实 `host.getRuntime` 回读并缓存这些能力，即使入口 URL 缺少 `hostCapabilities`，也只按宿主真实回包开启能力入口；其中 `host.events` 只表示桌面壳会通过 HostBridge message 派发生命周期、网络和拖拽图片等事件，不新增 request method，也不开放 Tauri event 插件；`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，也不开放通用文件系统；`file.importAudio` 通过系统选择框读取用户选择的音频，只接受 `audio/mpeg`、`audio/mp4`、`audio/wav`、`audio/ogg`、`audio/webm` 或对应扩展名，单次不超过 20 MiB，成功只返回清洗后的文件名、MIME、base64 内容和字节数，不把本机绝对路径暴露给 H5，也不开放通用文件系统；`file.exportAudio` 通过系统保存对话框写入 H5 当前已持有的音频字节，只接受允许 MIME 的 base64 数据，单次不超过 20 MiB，成功只返回文件名和字节数，不让宿主代读任意本地文件；通用音频输入面板 `CreativeAudioInputPanel` 在桌面壳声明导入能力时优先打开系统音频选择框，在声明导出能力且当前资产为本地 `Blob` 时展示导出入口，并继续复用 `readFileAsAsset(file, 'uploaded')` 处理链路；`notification.showLocal` 由 Rust 内部通过 `tauri-plugin-notification` 发送即时系统通知，只接受清洗后的标题和正文，不开放插件 JS guest API、远程推送、定时提醒或通知 token；通用创作图片输入面板 `CreativeImageInputPanel` 在桌面壳声明 `file.importImage` 时会优先打开系统图片选择框，在同时声明 `file.imageDropped` 时会按宿主拖入坐标把图片交给命中的主图槽位，并把结果转换为现有 `File` 上传回调；反馈页上传凭证和个人资料头像上传同样优先消费 `file.importImage`，但继续交给 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 插件给前端，H5 通过 `useHostLifecycleActive()` 统一归一窗口焦点状态，WebAudio 背景音乐和拼图、抓大鹅等固定玩法 `<audio>` 背景音乐都会在窗口失焦时暂停、恢复焦点且原播放条件仍满足时恢复；`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 并在主窗口内受控跳转，`app.reloadWebView` 只调用 Tauri 主 WebViewWindow 的 `reload()` 刷新当前 H5，不开放 JS guest API、任意命令或任意 URL 导航，`clipboard.writeText` 由 Rust 内部通过 clipboard-manager 插件写入系统剪贴板并由 H5 复制服务优先调用，`clipboard.readText` 由 Rust 内部通过同一插件读取纯文本剪贴板并按 100000 字符上限返回，不开放剪贴板插件 JS guest API、图片读取、HTML 读取或监听事件，`app.setTitle` 通过 Tauri 主窗口 API 同步窗口标题并拒绝空标题 / 控制字符，`app.setBadgeCount` 通过主窗口 `set_badge_count` 设置任务栏角标，数量只接受 `0-99999` 整数且 `0` 表示清除；H5 主站会按当前平台阶段先更新 `document.title`，再通过 `app.setTitle` 把同一标题同步给 Tauri 窗口，Expo 移动壳不声明该能力时静默忽略；不把 opener、clipboard、dialog 或 notification 插件命令直接暴露给前端。当前真实能力为 `host.getRuntime`、`appearance.getColorScheme`、`host.events`、`app.lifecycle`、`network.status`、`network.statusChanged`、`share.setTarget`、`share.open`、`navigation.openNativePage`、`app.reloadWebView`、`app.openExternalUrl`、`app.setTitle`、`app.setBadgeCount`、`clipboard.writeText`、`clipboard.readText`、`file.exportText`、`file.exportImage`、`file.importImage`、`file.importAudio`、`file.exportAudio`、`file.imageDropped` 和 `notification.showLocal`；H5 会在主 App 启动时通过真实 `host.getRuntime` 回读并缓存这些能力，即使入口 URL 缺少 `hostCapabilities`，也只按宿主真实回包开启能力入口；其中 `host.events` 只表示桌面壳会通过 HostBridge message 派发生命周期、网络和拖拽图片等事件，不新增 request method，也不开放 Tauri event 插件；`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，也不开放通用文件系统；`file.importAudio` 通过系统选择框读取用户选择的音频，只接受 `audio/mpeg`、`audio/mp4`、`audio/wav`、`audio/ogg`、`audio/webm` 或对应扩展名，单次不超过 20 MiB，成功只返回清洗后的文件名、MIME、base64 内容和字节数，不把本机绝对路径暴露给 H5，也不开放通用文件系统；`file.exportAudio` 通过系统保存对话框写入 H5 当前已持有的音频字节，只接受允许 MIME 的 base64 数据，单次不超过 20 MiB，成功只返回文件名和字节数，不让宿主代读任意本地文件；通用音频输入面板 `CreativeAudioInputPanel` 在桌面壳声明导入能力时优先打开系统音频选择框，在声明导出能力且当前资产为本地 `Blob` 时展示导出入口，并继续复用 `readFileAsAsset(file, 'uploaded')` 处理链路；`notification.showLocal` 由 Rust 内部通过 `tauri-plugin-notification` 发送即时系统通知，只接受清洗后的标题和正文，不开放插件 JS guest API、远程推送、定时提醒或通知 token；通用创作图片输入面板 `CreativeImageInputPanel` 在桌面壳声明 `file.importImage` 时会优先打开系统图片选择框，在同时声明 `file.imageDropped` 时会按宿主拖入坐标把图片交给命中的主图槽位，并把结果转换为现有 `File` 上传回调；反馈页上传凭证、个人资料头像上传和方洞结果页图片槽位上传同样优先消费 `file.importImage`，但继续交给 H5 原有预览、裁剪、槽位编辑、大小限制和提交 / 保存链路。普通浏览器、小程序和未声明能力的壳继续保留原文件输入路径。原生系统分享面板、登录和支付未接入真实插件 / 渠道前不声明支持，不返回 mock 成功。
 
 2026-06-18 追加：桌面壳的网络状态同样只通过 HostBridge 暴露给 H5。H5 外部生成队列概览在桌面壳明确离线或不可达时暂停轮询，窗口恢复在线后重新刷新；Tauri 仍不开放任意网络探测、shell 或文件系统能力给主站。
 
diff --git a/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md b/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md
index 48a5c43ea..415e6a7cc 100644
--- a/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md
+++ b/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md
@@ -62,7 +62,7 @@ AI H5 sandbox
 - `exportHostTextFile()`：原生 App 宿主的受控文本导出入口。Expo 移动壳通过 `file.exportText` 写入缓存文本文件并交给系统分享 / 保存面板；Tauri 桌面壳通过 `file.exportText` 打开系统保存对话框并写入用户选择的文件。文件名必须清洗，单次文本不超过 5 MiB，成功只返回文件名和字节数，不把本机绝对路径暴露给 H5；系统分享不可用或用户取消时返回明确错误，由 H5 fallback 承接。
 - `importHostTextFile()`：原生 App 宿主的受控文本导入入口。Expo 移动壳通过 Expo DocumentPicker 打开系统文档选择器，Tauri 桌面壳通过系统文件选择框读取用户选择的文本文件；两端都只接受 `text/plain`、`text/markdown`、`text/csv`、`application/json` 或对应扩展名，单次不超过 5 MiB，成功只返回清洗后的文件名、MIME、UTF-8 文本内容和字节数，不暴露设备本地 URI 或本机绝对路径，也不开放通用文件系统能力；用户取消时由 H5 facade 归为 `false`。创作 Agent 工作台在 `native_app` 且声明该能力时优先调用宿主文本导入，并把结果转换成现有浏览器 `File` 后继续复用后端 `/api/runtime/creation-agent/document-inputs/parse` 解析链路；普通浏览器、小程序和未声明能力的裁剪壳继续使用原文件输入。
 - `exportHostImageFile()`：原生 App 宿主的受控图片导出入口。H5 只传自己生成的图片 `base64Data`、清洗后的文件名和允许的 `image/png` / `image/jpeg` / `image/webp` MIME；Expo 移动壳写入缓存图片后交给系统分享 / 保存面板，Tauri 桌面壳打开系统保存对话框并写入图片字节。单次图片不超过 5 MiB，成功只返回文件名和字节数，不回传本机绝对路径。当前分享卡下载在 native app 中优先走 `file.exportImage`，宿主未声明时保留浏览器下载路径。
-- `importHostImageFile()` / `captureHostImageFile()` / `subscribeHostImageDrop()`：原生 App 宿主的受控图片导入入口。Expo 移动壳通过 Expo ImagePicker 请求相册权限并打开系统相册选择器，也可在声明 `file.captureImage` 时请求相机权限并打开系统相机拍摄图片；Tauri 壳通过系统文件选择框或主窗口拖拽事件读取用户选择 / 拖入的图片，不声明拍摄能力。图片能力都只接受 `image/png`、`image/jpeg`、`image/webp`，单次不超过 10 MiB，成功只返回文件名、MIME、base64 内容、字节数和可选拖入坐标，不暴露设备本地 URI 或本机绝对路径，也不开放通用文件系统能力；移动拍摄不请求麦克风权限。H5 的通用图片输入面板 `CreativeImageInputPanel` 在 `native_app` 且声明 `file.importImage` / `file.captureImage` 时分别调用宿主导入 / 拍摄，并把结果转换成现有 `File` 回调；反馈页上传凭证和个人资料头像上传在 `native_app` 且声明 `file.importImage` 时同样优先调用宿主图片导入，其中反馈页继续复用原有数量、大小、data URL 和提交 payload 校验，头像继续复用 H5 侧图片类型、5 MiB 大小限制、方形裁剪与 `updateAuthProfile` 上传链路；在桌面壳同时声明 `file.imageDropped` 时，只有拖入坐标命中当前主图卡片且未被上层元素遮挡的面板会消费该事件。普通浏览器、小程序和未声明能力的裁剪壳继续使用浏览器文件输入。
+- `importHostImageFile()` / `captureHostImageFile()` / `subscribeHostImageDrop()`：原生 App 宿主的受控图片导入入口。Expo 移动壳通过 Expo ImagePicker 请求相册权限并打开系统相册选择器，也可在声明 `file.captureImage` 时请求相机权限并打开系统相机拍摄图片；Tauri 壳通过系统文件选择框或主窗口拖拽事件读取用户选择 / 拖入的图片，不声明拍摄能力。图片能力都只接受 `image/png`、`image/jpeg`、`image/webp`，单次不超过 10 MiB，成功只返回文件名、MIME、base64 内容、字节数和可选拖入坐标，不暴露设备本地 URI 或本机绝对路径，也不开放通用文件系统能力；移动拍摄不请求麦克风权限。H5 的通用图片输入面板 `CreativeImageInputPanel` 在 `native_app` 且声明 `file.importImage` / `file.captureImage` 时分别调用宿主导入 / 拍摄，并把结果转换成现有 `File` 回调；反馈页上传凭证、个人资料头像上传和方洞结果页图片槽位上传在 `native_app` 且声明 `file.importImage` 时同样优先调用宿主图片导入，其中反馈页继续复用原有数量、大小、data URL 和提交 payload 校验，头像继续复用 H5 侧图片类型、5 MiB 大小限制、方形裁剪与 `updateAuthProfile` 上传链路，方洞结果页继续把图片内容写回当前封面 / 背景 / 形状 / 洞口槽位并走现有自动保存和发布链路；在桌面壳同时声明 `file.imageDropped` 时，只有拖入坐标命中当前主图卡片且未被上层元素遮挡的面板会消费该事件。普通浏览器、小程序和未声明能力的裁剪壳继续使用浏览器文件输入。
 - `importHostAudioFile()`：原生 App 宿主的受控音频导入入口。Expo 移动壳通过 Expo DocumentPicker 打开系统音频选择器，Tauri 壳通过系统文件选择框读取用户选择的音频；两端都只接受 `audio/mpeg`、`audio/mp4`、`audio/wav`、`audio/ogg`、`audio/webm` 或对应扩展名，单次不超过 20 MiB，成功只返回清洗后的文件名、MIME、base64 内容和字节数，不暴露设备本地 URI 或本机绝对路径，也不开放通用文件系统能力。H5 的通用音频输入面板 `CreativeAudioInputPanel` 在 `native_app` 且声明 `file.importAudio` 时优先调用宿主导入，并把结果转换成现有 `File` 后继续复用 `readFileAsAsset(file, 'uploaded')` 音频处理链路；普通浏览器、小程序和未声明能力的裁剪壳继续使用浏览器文件输入。
 - `exportHostAudioFile()`：原生 App 宿主的受控音频导出入口。H5 只传当前页面已持有的音频 `base64Data`、清洗后的文件名和允许的 `audio/mpeg` / `audio/mp4` / `audio/wav` / `audio/ogg` / `audio/webm` MIME；Expo 移动壳写入缓存音频后交给系统分享 / 保存面板，Tauri 壳打开系统保存对话框并写入音频字节。单次音频不超过 20 MiB，成功只返回文件名和字节数，不回传本机绝对路径，也不让宿主代读任意本地文件。H5 的通用音频输入面板只在当前资产包含本地 `Blob`、`fileName` 和允许 MIME 且宿主声明 `file.exportAudio` 时展示导出入口；远端已上传音频、浏览器、小程序和未声明能力的裁剪壳不展示该入口。
 
diff --git a/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md b/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md
index ac3104e60..dae0739b2 100644
--- a/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md
+++ b/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md
@@ -379,6 +379,8 @@ RPG / 拼图等运行态存档仍以 `/api/profile/save-archives` 的后端列
 
 工程域：`square-hole`。当前链路具备 agent session、work profile、runtime run、drop shape、restart、stop、time-up 等后端 procedure 与前端 service。新改动应沿用独立 `module-square-hole`、`shared-contracts` 和 `spacetime-client`，不要挂回 RPG 或拼图语义。
 
+方洞结果页的封面、背景、形状和洞口图片槽位继续归属现有 result edit state 与 `PUT square-hole work` 保存链路；在 Expo / Tauri 原生壳声明 `file.importImage` 时，“上传图片”优先调用 HostBridge 系统图片选择器，并把返回的图片内容副本转换为当前槽位 `imageSrc`，普通浏览器、小程序和未声明能力的壳仍保留浏览器文件输入。
+
 ## 大鱼吃小鱼
 
 工程域：`big-fish`。当前保留创作会话、素材槽、事件、运行态 run、gallery、like、remix 和 play 记录。新创作和运行态规则应继续通过后端 profile / run 投影，不把运行态结果写成纯前端事实。
diff --git a/src/components/square-hole-result/SquareHoleResultView.test.tsx b/src/components/square-hole-result/SquareHoleResultView.test.tsx
index a50508d95..38307fa79 100644
--- a/src/components/square-hole-result/SquareHoleResultView.test.tsx
+++ b/src/components/square-hole-result/SquareHoleResultView.test.tsx
@@ -8,9 +8,13 @@ import {
   waitFor,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { afterEach, expect, test, vi } from 'vitest';
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 
 import type { SquareHoleWorkProfile } from '../../../packages/shared/src/contracts/squareHoleWorks';
+import {
+  canUseNativeHostCapability,
+  importHostImageFile,
+} from '../../services/host-bridge/hostBridge';
 import { SquareHoleResultView } from './SquareHoleResultView';
 
 vi.mock('../../services/square-hole-works', () => ({
@@ -22,6 +26,19 @@ vi.mock('../../services/square-hole-works', () => ({
   updateSquareHoleWork: vi.fn(),
 }));
 
+vi.mock('../../services/host-bridge/hostBridge', () => ({
+  canUseNativeHostCapability: vi.fn(() => false),
+  importHostImageFile: vi.fn(),
+}));
+
+const canUseNativeHostCapabilityMock = vi.mocked(canUseNativeHostCapability);
+const importHostImageFileMock = vi.mocked(importHostImageFile);
+
+beforeEach(() => {
+  canUseNativeHostCapabilityMock.mockReturnValue(false);
+  importHostImageFileMock.mockReset();
+});
+
 afterEach(() => {
   vi.useRealTimers();
   vi.clearAllMocks();
@@ -308,6 +325,121 @@ test('square hole image dialog reuses platform media frame', async () => {
   expect(mediaFrame?.className).toContain('bg-[var(--platform-subpanel-fill)]');
 });
 
+test('square hole image dialog imports slot images from native host capability', async () => {
+  const inputClickSpy = vi
+    .spyOn(HTMLInputElement.prototype, 'click')
+    .mockImplementation(() => undefined);
+  const { squareHoleAssetClient, updateSquareHoleWork } = await import(
+    '../../services/square-hole-works'
+  );
+  vi.mocked(squareHoleAssetClient.listHistoryAssets).mockResolvedValue([]);
+  vi.mocked(updateSquareHoleWork).mockResolvedValue({
+    item: createProfile(),
+  } as Awaited<ReturnType<typeof updateSquareHoleWork>>);
+  canUseNativeHostCapabilityMock.mockImplementation(
+    (capability) => capability === 'file.importImage',
+  );
+  importHostImageFileMock.mockResolvedValue({
+    action: 'selected',
+    fileName: '方洞封面.png',
+    mimeType: 'image/png',
+    base64Data: 'bmF0aXZlLWNvdmVy',
+    bytes: 12,
+  });
+
+  try {
+    render(
+      <SquareHoleResultView
+        profile={createProfile()}
+        onBack={() => {}}
+        onStartTestRun={() => {}}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '查看封面图' }));
+    expect(screen.getByRole('dialog', { name: '封面图查看' })).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: '上传图片' }));
+
+    await waitFor(() => {
+      expect(importHostImageFileMock).toHaveBeenCalledTimes(1);
+    });
+    expect(inputClickSpy).not.toHaveBeenCalled();
+
+    await waitFor(() => {
+      expect(updateSquareHoleWork).toHaveBeenCalledWith(
+        'profile-1',
+        expect.objectContaining({
+          coverImageSrc: 'data:image/png;base64,bmF0aXZlLWNvdmVy',
+        }),
+      );
+    });
+  } finally {
+    inputClickSpy.mockRestore();
+  }
+});
+
+test('square hole image dialog keeps browser file input fallback when native import is unavailable', async () => {
+  const user = userEvent.setup();
+  const inputClickSpy = vi
+    .spyOn(HTMLInputElement.prototype, 'click')
+    .mockImplementation(() => undefined);
+  const { squareHoleAssetClient } = await import(
+    '../../services/square-hole-works'
+  );
+  vi.mocked(squareHoleAssetClient.listHistoryAssets).mockResolvedValue([]);
+
+  try {
+    render(
+      <SquareHoleResultView
+        profile={createProfile()}
+        onBack={() => {}}
+        onStartTestRun={() => {}}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: '查看封面图' }));
+    await screen.findByRole('dialog', { name: '封面图查看' });
+    await user.click(screen.getByRole('button', { name: '上传图片' }));
+
+    expect(importHostImageFileMock).not.toHaveBeenCalled();
+    expect(inputClickSpy).toHaveBeenCalledTimes(1);
+  } finally {
+    inputClickSpy.mockRestore();
+  }
+});
+
+test('square hole image dialog leaves slot image unchanged when native import is cancelled', async () => {
+  const { squareHoleAssetClient, updateSquareHoleWork } = await import(
+    '../../services/square-hole-works'
+  );
+  vi.mocked(squareHoleAssetClient.listHistoryAssets).mockResolvedValue([]);
+  vi.mocked(updateSquareHoleWork).mockResolvedValue({
+    item: createProfile(),
+  } as Awaited<ReturnType<typeof updateSquareHoleWork>>);
+  canUseNativeHostCapabilityMock.mockImplementation(
+    (capability) => capability === 'file.importImage',
+  );
+  importHostImageFileMock.mockResolvedValue(false);
+
+  render(
+    <SquareHoleResultView
+      profile={createProfile()}
+      onBack={() => {}}
+      onStartTestRun={() => {}}
+    />,
+  );
+
+  fireEvent.click(screen.getByRole('button', { name: '查看封面图' }));
+  expect(screen.getByRole('dialog', { name: '封面图查看' })).toBeTruthy();
+  fireEvent.click(screen.getByRole('button', { name: '上传图片' }));
+
+  await waitFor(() => {
+    expect(importHostImageFileMock).toHaveBeenCalledTimes(1);
+  });
+
+  expect(updateSquareHoleWork).not.toHaveBeenCalled();
+});
+
 test('square hole cover and background buttons use platform media frames', () => {
   render(
     <SquareHoleResultView
diff --git a/src/components/square-hole-result/SquareHoleResultView.tsx b/src/components/square-hole-result/SquareHoleResultView.tsx
index ea55dcecd..b91e3eb20 100644
--- a/src/components/square-hole-result/SquareHoleResultView.tsx
+++ b/src/components/square-hole-result/SquareHoleResultView.tsx
@@ -9,7 +9,13 @@ import {
   Send,
   Trash2,
 } from 'lucide-react';
-import { type ChangeEvent, useEffect, useMemo, useState } from 'react';
+import {
+  type ChangeEvent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import type { SquareHoleResultDraft } from '../../../packages/shared/src/contracts/squareHoleAgent';
 import type {
@@ -26,6 +32,11 @@ import {
   type SquareHoleImageAssetKind,
   updateSquareHoleWork,
 } from '../../services/square-hole-works';
+import {
+  canUseNativeHostCapability,
+  type HostFileImportImageResult,
+  importHostImageFile,
+} from '../../services/host-bridge/hostBridge';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
 import { PlatformAssetPickerGrid } from '../common/PlatformAssetPickerCard';
@@ -305,6 +316,10 @@ function readImageAsDataUrl(file: File) {
   });
 }
 
+function hostImageImportResultToDataUrl(result: HostFileImportImageResult) {
+  return `data:${result.mimeType};base64,${result.base64Data}`;
+}
+
 function createShapeOption(
   index: number,
   holeOptions: SquareHoleHoleOption[],
@@ -484,6 +499,7 @@ function SquareHoleImageSlotDialog({
   onClose,
   onRegenerateImages,
   onSelectHistory,
+  onHostUpload,
   onUpload,
 }: {
   currentImageSrc: string;
@@ -494,14 +510,17 @@ function SquareHoleImageSlotDialog({
   onClose: () => void;
   onRegenerateImages: () => void;
   onSelectHistory: (asset: SquareHoleHistoryAsset) => void;
+  onHostUpload: (slot: SquareHoleImageSlot) => void;
   onUpload: (
     slot: SquareHoleImageSlot,
     event: ChangeEvent<HTMLInputElement>,
   ) => void;
 }) {
+  const uploadInputRef = useRef<HTMLInputElement | null>(null);
   const [assets, setAssets] = useState<SquareHoleHistoryAsset[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const canImportHostImage = canUseNativeHostCapability('file.importImage');
 
   useEffect(() => {
     let cancelled = false;
@@ -534,6 +553,17 @@ function SquareHoleImageSlotDialog({
     };
   }, [slot.assetKind]);
 
+  const handleUploadClick = () => {
+    if (isBusy) {
+      return;
+    }
+    if (canImportHostImage) {
+      onHostUpload(slot);
+      return;
+    }
+    uploadInputRef.current?.click();
+  };
+
   return (
     <PlatformToolModalShell
       open
@@ -559,22 +589,23 @@ function SquareHoleImageSlotDialog({
           />
           <div className="grid gap-2 sm:grid-cols-2">
             <PlatformActionButton
-              asChild="label"
+              onClick={handleUploadClick}
+              disabled={isBusy}
               tone="ghost"
               size="md"
-              aria-disabled={isBusy}
-              className={`min-h-11 cursor-pointer gap-2 px-4 ${isBusy ? 'cursor-not-allowed opacity-55' : ''}`}
+              className="min-h-11 gap-2 px-4"
             >
               <ImagePlus className="h-4 w-4" />
               上传图片
-              <input
-                type="file"
-                accept="image/*"
-                className="sr-only"
-                disabled={isBusy}
-                onChange={(event) => onUpload(slot, event)}
-              />
             </PlatformActionButton>
+            <input
+              ref={uploadInputRef}
+              type="file"
+              accept="image/*"
+              className="sr-only"
+              disabled={isBusy}
+              onChange={(event) => onUpload(slot, event)}
+            />
             <PlatformActionButton
               onClick={onRegenerateImages}
               disabled={!canRegenerateImages || isBusy}
@@ -767,6 +798,37 @@ export function SquareHoleResultView({
     }
   };
 
+  const handleImageSlotHostUpload = async (slot: SquareHoleImageSlot) => {
+    if (
+      isBusy ||
+      isApplyingHistoryImage ||
+      isPublishing ||
+      isRegeneratingImages ||
+      isStartingTestRun
+    ) {
+      return;
+    }
+
+    try {
+      const importedImage = await importHostImageFile();
+      if (!importedImage) {
+        return;
+      }
+      setEditState((current) =>
+        applyImageSlotSrc(
+          current,
+          slot,
+          hostImageImportResultToDataUrl(importedImage),
+        ),
+      );
+      setLocalError(null);
+    } catch (caughtError) {
+      setLocalError(
+        caughtError instanceof Error ? caughtError.message : '图片读取失败。',
+      );
+    }
+  };
+
   const handleStartTestRun = async () => {
     if (!canSubmit || isStartingTestRun) {
       setLocalError(blockers[0] ?? null);
@@ -1420,6 +1482,9 @@ export function SquareHoleResultView({
           onSelectHistory={(asset) => {
             void handleSelectHistoryImage(activeImageSlot, asset);
           }}
+          onHostUpload={(slot) => {
+            void handleImageSlotHostUpload(slot);
+          }}
           onUpload={(slot, event) => {
             void handleImageSlotUpload(slot, event);
           }}