修复 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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user