feat(frontend): add a warm dark theme and close the DESIGN.md drift
Independent Staging Quality Gate / validate (push) Has been cancelled
Independent Staging Quality Gate / publish (push) Has been cancelled

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:
Jesse_Chen
2026-08-29 12:01:50 +00:00
parent d02fa8bbf3
commit c2d705ef6e
13 changed files with 720 additions and 69 deletions
+16
View File
@@ -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
- 复发自:无
- 修复版本:待发布