feat(ui): 添加克制页面动效

src/routes/batteries.tsx

@@ -5,6 +5,7 @@ import { ArrowLeft, Battery, BatteryCharging, BatteryLow, FilterX, Search, Zap }
 import { useEffect, useMemo, useState } from 'react'
 import { z } from 'zod'
 import { orpc } from '@/client/orpc'
+import { MotionCardDiv, MotionHeader, MotionSection, MotionTableRow } from '@/components/motion'
 import { Badge, Button, Card, Input, SectionTitle, Select } from '@/components/ui'
 import type { BatteryInfo, BatteryListSort, PowerStatus } from '@/domain/battery'
 import { BATTERY_LIST_SORT, BATTERY_LIST_SORT_VALUES, POWER_STATUS, POWER_STATUS_VALUES } from '@/domain/battery'
@@ -240,7 +241,7 @@ function BatteriesPage() {
       </div>
 
       <div className="relative z-10 mx-auto max-w-7xl px-6 py-8">
-        <header>
+        <MotionHeader>
           <div className="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
             <div>
               <Badge variant="info" className="mb-4">
@@ -265,28 +266,28 @@ function BatteriesPage() {
           </div>
 
           <dl className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-3">
-            <Card className="p-5">
+            <MotionCardDiv className="rounded-2xl border border-white/[0.08] bg-zinc-950/60 shadow-2xl shadow-black/20 p-5">
               <dt className="flex items-center gap-2 text-xs font-medium text-zinc-500">
                 <Battery className="size-4 text-zinc-400" /> 设备总数
               </dt>
               <dd className="mt-3 text-3xl font-light tabular-nums text-white">{data?.total ?? '-'}</dd>
-            </Card>
-            <Card className="p-5">
+            </MotionCardDiv>
+            <MotionCardDiv className="rounded-2xl border border-white/[0.08] bg-zinc-950/60 shadow-2xl shadow-black/20 p-5">
               <dt className="flex items-center gap-2 text-xs font-medium text-zinc-500">
                 <BatteryLow className="size-4 text-red-400" /> 低电量
               </dt>
               <dd className="mt-3 text-3xl font-light tabular-nums text-red-300">{data?.lowPower ?? '-'}</dd>
-            </Card>
-            <Card className="p-5">
+            </MotionCardDiv>
+            <MotionCardDiv className="rounded-2xl border border-white/[0.08] bg-zinc-950/60 shadow-2xl shadow-black/20 p-5">
               <dt className="flex items-center gap-2 text-xs font-medium text-zinc-500">
                 <BatteryCharging className="size-4 text-teal-300" /> 充电中
               </dt>
               <dd className="mt-3 text-3xl font-light tabular-nums text-teal-300">{data?.charging ?? '-'}</dd>
-            </Card>
+            </MotionCardDiv>
           </dl>
-        </header>
+        </MotionHeader>
 
-        <section className="mt-10">
+        <MotionSection delay={0.1} className="mt-10">
           <Card className="mb-6 p-5">
             <div className="mb-5 flex flex-wrap items-center justify-between gap-3">
               <SectionTitle
@@ -447,13 +448,13 @@ function BatteriesPage() {
                     </tr>
                   ) : (
                     table.getRowModel().rows.map((row) => (
-                      <tr key={row.id} className="transition-colors hover:bg-white/[0.02]">
+                      <MotionTableRow key={row.id} className="transition-colors hover:bg-white/[0.02]">
                         {row.getVisibleCells().map((cell) => (
                           <td key={cell.id} className="px-6 py-4 whitespace-nowrap">
                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                           </td>
                         ))}
-                      </tr>
+                      </MotionTableRow>
                     ))
                   )}
                 </tbody>
@@ -479,7 +480,7 @@ function BatteriesPage() {
               </Button>
             </div>
           </div>
-        </section>
+        </MotionSection>
       </div>
     </main>
   )