Compare commits
6
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
83a1eed283 | ||
|
|
9c77efaa4b | ||
|
|
b9beddacf7 | ||
|
|
432bfee8ad | ||
|
|
f1c586111f | ||
|
|
f0c1cc1491 |
@@ -3,6 +3,9 @@
|
|||||||
# production 启动时会强制校验:SECRET_KEY 非空且非弱值、鉴权已配置、DB 弱密码阻断。
|
# production 启动时会强制校验:SECRET_KEY 非空且非弱值、鉴权已配置、DB 弱密码阻断。
|
||||||
APP_ENV=development
|
APP_ENV=development
|
||||||
LOG_LEVEL=INFO
|
LOG_LEVEL=INFO
|
||||||
|
# 日志持久化:空=仅 stdout + Admin 内存日志页(重启清零);填路径则额外写滚动文件(10MB×5)。
|
||||||
|
# 本地开发示例: LOG_FILE=./logs/app.log (容器内由 compose 默认设为 /app/logs/app.log 并挂卷)
|
||||||
|
LOG_FILE=
|
||||||
API_PORT=8000
|
API_PORT=8000
|
||||||
FRONTEND_PORT=3000
|
FRONTEND_PORT=3000
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ __pycache__/
|
|||||||
.pytest_cache/
|
.pytest_cache/
|
||||||
frontend/node_modules/
|
frontend/node_modules/
|
||||||
frontend/dist/
|
frontend/dist/
|
||||||
|
logs/
|
||||||
|
|
||||||
# AI 助手上下文文件(不入库)
|
# AI 助手上下文文件(不入库)
|
||||||
CLAUDE.md
|
CLAUDE.md
|
||||||
|
|||||||
@@ -203,7 +203,7 @@ Profeto/
|
|||||||
│ │ ├── config.py # pydantic-settings 配置
|
│ │ ├── config.py # pydantic-settings 配置
|
||||||
│ │ ├── crypto.py # 加密/哈希
|
│ │ ├── crypto.py # 加密/哈希
|
||||||
│ │ ├── http_client.py # 共享 httpx 客户端
|
│ │ ├── http_client.py # 共享 httpx 客户端
|
||||||
│ │ ├── log_buffer.py # 内存日志缓冲(admin 日志页)
|
│ │ ├── log_buffer.py # 日志基础设施:内存环形缓冲(admin 日志页) + 可选文件持久化(LOG_FILE)
|
||||||
│ │ ├── runtime_config.py # DB 配置覆盖(.env → app_settings)
|
│ │ ├── runtime_config.py # DB 配置覆盖(.env → app_settings)
|
||||||
│ │ ├── scheduler.py # 进程内 cron 调度器
|
│ │ ├── scheduler.py # 进程内 cron 调度器
|
||||||
│ │ └── security_check.py # 启动安全校验
|
│ │ └── security_check.py # 启动安全校验
|
||||||
|
|||||||
@@ -28,6 +28,8 @@ services:
|
|||||||
# Fix 2: 容器内 DATABASE_URL 使用 postgres 服务名(非 localhost)
|
# Fix 2: 容器内 DATABASE_URL 使用 postgres 服务名(非 localhost)
|
||||||
# 必须覆盖 .env 中的 DATABASE_URL,因为 Settings 不读 DB_HOST/DB_PORT
|
# 必须覆盖 .env 中的 DATABASE_URL,因为 Settings 不读 DB_HOST/DB_PORT
|
||||||
DATABASE_URL: postgresql+asyncpg://${POSTGRES_USER:?POSTGRES_USER 未设置}:${POSTGRES_PASSWORD:?POSTGRES_PASSWORD 未设置}@postgres:5432/${POSTGRES_DB:-football}
|
DATABASE_URL: postgresql+asyncpg://${POSTGRES_USER:?POSTGRES_USER 未设置}:${POSTGRES_PASSWORD:?POSTGRES_PASSWORD 未设置}@postgres:5432/${POSTGRES_DB:-football}
|
||||||
|
# 日志持久化:写入挂载卷,容器重建不丢(应用内滚动 10MB×6 份封顶)
|
||||||
|
LOG_FILE: /app/logs/app.log
|
||||||
env_file: .env
|
env_file: .env
|
||||||
healthcheck:
|
healthcheck:
|
||||||
test: ["CMD-SHELL", "python -c \"import urllib.request; exit(0 if urllib.request.urlopen('http://localhost:8000/health/ready', timeout=5).status==200 else 1)\" || exit 1"]
|
test: ["CMD-SHELL", "python -c \"import urllib.request; exit(0 if urllib.request.urlopen('http://localhost:8000/health/ready', timeout=5).status==200 else 1)\" || exit 1"]
|
||||||
@@ -42,6 +44,7 @@ services:
|
|||||||
- ./src:/app/src
|
- ./src:/app/src
|
||||||
- ./alembic:/app/alembic
|
- ./alembic:/app/alembic
|
||||||
- ./alembic.ini:/app/alembic.ini
|
- ./alembic.ini:/app/alembic.ini
|
||||||
|
- applogs:/app/logs
|
||||||
|
|
||||||
frontend:
|
frontend:
|
||||||
# Fix 4: 多阶段构建 —— 先 build 静态文件,再复制到 nginx
|
# Fix 4: 多阶段构建 —— 先 build 静态文件,再复制到 nginx
|
||||||
@@ -57,3 +60,4 @@ services:
|
|||||||
|
|
||||||
volumes:
|
volumes:
|
||||||
pgdata:
|
pgdata:
|
||||||
|
applogs:
|
||||||
|
|||||||
@@ -86,6 +86,7 @@ cd frontend && npm install && npm run dev
|
|||||||
|---|---|---|---|
|
|---|---|---|---|
|
||||||
| `APP_ENV` | ❌ | `development` | `production` / `development` |
|
| `APP_ENV` | ❌ | `development` | `production` / `development` |
|
||||||
| `LOG_LEVEL` | ❌ | `INFO` | 日志级别 |
|
| `LOG_LEVEL` | ❌ | `INFO` | 日志级别 |
|
||||||
|
| `LOG_FILE` | ❌ | (空) | 日志持久化文件路径;空=仅 stdout + Admin 内存日志页(重启清零)。compose 已默认设为 `/app/logs/app.log` 并挂 `applogs` 卷,滚动上限约 10MB×6 份 |
|
||||||
| `API_PORT` | ❌ | `8000` | API 服务端口映射 |
|
| `API_PORT` | ❌ | `8000` | API 服务端口映射 |
|
||||||
| `FRONTEND_PORT` | ❌ | `3000` | 前端服务端口映射 |
|
| `FRONTEND_PORT` | ❌ | `3000` | 前端服务端口映射 |
|
||||||
| `POSTGRES_USER` | ✅ | — | PostgreSQL 用户名 |
|
| `POSTGRES_USER` | ✅ | — | PostgreSQL 用户名 |
|
||||||
|
|||||||
@@ -117,7 +117,7 @@ Profeto/
|
|||||||
│ ├── config.py # pydantic-settings 配置
|
│ ├── config.py # pydantic-settings 配置
|
||||||
│ ├── http_client.py # 共享 httpx 客户端
|
│ ├── http_client.py # 共享 httpx 客户端
|
||||||
│ ├── crypto.py # 对称加密(Fernet)与密码哈希
|
│ ├── crypto.py # 对称加密(Fernet)与密码哈希
|
||||||
│ ├── log_buffer.py # 内存日志缓冲(admin「系统日志」页)
|
│ ├── log_buffer.py # 日志基础设施:内存环形缓冲(admin 日志页) + 可选滚动文件持久化(LOG_FILE)
|
||||||
│ ├── runtime_config.py # 运行时配置(数据库优先,回落 .env)
|
│ ├── runtime_config.py # 运行时配置(数据库优先,回落 .env)
|
||||||
│ ├── scheduler.py # 定时任务调度器(cron 触发采集)
|
│ ├── scheduler.py # 定时任务调度器(cron 触发采集)
|
||||||
│ └── security_check.py # 生产启动安全校验(缺配置拒绝启动)
|
│ └── security_check.py # 生产启动安全校验(缺配置拒绝启动)
|
||||||
|
|||||||
+5
-58
@@ -11,48 +11,17 @@
|
|||||||
* - 未登录访问管理 → AdminLayout 门禁 → 登录页(不静默失败)
|
* - 未登录访问管理 → AdminLayout 门禁 → 登录页(不静默失败)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router-dom'
|
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||||
import { ErrorBoundary } from './components/ErrorBoundary'
|
import { ErrorBoundary } from './components/ErrorBoundary'
|
||||||
|
import Masthead from './components/Masthead'
|
||||||
import Matches from './pages/Matches'
|
import Matches from './pages/Matches'
|
||||||
import Standings from './pages/Standings'
|
import Standings from './pages/Standings'
|
||||||
import { adminRoutes } from './admin/routes'
|
import { adminRoutes } from './admin/routes'
|
||||||
|
|
||||||
/** 报眉日期行 */
|
|
||||||
function dateLine(): string {
|
|
||||||
return new Date().toLocaleDateString('zh-CN', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric',
|
|
||||||
weekday: 'long',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function StandingsLayout({ children }: { children: React.ReactNode }) {
|
function StandingsLayout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-paper-50">
|
<div className="min-h-screen bg-paper-50">
|
||||||
<header className="masthead-rule">
|
<Masthead active="standings" />
|
||||||
<div className="mx-auto max-w-5xl px-5 sm:px-8">
|
|
||||||
<div className="border-b border-ink-900 py-5 text-center sm:py-6">
|
|
||||||
<h1 className="font-brush text-5xl text-ink-900 sm:text-6xl">
|
|
||||||
先知
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between border-b border-ink-200 py-2 text-2xs text-ink-500">
|
|
||||||
<span>{dateLine()}</span>
|
|
||||||
<nav className="flex items-center gap-4" aria-label="页面导航">
|
|
||||||
<Link to="/" className="text-ink-500 hover:text-press transition-colors">
|
|
||||||
比赛 / 预测
|
|
||||||
</Link>
|
|
||||||
<Link to="/admin/eval" className="text-ink-500 hover:text-press transition-colors">
|
|
||||||
评估
|
|
||||||
</Link>
|
|
||||||
<Link to="/admin" className="flex items-center gap-1 text-ink-500 hover:text-press transition-colors">
|
|
||||||
<span aria-hidden="true">⚙</span> 管理
|
|
||||||
</Link>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main className="mx-auto max-w-5xl px-5 py-6 sm:px-8 sm:py-8">
|
<main className="mx-auto max-w-5xl px-5 py-6 sm:px-8 sm:py-8">
|
||||||
{children}
|
{children}
|
||||||
@@ -70,30 +39,8 @@ function StandingsLayout({ children }: { children: React.ReactNode }) {
|
|||||||
function HomePage() {
|
function HomePage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-paper-50">
|
<div className="min-h-screen bg-paper-50">
|
||||||
{/* ── 报头:粗线 + 居中刊名 + 日期与分区链接 ── */}
|
{/* ── 报头:粗线 + 居中刊名 + 日期与分区链接(共用 Masthead) ── */}
|
||||||
<header className="masthead-rule">
|
<Masthead active="home" />
|
||||||
<div className="mx-auto max-w-5xl px-5 sm:px-8">
|
|
||||||
<div className="border-b border-ink-900 py-5 text-center sm:py-6">
|
|
||||||
<h1 className="font-brush text-5xl text-ink-900 sm:text-6xl">
|
|
||||||
先知
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between border-b border-ink-200 py-2 text-2xs text-ink-500">
|
|
||||||
<span>{dateLine()}</span>
|
|
||||||
<nav className="flex items-center gap-4" aria-label="页面导航">
|
|
||||||
<Link to="/standings" className="text-ink-500 hover:text-press transition-colors">
|
|
||||||
积分榜
|
|
||||||
</Link>
|
|
||||||
<Link to="/admin/eval" className="text-ink-500 hover:text-press transition-colors">
|
|
||||||
评估
|
|
||||||
</Link>
|
|
||||||
<Link to="/admin" className="flex items-center gap-1 text-ink-500 hover:text-press transition-colors">
|
|
||||||
<span aria-hidden="true">⚙</span> 管理
|
|
||||||
</Link>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main className="mx-auto max-w-5xl px-5 py-6 sm:px-8 sm:py-8">
|
<main className="mx-auto max-w-5xl px-5 py-6 sm:px-8 sm:py-8">
|
||||||
<Matches />
|
<Matches />
|
||||||
|
|||||||
@@ -333,8 +333,8 @@ export default function CollectionPage() {
|
|||||||
)}
|
)}
|
||||||
{taskStatus === 'done' && (
|
{taskStatus === 'done' && (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex items-center gap-2 text-xs text-emerald-700">
|
<div className="flex items-center gap-2 text-xs text-ok-700">
|
||||||
<span className="inline-block h-2 w-2 rounded-full bg-emerald-500" />
|
<span className="inline-block h-2 w-2 rounded-full bg-ok-500" />
|
||||||
<span>采集完成{jobId ? `(job ${jobId.slice(0, 8)}…)` : ''}</span>
|
<span>采集完成{jobId ? `(job ${jobId.slice(0, 8)}…)` : ''}</span>
|
||||||
</div>
|
</div>
|
||||||
{summary && <p className="text-2xs text-ink-500">{summary.detail}</p>}
|
{summary && <p className="text-2xs text-ink-500">{summary.detail}</p>}
|
||||||
@@ -373,7 +373,7 @@ export default function CollectionPage() {
|
|||||||
<div>
|
<div>
|
||||||
{recentJobs.map(j => {
|
{recentJobs.map(j => {
|
||||||
const st = j.status
|
const st = j.status
|
||||||
const dot = st === 'success' ? 'bg-ink-900' : st === 'failed' ? 'bg-press' : 'bg-amber-500 animate-pulse'
|
const dot = st === 'success' ? 'bg-ink-900' : st === 'failed' ? 'bg-press' : 'bg-warn-500 animate-pulse'
|
||||||
const label = st === 'success' ? '完成' : st === 'failed' ? '失败' : st === 'running' ? '执行中' : '排队中'
|
const label = st === 'success' ? '完成' : st === 'failed' ? '失败' : st === 'running' ? '执行中' : '排队中'
|
||||||
return (
|
return (
|
||||||
<div key={j.id} className="flex items-center gap-3 border-b border-ink-200 px-4 py-2.5 last:border-b-0 sm:px-5">
|
<div key={j.id} className="flex items-center gap-3 border-b border-ink-200 px-4 py-2.5 last:border-b-0 sm:px-5">
|
||||||
|
|||||||
@@ -26,9 +26,9 @@ const FIELD_LABELS: Record<string, string> = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function pctColor(pct: number): string {
|
function pctColor(pct: number): string {
|
||||||
if (pct >= 80) return 'bg-emerald-500'
|
if (pct >= 80) return 'bg-ok-500'
|
||||||
if (pct >= 50) return 'bg-amber-500'
|
if (pct >= 50) return 'bg-warn-500'
|
||||||
return 'bg-rose-500'
|
return 'bg-bad-500'
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 根据问题描述生成可操作的修复链接 */
|
/** 根据问题描述生成可操作的修复链接 */
|
||||||
|
|||||||
@@ -90,7 +90,7 @@ export default function PredictionHistoryPage() {
|
|||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardBody className="text-center">
|
<CardBody className="text-center">
|
||||||
<p className="text-2xl font-bold text-emerald-700">{hitCount}</p>
|
<p className="text-2xl font-bold text-ok-700">{hitCount}</p>
|
||||||
<p className="text-xs text-ink-500">命中</p>
|
<p className="text-xs text-ink-500">命中</p>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -194,7 +194,7 @@ export default function PredictionHistoryPage() {
|
|||||||
<td className="px-4 py-3">
|
<td className="px-4 py-3">
|
||||||
{p.pred_1x2 ? (
|
{p.pred_1x2 ? (
|
||||||
<span className={`inline-block border px-1.5 py-0.5 text-2xs ${
|
<span className={`inline-block border px-1.5 py-0.5 text-2xs ${
|
||||||
predHit === true ? 'border-emerald-300 text-emerald-700 bg-emerald-50' :
|
predHit === true ? 'border-ok-300 text-ok-700 bg-ok-50' :
|
||||||
predHit === false ? 'border-press text-press bg-press-wash' :
|
predHit === false ? 'border-press text-press bg-press-wash' :
|
||||||
'border-ink-200 text-ink-600'
|
'border-ink-200 text-ink-600'
|
||||||
}`}>
|
}`}>
|
||||||
|
|||||||
@@ -317,11 +317,11 @@ export default function SettingsPage() {
|
|||||||
return (
|
return (
|
||||||
<div key={i} className={`flex items-center justify-between gap-3 border-b border-ink-100 py-2 last:border-b-0 ${isBlocked ? 'opacity-70' : ''}`}>
|
<div key={i} className={`flex items-center justify-between gap-3 border-b border-ink-100 py-2 last:border-b-0 ${isBlocked ? 'opacity-70' : ''}`}>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className={`inline-block h-2 w-2 rounded-full ${isBlocked ? 'bg-amber-500' : 'bg-emerald-500'}`} />
|
<span className={`inline-block h-2 w-2 rounded-full ${isBlocked ? 'bg-warn-500' : 'bg-ok-500'}`} />
|
||||||
<span className="font-mono text-xs text-ink-700">{k.masked}</span>
|
<span className="font-mono text-xs text-ink-700">{k.masked}</span>
|
||||||
{i === keyRing.active_index && <span className="rounded bg-ink-900 px-1.5 py-0.5 text-2xs text-paper-500">当前</span>}
|
{i === keyRing.active_index && <span className="rounded bg-ink-900 px-1.5 py-0.5 text-2xs text-paper-500">当前</span>}
|
||||||
</div>
|
</div>
|
||||||
<span className={`text-2xs tabular-nums ${isBlocked ? 'text-amber-600' : 'text-ink-400'}`}>
|
<span className={`text-2xs tabular-nums ${isBlocked ? 'text-warn-700' : 'text-ink-400'}`}>
|
||||||
{isBlocked ? `冷却中 ${k.blocked_remaining.toFixed(0)}s` : '可用'}
|
{isBlocked ? `冷却中 ${k.blocked_remaining.toFixed(0)}s` : '可用'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -489,7 +489,7 @@ export default function SettingsPage() {
|
|||||||
<div key={s.id} className="flex flex-col gap-2 border-b border-ink-100 py-3 last:border-b-0 sm:flex-row sm:items-center sm:justify-between">
|
<div key={s.id} className="flex flex-col gap-2 border-b border-ink-100 py-3 last:border-b-0 sm:flex-row sm:items-center sm:justify-between">
|
||||||
<div className="flex-1 space-y-1">
|
<div className="flex-1 space-y-1">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className={`inline-block h-2 w-2 rounded-full ${s.enabled ? 'bg-emerald-500' : 'bg-ink-300'}`} />
|
<span className={`inline-block h-2 w-2 rounded-full ${s.enabled ? 'bg-ok-500' : 'bg-ink-300'}`} />
|
||||||
<span className="text-xs font-medium text-ink-800">{s.id}</span>
|
<span className="text-xs font-medium text-ink-800">{s.id}</span>
|
||||||
<Badge status={s.enabled ? 'success' : 'muted'}>{s.task}</Badge>
|
<Badge status={s.enabled ? 'success' : 'muted'}>{s.task}</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,30 @@
|
|||||||
|
/**
|
||||||
|
* 回到顶部浮动按钮(前台两页共用,此前 Matches/Standings 各复制一份)。
|
||||||
|
* 方角纸片风:去掉早期版本的 rounded-full + shadow-lg,与全站方角
|
||||||
|
* 无阴影语言对齐;出现/隐藏仅动画 transform 与 opacity。
|
||||||
|
*/
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
export default function BackTop({ threshold = 300 }: { threshold?: number }) {
|
||||||
|
const [show, setShow] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => setShow(window.scrollY > threshold)
|
||||||
|
window.addEventListener('scroll', handleScroll, { passive: true })
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll)
|
||||||
|
}, [threshold])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||||||
|
className={`fixed bottom-6 right-6 z-40 flex h-10 w-10 items-center justify-center border border-ink-300 bg-paper-50 text-ink-600 transition-all duration-300 hover:border-ink-900 hover:bg-ink-900 hover:text-paper-50 ${
|
||||||
|
show ? 'translate-y-0 opacity-100' : 'pointer-events-none translate-y-4 opacity-0'
|
||||||
|
}`}
|
||||||
|
aria-label="回到顶部"
|
||||||
|
>
|
||||||
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
/**
|
||||||
|
* 报头组件(前台共用)。
|
||||||
|
*
|
||||||
|
* 此前 HomePage 与 StandingsLayout 各自复制一份报头,导航项已经漂移
|
||||||
|
* (首页有「积分榜」、积分榜页有「比赛/预测」),且无当前页高亮。
|
||||||
|
* 现在统一为 Masthead:
|
||||||
|
* - active 声明当前版面,对应导航项加印报红高亮 + aria-current
|
||||||
|
* - 「管理」入口改用与全站一致的线条 SVG(替代字符 ⚙)
|
||||||
|
* - 管理类入口带 title 提示,避免访客被无声踢到登录页
|
||||||
|
* 页脚文案各页不同,仍由调用方自行渲染。
|
||||||
|
*/
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
|
||||||
|
export type MastheadActive = 'home' | 'standings'
|
||||||
|
|
||||||
|
function GearIcon() {
|
||||||
|
return (
|
||||||
|
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
|
||||||
|
<circle cx="12" cy="12" r="3" />
|
||||||
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68 1.65 1.65 0 0 0 10 3.17V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MastheadLink({
|
||||||
|
to,
|
||||||
|
active = false,
|
||||||
|
title,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
to: string
|
||||||
|
/** 当前版面才高亮;管理类入口无高亮概念 */
|
||||||
|
active?: boolean
|
||||||
|
title?: string
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
to={to}
|
||||||
|
title={title}
|
||||||
|
aria-current={active ? 'page' : undefined}
|
||||||
|
className={`transition-colors ${
|
||||||
|
active ? 'font-medium text-press' : 'text-ink-500 hover:text-press'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Masthead({ active }: { active: MastheadActive }) {
|
||||||
|
return (
|
||||||
|
<header className="masthead-rule">
|
||||||
|
<div className="mx-auto max-w-5xl px-5 sm:px-8">
|
||||||
|
<div className="border-b border-ink-900 py-5 text-center sm:py-6">
|
||||||
|
<h1 className="font-brush text-5xl text-ink-900 sm:text-6xl">
|
||||||
|
先知
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between border-b border-ink-200 py-2 text-2xs text-ink-500">
|
||||||
|
<span>{new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' })}</span>
|
||||||
|
<nav className="flex items-center gap-4" aria-label="页面导航">
|
||||||
|
<MastheadLink to="/" active={active === 'home'}>比赛 / 预测</MastheadLink>
|
||||||
|
<MastheadLink to="/standings" active={active === 'standings'}>积分榜</MastheadLink>
|
||||||
|
{/* 管理类页面对访客需要登录,入口处先说明,避免无声跳登录页 */}
|
||||||
|
<MastheadLink to="/admin/eval" title="评估页面向管理员开放,需登录">评估</MastheadLink>
|
||||||
|
<MastheadLink to="/admin" title="管理后台,需登录">
|
||||||
|
<span className="inline-flex items-center gap-1">
|
||||||
|
<GearIcon /> 管理
|
||||||
|
</span>
|
||||||
|
</MastheadLink>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -103,6 +103,28 @@
|
|||||||
.btn-danger {
|
.btn-danger {
|
||||||
@apply border-press bg-transparent text-press hover:bg-press hover:text-paper-50;
|
@apply border-press bg-transparent text-press hover:bg-press hover:text-paper-50;
|
||||||
}
|
}
|
||||||
|
/* 描边确认按钮:次级动作中需要比默认 btn 更明确轮廓的场合
|
||||||
|
(此前三处使用但从未定义,样式静默失效) */
|
||||||
|
.btn-outline {
|
||||||
|
@apply border-ink-900 bg-transparent text-ink-900
|
||||||
|
hover:border-press hover:bg-press-wash hover:text-press-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 弹窗入场:遮罩淡入 + 面板上浮(仅 opacity/transform,GPU 友好) ── */
|
||||||
|
.modal-overlay-enter {
|
||||||
|
animation: modal-fade 0.18s ease-out both;
|
||||||
|
}
|
||||||
|
.modal-panel-enter {
|
||||||
|
animation: modal-rise 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||||
|
}
|
||||||
|
@keyframes modal-fade {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes modal-rise {
|
||||||
|
from { opacity: 0; transform: translateY(12px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
/* ── 统一空态 ── */
|
/* ── 统一空态 ── */
|
||||||
.empty-state {
|
.empty-state {
|
||||||
|
|||||||
@@ -10,9 +10,11 @@
|
|||||||
* matches/components/MatchDetailSection.tsx — 赛程行 + 展开详情
|
* matches/components/MatchDetailSection.tsx — 赛程行 + 展开详情
|
||||||
* 本文件只负责状态装配与版面组织,不含数据获取与展示细节。
|
* 本文件只负责状态装配与版面组织,不含数据获取与展示细节。
|
||||||
*/
|
*/
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useRef, useState } from 'react'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
import { fetchMatchDetail, fetchMatchContext } from '../admin/dal'
|
import { fetchMatchDetail, fetchMatchContext } from '../admin/dal'
|
||||||
import type { MatchDetailOut, MatchContextOut } from '../admin/types'
|
import type { MatchDetailOut, MatchContextOut } from '../admin/types'
|
||||||
|
import BackTop from '../components/BackTop'
|
||||||
import { useMatchesList } from './matches/hooks/useMatchesList'
|
import { useMatchesList } from './matches/hooks/useMatchesList'
|
||||||
import { useMatchPredict } from './matches/hooks/useMatchPredict'
|
import { useMatchPredict } from './matches/hooks/useMatchPredict'
|
||||||
import { useLeagues } from './matches/hooks/useLeagues'
|
import { useLeagues } from './matches/hooks/useLeagues'
|
||||||
@@ -38,13 +40,8 @@ export default function Matches() {
|
|||||||
loadMore,
|
loadMore,
|
||||||
} = useMatchesList({ onError: setError })
|
} = useMatchesList({ onError: setError })
|
||||||
|
|
||||||
const {
|
const { predictingId, prediction, predictionFor, predict, closePredict } =
|
||||||
predictingId,
|
useMatchPredict({ onError: setError })
|
||||||
prediction,
|
|
||||||
predictionFor,
|
|
||||||
predict,
|
|
||||||
closePredict,
|
|
||||||
} = useMatchPredict({ onError: setError })
|
|
||||||
|
|
||||||
// ── 详情展开(懒加载,只读,不触发 LLM) ──
|
// ── 详情展开(懒加载,只读,不触发 LLM) ──
|
||||||
const [expandedId, setExpandedId] = useState<number | null>(null)
|
const [expandedId, setExpandedId] = useState<number | null>(null)
|
||||||
@@ -52,16 +49,8 @@ export default function Matches() {
|
|||||||
const [contextMap, setContextMap] = useState<Record<number, MatchContextOut>>({})
|
const [contextMap, setContextMap] = useState<Record<number, MatchContextOut>>({})
|
||||||
const [detailLoading, setDetailLoading] = useState<number | null>(null)
|
const [detailLoading, setDetailLoading] = useState<number | null>(null)
|
||||||
|
|
||||||
// 监听滚动,超过 300px 显示回到顶部按钮
|
|
||||||
const [showBackTop, setShowBackTop] = useState(false)
|
|
||||||
useEffect(() => {
|
|
||||||
const handleScroll = () => setShowBackTop(window.scrollY > 300)
|
|
||||||
window.addEventListener('scroll', handleScroll, { passive: true })
|
|
||||||
return () => window.removeEventListener('scroll', handleScroll)
|
|
||||||
}, [])
|
|
||||||
const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
||||||
|
|
||||||
const leagueName = leagues.find(l => l.code === league)?.name ?? league
|
const leagueName = leagues.find(l => l.code === league)?.name ?? league
|
||||||
|
// 删除本地 showBackTop/scrollToTop,统一使用共享 BackTop 组件
|
||||||
|
|
||||||
/** 未开赛默认仅展示未来 3 天;其余状态展示全部。showAllUpcoming=true 时展开全部。 */
|
/** 未开赛默认仅展示未来 3 天;其余状态展示全部。showAllUpcoming=true 时展开全部。 */
|
||||||
const isScheduledView = status === 'scheduled'
|
const isScheduledView = status === 'scheduled'
|
||||||
@@ -90,20 +79,46 @@ export default function Matches() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 联赛 tab 溢出检测:可向右滚动时右缘显示渐隐提示
|
||||||
|
const leagueNavRef = useRef<HTMLDivElement>(null)
|
||||||
|
const [canScrollRight, setCanScrollRight] = useState(false)
|
||||||
|
useEffect(() => {
|
||||||
|
const el = leagueNavRef.current
|
||||||
|
if (!el) return
|
||||||
|
const update = () => setCanScrollRight(el.scrollWidth - el.scrollLeft - el.clientWidth > 8)
|
||||||
|
update()
|
||||||
|
el.addEventListener('scroll', update, { passive: true })
|
||||||
|
window.addEventListener('resize', update)
|
||||||
|
return () => {
|
||||||
|
el.removeEventListener('scroll', update)
|
||||||
|
window.removeEventListener('resize', update)
|
||||||
|
}
|
||||||
|
}, [leagues])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-5">
|
<div className="space-y-5">
|
||||||
{/* ── 联赛版面切换 ── */}
|
{/* ── 联赛版面切换 ── */}
|
||||||
<nav className="flex items-center gap-6 overflow-x-auto border-b border-ink-900" aria-label="联赛">
|
<div className="relative">
|
||||||
{leagues.map(l => (
|
<nav
|
||||||
<button
|
ref={leagueNavRef}
|
||||||
key={l.code}
|
className="flex items-center gap-6 overflow-x-auto border-b border-ink-900"
|
||||||
onClick={() => setLeague(l.code)}
|
aria-label="联赛"
|
||||||
className={`relative tab ${league === l.code ? 'tab-on' : ''} font-serif`}
|
>
|
||||||
>
|
{leagues.map(l => (
|
||||||
{l.name}
|
<button
|
||||||
</button>
|
key={l.code}
|
||||||
))}
|
onClick={() => setLeague(l.code)}
|
||||||
</nav>
|
aria-current={league === l.code ? 'true' : undefined}
|
||||||
|
className={`relative tab ${league === l.code ? 'tab-on' : ''} font-serif`}
|
||||||
|
>
|
||||||
|
{l.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
{canScrollRight && (
|
||||||
|
<div aria-hidden="true" className="pointer-events-none absolute inset-y-0 right-0 w-10 bg-gradient-to-l from-paper-50 to-transparent" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* ── 第二行:状态 / 模式 / 日期 / 计数 / 刷新(小屏 flex-wrap) ── */}
|
{/* ── 第二行:状态 / 模式 / 日期 / 计数 / 刷新(小屏 flex-wrap) ── */}
|
||||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-ink-500 sm:gap-x-5">
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-ink-500 sm:gap-x-5">
|
||||||
@@ -120,7 +135,7 @@ export default function Matches() {
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span className="ml-auto inline-flex items-center gap-3">
|
<span className="ml-auto inline-flex items-center gap-3 border-l border-ink-200 pl-4">
|
||||||
<span className="tabular-nums">
|
<span className="tabular-nums">
|
||||||
{isScheduledView && !showAllUpcoming && hasHiddenUpcoming
|
{isScheduledView && !showAllUpcoming && hasHiddenUpcoming
|
||||||
? `未来3天 ${visibleMatches.length} / 共 ${matches.length} 场`
|
? `未来3天 ${visibleMatches.length} / 共 ${matches.length} 场`
|
||||||
@@ -203,9 +218,9 @@ export default function Matches() {
|
|||||||
<>
|
<>
|
||||||
<p className="empty-state-title">本版暂无赛程</p>
|
<p className="empty-state-title">本版暂无赛程</p>
|
||||||
<p className="empty-state-sub">请先通过「数据采集」导入 {leagueName} 的比赛数据</p>
|
<p className="empty-state-sub">请先通过「数据采集」导入 {leagueName} 的比赛数据</p>
|
||||||
<a href="/admin/collection" className="empty-state-action">
|
<Link to="/admin/collection" className="empty-state-action">
|
||||||
前往数据采集 <span aria-hidden="true">→</span>
|
前往数据采集 <span aria-hidden="true">→</span>
|
||||||
</a>
|
</Link>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -265,18 +280,8 @@ export default function Matches() {
|
|||||||
)}
|
)}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* 回到顶部按钮 */}
|
{/* ── 回到顶部(共享组件,方角纸片风) ── */}
|
||||||
<button
|
<BackTop />
|
||||||
onClick={scrollToTop}
|
|
||||||
className={`fixed bottom-6 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-ink-200 bg-paper-50 text-ink-600 shadow-lg transition-all duration-300 hover:border-ink-400 hover:text-ink-900 ${
|
|
||||||
showBackTop ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0 pointer-events-none'
|
|
||||||
}`}
|
|
||||||
aria-label="回到顶部"
|
|
||||||
>
|
|
||||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { useEffect, useState, useCallback } from 'react'
|
import { useEffect, useState, useCallback } from 'react'
|
||||||
|
import BackTop from '../components/BackTop'
|
||||||
import { fetchStandings } from '../admin/dal'
|
import { fetchStandings } from '../admin/dal'
|
||||||
import type { StandingsLeague, StandingRow } from '../admin/dal'
|
import type { StandingsLeague, StandingRow } from '../admin/dal'
|
||||||
import { useLeagues } from './matches/hooks/useLeagues'
|
import { useLeagues } from './matches/hooks/useLeagues'
|
||||||
@@ -13,24 +14,24 @@ import { Spinner } from '../admin/components'
|
|||||||
|
|
||||||
const ZONE_META: Record<string, { label: string; cls: string }> = {
|
const ZONE_META: Record<string, { label: string; cls: string }> = {
|
||||||
// 欧战资格
|
// 欧战资格
|
||||||
'Champions League': { label: '欧冠区', cls: 'bg-emerald-100 text-emerald-700' },
|
'Champions League': { label: '欧冠区', cls: 'bg-ok-100 text-ok-700' },
|
||||||
'Champions League Qualification': { label: '欧冠资格', cls: 'bg-emerald-100 text-emerald-700' },
|
'Champions League Qualification': { label: '欧冠资格', cls: 'bg-ok-100 text-ok-700' },
|
||||||
'Europa League': { label: '欧联区', cls: 'bg-amber-100 text-amber-700' },
|
'Europa League': { label: '欧联区', cls: 'bg-warn-100 text-warn-700' },
|
||||||
'Conference League': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
|
'Conference League': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
|
||||||
'Conference League Qualification': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
|
'Conference League Qualification': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
|
||||||
'Europa Conference League': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
|
'Europa Conference League': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
|
||||||
'Europa Conference League Qualification': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
|
'Europa Conference League Qualification': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
|
||||||
// 升级
|
// 升级
|
||||||
'Championship': { label: '升级区', cls: 'bg-emerald-100 text-emerald-700' },
|
'Championship': { label: '升级区', cls: 'bg-ok-100 text-ok-700' },
|
||||||
'Promotion': { label: '升级区', cls: 'bg-emerald-100 text-emerald-700' },
|
'Promotion': { label: '升级区', cls: 'bg-ok-100 text-ok-700' },
|
||||||
'Promotion Group': { label: '升级组', cls: 'bg-emerald-100 text-emerald-700' },
|
'Promotion Group': { label: '升级组', cls: 'bg-ok-100 text-ok-700' },
|
||||||
// 降级
|
// 降级
|
||||||
'Relegation': { label: '降级区', cls: 'bg-rose-100 text-rose-700' },
|
'Relegation': { label: '降级区', cls: 'bg-bad-100 text-bad-700' },
|
||||||
'Relegation Playoffs': { label: '降级附加赛', cls: 'bg-orange-100 text-orange-700' },
|
'Relegation Playoffs': { label: '降级附加赛', cls: 'bg-orange-100 text-orange-700' },
|
||||||
'Relegation Group': { label: '降级组', cls: 'bg-rose-100 text-rose-700' },
|
'Relegation Group': { label: '降级组', cls: 'bg-bad-100 text-bad-700' },
|
||||||
// 附加赛
|
// 附加赛
|
||||||
'Playoffs': { label: '附加赛', cls: 'bg-amber-100 text-amber-700' },
|
'Playoffs': { label: '附加赛', cls: 'bg-warn-100 text-warn-700' },
|
||||||
'Championship Playoffs': { label: '升级附加赛', cls: 'bg-amber-100 text-amber-700' },
|
'Championship Playoffs': { label: '升级附加赛', cls: 'bg-warn-100 text-warn-700' },
|
||||||
'Qualification Playoffs': { label: '资格附加赛', cls: 'bg-sky-100 text-sky-700' },
|
'Qualification Playoffs': { label: '资格附加赛', cls: 'bg-sky-100 text-sky-700' },
|
||||||
'Qualification': { label: '资格赛', cls: 'bg-sky-100 text-sky-700' },
|
'Qualification': { label: '资格赛', cls: 'bg-sky-100 text-sky-700' },
|
||||||
}
|
}
|
||||||
@@ -44,7 +45,7 @@ function zoneBadge(zone?: string | null) {
|
|||||||
/** 近期走势串(W/D/L) → 彩色圆点 */
|
/** 近期走势串(W/D/L) → 彩色圆点 */
|
||||||
function FormDots({ form }: { form?: string | null }) {
|
function FormDots({ form }: { form?: string | null }) {
|
||||||
if (!form) return <span className="text-2xs text-ink-400">—</span>
|
if (!form) return <span className="text-2xs text-ink-400">—</span>
|
||||||
const colorMap: Record<string, string> = { W: 'bg-emerald-500', D: 'bg-ink-300', L: 'bg-rose-500' }
|
const colorMap: Record<string, string> = { W: 'bg-ok-500', D: 'bg-ink-300', L: 'bg-bad-500' }
|
||||||
return (
|
return (
|
||||||
<span className="inline-flex gap-0.5">
|
<span className="inline-flex gap-0.5">
|
||||||
{form.slice(0, 5).split('').map((c, i) => (
|
{form.slice(0, 5).split('').map((c, i) => (
|
||||||
@@ -62,17 +63,6 @@ export default function StandingsPage() {
|
|||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
const [switching, setSwitching] = useState(false) // 切换联赛中
|
const [switching, setSwitching] = useState(false) // 切换联赛中
|
||||||
const [error, setError] = useState<string | null>(null)
|
const [error, setError] = useState<string | null>(null)
|
||||||
const [showBackTop, setShowBackTop] = useState(false) // 回到顶部按钮显示态
|
|
||||||
|
|
||||||
// 监听滚动,超过 300px 显示回到顶部按钮
|
|
||||||
useEffect(() => {
|
|
||||||
const handleScroll = () => setShowBackTop(window.scrollY > 300)
|
|
||||||
window.addEventListener('scroll', handleScroll, { passive: true })
|
|
||||||
return () => window.removeEventListener('scroll', handleScroll)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
||||||
|
|
||||||
const load = useCallback(async (code?: string) => {
|
const load = useCallback(async (code?: string) => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
setError(null)
|
setError(null)
|
||||||
@@ -134,7 +124,7 @@ export default function StandingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className="border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
<div className="border border-bad-300 bg-bad-50 px-4 py-3 text-sm text-bad-700">
|
||||||
{error}
|
{error}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -202,7 +192,7 @@ export default function StandingsPage() {
|
|||||||
<td className="text-center py-2 text-ink-500">{r.drawn}</td>
|
<td className="text-center py-2 text-ink-500">{r.drawn}</td>
|
||||||
<td className="text-center py-2 text-ink-500">{r.lost}</td>
|
<td className="text-center py-2 text-ink-500">{r.lost}</td>
|
||||||
<td className="text-center py-2 text-ink-500">{r.goals_for}/{r.goals_against}</td>
|
<td className="text-center py-2 text-ink-500">{r.goals_for}/{r.goals_against}</td>
|
||||||
<td className={`text-center py-2 ${r.goal_diff > 0 ? 'text-emerald-600' : r.goal_diff < 0 ? 'text-rose-600' : 'text-ink-500'}`}>
|
<td className={`text-center py-2 ${r.goal_diff > 0 ? 'text-ok-600' : r.goal_diff < 0 ? 'text-bad-600' : 'text-ink-500'}`}>
|
||||||
{r.goal_diff > 0 ? `+${r.goal_diff}` : r.goal_diff}
|
{r.goal_diff > 0 ? `+${r.goal_diff}` : r.goal_diff}
|
||||||
</td>
|
</td>
|
||||||
<td className="text-center py-2 font-bold text-ink-900">{r.points}</td>
|
<td className="text-center py-2 font-bold text-ink-900">{r.points}</td>
|
||||||
@@ -221,18 +211,8 @@ export default function StandingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 回到顶部按钮 */}
|
{/* 回到顶部(共享组件,方角纸片风) */}
|
||||||
<button
|
<BackTop />
|
||||||
onClick={scrollToTop}
|
|
||||||
className={`fixed bottom-6 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-ink-200 bg-paper-50 text-ink-600 shadow-lg transition-all duration-300 hover:border-ink-400 hover:text-ink-900 ${
|
|
||||||
showBackTop ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0 pointer-events-none'
|
|
||||||
}`}
|
|
||||||
aria-label="回到顶部"
|
|
||||||
>
|
|
||||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
* D3: 从 Matches.tsx 拆出,渲染逻辑原样搬迁。对外只导出 PredictModal;
|
* D3: 从 Matches.tsx 拆出,渲染逻辑原样搬迁。对外只导出 PredictModal;
|
||||||
* PredictionPanel 复用 Prediction 的 embedded 模式由弹窗内渲染。
|
* PredictionPanel 复用 Prediction 的 embedded 模式由弹窗内渲染。
|
||||||
*/
|
*/
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useRef, useState } from 'react'
|
||||||
import TeamSideTag from '../../../components/TeamSideTag'
|
import TeamSideTag from '../../../components/TeamSideTag'
|
||||||
import type { Match, Prediction } from '../types'
|
import type { Match, Prediction } from '../types'
|
||||||
import { AGENT_LABELS } from '../types'
|
import { AGENT_LABELS } from '../types'
|
||||||
@@ -82,7 +82,7 @@ function PredictionPanel({
|
|||||||
{!degraded && <OutcomePanel prediction={prediction} match={match} />}
|
{!degraded && <OutcomePanel prediction={prediction} match={match} />}
|
||||||
|
|
||||||
<p className="text-center text-2xs text-ink-500">
|
<p className="text-center text-2xs text-ink-500">
|
||||||
`多专家模式 · ${okReports.length}/${reports.length} 路有效`
|
{`多专家模式 · ${okReports.length}/${reports.length} 路有效`}
|
||||||
{prediction.prompt_version && ` · prompt ${prediction.prompt_version}`}
|
{prediction.prompt_version && ` · prompt ${prediction.prompt_version}`}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@@ -161,7 +161,8 @@ function PredictProgress() {
|
|||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p className="mt-6 text-center text-2xs text-ink-400">
|
<p className="mt-6 text-center text-2xs text-ink-400">
|
||||||
五路专家并行分析后终裁,约需 30-90 秒;多专家调用消耗较多 token,请按需使用。关闭窗口即取消
|
五路专家并行分析后终裁,约需 30-90 秒;多专家调用消耗较多 token,请按需使用。
|
||||||
|
关闭窗口将停止进度显示,后台任务可能仍在执行并消耗额度。
|
||||||
</p>
|
</p>
|
||||||
<p className="mt-1 text-center text-2xs text-ink-300">
|
<p className="mt-1 text-center text-2xs text-ink-300">
|
||||||
提示:每分钟限 10 次预测,耗尽后需等待下一分钟。
|
提示:每分钟限 10 次预测,耗尽后需等待下一分钟。
|
||||||
@@ -185,17 +186,52 @@ export function PredictModal({
|
|||||||
const homeName = match.home_team_zh || match.home_team
|
const homeName = match.home_team_zh || match.home_team
|
||||||
const awayName = match.away_team_zh || match.away_team
|
const awayName = match.away_team_zh || match.away_team
|
||||||
|
|
||||||
|
// ── 无障碍与滚动锁定 ──
|
||||||
|
const panelRef = useRef<HTMLDivElement>(null)
|
||||||
|
const previouslyFocused = useRef<HTMLElement | null>(null)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
previouslyFocused.current = document.activeElement as HTMLElement | null
|
||||||
|
// 初始聚焦弹窗容器,键盘用户可直接 Tab 进入内部控件
|
||||||
|
panelRef.current?.focus()
|
||||||
|
|
||||||
const h = (e: KeyboardEvent) => {
|
const h = (e: KeyboardEvent) => {
|
||||||
if (e.key === 'Escape') onClose()
|
if (e.key === 'Escape') {
|
||||||
|
onClose()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (e.key === 'Tab') {
|
||||||
|
// 简易焦点陷阱:Tab 循环限制在弹窗内,不会跑到遮罩背后的页面
|
||||||
|
const focusables = panelRef.current?.querySelectorAll<HTMLElement>(
|
||||||
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
|
||||||
|
)
|
||||||
|
if (!focusables || focusables.length === 0) return
|
||||||
|
const first = focusables[0]
|
||||||
|
const last = focusables[focusables.length - 1]
|
||||||
|
if (e.shiftKey && document.activeElement === first) {
|
||||||
|
e.preventDefault()
|
||||||
|
last.focus()
|
||||||
|
} else if (!e.shiftKey && document.activeElement === last) {
|
||||||
|
e.preventDefault()
|
||||||
|
first.focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
document.addEventListener('keydown', h)
|
document.addEventListener('keydown', h)
|
||||||
return () => document.removeEventListener('keydown', h)
|
// 锁定背景滚动:弹窗内滚到底继续滚时,不再带动底层页面
|
||||||
|
const prevOverflow = document.body.style.overflow
|
||||||
|
document.body.style.overflow = 'hidden'
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('keydown', h)
|
||||||
|
document.body.style.overflow = prevOverflow
|
||||||
|
// 关闭后把焦点还给触发元素
|
||||||
|
previouslyFocused.current?.focus()
|
||||||
|
}
|
||||||
}, [onClose])
|
}, [onClose])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-ink-900/50 p-4 sm:items-center"
|
className="modal-overlay-enter fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-ink-900/50 p-4 sm:items-center"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-label={`预测 ${homeName} 对 ${awayName}`}
|
aria-label={`预测 ${homeName} 对 ${awayName}`}
|
||||||
@@ -203,7 +239,11 @@ export function PredictModal({
|
|||||||
if (e.target === e.currentTarget) onClose()
|
if (e.target === e.currentTarget) onClose()
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="relative flex max-h-[92vh] w-full max-w-2xl flex-col overflow-hidden bg-paper-50 shadow-2xl">
|
<div
|
||||||
|
ref={panelRef}
|
||||||
|
tabIndex={-1}
|
||||||
|
className="modal-panel-enter relative flex max-h-[92vh] w-full max-w-2xl flex-col overflow-hidden bg-paper-50 outline-none"
|
||||||
|
>
|
||||||
{/* 弹窗报头 */}
|
{/* 弹窗报头 */}
|
||||||
<div className="flex flex-shrink-0 items-center justify-between border-b border-ink-900 bg-paper-100 px-4 py-2.5 sm:px-5">
|
<div className="flex flex-shrink-0 items-center justify-between border-b border-ink-900 bg-paper-100 px-4 py-2.5 sm:px-5">
|
||||||
<h3 className="flex flex-wrap items-center gap-1.5 font-serif text-sm font-bold text-ink-900">
|
<h3 className="flex flex-wrap items-center gap-1.5 font-serif text-sm font-bold text-ink-900">
|
||||||
|
|||||||
@@ -24,12 +24,39 @@ export default {
|
|||||||
800: '#282420',
|
800: '#282420',
|
||||||
900: '#17140F',
|
900: '#17140F',
|
||||||
},
|
},
|
||||||
// 印报红:全站唯一强调色,克制使用
|
// 印报红:全站唯一强调色,克制使用
|
||||||
press: {
|
press: {
|
||||||
DEFAULT: '#9E1B1B',
|
DEFAULT: '#9E1B1B',
|
||||||
dark: '#7C1414',
|
dark: '#7C1414',
|
||||||
wash: '#F7E9E4',
|
wash: '#F7E9E4',
|
||||||
},
|
},
|
||||||
|
// ── 语义状态色:成功/警告/负面 ──
|
||||||
|
// 设计约束:纸底 #FDFCF8 上文字级(600/700)对比度 ≥ 4.5:1(WCAG AA),
|
||||||
|
// 点/条级(500) ≥ 3:1;色相降饱和以贴近墨色印刷感,不使用 tailwind 原色。
|
||||||
|
ok: {
|
||||||
|
50: '#EAF3ED',
|
||||||
|
100: '#D5E8DC',
|
||||||
|
300: '#A3C9B1',
|
||||||
|
500: '#43925F',
|
||||||
|
600: '#2E7A4C',
|
||||||
|
700: '#1F6B45',
|
||||||
|
},
|
||||||
|
warn: {
|
||||||
|
50: '#FBF3E4',
|
||||||
|
100: '#F5E5C8',
|
||||||
|
300: '#E2C48E',
|
||||||
|
500: '#D97706',
|
||||||
|
600: '#A15C0B',
|
||||||
|
700: '#8F5109',
|
||||||
|
},
|
||||||
|
bad: {
|
||||||
|
50: '#FAEDED',
|
||||||
|
100: '#F6E3E3',
|
||||||
|
300: '#E4AFAF',
|
||||||
|
500: '#C24A4A',
|
||||||
|
600: '#A83B3B',
|
||||||
|
700: '#8F3030',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
// 毛体草书(国内 CDN)+ 粗楷体回退
|
// 毛体草书(国内 CDN)+ 粗楷体回退
|
||||||
|
|||||||
+2
-2
@@ -124,8 +124,8 @@ async def lifespan(app: FastAPI) -> AsyncIterator[None]:
|
|||||||
|
|
||||||
|
|
||||||
def create_app() -> FastAPI:
|
def create_app() -> FastAPI:
|
||||||
from src.core.log_buffer import setup_memory_logging
|
from src.core.log_buffer import setup_logging
|
||||||
setup_memory_logging(settings.LOG_LEVEL)
|
setup_logging(settings.LOG_LEVEL, settings.LOG_FILE)
|
||||||
|
|
||||||
# 生产环境不暴露 OpenAPI 文档(避免向访客泄露接口结构)
|
# 生产环境不暴露 OpenAPI 文档(避免向访客泄露接口结构)
|
||||||
openapi_url = "/openapi.json" if settings.APP_ENV != "production" else None
|
openapi_url = "/openapi.json" if settings.APP_ENV != "production" else None
|
||||||
|
|||||||
@@ -11,6 +11,10 @@ class Settings(BaseSettings):
|
|||||||
# --- app ---
|
# --- app ---
|
||||||
APP_ENV: str = "development"
|
APP_ENV: str = "development"
|
||||||
LOG_LEVEL: str = "INFO"
|
LOG_LEVEL: str = "INFO"
|
||||||
|
# 日志持久化:空(默认)只输出 stdout + Admin 内存日志页(重启清零)。
|
||||||
|
# 填文件路径(如 /app/logs/app.log)后额外写入滚动文件(单文件 10MB × 5 份),
|
||||||
|
# 进程/容器重启不丢。容器部署需配合 volume 挂载该目录,否则重建仍会丢。
|
||||||
|
LOG_FILE: str = ""
|
||||||
# P3-3:多 worker 时应用内限流与 KeyRing 各自独立计数(配额放大 N 倍)。
|
# P3-3:多 worker 时应用内限流与 KeyRing 各自独立计数(配额放大 N 倍)。
|
||||||
# 设为 True 时若以多 worker 启动 uvicorn 则拒绝启动,避免静默配额漂移。
|
# 设为 True 时若以多 worker 启动 uvicorn 则拒绝启动,避免静默配额漂移。
|
||||||
# 仅在你已前置 Nginx/网关做全局限流、确认不需要此守护时留空/False。
|
# 仅在你已前置 Nginx/网关做全局限流、确认不需要此守护时留空/False。
|
||||||
|
|||||||
+48
-8
@@ -65,14 +65,54 @@ def get_entries(
|
|||||||
return out
|
return out
|
||||||
|
|
||||||
|
|
||||||
def setup_memory_logging(level: str = "INFO") -> None:
|
def setup_logging(level: str = "INFO", log_file: str = "") -> None:
|
||||||
"""挂载内存 handler 到 root logger(幂等),并确保 root 级别不低于 INFO。"""
|
"""配置应用日志:stdout(容器收集) + 内存环形缓冲(Admin 日志页) + 可选滚动文件(持久化)。
|
||||||
|
|
||||||
|
幂等:重复调用不会重复挂 handler(文件 handler 按 abspath 判重,相对/绝对
|
||||||
|
路径指向同一文件视为同一个)。文件写入基础设施失败只记 warning,绝不
|
||||||
|
影响启动与业务 —— 与 _safe_write_ingest_failure 同级约束:可观测性
|
||||||
|
基础设施不许拖垮主流程。
|
||||||
|
"""
|
||||||
|
import os
|
||||||
|
from logging.handlers import RotatingFileHandler
|
||||||
|
|
||||||
root = logging.getLogger()
|
root = logging.getLogger()
|
||||||
if any(isinstance(h, MemoryLogHandler) for h in root.handlers):
|
|
||||||
return
|
|
||||||
handler = MemoryLogHandler()
|
|
||||||
handler.setLevel(logging.INFO)
|
|
||||||
handler.addFilter(_SQLNoiseFilter())
|
|
||||||
root.addHandler(handler)
|
|
||||||
if root.level == logging.NOTSET or root.level > logging.INFO:
|
if root.level == logging.NOTSET or root.level > logging.INFO:
|
||||||
root.setLevel(getattr(logging, level.upper(), logging.INFO))
|
root.setLevel(getattr(logging, level.upper(), logging.INFO))
|
||||||
|
|
||||||
|
if not any(isinstance(h, MemoryLogHandler) for h in root.handlers):
|
||||||
|
handler = MemoryLogHandler()
|
||||||
|
handler.setLevel(logging.INFO)
|
||||||
|
handler.addFilter(_SQLNoiseFilter())
|
||||||
|
root.addHandler(handler)
|
||||||
|
|
||||||
|
if not log_file:
|
||||||
|
return
|
||||||
|
|
||||||
|
# 滚动上限:单文件 10MB × 当前+5 份 ≈ 60MB,足够回溯数周的关键事件,
|
||||||
|
# 又不会吃满磁盘。格式含时间/级别/logger 名,便于事后 grep 排查。
|
||||||
|
target = os.path.abspath(log_file)
|
||||||
|
if any(
|
||||||
|
isinstance(h, RotatingFileHandler) and getattr(h, "baseFilename", None) == target
|
||||||
|
for h in root.handlers
|
||||||
|
):
|
||||||
|
return
|
||||||
|
try:
|
||||||
|
os.makedirs(os.path.dirname(target), exist_ok=True)
|
||||||
|
file_handler = RotatingFileHandler(
|
||||||
|
target,
|
||||||
|
maxBytes=10 * 1024 * 1024,
|
||||||
|
backupCount=5,
|
||||||
|
encoding="utf-8",
|
||||||
|
)
|
||||||
|
file_handler.setFormatter(
|
||||||
|
logging.Formatter("%(asctime)s %(levelname)s %(name)s %(message)s")
|
||||||
|
)
|
||||||
|
file_handler.setLevel(logging.INFO)
|
||||||
|
file_handler.addFilter(_SQLNoiseFilter())
|
||||||
|
root.addHandler(file_handler)
|
||||||
|
logging.getLogger(__name__).info("文件日志已启用: %s", log_file)
|
||||||
|
except Exception:
|
||||||
|
logging.getLogger(__name__).warning(
|
||||||
|
"启用文件日志失败(%s),仅保留 stdout/内存日志", log_file, exc_info=True,
|
||||||
|
)
|
||||||
|
|||||||
@@ -0,0 +1,127 @@
|
|||||||
|
"""日志持久化(LOG_FILE)测试:setup_logging 启用滚动文件后日志必须落盘。
|
||||||
|
|
||||||
|
背景: 此前应用日志只进 stdout(docker json-file 收集,不可控) + Admin 内存
|
||||||
|
日志页(环形缓冲 2000 条,进程重启清零),没有任何应用层持久化 —— 排查
|
||||||
|
「昨晚采集为什么失败」这类问题时无据可查。本测试守护:
|
||||||
|
1. 传 log_file → root logger 挂 RotatingFileHandler,日志写入文件
|
||||||
|
2. 幂等:重复调用不重复挂 handler
|
||||||
|
3. log_file 为空 → 不挂文件 handler(保持旧行为)
|
||||||
|
4. 目录不存在 → 自动创建
|
||||||
|
5. 文件打开失败(如路径是已存在的目录) → 只降级不炸,stdout/内存日志仍在
|
||||||
|
|
||||||
|
范式: 直接操作 root logger + tmp_path;fixture 保存/恢复 root 状态,
|
||||||
|
并关闭新增 handler 的文件句柄(Windows 上句柄不关会锁住 tmp 目录)。
|
||||||
|
"""
|
||||||
|
from __future__ import annotations
|
||||||
|
|
||||||
|
import logging
|
||||||
|
from logging.handlers import RotatingFileHandler
|
||||||
|
|
||||||
|
import pytest
|
||||||
|
|
||||||
|
from src.core.log_buffer import MemoryLogHandler, setup_logging
|
||||||
|
|
||||||
|
|
||||||
|
@pytest.fixture(autouse=True)
|
||||||
|
def _restore_root_logger():
|
||||||
|
"""保存/恢复 root logger;关闭测试期间新挂 handler 的句柄。"""
|
||||||
|
root = logging.getLogger()
|
||||||
|
saved_handlers = list(root.handlers)
|
||||||
|
saved_level = root.level
|
||||||
|
yield
|
||||||
|
for h in root.handlers:
|
||||||
|
if h not in saved_handlers and hasattr(h, "close"):
|
||||||
|
try:
|
||||||
|
h.close()
|
||||||
|
except Exception:
|
||||||
|
pass
|
||||||
|
root.handlers[:] = saved_handlers
|
||||||
|
root.setLevel(saved_level)
|
||||||
|
|
||||||
|
|
||||||
|
def _file_handlers():
|
||||||
|
return [h for h in logging.getLogger().handlers if isinstance(h, RotatingFileHandler)]
|
||||||
|
|
||||||
|
|
||||||
|
def _memory_handlers():
|
||||||
|
return [h for h in logging.getLogger().handlers if isinstance(h, MemoryLogHandler)]
|
||||||
|
|
||||||
|
|
||||||
|
class TestFileHandlerAttached:
|
||||||
|
def test_attaches_rotating_file_handler(self, tmp_path):
|
||||||
|
log_file = tmp_path / "app.log"
|
||||||
|
|
||||||
|
setup_logging("INFO", str(log_file))
|
||||||
|
|
||||||
|
fhs = _file_handlers()
|
||||||
|
assert len(fhs) == 1
|
||||||
|
assert fhs[0].baseFilename == str(log_file)
|
||||||
|
# 内存日志页照常工作,两者并存
|
||||||
|
assert len(_memory_handlers()) == 1
|
||||||
|
# 滚动参数与文档口径一致: 单文件 10MB × 5 份
|
||||||
|
assert fhs[0].maxBytes == 10 * 1024 * 1024
|
||||||
|
assert fhs[0].backupCount == 5
|
||||||
|
|
||||||
|
def test_log_written_to_file(self, tmp_path):
|
||||||
|
log_file = tmp_path / "app.log"
|
||||||
|
setup_logging("INFO", str(log_file))
|
||||||
|
|
||||||
|
logging.getLogger("persist-test").info("hello-persist-12345")
|
||||||
|
|
||||||
|
content = log_file.read_text(encoding="utf-8")
|
||||||
|
assert "hello-persist-12345" in content
|
||||||
|
assert "persist-test" in content # logger 名可追溯
|
||||||
|
assert "INFO" in content # 级别在行首可过滤
|
||||||
|
|
||||||
|
|
||||||
|
class TestIdempotent:
|
||||||
|
def test_repeated_call_does_not_duplicate_handlers(self, tmp_path):
|
||||||
|
log_file = tmp_path / "app.log"
|
||||||
|
|
||||||
|
setup_logging("INFO", str(log_file))
|
||||||
|
setup_logging("INFO", str(log_file))
|
||||||
|
setup_logging("INFO", str(log_file))
|
||||||
|
|
||||||
|
assert len(_file_handlers()) == 1
|
||||||
|
assert len(_memory_handlers()) == 1
|
||||||
|
|
||||||
|
def test_same_file_via_relative_and_absolute_path_counts_as_one(self, tmp_path, monkeypatch):
|
||||||
|
"""相对/绝对路径指向同一文件时不得重复挂(幂等按 abspath 判重)。"""
|
||||||
|
monkeypatch.chdir(tmp_path)
|
||||||
|
|
||||||
|
setup_logging("INFO", "app.log")
|
||||||
|
setup_logging("INFO", str(tmp_path / "app.log"))
|
||||||
|
|
||||||
|
assert len(_file_handlers()) == 1
|
||||||
|
|
||||||
|
|
||||||
|
class TestDisabled:
|
||||||
|
def test_empty_log_file_keeps_old_behavior(self):
|
||||||
|
setup_logging("INFO", "")
|
||||||
|
|
||||||
|
assert _file_handlers() == []
|
||||||
|
assert len(_memory_handlers()) == 1
|
||||||
|
|
||||||
|
|
||||||
|
class TestAutoMkdir:
|
||||||
|
def test_creates_missing_directories(self, tmp_path):
|
||||||
|
log_file = tmp_path / "deep" / "nested" / "app.log"
|
||||||
|
|
||||||
|
setup_logging("INFO", str(log_file))
|
||||||
|
|
||||||
|
assert len(_file_handlers()) == 1
|
||||||
|
assert log_file.parent.is_dir()
|
||||||
|
|
||||||
|
|
||||||
|
class TestGracefulDegradation:
|
||||||
|
def test_unopenable_path_degrades_without_raising(self, tmp_path):
|
||||||
|
"""路径是已存在的目录 → 打开必然失败;只降级,不炸启动。"""
|
||||||
|
dir_as_file = tmp_path / "occupied"
|
||||||
|
dir_as_file.mkdir()
|
||||||
|
|
||||||
|
# 不应抛异常(文件日志是可观测性基础设施,失败只 warning)
|
||||||
|
setup_logging("INFO", str(dir_as_file))
|
||||||
|
|
||||||
|
assert _file_handlers() == []
|
||||||
|
# 降级后 stdout/内存日志路径仍在
|
||||||
|
assert len(_memory_handlers()) == 1
|
||||||
Reference in New Issue
Block a user