@allbluecn/admin-app 0.3.2 → 0.3.4

package/src/routes/_nav/knowledge-public/bookmarks/route.lazy.tsx

@@ -37,21 +37,12 @@ import {
 const categoryIconMap: Record<string, LucideIcon> = {
   Folder, Globe, Code, Book, BookOpen,
 }
-import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Badge } from '@/components/ui/badge'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-import { toast } from '@/components/ui/toast'
+import { DataTable, type AdminColumnDef } from '@allbluecn/ui/data-table'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import { Badge } from '@allbluecn/ui/badge'
+import { ConfirmDialog } from '@allbluecn/ui/components/confirm-dialog'
+import { toast } from '@allbluecn/ui/toast'
 import {
   BookmarkFormDialog,
   type BookmarkRow,
@@ -326,29 +317,18 @@ function BookmarksPage() {
         onSuccess={refresh}
       />
 
-      <AlertDialog open={!!deleting} onOpenChange={(o: boolean) => !o && setDeleting(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{m.common_knowledgePublic_bookmarks_deleteConfirmTitle()}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {m.common_knowledgePublic_bookmarks_deleteConfirmDesc({ title: deleting?.title ?? '' })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={deletePending}>{m.common_common_cancel()}</AlertDialogCancel>
-            <AlertDialogAction
-               onClick={(e: React.MouseEvent) => {
-                 e.preventDefault()
-                 confirmDelete()
-               }}
-               disabled={deletePending}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {deletePending ? m.common_common_deleting() : m.common_common_delete()}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDialog
+        open={!!deleting}
+        onOpenChange={(o: boolean) => !o && setDeleting(null)}
+        title={m.common_knowledgePublic_bookmarks_deleteConfirmTitle()}
+        description={m.common_knowledgePublic_bookmarks_deleteConfirmDesc({ title: deleting?.title ?? '' })}
+        cancelLabel={m.common_common_cancel()}
+        confirmLabel={deletePending ? m.common_common_deleting() : m.common_common_delete()}
+        confirmClassName="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+        confirmDisabled={deletePending}
+        cancelDisabled={deletePending}
+        onConfirm={confirmDelete}
+      />
     </div>
   )
 }

package/src/routes/_nav/knowledge-public/compliance/route.lazy.tsx

@@ -19,21 +19,12 @@ import { createLazyFileRoute, useNavigate, useRouter } from '@tanstack/react-rou
 import { m } from '@/paraglide/messages.js'
 import { useState, useTransition } from 'react'
 import { PlusIcon, PencilIcon, Trash2Icon, SearchIcon } from 'lucide-react'
-import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Badge } from '@/components/ui/badge'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-import { toast } from '@/components/ui/toast'
+import { DataTable, type AdminColumnDef } from '@allbluecn/ui/data-table'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import { Badge } from '@allbluecn/ui/badge'
+import { ConfirmDialog } from '@allbluecn/ui/components/confirm-dialog'
+import { toast } from '@allbluecn/ui/toast'
 import {
   ComplianceFormDialog,
   type ComplianceRow,
@@ -216,29 +207,18 @@ function CompliancePage() {
         onSuccess={refresh}
       />
 
-      <AlertDialog open={!!deleting} onOpenChange={(o: boolean) => !o && setDeleting(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{m.common_knowledgePublic_compliance_deleteConfirmTitle()}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {m.common_knowledgePublic_compliance_deleteConfirmDesc({ title: deleting?.title ?? '' })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={deletePending}>{m.common_common_cancel()}</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={(e: React.MouseEvent) => {
-                e.preventDefault()
-                confirmDelete()
-              }}
-              disabled={deletePending}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {deletePending ? m.common_common_deleting() : m.common_common_delete()}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDialog
+        open={!!deleting}
+        onOpenChange={(o: boolean) => !o && setDeleting(null)}
+        title={m.common_knowledgePublic_compliance_deleteConfirmTitle()}
+        description={m.common_knowledgePublic_compliance_deleteConfirmDesc({ title: deleting?.title ?? '' })}
+        cancelLabel={m.common_common_cancel()}
+        confirmLabel={deletePending ? m.common_common_deleting() : m.common_common_delete()}
+        confirmClassName="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+        confirmDisabled={deletePending}
+        cancelDisabled={deletePending}
+        onConfirm={confirmDelete}
+      />
     </div>
   )
 }

package/src/routes/_nav/knowledge-public/legal/route.lazy.tsx

@@ -19,10 +19,10 @@ import { createLazyFileRoute, useNavigate, useRouter } from '@tanstack/react-rou
 import { m } from '@/paraglide/messages.js'
 import { useState, useTransition } from 'react'
 import { PlusIcon, PencilIcon, Trash2Icon, SearchIcon } from 'lucide-react'
-import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Badge } from '@/components/ui/badge'
+import { DataTable, type AdminColumnDef } from '@allbluecn/ui/data-table'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import { Badge } from '@allbluecn/ui/badge'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -32,8 +32,8 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-import { toast } from '@/components/ui/toast'
+} from '@allbluecn/ui/alert-dialog'
+import { toast } from '@allbluecn/ui/toast'
 import { LegalFormDialog, type LegalRow } from '@/components/knowledge-public/legal-form-dialog'
 import { adminDeleteLegalFn } from '@/server/serverFns/knowledge-public/legal/delete'
 

package/src/routes/_nav/licenses/$licenseId/route.lazy.tsx

@@ -18,10 +18,10 @@
 import { createLazyFileRoute, Link, useNavigate } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
 import { useServerFn } from '@tanstack/react-start'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import type React from 'react'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@allbluecn/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@allbluecn/ui/card'
 import { revokeLicenseFn } from '@/server/serverFns/licenses'
 
 export const Route = createLazyFileRoute('/_nav/licenses/$licenseId')({

package/src/routes/_nav/licenses/new/route.lazy.tsx

@@ -22,11 +22,11 @@ import { useState } from 'react'
 import { useForm } from '@tanstack/react-form'
 import { useServerFn } from '@tanstack/react-start'
 import { Check, Copy } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@allbluecn/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@allbluecn/ui/card'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
+import { Alert, AlertDescription, AlertTitle } from '@allbluecn/ui/alert'
 import { issueLicenseFn } from '@/server/serverFns/licenses'
 import { FeatureRegistry } from '@allbluecn/kernel'
 

package/src/routes/_nav/licenses/route.lazy.tsx

@@ -18,7 +18,7 @@
 import { createLazyFileRoute, Link } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
 import type React from 'react'
-import { Button } from '@/components/ui/button'
+import { Button } from '@allbluecn/ui/button'
 
 export const Route = createLazyFileRoute('/_nav/licenses')({
   pendingComponent: () => (

package/src/routes/_nav/monitoring/ai-usage/route.lazy.tsx

@@ -8,8 +8,8 @@ import { tooltip } from '@tanstack/charts/tooltip'
 import { Chart } from '@tanstack/charts/react'
 import { BarChart3, AlertCircle, AlertTriangle, ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Card, CardContent, CardHeader, CardTitle } from '@allbluecn/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@allbluecn/ui/table'
 import { getAiUsageOverviewFn } from '@/server/serverFns/monitoring/get-ai-usage-overview'
 import { checkAiAlertsFn } from '@/server/serverFns/monitoring/check-ai-alerts'
 import type { AiUsageOverview } from '@/server/admin-ai-usage'

package/src/routes/_nav/monitoring/errors/route.lazy.tsx

@@ -17,37 +17,37 @@
 
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { AlertTriangle, RefreshCw, Trash2 } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { ErrorList } from '@/components/monitoring/error-list'
+import { ErrorItem } from '@/components/monitoring/error-list'
 import { getErrors } from '@/server/serverFns/monitoring/get-errors'
 import { resetMonitoring } from '@/server/serverFns/monitoring/reset'
-import { toast } from '@/components/ui/toast'
+import { jsonify } from '@/lib/loader-serial'
+import { toast } from '@allbluecn/ui/toast'
 
 export const Route = createLazyFileRoute('/_nav/monitoring/errors')({
   component: MonitoringErrors,
 })
 
 function MonitoringErrors() {
-  const [loading, setLoading] = useState(true)
-  const [data, setData] = useState<any>(null)
+  const initial = Route.useLoaderData()
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState(initial)
 
   const loadData = async () => {
     setLoading(true)
     try {
       const result = await getErrors()
-      setData(result)
+      // Date → ISO 字符串，与 loader 预取形态对齐
+      setData(jsonify(result))
     } catch {
       // ignore
     }
     setLoading(false)
   }
 
-  useEffect(() => {
-    loadData()
-  }, [])
-
   const handleReset = async () => {
     try {
       await resetMonitoring({ data: { type: 'errors' } })
@@ -101,7 +101,7 @@ function MonitoringErrors() {
           <RefreshCw className="size-5 animate-spin text-muted-foreground" />
         </div>
       ) : data?.errors?.length > 0 ? (
-        <ErrorList errors={data.errors} />
+        <ErrorList errors={data.errors as ErrorItem[]} />
       ) : (
         <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">{m.common_monitoring_errors_empty()}</div>
       )}

package/src/routes/_nav/monitoring/errors/route.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { getErrors } from '@/server/serverFns/monitoring/get-errors'
+import { jsonify } from '@/lib/loader-serial'
+
+export const Route = createFileRoute('/_nav/monitoring/errors')({
+  loader: async () => jsonify(await getErrors()),
+})

package/src/routes/_nav/monitoring/health/route.lazy.tsx

@@ -18,32 +18,29 @@
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
 import { useState, useEffect, useRef } from 'react'
-import { formatTimestamp } from '@allbluecn/web-app/lib/datetime'
+import { formatTimestamp } from '@allbluecn/ui/lib/datetime'
 import { HeartPulse, Play, Square, RefreshCw } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { HealthCards } from '@/components/monitoring/health-cards'
-import { DataTable } from '@/components/data-table/data-table'
+import { DataTable } from '@allbluecn/ui/data-table'
 import { getHealthStatus } from '@/server/serverFns/monitoring/get-health'
 import { getHealthCheckSettings, updateHealthCheckSettings } from '@/server/serverFns/monitoring/get-health-settings'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
+import { jsonify } from '@/lib/loader-serial'
 
 export const Route = createLazyFileRoute('/_nav/monitoring/health')({
   component: MonitoringHealth,
 })
 
 function MonitoringHealth() {
-  const [loading, setLoading] = useState(true)
-  const [data, setData] = useState<any>(null)
-  const [autoEnabled, setAutoEnabled] = useState(true)
-  const [autoLoading, setAutoLoading] = useState(true)
+  const initial = Route.useLoaderData()
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState(initial.data)
+  const [autoEnabled, setAutoEnabled] = useState(initial.settings.enabled)
+  const [autoLoading, setAutoLoading] = useState(false)
   const [countdown, setCountdown] = useState(30)
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
-  useEffect(() => {
-    loadHealth()
-    loadSettings()
-  }, [])
-
   useEffect(() => {
     if (timerRef.current) clearInterval(timerRef.current)
     if (autoEnabled) {
@@ -64,7 +61,8 @@ function MonitoringHealth() {
     setLoading(true)
     try {
       const result = await getHealthStatus()
-      setData(result)
+      // Date → ISO 字符串，与 loader 预取形态对齐
+      setData(jsonify(result))
     } catch {
       // ignore
     }
@@ -158,7 +156,7 @@ function MonitoringHealth() {
               <p className="text-sm font-medium">{m.common_monitoring_health_database_title()}</p>
               <p className="text-xs text-muted-foreground mt-1">
                 {data.current.checks.database.status === 'connected'
-                  ? m.common_monitoring_health_database_connected({ latency: data.current.checks.database.latency })
+                  ? m.common_monitoring_health_database_connected({ latency: data.current.checks.database.latency! })
                   : `${m.common_monitoring_health_database_failed()}: ${data.current.checks.database.error || m.common_monitoring_health_database_unknownError()}`}
               </p>
             </div>
@@ -178,7 +176,7 @@ function MonitoringHealth() {
             <h3 className="text-sm font-medium">{m.common_monitoring_health_history()}</h3>
           </div>
           <div className="p-4 flex-1 min-h-0">
-            <HistoryTable data={data.recent} />
+            <HistoryTable data={data.recent as HealthHistoryRow[]} />
           </div>
         </div>
       )}

package/src/routes/_nav/monitoring/health/route.tsx

@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { getHealthStatus } from '@/server/serverFns/monitoring/get-health'
+import { getHealthCheckSettings } from '@/server/serverFns/monitoring/get-health-settings'
+import { jsonify } from '@/lib/loader-serial'
+
+export const Route = createFileRoute('/_nav/monitoring/health')({
+  loader: async () => {
+    const [data, settings] = await Promise.all([
+      getHealthStatus(),
+      getHealthCheckSettings(),
+    ])
+    return jsonify({ data, settings })
+  },
+})

package/src/routes/_nav/monitoring/logs/route.lazy.tsx

@@ -17,24 +17,28 @@
 
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Activity, Filter, RefreshCw, Trash2 } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { RequestLogTable } from '@/components/monitoring/request-log-table'
-import { Checkbox } from '@/components/ui/checkbox'
+import { Checkbox } from '@allbluecn/ui/checkbox'
 import { getRequestLogs } from '@/server/serverFns/monitoring/get-request-logs'
 import { resetMonitoring } from '@/server/serverFns/monitoring/reset'
-import { DataTablePagination } from '@/components/data-table/data-table-pagination'
-import { toast } from '@/components/ui/toast'
+import { DataTablePagination } from '@allbluecn/ui/data-table/pagination'
+import { toast } from '@allbluecn/ui/toast'
+import { jsonify } from '@/lib/loader-serial'
+import { RequestLogEntry } from '@/components/monitoring/request-log-table'
 
 export const Route = createLazyFileRoute('/_nav/monitoring/logs')({
   component: MonitoringLogs,
 })
 
 function MonitoringLogs() {
-  const [loading, setLoading] = useState(true)
-  const [logs, setLogs] = useState<any[]>([])
-  const [total, setTotal] = useState(0)
+  const initial = Route.useLoaderData()
+  const skipFirstLoadRef = useRef(true)
+  const [loading, setLoading] = useState(false)
+  const [logs, setLogs] = useState(initial.logs)
+  const [total, setTotal] = useState(initial.total)
   const [page, setPage] = useState(1)
   const [method, setMethod] = useState('')
   const [status, setStatus] = useState('')
@@ -55,7 +59,8 @@ function MonitoringLogs() {
           excludeMonitoring: filterMonitoring,
         },
       })
-      setLogs(result.logs)
+      // Date → ISO 字符串，与 loader 预取形态对齐
+      setLogs(jsonify(result.logs))
       setTotal(result.total)
     } catch {
       // ignore
@@ -64,6 +69,11 @@ function MonitoringLogs() {
   }
 
   useEffect(() => {
+    // 初始数据已由 route.tsx loader 预取（与 loader 同参），跳过挂载即重复请求
+    if (skipFirstLoadRef.current) {
+      skipFirstLoadRef.current = false
+      return
+    }
     loadLogs()
   }, [page, method, status, path, filterMonitoring])
 
@@ -145,13 +155,18 @@ function MonitoringLogs() {
       ) : logs.length > 0 ? (
         <div className="flex-1 min-h-0 flex flex-col">
           <RequestLogTable
-            logs={logs}
+            logs={logs as RequestLogEntry[]}
             actions={
               <DataTablePagination
                 page={page}
                 totalPages={Math.ceil(total / limit)}
                 total={total}
                 onPageChange={setPage}
+                labels={{
+                  total: m.common_pagination_total({ total, page, totalPages: Math.ceil(total / limit) }),
+                  previous: m.common_pagination_prev(),
+                  next: m.common_pagination_next(),
+                }}
               />
             }
           />

package/src/routes/_nav/monitoring/logs/route.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { getRequestLogs } from '@/server/serverFns/monitoring/get-request-logs'
+import { jsonify } from '@/lib/loader-serial'
+
+export const Route = createFileRoute('/_nav/monitoring/logs')({
+  loader: async () => {
+    const result = await getRequestLogs({
+      data: { limit: 50, offset: 0, excludeMonitoring: false },
+    })
+    // Date → ISO 字符串：与客户端 RPC 返回形态对齐（组件按 string 时间戳渲染）
+    return jsonify(result)
+  },
+})

package/src/routes/_nav/monitoring/metrics/route.lazy.tsx

@@ -15,20 +15,20 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { describeMetric } from '@/lib/monitoring-descriptions'
 import { m } from '@/paraglide/messages.js'
 import { getBenchmark, getBenchmarkSource, compareDuration } from '@/lib/monitoring-benchmarks'
-import { formatTimestamp } from '@allbluecn/web-app/lib/datetime'
+import { formatTimestamp } from '@allbluecn/ui/lib/datetime'
 import { createLazyFileRoute } from '@tanstack/react-router'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { BarChart3, RefreshCw, Trash2, MemoryStick } from 'lucide-react'
 import { ArrowDown, ArrowUp } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { MetricsStats } from '@/components/monitoring/metrics-stats'
 import { getMetrics } from '@/server/serverFns/monitoring/get-metrics'
 import { resetMonitoring } from '@/server/serverFns/monitoring/reset'
-import { DataTable } from '@/components/data-table/data-table'
-import { toast } from '@/components/ui/toast'
+import { jsonify } from '@/lib/loader-serial'
+import { DataTable } from '@allbluecn/ui/data-table'
+import { toast } from '@allbluecn/ui/toast'
 
 export const Route = createLazyFileRoute('/_nav/monitoring/metrics')({
   component: MonitoringMetrics,
@@ -41,24 +41,22 @@ function formatBytes(bytes: number): string {
 }
 
 function MonitoringMetrics() {
-  const [loading, setLoading] = useState(true)
-  const [data, setData] = useState<any>(null)
+  const initial = Route.useLoaderData()
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState(initial)
 
   const loadData = async () => {
     setLoading(true)
     try {
       const result = await getMetrics()
-      setData(result)
+      // Date → ISO 字符串，与 loader 预取形态对齐
+      setData(jsonify(result))
     } catch {
       // ignore
     }
     setLoading(false)
   }
 
-  useEffect(() => {
-    loadData()
-  }, [])
-
   const handleReset = async () => {
     try {
       await resetMonitoring({ data: { type: 'metrics' } })
@@ -133,7 +131,7 @@ function MonitoringMetrics() {
             <h3 className="text-sm font-medium">{m.common_monitoring_metrics_history()}</h3>
           </div>
           <div className="p-4 flex-1 min-h-0">
-            <MetricsHistoryTable data={data.history} />
+            <MetricsHistoryTable data={data.history as MetricsHistoryRow[]} />
           </div>
         </div>
       )}
@@ -141,7 +139,7 @@ function MonitoringMetrics() {
   )
 }
 
-interface MetricsHistoryRow {
+export interface MetricsHistoryRow {
   metricName: string
   count: number
   avg: number

package/src/routes/_nav/monitoring/metrics/route.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { getMetrics } from '@/server/serverFns/monitoring/get-metrics'
+import { jsonify } from '@/lib/loader-serial'
+
+export const Route = createFileRoute('/_nav/monitoring/metrics')({
+  loader: async () => jsonify(await getMetrics()),
+})

package/src/routes/_nav/monitoring/overview/route.lazy.tsx

@@ -17,7 +17,7 @@
 
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { Activity, RefreshCw } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { HealthCards } from '@/components/monitoring/health-cards'
@@ -26,16 +26,19 @@ import { MetricsStats } from '@/components/monitoring/metrics-stats'
 import { getHealthStatus } from '@/server/serverFns/monitoring/get-health'
 import { getErrors } from '@/server/serverFns/monitoring/get-errors'
 import { getMetrics } from '@/server/serverFns/monitoring/get-metrics'
+import { jsonify } from '@/lib/loader-serial'
+import { ErrorItem } from '@/components/monitoring/error-list'
 
 export const Route = createLazyFileRoute('/_nav/monitoring/overview')({
   component: MonitoringOverview,
 })
 
 function MonitoringOverview() {
-  const [loading, setLoading] = useState(true)
-  const [health, setHealth] = useState<any>(null)
-  const [errors, setErrors] = useState<any>(null)
-  const [metrics, setMetrics] = useState<any>(null)
+  const initial = Route.useLoaderData()
+  const [loading, setLoading] = useState(false)
+  const [health, setHealth] = useState(initial.health)
+  const [errors, setErrors] = useState(initial.errors)
+  const [metrics, setMetrics] = useState(initial.metrics)
 
   const loadData = async () => {
     setLoading(true)
@@ -45,19 +48,17 @@ function MonitoringOverview() {
         getErrors(),
         getMetrics(),
       ])
-      setHealth(h)
-      setErrors(e)
-      setMetrics(m)
+      // Date → ISO 字符串，与 loader 预取形态对齐
+      const j = jsonify({ h, e, m })
+      setHealth(j.h)
+      setErrors(j.e)
+      setMetrics(j.m)
     } catch {
       // ignore
     }
     setLoading(false)
   }
 
-  useEffect(() => {
-    loadData()
-  }, [])
-
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -112,7 +113,7 @@ function MonitoringOverview() {
           </div>
           <div className="p-4">
             {errors?.errors?.slice(0, 5).length > 0 ? (
-              <ErrorList errors={errors.errors.slice(0, 5)} />
+              <ErrorList errors={errors.errors.slice(0, 5) as ErrorItem[]} />
             ) : (
               <p className="text-sm text-muted-foreground text-center py-4">{m.common_monitoring_overview_recentErrors_empty()}</p>
             )}

package/src/routes/_nav/monitoring/overview/route.tsx

@@ -0,0 +1,17 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { getHealthStatus } from '@/server/serverFns/monitoring/get-health'
+import { getErrors } from '@/server/serverFns/monitoring/get-errors'
+import { getMetrics } from '@/server/serverFns/monitoring/get-metrics'
+import { jsonify } from '@/lib/loader-serial'
+
+export const Route = createFileRoute('/_nav/monitoring/overview')({
+  loader: async () => {
+    const [health, errors, metrics] = await Promise.all([
+      getHealthStatus(),
+      getErrors(),
+      getMetrics(),
+    ])
+    // Date → ISO 字符串：与客户端 RPC 返回形态对齐（组件按 string 时间戳渲染）
+    return jsonify({ health, errors, metrics })
+  },
+})