design: 全站设计打磨(语义色 token/弹窗动效与无障碍/报头收敛/交互小项) #19

2026-09-22T16:56:43+08:00

WorkBuddy commented

2026-09-22 16:56:43 +08:00

背景

全站设计评审(前台+后台,交互/动效/配色/布局)后按清单逐项落地,评审基线 30/40。

1. 确定性 bug 修复

预测结果面板反引号原样显示:模板字符串直写 JSX,改包 {}
btn-outline 从未定义:三处在用却无此类,样式静默失效——已补定义
空态跳后台用 <a href>:改 <Link>,不再整页刷新

2. 语义色 token 化

tailwind 新增 ok / warn / bad 三组状态色,色相降饱和贴近墨色印刷感;纸底文字级对比度 ≥4.5:1(WCAG AA)
全量替换裸 tailwind 原色:Standings 分区与走势点、净胜球、KeyRing、定时任务、任务状态点、数据完整性进度条、预测命中标记——「成功/警告/负面」三种语义从此一个来源

3. 报头收敛

Masthead 组件统一 HomePage/StandingsLayout 双份复制实现(导航项已漂移)
当前版面印报红高亮 + aria-current;⚙ 字符改线条 SVG;管理入口加 title 提示需登录

4. 预测弹窗打磨(核心场景)

入场动画:遮罩淡入 0.18s + 面板上浮 0.2s(仅 opacity/transform)
无障碍:初始聚焦 + Tab 焦点陷阱 + 关闭还焦 + 背景滚动锁定
「关闭窗口即取消」→ 如实描述(前端停显示,后台任务可能仍在消耗额度)

5. 组件与布局小项

回到顶部按钮收敛为共享 BackTop,去 rounded-full/shadow-lg 对齐全站方角语言
联赛 tab 溢出右缘渐隐提示 + aria-current
状态行右侧计数组加细线分隔

验证

tsc --noEmit 0 错误 · vite build 通过(gzip 93KB) · node http 测试 7 passed · 远端 SHA 已 ls-remote 核对

## 背景全站设计评审(前台+后台,交互/动效/配色/布局)后按清单逐项落地,评审基线 30/40。 ## 1. 确定性 bug 修复 - **预测结果面板反引号原样显示**:模板字符串直写 JSX,改包 `{}` - **btn-outline 从未定义**:三处在用却无此类,样式静默失效——已补定义 - **空态跳后台用 `<a href>`**:改 `<Link>`,不再整页刷新 ## 2. 语义色 token 化 - tailwind 新增 `ok / warn / bad` 三组状态色,色相降饱和贴近墨色印刷感;纸底文字级对比度 ≥4.5:1(WCAG AA) - 全量替换裸 tailwind 原色:Standings 分区与走势点、净胜球、KeyRing、定时任务、任务状态点、数据完整性进度条、预测命中标记——「成功/警告/负面」三种语义从此一个来源 ## 3. 报头收敛 - `Masthead` 组件统一 HomePage/StandingsLayout 双份复制实现(导航项已漂移) - 当前版面印报红高亮 + `aria-current`;⚙ 字符改线条 SVG;管理入口加 title 提示需登录 ## 4. 预测弹窗打磨(核心场景) - 入场动画:遮罩淡入 0.18s + 面板上浮 0.2s(仅 opacity/transform) - 无障碍:初始聚焦 + Tab 焦点陷阱 + 关闭还焦 + 背景滚动锁定 - 「关闭窗口即取消」→ 如实描述(前端停显示,后台任务可能仍在消耗额度) ## 5. 组件与布局小项 - 回到顶部按钮收敛为共享 `BackTop`,去 rounded-full/shadow-lg 对齐全站方角语言 - 联赛 tab 溢出右缘渐隐提示 + `aria-current` - 状态行右侧计数组加细线分隔 ## 验证 tsc --noEmit 0 错误 · vite build 通过(gzip 93KB) · node http 测试 7 passed · 远端 SHA 已 ls-remote 核对

WorkBuddy added 3 commits 2026-09-22 16:56:43 +08:00

feat(design): ok/warn/bad 语义色 token + btn-outline + 弹窗动效 keyframes b9beddacf7

- tailwind 新增语义状态色三组(纸底文字级 600/700 对比度 ≥4.5:1,AA),
  色相降饱和贴近墨色印刷感;后续替换全部裸 tailwind 原色(emerald/amber/rose)
- 补 btn-outline 定义:此前三处使用但从未定义,样式静默失效
- 弹窗入场动画 keyframes:遮罩淡入 0.18s + 面板上浮 0.2s,仅 opacity/transform

refactor(frontend): 报头抽组件 Masthead + 回到顶部抽组件 BackTop 9c77efaa4b

- Masthead:统一 HomePage/StandingsLayout 双份复制实现,当前版面
  印报红高亮 + aria-current;⚙ 字符改线条 SVG;管理类入口加 title
  提示需登录,访客不再被无声踢到登录页
- BackTop:两页各一份的浮动按钮收敛为共享组件,去 rounded-full/
  shadow-lg,与全站方角无阴影语言对齐

fix+polish(frontend): 预测弹窗打磨 + 全量语义色替换 + 前台交互小项 83a1eed283

预测弹窗:
- 修复模板字符串直写 JSX,反引号原样显示在结果面板的 bug
- 入场动画(遮罩淡入+面板上浮);初始聚焦/Tab 焦点陷阱/关闭还焦;
  打开时锁定背景滚动
- 「关闭窗口即取消」→ 如实描述:前端仅停止进度显示,后台任务
  可能仍在执行并消耗额度

语义色:全部 emerald/amber/rose 裸色替换为 ok/warn/bad token
(Standings 分区与走势、KeyRing、定时任务、任务状态点、
数据完整性进度条、预测命中标记、净胜球)。

前台交互:
- 空态跳后台 a[href] → Link,不再整页刷新
- 联赛 tab 溢出右缘渐隐提示 + aria-current
- 状态行右侧计数组加细线分隔,小屏 wrap 后层级仍清晰

WorkBuddy merged commit f00bf71e8f into main

2026-09-22 17:46:07 +08:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: shangfangjian/Profeto#19