优化手机边距
This commit is contained in:
parent
67047e9705
commit
91b889a05f
@ -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<any>(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 (
|
||||
<div className="min-h-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100">
|
||||
<div className="mx-auto max-w-6xl p-4 sm:p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="mx-auto max-w-6xl p-2 sm:p-6">
|
||||
<div className="mb-3 sm:mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/" className="rounded border px-3 py-1.5">← 返回</Link>
|
||||
<h1 className="text-xl font-semibold">记录 {rec?.id || id}</h1>
|
||||
@ -154,39 +193,39 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
|
||||
{loading && <div className="rounded bg-zinc-200 p-4 dark:bg-zinc-800">加载中...</div>}
|
||||
{error && <div className="rounded bg-red-100 p-4 text-red-800">{error}</div>}
|
||||
{rec && (
|
||||
<div className="flex flex-col gap-6">
|
||||
<section className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<div className="rounded-lg border p-4 dark:border-zinc-800">
|
||||
<div className="flex flex-col gap-4 sm:gap-6">
|
||||
<section className="grid grid-cols-1 gap-3 sm:gap-4 sm:grid-cols-3">
|
||||
<div className="rounded-lg border p-3 sm:p-4 dark:border-zinc-800">
|
||||
<div className="text-sm text-zinc-500">上传时间</div>
|
||||
<div className="mt-1 text-lg">{new Date(rec.timestamp).toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4 dark:border-zinc-800">
|
||||
<div className="rounded-lg border p-3 sm:p-4 dark:border-zinc-800">
|
||||
<div className="text-sm text-zinc-500">采样</div>
|
||||
<div className="mt-1 text-lg">{rec.sampleCount} 点 · {rec.duration.toFixed(3)} s · {(rec.sampleCount / rec.duration).toFixed(2)} Hz</div>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4 dark:border-zinc-800">
|
||||
<div className="rounded-lg border p-3 sm:p-4 dark:border-zinc-800">
|
||||
<div className="text-sm text-zinc-500">拟合</div>
|
||||
<div className="mt-1 text-lg">{rec.fit ? `y = ${rec.fit.a.toFixed(4)}x + ${rec.fit.b.toFixed(3)}` : '未拟合'}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<div className="rounded-lg border p-4 dark:border-zinc-800">
|
||||
<section className="grid grid-cols-1 gap-3 sm:gap-4 sm:grid-cols-3">
|
||||
<div className="rounded-lg border p-3 sm:p-4 dark:border-zinc-800">
|
||||
<div className="text-sm text-zinc-500">码值统计</div>
|
||||
<div className="mt-1 text-lg">[{rec.stats.codeMin} ~ {rec.stats.codeMax}] · 均值 {toFixed(rec.stats.codeAvg, 2)}</div>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4 dark:border-zinc-800">
|
||||
<div className="rounded-lg border p-3 sm:p-4 dark:border-zinc-800">
|
||||
<div className="text-sm text-zinc-500">力值统计</div>
|
||||
<div className="mt-1 text-lg">{rec.fit ? `[${toFixed(rec.stats.forceMin, 2)} ~ ${toFixed(rec.stats.forceMax, 2)}] mN · 均值 ${toFixed(rec.stats.forceAvg, 2)}` : '—'}</div>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4 dark:border-zinc-800">
|
||||
<div className="rounded-lg border p-3 sm:p-4 dark:border-zinc-800">
|
||||
<div className="text-sm text-zinc-500">峰峰值</div>
|
||||
<div className="mt-1 text-lg">码值 {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` : ''}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-lg border p-4 dark:border-zinc-800">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<section className="rounded-lg border p-2 sm:p-4 dark:border-zinc-800">
|
||||
<div className="mb-2 sm:mb-3 flex items-center justify-between">
|
||||
<div className="text-sm text-zinc-500">时序曲线</div>
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
@ -325,6 +364,7 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
|
||||
<span className="hidden text-xs text-zinc-500 sm:inline">按 Ctrl+滚轮 缩放，拖拽平移</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-64 sm:h-96">
|
||||
<Line
|
||||
data={{
|
||||
labels: timeAxis,
|
||||
@ -376,9 +416,11 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
|
||||
}}
|
||||
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 } } },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="rounded-lg border p-4 dark:border-zinc-800">
|
||||
<div className="mb-3 text-sm text-zinc-500">码值分布直方图</div>
|
||||
<section className="grid grid-cols-1 gap-3 sm:gap-4 sm:grid-cols-2">
|
||||
<div className="rounded-lg border p-2 sm:p-4 dark:border-zinc-800">
|
||||
<div className="mb-2 sm:mb-3 text-sm text-zinc-500">码值分布直方图</div>
|
||||
<div className="relative h-56 sm:h-80">
|
||||
<Bar
|
||||
data={{
|
||||
labels: codeHistogram.labels,
|
||||
@ -414,6 +458,7 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
|
||||
}}
|
||||
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 } } } },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4 dark:border-zinc-800">
|
||||
<div className="mb-3 text-sm text-zinc-500">线性度散点图</div>
|
||||
</div>
|
||||
<div className="rounded-lg border p-2 sm:p-4 dark:border-zinc-800">
|
||||
<div className="mb-2 sm:mb-3 text-sm text-zinc-500">线性度散点图</div>
|
||||
{rec.fit && forceSeries ? (
|
||||
<div className="relative h-56 sm:h-80">
|
||||
<Scatter
|
||||
data={{
|
||||
datasets: [
|
||||
@ -441,9 +491,12 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
|
||||
],
|
||||
}}
|
||||
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 }> }) {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-zinc-500">无拟合参数，无法绘制</div>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user