MAO Dongyang
13a873ec76
- Hooks/组件添加 useMemo 优化，减少不必要的重计算 - 简化 TokenUsageDashboard 的 Suspense 嵌套层级 - 完善 README: 技术栈、构建产物位置、架构说明
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
/**
|
||
* Token Usage Viewer 主页面
|
||
*
|
||
* 展示 claude-opus-4-5-thinking 模型的配额使用情况仪表盘。
|
||
*
|
||
* 特性:
|
||
* - SSR 预加载数据（通过 loader）
|
||
* - 每 5 分钟自动刷新配额数据
|
||
* - Tauri 环境下自动设置窗口标题
|
||
*/
|
||
import { useSuspenseQuery } from '@tanstack/react-query'
|
||
import { createFileRoute } from '@tanstack/react-router'
|
||
import { isTauri } from '@tauri-apps/api/core'
|
||
import { getCurrentWindow } from '@tauri-apps/api/window'
|
||
import { useEffect } from 'react'
|
||
import { TokenUsageDashboard } from '@/components/TokenUsageDashboard'
|
||
import { orpc } from '@/orpc'
|
||
|
||
/** 数据自动刷新间隔 (毫秒) - 5 分钟 */
|
||
const REFETCH_INTERVAL = 5 * 60 * 1000
|
||
|
||
export const Route = createFileRoute('/')({
|
||
component: Home,
|
||
/**
|
||
* 路由加载器 - SSR 数据预取
|
||
*
|
||
* 在服务端渲染时预先获取使用量数据，确保首次渲染即有内容。
|
||
*/
|
||
loader: async ({ context }) => {
|
||
await context.queryClient.ensureQueryData(
|
||
orpc.usage.getUsage.queryOptions(),
|
||
)
|
||
},
|
||
})
|
||
|
||
/**
|
||
* 首页组件
|
||
*
|
||
* 使用 useSuspenseQuery 获取并展示配额数据，
|
||
* 确保 data 不为空（由 loader 预取保证）。
|
||
*/
|
||
function Home() {
|
||
const { data } = useSuspenseQuery({
|
||
...orpc.usage.getUsage.queryOptions(),
|
||
refetchInterval: REFETCH_INTERVAL,
|
||
})
|
||
|
||
// Tauri 环境: 设置窗口标题
|
||
useEffect(() => {
|
||
if (!isTauri()) return
|
||
getCurrentWindow().setTitle('Token Usage Viewer')
|
||
}, [])
|
||
|
||
return <TokenUsageDashboard data={data} />
|
||
}
|