重构管理员页面使用SSR

app/admin/AdminClient.tsx

@@ -0,0 +1,248 @@
+"use client"
+import { useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+
+type AdminRecordItem = {
+  id: string
+  timestamp: string
+  sampleCount: number
+  duration: number
+}
+
+function toLocalInputValue(iso: string): string {
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return ''
+  const pad = (n: number) => n.toString().padStart(2, '0')
+  const year = d.getFullYear()
+  const month = pad(d.getMonth() + 1)
+  const day = pad(d.getDate())
+  const hour = pad(d.getHours())
+  const minute = pad(d.getMinutes())
+  const second = pad(d.getSeconds())
+  return `${year}-${month}-${day}T${hour}:${minute}:${second}`
+}
+
+export default function AdminClient({
+  initialData,
+  currentPage,
+  pageSize,
+  totalPages,
+}: {
+  initialData: AdminRecordItem[]
+  currentPage: number
+  pageSize: number
+  totalPages: number
+}) {
+  const router = useRouter()
+  const [data, setData] = useState(initialData)
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [editingTimes, setEditingTimes] = useState<Record<string, string>>(() => {
+    const initial: Record<string, string> = {}
+    for (const r of initialData) {
+      initial[r.id] = toLocalInputValue(r.timestamp)
+    }
+    return initial
+  })
+  const [dirty, setDirty] = useState<Record<string, boolean>>({})
+
+  function toggleSelect(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  function selectAllCurrent() {
+    setSelected(new Set(data.map((d) => d.id)))
+  }
+
+  function clearSelection() {
+    setSelected(new Set())
+  }
+
+  async function handleBatchDelete() {
+    if (selected.size === 0) return
+    if (!confirm(`确定要删除选中的 ${selected.size} 条记录吗?`)) return
+    try {
+      const res = await fetch('/api/records/batch', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ action: 'delete', ids: Array.from(selected) }),
+      })
+      if (!res.ok) throw new Error('批量删除失败')
+      const j = await res.json()
+      const deletedIds: string[] = j.deletedIds || []
+      setData((prev) => prev.filter((r) => !deletedIds.includes(r.id)))
+      clearSelection()
+    } catch {
+      alert('批量删除失败')
+    }
+  }
+
+  function setNowFor(id: string) {
+    const now = new Date()
+    const isoLocal = toLocalInputValue(now.toISOString())
+    setEditingTimes((prev) => ({ ...prev, [id]: isoLocal }))
+    setDirty((prev) => ({ ...prev, [id]: true }))
+  }
+
+  function shiftMinutes(id: string, minutes: number) {
+    setEditingTimes((prev) => {
+      const current = prev[id]
+      const base = current ? new Date(current) : new Date()
+      if (Number.isNaN(base.getTime())) return prev
+      const shifted = new Date(base.getTime() + minutes * 60 * 1000)
+      const isoLocal = toLocalInputValue(shifted.toISOString())
+      return { ...prev, [id]: isoLocal }
+    })
+    setDirty((prev) => ({ ...prev, [id]: true }))
+  }
+
+  async function applyTime(id: string) {
+    const input = editingTimes[id]
+    if (!input) {
+      alert('请输入时间')
+      return
+    }
+    const dt = new Date(input)
+    if (Number.isNaN(dt.getTime())) {
+      alert('时间格式不正确')
+      return
+    }
+    try {
+      const res = await fetch('/api/records/batch', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ action: 'updateTimestamp', ids: [id], timestamp: dt.toISOString() }),
+      })
+      if (!res.ok) throw new Error('修改时间失败')
+      const j = await res.json()
+      const updated: { id: string; timestamp: string }[] = j.updated || []
+      if (!updated.length) return
+      const { timestamp } = updated[0]
+      setData((prev) => prev.map((r) => (r.id === id ? { ...r, timestamp } : r)))
+      setEditingTimes((prev) => ({ ...prev, [id]: toLocalInputValue(timestamp) }))
+      setDirty((prev) => ({ ...prev, [id]: false }))
+    } catch {
+      alert('修改时间失败')
+    }
+  }
+
+  function goToPage(page: number) {
+    const params = new URLSearchParams()
+    params.set('page', String(page))
+    params.set('pageSize', String(pageSize))
+    router.push(`/admin?${params.toString()}`)
+  }
+
+  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-2 sm:p-6">
+        <header className="mb-4 flex items-center justify-between gap-3">
+          <div>
+            <h1 className="text-2xl font-semibold">Admin 面板</h1>
+            <p className="mt-1 text-xs text-zinc-500">批量删除记录，批量修改时间等维护操作</p>
+          </div>
+          <Link href="/" className="rounded border px-3 py-1.5 text-sm">← 返回首页</Link>
+        </header>
+
+        <section className="mb-4 flex flex-wrap items-center gap-3 rounded border border-zinc-200 bg-white p-3 text-sm dark:border-zinc-800 dark:bg-zinc-950">
+          <div className="flex items-center gap-2">
+            <button onClick={selectAllCurrent} className="rounded border px-2 py-1">全选当前页</button>
+            <button onClick={clearSelection} className="rounded border px-2 py-1">清空选择</button>
+            <span className="text-xs text-zinc-500">已选 {selected.size} 条</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <button onClick={handleBatchDelete} className="rounded bg-red-600 px-3 py-1 text-white disabled:opacity-50" disabled={selected.size === 0}>批量删除</button>
+          </div>
+        </section>
+
+        <section className="rounded border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+          <div className="hidden items-center justify-between border-b px-3 py-2 text-xs text-zinc-500 dark:border-zinc-800 sm:flex">
+            <div className="flex items-center gap-2">
+              <span className="w-8 text-center">选中</span>
+              <span className="w-40">ID</span>
+              <span className="w-72">时间 / 编辑</span>
+              <span className="w-24 text-right">采样点数</span>
+            </div>
+          </div>
+          {data.length === 0 && (
+            <div className="px-3 py-3 text-sm text-zinc-500">暂无数据</div>
+          )}
+          <div className="divide-y text-sm dark:divide-zinc-800">
+            {data.map((r) => (
+              <div key={r.id} className="border-b px-3 py-2 text-xs last:border-b-0 dark:border-zinc-800">
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      checked={selected.has(r.id)}
+                      onChange={() => toggleSelect(r.id)}
+                      className="h-4 w-4"
+                    />
+                    <span className="max-w-[200px] truncate font-mono sm:w-40">{r.id}</span>
+                  </div>
+                  <div className="hidden items-center gap-2 sm:flex">
+                    <span className="text-[11px] text-zinc-500">{new Date(r.timestamp).toLocaleString()}</span>
+                    <span className="w-16 text-right text-[11px] text-zinc-500">{r.sampleCount}</span>
+                  </div>
+                  <Link href={`/records/${r.id}`} className="text-[11px] text-blue-600 hover:underline dark:text-blue-400">详情</Link>
+                </div>
+                <div className="mt-1 flex flex-col gap-1 sm:mt-1 sm:flex-row sm:items-center sm:gap-2">
+                  <div
+                    className={`flex flex-1 items-center gap-1 rounded border px-1 py-0.5 ${dirty[r.id] ? 'border-amber-400 bg-amber-50 dark:border-amber-500 dark:bg-amber-900/30' : 'border-zinc-300 bg-white dark:border-zinc-700 dark:bg-zinc-900'}`}
+                  >
+                    <input
+                      type="datetime-local"
+                      value={editingTimes[r.id] || ''}
+                      onChange={(e) => {
+                        const v = e.target.value
+                        setEditingTimes((prev) => ({ ...prev, [r.id]: v }))
+                        const original = toLocalInputValue(r.timestamp)
+                        setDirty((prev) => ({ ...prev, [r.id]: v !== original }))
+                      }}
+                      className="w-full bg-transparent text-[11px] outline-none"
+                    />
+                  </div>
+                  <div className="mt-1 flex flex-wrap gap-1 sm:mt-0 sm:flex-none sm:justify-start justify-end">
+                    <button
+                      onClick={() => {
+                        const original = toLocalInputValue(r.timestamp)
+                        setEditingTimes((prev) => ({ ...prev, [r.id]: original }))
+                        setDirty((prev) => ({ ...prev, [r.id]: false }))
+                      }}
+                      className="rounded border px-2 py-1 text-[11px]"
+                    >重置</button>
+                    <button onClick={() => setNowFor(r.id)} className="rounded border px-2 py-1 text-[11px]">现在</button>
+                    <button onClick={() => shiftMinutes(r.id, 1)} className="rounded border px-2 py-1 text-[11px]">+1min</button>
+                    <button onClick={() => shiftMinutes(r.id, 10)} className="rounded border px-2 py-1 text-[11px]">+10min</button>
+                    <button onClick={() => applyTime(r.id)} className="rounded bg-zinc-900 px-3 py-1 text-[11px] text-white dark:bg-zinc-100 dark:text-black">应用</button>
+                  </div>
+                </div>
+                <div className="mt-1 text-[11px] text-zinc-500 sm:hidden">
+                  时长 {r.duration} · 点数 {r.sampleCount}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="flex items-center justify-center gap-4 border-t px-3 py-2 text-sm dark:border-zinc-800">
+            <button 
+              className="rounded border px-3 py-1.5 disabled:opacity-50" 
+              onClick={() => goToPage(Math.max(1, currentPage - 1))} 
+              disabled={currentPage <= 1}
+            >上一页</button>
+            <div className="text-xs">{currentPage} / {totalPages}</div>
+            <button 
+              className="rounded border px-3 py-1.5 disabled:opacity-50" 
+              onClick={() => goToPage(Math.min(totalPages, currentPage + 1))} 
+              disabled={currentPage >= totalPages}
+            >下一页</button>
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}

app/admin/page.tsx

@@ -0,0 +1,46 @@
+import { prisma } from '@/src/lib/prisma'
+import AdminClient from './AdminClient'
+
+type AdminRecordItem = {
+  id: string
+  timestamp: string
+  sampleCount: number
+  duration: number
+}
+
+export default async function AdminPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ page?: string; pageSize?: string }>
+}) {
+  const params = await searchParams
+  const page = Math.max(1, parseInt(params.page || '1', 10) || 1)
+  const pageSizeRaw = parseInt(params.pageSize || '50', 10) || 50
+  const pageSize = Math.min(100, Math.max(1, pageSizeRaw))
+
+  const [total, rows] = await Promise.all([
+    prisma.recording.count(),
+    prisma.recording.findMany({
+      orderBy: { timestamp: 'desc' },
+      skip: (page - 1) * pageSize,
+      take: pageSize,
+      select: {
+        id: true,
+        timestamp: true,
+        sample_count: true,
+        duration: true,
+      },
+    }),
+  ])
+
+  const data: AdminRecordItem[] = rows.map((r) => ({
+    id: r.id,
+    timestamp: r.timestamp.toISOString(),
+    sampleCount: r.sample_count,
+    duration: r.duration,
+  }))
+
+  const totalPages = Math.max(1, Math.ceil(total / pageSize))
+
+  return <AdminClient initialData={data} currentPage={page} pageSize={pageSize} totalPages={totalPages} />
+}

app/api/export/route.ts

@@ -48,20 +48,23 @@ export async function POST(req: NextRequest) {
       })
     }
 
-    // CSV
-    let csv = 'recordId,timestamp,index,timeSec,code,force\n'
+    // CSV（去掉 recordId、timestamp，timeSec 改为毫秒单位）
+    let csv = 'index,timeMs,code,force\n'
     for (const r of rows) {
-      let step = r.sample_count > 0 ? r.duration / r.sample_count : 0
+      // 以毫秒为单位的步长
+      let stepMs = r.sample_count > 0 ? (r.duration * 1000) / r.sample_count : 0
       if (r.rec_start_ms != null && r.rec_end_ms != null && r.sample_count > 0) {
         const dtMs = Number((r.rec_end_ms as bigint) - (r.rec_start_ms as bigint))
-        if (Number.isFinite(dtMs) && dtMs > 0) step = dtMs / 1000 / r.sample_count
+        if (Number.isFinite(dtMs) && dtMs > 0) stepMs = dtMs / r.sample_count
       }
+      // 采样溢出时强制 1ms 步长（与 16.384s/16384 对齐）
+      if (r.sample_count >= 16384) stepMs = 1
       const hasFit = r.fit_a != null
       for (let i = 0; i < r.code_data.length; i++) {
-        const t = (i * step).toFixed(6)
+        const t = (i * stepMs).toFixed(3)
         const code = r.code_data[i]
         const force = hasFit ? r.fit_a! * code + (r.fit_b ?? 0) : ''
-        csv += `${r.id},${new Date(r.timestamp).toISOString()},${i},${t},${code},${hasFit ? force : ''}\n`
+        csv += `${i},${t},${code},${hasFit ? force : ''}\n`
       }
     }
     return new Response(csv, {

app/api/records/batch/route.ts

@@ -0,0 +1,50 @@
+import { NextRequest } from 'next/server'
+import { prisma } from '@/src/lib/prisma'
+import { isAuthorizedDelete } from '@/src/lib/utils'
+
+type BatchBody =
+  | { action: 'delete'; ids: string[] }
+  | { action: 'updateTimestamp'; ids: string[]; timestamp: string }
+
+export async function POST(req: NextRequest) {
+  try {
+    if (!isAuthorizedDelete(req)) {
+      return Response.json({ error: 'unauthorized' }, { status: 401 })
+    }
+
+    const body = (await req.json()) as BatchBody
+
+    if (!body || !Array.isArray((body as any).ids) || (body as any).ids.length === 0) {
+      return Response.json({ error: 'ids required' }, { status: 400 })
+    }
+
+    const ids = (body as any).ids as string[]
+
+    if (body.action === 'delete') {
+      const result = await prisma.recording.deleteMany({ where: { id: { in: ids } } })
+      return Response.json({ success: true, deletedCount: result.count, deletedIds: ids })
+    }
+
+    if (body.action === 'updateTimestamp') {
+      const ts = new Date(body.timestamp)
+      if (Number.isNaN(ts.getTime())) {
+        return Response.json({ error: 'invalid timestamp' }, { status: 400 })
+      }
+
+      await prisma.recording.updateMany({ where: { id: { in: ids } }, data: { timestamp: ts } })
+      const updated = await prisma.recording.findMany({
+        where: { id: { in: ids } },
+        select: { id: true, timestamp: true },
+      })
+      return Response.json({
+        success: true,
+        updated: updated.map((r) => ({ id: r.id, timestamp: r.timestamp.toISOString() })),
+      })
+    }
+
+    return Response.json({ error: 'unsupported action' }, { status: 400 })
+  } catch (err) {
+    console.error(err)
+    return Response.json({ error: 'internal error' }, { status: 500 })
+  }
+}

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
@@ -43,8 +44,15 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [rec, setRec] = useState<Detail | null>(null)
+  // 滤波相关状态
+  const [filterType, setFilterType] = useState<'none' | 'ema' | 'sg' | 'hampel_sg' | 'gauss'>('ema')
   const [emaAlpha, setEmaAlpha] = useState(0.01)
-  const [enableEma, setEnableEma] = useState(true)
+  const [sgWindow, setSgWindow] = useState(21)
+  const [sgOrder, setSgOrder] = useState<2 | 3>(3)
+  const [hampelWindow, setHampelWindow] = useState(11)
+  const [hampelK, setHampelK] = useState(2)
+  const [gaussSigma, setGaussSigma] = useState(5)
+  // 图例控制显示，不再使用自定义 checkbox；默认隐藏在数据集上配置
 
   useEffect(() => {
     const controller = new AbortController()
@@ -67,33 +75,96 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
     return () => controller.abort()
   }, [id])
 
+  // 显示策略改由 Chart.js 图例控制，默认隐藏在数据集 hidden 字段中设置
+
+  // 侦测小屏（手机）以调整 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
+    // 使用秒为单位，保留3位小数；若采样溢出，固定为 16.384s
+    const overflow = rec.sampleCount >= 16384
+    const effectiveDuration = overflow ? 16.384 : rec.duration
+    const step = rec.sampleCount > 0 ? effectiveDuration / rec.sampleCount : 0
     return Array.from({ length: rec.sampleCount }, (_, i) => +(i * step).toFixed(3))
   }, [rec])
 
-  const smoothedCode = useMemo(() => {
-    if (!rec || !enableEma) return rec?.code || []
-    return applyEMA(rec.code, emaAlpha)
-  }, [rec, enableEma, emaAlpha])
+  const filteredCode = useMemo(() => {
+    if (!rec) return [] as number[]
+    const x = rec.code
+    switch (filterType) {
+      case 'none':
+        return x
+      case 'ema':
+        return applyEMA(x, emaAlpha)
+      case 'sg': {
+        const w = makeOddSafe(sgWindow, x.length)
+        return savitzkyGolay(x, w, sgOrder)
+      }
+      case 'hampel_sg': {
+        const hw = makeOddSafe(hampelWindow, x.length)
+        const w = makeOddSafe(sgWindow, x.length)
+        const y = hampelFilter(x, hw, hampelK)
+        return savitzkyGolay(y, w, sgOrder)
+      }
+      case 'gauss':
+        return gaussianSmooth(x, gaussSigma)
+      default:
+        return x
+    }
+  }, [rec, filterType, emaAlpha, sgWindow, sgOrder, hampelWindow, hampelK, gaussSigma])
 
   const forceSeries = useMemo(() => {
     if (!rec?.fit) return undefined
     const { a, b } = rec.fit
-    const dataToUse = enableEma ? smoothedCode : rec.code
-    return dataToUse.map((c) => a * c + b)
-  }, [rec, enableEma, smoothedCode])
+    const dataToUse = filterType === 'none' ? (rec.code) : filteredCode
+    return dataToUse.map((c: number) => a * c + b)
+  }, [rec, filterType, filteredCode])
 
   const codeHistogram = useMemo(() => {
-    const dataToUse = enableEma ? smoothedCode : (rec?.code || [])
+    const dataToUse = filterType === 'none' ? (rec?.code || []) : filteredCode
     return buildHistogram(dataToUse, 30)
-  }, [rec, enableEma, smoothedCode])
+  }, [rec, filterType, filteredCode])
 
   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>
@@ -121,51 +192,73 @@ 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>
+                {(() => {
+                  const overflow = rec.sampleCount >= 16384
+                  const effectiveDuration = overflow ? 16.384 : rec.duration
+                  const hz = effectiveDuration > 0 ? (rec.sampleCount / effectiveDuration) : 0
+                  return (
+                    <div className="mt-1 text-lg">
+                      {rec.sampleCount} 点 ·{' '}
+                      <span
+                        className={overflow ? 'text-red-600 dark:text-red-400' : ''}
+                        title={overflow ? '采样溢出，时间将不准确' : undefined}
+                      >
+                        {effectiveDuration.toFixed(3)} s
+                      </span>
+                      {' '}· {hz.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 items-center gap-4">
+                <div className="flex flex-wrap items-center gap-4">
                   <label className="flex items-center gap-2 text-sm">
-                    <input
-                      type="checkbox"
-                      checked={enableEma}
-                      onChange={(e) => setEnableEma(e.target.checked)}
-                      className="rounded"
-                    />
-                    <span>EMA平滑</span>
+                    <span>滤波器:</span>
+                    <select
+                      className="rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                      value={filterType}
+                      onChange={(e) => setFilterType(e.target.value as any)}
+                    >
+                      <option value="none">无</option>
+                      <option value="ema">EMA</option>
+                      <option value="sg">Savitzky–Golay</option>
+                      <option value="hampel_sg">Hampel + SG</option>
+                      <option value="gauss">Gaussian（零相位）</option>
+                    </select>
                   </label>
-                  {enableEma && (
+
+                  {filterType === 'ema' && (
                     <label className="flex items-center gap-2 text-sm">
                       <span>α:</span>
                       <input
@@ -175,27 +268,136 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
                         step="0.01"
                         value={emaAlpha}
                         onChange={(e) => setEmaAlpha(Number(e.target.value))}
-                        className="w-24"
+                        className="w-28"
                       />
                       <span className="w-12 text-right">{emaAlpha.toFixed(2)}</span>
                     </label>
                   )}
+
+                  {filterType === 'sg' && (
+                    <div className="flex items-center gap-4 text-sm">
+                      <label className="flex items-center gap-2">
+                        <span>窗口:</span>
+                        <input
+                          type="number"
+                          className="w-16 rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                          value={sgWindow}
+                          min={5}
+                          step={2}
+                          onChange={(e) => setSgWindow(Number(e.target.value))}
+                        />
+                      </label>
+                      <label className="flex items-center gap-2">
+                        <span>阶数:</span>
+                        <select
+                          className="rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                          value={sgOrder}
+                          onChange={(e) => setSgOrder(Number(e.target.value) as 2 | 3)}
+                        >
+                          <option value={2}>2</option>
+                          <option value={3}>3</option>
+                        </select>
+                      </label>
+                    </div>
+                  )}
+
+                  {filterType === 'hampel_sg' && (
+                    <div className="flex items-center gap-4 text-sm">
+                      <label className="flex items-center gap-2">
+                        <span>Hampel窗口:</span>
+                        <input
+                          type="number"
+                          className="w-16 rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                          value={hampelWindow}
+                          min={5}
+                          step={2}
+                          onChange={(e) => setHampelWindow(Number(e.target.value))}
+                        />
+                      </label>
+                      <label className="flex items-center gap-2">
+                        <span>阈值k:</span>
+                        <input
+                          type="number"
+                          className="w-16 rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                          value={hampelK}
+                          min={1}
+                          step={0.5}
+                          onChange={(e) => setHampelK(Number(e.target.value))}
+                        />
+                      </label>
+                      <label className="flex items-center gap-2">
+                        <span>SG窗口:</span>
+                        <input
+                          type="number"
+                          className="w-16 rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                          value={sgWindow}
+                          min={5}
+                          step={2}
+                          onChange={(e) => setSgWindow(Number(e.target.value))}
+                        />
+                      </label>
+                      <label className="flex items-center gap-2">
+                        <span>SG阶数:</span>
+                        <select
+                          className="rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                          value={sgOrder}
+                          onChange={(e) => setSgOrder(Number(e.target.value) as 2 | 3)}
+                        >
+                          <option value={2}>2</option>
+                          <option value={3}>3</option>
+                        </select>
+                      </label>
+                    </div>
+                  )}
+
+                  {filterType === 'gauss' && (
+                    <label className="flex items-center gap-2 text-sm">
+                      <span>σ(点):</span>
+                      <input
+                        type="range"
+                        min={0.5}
+                        max={10}
+                        step={0.5}
+                        value={gaussSigma}
+                        onChange={(e) => setGaussSigma(Number(e.target.value))}
+                        className="w-40"
+                      />
+                      <span className="w-12 text-right">{gaussSigma.toFixed(1)}</span>
+                    </label>
+                  )}
+
+                  {/* 由 Chart.js 图例控制数据集显示，不再使用本地 checkbox */}
+
                   <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,
                   datasets: [
                     {
                       type: 'line' as const,
-                      label: '码值',
-                      data: enableEma ? smoothedCode : rec.code,
+                      label: '原始码值',
+                      data: rec.code,
+                      borderColor: '#a1a1aa',
+                      backgroundColor: 'rgba(161,161,170,0.2)',
+                      borderDash: [4, 4] as any,
+                      borderWidth: 1,
+                      yAxisID: 'yCode',
+                      pointRadius: 0,
+                      hidden: true, // 默认不显示原始
+                    },
+                    {
+                      type: 'line' as const,
+                      label: '滤波码值',
+                      data: filterType === 'none' ? rec.code : filteredCode,
                       borderColor: '#0ea5e9',
                       backgroundColor: 'rgba(14,165,233,0.2)',
                       borderWidth: 1.5,
                       yAxisID: 'yCode',
                       pointRadius: 0,
+                      hidden: Boolean(rec?.fit), // 存在拟合时默认不显示滤波码值
                     },
                     ...(rec.fit && forceSeries
                       ? [
@@ -215,9 +417,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: {
@@ -228,17 +432,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: '时间 (s)' }, 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,
@@ -253,6 +459,7 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
                   }}
                   options={{
                     plugins: {
+                      legend: { display: false },
                       zoom: {
                         pan: { enabled: true, mode: 'x' as const },
                         zoom: {
@@ -262,27 +469,35 @@ 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 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 ? (
+                  <div className="relative h-56 sm:h-80">
                   <Scatter
                     data={{
                       datasets: [
                         {
                           label: '码值 vs 力值',
-                          data: (enableEma ? smoothedCode : rec.code).map((c, i) => ({ x: c, y: forceSeries[i] })),
+                          data: (filterType === 'none' ? rec.code : filteredCode).map((c: number, i: number) => ({ x: c, y: forceSeries[i] })),
                           backgroundColor: '#22c55e',
                         },
                       ],
                     }}
                     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 },
@@ -297,6 +512,7 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
                       },
                     }}
                   />
+                  </div>
                 ) : (
                   <div className="text-sm text-zinc-500">无拟合参数，无法绘制</div>
                 )}
@@ -318,6 +534,165 @@ function applyEMA(data: number[], alpha: number): number[] {
   return result
 }
 
+// ---- 进阶滤波工具函数 ----
+function makeOddSafe(w: number, len: number) {
+  let ww = Math.max(3, Math.min(Math.floor(w), len))
+  if (ww % 2 === 0) ww = ww - 1
+  if (ww < 3) ww = Math.min(len, 3)
+  if (ww % 2 === 0 && ww > 1) ww = ww - 1
+  return Math.max(1, ww)
+}
+
+function reflectIndex(i: number, n: number): number {
+  if (n <= 1) return 0
+  while (i < 0 || i >= n) {
+    if (i < 0) i = -i - 1
+    if (i >= n) i = 2 * n - i - 1
+  }
+  return i
+}
+
+function convolveReflect(data: number[], kernel: number[]): number[] {
+  const n = data.length
+  const m = kernel.length
+  const half = Math.floor(m / 2)
+  const out = new Array<number>(n)
+  for (let i = 0; i < n; i++) {
+    let acc = 0
+    for (let k = 0; k < m; k++) {
+      const idx = reflectIndex(i + k - half, n)
+      acc += data[idx] * kernel[k]
+    }
+    out[i] = acc
+  }
+  return out
+}
+
+function gaussianSmooth(data: number[], sigma: number): number[] {
+  if (data.length === 0) return []
+  if (sigma <= 0) return data.slice()
+  const radius = Math.max(1, Math.round(3 * sigma))
+  const size = radius * 2 + 1
+  const kernel = new Array<number>(size)
+  let sum = 0
+  for (let i = -radius; i <= radius; i++) {
+    const v = Math.exp(-0.5 * (i * i) / (sigma * sigma))
+    kernel[i + radius] = v
+    sum += v
+  }
+  for (let i = 0; i < size; i++) kernel[i] /= sum
+  return convolveReflect(data, kernel)
+}
+
+// Savitzky–Golay 实现（中心点系数 + 反射卷积）
+function transpose(A: number[][]): number[][] {
+  const r = A.length, c = A[0].length
+  const T = Array.from({ length: c }, () => new Array<number>(r).fill(0))
+  for (let i = 0; i < r; i++) for (let j = 0; j < c; j++) T[j][i] = A[i][j]
+  return T
+}
+
+function matMul(A: number[][], B: number[][]): number[][] {
+  const r = A.length, klen = A[0].length, c = B[0].length
+  const out = Array.from({ length: r }, () => new Array<number>(c).fill(0))
+  for (let i = 0; i < r; i++) {
+    for (let k = 0; k < klen; k++) {
+      const aik = A[i][k]
+      for (let j = 0; j < c; j++) out[i][j] += aik * B[k][j]
+    }
+  }
+  return out
+}
+
+function invertMatrix(M: number[][]): number[][] {
+  const n = M.length
+  const A = M.map((row) => row.slice())
+  const I = Array.from({ length: n }, (_, i) => {
+    const r = new Array<number>(n).fill(0)
+    r[i] = 1
+    return r
+  })
+  // Gauss-Jordan
+  for (let i = 0; i < n; i++) {
+    // pivot
+    let pivot = A[i][i]
+    if (Math.abs(pivot) < 1e-12) {
+      // 找到下面非零行交换
+      let swap = i + 1
+      while (swap < n && Math.abs(A[swap][i]) < 1e-12) swap++
+      if (swap === n) throw new Error('Matrix not invertible')
+      const tmpA = A[i]; A[i] = A[swap]; A[swap] = tmpA
+      const tmpI = I[i]; I[i] = I[swap]; I[swap] = tmpI
+      pivot = A[i][i]
+    }
+    const invPivot = 1 / pivot
+    for (let j = 0; j < n; j++) { A[i][j] *= invPivot; I[i][j] *= invPivot }
+    for (let r = 0; r < n; r++) {
+      if (r === i) continue
+      const factor = A[r][i]
+      if (factor === 0) continue
+      for (let j = 0; j < n; j++) {
+        A[r][j] -= factor * A[i][j]
+        I[r][j] -= factor * I[i][j]
+      }
+    }
+  }
+  return I
+}
+
+function sgCoefficients(windowSize: number, polyOrder: number): number[] {
+  const m = Math.floor(windowSize / 2)
+  const rows = windowSize
+  const cols = polyOrder + 1
+  // 构造范德蒙德矩阵 A，x ∈ [-m, m]
+  const A = Array.from({ length: rows }, (_, r) => {
+    const x = r - m
+    const row = new Array<number>(cols)
+    let xp = 1
+    for (let c = 0; c < cols; c++) { row[c] = xp; xp *= x }
+    return row
+  })
+  const AT = transpose(A)
+  const ATA = matMul(AT, A)
+  const ATAi = invertMatrix(ATA)
+  const pinv = matMul(ATAi, AT) // (cols x rows)
+  const c = pinv[0] // 第一行对应在 x=0 处的估计系数
+  return c
+}
+
+function savitzkyGolay(data: number[], windowSize: number, polyOrder: 2 | 3): number[] {
+  if (data.length === 0) return []
+  const w = makeOddSafe(windowSize, data.length)
+  const coeff = sgCoefficients(w, polyOrder)
+  return convolveReflect(data, coeff)
+}
+
+// Hampel 过滤，先去异常值，再可串联平滑
+function median(arr: number[]): number {
+  if (arr.length === 0) return 0
+  const a = arr.slice().sort((x, y) => x - y)
+  const mid = Math.floor(a.length / 2)
+  return a.length % 2 === 0 ? (a[mid - 1] + a[mid]) / 2 : a[mid]
+}
+
+function hampelFilter(data: number[], windowSize: number, k: number): number[] {
+  if (data.length === 0) return []
+  const n = data.length
+  const w = makeOddSafe(windowSize, n)
+  const half = Math.floor(w / 2)
+  const out = data.slice()
+  for (let i = 0; i < n; i++) {
+    const win: number[] = []
+    for (let t = -half; t <= half; t++) win.push(data[reflectIndex(i + t, n)])
+    const med = median(win)
+    const absDev = win.map((v) => Math.abs(v - med))
+    const mad = median(absDev)
+    const s0 = (mad || 1e-12) * 1.4826
+    if (Math.abs(data[i] - med) > k * s0) out[i] = med
+  }
+  return out
+}
+
 function buildHistogram(values: number[], bins: number) {
   if (!values.length || bins <= 0) return { labels: [] as string[], counts: [] as number[] }
   let min = values[0]