425 lines
15 KiB
TypeScript
425 lines
15 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
|
import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
|
|
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
|
|
import { useEffect, useMemo, useState } from 'react'
|
|
import { z } from 'zod'
|
|
import { orpc } from '@/client/orpc'
|
|
import type { BatteryInfo } from '@/domain/battery'
|
|
|
|
const sortOptions = ['createdAtDesc', 'createdAtAsc', 'powerDesc', 'powerAsc'] as const
|
|
type BatteryListSort = (typeof sortOptions)[number]
|
|
|
|
const powerStatusOptions = [0, 1, 2] as const
|
|
type PowerStatusFilter = (typeof powerStatusOptions)[number]
|
|
|
|
const pageSizeOptions = [20, 50, 100] as const
|
|
type PageSizeOption = (typeof pageSizeOptions)[number]
|
|
const firstPageCursor = '__FIRST_PAGE__'
|
|
|
|
const searchFilterSchema = z.preprocess(
|
|
(value) => (typeof value === 'string' ? value.trim() || undefined : value),
|
|
z.string().min(1).max(100).optional(),
|
|
)
|
|
|
|
const cursorSchema = z.preprocess(
|
|
(value) => (typeof value === 'string' ? value.trim() || undefined : value),
|
|
z.string().min(1).max(1024).optional(),
|
|
)
|
|
|
|
const searchSchema = z.object({
|
|
search: searchFilterSchema,
|
|
lowPower: z.boolean().optional(),
|
|
powerStatus: z.union([z.literal(0), z.literal(1), z.literal(2)]).optional(),
|
|
sort: z.enum(sortOptions).optional().default('createdAtDesc'),
|
|
pageSize: z.coerce
|
|
.number()
|
|
.pipe(z.union([z.literal(20), z.literal(50), z.literal(100)]))
|
|
.optional()
|
|
.default(50),
|
|
cursor: cursorSchema,
|
|
cursors: z.array(z.string().min(1).max(1024)).max(100).optional().default([]),
|
|
})
|
|
|
|
export const Route = createFileRoute('/batteries')({
|
|
validateSearch: (search) => searchSchema.parse(search),
|
|
component: BatteriesPage,
|
|
errorComponent: () => (
|
|
<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">请检查筛选条件后重试。</p>
|
|
</div>
|
|
</main>
|
|
),
|
|
})
|
|
|
|
const powerStatusLabel: Record<0 | 1 | 2, string> = {
|
|
0: '未充电',
|
|
1: '充电中',
|
|
2: '已充满',
|
|
}
|
|
|
|
const powerStatusColor: Record<0 | 1 | 2, string> = {
|
|
0: 'text-zinc-400',
|
|
1: 'text-teal-400',
|
|
2: 'text-emerald-400',
|
|
}
|
|
|
|
function powerBarColor(power: number, isLowPower: boolean): string {
|
|
if (isLowPower || power <= 20) return 'bg-red-500'
|
|
if (power <= 50) return 'bg-amber-500'
|
|
return 'bg-teal-500'
|
|
}
|
|
|
|
const columnHelper = createColumnHelper<BatteryInfo>()
|
|
|
|
function parseSort(value: string): BatteryListSort {
|
|
return sortOptions.find((option) => option === value) ?? 'createdAtDesc'
|
|
}
|
|
|
|
function parsePowerStatus(value: string): PowerStatusFilter | undefined {
|
|
const parsed = Number(value)
|
|
|
|
return powerStatusOptions.find((option) => option === parsed)
|
|
}
|
|
|
|
function parsePageSize(value: string): PageSizeOption {
|
|
const parsed = Number(value)
|
|
|
|
return pageSizeOptions.find((option) => option === parsed) ?? 50
|
|
}
|
|
|
|
function BatteriesPage() {
|
|
const search = Route.useSearch()
|
|
const navigate = useNavigate({ from: Route.fullPath })
|
|
const [localSearch, setLocalSearch] = useState(search.search || '')
|
|
|
|
useEffect(() => {
|
|
setLocalSearch(search.search ?? '')
|
|
}, [search.search])
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
const trimmedSearch = localSearch.trim()
|
|
const nextSearch = trimmedSearch || undefined
|
|
|
|
if (nextSearch !== search.search) {
|
|
navigate({
|
|
search: (prev) => ({ ...prev, search: nextSearch, cursor: undefined, cursors: [] }),
|
|
})
|
|
}
|
|
}, 500)
|
|
return () => clearTimeout(timer)
|
|
}, [localSearch, navigate, search.search])
|
|
|
|
const { data, error, isPending, isPlaceholderData } = useQuery(
|
|
orpc.battery.batteries.queryOptions({
|
|
input: {
|
|
search: search.search,
|
|
lowPower: search.lowPower,
|
|
powerStatus: search.powerStatus,
|
|
sort: search.sort,
|
|
pageSize: search.pageSize,
|
|
cursor: search.cursor,
|
|
},
|
|
refetchInterval: 30_000,
|
|
placeholderData: (prev) => prev,
|
|
}),
|
|
)
|
|
|
|
const columns = useMemo(
|
|
() => [
|
|
columnHelper.accessor('devName', {
|
|
header: '设备名称',
|
|
cell: (info) => (
|
|
<div className="flex flex-col">
|
|
<span className="font-medium text-zinc-100">{info.getValue()}</span>
|
|
<span className="text-[10px] text-zinc-500 tabular-nums">{info.row.original.mac}</span>
|
|
</div>
|
|
),
|
|
}),
|
|
columnHelper.accessor('devModel', {
|
|
header: '型号',
|
|
cell: (info) => <span className="text-zinc-400">{info.getValue()}</span>,
|
|
}),
|
|
columnHelper.accessor('power', {
|
|
header: '电量',
|
|
cell: (info) => {
|
|
const power = info.getValue()
|
|
const isLow = info.row.original.isLowPower
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<span className="w-8 text-right tabular-nums font-medium">{power}%</span>
|
|
<div className="h-1.5 w-16 overflow-hidden rounded-full bg-zinc-800">
|
|
<div className={`h-full ${powerBarColor(power, isLow)}`} style={{ width: `${power}%` }} />
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
}),
|
|
columnHelper.accessor('powerStatus', {
|
|
header: '状态',
|
|
cell: (info) => {
|
|
const status = info.getValue()
|
|
return <span className={`text-xs ${powerStatusColor[status]}`}>{powerStatusLabel[status]}</span>
|
|
},
|
|
}),
|
|
columnHelper.accessor('createTime', {
|
|
header: '最后更新',
|
|
cell: (info) => (
|
|
<span className="text-zinc-500 tabular-nums">{new Date(info.getValue()).toLocaleString('zh-CN')}</span>
|
|
),
|
|
}),
|
|
],
|
|
[],
|
|
)
|
|
|
|
const table = useReactTable({
|
|
data: data?.items ?? [],
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
})
|
|
|
|
const handleNextPage = () => {
|
|
if (!isPlaceholderData && data?.nextCursor) {
|
|
const nextCursor = data.nextCursor
|
|
navigate({
|
|
search: (prev) => ({
|
|
...prev,
|
|
cursor: nextCursor,
|
|
cursors: [...(prev.cursors || []), prev.cursor || firstPageCursor],
|
|
}),
|
|
})
|
|
}
|
|
}
|
|
|
|
const handlePrevPage = () => {
|
|
const newCursors = [...(search.cursors || [])]
|
|
const lastCursor = newCursors.pop()
|
|
navigate({
|
|
search: (prev) => ({
|
|
...prev,
|
|
cursor: lastCursor === firstPageCursor ? undefined : lastCursor,
|
|
cursors: newCursors,
|
|
}),
|
|
})
|
|
}
|
|
|
|
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">请稍后重试，或联系管理员检查数据源连接。</p>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[#09090B] text-zinc-100">
|
|
{/* Background gradient */}
|
|
<div className="pointer-events-none fixed inset-0 z-0 flex justify-center">
|
|
<div className="h-[600px] w-[1000px] -translate-y-1/2 rounded-full bg-teal-900/5 blur-[100px]" />
|
|
</div>
|
|
|
|
<div className="relative z-10 mx-auto max-w-7xl px-6 py-8">
|
|
<header>
|
|
<div className="flex items-end justify-between">
|
|
<div>
|
|
<h1 className="font-light text-3xl tracking-tight">设备电池实时状态</h1>
|
|
<p className="mt-1 text-sm text-zinc-500">
|
|
{data ? `更新于 ${new Date(data.updatedAt).toLocaleString('zh-CN')}` : '加载中…'}
|
|
</p>
|
|
</div>
|
|
<nav className="text-xs">
|
|
<Link to="/" className="text-zinc-500 hover:text-teal-400 transition-colors">
|
|
← 返回 SoH 看板
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
|
|
<dl className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
<div className="rounded-xl border border-white/5 bg-white/[0.02] p-5">
|
|
<dt className="text-xs font-medium text-zinc-500">设备总数</dt>
|
|
<dd className="mt-2 font-light text-3xl tabular-nums">{data?.total ?? '-'}</dd>
|
|
</div>
|
|
<div className="rounded-xl border border-white/5 bg-white/[0.02] p-5">
|
|
<dt className="text-xs font-medium text-zinc-500">低电量</dt>
|
|
<dd className="mt-2 font-light text-3xl tabular-nums text-red-400">{data?.lowPower ?? '-'}</dd>
|
|
</div>
|
|
<div className="rounded-xl border border-white/5 bg-white/[0.02] p-5">
|
|
<dt className="text-xs font-medium text-zinc-500">充电中</dt>
|
|
<dd className="mt-2 font-light text-3xl tabular-nums text-teal-400">{data?.charging ?? '-'}</dd>
|
|
</div>
|
|
</dl>
|
|
</header>
|
|
|
|
<section className="mt-10">
|
|
{/* Controls */}
|
|
<div className="mb-6 flex flex-wrap items-center gap-4">
|
|
<div className="relative flex-1 min-w-[240px]">
|
|
<input
|
|
type="text"
|
|
placeholder="搜索设备名称或 MAC..."
|
|
maxLength={100}
|
|
className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm focus:border-teal-500/50 focus:outline-none focus:ring-1 focus:ring-teal-500/50"
|
|
value={localSearch}
|
|
onChange={(e) => setLocalSearch(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<select
|
|
className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm focus:outline-none"
|
|
value={search.powerStatus ?? ''}
|
|
onChange={(e) => {
|
|
navigate({
|
|
search: (prev) => ({
|
|
...prev,
|
|
powerStatus: parsePowerStatus(e.target.value),
|
|
cursor: undefined,
|
|
cursors: [],
|
|
}),
|
|
})
|
|
}}
|
|
>
|
|
<option value="">所有充电状态</option>
|
|
<option value="0">未充电</option>
|
|
<option value="1">充电中</option>
|
|
<option value="2">已充满</option>
|
|
</select>
|
|
|
|
<label className="flex items-center gap-2 text-sm text-zinc-400 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
className="rounded border-white/10 bg-white/5 text-teal-500 focus:ring-teal-500/50"
|
|
checked={search.lowPower ?? false}
|
|
onChange={(e) =>
|
|
navigate({
|
|
search: (prev) => ({
|
|
...prev,
|
|
lowPower: e.target.checked || undefined,
|
|
cursor: undefined,
|
|
cursors: [],
|
|
}),
|
|
})
|
|
}
|
|
/>
|
|
仅看低电量
|
|
</label>
|
|
|
|
<div className="flex-1" />
|
|
|
|
<select
|
|
className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm focus:outline-none"
|
|
value={search.sort}
|
|
onChange={(e) => {
|
|
navigate({
|
|
search: (prev) => ({
|
|
...prev,
|
|
sort: parseSort(e.target.value),
|
|
cursor: undefined,
|
|
cursors: [],
|
|
}),
|
|
})
|
|
}}
|
|
>
|
|
<option value="createdAtDesc">最新更新</option>
|
|
<option value="createdAtAsc">最早更新</option>
|
|
<option value="powerDesc">电量从高到低</option>
|
|
<option value="powerAsc">电量从低到高</option>
|
|
</select>
|
|
|
|
<select
|
|
className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm focus:outline-none"
|
|
value={search.pageSize}
|
|
onChange={(e) => {
|
|
navigate({
|
|
search: (prev) => ({
|
|
...prev,
|
|
pageSize: parsePageSize(e.target.value),
|
|
cursor: undefined,
|
|
cursors: [],
|
|
}),
|
|
})
|
|
}}
|
|
>
|
|
<option value="20">20 条/页</option>
|
|
<option value="50">50 条/页</option>
|
|
<option value="100">100 条/页</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-white/5 bg-white/[0.01] overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className={`w-full border-collapse text-left text-sm ${isPlaceholderData ? 'opacity-60' : ''}`}>
|
|
<thead>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<tr key={headerGroup.id} className="border-b border-white/5 bg-white/[0.02]">
|
|
{headerGroup.headers.map((header) => (
|
|
<th key={header.id} className="px-6 py-4 font-medium text-zinc-500 whitespace-nowrap">
|
|
{flexRender(header.column.columnDef.header, header.getContext())}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</thead>
|
|
<tbody className="divide-y divide-white/[0.02]">
|
|
{isPending && !isPlaceholderData ? (
|
|
<tr>
|
|
<td colSpan={columns.length} className="h-32 text-center text-zinc-500">
|
|
加载中…
|
|
</td>
|
|
</tr>
|
|
) : data?.items.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={columns.length} className="h-32 text-center text-zinc-500">
|
|
暂无匹配设备
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
table.getRowModel().rows.map((row) => (
|
|
<tr 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>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 flex items-center justify-between text-sm text-zinc-500">
|
|
<div>
|
|
显示 {data?.items.length ?? 0} 台设备
|
|
{data?.total ? ` (共 ${data.total} 台)` : ''}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
className="rounded-lg border border-white/10 bg-white/5 px-4 py-2 hover:bg-white/10 disabled:opacity-30 disabled:hover:bg-white/5 transition-colors"
|
|
onClick={handlePrevPage}
|
|
disabled={isPlaceholderData || (!search.cursor && (!search.cursors || search.cursors.length === 0))}
|
|
>
|
|
上一页
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="rounded-lg border border-white/10 bg-white/5 px-4 py-2 hover:bg-white/10 disabled:opacity-30 disabled:hover:bg-white/5 transition-colors"
|
|
onClick={handleNextPage}
|
|
disabled={isPlaceholderData || !data?.nextCursor}
|
|
>
|
|
下一页
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|