// components.jsx v8 — 共用 UI 组件库：Sidebar · AthleteHeader · MetricGroupCard · KpiTile · Modal 等
// 职责：无业务逻辑的展示/交互组件，全 app 复用
// 依赖：无内部依赖 · 由所有视图文件引用
const { useState, useEffect, useMemo, useRef, useCallback } = React;
// ──────────────────────────────────────────────────────────────────────────
// Icons (small inline SVGs)
// ──────────────────────────────────────────────────────────────────────────
const Icon = ({ name, size = 14, stroke = 1.6 }) => {
const paths = {
search: <>,
arrowUp: ,
arrowDown:,
minus: ,
plus: ,
x: ,
chevDown: ,
chevRight:,
download: <>,
users: <>,
flag: <>,
trend: <>,
history: <>,
sliders: <>,
target: <>,
print: <>,
refresh: <>,
bolt: ,
star: ,
info: <>,
};
return (
);
};
// ──────────────────────────────────────────────────────────────────────────
// Logo / Brand
// ──────────────────────────────────────────────────────────────────────────
const BrandMark = () => (
Axis Performance
Squad Analytics
);
// ──────────────────────────────────────────────────────────────────────────
// FilterRow — labeled chip row used by the sidebar's cascading filters.
// Active chip uses the accent; inactive chips use neutral border.
// ──────────────────────────────────────────────────────────────────────────
const FilterRow = ({ label, options, value, onChange }) => (
{label}
{options.map(o => (
))}
);
// ──────────────────────────────────────────────────────────────────────────
// Sidebar (athlete list + search + compare toggle)
// ──────────────────────────────────────────────────────────────────────────
// Tiny risk dot for sidebar (P3-4): 6px circle, color-coded by risk level
const SIDEBAR_RISK_COLORS = { green: '#10b981', amber: '#f59e0b', red: '#ef4444' };
const SidebarRiskDot = ({ level }) => {
if (!level || level === 'gray') return null;
const color = SIDEBAR_RISK_COLORS[level] || 'transparent';
return (
);
};
// 全局顶部功能导航（方案 I）：横向铺开所有功能页，始终可见。
// 作为 .app grid 的整宽首行（gridColumn:1/-1）插入，不改既有滚动模型。
// ── nav model — shared by NavRail (desktop) + BottomNav (mobile ≤760px) ──────
const FORCE_NAV = ['cmj', 'sj', 'imtp', 'cmj-session', 'cmj-longitudinal', 'sj-longitudinal', 'imtp-longitudinal', 'force-compare', 'cmj-compare', 'dsi'];
const INJURY_NAV = ['injury', 'movement-screen'];
const NAV_ICON_PATHS = {
team: ,
individual: ,
cmj: ,
injury: ,
rehab: ,
training: ,
report: ,
'review-database': ,
'field-test': ,
calendar: ,
norms: ,
knowledge: ,
settings: ,
};
const navIcon = (id, size) => ;
function getNavItems(view) {
return [
{ id: 'team', zh: '团队', en: 'Squad', on: view === 'team' },
{ id: 'individual', zh: '个人', en: 'Athlete', on: view === 'individual' },
{ id: 'cmj', zh: '测力台', en: 'Force', on: FORCE_NAV.includes(view) }, // FORCE-WS-1a (2026-07-10): single 测力台工作区 entry (opens window.ForceWorkspace)
{ id: 'injury', zh: '损伤筛查', en: 'Screening', on: INJURY_NAV.includes(view) },
{ id: 'training', zh: '训练', en: 'Training', on: view === 'training' },
{ id: 'rehab', zh: '康复训练', en: 'Rehab', on: view === 'rehab' },
{ id: 'report', zh: '报告编辑', en: 'Report Editor', on: view === 'report' },
{ id: 'review-database', zh: '审核', en: 'Review', on: view === 'review-database' },
{ id: 'field-test', zh: '测试录入', en: 'Test Entry',on: view === 'field-test' },
{ id: 'calendar', zh: '日历', en: 'Calendar', on: view === 'calendar' },
{ id: 'norms', zh: '常模库', en: 'Norm Library', on: view === 'norms' },
{ id: 'knowledge', zh: '知识库', en: 'Knowledge', on: view === 'knowledge' },
];
}
// ── NavRail — 左侧图标导航(对照 mockup .rail) ──────────────────
function NavRail({ view, onNav, onOpenSettings, lang }) {
const en = lang === 'en';
const items = getNavItems(view);
const Item = ({ it, on, onClick }) => (
);
return (
);
}
// ── BottomNav — 移动端底栏(≤760px;rail ↔ 底部 Tab,显示 5 个核心入口) ──────
function BottomNav({ view, onNav, lang }) {
const en = lang === 'en';
const items = getNavItems(view).slice(0, 5);
return (
);
}
// 顶栏精简:导航已移入左 NavRail;这里仅留 移动端汉堡(运动员名单)+ 品牌名 + 右侧操作位
function AppTopNav({ onMenu, rightActions, showMenu = true }) {
return (
{showMenu && (
)}
Axis Performance
{rightActions}
{initials}
);
};
// ──────────────────────────────────────────────────────────────────────────
// Score Dot — tiny circular progress
// ──────────────────────────────────────────────────────────────────────────
const ScoreDot = ({ value, size = 26, stroke = 3 }) => {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const off = c * (1 - value / 100);
const color = value >= 70 ? 'var(--pos)' : value >= 50 ? 'var(--accent-2)' : value >= 35 ? 'var(--warn)' : 'var(--neg)';
return (
);
};
// ──────────────────────────────────────────────────────────────────────────
// Diff arrow — value plus colored up/down chevron
// ──────────────────────────────────────────────────────────────────────────
const DiffArrow = ({ value, direction = 'higher', formatter }) => {
if (value == null || isNaN(value)) return —;
const isPositive = direction === 'higher' ? value > 0 : value < 0;
const isNegative = direction === 'higher' ? value < 0 : value > 0;
const isZero = Math.abs(value) < 0.005;
const color = isZero ? 'var(--muted)' : isPositive ? 'var(--pos)' : 'var(--neg)';
const arrow = isZero ? '–' : value > 0 ? '▲' : '▼';
const display = formatter ? formatter(Math.abs(value)) : Math.abs(value).toFixed(2);
return (
{arrow}
{display}
);
};
// ──────────────────────────────────────────────────────────────────────────
// AthleteHeader — top hero card
// ──────────────────────────────────────────────────────────────────────────
const AthleteHeader = ({ athlete, season, overallScore, posAvgScore, acwr, onPrint, riskLevel }) => {
const heightM = ((athlete.height || 0) / 100);
const bmi = heightM > 0 ? (athlete.weight / (heightM * heightM)).toFixed(1) : null;
const resolvedAge = window.AthleteProfile?.resolveAge(athlete) ?? athlete.age;
const ageDisplay = resolvedAge != null && !(typeof resolvedAge === 'string' && resolvedAge.trim() === '') && isFinite(Number(resolvedAge))
? Number(resolvedAge).toFixed(1)
: '—';
const birthDateDisplay = athlete.birthDate
? (window.formatDate ? window.formatDate(athlete.birthDate, 'short') : athlete.birthDate)
: '—';
return (
{/* Avatar column */}
#{String(athlete.jersey).padStart(2,'0')}
{/* Info column */}
Athlete Profile · {window.formatDate ? window.formatDate(season, 'short') : season}
{athlete.name}
{[athlete.position, athlete.dominant, athlete.country].filter(Boolean).join(' · ')}
{riskLevel &&
}
Gender / 性别{athlete.gender || '—'}
Birth date / 出生日期{birthDateDisplay}
{window.t('Age')}{ageDisplay}
{window.t('Height')}{athlete.height ?? '—'} cm
{window.t('Weight')}{athlete.weight ?? '—'} kg
Sport{athlete.sport || '—'}
BMI{bmi ?? '—'}
{/* 状态石 — 综合评分 / 位置均值 / 负荷 ACWR (定稿) */}
{(() => {
const acwrOk = acwr != null && isFinite(acwr);
const acwrColor = !acwrOk ? 'var(--muted)' : (acwr > 1.5 ? 'var(--neg)' : acwr > 1.3 ? 'var(--warn)' : 'var(--pos)');
const stones = [
{ k: '综合评分', v: overallScore != null ? Math.round(overallScore) : '—', sub: '队内', color: 'var(--text)' },
{ k: '位置均值', v: posAvgScore != null ? Math.round(posAvgScore) : '—', sub: athlete.position, color: 'var(--text)' },
{ k: '负荷 ACWR', v: acwrOk ? (+acwr).toFixed(2) : '—', sub: !acwrOk ? '待接负荷' : (acwr > 1.5 ? '偏高·风险' : acwr > 1.3 ? '偏高·留意' : '最优 1.0–1.3'), color: acwrColor },
];
return stones.map((s, i) => (
));
})()}
);
};
const Stat = ({ label, value }) => (
);
// BodyMetric — large numeric with unit, for anthropometric column
const BodyMetric = ({ label, value, unit, icon }) => (
{icon === 'height' && (
)}
{icon === 'weight' && (
)}
{label}
{value ?? '—'}
{unit}
);
const BigScoreRing = ({ label, value, accent, muted, size = 78 }) => {
const stroke = 6;
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const off = c * (1 - value / 100);
return (
);
};
// ──────────────────────────────────────────────────────────────────────────
// FixedRangeLight — red/green status pip based on metric.fixedRange reference
// ──────────────────────────────────────────────────────────────────────────
const FixedRangeLight = ({ metric, value }) => {
const fr = metric && metric.fixedRange;
if (!fr || value == null || isNaN(value)) return null;
const t = +fr.threshold;
if (isNaN(t)) return null;
let status; // 'good' | 'bad' | 'on'
if (value === t) status = 'on';
else if (fr.goodWhen === 'below') status = value < t ? 'good' : 'bad';
else status = value > t ? 'good' : 'bad';
const color = status === 'good' ? 'var(--pos)' : status === 'bad' ? 'var(--neg)' : 'var(--warn)';
const tip = `Reference threshold ${t}${metric.unit ? ' ' + metric.unit : ''} · ${fr.goodWhen === 'above' ? 'above is good' : 'below is good'}`;
return (
);
};
// ──────────────────────────────────────────────────────────────────────────
// MetricGroupCard — one card per group (Fitness, Speed, etc.)
// shows: group label, score ring, current metrics with diff vs avg + range bar
// ──────────────────────────────────────────────────────────────────────────
const MetricGroupCard = ({ group, values, squadStats, score, active, onClick, onMetricClick, onLabelChange, density, cardIndex, recentHistory }) => {
const compact = density === 'compact';
const [editing, setEditing] = useState(false);
const [draft, setDraft] = useState(group.label);
const [hovered, setHovered] = useState(false);
const inputRef = useRef(null);
useEffect(() => { setDraft(group.label); }, [group.label]);
useEffect(() => {
if (editing && inputRef.current) {
inputRef.current.focus();
inputRef.current.select();
}
}, [editing]);
const commit = () => {
const v = draft.trim();
if (v && v !== group.label && onLabelChange) onLabelChange(v);
else setDraft(group.label);
setEditing(false);
};
const cancel = () => { setDraft(group.label); setEditing(false); };
return (
e.stopPropagation() : onClick}
onMouseEnter={() => !editing && setHovered(true)}
onMouseLeave={() => setHovered(false)}
className="fade-up"
style={{
background: active
? `linear-gradient(135deg, var(--panel-2) 0%, ${group.accent}12 100%)`
: hovered
? `linear-gradient(135deg, var(--panel-hi) 0%, ${group.accent}08 100%)`
: `linear-gradient(135deg, var(--panel) 0%, ${group.accent}05 100%)`,
border: '1px solid',
borderColor: active ? group.accent : hovered ? 'var(--border-strong)' : 'var(--border)',
borderRadius: 10,
padding: compact ? '12px 14px' : '14px 16px',
cursor: editing ? 'default' : 'pointer',
transition: 'border-color .18s, background .18s, transform .18s, box-shadow .18s',
transform: hovered && !active ? 'translateY(-2px)' : 'none',
boxShadow: active
? `0 0 0 3px ${group.accent}22, 0 6px 24px rgba(0,0,0,.35)`
: hovered
? '0 6px 20px rgba(0,0,0,.3)'
: 'none',
animationDelay: `${(cardIndex || 0) * 55}ms`,
display: 'flex', flexDirection: 'column', gap: compact ? 8 : 10,
minWidth: 0,
}}
>
{/* header */}
{editing ? (
setDraft(e.target.value)}
onClick={(e) => e.stopPropagation()}
onBlur={commit}
onKeyDown={(e) => {
if (e.key === 'Enter') { e.preventDefault(); commit(); }
else if (e.key === 'Escape') { e.preventDefault(); cancel(); }
}}
style={{
width: '100%',
background: 'var(--panel-hi)',
border: `1px solid ${group.accent}`,
borderRadius: 4,
padding: '2px 6px',
color: 'var(--text)',
fontSize: 11,
textTransform: 'uppercase',
letterSpacing: '.1em',
fontFamily: 'inherit',
outline: 'none',
}}
/>
) : (
{ e.stopPropagation(); setEditing(true); }}
title="Double-click to rename"
style={{
fontSize: 11, textTransform: 'uppercase', letterSpacing: '.1em',
color: 'var(--muted)',
display: 'inline-flex', alignItems: 'center', gap: 6,
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
maxWidth: '100%',
}}
>
{group.label}
)}
{/* metrics list */}
{group.metrics.map(m => {
const v = values[m.id];
const stats = squadStats[m.id];
if (!stats) return null;
const diff = m.dir === 'lower' ? (stats.avg - v) : (v - stats.avg);
// Trend arrow: based on last 3 measurements (hist[0]=current, hist[1]=prev, hist[2]=prev-prev)
const hist = recentHistory?.[m.id] || [];
let trendIcon = null, trendColor = 'var(--muted)';
if (hist.length >= 2 && m.dir !== 'neutral') {
const imp0 = m.dir === 'lower' ? hist[0] < hist[1] : hist[0] > hist[1];
const dec0 = m.dir === 'lower' ? hist[0] > hist[1] : hist[0] < hist[1];
if (hist.length >= 3) {
const imp1 = m.dir === 'lower' ? hist[1] < hist[2] : hist[1] > hist[2];
const dec1 = m.dir === 'lower' ? hist[1] > hist[2] : hist[1] < hist[2];
if (imp0 && imp1) { trendIcon = '↑↑'; trendColor = 'var(--pos)'; }
else if (dec0 && dec1) { trendIcon = '↓↓'; trendColor = 'var(--neg)'; }
else if (imp0) { trendIcon = '↑'; trendColor = 'var(--pos)'; }
else if (dec0) { trendIcon = '↓'; trendColor = 'var(--neg)'; }
else { trendIcon = '→'; trendColor = 'var(--muted-2)'; }
} else {
if (imp0) { trendIcon = '↑'; trendColor = 'var(--pos)'; }
else if (dec0) { trendIcon = '↓'; trendColor = 'var(--neg)'; }
}
}
// Season-best marker: athlete's value matches squad best this session
const isBest = v != null && stats.best != null && v === stats.best && m.dir !== 'neutral';
return (
{ e.stopPropagation(); onMetricClick && onMetricClick(m); }}
style={{
display: 'grid',
gridTemplateColumns: '1fr auto',
alignItems: 'center', gap: 8,
padding: compact ? '3px 6px' : '4px 6px',
borderRadius: 5,
transition: 'background .1s',
}}
onMouseEnter={(e) => { e.currentTarget.style.background = `${group.accent}12`; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
>
{/* Left: label + range bar */}
{/* Right: value + trend + diff stacked */}
{isBest && (
★
)}
{formatValue(v)}{m.unit}
{trendIcon && (
{trendIcon}
)}
formatDiff(x)}/>
);
})}
{/* filled bar */}
{/* avg marker */}
{open && (
{seasons.map(s => (
))}
)}
);
};
// ──────────────────────────────────────────────────────────────────────────
// KpiTile — small numeric card (counts in topbar)
// ──────────────────────────────────────────────────────────────────────────
const KpiTile = ({ label, value, sub, accent = 'var(--accent)' }) => (
{label}
{value}
{sub && {sub}}
);
// ──────────────────────────────────────────────────────────────────────────
// GroupingToggle — Day / Week / Month segmented control
// ──────────────────────────────────────────────────────────────────────────
const GroupingToggle = ({ value, onChange }) => {
const opts = [
{ id: 'day', label: 'Day' },
{ id: 'week', label: 'Week' },
{ id: 'month', label: 'Month' },
];
return (
{opts.map(o => {
const active = value === o.id;
return (
);
})}
);
};
// ──────────────────────────────────────────────────────────────────────────
// CountUp — animates a number from current display value to a target.
// Uses requestAnimationFrame; respects the global motion toggle.
// ──────────────────────────────────────────────────────────────────────────
function CountUp({ value, decimals = 0, duration = 700, prefix = '', suffix = '', style }) {
const [shown, setShown] = useState(value);
const fromRef = useRef(value);
const startRef = useRef(0);
const rafRef = useRef(0);
useEffect(() => {
const motionOn = document.documentElement.getAttribute('data-motion') !== 'off';
if (!motionOn || !isFinite(value)) { setShown(value); return; }
cancelAnimationFrame(rafRef.current);
fromRef.current = isFinite(shown) ? shown : value;
startRef.current = performance.now();
const tick = (now) => {
const t = Math.min(1, (now - startRef.current) / duration);
// ease out cubic
const eased = 1 - Math.pow(1 - t, 3);
setShown(fromRef.current + (value - fromRef.current) * eased);
if (t < 1) rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
}, [value, duration]);
const display = isFinite(shown) ? shown.toFixed(decimals) : value;
return {prefix}{display}{suffix};
}
// ──────────────────────────────────────────────────────────────────────────
// LivePulse — small pulsing dot + label, used for "Live"/"Synced" indicators.
// ──────────────────────────────────────────────────────────────────────────
function LivePulse({ label = 'LIVE', color = 'var(--pos)', style }) {
return (
{label}
);
}
// ──────────────────────────────────────────────────────────────────────────
// RiskBadge — four-level traffic light pill with tooltip (P3-B)
// Props: level ('gray'|'green'|'amber'|'red'), flags (string[])
// ──────────────────────────────────────────────────────────────────────────
const RISK_COLORS = {
gray: { bg: 'rgba(139,148,163,.12)', border: 'rgba(139,148,163,.30)', text: '#8b94a3', dot: '#8b94a3', label: '–' },
green: { bg: 'rgba(16,185,129,.10)', border: 'rgba(16,185,129,.30)', text: '#059669', dot: '#10b981', label: '正常' },
amber: { bg: 'rgba(245,158,11,.10)', border: 'rgba(245,158,11,.30)', text: '#d97706', dot: '#f59e0b', label: '注意' },
red: { bg: 'rgba(239,68,68,.10)', border: 'rgba(239,68,68,.30)', text: '#dc2626', dot: '#ef4444', label: '风险' },
};
const RiskBadge = ({ level = 'gray', flags = [], size = 'md' }) => {
const [show, setShow] = useState(false);
const c = RISK_COLORS[level] || RISK_COLORS.gray;
const dotSize = size === 'sm' ? 7 : 9;
const fontSize = size === 'sm' ? 10 : 11;
return (
setShow(true)} onMouseLeave={() => setShow(false)}>
0 ? 'help' : 'default',
background: c.bg, border: `1px solid ${c.border}`,
}}>
{c.label}
{show && flags.length > 0 && (
风险指标
{flags.map((f, i) => (
· {f}
))}
)}
{pinned && (
{children}
)}
{children}
);
};
// ForceTestUploadZone — 拖拽上传区 + 隐藏 input + 重新上传按钮
const ForceTestUploadZone = ({ fileRef, hasResult, dragOver, onDrop, setDragOver, onFileChange, onReupload, hint, accept }) => (
<>
{!hasResult && (
{ e.preventDefault(); setDragOver(true); }}
onDragLeave={() => setDragOver(false)}
onClick={() => fileRef.current?.click()}
style={{
border: `2px dashed ${dragOver ? 'var(--accent)' : 'var(--border)'}`,
borderRadius: 12, padding: '40px 24px', cursor: 'pointer', textAlign: 'center',
background: dragOver ? 'var(--accent-soft)' : 'var(--panel)',
transition: 'border-color .15s, background .15s',
}}>
↑
拖拽或点击上传力板数据文件
e.stopPropagation()} style={{ marginTop: 6, display: 'inline-block', textAlign: 'left' }}>
{hint || 'VALD ForceDecks · CSV / XLSX / TSV'}
)}
);
// ForceTestLoadingError — 解析中提示 + 错误展示
const ForceTestLoadingError = ({ loading, error, onRetry }) => (
<>
{loading && 正在分析…
}
{error && (
!
File format not recognized / 文件格式未识别
Upload a raw force-plate export with Time, Left, and Right force columns. / 请上传包含 Time、Left、Right 力值列的力板原始导出文件。
Detail: {error}
{onRetry &&
}
)}
);
// ForceTestSaveBanner — 运动员选择 + 代表 trial 选择 + 保存按钮 + 已存计数
const ForceTestSaveBanner = ({ result, athletes, athleteId, setAthleteId, sessionCount, onSave, trials = [], selectedTrialIndex = 0, onSelectedTrialChange, testType = 'cmj', saveDate, onSaveDateChange }) => {
if (!result || !athletes?.length) return null;
const cfg = window.forceTestConfig?.(testType) || {};
const primaryKey = cfg.primaryMetricKey || (testType === 'imtp' ? 'peakForce' : 'jumpHeight');
const primaryLabel = cfg.primaryMetricLabel || (testType === 'imtp' ? 'Fpeak' : 'JH');
const primaryUnit = cfg.primaryMetricUnit || '';
const fmtPrimary = (v) => v == null || !isFinite(v) ? '—' : `${Number(v).toFixed(primaryKey === 'peakForce' ? 0 : 1)}${primaryUnit}`;
return (
保存至运动员：
日期：
onSaveDateChange && onSaveDateChange(e.target.value)}
style={{ fontSize: 12, padding: '3px 6px', borderRadius: 5, border: '1px solid var(--border)', background: 'var(--panel)', color: 'var(--text)' }} />
{trials.length > 1 && (
<>
代表 trial：
)}
{sessionCount > 0 &&
已有 {sessionCount} 个 session}
保存后，运动员档案指标将使用所选代表 trial；完整 trial 列表仍保存在 session 中。
);
};
// expose
Object.assign(window, {
Icon, BrandMark, Sidebar, FilterRow, AvatarMini, ScoreDot, DiffArrow,
AthleteHeader, BigScoreRing, Stat, MetricGroupCard, RangeBar,
SeasonSelector, KpiTile, formatValue, formatDiff, MetricPicker,
BodyMetric, GroupingToggle, CountUp, LivePulse, RiskBadge,
ForceTestUploadZone, ForceTestLoadingError, ForceTestSaveBanner, ForceNote,
});
// ──────────────────────────────────────────────────────────────────────────
// MetricPicker — grouped popover, replaces the cramped chip row
// ──────────────────────────────────────────────────────────────────────────
function MetricPicker({ groups, value, onChange }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, []);
// resolve group for current value
let activeGroup = null;
groups.forEach(g => { if (g.metrics.some(m => m.id === value.id)) activeGroup = g; });
return (
{open && (
{groups.map(g => (
{g.label}
{g.metrics.filter(m => !m.computed).map(m => {
const active = m.id === value.id;
return (
);
})}
))}
)}
);
}
// ── AthleteForceTestsCard ────────────────────────────────────────────────────
// Shows CMJ / SJ / IMTP history for one athlete in their individual panel.
function effectiveForceSessions(sessions) {
const source = window.ForceSessionSource;
return (sessions || []).map(session =>
source && typeof source.resolveEffectiveSession === 'function'
? source.resolveEffectiveSession(session) : session
);
}
const AthleteForceTestsCard = ({
athlete,
sessions = [],
sjSessions = [],
imtpSessions = [],
forceSessions = null,
reviewedEvidence = null,
onUpload,
onOpenReview,
onOpenReport,
hasCmjResult = false,
onViewResult,
onViewLongitudinal,
}) => {
const [forceDetailPinned, setForceDetailPinned] = useState(false);
const testTypes = window.FORCE_TEST_TYPES || ['cmj', 'sj', 'imtp'];
const rawSessionMap = forceSessions || { cmj: sessions, sj: sjSessions, imtp: imtpSessions };
const sessionMap = {};
testTypes.forEach(type => { sessionMap[type] = effectiveForceSessions(rawSessionMap[type]); });
const configs = window.FORCE_TEST_CONFIGS || {};
const totalSessions = testTypes.reduce((sum, t) => sum + (sessionMap[t] || []).length, 0);
const bestJHRaw = (sessionMap.cmj || []).length > 0
? Math.max(...(sessionMap.cmj || []).map(s => s.best?.jumpHeight).filter(v => v != null && isFinite(v)))
: null;
const bestJH = bestJHRaw != null && isFinite(bestJHRaw) ? bestJHRaw.toFixed(1) : null;
// CMJ jump-height trend (last 8) — the scard mini-bars
const jhSeries = (sessionMap.cmj || [])
.map(s => ({ date: s.date, v: s.best?.jumpHeight }))
.filter(d => d.v != null && isFinite(d.v))
.sort((a, b) => String(a.date).localeCompare(String(b.date)))
.slice(-8);
const jhMax = jhSeries.length ? Math.max(...jhSeries.map(d => d.v)) : 0;
const jhMin = jhSeries.length ? Math.min(...jhSeries.map(d => d.v)) : 0;
const Panel = window.Panel, Pill = window.Pill, ModuleArrow = window.ModuleArrow;
const enter = () => (onViewLongitudinal ? onViewLongitudinal('cmj') : onUpload && onUpload());
const formatStoryEvidenceDate = (value) => {
if (!value) return '—';
const date = new Date(value);
if (Number.isNaN(date.getTime())) return String(value).slice(0, 10) || '—';
return date.toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
};
const reviewed = reviewedEvidence && reviewedEvidence.reviewedStatus === 'reviewed';
const inner = (
{bestJH != null
? <>{bestJH}cm · 最佳弹跳
: {totalSessions ? `${totalSessions} 次测试` : '尚未测试'}}
{testTypes.map(type => {
const n = (sessionMap[type] || []).length;
if (!n) return null;
const cfg = configs[type] || { label: type.toUpperCase() };
return
{cfg.label} {n};
})}
{hasCmjResult && onViewResult && (
)}
{jhSeries.length >= 2 && (
{jhSeries.map((d, i) => {
const h = jhMax > jhMin ? 28 + (d.v - jhMin) / (jhMax - jhMin) * 72 : 60;
return
;
})}
CMJ 弹跳高度 · 最近 {jhSeries.length} 次
)}
Confirmed CMJ Result / 已确认 CMJ 结果
{reviewed ? 'Confirmed' : 'Not Confirmed'}
{reviewedEvidence ? (
<>
{forceDetailPinned && (
- Sports Scientist Conclusion
- {reviewedEvidence.classification}
- Reviewer Training Focus
- {reviewedEvidence.reviewerTrainingFocus}
- Session: / Last Confirmed:
- {String(reviewedEvidence.sessionDate || '—').slice(0, 10)} · {formatStoryEvidenceDate(reviewedEvidence.lastReviewedAt)}
)}
- Sports Scientist Conclusion
- {reviewedEvidence.classification}
- Reviewer Training Focus
- {reviewedEvidence.reviewerTrainingFocus}
- Session / Last Confirmed
- {String(reviewedEvidence.sessionDate || '—').slice(0, 10)} · {formatStoryEvidenceDate(reviewedEvidence.lastReviewedAt)}
{onOpenReview && onOpenReview === onOpenReport ? (
) : (
<>
)}
) : (
No confirmed CMJ result yet. / 暂无已确认 CMJ 结果
)}
);
return Panel
? }>{inner}
: {inner}
;
};
const AthleteCMJCard = AthleteForceTestsCard;
Object.assign(window, { AthleteForceTestsCard, AthleteCMJCard });