 WorkBuddy
|
77d01450b1
|
feat(ui): 清爽专业风设计系统与界面重构
设计令牌(tailwind.config.js):
- brand 11 档蓝色阶、ink 11 档冷灰色阶、win/draw/loss 语义色
- 中文字体栈、tabular-nums 数字等宽、2xs 字号
- borderRadius card/pill、boxShadow card/raise/focus、fade-up/shimmer 动画
组件层(index.css):
- @layer base: 全局背景/字色/抗锯齿、统一焦点环、自定义滚动条,
尊重 prefers-reduced-motion
- @layer components: .card .btn .field .pill .skeleton .segment
界面:
- App.tsx: SVG 队徽替代 emoji、sticky 毛玻璃头部、服务状态指示、页脚免责声明
- Matches.tsx: 比赛列表卡片化;新增 TeamMark(队名哈希色相队标)、
EdgeBar(home_edge 双向可视化)、OutcomeCard、AgentCard(状态徽章+证据
列表+无数据说明)、骨架屏;SVG Spinner 替代 emoji 转圈
可用性修复:
- 预测面板拆为独立的胜平负/置信度/模式/耗时卡片,胜平负与比分各有
独立可视化条
- 移动端横向溢出:比赛行改为 flex-col -> sm:flex-row,元信息与操作按钮重排
- 无数据专家卡片补充说明文案,不再空白
保留原有契约:loadSeq/predictSeq 竞态防护、游标分页、全部类型定义。
验证:tsc --noEmit(strict)0 错误;vite build 成功;
360/390/414/768/1280px 五档实测 scrollWidth === viewport,零横向溢出。
|
2026-09-15 17:45:16 +08:00 |
|