接入RPG封面参考图原生导入

RPG作品封面参考图在原生壳内优先走宿主图片导入封面参考图取消原生选择时不触发浏览器文件输入同步封面参考图测试、宿主壳协议和共享记忆
2026-06-19 12:07:34 +08:00
parent 72b032ff9d
commit 6d79e89db1
5 changed files with 118 additions and 6 deletions
@@ -2682,3 +2682,10 @@
 - 决策：`WorldCoverEditor` 的作品封面上传在 `native_app` 且宿主声明 `file.importImage` 时优先调用 `importHostImageFile()`，把宿主返回的图片副本转换成浏览器 `File` 后继续走现有 10 MiB 校验、data URL 读取、图片尺寸读取、16:9 裁剪和 `uploadCustomWorldCoverImage` 保存链路。用户取消宿主选择时不连带触发浏览器文件输入；普通浏览器、小程序和未声明能力的裁剪壳继续使用原隐藏文件输入。
 - 影响范围：`src/components/rpg-creation-editor/RpgCreationEntityEditorShared.tsx`、`src/components/CustomWorldEntityEditorModal.test.tsx`、宿主壳能力统一协议文档。
 - 验证方式：`npm run test -- src/components/CustomWorldEntityEditorModal.test.tsx -t "作品封面"`、`npm run typecheck`、`npm run check:native-shells`、`npm run check:encoding`、`git diff --check`。
+
+## 2026-06-19 RPG 作品封面参考图接入原生壳图片导入
+
+- 背景：RPG 作品封面 AI 生成弹层的封面参考图仍通过浏览器隐藏文件输入读取；在 Expo / Tauri 壳中没有复用已落地的受控 `file.importImage` 系统选择器。
+- 决策：`CoverImageGenerationModal` 的封面参考图上传在 `native_app` 且宿主声明 `file.importImage` 时优先调用 `importHostImageFile()`，把宿主返回的图片副本转换成浏览器 `File` 后继续走现有 `readImageFileAsDataUrl` 读取、参考图预览和 `generateCustomWorldCoverImage` payload 链路。用户取消宿主选择时不连带触发浏览器文件输入；普通浏览器、小程序和未声明能力的裁剪壳继续使用原隐藏文件输入。
+- 影响范围：`src/components/rpg-creation-editor/RpgCreationEntityEditorShared.tsx`、`src/components/CustomWorldEntityEditorModal.test.tsx`、宿主壳能力统一协议文档。
+- 验证方式：`npm run test -- src/components/CustomWorldEntityEditorModal.test.tsx -t "作品封面"`、`npm run typecheck`、`npm run check:native-shells`、`npm run check:encoding`、`git diff --check`。
@@ -226,6 +226,7 @@ npm run check:native-shells
 抓大鹅结果页发布封面图和封面参考图上传在原生壳声明 `file.importImage` 时必须优先走宿主图片导入，并把 H5 base64 转 `File` 后复用现有封面 data URL 读取、AI 重绘开关、参考图集合和封面生成 payload 链路；用户取消原生选择不应再连带弹出浏览器文件输入。
 RPG 角色资产工作室的角色参考图上传在原生壳声明 `file.importImage` 时必须优先走宿主图片导入，并把 H5 base64 转 `File` 后复用现有 `readFileAsDataUrl` 参考图集合和角色形象生成 payload 链路；用户取消原生选择不应再连带弹出浏览器文件输入。
 RPG 作品封面上传在原生壳声明 `file.importImage` 时必须优先走宿主图片导入，并把 H5 base64 转 `File` 后复用现有 10 MiB 校验、图片尺寸读取、16:9 裁剪和 `uploadCustomWorldCoverImage` 保存链路；用户取消原生选择不应再连带弹出浏览器文件输入。
+RPG 作品封面参考图上传在原生壳声明 `file.importImage` 时必须优先走宿主图片导入，并把 H5 base64 转 `File` 后复用现有 `readImageFileAsDataUrl` 读取、预览和 `generateCustomWorldCoverImage` payload 链路；用户取消原生选择不应再连带弹出浏览器文件输入。
 视觉小说结果页封面 / 角色 / 场景图片和音乐 / 环境音上传在原生壳声明 `file.importImage` / `file.importAudio` 时必须优先走宿主受控导入，并把 H5 base64 转 `File` 后继续交给 `uploadVisualNovelAsset` 与当前素材字段写回链路；用户取消原生选择不应再连带弹出浏览器文件输入，历史素材选择和 AI 图片生成保持原链路。
 该命令会反查微信小程序 `WECHAT_HOST_CAPABILITIES` 与共享 `HOST_BRIDGE_WECHAT_MINI_PROGRAM_CAPABILITIES` 一致；小程序生产代码继续保留 CommonJS 运行时镜像，不直接 import TypeScript shared 包。
 该命令同时会运行微信小程序 `miniprogram/host-bridge/`、`miniprogram/shell/`、`pages/web-view` 样式和 `scripts/miniprogram-web-view-auth.test.ts` 的壳层测试，保证微信桥接层拆分后的支付、订阅消息、九宫切图、分享目标和 WebView 登录 / 分享入口行为与 Expo、Tauri 壳一起验收。
@@ -2280,3 +2280,70 @@ test('作品封面取消原生导入时不触发浏览器文件输入', async ()
  expect(inputClickSpy).not.toHaveBeenCalled();
  expect(screen.queryByText('裁剪上传封面')).toBeNull();
 });
+
+test('作品封面参考图在原生壳内优先走 HostBridge 图片导入', async () => {
+  vi.mocked(hostBridgeServices.canUseNativeHostCapability).mockImplementation(
+    (capability) => capability === 'file.importImage',
+  );
+  vi.mocked(hostBridgeServices.importHostImageFile).mockResolvedValue({
+    action: 'selected',
+    fileName: 'native-cover-reference.png',
+    base64Data:
+      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO7+7aQAAAAASUVORK5CYII=',
+    mimeType: 'image/png',
+    bytes: 68,
+  });
+
+  class MockFileReader {
+    result: string | null = null;
+    error: Error | null = null;
+    onload: null | (() => void) = null;
+    onerror: null | (() => void) = null;
+
+    readAsDataURL() {
+      this.result =
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO7+7aQAAAAASUVORK5CYII=';
+      this.onload?.();
+    }
+  }
+
+  vi.stubGlobal('FileReader', MockFileReader as unknown as typeof FileReader);
+  const inputClickSpy = vi
+    .spyOn(HTMLInputElement.prototype, 'click')
+    .mockImplementation(() => undefined);
+
+  const user = userEvent.setup();
+  render(<CoverEditorFlowHarness />);
+
+  await user.click(screen.getByRole('button', { name: 'AI 生成' }));
+  await user.click(screen.getByText('上传封面参考图'));
+
+  await waitFor(() => {
+    expect(hostBridgeServices.importHostImageFile).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('已载入封面参考图')).toBeTruthy();
+  });
+  expect(inputClickSpy).not.toHaveBeenCalled();
+  expect(screen.getByRole('img', { name: '封面参考图' })).toBeTruthy();
+});
+
+test('作品封面参考图取消原生导入时不触发浏览器文件输入', async () => {
+  vi.mocked(hostBridgeServices.canUseNativeHostCapability).mockImplementation(
+    (capability) => capability === 'file.importImage',
+  );
+  vi.mocked(hostBridgeServices.importHostImageFile).mockResolvedValue(false);
+  const inputClickSpy = vi
+    .spyOn(HTMLInputElement.prototype, 'click')
+    .mockImplementation(() => undefined);
+
+  const user = userEvent.setup();
+  render(<CoverEditorFlowHarness />);
+
+  await user.click(screen.getByRole('button', { name: 'AI 生成' }));
+  await user.click(screen.getByText('上传封面参考图'));
+
+  await waitFor(() => {
+    expect(hostBridgeServices.importHostImageFile).toHaveBeenCalledTimes(1);
+  });
+  expect(inputClickSpy).not.toHaveBeenCalled();
+  expect(screen.queryByText('已载入封面参考图')).toBeNull();
+});
@@ -3821,6 +3821,7 @@ function CoverImageGenerationModal({
    useState<CustomWorldCoverAssetResult | null>(null);
  const [isExitConfirmOpen, setIsExitConfirmOpen] = useState(false);
  const referenceImageInputId = useId();
+  const referenceImageInputRef = useRef<HTMLInputElement | null>(null);

  const previewImageSrc =
    latestResult?.imageSrc || initialPresentation.imageSrc;
@@ -3834,11 +3835,7 @@ function CoverImageGenerationModal({
    .map((role) => role.name)
    .filter(Boolean);

-  const handleReferenceImageChange = async (
-    event: ChangeEvent<HTMLInputElement>,
-  ) => {
-    const file = event.target.files?.[0];
-    event.currentTarget.value = '';
+  const setCoverReferenceImageFromFile = async (file: File) => {
    if (!file) {
      return;
    }
@@ -3856,6 +3853,39 @@ function CoverImageGenerationModal({
    }
  };

+  const handleReferenceImageChange = async (
+    event: ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    event.currentTarget.value = '';
+    if (!file) {
+      return;
+    }
+
+    await setCoverReferenceImageFromFile(file);
+  };
+
+  const handleReferenceImageUploadClick = () => {
+    if (!canUseNativeHostCapability('file.importImage')) {
+      referenceImageInputRef.current?.click();
+      return;
+    }
+
+    void (async () => {
+      const importedImage = await importHostImageFile();
+      if (!importedImage) {
+        return;
+      }
+
+      await setCoverReferenceImageFromFile(
+        puzzleReferenceImageDataUrlToFile(
+          `data:${importedImage.mimeType};base64,${importedImage.base64Data}`,
+          importedImage.fileName,
+        ),
+      );
+    })();
+  };
+
  const handleRequestClose = () => {
    if (isGenerating) {
      return;
@@ -3943,8 +3973,15 @@ function CoverImageGenerationModal({
                  size="compact"
                  surface="editorDark"
                  disabled={isGenerating}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    if (!isGenerating) {
+                      handleReferenceImageUploadClick();
+                    }
+                  }}
                />
                <input
+                  ref={referenceImageInputRef}
                  id={referenceImageInputId}
                  type="file"
                  accept="image/png,image/jpeg,image/webp"