yuxuanhui
77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import { Activity, Moon, Sun } from "lucide-react"
|
|
|
|
import { useSystemStatus } from "@/features/system/api/system.query"
|
|
import { useUiStore } from "@/shared/config/ui-store"
|
|
import { Badge } from "@/shared/ui/badge"
|
|
import { Button } from "@/shared/ui/button"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/shared/ui/card"
|
|
|
|
export function SystemStatusPage() {
|
|
const status = useSystemStatus()
|
|
const theme = useUiStore((state) => state.theme)
|
|
const toggleTheme = useUiStore((state) => state.toggleTheme)
|
|
|
|
const statusLabel = status.isPending
|
|
? "正在连接"
|
|
: status.isError
|
|
? "连接异常"
|
|
: "运行正常"
|
|
|
|
return (
|
|
<main className="flex min-h-screen items-center justify-center bg-background p-6 text-foreground">
|
|
<Card className="w-full max-w-xl">
|
|
<CardHeader className="flex-row items-start justify-between gap-4">
|
|
<div className="space-y-1.5">
|
|
<CardTitle className="flex items-center gap-2 text-2xl">
|
|
<Activity className="size-6 text-primary" aria-hidden="true" />
|
|
Zhixing System
|
|
</CardTitle>
|
|
<CardDescription>
|
|
量化系统开发环境已完成最小链路连接。
|
|
</CardDescription>
|
|
</div>
|
|
<Button
|
|
aria-label="切换主题"
|
|
onClick={toggleTheme}
|
|
size="icon"
|
|
variant="outline"
|
|
>
|
|
{theme === "dark" ? (
|
|
<Sun aria-hidden="true" />
|
|
) : (
|
|
<Moon aria-hidden="true" />
|
|
)}
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between rounded-md border bg-muted/40 p-4">
|
|
<div>
|
|
<p className="font-medium">后端服务</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{status.data?.service ?? "Zhixing Server"}
|
|
</p>
|
|
</div>
|
|
<Badge variant={status.isError ? "destructive" : "default"}>
|
|
{statusLabel}
|
|
</Badge>
|
|
</div>
|
|
{status.data ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
当前环境：
|
|
<span className="font-medium text-foreground">
|
|
{status.data.environment}
|
|
</span>
|
|
</p>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
</main>
|
|
)
|
|
}
|