feie9454/nano-force-web-neo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化手机边距

Browse Source
This commit is contained in:
feie9456 2025-11-16 18:41:41 +08:00
parent 67047e9705
commit 91b889a05f
1 changed files with 82 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
app/records/[id]/page.tsx
View File

@ -1,5 +1,5 @@
"use client" "use client"
import { use, useEffect, useMemo, useState } from 'react' import { use, useEffect, useMemo, useRef, useState } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { import {
Chart as ChartJS, Chart as ChartJS,
@ -11,10 +11,11 @@ import {
Tooltip, Tooltip,
Legend, Legend,
} from 'chart.js' } from 'chart.js'
import zoomPlugin from 'chartjs-plugin-zoom'
import { Line, Bar, Scatter } from 'react-chartjs-2' 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 = { type Detail = {
id: string id: string
@ -80,6 +81,44 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
if (rec?.fit) setShowFiltered(false) if (rec?.fit) setShowFiltered(false)
}, [rec?.fit]) }, [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(() => { const timeAxis = useMemo(() => {
if (!rec) return [] as number[] if (!rec) return [] as number[]
const step = rec.sampleCount > 0 ? (rec.duration * 1000) / rec.sampleCount : 0 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 ( return (
<div className="min-h-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100"> <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="mx-auto max-w-6xl p-2 sm:p-6">
<div className="mb-4 flex items-center justify-between"> <div className="mb-3 sm:mb-4 flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Link href="/" className="rounded border px-3 py-1.5">← 返回</Link> <Link href="/" className="rounded border px-3 py-1.5">← 返回</Link>
<h1 className="text-xl font-semibold">记录 {rec?.id || id}</h1> <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>} {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>} {error && <div className="rounded bg-red-100 p-4 text-red-800">{error}</div>}
{rec && ( {rec && (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-4 sm:gap-6">
<section className="grid grid-cols-1 gap-4 sm:grid-cols-3"> <section className="grid grid-cols-1 gap-3 sm:gap-4 sm:grid-cols-3">
<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="text-sm text-zinc-500">上传时间</div>
<div className="mt-1 text-lg">{new Date(rec.timestamp).toLocaleString()}</div> <div className="mt-1 text-lg">{new Date(rec.timestamp).toLocaleString()}</div>
</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="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 className="mt-1 text-lg">{rec.sampleCount} 点 · {rec.duration.toFixed(3)} s · {(rec.sampleCount / rec.duration).toFixed(2)} Hz</div>
</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="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 className="mt-1 text-lg">{rec.fit ? `y = ${rec.fit.a.toFixed(4)}x + ${rec.fit.b.toFixed(3)}` : '未拟合'}</div>
</div> </div>
</section> </section>
<section className="grid grid-cols-1 gap-4 sm:grid-cols-3"> <section className="grid grid-cols-1 gap-3 sm:gap-4 sm:grid-cols-3">
<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="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 className="mt-1 text-lg">[{rec.stats.codeMin} ~ {rec.stats.codeMax}] · 均值 {toFixed(rec.stats.codeAvg, 2)}</div>
</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="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 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>
<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="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 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> </div>
</section> </section>
<section className="rounded-lg border p-4 dark:border-zinc-800"> <section className="rounded-lg border p-2 sm:p-4 dark:border-zinc-800">
<div className="mb-3 flex items-center justify-between"> <div className="mb-2 sm:mb-3 flex items-center justify-between">
<div className="text-sm text-zinc-500">时序曲线</div> <div className="text-sm text-zinc-500">时序曲线</div>
<div className="flex flex-wrap items-center gap-4"> <div className="flex flex-wrap items-center gap-4">
<label className="flex items-center gap-2 text-sm"> <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> <span className="hidden text-xs text-zinc-500 sm:inline">按 Ctrl+滚轮 缩放，拖拽平移</span>
</div> </div>
</div> </div>
<div className="relative h-64 sm:h-96">
<Line <Line
data={{ data={{
labels: timeAxis, labels: timeAxis,
@ -376,9 +416,11 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
}} }}
options={{ options={{
responsive: true, responsive: true,
maintainAspectRatio: false,
layout: { padding: isSmall ? 0 : { left: 4, right: 12, top: 8, bottom: 4 } as any },
interaction: { mode: 'index', intersect: false }, interaction: { mode: 'index', intersect: false },
plugins: { 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: { zoom: {
pan: { enabled: true, mode: 'x' as const }, pan: { enabled: true, mode: 'x' as const },
zoom: { zoom: {
@ -389,17 +431,19 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
}, },
}, },
scales: { scales: {
x: { title: { display: true, text: '时间 (ms)' } }, 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: true, text: '码值' } }, 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: true, text: '力值 (mN)' }, grid: { drawOnChartArea: false } }, 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>
<section className="grid grid-cols-1 gap-4 sm:grid-cols-2"> <section className="grid grid-cols-1 gap-3 sm:gap-4 sm:grid-cols-2">
<div className="rounded-lg border p-4 dark:border-zinc-800"> <div className="rounded-lg border p-2 sm:p-4 dark:border-zinc-800">
<div className="mb-3 text-sm text-zinc-500">码值分布直方图</div> <div className="mb-2 sm:mb-3 text-sm text-zinc-500">码值分布直方图</div>
<div className="relative h-56 sm:h-80">
<Bar <Bar
data={{ data={{
labels: codeHistogram.labels, labels: codeHistogram.labels,
@ -414,6 +458,7 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
}} }}
options={{ options={{
plugins: { plugins: {
legend: { display: false },
zoom: { zoom: {
pan: { enabled: true, mode: 'x' as const }, pan: { enabled: true, mode: 'x' as const },
zoom: { 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>
<div className="rounded-lg border p-4 dark:border-zinc-800"> </div>
<div className="mb-3 text-sm text-zinc-500">线性度散点图</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 ? ( {rec.fit && forceSeries ? (
<div className="relative h-56 sm:h-80">
<Scatter <Scatter
data={{ data={{
datasets: [ datasets: [
@ -441,9 +491,12 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
], ],
}} }}
options={{ options={{
responsive: true,
maintainAspectRatio: false,
layout: { padding: isSmall ? 0 : { left: 4, right: 8, top: 4, bottom: 0 } as any },
scales: { scales: {
x: { title: { display: true, text: '码值' } }, x: { title: { display: !isSmall, text: '码值' }, ticks: { font: { size: isSmall ? 10 : 12 } } },
y: { title: { display: true, text: '力值 (mN)' } }, y: { title: { display: !isSmall, text: '力值 (mN)' }, ticks: { font: { size: isSmall ? 10 : 12 } } },
}, },
plugins: { plugins: {
legend: { display: false }, 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> <div className="text-sm text-zinc-500">无拟合参数，无法绘制</div>
)} )}