接入桌面壳窗口标题同步路径

H5 主站按当前平台阶段同步 document.title

native_app 中通过 app.setTitle 请求 Tauri 窗口标题同步

补充标题同步测试和宿主壳能力文档
This commit is contained in:
2026-06-18 00:07:21 +08:00
parent 78afd81269
commit d64e576e3f
9 changed files with 307 additions and 2 deletions

View File

@@ -20,7 +20,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 系统分享面板,`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`;桌面壳已通过 Tauri clipboard-manager 接入 `clipboard.writeText`,将 `navigation.openNativePage` 实现为 `https://app.genarrative.world` 同源 H5 route 的主窗口受控跳转,并将 `share.setTarget` / `share.open` 实现为复制非空分享文本到系统剪贴板`app.setTitle` 通过主窗口 API 同步非空窗口标题;桌面 `file.exportText` 通过 Tauri dialog 插件打开系统保存对话框并由 Rust 写入文本文件,但不把 dialog / fs 插件 command 直接暴露给 H5成功只返回文件名和字节数用户取消返回 `cancelled`;登录、支付、原生系统分享面板等未接入真实 SDK / 插件前必须返回 unsupported 并让 H5 fallback生产代码禁止 mock 成功。
- 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 系统分享面板,`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 成功。
- 影响范围:`src/services/host-bridge/`、未来 `apps/mobile-shell/`、未来 `apps/desktop-shell/`、移动端支付 / 分享 / 深链 / 推送、桌面端系统能力、AI H5 sandbox 的 GameBridge 边界。
- 验证方式普通浏览器、小程序、Expo 壳、Tauri 壳都能返回正确 `getHostRuntime()`;未支持能力能回退 H5固定玩法在各宿主中读取同一作品数据和运行态 snapshotAI sandbox 无法直接调用 HostBridgeTauri release 不允许任意远端页面调用桌面命令。
- 关联文档:`docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md``docs/【前端架构】宿主壳能力统一协议-2026-06-17.md`

View File

@@ -252,7 +252,7 @@ GameBridge 禁止:
- 实现 runtime、openExternalUrl、clipboard、share fallback、窗口标题同步。
- 验证 macOS / Windows / Linux 至少一条本地 smoke。
当前状态:已新增 `apps/desktop-shell/`Tauri dev 直接加载本地主站 Viterelease 打包根 `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 同步窗口标题并拒绝空标题 / 控制字符;不把 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 直接加载本地主站 Viterelease 打包根 `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 成功。
### Phase 4宿主能力扩展

View File

@@ -46,6 +46,7 @@ AI H5 sandbox
- `openHostShareGrid()`:微信小程序九宫格切图页。
- `writeHostClipboardText()`:原生 App 宿主的受控剪贴板入口。H5 复制服务在 `native_app` 中优先通过 `clipboard.writeText` 写入 Expo / Tauri 系统剪贴板;宿主不可用、拒绝或返回 unsupported 时继续回退到浏览器 Clipboard API 和 legacy selection copy。
- `requestHostHapticsImpact()`:原生 App 宿主的受控触觉反馈入口。Expo 移动壳通过 `haptics.impact` 调用 Expo HapticsH5 运行时点击反馈在 `native_app` 中优先请求宿主触觉,宿主不可用、拒绝或返回 unsupported 时继续回退到浏览器 `navigator.vibrate`
- `setHostAppTitle()`:原生 App 宿主的受控窗口标题入口。H5 主站会按当前平台阶段先同步 `document.title`,再通过 `app.setTitle` 请求宿主窗口标题同步Tauri 桌面壳支持该能力Expo 移动壳不声明时静默忽略。
- `navigateHostNativePage()`:受控跳转宿主页,供订阅授权、支付、登录等 adapter 复用。Expo 移动壳首版只接受同源 H5 route 并切换 WebView URLTauri 桌面壳同样只接受 `https://app.genarrative.world` 同源 H5 route 并在主窗口内跳转。真正原生页面、登录和支付能力必须等对应 SDK / 页面接入后再声明支持。
- `exportHostTextFile()`:原生 App 宿主的受控文本导出入口。Expo 移动壳通过 `file.exportText` 写入缓存文本文件并交给系统分享 / 保存面板Tauri 桌面壳通过 `file.exportText` 打开系统保存对话框并写入用户选择的文件。文件名必须清洗,单次文本不超过 5 MiB成功只返回文件名和字节数不把本机绝对路径暴露给 H5系统分享不可用或用户取消时返回明确错误由 H5 fallback 承接。

125
src/App.test.tsx Normal file
View File

@@ -0,0 +1,125 @@
/* @vitest-environment jsdom */
import { act, fireEvent, render, screen } from '@testing-library/react';
import { afterEach, describe, expect, test, vi } from 'vitest';
import App from './App';
import { AuthUiContext } from './components/auth/AuthUiContext';
import type { PlatformEntryFlowShellProps } from './components/platform-entry';
const appTitleMock = vi.hoisted(() => ({
syncAppTitle: vi.fn(),
}));
vi.mock('./services/appTitle', async (importOriginal) => {
const actual = await importOriginal<typeof import('./services/appTitle')>();
return {
...actual,
syncAppTitle: appTitleMock.syncAppTitle,
};
});
vi.mock('./components/platform-entry/PlatformEntryFlowShell', () => ({
PlatformEntryFlowShell: ({
handleCustomWorldSelect,
setSelectionStage,
}: PlatformEntryFlowShellProps) => (
<div>
<button
type="button"
onClick={() => setSelectionStage('puzzle-agent-workspace')}
>
</button>
<button
type="button"
onClick={() =>
handleCustomWorldSelect(
{
id: 'profile-1',
name: '潮雾列岛',
} as Parameters<
PlatformEntryFlowShellProps['handleCustomWorldSelect']
>[0],
)
}
>
RPG
</button>
</div>
),
}));
vi.mock('./RpgRuntimeApp', () => ({
RpgRuntimeApp: ({ onExitRuntime }: { onExitRuntime: () => void }) => (
<button type="button" onClick={onExitRuntime}>
退 RPG
</button>
),
}));
function renderApp() {
return render(
<AuthUiContext.Provider
value={{
canAccessProtectedData: false,
isHydratingSettings: false,
isPersistingSettings: false,
logout: vi.fn(async () => undefined),
musicVolume: 0.6,
openAccountModal: vi.fn(),
openLoginModal: vi.fn(),
openSettingsModal: vi.fn(),
platformTheme: 'light',
requireAuth: vi.fn(),
setCurrentUser: vi.fn(),
setMusicVolume: vi.fn(),
setPlatformTheme: vi.fn(),
settingsError: null,
user: null,
}}
>
<App />
</AuthUiContext.Provider>,
);
}
afterEach(() => {
appTitleMock.syncAppTitle.mockReset();
window.history.replaceState(null, '', '/');
vi.restoreAllMocks();
});
describe('App title sync', () => {
test('主站阶段变化会同步浏览器与宿主标题', () => {
renderApp();
expect(appTitleMock.syncAppTitle).toHaveBeenLastCalledWith('陶泥儿');
act(() => {
fireEvent.click(screen.getByRole('button', { name: '打开拼图创作' }));
});
expect(appTitleMock.syncAppTitle).toHaveBeenLastCalledWith(
'拼图创作 - 陶泥儿',
);
});
test('RPG runtime 进入和退出时同步窗口标题', async () => {
renderApp();
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: '进入 RPG' }));
});
expect(appTitleMock.syncAppTitle).toHaveBeenLastCalledWith(
'RPG 运行中 - 陶泥儿',
);
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: '退出 RPG' }));
});
expect(appTitleMock.syncAppTitle).toHaveBeenLastCalledWith('陶泥儿');
});
});

View File

@@ -23,6 +23,10 @@ import {
resolveSelectionStageFromPath,
} from './routing/appPageRoutes';
import type { RpgRuntimeAppIntent } from './RpgRuntimeApp';
import {
resolveAppTitleForSelectionStage,
syncAppTitle,
} from './services/appTitle';
import type { CustomWorldProfile } from './types';
const RpgRuntimeApp = lazy(async () => {
@@ -134,6 +138,14 @@ export default function App() {
? 'platform-theme--dark'
: 'platform-theme--light';
useEffect(() => {
syncAppTitle(
isRuntimeActive
? 'RPG 运行中 - 陶泥儿'
: resolveAppTitleForSelectionStage(selectionStage),
);
}, [isRuntimeActive, selectionStage]);
if (isRuntimeActive) {
return (
<Suspense fallback={<RuntimeLoadingFallback />}>

View File

@@ -0,0 +1,54 @@
/* @vitest-environment jsdom */
import { afterEach, describe, expect, test, vi } from 'vitest';
import {
resolveAppTitleForSelectionStage,
syncAppTitle,
} from './appTitle';
const hostBridgeMock = vi.hoisted(() => ({
setHostAppTitle: vi.fn(),
}));
vi.mock('./host-bridge/hostBridge', () => ({
setHostAppTitle: hostBridgeMock.setHostAppTitle,
}));
afterEach(() => {
document.title = '';
hostBridgeMock.setHostAppTitle.mockReset();
});
describe('appTitle', () => {
test('按平台阶段生成可读页面标题', () => {
expect(resolveAppTitleForSelectionStage('platform')).toBe('陶泥儿');
expect(resolveAppTitleForSelectionStage('work-detail')).toBe(
'作品详情 - 陶泥儿',
);
expect(resolveAppTitleForSelectionStage('match3d-runtime')).toBe(
'抓大鹅 - 陶泥儿',
);
expect(resolveAppTitleForSelectionStage('puzzle-generating')).toBe(
'拼图生成中 - 陶泥儿',
);
});
test('同步浏览器标题并请求宿主窗口标题', () => {
syncAppTitle(' 拼图 - 陶泥儿 ');
expect(document.title).toBe('拼图 - 陶泥儿');
expect(hostBridgeMock.setHostAppTitle).toHaveBeenCalledWith({
title: '拼图 - 陶泥儿',
});
});
test('空标题回退到品牌名', () => {
syncAppTitle(' ');
expect(document.title).toBe('陶泥儿');
expect(hostBridgeMock.setHostAppTitle).toHaveBeenCalledWith({
title: '陶泥儿',
});
});
});

78
src/services/appTitle.ts Normal file
View File

@@ -0,0 +1,78 @@
import type { SelectionStage } from '../components/platform-entry';
import { setHostAppTitle } from './host-bridge/hostBridge';
const APP_TITLE_BRAND = '陶泥儿';
const APP_TITLE_BY_SELECTION_STAGE: Partial<Record<SelectionStage, string>> = {
'agent-workspace': 'RPG 创作',
'baby-love-drawing-runtime': '宝贝爱画',
'baby-object-match-generating': '宝贝识物生成中',
'baby-object-match-result': '宝贝识物结果',
'baby-object-match-runtime': '宝贝识物',
'baby-object-match-workspace': '宝贝识物创作',
'bark-battle-generating': '汪汪声浪生成中',
'bark-battle-result': '汪汪声浪结果',
'bark-battle-runtime': '汪汪声浪',
'bark-battle-workspace': '汪汪声浪创作',
'big-fish-agent-workspace': '大鱼吃小鱼创作',
'big-fish-generating': '大鱼吃小鱼生成中',
'big-fish-result': '大鱼吃小鱼结果',
'big-fish-runtime': '大鱼吃小鱼',
'creative-agent-workspace': '创意 Agent',
'custom-world-generating': 'RPG 生成中',
'custom-world-result': 'RPG 结果',
detail: '世界详情',
'jump-hop-gallery-detail': '跳一跳详情',
'jump-hop-generating': '跳一跳生成中',
'jump-hop-result': '跳一跳结果',
'jump-hop-runtime': '跳一跳',
'jump-hop-workspace': '跳一跳创作',
'match3d-agent-workspace': '抓大鹅创作',
'match3d-generating': '抓大鹅生成中',
'match3d-result': '抓大鹅结果',
'match3d-runtime': '抓大鹅',
platform: APP_TITLE_BRAND,
'profile-feedback': '反馈与投诉',
'puzzle-agent-workspace': '拼图创作',
'puzzle-clear-generating': '拼消消生成中',
'puzzle-clear-result': '拼消消结果',
'puzzle-clear-runtime': '拼消消',
'puzzle-clear-workspace': '拼消消创作',
'puzzle-gallery-detail': '拼图详情',
'puzzle-generating': '拼图生成中',
'puzzle-onboarding': '拼图教学',
'puzzle-result': '拼图结果',
'puzzle-runtime': '拼图',
'square-hole-agent-workspace': '方洞挑战创作',
'square-hole-generating': '方洞挑战生成中',
'square-hole-result': '方洞挑战结果',
'square-hole-runtime': '方洞挑战',
'visual-novel-agent-workspace': '视觉小说创作',
'visual-novel-gallery-detail': '视觉小说详情',
'visual-novel-generating': '视觉小说生成中',
'visual-novel-result': '视觉小说结果',
'visual-novel-runtime': '视觉小说',
'wooden-fish-generating': '敲木鱼生成中',
'wooden-fish-result': '敲木鱼结果',
'wooden-fish-runtime': '敲木鱼',
'wooden-fish-workspace': '敲木鱼创作',
'work-detail': '作品详情',
};
export function resolveAppTitleForSelectionStage(stage: SelectionStage) {
const title = APP_TITLE_BY_SELECTION_STAGE[stage] ?? APP_TITLE_BRAND;
if (title === APP_TITLE_BRAND) {
return title;
}
return `${title} - ${APP_TITLE_BRAND}`;
}
export function syncAppTitle(title: string) {
const normalizedTitle = title.trim() || APP_TITLE_BRAND;
if (typeof document !== 'undefined') {
document.title = normalizedTitle;
}
void setHostAppTitle({ title: normalizedTitle });
}

View File

@@ -18,6 +18,7 @@ import {
requestWechatMiniProgramPayment,
requestWechatMiniProgramPhoneLogin,
resolveHostRuntime,
setHostAppTitle,
setHostShareTarget,
writeHostClipboardText,
} from './hostBridge';
@@ -315,6 +316,9 @@ describe('hostBridge', () => {
await expect(requestHostHapticsImpact({ style: 'medium' })).resolves.toBe(
true,
);
await expect(setHostAppTitle({ title: ' 拼图 - 陶泥儿 ' })).resolves.toBe(
true,
);
expect(invoke).toHaveBeenCalledWith('host_bridge_request', {
request: expect.objectContaining({
@@ -352,6 +356,14 @@ describe('hostBridge', () => {
},
}),
});
expect(invoke).toHaveBeenCalledWith('host_bridge_request', {
request: expect.objectContaining({
method: 'app.setTitle',
payload: {
title: '拼图 - 陶泥儿',
},
}),
});
});
test('原生 App 宿主不支持能力时回退到 H5 路径', async () => {
@@ -388,6 +400,10 @@ describe('hostBridge', () => {
await expect(requestHostHapticsImpact({ style: 'light' })).resolves.toBe(
false,
);
await expect(setHostAppTitle({ title: '拼图 - 陶泥儿' })).resolves.toBe(
false,
);
await expect(setHostAppTitle({ title: ' ' })).resolves.toBe(false);
});
test('普通浏览器不处理宿主文本导出', async () => {

View File

@@ -68,6 +68,10 @@ export type HostClipboardWriteTextRequest = {
export type HostHapticsImpactRequest = HapticsImpactPayload;
export type HostAppTitleRequest = {
title: string;
};
function isUnsupportedHostBridgeError(error: unknown) {
return (
error instanceof Error &&
@@ -504,3 +508,18 @@ export async function requestHostHapticsImpact(
return false;
}
}
export async function setHostAppTitle({ title }: HostAppTitleRequest) {
const normalizedTitle = title.trim();
if (!normalizedTitle || getHostRuntime().kind !== 'native_app') {
return false;
}
try {
return await requestNativeHostBoolean('app.setTitle', {
title: normalizedTitle,
});
} catch {
return false;
}
}