恢复被 #193 误删的策划前端全部样式,并加上组件到样式的守门测试 #195
Reference in New Issue
Block a user
Delete Branch "fix/design_frontend"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
症状:立项策划界面整体裸奔——审批卡、阶段进度条、交付行没有任何框和布局,
「查看 GDD 正文」弹层因 backdrop 丢掉 fixed 定位而内联平铺进消息流。
成因:策划前端经 squash PR #159 完整进入 master,组件(TSX)至今与源分支最终态
逐字节一致;随后 #193「Codex/agent chat layout fix」重写聊天区样式时,把
styles.css 里策划前端的选择器整段删除——gdd-approval-card 34 条、plan-gdd* 17
条、planning-lane-runtime-strip 上限——未搬往任何其他文件(全仓检索为 0)。同一
个 PR 把 project-development.suite.ts 大幅重写,原有的 CSS 守门断言一并消失,
所以没有任何测试变红。
修复:从 5802048c3^ 原样取回全部 42 个规则块,整段追加在 styles.css 末尾并注明
来历。这些选择器在当前文件中出现次数为 0,纯加法、零冲突,不触碰 #193/#194 有意
重构的聊天区规则;追加在末尾也保持了原有的同权重覆盖关系(策划窄条的上限仍压过
调试面板的 240px 天花板)。
守门:plan-gdd.suite.ts(两轮样式重构都未被触碰的文件)新增一条测试,类名清单
直接从 GddApprovalCard / PlanningLaneRuntimeStrip 源码推导,逐个断言 styles.css
里有对应规则,另单独锁弹层 backdrop 的 fixed 定位。A/B 验证:抽掉恢复段即红,报
「styles.css 缺少 .plan-gdd-surface 的规则」。组件加新类而样式缺失、或样式再次
被顺手清理,这条都会拦住。
Co-Authored-By: Claude Opus 5 noreply@anthropic.com
现象:立项策划提交需求后,界面永远停在「任务已接收」,澄清问答卡不出现。后端、 模式判定、链路判据、readOnly、数据传递全部正确,卡片也确实渲染了——314px 高、 visible、opacity 1,只是被画在裁剪线外面。实测窄条 top=858 而容器 bottom=788, 超出 384px;scrollHeight 1235 vs clientHeight 734,输入框和状态行也一起在外面。 根因是 #193(5802048c3「Codex/agent chat layout fix」)重写这块布局时: - 给 .game-workbench-chat .project-supervisor-conversation 加了 display: block, 杀死它从基础规则继承的 display: grid,行模板 minmax(340px,1fr) auto auto auto 整个失效; - 把消息列表从 flex: 1 1 auto 改成 height: 100%,于是它独吞整列高度; - 删掉了 .game-workbench-chat .project-supervisor-composer 的 4 条规则,所以列表 上那条 padding-bottom: 196px(本意是给「浮起来的输入框」留位)从来没有对应的 定位规则,那个模型压根没成立过。 容器又是 overflow: hidden,所以排在列表后面的成员全部被无声裁掉。 只给策划链路恢复:`:has(.plan-gdd-surface)` 仅在策划面在场时命中,做游戏与做素材 保持 master 的 block 列原样不动。用 flex 列而不是 grid——子元素个数随「待确认命令」 的有无浮动,固定行模板会错位;而且既有的 .plan-gdd-surface { flex: 0 0 auto } 本来 就是照 flex 写的,容器变成 flex 之后它才第一次真正生效,此前一直是死声明。 另加 overflow-y: auto 兜底:审批卡展开到 52dvh 且窄条同时在场时理论上仍可能超出, 届时给滚动条而不是继承裁剪。这个 bug 的全部代价都来自「悄悄裁掉」。 顺带补一条 appSurface 用例,覆盖「首页做方案 → 自动建项目 → 自动投递 → 工作台出 澄清卡」这条此前零覆盖的路径。必须说明:它拦不住本次这类问题——jsdom 没有布局引擎, 高度恒为 0,裁剪与溢出对它天然不可见。它守的是数据流,不是版面。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>当前 head 仍有 1 个移动端功能阻塞和 1 个守门测试漏检,请修复后重新请求评审。此前关于 GDD hydrate 未完成时布局仍被裁剪的问题已由
763f4b5b4修复,本次不再保留该 finding。@@ -7212,0 +7605,4 @@/* 上面 24dvh/240px 的天花板是给做游戏链路常驻的调试面板设的。策划链路的窄条只在需要用户动手时出现(澄清卡 / 失败恢复),内容是要读完再回答的题面,给它和审批卡同级的空间。 */.game-workbench-chat .planning-lane-runtime-strip {[P1] 请保留移动端对策划窄条高度上限的解除。
@media (max-width: 760px)已在上方把.agent-runtime-status设为max-height: none; overflow: visible,但这条同权重且位于 media 之后的规则又把窄条限制为52dvh,同时继续保留overflow: visible。窄屏下多题或多选项会改成单列并超过该高度;溢出内容不占 flex 布局高度,后面的输入框会按截断后的盒子位置排布并覆盖题目/提交区。请把恢复段放回移动端规则之前,或在末尾补完整的窄屏 override(高度和 overflow 语义一致);再用<=760px的真实浏览器视口构造超高澄清卡,断言卡片与 composer 的 bounding rect 不重叠且提交按钮可见可点。根本不在移动端运行
@@ -524,0 +546,4 @@for (const match of componentSources.matchAll(/className=(?:"([^"]+)"|\{`([^`]+)`\})/g,)) {const literal = (match[1] ?? match[2] ?? '').replace(/\$\{[^}]*\}/g, ' ');[P2] 这个类名守门会漏掉条件类并产生子串误报。这里把模板中的
${...}整段替换为空,因此plan-gdd-surface--with-card永远不会进入referencedClasses;后面的styles.includes(.+ name)也不能证明存在该类的精确 selector。当前删除.plan-gdd-surface--with-card .plan-gdd-stage-progress的唯一规则时,本测试仍可通过。请显式覆盖条件类,并用 CSS selector AST/精确 selector 匹配,或按状态渲染后做 computed-style/布局断言;补一个删除该唯一规则就会失败的负向回归。已修复
这条守门是为「#193 把策划选择器整段误删」设的,但它自己有两处会放行: 一、条件类进不了清单。抽取时 `.replace(/\$\{[^}]*\}/g, ' ')` 把插值整段丢掉,而两个 组件里唯一的条件类恰好长在插值里:``plan-gdd-surface${showCard ? ' …--with-card' : ''}``。 清单 25 个类里没有 `plan-gdd-surface--with-card`。它不是装饰性的: `.game-workbench-chat .plan-gdd-surface--with-card` 的 `grid-template-rows: auto minmax(0, 1fr)` 是审批卡内滚的边界,策划面自己是 `display: grid` + `overflow: hidden` 的外壳,删掉这条,批准后的交付行连同路径和两个按钮会被切在壳外。实测把该类的两条 规则整段删掉,改前的测试照样绿。 改成只取插值里的字符串字面量——三元的条件和变量名不是类名,不能混进清单。清单 25 → 26,新进的正是 `plan-gdd-surface--with-card`,没有杂质。 二、`styles.includes('.' + name)` 是子串匹配,`.gdd-approval-card__header` 可以冒充 `.gdd-approval-card` 的存在证据。改成要求类名后面不再跟类名字符。当前 26 个类逐一 校验都有精确 selector,所以这一处堵的是潜在放行,不是正在掩盖的缺失。 另按评审要求补一条负向钉子:单独钉住上面那条承重的行模板。存在性检查只要 `--with-card` 还剩任意一条规则就绿,而两条里只有它是承重的。 三条负向都已验证非空转:删两条规则 → 红;只删承重那条留下分隔线 → 红;把 `.gdd-approval-card__details` 改名只留派生类 → 红(改前用 includes 会绿)。 评审同时建议做 computed-style/布局断言,这里没做:appSurface 跑 jsdom,没有布局引擎, 且这套 suite 不把 styles.css 挂进 DOM。要真断言得换真实浏览器 runner,是另一件事。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>