feat(ui): 清爽专业风设计系统重构,并修复 Tailwind 从未生效的配置缺陷 #1

Merged
shangfangjian merged 3 commits from frontend-beautify into main 2026-09-15 19:01:23 +08:00
3 Commits
Author SHA1 Message Date
WorkBuddy e3cacc35e4 chore: 忽略本地审查/预览脚手架
.tools/ 与 .preview/ 为本机校验脚本与截图产物,不参与构建,不入库。
2026-09-15 17:45:21 +08:00
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
WorkBuddy acea7e699d fix(frontend): 修复 postcss 配置误写导致 Tailwind 从未生效
postcss.config.js 中写入的是 Tailwind 的配置对象(content/theme/plugins),
缺少 PostCSS 插件注册所需的 plugins 字段,导致 PostCSS 从未加载 tailwindcss。
所有 className 上的 Tailwind 工具类一直是无效字符串,页面仅使用浏览器默认样式。

修复为标准写法 plugins: { tailwindcss: {}, autoprefixer: {} }。

验证:构建产物 CSS 由 1.81 kB 增至 24.66 kB,且不再残留未编译的
@tailwind / @apply / @layer 指令。
2026-09-15 17:45:10 +08:00