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>
)}
+13 -13
View File
@@ -257,30 +257,30 @@ export async function executeUpdate(
);
try {
onLog("开始更新流程...\n");
onLog("开始更新流程");
// 0. 检查 Docker 是否可用
onLog("[0/4] 检查 Docker 环境...\n");
onLog("[0/4] 检查 Docker 环境");
const dockerCheck = checkDockerAvailable();
if (!dockerCheck.ok) {
onLog(`${dockerCheck.message}\n`);
onLog(`${dockerCheck.message}`);
return { success: false, message: dockerCheck.message };
}
onLog("✓ Docker 环境正常\n");
onLog("✓ Docker 环境正常");
// 1. 拉取最新代码
const url = getAuthenticatedRemoteUrl();
onLog("[1/4] 克隆最新代码...\n");
onLog("[1/4] 克隆最新代码");
execSync(`git clone --depth 1 "${url}" "${tmpDir}"`, {
encoding: "utf-8",
timeout: 120000,
windowsHide: true,
stdio: ["ignore", "pipe", "pipe"],
});
onLog("✓ 代码拉取完成\n");
onLog("✓ 代码拉取完成");
// 2. 生成 .env 文件
onLog("[2/4] 准备环境变量...\n");
onLog("[2/4] 准备环境变量");
const envContent = [
`DB_HOST=${process.env.DB_HOST || "127.0.0.1"}`,
`DB_PORT=${process.env.DB_PORT || "3306"}`,
@@ -293,32 +293,32 @@ export async function executeUpdate(
`ONEDEV_ACCESS_TOKEN=${process.env.ONEDEV_ACCESS_TOKEN || ""}`,
].join("\n");
fs.writeFileSync(path.join(tmpDir, ".env"), envContent, "utf-8");
onLog("✓ 环境变量已准备\n");
onLog("✓ 环境变量已准备");
// 3. 构建新镜像
onLog("[3/4] 构建新 Docker 镜像...\n");
onLog("[3/4] 构建新 Docker 镜像");
execSync(`cd "${tmpDir}" && docker compose -p recipe_tool build`, {
encoding: "utf-8",
timeout: 600000,
windowsHide: true,
stdio: ["ignore", "pipe", "pipe"],
});
onLog("✓ 镜像构建完成\n");
onLog("✓ 镜像构建完成");
// 4. 重启服务
onLog("[4/4] 重启服务...\n");
onLog("[4/4] 重启服务");
execSync(`cd "${tmpDir}" && docker compose -p recipe_tool up -d`, {
encoding: "utf-8",
timeout: 60000,
windowsHide: true,
stdio: ["ignore", "pipe", "pipe"],
});
onLog("✓ 服务已重启\n");
onLog("✓ 服务已重启");
return { success: true, message: "更新完成" };
} catch (error) {
const errMsg = error instanceof Error ? error.message : "未知错误";
onLog(`✗ 更新失败: ${errMsg}\n`);
onLog(`✗ 更新失败: ${errMsg}`);
return { success: false, message: errMsg };
} finally {
try {