migrate frontend

2026-10-12 10:16:37 +08:00 · 2026-06-18 18:34:20 +08:00
parent 75140fc3bb
commit 48421c12de
113 changed files with 116 additions and 152 deletions
@@ -0,0 +1,129 @@
+'use client';
+
+import { Area, AreaChart, CartesianGrid, Line, XAxis, YAxis } from 'recharts';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import type { CapacityTrendPoint } from '@/lib/services/openflare';
+
+import { formatPercent, formatTrendHour } from './dashboard-utils';
+
+const chartConfig = {
+  cpu: {
+    label: '平均 CPU',
+    color: 'hsl(var(--chart-2))',
+  },
+  memory: {
+    label: '平均内存',
+    color: 'hsl(var(--chart-3))',
+  },
+} satisfies ChartConfig;
+
+export function CapacityTrendChart({ points }: { points: CapacityTrendPoint[] }) {
+  const data = points.map((point) => ({
+    hour: formatTrendHour(point.bucket_started_at),
+    cpu: point.average_cpu_usage_percent,
+    memory: point.average_memory_usage_percent,
+  }));
+
+  if (data.length === 0) {
+    return (
+      <Card className="border-dashed shadow-none">
+        <CardHeader>
+          <CardTitle className="text-sm font-semibold">24 小时容量趋势</CardTitle>
+          <CardDescription className="text-xs">
+            按小时聚合 CPU 与内存使用率，判断整体容量是否持续紧张。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex h-[280px] items-center justify-center text-xs text-muted-foreground">
+            暂无趋势数据
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="border-dashed shadow-none">
+      <CardHeader>
+        <CardTitle className="text-sm font-semibold">24 小时容量趋势</CardTitle>
+        <CardDescription className="text-xs">
+          按小时聚合 CPU 与内存使用率，判断整体容量是否持续紧张。
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pl-2 pr-4">
+        <div className="h-[280px] w-full">
+          <ChartContainer config={chartConfig} className="h-full w-full">
+            <AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+              <defs>
+                <linearGradient id="capacityCpuFill" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="var(--color-cpu)" stopOpacity={0.2} />
+                  <stop offset="95%" stopColor="var(--color-cpu)" stopOpacity={0.02} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" vertical={false} />
+              <XAxis
+                dataKey="hour"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={24}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                domain={[0, 100]}
+                tickFormatter={(value) => formatPercent(Number(value))}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={
+                  <ChartTooltipContent
+                    formatter={(value, name) => (
+                      <span className="font-mono tabular-nums">
+                        {formatPercent(Number(value))}
+                        <span className="ml-1 text-muted-foreground">
+                          {name === 'cpu' ? 'CPU' : '内存'}
+                        </span>
+                      </span>
+                    )}
+                  />
+                }
+              />
+              <Area
+                type="monotone"
+                dataKey="cpu"
+                stroke="var(--color-cpu)"
+                fill="url(#capacityCpuFill)"
+                strokeWidth={2}
+              />
+              <Line
+                type="monotone"
+                dataKey="memory"
+                stroke="var(--color-memory)"
+                strokeWidth={2}
+                dot={false}
+              />
+              <ChartLegend content={<ChartLegendContent />} />
+            </AreaChart>
+          </ChartContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,21 @@
+export function formatTrendHour(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '—';
+  }
+  return `${date.getHours().toString().padStart(2, '0')}:00`;
+}
+
+export function formatPercent(value: number) {
+  if (!Number.isFinite(value)) {
+    return '—';
+  }
+  return `${value.toFixed(1)}%`;
+}
+
+export function formatCompactNumber(value: number) {
+  if (!Number.isFinite(value)) {
+    return '—';
+  }
+  return value.toLocaleString('zh-CN');
+}
@@ -0,0 +1,54 @@
+'use client';
+
+import {Globe2} from 'lucide-react';
+
+import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
+import {Progress} from '@/components/ui/progress';
+import type {DistributionItem} from '@/lib/services/openflare';
+
+import {formatCompactNumber} from './dashboard-utils';
+
+export function GeoDistributionList({ items }: { items: DistributionItem[] }) {
+  const sortedItems = [...items]
+    .sort((left, right) => right.value - left.value)
+    .slice(0, 8);
+  const maxValue = sortedItems[0]?.value ?? 0;
+
+  return (
+    <Card className="border-dashed shadow-none">
+      <CardHeader>
+        <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
+          <Globe2 className="size-4 text-primary" />
+          来源国家分布
+        </CardTitle>
+        <CardDescription className="text-xs">
+          聚合最近 24 小时主要来源国家。
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {sortedItems.length === 0 ? (
+          <div className="flex min-h-[180px] items-center justify-center text-xs text-muted-foreground">
+            暂无来源分布数据
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {sortedItems.map((item) => {
+              const ratio = maxValue > 0 ? (item.value / maxValue) * 100 : 0;
+              return (
+                <div key={item.key} className="space-y-1.5">
+                  <div className="flex items-center justify-between text-xs">
+                    <span className="font-medium">{item.key || '未知'}</span>
+                    <span className="font-mono tabular-nums text-muted-foreground">
+                      {formatCompactNumber(item.value)}
+                    </span>
+                  </div>
+                  <Progress value={ratio} className="h-1.5" />
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,132 @@
+'use client';
+
+import Link from 'next/link';
+
+import {EmptyStateWithBorder} from '@/components/layout/empty';
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
+import type {DashboardNodeHealth} from '@/lib/services/openflare';
+
+import {NodeStatusBadge} from '../../nodes/components/node-status-badge';
+import {
+  formatRelativeTime,
+  getNodeStatusLabel,
+  getNodeStatusTone,
+  getOpenrestyStatusLabel,
+  getOpenrestyStatusTone,
+  isWSConnectedLastSeen,
+} from '../../nodes/components/node-utils';
+import {formatCompactNumber, formatPercent} from './dashboard-utils';
+
+export function NodeHealthTable({ nodes }: { nodes: DashboardNodeHealth[] }) {
+  const sortedNodes = [...nodes].sort((left, right) => {
+    if (right.active_event_count !== left.active_event_count) {
+      return right.active_event_count - left.active_event_count;
+    }
+    const leftPressure = Math.max(
+      left.cpu_usage_percent,
+      left.memory_usage_percent,
+      left.storage_usage_percent,
+    );
+    const rightPressure = Math.max(
+      right.cpu_usage_percent,
+      right.memory_usage_percent,
+      right.storage_usage_percent,
+    );
+    return rightPressure - leftPressure;
+  });
+
+  return (
+    <Card className="border-dashed shadow-none">
+      <CardHeader className="flex flex-row items-start justify-between gap-4">
+        <div>
+          <CardTitle className="text-sm font-semibold">节点健康列表</CardTitle>
+          <CardDescription className="text-xs">
+            按异常数量和资源压力排序。
+          </CardDescription>
+        </div>
+        <Button variant="outline" size="sm" className="h-8 text-xs" asChild>
+          <Link href="/nodes">进入节点页</Link>
+        </Button>
+      </CardHeader>
+      <CardContent>
+        {sortedNodes.length === 0 ? (
+          <EmptyStateWithBorder
+            title="暂无节点"
+            description="节点接入后，这里会展示系统健康与容量摘要。"
+          />
+        ) : (
+          <div className="border border-dashed rounded-lg overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow className="border-dashed hover:bg-transparent">
+                  <TableHead className="py-2 h-8">节点</TableHead>
+                  <TableHead className="py-2 h-8">状态</TableHead>
+                  <TableHead className="py-2 h-8">CPU / 内存</TableHead>
+                  <TableHead className="py-2 h-8">请求 / 错误</TableHead>
+                  <TableHead className="py-2 h-8">活动异常</TableHead>
+                  <TableHead className="py-2 h-8">最近心跳</TableHead>
+                  <TableHead className="py-2 h-8 text-right">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sortedNodes.slice(0, 12).map((node) => (
+                  <TableRow key={node.node_id} className="border-dashed align-top">
+                    <TableCell className="py-3">
+                      <div className="space-y-1">
+                        <p className="font-medium">{node.name}</p>
+                        <p className="text-xs text-muted-foreground">{node.node_id}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {node.geo_name || '未配置地图点位'}
+                        </p>
+                      </div>
+                    </TableCell>
+                    <TableCell className="py-3">
+                      <div className="flex flex-wrap gap-1.5">
+                        <NodeStatusBadge
+                          label={getNodeStatusLabel(node.status)}
+                          tone={getNodeStatusTone(node.status)}
+                        />
+                        <NodeStatusBadge
+                          label={getOpenrestyStatusLabel(node.openresty_status)}
+                          tone={getOpenrestyStatusTone(node.openresty_status)}
+                        />
+                      </div>
+                    </TableCell>
+                    <TableCell className="py-3 text-sm text-muted-foreground">
+                      {formatPercent(node.cpu_usage_percent)} /{' '}
+                      {formatPercent(node.memory_usage_percent)}
+                    </TableCell>
+                    <TableCell className="py-3 text-sm text-muted-foreground">
+                      {formatCompactNumber(node.request_count)} /{' '}
+                      {formatCompactNumber(node.error_count)}
+                    </TableCell>
+                    <TableCell className="py-3">
+                      <NodeStatusBadge
+                        label={String(node.active_event_count)}
+                        tone={node.active_event_count > 0 ? 'danger' : 'success'}
+                      />
+                    </TableCell>
+                    <TableCell className="py-3 text-xs text-muted-foreground">
+                      {isWSConnectedLastSeen(node.last_seen_at)
+                        ? 'WS 已连接'
+                        : node.last_seen_at
+                          ? formatRelativeTime(node.last_seen_at)
+                          : '暂无'}
+                    </TableCell>
+                    <TableCell className="py-3 text-right">
+                      <Button variant="ghost" size="sm" className="h-8 text-xs" asChild>
+                        <Link href={`/nodes/detail?id=${node.id}`}>详情</Link>
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,93 @@
+'use client';
+
+import {Activity, Cpu, Gauge, Server, Users} from 'lucide-react';
+
+import {Card, CardContent, CardHeader} from '@/components/ui/card';
+import {Progress} from '@/components/ui/progress';
+import type {DashboardCapacity, DashboardSummary, DashboardTraffic,} from '@/lib/services/openflare';
+
+import {formatCompactNumber, formatPercent} from './dashboard-utils';
+
+export function DashboardStatCards({
+  summary,
+  traffic,
+  capacity,
+}: {
+  summary: DashboardSummary;
+  traffic: DashboardTraffic;
+  capacity: DashboardCapacity;
+}) {
+  const onlineRate =
+    summary.total_nodes > 0
+      ? (summary.online_nodes / summary.total_nodes) * 100
+      : 0;
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+      <Card className="border-dashed shadow-none">
+        <CardHeader className="flex flex-row items-center justify-between pb-2">
+          <span className="text-xs font-medium text-muted-foreground">24h 请求量</span>
+          <Activity className="size-4 text-primary" />
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div className="text-2xl font-semibold tracking-tight">
+            {formatCompactNumber(traffic.request_count)}
+          </div>
+          <p className="text-[10px] text-muted-foreground">
+            独立访客 {formatCompactNumber(traffic.unique_visitors)} · 错误{' '}
+            {formatCompactNumber(traffic.error_count)} · 估算 QPS{' '}
+            {traffic.estimated_qps.toFixed(2)}
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="border-dashed shadow-none">
+        <CardHeader className="flex flex-row items-center justify-between pb-2">
+          <span className="text-xs font-medium text-muted-foreground">集群容量</span>
+          <Cpu className="size-4 text-primary" />
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div className="text-2xl font-semibold tracking-tight">
+            {formatPercent(capacity.average_cpu_usage_percent)}
+            <span className="ml-2 text-sm font-normal text-muted-foreground">
+              CPU
+            </span>
+          </div>
+          <Progress value={capacity.average_cpu_usage_percent} className="h-1.5" />
+          <p className="text-[10px] text-muted-foreground">
+            平均内存 {formatPercent(capacity.average_memory_usage_percent)} · 高负载节点 CPU{' '}
+            {capacity.high_cpu_nodes} / 内存 {capacity.high_memory_nodes} / 存储{' '}
+            {capacity.high_storage_nodes}
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="border-dashed shadow-none md:col-span-2 xl:col-span-1">
+        <CardHeader className="flex flex-row items-center justify-between pb-2">
+          <span className="text-xs font-medium text-muted-foreground">节点概览</span>
+          <Server className="size-4 text-primary" />
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div className="text-2xl font-semibold tracking-tight">
+            {summary.online_nodes}
+            <span className="text-sm font-normal text-muted-foreground">
+              {' '}
+              / {summary.total_nodes} 在线
+            </span>
+          </div>
+          <Progress value={onlineRate} className="h-1.5" />
+          <p className="text-[10px] text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1">
+            <span className="inline-flex items-center gap-1">
+              <Users className="size-3" />
+              待接入 {summary.pending_nodes}
+            </span>
+            <span className="inline-flex items-center gap-1">
+              <Gauge className="size-3" />
+              异常 {summary.unhealthy_nodes} · 离线 {summary.offline_nodes}
+            </span>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,122 @@
+'use client';
+
+import {Area, AreaChart, CartesianGrid, Line, XAxis, YAxis} from 'recharts';
+
+import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import type {TrafficTrendPoint} from '@/lib/services/openflare';
+
+import {formatCompactNumber, formatTrendHour} from './dashboard-utils';
+
+const chartConfig = {
+  requests: {
+    label: '请求量',
+    color: 'hsl(var(--chart-1))',
+  },
+  errors: {
+    label: '错误量',
+    color: 'hsl(var(--chart-5))',
+  },
+} satisfies ChartConfig;
+
+export function TrafficTrendChart({ points }: { points: TrafficTrendPoint[] }) {
+  const data = points.map((point) => ({
+    hour: formatTrendHour(point.bucket_started_at),
+    requests: point.request_count,
+    errors: point.error_count,
+  }));
+
+  if (data.length === 0) {
+    return (
+      <Card className="border-dashed shadow-none">
+        <CardHeader>
+          <CardTitle className="text-sm font-semibold">24 小时请求趋势</CardTitle>
+          <CardDescription className="text-xs">
+            观察整体请求量和错误量是否出现异常抬升。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex h-[280px] items-center justify-center text-xs text-muted-foreground">
+            暂无趋势数据
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="border-dashed shadow-none">
+      <CardHeader>
+        <CardTitle className="text-sm font-semibold">24 小时请求趋势</CardTitle>
+        <CardDescription className="text-xs">
+          观察整体请求量和错误量是否出现异常抬升。
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pl-2 pr-4">
+        <div className="h-[280px] w-full">
+          <ChartContainer config={chartConfig} className="h-full w-full">
+            <AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+              <defs>
+                <linearGradient id="trafficRequestsFill" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="var(--color-requests)" stopOpacity={0.25} />
+                  <stop offset="95%" stopColor="var(--color-requests)" stopOpacity={0.02} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" vertical={false} />
+              <XAxis
+                dataKey="hour"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={24}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                tickFormatter={(value) => formatCompactNumber(Number(value))}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={
+                  <ChartTooltipContent
+                    formatter={(value, name) => (
+                      <span className="font-mono tabular-nums">
+                        {formatCompactNumber(Number(value))}
+                        <span className="ml-1 text-muted-foreground">
+                          {name === 'requests' ? '请求' : '错误'}
+                        </span>
+                      </span>
+                    )}
+                  />
+                }
+              />
+              <Area
+                type="monotone"
+                dataKey="requests"
+                stroke="var(--color-requests)"
+                fill="url(#trafficRequestsFill)"
+                strokeWidth={2}
+              />
+              <Line
+                type="monotone"
+                dataKey="errors"
+                stroke="var(--color-errors)"
+                strokeWidth={2}
+                dot={false}
+              />
+              <ChartLegend content={<ChartLegendContent />} />
+            </AreaChart>
+          </ChartContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,26 @@
+import type {LucideIcon} from 'lucide-react';
+
+import {Card, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+
+interface PlaceholderPageProps {
+  title: string;
+  icon: LucideIcon;
+}
+
+export function PlaceholderPage({title, icon: Icon}: PlaceholderPageProps) {
+  return (
+    <div className="py-6 px-1 space-y-6">
+      <div className="flex items-center gap-2">
+        <Icon className="size-5 text-primary" />
+        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">开发中</CardTitle>
+          <CardDescription>该功能正在迁移开发中，敬请期待。</CardDescription>
+        </CardHeader>
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,71 @@
+'use client';
+
+import {Badge} from '@/components/ui/badge';
+import type {LatestReleaseInfo} from '@/lib/services/openflare';
+
+function formatLogTimestamp(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '0000-00-00 00:00:00.000';
+  }
+
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, '0');
+  const day = `${date.getDate()}`.padStart(2, '0');
+  const hour = `${date.getHours()}`.padStart(2, '0');
+  const minute = `${date.getMinutes()}`.padStart(2, '0');
+  const second = `${date.getSeconds()}`.padStart(2, '0');
+  const millisecond = `${date.getMilliseconds()}`.padStart(3, '0');
+
+  return `${year}-${month}-${day} ${hour}:${minute}:${second}.${millisecond}`;
+}
+
+function formatLogLevel(level: string) {
+  return (level || 'info').toUpperCase().padEnd(8, ' ');
+}
+
+function getUpgradeStatusBadge(release: LatestReleaseInfo) {
+  if (release.upgrade_status === 'failed') {
+    return { label: '升级失败', variant: 'destructive' as const };
+  }
+  if (release.upgrade_status === 'succeeded') {
+    return { label: '准备重启', variant: 'default' as const };
+  }
+  if (release.in_progress) {
+    return { label: '升级中', variant: 'secondary' as const };
+  }
+  return { label: '空闲', variant: 'outline' as const };
+}
+
+export function UpgradeLogPanel({release}: {release: LatestReleaseInfo}) {
+  const statusBadge = getUpgradeStatusBadge(release);
+  const upgradeLogs = release.upgrade_logs ?? [];
+
+  if (upgradeLogs.length === 0) {
+    return (
+      <div className="rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
+        暂无升级日志
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <Badge variant={statusBadge.variant}>{statusBadge.label}</Badge>
+      <div className="max-h-72 overflow-y-auto rounded-lg border bg-slate-950 px-4 py-3">
+        {upgradeLogs.map((log, index) => (
+          <pre
+            key={`${log.created_at}-${index}`}
+            className="overflow-x-auto border-b border-white/10 py-2 font-mono text-[12px] leading-6 text-slate-200 last:border-b-0"
+          >
+            <span className="text-slate-400">{formatLogTimestamp(log.created_at)}</span>
+            <span className="text-slate-500"> | </span>
+            <span className="text-cyan-300">{formatLogLevel(log.level)}</span>
+            <span className="text-slate-500"> | </span>
+            <span className="break-all whitespace-pre-wrap text-slate-100">{log.message}</span>
+          </pre>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,401 @@
+'use client';
+
+import {useEffect, useState} from 'react';
+import {ExternalLink, Loader2} from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import {Badge} from '@/components/ui/badge';
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,} from '@/components/ui/dialog';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {Progress} from '@/components/ui/progress';
+import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs';
+import {useOpenFlareServerUpgrade} from '@/lib/hooks/use-openflare-server-upgrade';
+import type {LatestReleaseInfo, ReleaseChannel} from '@/lib/services/openflare';
+import {formatDateTime} from '@/lib/utils';
+import {formatRelativeTime} from '@/app/(main)/nodes/components/node-utils';
+
+import {UpgradeLogPanel} from './upgrade-log-panel';
+
+function getUpgradeBadge(release: LatestReleaseInfo | null | undefined) {
+  if (!release) {
+    return { label: '未检查', variant: 'outline' as const };
+  }
+  if (release.in_progress) {
+    return { label: '升级中', variant: 'secondary' as const };
+  }
+  if (release.has_update) {
+    return { label: '可升级', variant: 'secondary' as const };
+  }
+  return { label: '最新', variant: 'default' as const };
+}
+
+export function VersionUpgradeDialog({
+  open,
+  onOpenChange,
+  canUpgrade = true,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  canUpgrade?: boolean;
+}) {
+  const {
+    currentVersion,
+    selectedChannel,
+    release,
+    uploadedBinary,
+    releaseErrorMessage,
+    manualStatusMessage,
+    manualErrorMessage,
+    isInitialLoading,
+    isChecking,
+    isUpgrading,
+    isUploadingBinary,
+    uploadProgress,
+    isConfirmingManualUpgrade,
+    handleOpen,
+    handleCheckRelease,
+    handleChannelChange,
+    handleUpgrade,
+    handleUploadBinary,
+    handleConfirmManualUpgrade,
+  } = useOpenFlareServerUpgrade({ open, canUpgrade });
+  const [selectedBinary, setSelectedBinary] = useState<File | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      handleOpen();
+    }
+  }, [open, handleOpen]);
+
+  useEffect(() => {
+    if (!open) {
+      setSelectedBinary(null);
+    }
+  }, [open]);
+
+  const upgradeBadge = getUpgradeBadge(release);
+  const selectedChannelLabel = selectedChannel === 'preview' ? '预览版' : '正式版';
+  const uploadPhaseLabel =
+    uploadProgress >= 100 ? '已上传，正在服务端校验版本...' : '上传中...';
+  const canConfirmManualUpgrade = Boolean(
+    uploadedBinary?.ready_to_upgrade && uploadedBinary.upload_token,
+  );
+
+  const isBusy =
+    isChecking || isUpgrading || isUploadingBinary || isConfirmingManualUpgrade;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-3xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>服务端版本</DialogTitle>
+          <DialogDescription>
+            默认检查正式版更新；也可检查 preview 发布或手动上传二进制包。升级开始后服务会短暂重启。
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <Card className="border-dashed shadow-none py-4 gap-3">
+              <CardHeader className="px-4 pb-0">
+                <CardTitle className="text-sm">当前版本</CardTitle>
+              </CardHeader>
+              <CardContent className="px-4">
+                <div className="flex flex-wrap items-center gap-2">
+                  <p className="text-sm font-medium">{currentVersion}</p>
+                  <Badge variant={upgradeBadge.variant}>{upgradeBadge.label}</Badge>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="border-dashed shadow-none py-4 gap-3">
+              <CardHeader className="px-4 pb-0">
+                <CardTitle className="text-sm">最新版本</CardTitle>
+              </CardHeader>
+              <CardContent className="px-4 space-y-3">
+                <div className="flex flex-wrap items-center gap-2">
+                  <p className="text-sm font-medium">{release?.tag_name || '未检查'}</p>
+                  {canUpgrade ? (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="h-7 text-xs"
+                      disabled={isBusy}
+                      onClick={() =>
+                        handleChannelChange(selectedChannel === 'preview' ? 'stable' : 'preview')
+                      }
+                    >
+                      {selectedChannelLabel}
+                    </Button>
+                  ) : null}
+                </div>
+                {canUpgrade ? (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    disabled={isBusy}
+                    onClick={handleCheckRelease}
+                  >
+                    {isChecking ? '检查中...' : `检查${selectedChannelLabel}`}
+                  </Button>
+                ) : null}
+              </CardContent>
+            </Card>
+          </div>
+
+          {isInitialLoading ? (
+            <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
+              <Loader2 className="size-4 mr-2 animate-spin" />
+              加载版本信息...
+            </div>
+          ) : null}
+
+          {!isInitialLoading && releaseErrorMessage ? (
+            <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+              {releaseErrorMessage}
+            </div>
+          ) : null}
+
+          <Tabs defaultValue="online">
+            <TabsList>
+              <TabsTrigger value="online">在线升级</TabsTrigger>
+              {canUpgrade ? <TabsTrigger value="manual">手动升级</TabsTrigger> : null}
+              {release ? <TabsTrigger value="logs">升级日志</TabsTrigger> : null}
+            </TabsList>
+
+            <TabsContent value="online" className="space-y-4">
+              {!isInitialLoading && !releaseErrorMessage && !release ? (
+                <div className="rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
+                  尚未检查{selectedChannelLabel}，点击「检查{selectedChannelLabel}」后展示 GitHub Release 信息。
+                </div>
+              ) : null}
+
+              {release ? (
+                <Card className="border-dashed shadow-none py-4 gap-3">
+                  <CardHeader className="px-4 pb-0">
+                    <CardTitle className="text-sm">
+                      GitHub {selectedChannelLabel} · {release.tag_name}
+                    </CardTitle>
+                    <CardDescription>
+                      {release.published_at
+                        ? `发布时间：${formatRelativeTime(release.published_at)} · ${formatDateTime(release.published_at)}`
+                        : '未提供发布时间'}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="px-4 space-y-4">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <Badge variant={release.has_update ? 'secondary' : 'default'}>
+                        {release.has_update ? '发现新版本' : '已经是最新版本'}
+                      </Badge>
+                      {release.prerelease ? (
+                        <Badge variant="secondary">Preview 发布</Badge>
+                      ) : (
+                        <Badge variant="outline">正式发布</Badge>
+                      )}
+                      {!release.upgrade_supported ? (
+                        <Badge variant="destructive">当前平台不支持自动升级</Badge>
+                      ) : null}
+                      {release.in_progress ? (
+                        <Badge variant="secondary">升级任务执行中</Badge>
+                      ) : null}
+                    </div>
+
+                    <div className="prose prose-sm dark:prose-invert max-w-none text-sm">
+                      <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                        {release.body || '暂无更新说明'}
+                      </ReactMarkdown>
+                    </div>
+
+                    {release.html_url ? (
+                      <a
+                        href={release.html_url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex items-center text-sm text-primary hover:underline"
+                      >
+                        查看发布详情
+                        <ExternalLink className="size-3 ml-1" />
+                      </a>
+                    ) : null}
+
+                    {canUpgrade ? (
+                      <div className="flex justify-end">
+                        <Button
+                          type="button"
+                          disabled={
+                            !release.has_update ||
+                            release.in_progress ||
+                            isUpgrading ||
+                            !release.upgrade_supported ||
+                            isUploadingBinary ||
+                            isConfirmingManualUpgrade
+                          }
+                          onClick={handleUpgrade}
+                        >
+                          {isUpgrading || release.in_progress
+                            ? '升级中...'
+                            : selectedChannel === 'preview'
+                              ? '升级预览版'
+                              : '升级正式版'}
+                        </Button>
+                      </div>
+                    ) : null}
+                  </CardContent>
+                </Card>
+              ) : null}
+            </TabsContent>
+
+            {canUpgrade ? (
+              <TabsContent value="manual" className="space-y-4">
+                <Card className="border-dashed shadow-none py-4 gap-3">
+                  <CardHeader className="px-4 pb-0">
+                    <CardTitle className="text-sm">手动升级</CardTitle>
+                    <CardDescription>
+                      支持上传已编译好的当前平台 Server 可执行文件。
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="px-4 space-y-4">
+                    <div className="space-y-1.5">
+                      <Label htmlFor="server-binary">服务端二进制</Label>
+                      <Input
+                        id="server-binary"
+                        type="file"
+                        disabled={isUploadingBinary || isConfirmingManualUpgrade}
+                        onChange={(event) => {
+                          setSelectedBinary(event.target.files?.[0] ?? null);
+                        }}
+                      />
+                    </div>
+
+                    <div className="flex justify-end">
+                      {canConfirmManualUpgrade ? (
+                        <Button
+                          type="button"
+                          disabled={
+                            !canConfirmManualUpgrade ||
+                            isConfirmingManualUpgrade ||
+                            isUploadingBinary ||
+                            isUpgrading
+                          }
+                          onClick={handleConfirmManualUpgrade}
+                        >
+                          {isConfirmingManualUpgrade ? '升级中...' : '确认升级'}
+                        </Button>
+                      ) : (
+                        <Button
+                          type="button"
+                          disabled={
+                            !selectedBinary ||
+                            isUploadingBinary ||
+                            isConfirmingManualUpgrade
+                          }
+                          onClick={() => {
+                            if (selectedBinary) {
+                              handleUploadBinary(selectedBinary);
+                            }
+                          }}
+                        >
+                          {isUploadingBinary
+                            ? uploadProgress >= 100
+                              ? '服务端校验中...'
+                              : '上传中...'
+                            : '上传并检查'}
+                        </Button>
+                      )}
+                    </div>
+
+                    {isUploadingBinary ? (
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between text-xs text-muted-foreground">
+                          <span>{uploadPhaseLabel}</span>
+                          <span>{uploadProgress}%</span>
+                        </div>
+                        <Progress value={uploadProgress} />
+                      </div>
+                    ) : null}
+
+                    {manualErrorMessage ? (
+                      <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+                        {manualErrorMessage}
+                      </div>
+                    ) : null}
+
+                    {!manualErrorMessage && manualStatusMessage ? (
+                      <div className="rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-600 dark:text-amber-400">
+                        {manualStatusMessage}
+                      </div>
+                    ) : null}
+
+                    {uploadedBinary ? (
+                      <div className="space-y-4 rounded-lg border border-dashed p-4">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <Badge
+                            variant={uploadedBinary.ready_to_upgrade ? 'secondary' : 'outline'}
+                          >
+                            {uploadedBinary.ready_to_upgrade
+                              ? '可确认升级'
+                              : uploadedBinary.has_update
+                                ? '待确认'
+                                : '不可升级'}
+                          </Badge>
+                          {!uploadedBinary.upgrade_supported ? (
+                            <Badge variant="destructive">当前版本不支持手动升级</Badge>
+                          ) : null}
+                        </div>
+
+                        <div className="grid gap-3 sm:grid-cols-2 text-sm">
+                          <InfoCell label="文件名" value={uploadedBinary.file_name} />
+                          <InfoCell
+                            label="上传时间"
+                            value={
+                              uploadedBinary.uploaded_at
+                                ? formatDateTime(uploadedBinary.uploaded_at)
+                                : '未知'
+                            }
+                          />
+                          <InfoCell label="当前版本" value={uploadedBinary.current_version} />
+                          <InfoCell label="上传版本" value={uploadedBinary.detected_version} />
+                        </div>
+
+                        <p className="text-sm text-muted-foreground">
+                          {uploadedBinary.comparison_message}
+                        </p>
+                      </div>
+                    ) : (
+                      <div className="rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
+                        尚未上传升级包
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              </TabsContent>
+            ) : null}
+
+            {release ? (
+              <TabsContent value="logs">
+                <UpgradeLogPanel release={release} />
+              </TabsContent>
+            ) : null}
+          </Tabs>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function InfoCell({label, value}: {label: string; value: string}) {
+  return (
+    <div>
+      <p className="text-xs text-muted-foreground">{label}</p>
+      <p className="mt-1 font-medium break-all">{value}</p>
+    </div>
+  );
+}
+
+export type {ReleaseChannel};