diff --git a/docs/BUG_HISTORY.md b/docs/BUG_HISTORY.md index 5144ebc0..71069d28 100644 --- a/docs/BUG_HISTORY.md +++ b/docs/BUG_HISTORY.md @@ -697,3 +697,19 @@ - 相关记录:BUG-039、BUG-040 - 复发自:无 - 修复版本:本次自动滚动修复提交 + +## BUG-042 | 生时校正沿用系统滚动条导致视觉割裂 + +- 状态:resolved +- 首次发现:2026-07-23 +- 最近更新:2026-07-23 +- 影响面:生时校正独立消息列表的桌面端滚动反馈 +- 用户现象:生时校正右侧直接显示浏览器或操作系统默认滚动条,与站内温和、低对比的编辑式界面不一致。 +- 触发条件:生时校正历史内容超过消息区高度,在桌面浏览器出现纵向滚动条。 +- 根因:`.rectification-message-list` 只声明了 `overflow-y: auto`,没有提供跨浏览器的产品内滚动条颜色、宽度和交互状态。 +- 修复:为生时校正消息区增加细宽、透明轨道、低对比圆角拇指,并在 hover 时适度加深;Firefox 使用标准 scrollbar 属性,Chromium / Safari 使用 WebKit 伪元素,颜色继续取现有设计 token。 +- 验证:CSS 契约锁定标准与 WebKit 两套样式,聚焦组件测试、目标 ESLint、production build 与生产浏览器 smoke。 +- 防复发:独立滚动容器必须复用产品 token,并同时覆盖标准 scrollbar 属性和 WebKit 伪元素;不得引入渐变、重阴影或高饱和装饰。 +- 相关记录:BUG-041 +- 复发自:无 +- 修复版本:本次简约滚动条修复提交 diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index b1de26a1..b57f7a05 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -782,7 +782,29 @@ input:disabled, select:disabled { color: var(--color-ink-tertiary); background: /* Conversational rectification shell */ .conversation.is-rectification { overflow: hidden; padding-bottom: 0; } .rectification-chat { height: 100%; min-height: 0; display: flex; flex-direction: column; color: var(--color-ink); } -.rectification-message-list { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--space-6); } +.rectification-message-list { + min-height: 0; + flex: 1; + overflow-y: auto; + overscroll-behavior: contain; + padding-bottom: var(--space-6); + scrollbar-color: color-mix(in srgb, var(--color-ink-tertiary) 46%, transparent) transparent; + scrollbar-gutter: stable; + scrollbar-width: thin; +} +.rectification-message-list::-webkit-scrollbar { width: 10px; } +.rectification-message-list::-webkit-scrollbar-track { background: transparent; } +.rectification-message-list::-webkit-scrollbar-thumb { + min-height: 40px; + border: 3px solid transparent; + border-radius: 999px; + background: color-mix(in srgb, var(--color-ink-tertiary) 42%, transparent); + background-clip: padding-box; +} +.rectification-message-list::-webkit-scrollbar-thumb:hover { + background: color-mix(in srgb, var(--color-ink-secondary) 62%, transparent); + background-clip: padding-box; +} .rectification-message-details { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); color: var(--color-ink-secondary); font-size: var(--type-caption); } .rectification-message-details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: var(--type-body-sm); font-weight: 600; } .rectification-message-details p { margin: 0 0 var(--space-2); font-size: var(--type-caption); line-height: 1.6; } diff --git a/frontend/tests/conversational-rectification-component.test.ts b/frontend/tests/conversational-rectification-component.test.ts index d2e8e37b..2e190488 100644 --- a/frontend/tests/conversational-rectification-component.test.ts +++ b/frontend/tests/conversational-rectification-component.test.ts @@ -287,6 +287,9 @@ test("pending markup and responsive CSS expose accessibility contracts", () => { assert.match(css, /\.conversation\.is-rectification[^}]*padding-bottom:\s*0/); assert.match(css, /\.rectification-chat[^}]*height:\s*100%[^}]*display:\s*flex/); assert.match(css, /\.rectification-message-list[^}]*flex:\s*1[^}]*overflow-y:\s*auto/); + assert.match(css, /\.rectification-message-list[^}]*scrollbar-width:\s*thin/); + assert.match(css, /\.rectification-message-list::\-webkit-scrollbar-thumb[^}]*background-clip:\s*padding-box/); + assert.match(css, /\.rectification-message-list::\-webkit-scrollbar-thumb:hover[^}]*color-mix/); assert.match(css, /\.rectification-message-details button[^}]*min-height:\s*44px/); assert.match(css, /\.composer:focus-within[^}]*border-color:/); assert.match(css, /\.composer textarea[^}]*border:\s*0/);