WorkBuddy
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,零横向溢出。
99 lines
2.5 KiB
CSS
99 lines
2.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
@apply bg-ink-100 text-ink-800 antialiased;
|
|
font-feature-settings: 'tnum' 1; /* 数字等宽:比分/百分比不跳动 */
|
|
}
|
|
|
|
/* 统一焦点环,键盘可达性 */
|
|
:focus-visible {
|
|
@apply outline-none ring-2 ring-brand-500/40 ring-offset-1 ring-offset-white;
|
|
}
|
|
|
|
/* 细滚动条 */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
@apply rounded-pill bg-ink-300/70;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-ink-400;
|
|
}
|
|
|
|
/* 尊重「减少动态效果」偏好 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* ── 卡片 ── */
|
|
.card {
|
|
@apply rounded-card border border-ink-200 bg-white shadow-card;
|
|
}
|
|
|
|
/* ── 按钮 ── */
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-1.5 rounded-lg px-3.5 py-2
|
|
text-sm font-medium transition-colors duration-150
|
|
disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
.btn-primary {
|
|
@apply btn bg-brand-600 text-white shadow-sm hover:bg-brand-700 active:bg-brand-800;
|
|
}
|
|
.btn-ghost {
|
|
@apply btn border border-ink-200 bg-white text-ink-700 hover:bg-ink-50 hover:border-ink-300;
|
|
}
|
|
.btn-sm {
|
|
@apply px-3 py-1.5 text-xs;
|
|
}
|
|
|
|
/* ── 表单控件 ── */
|
|
.field {
|
|
@apply rounded-lg border border-ink-200 bg-white px-3 py-2 text-sm text-ink-800
|
|
transition-colors hover:border-ink-300
|
|
focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20;
|
|
}
|
|
|
|
/* ── 状态胶囊 ── */
|
|
.pill {
|
|
@apply inline-flex items-center gap-1 rounded-pill px-2 py-0.5 text-2xs font-medium;
|
|
}
|
|
|
|
/* ── 骨架屏 ── */
|
|
.skeleton {
|
|
@apply rounded bg-gradient-to-r from-ink-200 via-ink-100 to-ink-200
|
|
bg-[length:200%_100%] animate-shimmer;
|
|
}
|
|
|
|
/* ── 分段控件(模式切换) ── */
|
|
.segment {
|
|
@apply rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-150;
|
|
}
|
|
.segment-on {
|
|
@apply bg-white text-brand-700 shadow-sm;
|
|
}
|
|
.segment-off {
|
|
@apply text-ink-500 hover:text-ink-700;
|
|
}
|
|
}
|