feat(frontend): add a warm dark theme and close the DESIGN.md drift
The palette is restated for dark rather than inverted: elevation reads through lightness on dark and through darkness on light, so the floor is the darkest surface here and the second-lightest there. The clay hue is kept and lifted, because #85432f is 2.1:1 on a dark ground. All 37 themeable tokens are covered, in an OS-preference block and a data-theme block that a contract test keeps identical, and ink, action, danger, success and warning are asserted at 4.5:1 against the dark canvas. Four raw colors that would have stayed light-theme values are tokenised (the avatar hairline, the sheen sweep, a one-off shadow, a literal warning hex). The QR keeps literal white in both themes, since scanners need light modules to be light, and print keeps white paper. The four root boundary pages cannot read a token, so they restate the handful they need in both themes. forbidden.tsx also stops painting a bespoke near-black page in four colours that appear nowhere in the palette, which broke the rule that dark ink is never a page-scale surface. Also fixes what the audit found in DESIGN.md itself: two ink values that had drifted from the code, a motion tier documented at 360ms that was never implemented, a breakpoint section claiming three tiers where the stylesheet has eleven, an undocumented report-paper palette, and an admin section describing a bespoke panel that antd + Refine replaced. Five zero-reference admin rules go with it. The sidebar gets the accent, opaque drawer, heading rank and empty-state guidance settled earlier, and fenced code blocks finally get a container. BUG-439. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0155nFCgCHtoA7jhSDGmZmMu
This commit is contained in:
@@ -6719,3 +6719,19 @@
|
||||
- 复发自:无
|
||||
- 修复版本:待发布
|
||||
|
||||
## BUG-439 | 回答里的围栏代码块没有任何样式,长代码行撑破消息栏
|
||||
|
||||
- 状态:resolved
|
||||
- 首次发现:2026-08-29
|
||||
- 最近更新:2026-08-29
|
||||
- 影响面:`/` 主对话中 Agent 回答里的 ``` 围栏代码块
|
||||
- 用户现象:代码块没有容器,行内代码的小胶囊底色套在整块代码上;一行长代码不换行也不滚动,直接溢出消息栏,移动端会把版面顶横。
|
||||
- 触发条件:回答里出现围栏代码块。
|
||||
- 根因:`globals.css` 只有 `.message-markdown code`(行内胶囊),**没有任何 `pre` 规则**。react-markdown 输出的裸 `<pre>` 保留浏览器默认的 `white-space: pre` 且无 `overflow`,内容宽度不受 `.message-content` 的 `max-width` 约束。`.message-content` 上的 `min-width: 0` 只能让 flex 收缩,挡不住块内溢出。
|
||||
- 修复:新增 `MarkdownCodeBlock` 组件接管 `pre`,输出「语言标签 + 复制按钮」的头条和可横向滚动的代码区;`.markdown-code pre > code` 设 `overflow-x: auto` 并重置行内胶囊底色,容器 `overflow: hidden` 收住圆角。未引入语法高亮依赖。
|
||||
- 验证:`frontend/tests/markdown-code-block-contract.test.ts` 锁 `overflow-x: auto` 与 `white-space: pre` 必须同时存在、胶囊底色必须重置、`pre` 必须走该组件、复制按钮有 aria-label、剪贴板被拒时不得误显示「已复制」、卸载时清定时器。
|
||||
- 防复发:给 markdown 新增块级元素时必须同时给出容器与溢出策略;行内与块级代码的样式不得共用一条规则。
|
||||
- 相关记录:BUG-434
|
||||
- 复发自:无
|
||||
- 修复版本:待发布
|
||||
|
||||
|
||||
Reference in New Issue
Block a user