.

apps/blogai/components/header.tsx

@@ -126,6 +126,7 @@ export function DetailPageHeader({ data }: { data: any }) {
   const [progress, setProgress] = useState("0%");
   const [showDelete, setShowDelete] = useState(true); // 默认可以删除
 
+
   // const handleClick = async (source: "icon" | "info") => {
   //   setLoading(true);
   //   setStatusText(source === "icon" ? "正在处理图标操作..." : "正在处理信息操作...");
@@ -149,7 +150,8 @@ export function DetailPageHeader({ data }: { data: any }) {
   //       return;
   //     }
   
-  //     await fetch("/api/v1/deploy/deploy", {
+  //     // 发起部署请求
+  //     const res = await fetch("/api/v1/deploy/deploy", {
   //       method: "POST",
   //       headers: { "Content-Type": "application/json" },
   //       body: JSON.stringify({
@@ -158,24 +160,31 @@ export function DetailPageHeader({ data }: { data: any }) {
   //       }),
   //     });
   
-  //     await new Promise((resolve) => setTimeout(resolve, 1000));
+  //     if (!res.ok) {
-  //     setStatusText(`操作成功：来自${source === "icon" ? "图标" : "信息区域"}`);
+  //       throw new Error(`HTTP 请求失败：${res.status}`);
+  //     }
+  
+  //     const json = await res.json();
+  
+  //     if (json?.header?.code === 0) {
+  //       setStatusText(`${json.header.message || "操作成功"}`);
+  //     } else {
+  //       setStatusText(`${json.header.message || "操作失败（后端返回错误）"}`);
+  //     }
   //   } catch (err) {
   //     console.error("请求出错：", err);
-  //     setStatusText("操作失败");
+  //     setStatusText("操作失败，请检查网络或服务状态");
   //   } finally {
   //     setLoading(false);
   //   }
   // };
-
+ 
-  // ✅ 删除函数
  
   const handleClick = async (source: "icon" | "info") => {
     setLoading(true);
     setStatusText(source === "icon" ? "正在处理图标操作..." : "正在处理信息操作...");
   
     try {
-      // 从 localStorage 获取用户信息
       const userData = JSON.parse(localStorage.getItem("UserData") || "null");
   
       if (!userData || !userData.user_name) {
@@ -185,9 +194,8 @@ export function DetailPageHeader({ data }: { data: any }) {
       }
   
       const userName = userData.user_name;
-  
-      // 从组件 props 里的 data 中取 id
       const id = data?.id;
+  
       if (!id) {
         setStatusText("数据缺失：找不到组件 ID");
         return;
@@ -203,14 +211,43 @@ export function DetailPageHeader({ data }: { data: any }) {
         }),
       });
   
-      if (!res.ok) {
+      if (!res.ok) throw new Error(`HTTP 请求失败：${res.status}`);
-        throw new Error(`HTTP 请求失败：${res.status}`);
-      }
   
       const json = await res.json();
   
       if (json?.header?.code === 0) {
-        setStatusText(`${json.header.message || "操作成功"}`);
+        setStatusText("部署已启动，正在监听进度...");
+  
+        // 发起 WebSocket 连接监听部署进度
+        const wsBase = process.env.NEXT_PUBLIC_CLIENT_BASE_WS;
+        const socket = new WebSocket(`${wsBase}/status/${userName}/${id}`);
+  
+        socket.onopen = () => {
+          console.log("WebSocket 已连接");
+        };
+  
+        socket.onmessage = (event) => {
+          console.log("收到进度信息：", event.data);
+          // setStatusText(event.data); // 你也可以用 setProgress() 更新进度条
+          const msg = event.data;
+          setStatusText(msg);
+        
+          // ✅ 自动解析形如“进度: 65%，阶段: 正在部署”的格式
+          const match = msg.match(/进度[:：]?\s*(\d+)%/);
+          if (match && match[1]) {
+            const percent = match[1] + "%";
+            setProgress(percent);
+          }          
+        };
+  
+        socket.onerror = (error) => {
+          console.error("WebSocket 出错：", error);
+          setStatusText("WebSocket 出错");
+        };
+  
+        socket.onclose = () => {
+          console.log("🔌 WebSocket 连接已关闭");
+        };
       } else {
         setStatusText(`${json.header.message || "操作失败（后端返回错误）"}`);
       }
@@ -221,8 +258,7 @@ export function DetailPageHeader({ data }: { data: any }) {
       setLoading(false);
     }
   };
- 
+
- 
  
   const handleDelete = () => {
     if (loading) return;