1060 lines
40 KiB
TypeScript
1060 lines
40 KiB
TypeScript
import { BeamLoading, BeamBar } from "../../components/BeamLoading";
|
||
import { useState, useEffect, useRef, useMemo, type ReactNode } from "react";
|
||
import {
|
||
RefreshCw,
|
||
Download,
|
||
Zap,
|
||
CheckCircle2,
|
||
AlertCircle,
|
||
ShieldCheck,
|
||
ShieldAlert,
|
||
Server,
|
||
Cpu,
|
||
Clock,
|
||
ExternalLink,
|
||
ChevronRight,
|
||
Play,
|
||
RotateCcw,
|
||
X,
|
||
FileCode,
|
||
HardDrive,
|
||
Terminal,
|
||
} from "lucide-react";
|
||
import { Button, Card, Dialog, RadioGroup, Radio, Steps, Tag, Tooltip } from "tdesign-react";
|
||
import { Page, Surface } from "../common";
|
||
import { api } from "../../services/api";
|
||
import { dateText } from "../../utils/date";
|
||
import type { MockScenario, MockUpdateState } from "./mockData";
|
||
|
||
const { StepItem } = Steps;
|
||
|
||
// Enable mock preview in local development
|
||
const MOCK_PREVIEW_ENABLED = import.meta.env.DEV;
|
||
|
||
export type JobStatus =
|
||
| "queued"
|
||
| "downloading"
|
||
| "verifying"
|
||
| "staged"
|
||
| "backing_up"
|
||
| "applying"
|
||
| "completed"
|
||
| "failed"
|
||
| "cancelled";
|
||
|
||
export interface UpdateJob {
|
||
id: string;
|
||
operation: "download" | "apply";
|
||
status: JobStatus;
|
||
version: string;
|
||
platform: string;
|
||
assetName?: string | null;
|
||
assetUrl?: string | null;
|
||
releaseUrl?: string | null;
|
||
sizeBytes?: number | null;
|
||
downloadedBytes?: number | null;
|
||
downloadStartedAt?: number | string | null;
|
||
downloadSpeedBps?: number | null;
|
||
errorMessage?: string | null;
|
||
createdAt?: number | string | null;
|
||
updatedAt?: number | string | null;
|
||
completedAt?: number | string | null;
|
||
applyQueuedAt?: number | string | null;
|
||
restartDeadline?: number | string | null;
|
||
restartAt?: number | string | null;
|
||
expectedRecoveryAt?: number | string | null;
|
||
restartWindowSeconds?: number | null;
|
||
}
|
||
|
||
export interface LatestRelease {
|
||
version: string;
|
||
tagName?: string;
|
||
releaseName?: string;
|
||
publishedAt?: string;
|
||
isNewer: boolean;
|
||
notes?: string;
|
||
releaseNotes?: string;
|
||
body?: string;
|
||
releaseUrl?: string;
|
||
metadataUrl?: string;
|
||
assetUrl?: string;
|
||
compatible: boolean;
|
||
integrityReady: boolean;
|
||
assetName: string;
|
||
assetSize?: number;
|
||
}
|
||
|
||
export interface UpdateInfo {
|
||
configured: boolean;
|
||
strategy: "disabled" | "systemd";
|
||
currentVersion: string;
|
||
checkedAt: number | null;
|
||
platform: {
|
||
target: string;
|
||
os: string;
|
||
arch: string;
|
||
libc: string;
|
||
};
|
||
latest: LatestRelease | null;
|
||
job: UpdateJob | null;
|
||
}
|
||
|
||
const activeStatuses = new Set<JobStatus>([
|
||
"queued",
|
||
"downloading",
|
||
"verifying",
|
||
"backing_up",
|
||
"applying",
|
||
]);
|
||
|
||
const pollableStatuses = new Set<JobStatus>([
|
||
"queued",
|
||
"downloading",
|
||
"verifying",
|
||
"backing_up",
|
||
"applying",
|
||
]);
|
||
|
||
const statusLabels: Record<JobStatus, string> = {
|
||
queued: "排队调度中",
|
||
downloading: "下载更新包中",
|
||
verifying: "校验发布包完整性",
|
||
staged: "更新包就绪，待应用",
|
||
backing_up: "备份数据与附件快照",
|
||
applying: "原子切换与重启服务",
|
||
completed: "升级成功",
|
||
failed: "升级失败",
|
||
cancelled: "已取消",
|
||
};
|
||
|
||
function timestamp(value: number | string | null | undefined): number | null {
|
||
if (value === null || value === undefined || value === "") return null;
|
||
const n = typeof value === "number" ? value : Date.parse(value);
|
||
if (!Number.isFinite(n)) return null;
|
||
return n < 10_000_000_000 ? n * 1000 : n;
|
||
}
|
||
|
||
function notesFor(latest?: LatestRelease | null): string | null {
|
||
if (!latest) return null;
|
||
const value = latest.notes ?? latest.releaseNotes ?? latest.body;
|
||
return typeof value === "string" && value.trim() ? value.trim() : null;
|
||
}
|
||
|
||
function inlineMarkdown(value: string): ReactNode[] {
|
||
const tokens = new RegExp("(`[^`\\n]+`|\\*\\*[^*\\n]+\\*\\*|\\\\[[^\\\\]\\n]+\\\\]\\((?:https?:\\/\\/)[^)\\s]+\\))", "g");
|
||
const result: ReactNode[] = [];
|
||
let last = 0;
|
||
let match: RegExpExecArray | null;
|
||
while ((match = tokens.exec(value))) {
|
||
if (match.index > last) result.push(value.slice(last, match.index));
|
||
const token = match[0];
|
||
if (token.startsWith("`") && token.endsWith("`")) {
|
||
result.push(<code key={match.index} className="tn-code-pill">{token.slice(1, -1)}</code>);
|
||
} else if (token.startsWith("**") && token.endsWith("**")) {
|
||
result.push(<strong key={match.index}>{token.slice(2, -2)}</strong>);
|
||
} else if (token.startsWith("[")) {
|
||
const labelEnd = token.indexOf("]");
|
||
const label = token.slice(1, labelEnd);
|
||
const url = token.slice(labelEnd + 2, -1);
|
||
result.push(
|
||
<a key={match.index} href={url} target="_blank" rel="noreferrer" className="tn-link">
|
||
{label} <ExternalLink size={12} aria-hidden="true" />
|
||
</a>
|
||
);
|
||
}
|
||
last = match.index + token.length;
|
||
}
|
||
if (last < value.length) result.push(value.slice(last));
|
||
return result;
|
||
}
|
||
|
||
function MarkdownNotes({ value, compact = false }: { value: string; compact?: boolean }) {
|
||
const lines = value.split(/\r?\n/);
|
||
const elements: ReactNode[] = [];
|
||
let listItems: ReactNode[] = [];
|
||
let listKey = 0;
|
||
|
||
const flushList = () => {
|
||
if (!listItems.length) return;
|
||
elements.push(<ul key={`ul-${listKey++}`} className="tn-notes-list">{listItems}</ul>);
|
||
listItems = [];
|
||
};
|
||
|
||
for (let i = 0; i < lines.length; i++) {
|
||
const raw = lines[i] ?? "";
|
||
const trimmed = raw.trim();
|
||
if (!trimmed) {
|
||
flushList();
|
||
continue;
|
||
}
|
||
if (trimmed.startsWith("# ")) {
|
||
flushList();
|
||
elements.push(<h3 key={i} className="tn-notes-h1">{inlineMarkdown(trimmed.slice(2))}</h3>);
|
||
} else if (trimmed.startsWith("## ")) {
|
||
flushList();
|
||
elements.push(<h4 key={i} className="tn-notes-h2">{inlineMarkdown(trimmed.slice(3))}</h4>);
|
||
} else if (trimmed.startsWith("### ")) {
|
||
flushList();
|
||
elements.push(<h5 key={i} className="tn-notes-h3">{inlineMarkdown(trimmed.slice(4))}</h5>);
|
||
} else if (trimmed.startsWith("> ")) {
|
||
flushList();
|
||
elements.push(<blockquote key={i} className="tn-notes-quote">{inlineMarkdown(trimmed.slice(2))}</blockquote>);
|
||
} else if (/^[-*]\s+/.test(trimmed)) {
|
||
listItems.push(<li key={i}>{inlineMarkdown(trimmed.replace(/^[-*]\s+/, ""))}</li>);
|
||
} else {
|
||
flushList();
|
||
elements.push(<p key={i} className="tn-notes-paragraph">{inlineMarkdown(trimmed)}</p>);
|
||
}
|
||
}
|
||
flushList();
|
||
|
||
return <div className={`tn-notes-rendered ${compact ? "is-compact" : ""}`}>{elements}</div>;
|
||
}
|
||
|
||
function bytesText(bytes?: number | null): string {
|
||
if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
|
||
if (bytes < 1024) return `${bytes} B`;
|
||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
|
||
}
|
||
|
||
function speedText(bps?: number | null): string {
|
||
if (!bps || bps <= 0) return "-- KB/s";
|
||
return `${bytesText(bps)}/s`;
|
||
}
|
||
|
||
export default function UpdatePage({
|
||
timezone = "Asia/Shanghai",
|
||
notify,
|
||
}: {
|
||
timezone?: string;
|
||
notify?: (msg: string, type?: "success" | "info" | "error") => void;
|
||
}) {
|
||
// Mock mode switcher for local developer preview
|
||
const [mockScenario, setMockScenario] = useState<"live" | MockScenario>("live");
|
||
const mockTimer = useRef<number | null>(null);
|
||
const [mockCatalog, setMockCatalog] = useState<Record<MockScenario, MockUpdateState> | null>(null);
|
||
|
||
// Live state
|
||
const [liveInfo, setLiveInfo] = useState<UpdateInfo | null>(null);
|
||
const [mockInfoState, setMockInfoState] = useState<UpdateInfo | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [checking, setChecking] = useState(false);
|
||
const [error, setError] = useState("");
|
||
const [pollError, setPollError] = useState("");
|
||
const [actionBusy, setActionBusy] = useState(false);
|
||
const [reloadReady, setReloadReady] = useState(false);
|
||
|
||
// Unified single upgrade modal
|
||
const [showUpgradeModal, setShowUpgradeModal] = useState(false);
|
||
const [confirmReadyToDownload, setConfirmReadyToDownload] = useState(false);
|
||
const [cancelling, setCancelling] = useState(false);
|
||
const [queuedSeconds, setQueuedSeconds] = useState(0);
|
||
const [now, setNow] = useState(() => Date.now());
|
||
|
||
const announced = useRef<string | null>(null);
|
||
const checkInFlight = useRef(false);
|
||
const actionInFlight = useRef(false);
|
||
const disconnected = useRef(false);
|
||
const recoveredNotice = useRef(false);
|
||
|
||
// Active info depending on mock vs live
|
||
const isMock = MOCK_PREVIEW_ENABLED && mockScenario !== "live" && Boolean(mockCatalog);
|
||
const selectedMock = mockScenario !== "live" ? mockCatalog?.[mockScenario] : undefined;
|
||
const info = isMock && selectedMock ? (mockInfoState ?? selectedMock.info) : liveInfo;
|
||
|
||
// Handle mock scenario change
|
||
const handleScenarioChange = (scenario: "live" | MockScenario) => {
|
||
setMockScenario(scenario);
|
||
if (mockTimer.current !== null) {
|
||
window.clearTimeout(mockTimer.current);
|
||
mockTimer.current = null;
|
||
}
|
||
if (scenario !== "live") {
|
||
const next = mockCatalog?.[scenario];
|
||
if (!next) return;
|
||
setMockInfoState(JSON.parse(JSON.stringify(next.info)));
|
||
notify?.(`已切换至 Mock 场景：${next.title}`, "info");
|
||
} else {
|
||
setMockInfoState(null);
|
||
notify?.("已切回真实后端模式", "info");
|
||
}
|
||
};
|
||
|
||
useEffect(() => () => {
|
||
if (mockTimer.current !== null) window.clearTimeout(mockTimer.current);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!import.meta.env.DEV) return;
|
||
let disposed = false;
|
||
void import("./mockData").then(({ MOCK_SCENARIOS }) => {
|
||
if (!disposed) setMockCatalog(MOCK_SCENARIOS);
|
||
});
|
||
return () => {
|
||
disposed = true;
|
||
};
|
||
}, []);
|
||
|
||
const load = async () => {
|
||
if (isMock) return;
|
||
setLoading(true);
|
||
setError("");
|
||
try {
|
||
setLiveInfo(await api<UpdateInfo>("/api/update/status"));
|
||
} catch (e) {
|
||
setError((e as Error).message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!isMock) void load();
|
||
else setLoading(false);
|
||
}, [isMock]);
|
||
|
||
// Terminal failures or cancellations do not pollute active state
|
||
const job = info?.job && info.job.status !== "failed" && info.job.status !== "cancelled" ? info.job : null;
|
||
|
||
// Queued duration counter
|
||
useEffect(() => {
|
||
if (job?.status === "queued") {
|
||
const timer = window.setInterval(() => setQueuedSeconds((s) => s + 1), 1000);
|
||
return () => window.clearInterval(timer);
|
||
}
|
||
setQueuedSeconds(0);
|
||
}, [job?.status]);
|
||
|
||
const applyQueuedAt = timestamp(job?.applyQueuedAt);
|
||
const restartAt =
|
||
timestamp(job?.restartDeadline) ??
|
||
timestamp(job?.restartAt) ??
|
||
timestamp(job?.expectedRecoveryAt) ??
|
||
(job?.operation === "apply" && applyQueuedAt
|
||
? applyQueuedAt + (job.restartWindowSeconds ?? 30) * 1000
|
||
: null) ??
|
||
(job?.status === "applying" && job.updatedAt ? timestamp(job.updatedAt)! + 30_000 : null);
|
||
|
||
const restartSeconds = restartAt ? Math.max(0, Math.ceil((restartAt - now) / 1000)) : null;
|
||
|
||
useEffect(() => {
|
||
if (!restartAt) return;
|
||
const timer = window.setInterval(() => setNow(Date.now()), 1000);
|
||
return () => window.clearInterval(timer);
|
||
}, [restartAt]);
|
||
|
||
// Live polling effect: only poll when active job exists
|
||
useEffect(() => {
|
||
if (isMock) return;
|
||
const shouldPoll = Boolean(
|
||
job && (pollableStatuses.has(job.status) || (job.status === "staged" && job.operation === "apply"))
|
||
);
|
||
if (!shouldPoll || !job) {
|
||
setPollError("");
|
||
return;
|
||
}
|
||
let disposed = false;
|
||
let timer: number | undefined;
|
||
let failures = 0;
|
||
const schedule = (delay: number) => {
|
||
timer = window.setTimeout(() => void poll(), delay);
|
||
};
|
||
|
||
const poll = async () => {
|
||
try {
|
||
const result = await api<{ job: UpdateJob }>(`/api/update/jobs/${job.id}`);
|
||
if (disposed) return;
|
||
failures = 0;
|
||
if (disconnected.current && !recoveredNotice.current) {
|
||
recoveredNotice.current = true;
|
||
notify?.("服务连接正常，更新状态已同步", "success");
|
||
}
|
||
disconnected.current = false;
|
||
setPollError("");
|
||
setLiveInfo((current) => (current ? { ...current, job: result.job } : current));
|
||
if (result.job.status === "completed" && announced.current !== result.job.id) {
|
||
announced.current = result.job.id;
|
||
setReloadReady(true);
|
||
notify?.("系统升级完成，请刷新页面", "success");
|
||
}
|
||
if (
|
||
pollableStatuses.has(result.job.status) ||
|
||
(result.job.status === "staged" && result.job.operation === "apply")
|
||
) {
|
||
schedule(1500);
|
||
}
|
||
} catch {
|
||
if (disposed) return;
|
||
failures += 1;
|
||
disconnected.current = true;
|
||
recoveredNotice.current = false;
|
||
setPollError(
|
||
`服务正在平滑重启${
|
||
restartSeconds !== null ? `，预计 ${restartSeconds} 秒后恢复` : "，页面正在自动探活重试"
|
||
}。升级任务仍在后台安全执行。`
|
||
);
|
||
schedule(Math.min(1500 * 2 ** Math.min(failures, 3), 10_000));
|
||
}
|
||
};
|
||
void poll();
|
||
return () => {
|
||
disposed = true;
|
||
if (timer !== undefined) window.clearTimeout(timer);
|
||
};
|
||
}, [isMock, job?.id, job?.status, job?.operation, notify, restartSeconds]);
|
||
|
||
// Check update handler
|
||
const check = async () => {
|
||
if (isMock) {
|
||
setChecking(true);
|
||
window.setTimeout(() => {
|
||
setChecking(false);
|
||
notify?.("Mock：检查完成，已是最新配置状态", "success");
|
||
}, 600);
|
||
return;
|
||
}
|
||
if (checkInFlight.current) return;
|
||
checkInFlight.current = true;
|
||
setChecking(true);
|
||
setError("");
|
||
try {
|
||
setLiveInfo(await api<UpdateInfo>("/api/update/check", { method: "POST" }));
|
||
notify?.("版本检查完成", "info");
|
||
} catch (e) {
|
||
setError((e as Error).message);
|
||
} finally {
|
||
setChecking(false);
|
||
checkInFlight.current = false;
|
||
}
|
||
};
|
||
|
||
// Cancel queued job handler
|
||
const cancelJob = async () => {
|
||
if (cancelling) return;
|
||
setCancelling(true);
|
||
try {
|
||
await api("/api/update/cancel", { method: "POST", body: JSON.stringify({ jobId: job?.id }) });
|
||
notify?.("已取消更新排队", "success");
|
||
setShowUpgradeModal(false);
|
||
setConfirmReadyToDownload(false);
|
||
await load();
|
||
} catch (e) {
|
||
notify?.((e as Error).message, "error");
|
||
} finally {
|
||
setCancelling(false);
|
||
}
|
||
};
|
||
|
||
// Start download action
|
||
const startDownload = async () => {
|
||
if (!latest) return;
|
||
setActionBusy(true);
|
||
setError("");
|
||
try {
|
||
const response = await api<{ job: UpdateJob }>("/api/update/download", {
|
||
method: "POST",
|
||
body: JSON.stringify({ version: latest.version }),
|
||
});
|
||
setLiveInfo((current) => (current ? { ...current, job: response.job } : current));
|
||
setConfirmReadyToDownload(false);
|
||
notify?.("已提交下载更新包请求，后台下载中", "info");
|
||
} catch (e) {
|
||
setError((e as Error).message);
|
||
} finally {
|
||
setActionBusy(false);
|
||
}
|
||
};
|
||
|
||
// Start apply action
|
||
const startApply = async () => {
|
||
if (!latest) return;
|
||
setActionBusy(true);
|
||
setError("");
|
||
try {
|
||
const response = await api<{ job: UpdateJob }>("/api/update/apply", {
|
||
method: "POST",
|
||
body: JSON.stringify({ version: latest.version, confirm: true }),
|
||
});
|
||
setLiveInfo((current) => (current ? { ...current, job: response.job } : current));
|
||
notify?.("已提交升级请求，正在备份并平滑重启…", "info");
|
||
} catch (e) {
|
||
setError((e as Error).message);
|
||
} finally {
|
||
setActionBusy(false);
|
||
}
|
||
};
|
||
|
||
const latest = info?.latest;
|
||
const notes = notesFor(latest);
|
||
|
||
const canDownload = Boolean(
|
||
info?.strategy === "systemd" &&
|
||
latest?.isNewer &&
|
||
latest.compatible &&
|
||
latest.integrityReady &&
|
||
(!job || job.status === "failed" || job.status === "cancelled")
|
||
);
|
||
|
||
const canApply = Boolean(
|
||
info?.strategy === "systemd" &&
|
||
job &&
|
||
job.status === "staged" &&
|
||
job.operation === "download"
|
||
);
|
||
|
||
const hasActiveJob = Boolean(
|
||
job && activeStatuses.has(job.status) && job.status !== "staged"
|
||
);
|
||
|
||
// Compute current pipeline step index (0: check, 1: download, 2: verify/stage, 3: apply/restart)
|
||
const currentStep = useMemo(() => {
|
||
if (!job) return 0;
|
||
switch (job.status) {
|
||
case "queued":
|
||
case "downloading":
|
||
return 1;
|
||
case "verifying":
|
||
case "staged":
|
||
return 2;
|
||
case "backing_up":
|
||
case "applying":
|
||
case "completed":
|
||
return 3;
|
||
default:
|
||
return 0;
|
||
}
|
||
}, [job?.status]);
|
||
|
||
// Compute progress percentage
|
||
const progress = useMemo(() => {
|
||
if (!job) return 0;
|
||
if (job.status === "completed" || job.status === "staged") return 100;
|
||
if (job.status === "downloading") {
|
||
if (!job.sizeBytes || !job.downloadedBytes) return 10;
|
||
return Math.min(99, Math.max(1, Math.round((job.downloadedBytes / job.sizeBytes) * 100)));
|
||
}
|
||
if (job.status === "verifying") return 99;
|
||
if (job.status === "backing_up") return 40;
|
||
if (job.status === "applying") return 80;
|
||
return 0;
|
||
}, [job]);
|
||
|
||
// Calculate ETA seconds
|
||
const etaSeconds = useMemo(() => {
|
||
if (
|
||
job?.status === "downloading" &&
|
||
job.sizeBytes &&
|
||
job.downloadedBytes &&
|
||
job.downloadSpeedBps &&
|
||
job.downloadSpeedBps > 0
|
||
) {
|
||
const remainingBytes = Math.max(0, job.sizeBytes - job.downloadedBytes);
|
||
return Math.max(1, Math.ceil(remainingBytes / job.downloadSpeedBps));
|
||
}
|
||
return null;
|
||
}, [job]);
|
||
|
||
return (
|
||
<Page
|
||
eyebrow="运维与维护"
|
||
title="系统更新中心"
|
||
subtitle="管理系统版本升级、更新包完整性校验与安全热重启"
|
||
actions={
|
||
<div className="tn-update-page-actions">
|
||
{hasActiveJob && (
|
||
<Button
|
||
theme="primary"
|
||
variant="base"
|
||
onClick={() => setShowUpgradeModal(true)}
|
||
icon={<Zap size={15} />}
|
||
>
|
||
查看升级进度
|
||
</Button>
|
||
)}
|
||
<Button
|
||
theme="default"
|
||
variant="outline"
|
||
onClick={() => void check()}
|
||
loading={checking}
|
||
disabled={checking || hasActiveJob}
|
||
icon={<RefreshCw size={15} />}
|
||
>
|
||
检查新版本
|
||
</Button>
|
||
{reloadReady && (
|
||
<Button theme="success" onClick={() => window.location.reload()} icon={<CheckCircle2 size={15} />}>
|
||
刷新页面
|
||
</Button>
|
||
)}
|
||
</div>
|
||
}
|
||
className="tn-update-page"
|
||
>
|
||
|
||
|
||
{/* Global alert / error */}
|
||
{error && (
|
||
<div className="tn-update-error-banner" role="alert">
|
||
<AlertCircle size={16} />
|
||
<span>{error}</span>
|
||
<Button variant="text" size="small" onClick={() => void check()}>
|
||
重试
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
{pollError && (
|
||
<div className="tn-update-error-banner is-warning" role="status">
|
||
<RefreshCw size={16} className="tn-spin" />
|
||
<span>{pollError}</span>
|
||
</div>
|
||
)}
|
||
|
||
{loading && !info ? (
|
||
<Surface className="tn-update-loading-surface">
|
||
<BeamLoading text="正在读取系统更新服务状态…" />
|
||
</Surface>
|
||
) : !info ? (
|
||
<Surface className="tn-empty-surface">
|
||
<div className="tn-empty-content">
|
||
<AlertCircle size={28} className="text-danger" />
|
||
<p>无法读取系统更新状态，请稍后刷新重试。</p>
|
||
<Button theme="primary" onClick={() => void load()} icon={<RefreshCw size={15} />}>
|
||
重新加载
|
||
</Button>
|
||
</div>
|
||
</Surface>
|
||
) : (
|
||
<>
|
||
{/* 4 Metric Cards (System Overview) */}
|
||
<div className="tn-metrics-grid">
|
||
<Surface className="tn-metric-card">
|
||
<span className="tn-metric-label">当前运行版本</span>
|
||
<div className="tn-metric-value">v{info.currentVersion}</div>
|
||
<div className="tn-metric-foot">
|
||
{latest?.isNewer ? (
|
||
<Tag theme="primary" size="small">可更新至 v{latest.version}</Tag>
|
||
) : (
|
||
<Tag theme="success" size="small">已是最新版本</Tag>
|
||
)}
|
||
</div>
|
||
</Surface>
|
||
|
||
<Surface className="tn-metric-card">
|
||
<span className="tn-metric-label">运行目标架构</span>
|
||
<div className="tn-metric-value">{info.platform.target}</div>
|
||
<div className="tn-metric-foot">
|
||
<small>({info.platform.arch || "x86_64"} {info.platform.libc || "glibc"})</small>
|
||
</div>
|
||
</Surface>
|
||
|
||
<Surface className="tn-metric-card">
|
||
<span className="tn-metric-label">更新守护方式</span>
|
||
<div className="tn-metric-value">
|
||
{info.strategy === "systemd" ? "系统守护进程" : "独立运行模式"}
|
||
</div>
|
||
<div className="tn-metric-foot">
|
||
<small>({info.strategy === "systemd" ? "systemd active" : "未激活"})</small>
|
||
</div>
|
||
</Surface>
|
||
|
||
<Surface className="tn-metric-card tn-metric-date">
|
||
<span className="tn-metric-label">最近一次检查</span>
|
||
<div className="tn-metric-value">
|
||
{info.checkedAt ? dateText(info.checkedAt, timezone) : "未检查"}
|
||
</div>
|
||
<div className="tn-metric-foot">
|
||
<small>源: git.awaioi.com (HTTPS)</small>
|
||
</div>
|
||
</Surface>
|
||
</div>
|
||
|
||
{/* Container 1: Release Details Card */}
|
||
{latest ? (
|
||
<Surface className="tn-ascii-release-container">
|
||
<div className="tn-ascii-release-head">
|
||
<h3 className="tn-ascii-release-title">发布版本详情</h3>
|
||
<Tag theme={latest.isNewer ? "primary" : "success"} variant="light-outline">
|
||
{latest.isNewer ? "发现新版本" : "已是最新版本"}
|
||
</Tag>
|
||
</div>
|
||
|
||
<div className="tn-ascii-info-grid">
|
||
<div className="tn-ascii-info-item">
|
||
<span className="tn-ascii-info-label">最新发布版本:</span>
|
||
<span className="tn-ascii-info-val">v{latest.version}</span>
|
||
</div>
|
||
<div className="tn-ascii-info-item">
|
||
<span className="tn-ascii-info-label">发布时间:</span>
|
||
<span className="tn-ascii-info-val">
|
||
{latest.publishedAt ? dateText(latest.publishedAt, timezone) : "官方通道发布"}
|
||
</span>
|
||
</div>
|
||
<div className="tn-ascii-info-item">
|
||
<span className="tn-ascii-info-label">安装包大小:</span>
|
||
<span className="tn-ascii-info-val">
|
||
{latest.assetSize ? bytesText(latest.assetSize) : "-"}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="tn-ascii-info-item">
|
||
<span className="tn-ascii-info-label">运行环境适配:</span>
|
||
<span className="tn-ascii-info-val">
|
||
{latest.compatible ? "与当前系统完全匹配" : "环境暂未匹配"}
|
||
</span>
|
||
</div>
|
||
<div className="tn-ascii-info-item">
|
||
<span className="tn-ascii-info-label">安全完整性:</span>
|
||
<span className="tn-ascii-info-val">
|
||
{latest.integrityReady ? "SHA-256 + 签名已就绪" : "校验清单未就绪"}
|
||
</span>
|
||
</div>
|
||
<div className="tn-ascii-info-item">
|
||
<span className="tn-ascii-info-label">下载策略:</span>
|
||
<span className="tn-ascii-info-val">应用内流式直连 (零调度等待)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginTop: 14, padding: "10px 14px", background: "var(--tn-navy-50)", border: "1px solid var(--tn-navy-100)", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 8, fontSize: "12.5px" }}>
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 260, flex: 1 }}>
|
||
<span style={{ color: "var(--tn-navy-800)", fontWeight: 500 }}>
|
||
安装包下载直链 ({latest.assetName || "发布包"}):
|
||
</span>
|
||
<code style={{ fontSize: "11.5px", color: "var(--tn-navy-600)", wordBreak: "break-all" }}>
|
||
{latest.assetUrl || `https://git.awaioi.com/awaioi/TallyNote/releases/download/v${latest.version}/${latest.assetName || `tallynote-${latest.version}-linux-x64-glibc.tar.gz`}`}
|
||
</code>
|
||
</div>
|
||
<Button
|
||
size="small"
|
||
variant="outline"
|
||
onClick={() => {
|
||
const url = latest.assetUrl || `https://git.awaioi.com/awaioi/TallyNote/releases/download/v${latest.version}/${latest.assetName || `tallynote-${latest.version}-linux-x64-glibc.tar.gz`}`;
|
||
navigator.clipboard.writeText(url);
|
||
notify?.("已复制安装包下载直链", "success");
|
||
}}
|
||
>
|
||
复制直链
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="tn-ascii-release-actions">
|
||
{canDownload && (
|
||
<Button
|
||
theme="primary"
|
||
size="large"
|
||
onClick={() => {
|
||
setConfirmReadyToDownload(true);
|
||
setShowUpgradeModal(true);
|
||
}}
|
||
disabled={actionBusy}
|
||
icon={<Download size={16} />}
|
||
>
|
||
立即升级至 v{latest.version}
|
||
</Button>
|
||
)}
|
||
{canApply && (
|
||
<Button
|
||
theme="primary"
|
||
size="large"
|
||
onClick={() => setShowUpgradeModal(true)}
|
||
disabled={actionBusy}
|
||
icon={<Zap size={16} />}
|
||
>
|
||
更新包已就绪，立即应用 (v{latest.version})
|
||
</Button>
|
||
)}
|
||
{hasActiveJob && (
|
||
<Button
|
||
theme="primary"
|
||
size="large"
|
||
onClick={() => setShowUpgradeModal(true)}
|
||
icon={<Play size={16} />}
|
||
>
|
||
查看当前升级进度
|
||
</Button>
|
||
)}
|
||
{!latest.isNewer && !hasActiveJob && (
|
||
<Button theme="default" variant="outline" size="large" onClick={() => void check()} icon={<RefreshCw size={15} />}>
|
||
检查新版本
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</Surface>
|
||
) : (
|
||
<Surface className="tn-empty-surface">
|
||
<div className="tn-empty-content">
|
||
<CheckCircle2 size={32} className="text-success" />
|
||
<p>暂无待更新的版本信息，当前系统已是最新状态。</p>
|
||
<Button variant="outline" onClick={() => void check()} icon={<RefreshCw size={15} />}>
|
||
检查新版本
|
||
</Button>
|
||
</div>
|
||
</Surface>
|
||
)}
|
||
|
||
{latest && notes && (
|
||
<Surface className="tn-ascii-notes-container">
|
||
<div className="tn-ascii-notes-head">
|
||
<h3 className="tn-ascii-notes-title">本次版本更新说明</h3>
|
||
</div>
|
||
<div className="tn-ascii-notes-body">
|
||
<MarkdownNotes value={notes} />
|
||
</div>
|
||
</Surface>
|
||
)}
|
||
|
||
{/* Unmanaged warning if not systemd */}
|
||
{!info.configured && (
|
||
<div className="tn-update-explainer">
|
||
<div>
|
||
<strong>当前运行环境未启用后台自动更新服务</strong>
|
||
<p>
|
||
系统当前处于独立运行模式。若需开启在线一键更新，请配置系统后台更新守护进程。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* Unified Single Upgrade Modal (800px width on desktop) */}
|
||
<Dialog
|
||
visible={showUpgradeModal}
|
||
header={`系统升级控制台 · v${latest?.version || ""}`}
|
||
className="tn-dialog-large"
|
||
width="820px"
|
||
footer={null}
|
||
onClose={() => setShowUpgradeModal(false)}
|
||
>
|
||
<div className="tn-stepper-surface">
|
||
{/* 4 Steps Horizontal (Exact ASCII: (1) 版本确认 (2) 下载更新包 (3) 校验与准备 (4) 重启恢复) */}
|
||
<div className="tn-stepper-wrap">
|
||
<Steps current={currentStep} theme="default">
|
||
<StepItem title="版本确认" content="安全预检与确认" />
|
||
<StepItem title="下载更新包" content={job?.status === "downloading" ? `下载中 ${progress}%` : "安全下载发布包"} />
|
||
<StepItem title="校验与准备" content={job?.status === "staged" ? "校验通过，就绪" : "签名与指纹比对"} />
|
||
<StepItem title="重启恢复" content={job?.status === "applying" ? "热重启探活中" : "快照备份与切换"} />
|
||
</Steps>
|
||
</div>
|
||
|
||
{/* 场景 0: 升级前预检与确认 */}
|
||
{!job && confirmReadyToDownload && latest && (
|
||
<div className="tn-modal-card-box">
|
||
<div className="tn-modal-card-title">确认升级至 TallyNote v{latest.version}</div>
|
||
<p className="text-secondary" style={{ margin: "0 0 12px 0", fontSize: "13.5px" }}>
|
||
系统即将启动全自动化升级流水线，升级全过程平滑、安全且具备自动回滚保护。
|
||
</p>
|
||
<div className="tn-upgrade-safety-tips">
|
||
<div>• 更新包将在后台独立下载并完成数字签名比对，不影响当前前台正常记账；</div>
|
||
<div>• 应用更新前系统将自动生成数据库与凭据附件的完整安全快照；</div>
|
||
<div>• 服务平滑重启预计仅需 15~30 秒，健康检查通过后页面自动刷新恢复。</div>
|
||
</div>
|
||
<div className="tn-modal-actions-bar">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => {
|
||
setConfirmReadyToDownload(false);
|
||
setShowUpgradeModal(false);
|
||
}}
|
||
disabled={actionBusy}
|
||
>
|
||
暂不升级
|
||
</Button>
|
||
<Button
|
||
theme="primary"
|
||
onClick={() => void startDownload()}
|
||
loading={actionBusy}
|
||
disabled={actionBusy}
|
||
icon={<Download size={16} />}
|
||
>
|
||
确认并开始下载 ({bytesText(latest.assetSize)})
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 场景 A: 实时下载中态 (Exact ASCII) */}
|
||
{job?.status === "downloading" && (
|
||
<div className="tn-modal-card-box">
|
||
<div className="tn-modal-card-title">正在从官方源直接流式拉取更新包...</div>
|
||
<div style={{ fontSize: "12px", color: "var(--tn-navy-600)", margin: "-4px 0 12px 0", wordBreak: "break-all" }}>
|
||
请求地址: <code>{job.assetUrl || latest?.assetUrl || `https://git.awaioi.com/awaioi/TallyNote/releases/download/v${latest?.version || job.version}/${job.assetName || "release.tar.gz"}`}</code>
|
||
</div>
|
||
<div
|
||
className="tn-progress-stream"
|
||
role="progressbar"
|
||
aria-label="下载进度"
|
||
aria-valuenow={progress}
|
||
aria-valuemin={0}
|
||
aria-valuemax={100}
|
||
>
|
||
<div className="tn-progress-stream-bar" style={{ width: `${progress}%` }} />
|
||
</div>
|
||
|
||
<div className="tn-modal-metrics-row">
|
||
<div className="tn-modal-metrics-item">
|
||
已下载:<strong>{bytesText(job.downloadedBytes)} / {bytesText(job.sizeBytes)} ({progress}%)</strong>
|
||
</div>
|
||
<div className="tn-modal-metrics-item">
|
||
传输速率:<strong>{speedText(job.downloadSpeedBps)}</strong>
|
||
</div>
|
||
<div className="tn-modal-metrics-item">
|
||
预估剩余:<strong>{etaSeconds !== null ? `${etaSeconds} 秒` : "计算中…"}</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="tn-modal-info-note">
|
||
[i] 更新包由应用进程直接流式拉取并自动比对 SHA-256 校验和，0 秒秒级启动，无需等待外部系统守护进程调度。
|
||
</div>
|
||
|
||
<div className="tn-modal-actions-bar">
|
||
<Button variant="outline" onClick={() => void cancelJob()} loading={cancelling} disabled={cancelling}>
|
||
取消更新
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 场景 B: 建立连接中 (queued) (Exact ASCII) */}
|
||
{job?.status === "queued" && (
|
||
<div className="tn-modal-card-box">
|
||
<div className="tn-modal-card-title">
|
||
<div style={{ marginBottom: 12 }}><BeamBar width={160} /></div>正在建立与官方 Git 仓库的流式传输连接...
|
||
</div>
|
||
<div style={{ fontSize: "12px", color: "var(--tn-navy-600)", margin: "4px 0 14px 0", wordBreak: "break-all" }}>
|
||
目标地址: <code>{job.assetUrl || latest?.assetUrl || "https://git.awaioi.com"}</code>
|
||
</div>
|
||
<div className="tn-modal-actions-bar">
|
||
<Button variant="outline" onClick={() => void cancelJob()} loading={cancelling} disabled={cancelling}>
|
||
取消
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 场景 C: 校验通过准备就绪 (staged) (Exact ASCII) */}
|
||
{job?.status === "staged" && (
|
||
<div className="tn-modal-card-box">
|
||
<div className="tn-modal-card-title" style={{ color: "#2f7d5c", display: "flex", alignItems: "center", gap: 8 }}>
|
||
<CheckCircle2 size={18} />
|
||
更新包下载完成，SHA-256 指纹与 Ed25519 数字签名校验无误，准备就绪。
|
||
</div>
|
||
<div className="tn-upgrade-safety-tips" style={{ margin: "14px 0" }}>
|
||
<div>• 点击立即应用后，系统将自动创建数据库与附件的完整快照备份；</div>
|
||
<div>• 服务将进行平滑重启（预计 15~30 秒），完成后页面将自动重连并刷新；</div>
|
||
<div>• 升级过程具备原子切换与自愈保护，若健康检查异常将自动回退至当前版本。</div>
|
||
</div>
|
||
<div className="tn-modal-actions-bar">
|
||
<Button variant="outline" onClick={() => setShowUpgradeModal(false)}>
|
||
稍后手动应用
|
||
</Button>
|
||
<Button
|
||
theme="primary"
|
||
onClick={() => void startApply()}
|
||
loading={actionBusy}
|
||
disabled={actionBusy}
|
||
icon={<Zap size={16} />}
|
||
>
|
||
立即应用并重启
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 场景 D: 数据快照备份中或服务重启中 (backing_up / applying) (Exact ASCII) */}
|
||
{(job?.status === "backing_up" || job?.status === "applying") && (
|
||
<div className="tn-modal-card-box">
|
||
<div className="tn-modal-card-title">
|
||
<div style={{ marginBottom: 12 }}><BeamBar width={180} /></div>
|
||
服务正在平滑重启并执行健康检查...
|
||
</div>
|
||
<div style={{ fontSize: "14px", color: "var(--tn-navy-900)", margin: "10px 0 8px" }}>
|
||
预计恢复时间: <strong>{restartSeconds !== null ? `${restartSeconds} 秒` : "18 秒"}</strong> (倒计时中)
|
||
</div>
|
||
<p className="text-secondary" style={{ fontSize: "13px", margin: "0 0 16px 0", lineHeight: 1.6 }}>
|
||
系统正在自动进行心跳探活检测，连接成功后将自动唤醒，请勿关闭或强制断开服务器。
|
||
</p>
|
||
<div className="tn-modal-actions-bar">
|
||
<Button disabled theme="default">
|
||
系统维护中...
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 场景 E: 升级完成 (completed) (Exact ASCII) */}
|
||
{job?.status === "completed" && (
|
||
<div className="tn-modal-card-box" style={{ background: "rgba(47, 125, 92, 0.04)", border: "1px solid rgba(47, 125, 92, 0.25)" }}>
|
||
<div className="tn-modal-card-title" style={{ color: "#2f7d5c", display: "flex", alignItems: "center", gap: 8 }}>
|
||
<CheckCircle2 size={22} />
|
||
恭喜！系统已成功平滑升级至 v{latest?.version || info.currentVersion}。
|
||
</div>
|
||
<p style={{ fontSize: "13.5px", color: "var(--tn-text)", margin: "8px 0 16px" }}>
|
||
服务健康检查已全部通过，所有账目数据与发票凭证均完好无损。请点击下方按钮完成控制台刷新。
|
||
</p>
|
||
<div className="tn-modal-actions-bar">
|
||
<Button theme="success" size="large" onClick={() => window.location.reload()}>
|
||
刷新进入系统
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 场景 F: 失败 (failed) */}
|
||
{job?.status === "failed" && (
|
||
<div className="tn-modal-card-box" style={{ background: "rgba(227, 77, 89, 0.04)", border: "1px solid rgba(227, 77, 89, 0.25)" }}>
|
||
<div className="tn-modal-card-title" style={{ color: "#d54941", display: "flex", alignItems: "center", gap: 8 }}>
|
||
<ShieldAlert size={20} />
|
||
升级任务未完成
|
||
</div>
|
||
<p style={{ fontSize: "13.5px", color: "var(--tn-text)", margin: "8px 0 16px" }}>
|
||
{job.errorMessage || "升级任务出现异常，已自动保护并回退至原版本。数据完整无损。"}
|
||
</p>
|
||
<div className="tn-modal-actions-bar">
|
||
<Button variant="outline" onClick={() => setShowUpgradeModal(false)}>
|
||
关闭
|
||
</Button>
|
||
<Button theme="primary" onClick={() => void check()}>
|
||
重新检查
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Footer close button */}
|
||
{job?.status !== "staged" && job?.status !== "completed" && !confirmReadyToDownload && (
|
||
<div className="tn-modal-footer-close">
|
||
<Button variant="outline" onClick={() => setShowUpgradeModal(false)}>
|
||
关闭窗口（后台继续运行）
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div> </Dialog>
|
||
|
||
{/* Floating Mock Dock (Bottom-right, zero interference with main page) */}
|
||
{MOCK_PREVIEW_ENABLED && (
|
||
<aside className="tn-dev-mock-dock" aria-label="开发预览控制台">
|
||
<Terminal size={14} />
|
||
<strong>Mock:</strong>
|
||
<RadioGroup
|
||
variant="default-filled"
|
||
size="small"
|
||
value={mockScenario}
|
||
onChange={(value) => handleScenarioChange(value as "live" | MockScenario)}
|
||
>
|
||
<Radio.Button value="live">真实</Radio.Button>
|
||
{mockCatalog &&
|
||
Object.entries(mockCatalog).map(([key, item]) => (
|
||
<Radio.Button key={key} value={key}>
|
||
{item.title.split("（")[0]}
|
||
</Radio.Button>
|
||
))}
|
||
</RadioGroup>
|
||
</aside>
|
||
)}
|
||
</Page>
|
||
);
|
||
}
|