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,零横向溢出。
67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import { ErrorBoundary } from './components/ErrorBoundary'
|
|
import Matches from './pages/Matches'
|
|
|
|
function Logo() {
|
|
// 纯 SVG 队徽/足球图形,替代 emoji ⚽(跨平台渲染不一致)
|
|
return (
|
|
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-600 shadow-sm">
|
|
<svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="9" stroke="white" strokeWidth="1.6" />
|
|
<path
|
|
d="M12 6.2l3.1 2.2-1.2 3.6h-3.8L8.9 8.4 12 6.2z"
|
|
fill="white"
|
|
fillOpacity="0.95"
|
|
/>
|
|
<path
|
|
d="M12 3v3.2M4.2 9.6l4.7-1.2M7.1 19.4l2.9-4.6M16.9 19.4l-2.9-4.6M19.8 9.6l-4.7-1.2"
|
|
stroke="white"
|
|
strokeWidth="1.4"
|
|
strokeLinecap="round"
|
|
strokeOpacity="0.85"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<ErrorBoundary>
|
|
<div className="min-h-screen bg-ink-100">
|
|
<header className="sticky top-0 z-20 border-b border-ink-200 bg-white/85 backdrop-blur-sm">
|
|
<div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-6 py-3">
|
|
<div className="flex items-center gap-3">
|
|
<Logo />
|
|
<div className="leading-tight">
|
|
<h1 className="text-[15px] font-semibold tracking-tight text-ink-900">
|
|
先知 <span className="font-normal text-ink-400">Profeto</span>
|
|
</h1>
|
|
<p className="text-2xs text-ink-500">
|
|
LLM 多专家协作 · 足球比分预测
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span className="hidden items-center gap-1.5 sm:inline-flex">
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60" />
|
|
<span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
|
|
</span>
|
|
<span className="text-2xs font-medium text-ink-500">服务运行中</span>
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="mx-auto max-w-6xl px-6 py-6">
|
|
<Matches />
|
|
</main>
|
|
|
|
<footer className="mx-auto max-w-6xl px-6 pb-8 pt-2">
|
|
<p className="text-center text-2xs text-ink-400">
|
|
预测结果由大语言模型生成,仅供研究参考,不构成任何投注建议
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</ErrorBoundary>
|
|
)
|
|
}
|