.

apps/blogai/components/header.tsx

@@ -407,6 +407,7 @@ export function DetailPageHeader({ data }: { data: any }) {
   const [loading, setLoading] = useState(false);
   const [statusText, setStatusText] = useState(data?.statusText || "加载中...");
   const [progress, setProgress] = useState(data?.progress || "0%");
+  const [progressBarColor, setProgressBarColor] = useState("bg-blue-500"); // ✅ 默认蓝色
   const [showDelete, setShowDelete] = useState(false);
   const [hasWSConnected, setHasWSConnected] = useState(false);
   const [statusLoaded, setStatusLoaded] = useState(false);
@@ -419,9 +420,7 @@ export function DetailPageHeader({ data }: { data: any }) {
     const socket = new WebSocket(`${wsBase}/status/${userName}/${id}`);
     socketRef.current = socket;
 
-    socket.onopen = () => {
+    socket.onopen = () => console.log("WebSocket 已连接");
-      console.log("WebSocket 已连接");
-    };
 
     socket.onmessage = (event) => {
       const msg = event.data;
@@ -432,6 +431,8 @@ export function DetailPageHeader({ data }: { data: any }) {
       if (match && match[1]) {
         setProgress(match[1] + "%");
       }
+
+      setProgressBarColor("bg-blue-500"); // 保持默认颜色
     };
 
     socket.onerror = (err) => {
@@ -476,6 +477,7 @@ export function DetailPageHeader({ data }: { data: any }) {
       const json = await res.json();
       if (json?.header?.code === 0) {
         setStatusText("部署已启动，监听中...");
+        setProgressBarColor("bg-blue-500");
         initWebSocket(userName, id);
       } else {
         setStatusText(json.header.message || "操作失败（后端）");
@@ -523,10 +525,10 @@ export function DetailPageHeader({ data }: { data: any }) {
 
         console.log("🟡 状态码 code =", code, "状态 status =", status);
 
-        // ✅ 1006 表示无记录，不显示删除
         if (code === 1006) {
           setStatusText("尚未部署");
           setShowDelete(false);
+          setProgress("0%");
           return;
         }
 
@@ -535,14 +537,22 @@ export function DetailPageHeader({ data }: { data: any }) {
           initWebSocket(userName, id);
         }
 
-        setStatusText(result?.header?.message || "部署状态读取成功");
-
         if (status === "running" || status === "stopped") {
           console.log("✅ 允许删除（status =", status, ")");
           setShowDelete(true);
+          setProgress("100%");
+
+          if (status === "running") {
+            setStatusText("运行中");
+            setProgressBarColor("bg-green-500");
+          } else if (status === "stopped") {
+            setStatusText("已停止");
+            setProgressBarColor("bg-gray-400");
+          }
         } else {
           console.log("❌ 不允许删除（status =", status, ")");
           setShowDelete(false);
+          setProgressBarColor("bg-blue-500"); // 回到默认蓝色
         }
       } catch (err) {
         console.error("获取状态失败：", err);
@@ -623,7 +633,7 @@ export function DetailPageHeader({ data }: { data: any }) {
         {(progress !== "0%" || statusText) && (
           <div className="w-full mt-4 bg-gray-200 h-6">
             <div
-              className="bg-blue-500 h-full text-white text-center text-sm flex items-center justify-center transition-all duration-300 px-2 overflow-hidden whitespace-nowrap text-ellipsis"
+              className={`${progressBarColor} h-full text-white text-center text-sm flex items-center justify-center transition-all duration-300 px-2 overflow-hidden whitespace-nowrap text-ellipsis`}
               style={{ width: progress || "0%" }}
             >
               {loading ? "操作中..." : statusText}