fix: 修复更新日志不显示的问题 (移除 showLogs 状态改用 updateState 控制)

This commit is contained in:
2026-05-24 22:50:06 +08:00
parent ccc4f502dc
commit e366179ae3
2 changed files with 36 additions and 49 deletions
+23 -36
View File
@@ -6,7 +6,6 @@ import {
CheckCircle2,
AlertCircle,
Loader2,
ChevronDown,
Terminal,
Calendar,
FileText,
@@ -36,7 +35,6 @@ export default function UpdatePage() {
const [checkState, setCheckState] = useState<CheckState>("idle");
const [updateState, setUpdateState] = useState<UpdateState>("idle");
const [logs, setLogs] = useState<string[]>([]);
const [showLogs, setShowLogs] = useState(false);
const [errorMsg, setErrorMsg] = useState<string>("");
const logEndRef = useRef<HTMLDivElement>(null);
@@ -70,7 +68,6 @@ export default function UpdatePage() {
const handleExecuteUpdate = useCallback(async () => {
setUpdateState("updating");
setLogs([]);
setShowLogs(true);
setErrorMsg("");
try {
@@ -315,45 +312,35 @@ export default function UpdatePage() {
)}
{/* 更新执行日志 */}
{showLogs && (
{(updateState !== "idle" || logs.length > 0) && (
<div className="rounded-lg border bg-card">
<button
onClick={() => setShowLogs(!showLogs)}
className="flex w-full items-center justify-between p-4 text-sm font-medium"
>
<div className="flex w-full items-center justify-between p-4 text-sm font-medium">
<div className="flex items-center gap-2">
<Terminal className="h-4 w-4"/>
</div>
<ChevronDown
className={`h-4 w-4 transition-transform ${
showLogs ? "" : "-rotate-90"
}`}
/>
</button>
</div>
{logs.length > 0 && (
<div className="border-t p-4">
<pre className="max-h-80 overflow-auto rounded-lg bg-black p-4 text-xs text-green-400 font-mono leading-relaxed">
{logs.map((log, i) => (
<div key={i}>{log}</div>
))}
{updateState === "updating" && (
<div className="flex items-center gap-1 mt-1">
<span className="animate-pulse"></span>
...
</div>
)}
{updateState === "done" && (
<div className="text-green-300 mt-1"> </div>
)}
{updateState === "error" && (
<div className="text-red-400 mt-1"> </div>
)}
<div ref={logEndRef}/>
</pre>
</div>
)}
<div className="border-t p-4">
<pre className="max-h-80 overflow-auto rounded-lg bg-black p-4 text-xs text-green-400 font-mono leading-relaxed">
{logs.map((log, i) => (
<div key={i}>{log}</div>
))}
{updateState === "updating" && (
<div className="flex items-center gap-1 mt-1">
<span className="animate-pulse"></span>
...
</div>
)}
{updateState === "done" && logs.length > 0 && (
<div className="text-green-300 mt-1"> </div>
)}
{updateState === "error" && logs.length > 0 && (
<div className="text-red-400 mt-1"> </div>
)}
<div ref={logEndRef}/>
</pre>
</div>
</div>
)}