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

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

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

补充标题同步测试和宿主壳能力文档

src/App.test.tsx

@@ -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('陶泥儿');
+  });
+});

src/App.tsx

@@ -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 />}>

src/services/appTitle.test.ts

@@ -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: '陶泥儿',
+    });
+  });
+});

src/services/appTitle.ts

@@ -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 });
+}

src/services/host-bridge/hostBridge.test.ts

@@ -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 () => {

src/services/host-bridge/hostBridge.ts

@@ -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;
+  }
+}