fix(reports): header 「生成报告」 joins the report disabled-button rule (BUG-1078)

The generate button renders in SecondaryPageShell's actions slot, outside the
report roots, so while submitting it still got the global 45% fade. A
report-owned `report-center-generate` class brings it into the disabled rule;
SecondaryPageShell and button.tsx unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017eEAG8HD3mm8gsKXgk8uU8
This commit is contained in:
Jesse_Chen
2026-09-28 15:54:53 +08:00
co-authored by Claude Opus 5.5
parent 873fac8a5b
commit 36fae8fabf
6 changed files with 24 additions and 6 deletions
+2 -2
View File
@@ -14505,8 +14505,8 @@
- 现象:产品转述真机反馈:导出按钮黑字配深红色背景,看着不舒服。
- 触发条件:浅色主题打开分块导出,「导出选中」是近黑字 #1d1d1f 在 #a9583e 上(3.33:1);深色主题是 #f2f0ea 在 #d78064 上(2.57:1)。未勾选时按钮再被整体淡到 45%。套餐选中态用 `--color-action-soft`,深色下是 #3a2620 深红褐。
- 根因:`globals.css` 顶部未分层的 `button { color: inherit; }` 与 `button:disabled { opacity: .45; }` 压过 Tailwind v4 放在 `@layer utilities` 里的 `text-primary-foreground` 与 `disabled:opacity-50`(未分层声明总是赢分层声明,与选择器权重无关)。所以 `variant="default"` 的 `<button>` 标签颜色一直是继承的正文色,而不是设计的 `--color-on-dark`。`<Button render={<Link/>}>` 渲染为 `<a>`,不受影响,所以「去登录」这类链接按钮一直是对的。实证:本地 `next build` 产出的 CSS + 无头 Chrome 取 `getComputedStyle`,基线「导出选中 (3)」浅色 `color: rgb(29, 29, 31)`、深色 `rgb(242, 240, 234)`(样张与数值见 PROGRESS)。任务书起初判断为「深色主题下近黑字」,按实测更正。
- 修复(产品 2026-09-28 拍板:只改我的报告,不改全站):`globals.css` 新增一段只挂在四个报告根类下的按钮规则,实心按钮(`[data-slot="button"][class~="bg-primary"]`)自己声明底色与标签色:浅色 #fbfaf7 on #a9583e(4.85:1,hover 同原 `bg-primary/80`);深色 `--color-ink` #f2f0ea on `--color-action-on-dark` #8f4a33(5.77:1),hover 混 6% ink(5.1:1)。禁用态(任何变体)= `--color-canvas-strong` 底 + `--color-ink-tertiary` 字、`opacity: 1`。套餐选中态改 `--color-canvas-muted` 底 + `--color-ink` 字 + `--color-ink-secondary` 边。`button.tsx`、全局 `button` 规则与全部主题 token 未改。
- 验证:`frontend/tests/report-buttons-scope-20260928.test.ts`(5 条):`button.tsx` 变体 / 禁用淡出 / `data-slot` 原样;三处主题块相关 token 原值;所有 `[data-slot="button"]` 覆盖规则都以报告作用域开头、两条深色路径各一处、样式表不定义 `.bg-primary`;前后对比度(前 < 4.5、后 ≥ 4.5)且覆盖规则自己设 `color`;套餐选中态不再用 action-soft。`class-name-definition-contract`、`dark-theme-contract`、`design-token-contract`、`report-export-drawer` 仍绿。无头 Chrome 计算样式:新版浅色「导出选中 (3)」`rgb(251, 250, 247)` on `rgb(169, 88, 62)`,深色 `rgb(242, 240, 234)` on `rgb(143, 74, 51)`;禁用 opacity 1;报告范围外对照按钮与基线一致。
- 修复(产品 2026-09-28 拍板:只改我的报告,不改全站):`globals.css` 新增一段只挂在四个报告根类下的按钮规则,实心按钮(`[data-slot="button"][class~="bg-primary"]`)自己声明底色与标签色:浅色 #fbfaf7 on #a9583e(4.85:1,hover 同原 `bg-primary/80`);深色 `--color-ink` #f2f0ea on `--color-action-on-dark` #8f4a33(5.77:1),hover 混 6% ink(5.1:1)。禁用态(任何变体)= `--color-canvas-strong` 底 + `--color-ink-tertiary` 字、`opacity: 1`。套餐选中态改 `--color-canvas-muted` 底 + `--color-ink` 字 + `--color-ink-secondary` 边。`button.tsx`、全局 `button` 规则与全部主题 token 未改。页头「生成报告」(`SecondaryPageShell` 的 `actions` 槽,在四个根类之外)加报告自有类 `report-center-generate` 并入禁用规则,提交中「正在创建…」同样是灰底、不淡出;`SecondaryPageShell` 未改。
- 验证:`frontend/tests/report-buttons-scope-20260928.test.ts`(6 条,含「生成报告」挂钩):`button.tsx` 变体 / 禁用淡出 / `data-slot` 原样;三处主题块相关 token 原值;所有 `[data-slot="button"]` 覆盖规则都以报告作用域开头、两条深色路径各一处、样式表不定义 `.bg-primary`;前后对比度(前 < 4.5、后 ≥ 4.5)且覆盖规则自己设 `color`;套餐选中态不再用 action-soft。`class-name-definition-contract`、`dark-theme-contract`、`design-token-contract`、`report-export-drawer` 仍绿。无头 Chrome 计算样式:新版浅色「导出选中 (3)」`rgb(251, 250, 247)` on `rgb(169, 88, 62)`,深色 `rgb(242, 240, 234)` on `rgb(143, 74, 51)`;禁用 opacity 1;报告范围外对照按钮与基线一致。
- 防复发:报告页按钮颜色只在这段作用域规则里改。全站其它实心 `<button>` 仍有同一问题(浅色 3.33:1、深色 2.57:1):要修应另立单,在全局 `button { color: inherit; }` 或 `Button` 组件层面解决,并逐页截图;不要把这段报告作用域规则挪成全局。
- 相关记录:BUG-738(action 两档对比度)、BUG-1018 / 1019(分块导出);`TASK-chart-types-and-report-buttons-20260928` T7。
- 复发自:无
@@ -73,3 +73,8 @@
## 交给 Claude 的范围外发现
- 全站所有渲染为 `<button>` 的实心 `Button`(报告范围外)都有同一问题:浅色近黑字 on #a9583e(3.33:1)、深色浅字 on #d78064(2.57:1),禁用时再淡到 45%。根因是 `globals.css` 未分层的 `button { color: inherit; }` / `button:disabled { opacity: .45 }` 压过 Tailwind 工具类。需要产品决定是否另立单。
## 追加(Claude 复核后补漏)
- 页头「生成报告」渲染在 `SecondaryPageShell` 的 `actions` 槽(`personal-report-center.tsx`),在报告根类之外,提交中(禁用、「正在创建…」)仍被全局 `button:disabled { opacity: .45 }` 淡掉。给该按钮加报告自有类 `report-center-generate`,并入同一条禁用规则;`SecondaryPageShell`、`button.tsx` 未改。无头 Chrome 计算样式:opacity 1、底 225,222,214、字 106,105,99(浅色)。
- `report-buttons-scope-20260928.test.ts` +1 条(按钮带挂钩类、`disabled={submitting}` 仍在、`SecondaryPageShell` 不含 report 类),禁用规则断言改为含该选择器。复跑:tsc 0;lint 0 error / 127 warning;相关 6 个测试文件 45 / 45 通过、0 cancelled。