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,零横向溢出。
84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// 品牌主色:偏冷的蓝,比默认 blue-600 更沉稳,适合数据产品
|
|
brand: {
|
|
50: '#EFF6FF',
|
|
100: '#DBEAFE',
|
|
200: '#BFDBFE',
|
|
300: '#93C5FD',
|
|
400: '#60A5FA',
|
|
500: '#3B82F6',
|
|
600: '#2563EB',
|
|
700: '#1D4ED8',
|
|
800: '#1E40AF',
|
|
900: '#1E3A8A',
|
|
950: '#172554',
|
|
},
|
|
// 中性色:带一点冷调,避免纯灰显得脏
|
|
ink: {
|
|
50: '#F8FAFC',
|
|
100: '#F1F5F9',
|
|
200: '#E2E8F0',
|
|
300: '#CBD5E1',
|
|
400: '#94A3B8',
|
|
500: '#64748B',
|
|
600: '#475569',
|
|
700: '#334155',
|
|
800: '#1E293B',
|
|
900: '#0F172A',
|
|
},
|
|
// 语义色:状态徽章 / 提示条统一走这套
|
|
win: { bg: '#ECFDF5', fg: '#047857', line: '#A7F3D0' },
|
|
draw: { bg: '#FFFBEB', fg: '#B45309', line: '#FDE68A' },
|
|
loss: { bg: '#FEF2F2', fg: '#B91C1C', line: '#FECACA' },
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'ui-sans-serif',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'"PingFang SC"',
|
|
'"Hiragino Sans GB"',
|
|
'"Microsoft YaHei"',
|
|
'sans-serif',
|
|
],
|
|
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Consolas', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
// 多一档 2xs,给徽章/元信息用
|
|
'2xs': ['11px', { lineHeight: '16px' }],
|
|
},
|
|
borderRadius: {
|
|
card: '12px',
|
|
pill: '9999px',
|
|
},
|
|
boxShadow: {
|
|
// 卡片阴影:极浅,靠层次而非重影提升
|
|
card: '0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06)',
|
|
raise: '0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 6px -2px rgb(15 23 42 / 0.04)',
|
|
focus: '0 0 0 3px rgb(37 99 235 / 0.15)',
|
|
},
|
|
keyframes: {
|
|
'fade-up': {
|
|
'0%': { opacity: '0', transform: 'translateY(4px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
shimmer: {
|
|
'0%': { backgroundPosition: '-200% 0' },
|
|
'100%': { backgroundPosition: '200% 0' },
|
|
},
|
|
},
|
|
animation: {
|
|
'fade-up': 'fade-up 0.22s ease-out both',
|
|
shimmer: 'shimmer 1.4s linear infinite',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|