From fec8b626f5573f7cb3897095360c3480fc742b0d Mon Sep 17 00:00:00 2001 From: kdletters Date: Thu, 18 Jun 2026 00:30:36 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=85=A5=E5=8E=9F=E7=94=9F=E5=A3=B3?= =?UTF-8?q?=E5=A4=96=E9=93=BE=E6=89=93=E5=BC=80=E8=B7=AF=E5=BE=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit H5 新增 openHostExternalUrl 并归一化外链 URL 备案号和资产调试原图在 native_app 中优先交给宿主打开 补充 HostBridge 外链测试和宿主壳文档 --- .../shared-memory/decision-log.md | 1 + ...ExpoReactNative与Tauri宿主壳方案-2026-06-17.md | 4 +- ...前端架构】宿主壳能力统一协议-2026-06-17.md | 1 + .../PlatformProfilePrimitives.test.tsx | 63 ++++++++++++++++++- .../PlatformProfilePrimitives.tsx | 22 ++++++- .../RpgCreationAssetDebugPanel.test.tsx | 56 ++++++++++++++++- .../RpgCreationAssetDebugPanel.tsx | 24 +++++++ src/services/host-bridge/hostBridge.test.ts | 18 ++++++ src/services/host-bridge/hostBridge.ts | 44 +++++++++++++ 9 files changed, 226 insertions(+), 7 deletions(-) diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md index 5d8cabe3..eec86972 100644 --- a/docs/project-memory/shared-memory/decision-log.md +++ b/docs/project-memory/shared-memory/decision-log.md @@ -21,6 +21,7 @@ - 背景：后续需要移动端 App 和桌面端 App，但现有主站、固定玩法 runtime、小程序壳和未来 AI H5 sandbox 已经以 H5 为主线；如果移动端重写 React Native UI、桌面端重写 Rust/Tauri UI，会形成玩法、登录、支付、分享和运行态的多套实现。 - 决策：移动端原生壳采用 `Expo + React Native`，桌面端壳采用 `Tauri`。两者都只作为 `native_app` 宿主壳和 HostBridge adapter，不重写现有 React H5 主站，不把固定内置玩法迁到 React Native / Rust UI，也不让 AI 生成 H5 游戏直接访问完整 HostBridge。Expo 壳通过 `react-native-webview` 承接 H5 与 native 通信，Tauri 壳通过受控 command 和 capabilities 承接桌面能力；新增能力必须先进入 HostBridge 契约和测试。 - 2026-06-17 首轮落地：新增 `packages/shared/src/contracts/hostBridge.ts`、`src/services/host-bridge/nativeAppHostBridge.ts`、`apps/mobile-shell/` 和 `apps/desktop-shell/`。壳只声明并实现真实可用能力；移动壳使用真实品牌图标资产并支持 `genarrative://`、iOS associated domain、Android app link 到同源 H5 路径，`navigation.openNativePage` 只接受同源 H5 route 并切换 WebView URL，不伪造尚未存在的原生页面，且通过 `host.events` 注入 `navigation.canGoBack` 返回栈状态事件，`share.setTarget` / `share.open` 解析统一分享目标并调用 React Native 系统分享面板，发布分享弹窗在 native_app 中通过 `share.open` 提供“系统分享”动作，失败时保留复制链接回退路径；`file.exportText` 写入 Expo 缓存文本文件后交给系统分享 / 保存面板，成功只返回文件名和字节数，`haptics.impact` 通过 Expo Haptics 承接 H5 运行时点击反馈；`app.openExternalUrl` 在 Expo 与 Tauri 两端都只允许 `http:`、`https:`、`mailto:`、`tel:` 外链协议；H5 复制服务在 native_app 中优先通过 `clipboard.writeText` 写入 Expo / Tauri 系统剪贴板，失败后再回退浏览器复制路径；H5 运行时反馈在 native_app 中优先通过 `haptics.impact` 请求真实移动端触觉，宿主不可用或 unsupported 时回退浏览器 `navigator.vibrate`；H5 主站按当前平台阶段同步 `document.title` 并通过 `app.setTitle` 请求宿主窗口标题，Tauri 壳通过主窗口 API 同步非空窗口标题，Expo 移动壳不声明该能力时静默忽略；桌面壳已通过 Tauri clipboard-manager 接入 `clipboard.writeText`，将 `navigation.openNativePage` 实现为 `https://app.genarrative.world` 同源 H5 route 的主窗口受控跳转，并将 `share.setTarget` / `share.open` 实现为复制非空分享文本到系统剪贴板；桌面 `file.exportText` 通过 Tauri dialog 插件打开系统保存对话框并由 Rust 写入文本文件，但不把 dialog / fs 插件 command 直接暴露给 H5，成功只返回文件名和字节数，用户取消返回 `cancelled`；登录、支付、原生系统分享面板等未接入真实 SDK / 插件前必须返回 unsupported 并让 H5 fallback，生产代码禁止 mock 成功。 +- 2026-06-18 外链接入：H5 新增 `openHostExternalUrl()` facade，`native_app` 下会把外链归一化为允许协议的绝对 URL 后请求 `app.openExternalUrl`；ICP备案号和 RPG 资产调试原图入口已优先走宿主系统浏览器，普通浏览器和小程序保留原 `` 行为，宿主不可用或拒绝时回退浏览器外链。 - 影响范围：`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 b99ea2a8..c27ec166 100644 --- a/docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md +++ b/docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md @@ -241,7 +241,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`、`host.events`、`share.open`、`share.setTarget`、`navigation.openNativePage`、`navigation.canGoBack`、`app.openExternalUrl`、`clipboard.writeText`、`file.exportText`、`haptics.impact` 和 Android 返回键回退；其中 `share.setTarget` / `share.open` 会解析统一分享目标里的 `title`、`message`、`url`、`work`、`path` 或 `targetPath` 并调用 React Native 系统分享面板；发布分享弹窗在 `native_app` 中通过 `share.open` 提供“系统分享”动作，失败时保留复制链接回退路径；`navigation.openNativePage` 在 Expo 壳内只接受同源 H5 route 并切换 WebView URL，不伪造尚未存在的登录、支付或其它原生页面，`navigation.canGoBack` 由 WebView 导航状态变化实时注入 H5，`app.openExternalUrl` 只允许 `http:`、`https:`、`mailto:`、`tel:` 外链协议，`clipboard.writeText` 由 H5 复制服务优先调用并写入系统剪贴板；`file.exportText` 通过 Expo 文件系统写入缓存文本文件，再交给系统分享 / 保存面板，文件名必须清洗，单次文本不超过 5 MiB，成功只返回文件名和字节数；`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`、`host.events`、`share.open`、`share.setTarget`、`navigation.openNativePage`、`navigation.canGoBack`、`app.openExternalUrl`、`clipboard.writeText`、`file.exportText`、`haptics.impact` 和 Android 返回键回退；其中 `share.setTarget` / `share.open` 会解析统一分享目标里的 `title`、`message`、`url`、`work`、`path` 或 `targetPath` 并调用 React Native 系统分享面板；发布分享弹窗在 `native_app` 中通过 `share.open` 提供“系统分享”动作，失败时保留复制链接回退路径；`navigation.openNativePage` 在 Expo 壳内只接受同源 H5 route 并切换 WebView URL，不伪造尚未存在的登录、支付或其它原生页面，`navigation.canGoBack` 由 WebView 导航状态变化实时注入 H5，`app.openExternalUrl` 只允许 `http:`、`https:`、`mailto:`、`tel:` 外链协议，ICP备案号和资产调试原图等 H5 外链入口在 `native_app` 中优先通过该能力离开 WebView 并交给系统浏览器；`clipboard.writeText` 由 H5 复制服务优先调用并写入系统剪贴板；`file.exportText` 通过 Expo 文件系统写入缓存文本文件，再交给系统分享 / 保存面板，文件名必须清洗，单次文本不超过 5 MiB，成功只返回文件名和字节数；`haptics.impact` 通过 Expo Haptics 承接运行时轻触反馈，H5 在宿主不支持时回退到浏览器 vibration。登录和支付尚未接入渠道 SDK / 原生页面时明确返回 unsupported，让 H5 fallback 承接。 ### Phase 3：Tauri 桌面壳 MVP @@ -252,7 +252,7 @@ GameBridge 禁止： - 实现 runtime、openExternalUrl、clipboard、share fallback、窗口标题同步。 - 验证 macOS / Windows / Linux 至少一条本地 smoke。 -当前状态：已新增 `apps/desktop-shell/`，Tauri dev 直接加载本地主站 Vite，release 打包根 `dist` 主站资产。Rust 侧只把 `host_bridge_request` command 授给主窗口，`app.openExternalUrl` 由 Rust 内部通过 opener 插件执行且只允许 `http:`、`https:`、`mailto:`、`tel:` 外链协议，`navigation.openNativePage` 只接受 `https://app.genarrative.world` 同源 H5 route 并在主窗口内受控跳转，`clipboard.writeText` 由 Rust 内部通过 clipboard-manager 插件写入系统剪贴板并由 H5 复制服务优先调用，`app.setTitle` 通过 Tauri 主窗口 API 同步窗口标题并拒绝空标题 / 控制字符；H5 主站会按当前平台阶段先更新 `document.title`，再通过 `app.setTitle` 把同一标题同步给 Tauri 窗口，Expo 移动壳不声明该能力时静默忽略；不把 opener、clipboard 或 dialog 插件命令直接暴露给前端。当前真实能力为 `host.getRuntime`、`share.setTarget`、`share.open`、`navigation.openNativePage`、`app.openExternalUrl`、`app.setTitle`、`clipboard.writeText` 和 `file.exportText`；其中 `share.open` 会把直接传入的分享 payload 或 `share.setTarget` 缓存的作品目标整理成非空分享文本并写入系统剪贴板，返回 `copied_to_clipboard`，发布分享弹窗在桌面壳中也通过该能力提供“系统分享”动作；`file.exportText` 通过系统保存对话框让用户选择本地路径，清洗文件名、限制单次文本导出不超过 5 MiB，写入成功后只返回文件名和字节数，不把本机绝对路径暴露给 H5，用户取消时返回 `cancelled`。原生系统分享面板、登录和支付未接入真实插件 / 渠道前不声明支持，不返回 mock 成功。 +当前状态：已新增 `apps/desktop-shell/`，Tauri dev 直接加载本地主站 Vite，release 打包根 `dist` 主站资产。Rust 侧只把 `host_bridge_request` command 授给主窗口，`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 同步窗口标题并拒绝空标题 / 控制字符；H5 主站会按当前平台阶段先更新 `document.title`，再通过 `app.setTitle` 把同一标题同步给 Tauri 窗口，Expo 移动壳不声明该能力时静默忽略；不把 opener、clipboard 或 dialog 插件命令直接暴露给前端。当前真实能力为 `host.getRuntime`、`share.setTarget`、`share.open`、`navigation.openNativePage`、`app.openExternalUrl`、`app.setTitle`、`clipboard.writeText` 和 `file.exportText`；其中 `share.open` 会把直接传入的分享 payload 或 `share.setTarget` 缓存的作品目标整理成非空分享文本并写入系统剪贴板，返回 `copied_to_clipboard`，发布分享弹窗在桌面壳中也通过该能力提供“系统分享”动作；`file.exportText` 通过系统保存对话框让用户选择本地路径，清洗文件名、限制单次文本导出不超过 5 MiB，写入成功后只返回文件名和字节数，不把本机绝对路径暴露给 H5，用户取消返回 `cancelled`。原生系统分享面板、登录和支付未接入真实插件 / 渠道前不声明支持，不返回 mock 成功。 ### Phase 4：宿主能力扩展 diff --git a/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md b/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md index 2ea49f8f..6de7d497 100644 --- a/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md +++ b/docs/【前端架构】宿主壳能力统一协议-2026-06-17.md @@ -48,6 +48,7 @@ AI H5 sandbox - `writeHostClipboardText()`：原生 App 宿主的受控剪贴板入口。H5 复制服务在 `native_app` 中优先通过 `clipboard.writeText` 写入 Expo / Tauri 系统剪贴板；宿主不可用、拒绝或返回 unsupported 时继续回退到浏览器 Clipboard API 和 legacy selection copy。 - `requestHostHapticsImpact()`：原生 App 宿主的受控触觉反馈入口。Expo 移动壳通过 `haptics.impact` 调用 Expo Haptics；H5 运行时点击反馈在 `native_app` 中优先请求宿主触觉，宿主不可用、拒绝或返回 unsupported 时继续回退到浏览器 `navigator.vibrate`。 - `setHostAppTitle()`：原生 App 宿主的受控窗口标题入口。H5 主站会按当前平台阶段先同步 `document.title`，再通过 `app.setTitle` 请求宿主窗口标题同步；Tauri 桌面壳支持该能力，Expo 移动壳不声明时静默忽略。 +- `openHostExternalUrl()`：原生 App 宿主的受控外链入口。H5 中需要离开主站的外链在 `native_app` 下先通过 `app.openExternalUrl` 请求宿主系统浏览器打开；只允许 `http:`、`https:`、`mailto:`、`tel:`，相对路径会先归一化到当前站点绝对 URL。宿主不可用或拒绝时回退浏览器外链行为，普通浏览器和小程序保持原有 `` 语义。 - `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 承接。 diff --git a/src/components/platform-entry/PlatformProfilePrimitives.test.tsx b/src/components/platform-entry/PlatformProfilePrimitives.test.tsx index 48f7c6bc..fcb12f53 100644 --- a/src/components/platform-entry/PlatformProfilePrimitives.test.tsx +++ b/src/components/platform-entry/PlatformProfilePrimitives.test.tsx @@ -1,11 +1,15 @@ /* @vitest-environment jsdom */ -import { Settings } from 'lucide-react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { describe, expect, test, vi } from 'vitest'; +import { Settings } from 'lucide-react'; +import { beforeEach, describe, expect, test, vi } from 'vitest'; -import { ICP_RECORD_NUMBER, LEGAL_DOCUMENTS } from '../common/legalDocuments'; +import { + ICP_RECORD_NUMBER, + ICP_RECORD_URL, + LEGAL_DOCUMENTS, +} from '../common/legalDocuments'; import { ProfileLegalSection, ProfileSettingsRow, @@ -13,10 +17,41 @@ import { ProfileStatCard, } from './PlatformProfilePrimitives'; +vi.mock('../../services/host-bridge/hostBridge', () => ({ + getHostRuntime: vi.fn(() => ({ + kind: 'browser', + clientType: null, + clientRuntime: null, + hostShell: null, + hostPlatform: null, + hostVersion: null, + miniProgramEnv: null, + })), + openHostExternalUrl: vi.fn(async () => false), +})); + +import { + getHostRuntime, + openHostExternalUrl, +} from '../../services/host-bridge/hostBridge'; + function TestIcon({ className }: { className?: string }) { return I; } +beforeEach(() => { + vi.mocked(getHostRuntime).mockReturnValue({ + kind: 'browser', + clientType: null, + clientRuntime: null, + hostShell: null, + hostPlatform: null, + hostVersion: null, + miniProgramEnv: null, + }); + vi.mocked(openHostExternalUrl).mockResolvedValue(false); +}); + describe('PlatformProfilePrimitives', () => { test('ProfileStatCard reports its dashboard card key on click', async () => { const user = userEvent.setup(); @@ -84,4 +119,26 @@ describe('PlatformProfilePrimitives', () => { expect(onOpenDocument).toHaveBeenCalledWith(firstLegalDocument.id); expect(screen.getByText(ICP_RECORD_NUMBER)).toBeTruthy(); }); + + test('ProfileLegalSection 在原生 App 中通过宿主打开备案外链', async () => { + const user = userEvent.setup(); + vi.mocked(getHostRuntime).mockReturnValue({ + kind: 'native_app', + clientType: 'native_app', + clientRuntime: 'native_app', + hostShell: 'expo_mobile', + hostPlatform: 'ios', + hostVersion: '0.1.0', + miniProgramEnv: null, + }); + vi.mocked(openHostExternalUrl).mockResolvedValue(true); + + render(); + + await user.click(screen.getByRole('link', { name: ICP_RECORD_NUMBER })); + + expect(openHostExternalUrl).toHaveBeenCalledWith({ + url: ICP_RECORD_URL, + }); + }); }); diff --git a/src/components/platform-entry/PlatformProfilePrimitives.tsx b/src/components/platform-entry/PlatformProfilePrimitives.tsx index a2086fb6..3b65fff5 100644 --- a/src/components/platform-entry/PlatformProfilePrimitives.tsx +++ b/src/components/platform-entry/PlatformProfilePrimitives.tsx @@ -1,7 +1,11 @@ import { ChevronRight } from 'lucide-react'; -import type { ComponentType, ReactNode } from 'react'; +import type { ComponentType, MouseEvent, ReactNode } from 'react'; import type { ProfileDashboardCardKey } from '../../../packages/shared/src/contracts/runtime'; +import { + getHostRuntime, + openHostExternalUrl, +} from '../../services/host-bridge/hostBridge'; import { ICP_RECORD_NUMBER, ICP_RECORD_URL, @@ -147,6 +151,19 @@ type ProfileLegalSectionProps = { export function ProfileLegalSection({ onOpenDocument, }: ProfileLegalSectionProps) { + const openIcpRecord = (event: MouseEvent) => { + if (getHostRuntime().kind !== 'native_app') { + return; + } + + event.preventDefault(); + void openHostExternalUrl({ url: ICP_RECORD_URL }).then((opened) => { + if (!opened) { + window.open(ICP_RECORD_URL, '_blank', 'noreferrer'); + } + }); + }; + return (
@@ -171,6 +188,9 @@ export function ProfileLegalSection({ href={ICP_RECORD_URL} target="_blank" rel="noreferrer" + onClick={(event) => { + void openIcpRecord(event); + }} className="platform-profile-legal-strip__record" > {ICP_RECORD_NUMBER} diff --git a/src/components/rpg-creation-result/RpgCreationAssetDebugPanel.test.tsx b/src/components/rpg-creation-result/RpgCreationAssetDebugPanel.test.tsx index 54b3afb3..4c83dae2 100644 --- a/src/components/rpg-creation-result/RpgCreationAssetDebugPanel.test.tsx +++ b/src/components/rpg-creation-result/RpgCreationAssetDebugPanel.test.tsx @@ -1,7 +1,8 @@ /* @vitest-environment jsdom */ import { render, screen, within } from '@testing-library/react'; -import { expect, test, vi } from 'vitest'; +import userEvent from '@testing-library/user-event'; +import { beforeEach, expect, test, vi } from 'vitest'; import { type CustomWorldProfile } from '../../types'; import { RpgCreationAssetDebugPanel } from './RpgCreationAssetDebugPanel'; @@ -10,6 +11,37 @@ vi.mock('../../services/assetReadUrlService', () => ({ resolveAssetReadUrl: vi.fn(() => new Promise(() => {})), })); +vi.mock('../../services/host-bridge/hostBridge', () => ({ + getHostRuntime: vi.fn(() => ({ + kind: 'browser', + clientType: null, + clientRuntime: null, + hostShell: null, + hostPlatform: null, + hostVersion: null, + miniProgramEnv: null, + })), + openHostExternalUrl: vi.fn(async () => false), +})); + +import { + getHostRuntime, + openHostExternalUrl, +} from '../../services/host-bridge/hostBridge'; + +beforeEach(() => { + vi.mocked(getHostRuntime).mockReturnValue({ + kind: 'browser', + clientType: null, + clientRuntime: null, + hostShell: null, + hostPlatform: null, + hostVersion: null, + miniProgramEnv: null, + }); + vi.mocked(openHostExternalUrl).mockResolvedValue(false); +}); + function createProfileWithAssets(): CustomWorldProfile { return { id: 'world-1', @@ -173,6 +205,28 @@ test('RPG asset debug panel uses PlatformSubpanel shells for summary and entries } }); +test('RPG asset debug panel 在原生 App 中通过宿主打开原图外链', async () => { + const user = userEvent.setup(); + vi.mocked(getHostRuntime).mockReturnValue({ + kind: 'native_app', + clientType: 'native_app', + clientRuntime: 'native_app', + hostShell: 'tauri_desktop', + hostPlatform: 'linux', + hostVersion: '0.1.0', + miniProgramEnv: null, + }); + vi.mocked(openHostExternalUrl).mockResolvedValue(true); + + render(); + + await user.click(screen.getByRole('link', { name: '打开 沈砺主形象' })); + + expect(openHostExternalUrl).toHaveBeenCalledWith({ + url: '/generated/custom-world/playable.png', + }); +}); + test('RPG asset debug panel uses PlatformEmptyState shell for empty state', () => { const emptyProfile = { ...createProfileWithAssets(), diff --git a/src/components/rpg-creation-result/RpgCreationAssetDebugPanel.tsx b/src/components/rpg-creation-result/RpgCreationAssetDebugPanel.tsx index 645cd172..65a956e3 100644 --- a/src/components/rpg-creation-result/RpgCreationAssetDebugPanel.tsx +++ b/src/components/rpg-creation-result/RpgCreationAssetDebugPanel.tsx @@ -1,6 +1,11 @@ +import type { MouseEvent } from 'react'; import { useEffect, useMemo, useState } from 'react'; import { resolveAssetReadUrl } from '../../services/assetReadUrlService'; +import { + getHostRuntime, + openHostExternalUrl, +} from '../../services/host-bridge/hostBridge'; import type { CustomWorldProfile } from '../../types'; import { PlatformEmptyState } from '../common/PlatformEmptyState'; import { PlatformPillBadge } from '../common/PlatformPillBadge'; @@ -162,6 +167,22 @@ export function RpgCreationAssetDebugPanel({ Record >({}); + const openAssetReadUrl = ( + event: MouseEvent, + url: string, + ) => { + if (getHostRuntime().kind !== 'native_app') { + return; + } + + event.preventDefault(); + void openHostExternalUrl({ url }).then((opened) => { + if (!opened) { + window.open(url, '_blank', 'noreferrer'); + } + }); + }; + useEffect(() => { if (assetDebugEntries.length === 0) { setAssetDebugStatusMap({}); @@ -295,6 +316,9 @@ export function RpgCreationAssetDebugPanel({ target="_blank" rel="noreferrer" aria-label={`打开 ${entry.label}`} + onClick={(event) => { + void openAssetReadUrl(event, readUrl); + }} className="text-xs font-semibold text-amber-200 underline decoration-white/20 underline-offset-2" > 打开原图 diff --git a/src/services/host-bridge/hostBridge.test.ts b/src/services/host-bridge/hostBridge.test.ts index 5f81ee41..3daa1b45 100644 --- a/src/services/host-bridge/hostBridge.test.ts +++ b/src/services/host-bridge/hostBridge.test.ts @@ -9,6 +9,7 @@ import { getNativeAppHostRuntime, isWechatMiniProgramWebViewRuntime, navigateHostNativePage, + openHostExternalUrl, openHostShare, openHostShareGrid, openWechatMiniProgramShareGridPage, @@ -317,6 +318,9 @@ describe('hostBridge', () => { await expect(requestHostHapticsImpact({ style: 'medium' })).resolves.toBe( true, ); + await expect( + openHostExternalUrl({ url: '/works/detail?work=PZ-1' }), + ).resolves.toBe(true); await expect(setHostAppTitle({ title: ' 拼图 - 陶泥儿 ' })).resolves.toBe( true, ); @@ -364,6 +368,14 @@ describe('hostBridge', () => { }, }), }); + expect(invoke).toHaveBeenCalledWith('host_bridge_request', { + request: expect.objectContaining({ + method: 'app.openExternalUrl', + payload: { + url: `${window.location.origin}/works/detail?work=PZ-1`, + }, + }), + }); expect(invoke).toHaveBeenCalledWith('host_bridge_request', { request: expect.objectContaining({ method: 'app.setTitle', @@ -418,6 +430,12 @@ describe('hostBridge', () => { await expect(requestHostHapticsImpact({ style: 'light' })).resolves.toBe( false, ); + await expect( + openHostExternalUrl({ url: 'https://beian.miit.gov.cn/' }), + ).resolves.toBe(false); + await expect( + openHostExternalUrl({ url: 'javascript:alert(1)' }), + ).resolves.toBe(false); await expect(setHostAppTitle({ title: '拼图 - 陶泥儿' })).resolves.toBe( false, ); diff --git a/src/services/host-bridge/hostBridge.ts b/src/services/host-bridge/hostBridge.ts index 74dd1026..04f5ed6e 100644 --- a/src/services/host-bridge/hostBridge.ts +++ b/src/services/host-bridge/hostBridge.ts @@ -4,8 +4,12 @@ import type { HapticsImpactPayload, HostBridgeMethod, HostBridgeRuntimeResult, + OpenExternalUrlPayload, ShareOpenPayload, } from '../../../packages/shared/src/contracts/hostBridge'; +import { + normalizeHostBridgeExternalUrl, +} from '../../../packages/shared/src/contracts/hostBridge'; import type { WechatMiniProgramPayParams, WechatMiniProgramVirtualPayParams, @@ -75,6 +79,8 @@ export type HostAppTitleRequest = { export type HostShareOpenRequest = ShareOpenPayload; +export type HostExternalUrlRequest = OpenExternalUrlPayload; + function isUnsupportedHostBridgeError(error: unknown) { return ( error instanceof Error && @@ -387,6 +393,25 @@ function buildAbsoluteUrl(value: string) { return new URL(value, window.location.origin).href; } +function normalizeHostExternalUrl(url: string) { + const trimmedUrl = url.trim(); + if (!trimmedUrl) { + return null; + } + + if (typeof window === 'undefined') { + return normalizeHostBridgeExternalUrl(trimmedUrl); + } + + try { + return normalizeHostBridgeExternalUrl( + new URL(trimmedUrl, window.location.origin).toString(), + ); + } catch { + return null; + } +} + export function canUseHostShareGrid(context: HostRuntimeContext = {}) { return getHostRuntime(context).kind === 'wechat_mini_program'; } @@ -461,6 +486,25 @@ export async function openHostShare(params: HostShareOpenRequest) { } } +export async function openHostExternalUrl({ url }: HostExternalUrlRequest) { + if (getHostRuntime().kind !== 'native_app') { + return false; + } + + const normalizedUrl = normalizeHostExternalUrl(url); + if (!normalizedUrl) { + return false; + } + + try { + return await requestNativeHostBoolean('app.openExternalUrl', { + url: normalizedUrl, + }); + } catch { + return false; + } +} + export function postWechatMiniProgramMessage(message: unknown) { return setHostShareTarget(message); }