feat(ui): 使用 Recharts 并改为客户端 API 请求

src/routes/batteries.tsx

@@ -1,13 +1,10 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { orpc } from '@/client/orpc'
 import type { BatteryInfo } from '@/domain/battery'
 
 export const Route = createFileRoute('/batteries')({
   component: BatteriesPage,
-  loader: async ({ context }) => {
-    await context.queryClient.ensureQueryData(orpc.battery.batteries.queryOptions({ input: {} }))
-  },
   errorComponent: ({ error }) => (
     <main className="flex min-h-screen items-center justify-center bg-[#09090B]">
       <div className="text-center">
@@ -69,13 +66,32 @@ function DeviceCard({ item }: { item: BatteryInfo }) {
 }
 
 function BatteriesPage() {
-  const { data } = useSuspenseQuery(
+  const { data, error, isPending } = useQuery(
     orpc.battery.batteries.queryOptions({
       input: {},
       refetchInterval: 30_000,
     }),
   )
 
+  if (error) {
+    return (
+      <main className="flex min-h-screen items-center justify-center bg-[#09090B]">
+        <div className="text-center">
+          <p className="text-lg text-red-400">数据加载失败</p>
+          <p className="mt-2 text-sm text-zinc-500">{error.message}</p>
+        </div>
+      </main>
+    )
+  }
+
+  if (isPending || !data) {
+    return (
+      <main className="flex min-h-screen items-center justify-center bg-[#09090B]">
+        <p className="text-zinc-500">加载中…</p>
+      </main>
+    )
+  }
+
   return (
     <main className="min-h-screen bg-[#09090B] px-6 py-8 text-zinc-100">
       <header className="mx-auto max-w-7xl">