补充 AGC 复用网页端美术画布组件的跨端依赖排障记录

- pitfalls 新增一条:AGC 引 src/components/image-editor 组件会经 ImageCanvasGenerationModel 的 ApiClientError 值导入链到 src/services/apiClient.ts 与 host-bridge/hostBridge.ts,而它读的 wx / ReactNativeWebView / WeixinJSBridge 只在主仓 vite-env.d.ts 声明
- 记录处置口径:在 apps/ai-game-creator-shell/src/vite-env.d.ts 的 Window 上补同名同形字段(纯类型声明零运行时影响),不要关闭 AGC 的 noImplicitAny,也不要另写平行组件
- 记录已核实的运行时结论:hostBridge.ts 模块作用域只有常量与缓存声明、无导入即执行副作用,window.wx 仅在函数体内访问且有 typeof window 守卫,故该依赖链编入 AGC bundle 是惰性的
This commit is contained in:
2026-09-10 14:56:45 +08:00
parent 30e93c6c43
commit 2c07396ef7
@@ -5059,3 +5059,12 @@
- 原因:`image-canvas-editor__*` 的规则(约 918 条)全部在网页端全局样式表 `src/index.css` 里;AGC 只引入了 `@genarrative/image-canvas-react/styles.css`178 行,只有 `genarrative-image-canvas__*` 视口样式)和 `apps/ai-game-creator-shell/src/styles.css`
- 处理:口径是“复用组件 + AGC 宿主给样式”——在 `apps/ai-game-creator-shell/src/styles.css` 里为实际用到的 class 补宿主 chrome 样式(浮出定位、层级、按钮外观)。**不要**让 AGC import 网页端 `src/index.css`(整站全局表会连带引入无关 reset 与主题),也不要在同一次改动里做数百条规则的抽取重构。
- 关联:`src/index.css``packages/image-canvas-react/src/styles.css``apps/ai-game-creator-shell/src/styles.css`
## AGC 复用网页端 `src/components/image-editor/` 组件会拖进网页端服务层(2026-09-10)
- 现象:AGC 侧刚把 `ImageCanvasSelectedLayerToolbarView` 引进来,`npm run ai-game-creator-shell:typecheck` 立刻报十几条**不在自己代码里**的类型错误,全部指向主仓 `src/services/host-bridge/hostBridge.ts``Property 'wx' / 'ReactNativeWebView' does not exist on type 'Window'`)。
- 原因:跨端组件有一条**值级**依赖链:`ImageCanvasSelectedLayerToolbarView``ImageCanvasGenerationModel``error instanceof ApiClientError` 是值导入,不能退化成 type-only)→ `src/services/apiClient.ts``hostBridge.ts``hostBridge.ts` 读取的 `wx` / `ReactNativeWebView` / `WeixinJSBridge` 只在主仓 `src/vite-env.d.ts` 里声明过,而 AGC 的 `apps/ai-game-creator-shell/tsconfig.json``strict: true`,主仓不是。
- 处理:在 `apps/ai-game-creator-shell/src/vite-env.d.ts``interface Window` 上补**与主仓同名同形**的字段(纯类型声明、零运行时影响)。**不要**为了让它过而关闭 AGC 的 `noImplicitAny`(等于为借一个组件把整个 App 的类型门禁降级),**也不要**因此在 AGC 里另写一套平行组件。
- 运行时结论(已核实,可放心):`hostBridge.ts` 的模块作用域只有常量与缓存声明,**没有导入即执行的副作用**;`window.wx` 只在函数体内访问,`ReactNativeWebView``typeof window !== 'undefined'` 守卫。所以这条链被编进 AGC bundle 是惰性的。
- 通用规则:**今后任何往 AGC 引 `src/components/image-editor/` 组件的改动,都要先检查这条链**(组件 → `ImageCanvasGenerationModel``apiClient``hostBridge`),并确认新增的跨端全局在 AGC 侧有声明。
- 关联:`apps/ai-game-creator-shell/src/vite-env.d.ts``src/vite-env.d.ts``src/components/image-editor/ImageCanvasGenerationModel.ts``src/services/apiClient.ts``src/services/host-bridge/hostBridge.ts`