修复 AGC「选择替换素材」弹窗面板透明:平台弹窗外壳规则移入共享样式表

- 根因:弹窗面板用的 `platform-modal-shell`(遮罩 `platform-overlay`)规则原先只写在网页端整站样式表 src/index.css;AGC 只加载 packages/shared/src/components/styles.css 与 theme.css,类名挂上了但一条声明都没命中,面板因此无底色、无边框、无阴影,背后模糊的资源画布直接透出
- 把 platform-modal-shell / platform-modal-backdrop / platform-overlay 三条宿主类规则从 src/index.css 移进 packages/shared/src/components/styles.css:两个宿主都 import 这张表,规则只保留一份,不在 AGC 业务样式里复制平行副本;三处声明逐字照搬,网页端层叠结果不变
- 新增 apps/ai-game-creator-shell/tests/projectAssetPickerDialogShellStyle.test.tsx:从 src/main.tsx 按真实 import 关系解析出「AGC 到底加载了哪些样式表」,断言清单里有这三条规则、背景引用主题 token、light 主题下 --platform-modal-fill 各色停 alpha ≥ 0.9;DOM 契约断言面板挂 platform-modal-shell、遮罩带 platform-overlay 与 platform-theme--light;并断言这三条规则只在共享表里各定义一次(禁止平行拷贝)
- docs/project-memory/shared-memory/pitfalls.md 记录「共享弹窗的宿主类必须落在所有宿主都会加载的样式表里」的排障经验
This commit is contained in:
2026-09-12 18:48:31 +08:00
parent 4c180ac29a
commit 0749241908
4 changed files with 404 additions and 16 deletions
+29
View File
@@ -974,6 +974,35 @@ textarea.genarrative-ui-text-field__control {
overflow: auto;
}
/*
* 平台弹窗外壳:共享弹窗组件(网页端 `src/components/common/UnifiedModal`、
* `PlatformMudPointConfirmDialog` 等)产出的宿主类。
*
* 这三条原先只写在网页端整站样式表 `src/index.css`。AGC 是独立宿主,只引入本文件与
* `theme.css`,不引入那张整站样式表,于是弹窗面板拿到 `platform-modal-shell` 却没有任何
* `background` / `border` / `box-shadow` 声明,面板变透明、背后画布直接透出来(AGC
* 「选择替换素材」弹窗即此例)。放在这里,凡是引入本文件的宿主就一起命中;写进任一宿主的
* 业务样式里都会变成下一份平行拷贝。
*
* 依赖 `theme.css` 的 token,由祖先的 `.platform-theme--light` / `.platform-theme--dark`
* 提供:弹窗 portal 到 `document.body` 时主题类必须挂在遮罩上(`UnifiedModal.portalTheme`)。
*/
.platform-modal-shell {
border: 1px solid var(--platform-modal-border);
background: var(--platform-modal-fill);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
}
.platform-modal-backdrop {
background: var(--platform-overlay-fill);
color: var(--platform-text-strong);
backdrop-filter: blur(12px);
}
.platform-overlay {
background: var(--platform-overlay-fill);
}
.genarrative-ui-empty-state {
display: grid;
min-height: 10rem;