JellyAI
/
hts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

.

This commit is contained in:
hailin 2025-04-02 22:16:48 +08:00
parent 9470ba7985
commit f1bace981c
1 changed files with 349 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

491
apps/blogai/components/header.tsx
View File

@ -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 (
// <div className="sticky top-0 z-30 bg-white">
// <div className="mt-4 mb-1 px-6 lg:px-8 w-11/12 lg:w-2/3 xl:w-3/5 mx-auto">
// <div className="flex items-start space-x-6">
// {/* 左图标（可点） */}
// <button
// className="group flex items-center justify-center w-24 h-24 md:w-32 md:h-32 border transition"
// onClick={() => handleClick("icon")}
// disabled={loading || data?.status === "running"} // 👈 加上 status 判断
// >
// {isImagePath ? (
// <img
// src={resolvedIconSrc}
// alt="icon"
// className="
// w-full h-full object-contain
// transition-all duration-200
// group-hover:border-2 group-hover:border-blue-500
// group-active:border-2 group-active:border-green-500
// group-hover:scale-105 group-active:scale-95
// "
// />
// ) : (
// data?.icon || "Deploy"
// )}
// </button>
// {/* 信息 + 删除按钮：左右分布 */}
// <div className="flex justify-between flex-1 items-end">
// {/* 信息区域 */}
// <div className="text-sm leading-7 space-y-1.5">
// <div className="flex items-center gap-2">
// <BadgeInfo size={16} /> {data?.name || "未命名组件"}
// </div>
// <div className="flex items-center gap-2">
// <Tags size={16} /> {data?.category || "未知"}
// </div>
// <div className="flex items-center gap-2">
// <CalendarClock size={16} /> {data?.updated_at || "未提供"}
// </div>
// <div className="flex items-center gap-2">
// <Building2 size={16} /> {data?.company || "未知公司"}
// </div>
// </div>
// {/* 条件显示删除按钮 */}
// {showDelete && (
// <button
// onClick={handleDelete}
// className="hover:text-gray-700 transition self-end"
// disabled={loading}
// title="删除"
// >
// <Trash2 size={20} />
// </button>
// )}
// </div>
// </div>
// {/* 状态条 */}
// {(data?.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"
// style={{ width: progress || "0%" }}
// >
// {loading ? "操作中..." : statusText}
// </div>
// </div>
// )}
// </div>
// </div>
// );
// }
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 }) {
<div className="sticky top-0 z-30 bg-white">
<div className="mt-4 mb-1 px-6 lg:px-8 w-11/12 lg:w-2/3 xl:w-3/5 mx-auto">
<div className="flex items-start space-x-6">
{/* 左图标（可点） */}
<button
className="group flex items-center justify-center w-24 h-24 md:w-32 md:h-32 border transition"
onClick={() => handleClick("icon")}
disabled={loading}
disabled={loading || data?.status === "running"}
>
{isImagePath ? (
<img
src={resolvedIconSrc}
alt="icon"
className="
w-full h-full object-contain
transition-all duration-200
group-hover:border-2 group-hover:border-blue-500
group-active:border-2 group-active:border-green-500
group-hover:scale-105 group-active:scale-95
"
className="w-full h-full object-contain transition-all duration-200 group-hover:border-2 group-hover:border-blue-500 group-active:border-2 group-active:border-green-500 group-hover:scale-105 group-active:scale-95"
/>
) : (
data?.icon || "Deploy"
)}
</button>
{/* 信息 + 删除按钮：左右分布 */}
<div className="flex justify-between flex-1 items-end">
{/* 信息区域 */}
<div className="text-sm leading-7 space-y-1.5">
<div className="flex items-center gap-2">
<BadgeInfo size={16} /> {data?.name || "未命名组件"}
@ -376,8 +585,7 @@ export function DetailPageHeader({ data }: { data: any }) {
</div>
</div>
{/* 条件显示删除按钮 */}
{showDelete && (
{showDelete && (
<button
onClick={handleDelete}
className="hover:text-gray-700 transition self-end"
@ -387,12 +595,9 @@ export function DetailPageHeader({ data }: { data: any }) {
<Trash2 size={20} />
</button>
)}
</div>
</div>
{/* 状态条 */}
{(data?.progress !== "0%" || statusText) && (
<div className="w-full mt-4 bg-gray-200 h-6">
<div
@ -403,13 +608,15 @@ export function DetailPageHeader({ data }: { data: any }) {
</div>
</div>
)}
</div>
</div>
);
}
// export function Header() {
// const router = useRouter();