替换面板改为非模态浮层,支持在画布上点选替换目标

- 共享选择组件新增 opt-in nonModal:不铺遮罩、不做焦点陷阱、限高 + 内部滚动,Esc 在 document 阶段截断后取消,关掉即卸载;网页端美术画布不传,弹窗行为逐字不变。
- 新增 initialSelectionRevision:面板开着时宿主换了目标才重同步当前选择,面板里的搜索词与分类筛选不被重置。
- AGC 侧把候选面板锚到画布右上角(任务开关下方),壳样式放共享样式表、宿主只负责锚定;面板开着时画布照常可点,点中合法候选落成面板当前选择,写入仍只由「确认」发起。
- 退役旧的「点选替换」按钮、画布提示条与 resourceReplacementPickMode:同一个功能不留两条 UI 路径;合法性判据仍复用 resolveResourceReplacementPick,写入仍是同一个 confirm 函数。
- 确认时用画布点选结果兜底,避免点完当帧按确认误报「请选择一个替换素材」。
- 测试:替换用例 4 条点选路径改写为非模态 + 面板点选(含四类非法目标在面板内报因、Esc 只收面板),新增「画布点选不清掉面板搜索/分类」;共享组件用例新增 nonModal 形态与浮层壳声明级契约。
- 文档:PRD 5.3 / 7.8 第 8 条改写、验收用例 S15a 改写、decision-log 新增 2026-09-21 条目、待办文档登记三项并勾掉对应需求。
This commit is contained in:
2026-09-21 03:48:40 +08:00
parent 9639a080c6
commit de502e9bc3
10 changed files with 511 additions and 302 deletions
+56
View File
@@ -1006,6 +1006,62 @@ textarea.genarrative-ui-text-field__control {
background: var(--platform-overlay-fill);
}
/*
* 参考图 / 替换素材选择组件的**非模态浮层**形态(`nonModal`)。
*
* 与上面的 `platform-modal-shell` 同一处理由:一个组件两种外壳,壳样式放在这里,凡是引入本文件
* 的宿主一起命中;写进任一宿主的业务样式就会变成平行拷贝。落差只有外壳——底色 / 边框 / 阴影 /
* 头部 / 滚动区 + 一列动作条,**不铺遮罩、不抢焦点**,宿主画布保持可点(AGC 的「替换素材」用它
* 在画布上点选目标素材)。锚定位置由宿主给(AGC 是画布右上角),这里不写 `position`。
*
* 依赖 `theme.css` 的 token,由最近的主题祖先提供(AGC 的锚点容器自带
* `.platform-theme--light`)。
*/
.image-canvas-editor__project-asset-picker--floating {
display: flex;
width: min(22rem, 34vw);
max-height: min(30rem, 70vh);
flex-direction: column;
overflow: hidden;
border: 1px solid var(--platform-modal-border);
border-radius: 0.75rem;
background: var(--platform-modal-fill);
box-shadow: var(--platform-panel-shadow);
color: var(--platform-text-strong);
backdrop-filter: blur(10px);
}
.image-canvas-editor__project-asset-picker-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
border-bottom: 1px solid var(--platform-line-soft);
padding: 0.68rem 0.78rem;
}
.image-canvas-editor__project-asset-picker-header strong {
font-size: 0.82rem;
font-weight: 850;
}
.image-canvas-editor__project-asset-picker-scroll {
min-height: 0;
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.75rem 0.8rem;
scrollbar-width: thin;
}
.image-canvas-editor__project-asset-picker-actions {
display: flex;
align-items: center;
gap: 0.45rem;
border-top: 1px solid var(--platform-line-soft);
padding: 0.6rem 0.7rem;
}
.genarrative-ui-empty-state {
display: grid;
min-height: 10rem;