diff --git a/app/records/[id]/page.tsx b/app/records/[id]/page.tsx index f06ac2e..f1a3eae 100644 --- a/app/records/[id]/page.tsx +++ b/app/records/[id]/page.tsx @@ -1,5 +1,5 @@ "use client" -import { use, useEffect, useMemo, useState } from 'react' +import { use, useEffect, useMemo, useRef, useState } from 'react' import Link from 'next/link' import { Chart as ChartJS, @@ -11,10 +11,11 @@ import { Tooltip, Legend, } from 'chart.js' -import zoomPlugin from 'chartjs-plugin-zoom' import { Line, Bar, Scatter } from 'react-chartjs-2' +// 仅导入类型以启用插件的类型增强，不触发运行时代码 +import type {} from 'chartjs-plugin-zoom' -ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, zoomPlugin) +ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend) type Detail = { id: string @@ -80,6 +81,44 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) { if (rec?.fit) setShowFiltered(false) }, [rec?.fit]) + // 侦测小屏（手机）以调整 Chart 布局 + const [isSmall, setIsSmall] = useState(false) + useEffect(() => { + if (typeof window === 'undefined') return + const mql = window.matchMedia('(max-width: 640px)') + const apply = () => setIsSmall(mql.matches) + apply() + if ((mql as any).addEventListener) { + mql.addEventListener('change', apply) + return () => mql.removeEventListener('change', apply) + } + }, []) + + // 动态加载并注册缩放插件（仅在客户端） + const zoomRef = useRef(null) + useEffect(() => { + let cancelled = false + ;(async () => { + try { + const mod: any = await import('chartjs-plugin-zoom') + const plugin = mod?.default ?? mod + if (!cancelled) { + zoomRef.current = plugin + ChartJS.register(plugin) + } + } catch (err) { + console.error('Failed to load chartjs-plugin-zoom', err) + } + })() + return () => { + cancelled = true + if (zoomRef.current) { + try { ChartJS.unregister(zoomRef.current) } catch {} + zoomRef.current = null + } + } + }, []) + const timeAxis = useMemo(() => { if (!rec) return [] as number[] const step = rec.sampleCount > 0 ? (rec.duration * 1000) / rec.sampleCount : 0 @@ -125,8 +164,8 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) { return (
-
-
+
+
← 返回

记录 {rec?.id || id}

@@ -154,39 +193,39 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) { {loading &&
加载中...
} {error &&
{error}
} {rec && ( -
-
-
+
+
+
上传时间
{new Date(rec.timestamp).toLocaleString()}
-
+
采样
{rec.sampleCount} 点 · {rec.duration.toFixed(3)} s · {(rec.sampleCount / rec.duration).toFixed(2)} Hz
-
+
拟合
{rec.fit ? `y = ${rec.fit.a.toFixed(4)}x + ${rec.fit.b.toFixed(3)}` : '未拟合'}
-
-
+
+
码值统计
[{rec.stats.codeMin} ~ {rec.stats.codeMax}] · 均值 {toFixed(rec.stats.codeAvg, 2)}
-
+
力值统计
{rec.fit ? `[${toFixed(rec.stats.forceMin, 2)} ~ ${toFixed(rec.stats.forceMax, 2)}] mN · 均值 ${toFixed(rec.stats.forceAvg, 2)}` : '—'}
-
+
峰峰值
码值 {rec.stats.codeMax - rec.stats.codeMin}{rec.fit && rec.stats.forceMax != null && rec.stats.forceMin != null ? ` · 力值 ${(rec.stats.forceMax - rec.stats.forceMin).toFixed(2)} mN` : ''}
-
-
+
+
时序曲线
+
}) { }} options={{ responsive: true, + maintainAspectRatio: false, + layout: { padding: isSmall ? 0 : { left: 4, right: 12, top: 8, bottom: 4 } as any }, interaction: { mode: 'index', intersect: false }, plugins: { - legend: { position: 'top' as const }, + legend: { position: (isSmall ? 'bottom' : 'top') as 'top' | 'left' | 'bottom' | 'right', labels: { font: { size: isSmall ? 10 : 12 }, boxWidth: isSmall ? 10 : 12, padding: isSmall ? 8 : 12 } }, zoom: { pan: { enabled: true, mode: 'x' as const }, zoom: { @@ -389,17 +431,19 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) { }, }, scales: { - x: { title: { display: true, text: '时间 (ms)' } }, - yCode: { type: 'linear' as const, position: 'left' as const, title: { display: true, text: '码值' } }, - yForce: { type: 'linear' as const, position: 'right' as const, title: { display: true, text: '力值 (mN)' }, grid: { drawOnChartArea: false } }, + x: { title: { display: !isSmall, text: '时间 (ms)' }, ticks: { maxRotation: 0, font: { size: isSmall ? 10 : 12 } } }, + yCode: { type: 'linear' as const, position: 'left' as const, title: { display: !isSmall, text: '码值' }, ticks: { font: { size: isSmall ? 10 : 12 } } }, + yForce: { type: 'linear' as const, position: 'right' as const, title: { display: !isSmall, text: '力值 (mN)' }, grid: { drawOnChartArea: false }, ticks: { font: { size: isSmall ? 10 : 12 } } }, }, }} /> +
-
-
-
码值分布直方图
+
+
+
码值分布直方图
+
}) { }} options={{ plugins: { + legend: { display: false }, zoom: { pan: { enabled: true, mode: 'x' as const }, zoom: { @@ -423,13 +468,18 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) { }, }, }, - scales: { x: { title: { display: true, text: '码值' } }, y: { title: { display: true, text: '数量' } } }, + responsive: true, + maintainAspectRatio: false, + layout: { padding: isSmall ? 0 : { left: 4, right: 8, top: 4, bottom: 0 } as any }, + scales: { x: { title: { display: !isSmall, text: '码值' }, ticks: { font: { size: isSmall ? 10 : 12 } } }, y: { title: { display: !isSmall, text: '数量' }, ticks: { font: { size: isSmall ? 10 : 12 } } } }, }} /> +
-
-
线性度散点图
+
+
线性度散点图
{rec.fit && forceSeries ? ( +
}) { ], }} options={{ + responsive: true, + maintainAspectRatio: false, + layout: { padding: isSmall ? 0 : { left: 4, right: 8, top: 4, bottom: 0 } as any }, scales: { - x: { title: { display: true, text: '码值' } }, - y: { title: { display: true, text: '力值 (mN)' } }, + x: { title: { display: !isSmall, text: '码值' }, ticks: { font: { size: isSmall ? 10 : 12 } } }, + y: { title: { display: !isSmall, text: '力值 (mN)' }, ticks: { font: { size: isSmall ? 10 : 12 } } }, }, plugins: { legend: { display: false }, @@ -458,6 +511,7 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) { }, }} /> +
) : (
无拟合参数，无法绘制
)}