重构管理员页面使用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

@@ -1,254 +1,46 @@
-"use client"
-import { useEffect, useMemo, useState } from 'react'
-import Link from 'next/link'
+import { prisma } from '@/src/lib/prisma'
+import AdminClient from './AdminClient'
 
 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 AdminPage() {
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [data, setData] = useState<AdminRecordItem[]>([])
-  const [selected, setSelected] = useState<Set<string>>(new Set())
-  const [page, setPage] = useState(1)
-  const [pageSize] = useState(50)
-  const [total, setTotal] = useState(0)
-  const [editingTimes, setEditingTimes] = useState<Record<string, string>>({})
-  const [dirty, setDirty] = useState<Record<string, boolean>>({})
-
-  const totalPages = useMemo(() => Math.max(1, Math.ceil(total / pageSize)), [total, pageSize])
-
-  useEffect(() => {
-    const controller = new AbortController()
-    async function run() {
-      setLoading(true)
-      setError(null)
-      try {
-        const params = new URLSearchParams()
-        params.set('page', String(page))
-        params.set('pageSize', String(pageSize))
-        const res = await fetch(`/api/records?${params.toString()}`, { signal: controller.signal })
-        if (!res.ok) throw new Error(`HTTP ${res.status}`)
-        const j = await res.json()
-        const rows = j.data.map((r: any) => ({ id: r.id, timestamp: r.timestamp, sampleCount: r.sampleCount }))
-        setData(rows)
-        setTotal(j.pagination.total)
-        setSelected(new Set())
-        setEditingTimes((prev) => {
-          const next: Record<string, string> = {}
-          for (const r of rows) {
-            const isoLocal = toLocalInputValue(r.timestamp)
-            next[r.id] = prev[r.id] ?? isoLocal
-          }
-          return next
-        })
-        setDirty({})
-      } catch (e: any) {
-        if (e.name !== 'AbortError') setError(e.message || '加载失败')
-      } finally {
-        setLoading(false)
-      }
-    }
-    run()
-    return () => controller.abort()
-  }, [page, pageSize])
-
-  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)))
-      setTotal((prev) => Math.max(0, prev - deletedIds.length))
-      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('修改时间失败')
-    }
-  }
-
-  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>
-
-        {error && <div className="mb-3 rounded bg-red-100 px-3 py-2 text-sm text-red-800">{error}</div>}
-
-        <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>
-          {loading && (
-            <div className="px-3 py-3 text-sm text-zinc-500">加载中...</div>
-          )}
-          {!loading && 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={() => setNowFor(r.id)} className="rounded border px-1.5 py-0.5 text-[10px]">现在</button>
-                    <button onClick={() => shiftMinutes(r.id, 1)} className="rounded border px-1.5 py-0.5 text-[10px]">+1min</button>
-                    <button onClick={() => shiftMinutes(r.id, 10)} className="rounded border px-1.5 py-0.5 text-[10px]">+10min</button>
-                    <button onClick={() => applyTime(r.id)} className="rounded bg-zinc-900 px-2 py-0.5 text-[10px] text-white dark:bg-zinc-100 dark:text-black">应用</button>
-                  </div>
-                </div>
-                <div className="mt-1 text-[11px] text-zinc-500 sm:hidden">
-                  当前：{new Date(r.timestamp).toLocaleString()} · 点数 {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={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>上一页</button>
-            <div className="text-xs">{page} / {totalPages}</div>
-            <button className="rounded border px-3 py-1.5 disabled:opacity-50" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page >= totalPages}>下一页</button>
-          </div>
-        </section>
-      </div>
-    </div>
-  )
+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} />
 }