diff --git a/apps/blogai/components/header.tsx b/apps/blogai/components/header.tsx index 1b4a6b4..87957c0 100644 --- a/apps/blogai/components/header.tsx +++ b/apps/blogai/components/header.tsx @@ -120,139 +120,360 @@ export function Header() { // data.icon = "/images/icon.png" 👉 显示图片； // data.icon = undefined/null 👉 显示默认 "Deploy" 字样。 +// 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 [showDelete, setShowDelete] = useState(true); // 默认可以删除 + +// // 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) { +// // setStatusText("未登录，正在跳转登录页面..."); +// // window.location.href = "/auth/sign-in/"; +// // return; +// // } + +// // const userName = userData.user_name; + +// // // 从组件 props 里的 data 中取 id +// // const id = data?.id; +// // if (!id) { +// // setStatusText("数据缺失：找不到组件 ID"); +// // return; +// // } + +// // // 发起部署请求 +// // const res = await fetch("/api/v1/deploy/deploy", { +// // method: "POST", +// // headers: { "Content-Type": "application/json" }, +// // body: JSON.stringify({ +// // id, +// // user_name: userName, +// // }), +// // }); + +// // if (!res.ok) { +// // 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("操作失败，请检查网络或服务状态"); +// // } finally { +// // setLoading(false); +// // } +// // }; + +// const handleClick = async (source: "icon" | "info") => { +// setLoading(true); +// setStatusText(source === "icon" ? "正在处理图标操作..." : "正在处理信息操作..."); + +// try { +// const userData = JSON.parse(localStorage.getItem("UserData") || "null"); + +// if (!userData || !userData.user_name) { +// setStatusText("未登录，正在跳转登录页面..."); +// window.location.href = "/auth/sign-in/"; +// return; +// } + +// const userName = userData.user_name; +// const id = data?.id; + +// if (!id) { +// setStatusText("数据缺失：找不到组件 ID"); +// return; +// } + +// // 发起部署请求 +// const res = await fetch("/api/v1/deploy/deploy", { +// method: "POST", +// headers: { "Content-Type": "application/json" }, +// body: JSON.stringify({ +// id, +// user_name: userName, +// }), +// }); + +// if (!res.ok) throw new Error(`HTTP 请求失败：${res.status}`); + +// const json = await res.json(); + +// if (json?.header?.code === 0) { +// setStatusText("部署已启动，正在监听进度..."); + +// // ✅ 检查 env 变量是否读取成功 +// console.log("🧪 WS BASE =", process.env.NEXT_PUBLIC_CLIENT_BASE_WS); + +// // 发起 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 || "操作失败（后端返回错误）"}`); +// } +// } catch (err) { +// console.error("请求出错：", err); +// setStatusText("操作失败，请检查网络或服务状态"); +// } finally { +// setLoading(false); +// } +// }; + +// const handleDelete = () => { +// if (loading) return; + +// const confirmed = window.confirm("确定要删除模型吗？"); +// if (confirmed) { +// setLoading(true); +// // 模拟删除流程（实际调用 API 或其他逻辑） +// // await deleteComponent(data.id); +// console.log("模型已删除"); + +// setLoading(false); +// } +// }; + +// useEffect(() => { +// const fetchDeployStatus = async () => { +// try { +// const result = await fetch("/api/v1/deploy/status", { +// method: "POST", +// headers: { "Content-Type": "application/json" }, +// body: JSON.stringify({ id: data?.id }), +// }).then((res) => res.json()); + +// console.log("==================>result:", result); + +// if (!result || result.header?.code !== 1006) { +// setStatusText(result?.header?.message || "操作失败（后端返回错误）"); +// setShowDelete(false); // 非 1006 隐藏删除按钮 +// return; +// } + +// // 如果成功返回 +// setStatusText(result.header.message || "部署成功"); +// if (result.header?.code === 1006) { +// setShowDelete(false); // code === 1006 不可删除，隐藏按钮 +// setStatusText(""); +// setProgress("0%"); +// } else { +// setShowDelete(true); // 其他状态可删除 +// setStatusText(result.header.message || "部署中"); +// setProgress(result.data?.progress || "0%"); +// } +// // 如果还想设置进度的话，这里也可以 setProgress(result.data.progress || '0%') +// } catch (err) { +// console.error("请求部署状态失败：", err); +// setStatusText("请求失败"); +// setShowDelete(false); +// } +// }; + +// fetchDeployStatus(); +// }, [data?.id]); // id 变化时重新获取 + +// // 处理图标路径 +// const isImagePath = +// typeof data?.icon === "string" && +// (data.icon.startsWith("http") || data.icon.startsWith("/")); + +// const resolvedIconSrc = +// isImagePath && !data.icon.startsWith("http") +// ? process.env.NEXT_PUBLIC_CLIENT_IMAGE_URL + data.icon +// : data.icon; + +// return ( +//
+//
+//
+// {/* 左图标（可点） */} +// + +// {/* 信息 + 删除按钮：左右分布 */} +//
+// {/* 信息区域 */} +//
+//
+// {data?.name || "未命名组件"} +//
+//
+// {data?.category || "未知"} +//
+//
+// {data?.updated_at || "未提供"} +//
+//
+// {data?.company || "未知公司"} +//
+//
+ +// {/* 条件显示删除按钮 */} +// {showDelete && ( +// +// )} + +//
+ +//
+ +// {/* 状态条 */} +// {(data?.progress !== "0%" || statusText) && ( +//
+//
+// {loading ? "操作中..." : statusText} +//
+//
+// )} + +//
+//
+// ); +// } + + + + 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 [showDelete, setShowDelete] = useState(true); // 默认可以删除 + const [showDelete, setShowDelete] = useState(true); + // ✅ 提取 WebSocket 初始化逻辑 + const initWebSocket = (userName: string, id: number) => { + 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); + const msg = event.data; + setStatusText(msg); + + 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 连接已关闭"); + }; + }; - // 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) { - // setStatusText("未登录，正在跳转登录页面..."); - // window.location.href = "/auth/sign-in/"; - // return; - // } - - // const userName = userData.user_name; - - // // 从组件 props 里的 data 中取 id - // const id = data?.id; - // if (!id) { - // setStatusText("数据缺失：找不到组件 ID"); - // return; - // } - - // // 发起部署请求 - // const res = await fetch("/api/v1/deploy/deploy", { - // method: "POST", - // headers: { "Content-Type": "application/json" }, - // body: JSON.stringify({ - // id, - // user_name: userName, - // }), - // }); - - // if (!res.ok) { - // 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("操作失败，请检查网络或服务状态"); - // } finally { - // setLoading(false); - // } - // }; - - const handleClick = async (source: "icon" | "info") => { setLoading(true); setStatusText(source === "icon" ? "正在处理图标操作..." : "正在处理信息操作..."); - + try { const userData = JSON.parse(localStorage.getItem("UserData") || "null"); - if (!userData || !userData.user_name) { setStatusText("未登录，正在跳转登录页面..."); window.location.href = "/auth/sign-in/"; return; } - + const userName = userData.user_name; const id = data?.id; - if (!id) { setStatusText("数据缺失：找不到组件 ID"); return; } - - // 发起部署请求 + const res = await fetch("/api/v1/deploy/deploy", { method: "POST", headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - id, - user_name: userName, - }), + body: JSON.stringify({ id, user_name: userName }), }); - + if (!res.ok) throw new Error(`HTTP 请求失败：${res.status}`); - + const json = await res.json(); - if (json?.header?.code === 0) { setStatusText("部署已启动，正在监听进度..."); - - // ✅ 检查 env 变量是否读取成功 - console.log("🧪 WS BASE =", process.env.NEXT_PUBLIC_CLIENT_BASE_WS); - - // 发起 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 连接已关闭"); - }; + initWebSocket(userName, id); } else { - setStatusText(`${json.header.message || "操作失败（后端返回错误）"}`); + setStatusText(json.header.message || "操作失败（后端返回错误）"); } } catch (err) { console.error("请求出错：", err); @@ -262,24 +483,16 @@ export function DetailPageHeader({ data }: { data: any }) { } }; - const handleDelete = () => { if (loading) return; - const confirmed = window.confirm("确定要删除模型吗？"); if (confirmed) { setLoading(true); - // 模拟删除流程（实际调用 API 或其他逻辑） - // await deleteComponent(data.id); console.log("模型已删除"); - setLoading(false); } }; - - - useEffect(() => { const fetchDeployStatus = async () => { try { @@ -288,40 +501,45 @@ export function DetailPageHeader({ data }: { data: any }) { headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: data?.id }), }).then((res) => res.json()); - + console.log("==================>result:", result); - + + const status = result?.data?.status; + const userData = JSON.parse(localStorage.getItem("UserData") || "null"); + const userName = userData?.user_name; + const id = data?.id; + + if (status === "deploying" && userName && id) { + setStatusText("检测到正在部署，连接中..."); + initWebSocket(userName, id); + } + if (!result || result.header?.code !== 1006) { setStatusText(result?.header?.message || "操作失败（后端返回错误）"); - setShowDelete(false); // 非 1006 隐藏删除按钮 + setShowDelete(false); return; } - - // 如果成功返回 + setStatusText(result.header.message || "部署成功"); if (result.header?.code === 1006) { - setShowDelete(false); // code === 1006 不可删除，隐藏按钮 + setShowDelete(false); setStatusText(""); - setProgress("0%"); + setProgress("0%"); } else { - setShowDelete(true); // 其他状态可删除 + setShowDelete(true); setStatusText(result.header.message || "部署中"); - setProgress(result.data?.progress || "0%"); + setProgress(result.data?.progress || "0%"); } - // 如果还想设置进度的话，这里也可以 setProgress(result.data.progress || '0%') } catch (err) { console.error("请求部署状态失败：", err); setStatusText("请求失败"); setShowDelete(false); } }; - + fetchDeployStatus(); - }, [data?.id]); // id 变化时重新获取 + }, [data?.id]); - - - // 处理图标路径 const isImagePath = typeof data?.icon === "string" && (data.icon.startsWith("http") || data.icon.startsWith("/")); @@ -335,32 +553,23 @@ export function DetailPageHeader({ data }: { data: any }) {
- {/* 左图标（可点） */} - {/* 信息 + 删除按钮：左右分布 */}
- {/* 信息区域 */}
{data?.name || "未命名组件"} @@ -376,8 +585,7 @@ export function DetailPageHeader({ data }: { data: any }) {
- {/* 条件显示删除按钮 */} - {showDelete && ( + {showDelete && ( )} -
-
- {/* 状态条 */} {(data?.progress !== "0%" || statusText) && (
)} -
); } + + + // export function Header() { // const router = useRouter();