备注功能

app/api/data/route.ts

@@ -19,7 +19,7 @@ export async function POST(req: NextRequest) {
       return Response.json({ error: first?.message ?? 'invalid body' }, { status: 400 })
     }
     const { code, fit, recStartMs, recEndMs } = parsed.data
-    if (code.length > 4096) {
+    if (code.length > 16384) {
       return Response.json({ error: 'payload too large' }, { status: 413 })
     }
 

app/api/records/[id]/route.ts

@@ -2,10 +2,11 @@ import { NextRequest } from 'next/server'
 import { prisma } from '@/src/lib/prisma'
 import { isAuthorizedDelete } from '@/src/lib/utils'
 
-export async function GET(_req: NextRequest, { params }: { params: { id: string } }) {
+export async function GET(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
   try {
     const rec = await prisma.recording.findUnique({
-      where: { id: params.id },
+      where: { id },
       select: {
         id: true,
         timestamp: true,
@@ -46,12 +47,13 @@ export async function GET(_req: NextRequest, { params }: { params: { id: string
   }
 }
 
-export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) {
+export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
   try {
     if (!isAuthorizedDelete(req)) {
       return Response.json({ error: 'unauthorized' }, { status: 401 })
     }
-    const rec = await prisma.recording.delete({ where: { id: params.id } })
+    const rec = await prisma.recording.delete({ where: { id } })
     return Response.json({ success: true, id: rec.id })
   } catch (err: any) {
     if (err?.code === 'P2025') {
@@ -61,3 +63,29 @@ export async function DELETE(req: NextRequest, { params }: { params: { id: strin
     return Response.json({ error: 'internal error' }, { status: 500 })
   }
 }
+
+export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  try {
+    const body = await req.json()
+    const { note } = body
+
+    if (note !== undefined && typeof note !== 'string') {
+      return Response.json({ error: 'invalid note' }, { status: 400 })
+    }
+
+    const rec = await prisma.recording.update({
+      where: { id },
+      data: { note: note || null },
+      select: { id: true, note: true },
+    })
+
+    return Response.json({ success: true, id: rec.id, note: rec.note })
+  } catch (err: any) {
+    if (err?.code === 'P2025') {
+      return Response.json({ error: 'not found' }, { status: 404 })
+    }
+    console.error(err)
+    return Response.json({ error: 'internal error' }, { status: 500 })
+  }
+}

app/api/records/route.ts

@@ -54,6 +54,7 @@ export async function GET(req: NextRequest) {
           force_min: true,
           force_max: true,
           force_avg: true,
+          note: true,
         },
       }),
     ])
@@ -65,6 +66,7 @@ export async function GET(req: NextRequest) {
       duration: r.duration,
       hasFit: r.fit_a !== null && r.fit_a !== undefined,
       fit: r.fit_a !== null && r.fit_a !== undefined ? { a: r.fit_a!, b: r.fit_b! } : undefined,
+      note: r.note ?? undefined,
       stats: {
         codeMin: r.code_min,
         codeMax: r.code_max,

app/page.tsx

@@ -9,6 +9,7 @@ type RecordItem = {
   duration: number
   hasFit: boolean
   fit?: { a: number; b: number }
+  note?: string
   stats: {
     codeMin: number
     codeMax: number
@@ -31,9 +32,49 @@ export default function Home() {
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')
   const [startDate, setStartDate] = useState('')
   const [endDate, setEndDate] = useState('')
+  const [editingNote, setEditingNote] = useState<string | null>(null)
+  const [noteText, setNoteText] = useState('')
 
   const totalPages = useMemo(() => Math.max(1, Math.ceil(total / pageSize)), [total, pageSize])
 
+  async function handleDeleteRecord(id: string) {
+    if (!confirm('确定要删除这条记录吗?')) return
+    try {
+      const res = await fetch(`/api/records/${id}`, { method: 'DELETE' })
+      if (!res.ok) throw new Error('删除失败')
+      setData((prev) => prev.filter((r) => r.id !== id))
+      setTotal((prev) => prev - 1)
+    } catch (err) {
+      alert('删除失败')
+    }
+  }
+
+  async function handleSaveNote(id: string) {
+    try {
+      const res = await fetch(`/api/records/${id}`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ note: noteText }),
+      })
+      if (!res.ok) throw new Error('保存失败')
+      setData((prev) => prev.map((r) => (r.id === id ? { ...r, note: noteText } : r)))
+      setEditingNote(null)
+      setNoteText('')
+    } catch (err) {
+      alert('保存备注失败')
+    }
+  }
+
+  function startEditNote(id: string, currentNote?: string) {
+    setEditingNote(id)
+    setNoteText(currentNote || '')
+  }
+
+  function cancelEditNote() {
+    setEditingNote(null)
+    setNoteText('')
+  }
+
   useEffect(() => {
     const controller = new AbortController()
     async function run() {
@@ -78,17 +119,17 @@ export default function Home() {
               <label className="text-sm">结束</label>
               <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900" />
             </div>
-            <select value={hasFit} onChange={(e) => setHasFit(e.target.value )} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
+            <select value={hasFit} onChange={(e) => setHasFit(e.target.value as 'all' | 'fit' | 'raw')} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
               <option value="all">全部</option>
               <option value="fit">仅已拟合</option>
               <option value="raw">仅未拟合</option>
             </select>
-            <select value={sortBy} onChange={(e) => setSortBy(e.target.value )} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
+            <select value={sortBy} onChange={(e) => setSortBy(e.target.value as 'timestamp' | 'duration' | 'maxValue')} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
               <option value="timestamp">按时间</option>
               <option value="duration">按时长</option>
               <option value="maxValue">按最大值</option>
             </select>
-            <select value={sortOrder} onChange={(e) => setSortOrder(e.target.value )} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
+            <select value={sortOrder} onChange={(e) => setSortOrder(e.target.value as 'asc' | 'desc')} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
               <option value="desc">降序</option>
               <option value="asc">升序</option>
             </select>
@@ -107,7 +148,7 @@ export default function Home() {
             <div key={i} className="h-40 animate-pulse rounded-lg bg-zinc-200 dark:bg-zinc-800" />
           ))}
           {!loading && data.map((r) => (
-            <div key={r.id} className="flex h-48 flex-col justify-between rounded-lg border border-zinc-200 bg-white p-4 shadow-sm transition hover:shadow-md dark:border-zinc-800 dark:bg-zinc-950">
+            <div key={r.id} className="flex flex-col justify-between rounded-lg border border-zinc-200 bg-white p-4 shadow-sm transition hover:shadow-md dark:border-zinc-800 dark:bg-zinc-950">
               <div>
                 <div className="flex items-center justify-between">
                   <div className="text-sm text-zinc-500">{new Date(r.timestamp).toLocaleString()}</div>
@@ -125,13 +166,39 @@ export default function Home() {
                     </>
                   )}
                 </div>
+                {editingNote === r.id ? (
+                  <div className="mt-2 flex gap-2">
+                    <input
+                      type="text"
+                      value={noteText}
+                      onChange={(e) => setNoteText(e.target.value)}
+                      placeholder="添加备注..."
+                      className="flex-1 rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:border-zinc-700 dark:bg-zinc-900"
+                      autoFocus
+                    />
+                    <button onClick={() => handleSaveNote(r.id)} className="rounded bg-green-600 px-2 py-1 text-xs text-white">保存</button>
+                    <button onClick={cancelEditNote} className="rounded bg-zinc-500 px-2 py-1 text-xs text-white">取消</button>
                   </div>
-              <div className="flex items-center justify-between">
+                ) : (
+                  <div className="mt-2 min-h-[20px]">
+                    {r.note ? (
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex-1 text-xs text-zinc-600 dark:text-zinc-400">{r.note}</div>
+                        <button onClick={() => startEditNote(r.id, r.note)} className="text-xs text-blue-600 hover:underline dark:text-blue-400">编辑</button>
+                      </div>
+                    ) : (
+                      <button onClick={() => startEditNote(r.id)} className="text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300">+ 添加备注</button>
+                    )}
+                  </div>
+                )}
+              </div>
+              <div className="mt-3 flex items-center justify-between">
                 {r.hasFit && r.fit && (
                   <div className="text-[11px] text-zinc-500">y = {r.fit.a.toFixed(4)}x + {r.fit.b.toFixed(3)}</div>
                 )}
                 <div className="ml-auto flex gap-2">
                   <Link href={`/records/${r.id}`} className="rounded-md bg-zinc-900 px-3 py-1.5 text-sm text-white dark:bg-zinc-100 dark:text-black">查看</Link>
+                  <button onClick={() => handleDeleteRecord(r.id)} className="rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700">删除</button>
                 </div>
               </div>
             </div>

app/records/[id]/page.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useEffect, useMemo, useState } from 'react'
+import { use, useEffect, useMemo, useState } from 'react'
 import Link from 'next/link'
 import {
   Chart as ChartJS,
@@ -37,10 +37,13 @@ function toFixed(n: number | undefined | null, d = 3) {
   return n.toFixed(d)
 }
 
-export default function Page({ params }: { params: { id: string } }) {
+export default function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [rec, setRec] = useState<Detail | null>(null)
+  const [emaAlpha, setEmaAlpha] = useState(0.2)
+  const [enableEma, setEnableEma] = useState(false)
 
   useEffect(() => {
     const controller = new AbortController()
@@ -48,11 +51,12 @@ export default function Page({ params }: { params: { id: string } }) {
       setLoading(true)
       setError(null)
       try {
-        const res = await fetch(`/api/records/${params.id}`, { signal: controller.signal })
+        const res = await fetch(`/api/records/${id}`, { signal: controller.signal })
         if (!res.ok) throw new Error(`HTTP ${res.status}`)
         const j = await res.json()
         setRec(j)
-      } catch (e: any) {
+      } catch (e) {
+        // @ts-expect-error any
         if (e.name !== 'AbortError') setError(e.message || '加载失败')
       } finally {
         setLoading(false)
@@ -60,21 +64,30 @@ export default function Page({ params }: { params: { id: string } }) {
     }
     run()
     return () => controller.abort()
-  }, [params.id])
+  }, [id])
 
   const timeAxis = useMemo(() => {
     if (!rec) return [] as number[]
-    const step = rec.sampleCount > 0 ? rec.duration / rec.sampleCount : 0
+    const step = rec.sampleCount > 0 ? (rec.duration * 1000) / rec.sampleCount : 0
-    return Array.from({ length: rec.sampleCount }, (_, i) => +(i * step).toFixed(6))
+    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 forceSeries = useMemo(() => {
     if (!rec?.fit) return undefined
     const { a, b } = rec.fit
-    return rec.code.map((c) => a * c + b)
+    const dataToUse = enableEma ? smoothedCode : rec.code
-  }, [rec])
+    return dataToUse.map((c) => a * c + b)
+  }, [rec, enableEma, smoothedCode])
 
-  const codeHistogram = useMemo(() => buildHistogram(rec?.code || [], 30), [rec])
+  const codeHistogram = useMemo(() => {
+    const dataToUse = enableEma ? smoothedCode : (rec?.code || [])
+    return buildHistogram(dataToUse, 30)
+  }, [rec, enableEma, smoothedCode])
   const forceHistogram = useMemo(() => buildHistogram(forceSeries || [], 30), [forceSeries])
 
   return (
@@ -83,20 +96,20 @@ export default function Page({ params }: { params: { id: string } }) {
         <div className="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 || params.id}</h1>
+            <h1 className="text-xl font-semibold">记录 {rec?.id || id}</h1>
           </div>
           <div className="flex gap-2">
             <a
               href={`/api/export`}
               onClick={async (e) => {
                 e.preventDefault()
-                const body = JSON.stringify({ ids: [params.id], format: 'csv' as const })
+                const body = JSON.stringify({ ids: [id], format: 'csv' as const })
                 const res = await fetch('/api/export', { method: 'POST', headers: { 'content-type': 'application/json' }, body })
                 const blob = await res.blob()
                 const url = URL.createObjectURL(blob)
                 const a = document.createElement('a')
                 a.href = url
-                a.download = `record-${params.id}.csv`
+                a.download = `record-${id}.csv`
                 a.click()
                 URL.revokeObjectURL(url)
               }}
@@ -140,7 +153,35 @@ export default function Page({ params }: { params: { id: string } }) {
             </section>
 
             <section className="rounded-lg border p-4 dark:border-zinc-800">
-              <div className="mb-3 text-sm text-zinc-500">时序曲线</div>
+              <div className="mb-3 flex items-center justify-between">
+                <div className="text-sm text-zinc-500">时序曲线</div>
+                <div className="flex 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>
+                  </label>
+                  {enableEma && (
+                    <label className="flex items-center gap-2 text-sm">
+                      <span>α:</span>
+                      <input
+                        type="range"
+                        min="0.01"
+                        max="1"
+                        step="0.01"
+                        value={emaAlpha}
+                        onChange={(e) => setEmaAlpha(Number(e.target.value))}
+                        className="w-24"
+                      />
+                      <span className="w-12 text-right">{emaAlpha.toFixed(2)}</span>
+                    </label>
+                  )}
+                </div>
+              </div>
               <Line
                 data={{
                   labels: timeAxis,
@@ -148,7 +189,7 @@ export default function Page({ params }: { params: { id: string } }) {
                     {
                       type: 'line' as const,
                       label: '码值',
-                      data: rec.code,
+                      data: enableEma ? smoothedCode : rec.code,
                       borderColor: '#0ea5e9',
                       backgroundColor: 'rgba(14,165,233,0.2)',
                       borderWidth: 1.5,
@@ -176,7 +217,7 @@ export default function Page({ params }: { params: { id: string } }) {
                   interaction: { mode: 'index', intersect: false },
                   plugins: { legend: { position: 'top' as const } },
                   scales: {
-                    x: { title: { display: true, text: '时间 (s)' } },
+                    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 } },
                   },
@@ -210,7 +251,7 @@ export default function Page({ params }: { params: { id: string } }) {
                       datasets: [
                         {
                           label: '码值 vs 力值',
-                          data: rec.code.map((c, i) => ({ x: c, y: forceSeries[i] })),
+                          data: (enableEma ? smoothedCode : rec.code).map((c, i) => ({ x: c, y: forceSeries[i] })),
                           backgroundColor: '#22c55e',
                         },
                       ],
@@ -235,6 +276,15 @@ export default function Page({ params }: { params: { id: string } }) {
   )
 }
 
+function applyEMA(data: number[], alpha: number): number[] {
+  if (data.length === 0) return []
+  const result: number[] = [data[0]]
+  for (let i = 1; i < data.length; i++) {
+    result.push(alpha * data[i] + (1 - alpha) * result[i - 1])
+  }
+  return result
+}
+
 function buildHistogram(values: number[], bins: number) {
   if (!values.length || bins <= 0) return { labels: [] as string[], counts: [] as number[] }
   let min = values[0]

prisma/migrations/20251115073152_add_note_field/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Recording" ADD COLUMN     "note" VARCHAR(500);

prisma/schema.prisma

@@ -23,6 +23,7 @@ model Recording {
   force_min    Float?
   force_max    Float?
   force_avg    Float?
+  note         String?  @db.VarChar(500)
   created_at   DateTime @default(now())
 
   @@index([timestamp(sort: Desc)])