543 lines
16 KiB
TypeScript
543 lines
16 KiB
TypeScript
'use client'
|
||
|
||
import React from 'react'
|
||
|
||
import { Suspense } from 'react'
|
||
|
||
import { auth } from '@/auth'
|
||
import { clearChats } from '@/app/actions'
|
||
import { Sidebar } from '@/components/sidebar'
|
||
import { SidebarList } from '@/components/sidebar-list'
|
||
import { IconSeparator } from '@/components/ui/icons'
|
||
import { SidebarFooter } from '@/components/sidebar-footer'
|
||
import { ClearHistory } from '@/components/clear-history'
|
||
import { UserMenu, UserData } from '@/components/user-menu'
|
||
import { LoginButton } from '@/components/login-button'
|
||
import {
|
||
Tooltip,
|
||
TooltipContent,
|
||
TooltipTrigger
|
||
} from '@/components/ui/tooltip'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { ConnectButton } from '@/components/connect-button'
|
||
import { SettingsDropDown } from './settings-drop-down'
|
||
|
||
|
||
import { useLocalStorage } from '@/lib/hooks/use-local-storage'
|
||
import { Button } from './ui/button'
|
||
|
||
import Image from 'next/image';
|
||
import logoImage from '@/components/images/logo.png';
|
||
import { useRouter } from 'next/navigation'
|
||
|
||
// import { Button } from './ui/button'
|
||
import { Flex, Text } from '@radix-ui/themes';
|
||
import Link from 'next/link'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { message } from 'antd'
|
||
import { LogoAI } from '@/components/chat'
|
||
|
||
import { useState } from "react";
|
||
|
||
import { Trash2 } from "lucide-react";
|
||
|
||
import { useEffect } from "react";
|
||
import {
|
||
BadgeInfo,
|
||
Tags,
|
||
CalendarClock,
|
||
Building2
|
||
} from "lucide-react";
|
||
|
||
|
||
export function Header() {
|
||
|
||
const router = useRouter();
|
||
const { t } = useTranslation();
|
||
|
||
const [userData, setUserData] = useLocalStorage(
|
||
'UserData',
|
||
{
|
||
auth_token: "",
|
||
id: 1,
|
||
login_ip: "",
|
||
login_time: 0,
|
||
role: "",
|
||
user_name: "",
|
||
version: ""
|
||
} as UserData
|
||
)
|
||
|
||
const soonFunc = () => {
|
||
message.info(t("soon"))
|
||
}
|
||
//w-11/12 sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-3/5 2xl:w-1/2
|
||
return (
|
||
<header className="sticky top-0 z-50 flex shrink-0 items-center justify-between bg-background px-4 py-[1.5rem] w-[80%] mx-auto">
|
||
|
||
<a href="/">
|
||
<LogoAI className="flex text-center ml-0" />
|
||
</a>
|
||
|
||
<div className="flex items-center justify-between ">
|
||
<div className="flex items-center ">
|
||
{(!!userData && !!userData.user_name) ? (
|
||
<div className='flex text-[#1A1A1A]'>
|
||
<UserMenu user={userData} />
|
||
</div>
|
||
|
||
) : (
|
||
<div className='flex gap-4 grid-cols-2 text-[#1A1A1A]'>
|
||
<Button variant="ghost" className='text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]'>
|
||
<Link href="/#subscribe-target"
|
||
>
|
||
{t('subscribe.subscribe')}
|
||
</Link>
|
||
</Button>
|
||
|
||
|
||
<LoginButton
|
||
variant="ghost"
|
||
// variant="link"
|
||
showGithubIcon={true}
|
||
text={t('login')}
|
||
className="-ml-2 text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]"
|
||
/>
|
||
</div>
|
||
|
||
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
</header>
|
||
)
|
||
}
|
||
|
||
|
||
// ✅ 图标显示逻辑现在是这样的：
|
||
// data.icon = "🚀" 👉 显示 emoji；
|
||
// 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}
|
||
>
|
||
{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 Header() {
|
||
|
||
// const router = useRouter();
|
||
// const { t } = useTranslation();
|
||
|
||
// const [userData, setUserData] = useLocalStorage(
|
||
// 'UserData',
|
||
// {
|
||
// auth_token: "",
|
||
// id: 1,
|
||
// login_ip: "",
|
||
// login_time: 0,
|
||
// role: "",
|
||
// user_name: "",
|
||
// version: ""
|
||
// } as UserData
|
||
// )
|
||
|
||
// const soonFunc = () => {
|
||
// message.info(t("soon"))
|
||
// }
|
||
|
||
// return (
|
||
// <header className="sticky top-0 z-50 flex w-full shrink-0 items-center justify-between bg-background px-4 py-[1.5rem]">
|
||
|
||
// {/* <MobileLinks className="lg:hidden" />
|
||
// <DesktopLinks className="hidden lg:flex" /> */}
|
||
// <div className="lg:hidden" ></div>
|
||
|
||
// <div className="hidden lg:flex" >
|
||
// {/* <Button variant="ghost" className='text-base font-bold hover:bg-[#e5e7eb]' onClick={soonFunc}>
|
||
// {t("header.course")}
|
||
// </Button>
|
||
// <Button variant="ghost" className='text-base font-bold hover:bg-[#e5e7eb]' onClick={soonFunc}>
|
||
// {t("header.models")}
|
||
// </Button>
|
||
// <Button variant="ghost" className='text-base font-bold hover:bg-[#e5e7eb]' onClick={soonFunc}>
|
||
// {t("header.resources")}
|
||
// </Button> */}
|
||
// </div>
|
||
|
||
// {/* <Image src={logoImage} height={40} alt="show" className="cursor-pointer" onClick={() => {
|
||
// router.push("/")
|
||
// // toast.success('coming soon')
|
||
// }} /> */}
|
||
|
||
// <LogoAI
|
||
// className='flex text-center m-auto'
|
||
// />
|
||
|
||
// <div className="flex items-center justify-between ">
|
||
// <div className="flex items-center ">
|
||
// {/* <IconSeparator className="size-6 text-muted-foreground/50" /> */}
|
||
|
||
// {(!!userData && !!userData.user_name) ? (
|
||
// <div className='flex text-[#1A1A1A]'>
|
||
// {/* <Button variant="ghost" className='text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]'
|
||
// onClick={() => {
|
||
// router.push("/subscribe")
|
||
// }}
|
||
// > {t("subscribe.subscribe")}</Button> */}
|
||
// <UserMenu user={userData} />
|
||
// </div>
|
||
|
||
// ) : (
|
||
// <div className='flex gap-4 grid-cols-2 text-[#1A1A1A]'>
|
||
// <Button variant="ghost" className='text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]'>
|
||
// <Link href="/#subscribe-target"
|
||
// >
|
||
// {t('subscribe.subscribe')}
|
||
// </Link>
|
||
// </Button>
|
||
|
||
|
||
// <LoginButton
|
||
// variant="ghost"
|
||
// // variant="link"
|
||
// showGithubIcon={true}
|
||
// text={t('login')}
|
||
// className="-ml-2 text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]"
|
||
// />
|
||
// </div>
|
||
|
||
|
||
// )}
|
||
// </div>
|
||
// </div>
|
||
|
||
// </header>
|
||
// )
|
||
// }
|
||
|
||
|
||
export function NavBack() {
|
||
|
||
|
||
const router = useRouter();
|
||
const { t } = useTranslation();
|
||
|
||
// const query = router.query; // 假设页面 URL 是 /mypage?id=123
|
||
|
||
console.log("query", router)
|
||
return (
|
||
<nav className="fixed top-[1rem] container flex items-center justify-between " >
|
||
<Link href="/">
|
||
{t("home")}
|
||
</Link>
|
||
</nav>
|
||
)
|
||
}
|
||
|
||
export function TimeP({
|
||
date,
|
||
}: {
|
||
date: string
|
||
}) {
|
||
|
||
|
||
const router = useRouter();
|
||
const { t } = useTranslation();
|
||
|
||
|
||
return (
|
||
<p className=" text-left text-[1rem] text-[#808080]">{date} {t("JellyAI")}</p>
|
||
)
|
||
}
|
||
|
||
|
||
|
||
|