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

2026-09-15T19:00:34+08:00

WorkBuddy commented

2026-09-15 19:00:34 +08:00

背景

本次改动分两部分：修复一个潜伏的 P0 配置缺陷，以及按「清爽专业风」做的设计系统重构。

🔴 关键修复：Tailwind 此前从未生效

frontend/postcss.config.js 里误写入的是 Tailwind 的配置对象（content / theme / plugins），而非 PostCSS 的插件注册 —— 缺少 plugins 字段，导致 PostCSS 从未加载 tailwindcss。

后果：代码里所有 Tailwind 工具类一直都是无效字符串，页面只跑浏览器默认样式。这是原始提交就存在的问题。

证据：修复后构建产物 CSS 从 1.81 kB → 24.66 kB，且不再残留未编译的 @tailwind / @apply / @layer 指令。

改动内容

tailwind.config.js — 设计令牌：brand 11 档蓝色阶、ink 11 档冷灰色阶、win/draw/loss 语义色、中文字体栈、tabular-nums 数字等宽、2xs 字号、card/pill 圆角、三级阴影、fade-up/shimmer 动画
index.css — @layer base（全局背景/字色、统一焦点环、自定义滚动条、尊重 prefers-reduced-motion）+ @layer components（.card / .btn / .field / .pill / .skeleton / .segment）
App.tsx — SVG 队徽替代 emoji、粘性毛玻璃顶栏、服务状态指示、页脚免责声明
Matches.tsx — 全面重写（366 → 740 行）。新增 TeamMark（队名哈希色相队标）、EdgeBar（home_edge 双向可视化）、OutcomeCard、AgentCard、SkeletonRows、SVG Spinner

一并修复的可用性问题

emoji 转圈 → SVG Spinner
移动端横向溢出：比赛行改为 flex-col → sm:flex-row
胜平负与比分各自独立的可视化条
no_data / error / parse_error 专家卡片给出明确中文说明（原本空白，看起来像 bug）

验证

tsc --noEmit（strict: true）0 错误
vite build 通过
360 / 390 / 414 / 768 / 1280px 五档实测 scrollWidth === viewport，零横向溢出
前端类型与后端 Pydantic schema 字段逐项对齐；API 路径 /api/v1/matches、/api/v1/predict 与后端 APIRouter(prefix="/api/v1") 一致
保留原有契约：loadSeq / predictSeq 竞态防护、游标分页、全部类型定义

合入后仍建议做的验证

后端 P0 修复（此前 4 个 commit）需要在有 PostgreSQL 的环境做一次运行时验证，本机无 PG 实例，尚未完成。

## 背景本次改动分两部分：修复一个**潜伏的 P0 配置缺陷**，以及按「清爽专业风」做的设计系统重构。 ## 🔴 关键修复：Tailwind 此前从未生效 `frontend/postcss.config.js` 里误写入的是 **Tailwind 的配置对象**（`content` / `theme` / `plugins`），而非 PostCSS 的插件注册 —— 缺少 `plugins` 字段，导致 PostCSS 从未加载 `tailwindcss`。 **后果**：代码里所有 Tailwind 工具类一直都是无效字符串，页面只跑浏览器默认样式。这是原始提交就存在的问题。 **证据**：修复后构建产物 CSS 从 **1.81 kB → 24.66 kB**，且不再残留未编译的 `@tailwind` / `@apply` / `@layer` 指令。 ## 改动内容 - **`tailwind.config.js`** — 设计令牌：brand 11 档蓝色阶、ink 11 档冷灰色阶、win/draw/loss 语义色、中文字体栈、tabular-nums 数字等宽、2xs 字号、card/pill 圆角、三级阴影、fade-up/shimmer 动画 - **`index.css`** — `@layer base`（全局背景/字色、统一焦点环、自定义滚动条、尊重 `prefers-reduced-motion`）+ `@layer components`（`.card` / `.btn` / `.field` / `.pill` / `.skeleton` / `.segment`） - **`App.tsx`** — SVG 队徽替代 emoji、粘性毛玻璃顶栏、服务状态指示、页脚免责声明 - **`Matches.tsx`** — 全面重写（366 → 740 行）。新增 `TeamMark`（队名哈希色相队标）、`EdgeBar`（home_edge 双向可视化）、`OutcomeCard`、`AgentCard`、`SkeletonRows`、SVG `Spinner` ## 一并修复的可用性问题 - emoji 转圈 → SVG Spinner - 移动端横向溢出：比赛行改为 `flex-col → sm:flex-row` - 胜平负与比分各自独立的可视化条 - `no_data` / `error` / `parse_error` 专家卡片给出明确中文说明（原本空白，看起来像 bug） ## 验证 - `tsc --noEmit`（`strict: true`）**0 错误** - `vite build` 通过 - 360 / 390 / 414 / 768 / 1280px 五档实测 `scrollWidth === viewport`，**零横向溢出** - 前端类型与后端 Pydantic schema 字段逐项对齐；API 路径 `/api/v1/matches`、`/api/v1/predict` 与后端 `APIRouter(prefix="/api/v1")` 一致 - 保留原有契约：`loadSeq` / `predictSeq` 竞态防护、游标分页、全部类型定义 ## 合入后仍建议做的验证后端 P0 修复（此前 4 个 commit）需要在有 PostgreSQL 的环境做一次运行时验证，本机无 PG 实例，尚未完成。

WorkBuddy added 3 commits 2026-09-15 19:00:34 +08:00

fix(frontend): 修复 postcss 配置误写导致 Tailwind 从未生效 acea7e699d

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 指令。

feat(ui): 清爽专业风设计系统与界面重构 77d01450b1

设计令牌(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,零横向溢出。

chore: 忽略本地审查/预览脚手架 e3cacc35e4

.tools/ 与 .preview/ 为本机校验脚本与截图产物,不参与构建,不入库。

shangfangjian merged commit 29e718962f into main

2026-09-15 19:01:23 +08:00

shangfangjian deleted branch frontend-beautify

2026-09-15 19:01:23 +08:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: shangfangjian/Profeto#1