This commit is contained in:
parent
ea5db27394
commit
5bd546069c
|
|
@ -16,6 +16,8 @@ import { Header, NavBack, TimeP } from "@/components/header";
|
|||
import { baseTitle, baseURL, keywordsRoot } from "@/lib/metadata";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { DetailPageHeader } from '@/components/header'
|
||||
|
||||
export const runtime = "nodejs";
|
||||
|
||||
type Props = {
|
||||
|
|
@ -89,7 +91,7 @@ const BlogArticleWrapper = async ({ params }: { params: { slug: string, locale:
|
|||
<div className="relative mt-0 flex flex-col items-start space-y-8 lg:mt-2 lg:flex-row lg:space-y-0 ">
|
||||
<div className="mx-auto pt-[3rem] lg:pt-[0] ">
|
||||
|
||||
<div className="flex items-start space-x-[0.2rem] text-left text-[0.8rem] lg:text-[1rem] mb-8 text-[#808080] leading-[1.4rem] lg:leading-[4rem]">
|
||||
{/* <div className="flex items-start space-x-[0.2rem] text-left text-[0.8rem] lg:text-[1rem] mb-8 text-[#808080] leading-[1.4rem] lg:leading-[4rem]">
|
||||
|
||||
<Link
|
||||
href="/"
|
||||
|
|
@ -103,7 +105,6 @@ const BlogArticleWrapper = async ({ params }: { params: { slug: string, locale:
|
|||
</div>
|
||||
|
||||
<div className="flex items-start font-bold space-x-[2rem] text-[0.8rem] lg:text-[1.125rem] text-[#1A1A1A] leading-[1.5rem] lg:leading-[3rem] mb-[2rem]">
|
||||
{/* <h4 className="border rounded-full bg-[#E5E5E5] px-[1.8rem]">All Blogs </h4> */}
|
||||
{
|
||||
frontmatter.tags && frontmatter.tags?.length > 0 && frontmatter.tags?.map((item, index) => {
|
||||
return <h4 className="border rounded-full bg-[#E5E5E5] px-[1.8rem]">{item}</h4>
|
||||
|
|
@ -112,13 +113,15 @@ const BlogArticleWrapper = async ({ params }: { params: { slug: string, locale:
|
|||
</div>
|
||||
|
||||
<TimeP date={frontmatter.date} />
|
||||
|
||||
<h2 className="text-left text-[1rem] leading-[1.625rem] mb-[1rem] font-bold tracking-tight text-[#1A1A1A] sm:text-[1rem] lg:text-[1.5rem] lg:leading-[7.625rem]">
|
||||
{frontmatter.title}
|
||||
</h2>
|
||||
</h2> */}
|
||||
|
||||
<DetailPageHeader/>
|
||||
|
||||
<figure
|
||||
className="w-full min-h-[146px] lg:min-h-[246px]"
|
||||
// style={{ width: '100%', minHeight: "246px" }}
|
||||
>
|
||||
<img src={
|
||||
(
|
||||
|
|
|
|||
|
|
@ -37,6 +37,8 @@ import { useTranslation } from 'react-i18next'
|
|||
import { message } from 'antd'
|
||||
import { LogoAI } from '@/components/chat'
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
|
||||
export function Header() {
|
||||
|
||||
|
|
@ -103,70 +105,76 @@ export function Header() {
|
|||
}
|
||||
|
||||
|
||||
export function DetailPageHeader() {
|
||||
|
||||
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
|
||||
)
|
||||
export function DetailPageHeader({ data }: { data: any }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [statusText, setStatusText] = useState(data?.statusText || "加载中...");
|
||||
|
||||
// 模拟调用 API
|
||||
const handleClick = async (source: "icon" | "info") => {
|
||||
setLoading(true);
|
||||
setStatusText(source === "icon" ? "正在处理图标操作..." : "正在处理信息操作...");
|
||||
try {
|
||||
// 模拟 API 请求
|
||||
const res = await fetch("/api/stub", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ source })
|
||||
});
|
||||
|
||||
// 假装等待响应
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
setStatusText(`操作成功：来自${source === "icon" ? "图标" : "信息区域"}`);
|
||||
} catch (err) {
|
||||
setStatusText("操作失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
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">
|
||||
<div className="w-[80%] mx-auto border rounded-xl p-6 shadow-md bg-white space-y-6">
|
||||
{/* 上方内容区域 */}
|
||||
<div className="flex items-start space-x-6">
|
||||
{/* 左侧图标区域 - 可点击 */}
|
||||
<button
|
||||
className="flex items-center justify-center w-32 h-32 border rounded-md text-xl font-bold hover:bg-gray-100 transition"
|
||||
onClick={() => handleClick("icon")}
|
||||
disabled={loading}
|
||||
>
|
||||
{data?.icon || "Deploy"}
|
||||
</button>
|
||||
|
||||
<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
|
||||
className="text-sm leading-7 space-y-1 cursor-pointer hover:bg-gray-50 p-2 rounded transition"
|
||||
onClick={() => handleClick("info")}
|
||||
>
|
||||
<p><strong>名称：</strong>{data?.name || "未命名组件"}</p>
|
||||
<p><strong>类别：</strong>{data?.category || "未知"}</p>
|
||||
<p><strong>更新时间：</strong>{data?.updated_at || "未提供"}</p>
|
||||
<p><strong>公司：</strong>{data?.company || "未知公司"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
)
|
||||
{/* 底部进度条或状态条 */}
|
||||
<div className="w-full bg-gray-200 rounded-full h-6 overflow-hidden">
|
||||
<div
|
||||
className="bg-blue-500 h-full text-white text-center text-sm flex items-center justify-center transition-all duration-300"
|
||||
style={{ width: data?.progress || "60%" }}
|
||||
>
|
||||
{loading ? "操作中..." : statusText}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// export function Header() {
|
||||
|
||||
// const router = useRouter();
|
||||
|
|
|
|||
Loading…
Reference in New Issue