This commit is contained in:
parent
a7f01cd194
commit
f3e874438b
|
|
@ -75,64 +75,77 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
|||
};
|
||||
}
|
||||
|
||||
const BlogArticleWrapper = async ({ params }: { params: { slug: string, locale: string, } }) => {
|
||||
|
||||
|
||||
const BlogArticleWrapper = async ({ params }: { params: { slug: string, locale: string } }) => {
|
||||
const { serialized, frontmatter, headings } = await getPostContent(params.locale, params.slug);
|
||||
|
||||
console.log("..........................frontmatter", frontmatter);
|
||||
console.log("..........................frontmatter", frontmatter)
|
||||
|
||||
const defaultImage = "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics3.baidu.com%2Ffeed%2F4ec2d5628535e5dd7c7cdc23847e08e2cc1b62c4.jpeg%40f_auto%3Ftoken%3D38327d5cbefb2cd45af58f8d47c0a0b5&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1710435600&t=eafc0a27ff3295bb5b0b9065fc33a523";
|
||||
const defaultImage = "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics3.baidu.com%2Ffeed%2F4ec2d5628535e5dd7c7cdc23847e08e2cc1b62c4.jpeg%40f_auto%3Ftoken%3D38327d5cbefb2cd45af58f8d47c0a0b5&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1710435600&t=eafc0a27ff3295bb5b0b9065fc33a523"
|
||||
|
||||
const [detailData, setDetailData] = useState<any>(null);
|
||||
|
||||
// 新增：用来刷新文章组件的部署状态
|
||||
const fetchDetailData = async () => {
|
||||
// 这里可以根据你的后端接口具体来，如果 frontmatter 里有足够信息就不需要
|
||||
setDetailData({
|
||||
// // 请求部署状态
|
||||
let statusText = '';
|
||||
let progress = '0%';
|
||||
return (
|
||||
<>
|
||||
{/* <NavBack /> */}
|
||||
<DetailPageHeader
|
||||
data={{
|
||||
id: frontmatter.id,
|
||||
icon: frontmatter.logo_url,
|
||||
name: frontmatter.p_name,
|
||||
category: frontmatter.tags,
|
||||
updated_at: frontmatter.date,
|
||||
company: frontmatter.title,
|
||||
progress: "0%",
|
||||
statusText: "",
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchDetailData();
|
||||
}, [frontmatter]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{detailData && (
|
||||
<DetailPageHeader
|
||||
data={detailData}
|
||||
onStatusChange={() => {
|
||||
console.log("📢 部署完成，刷新 DetailPageHeader 数据！");
|
||||
fetchDetailData(); // 🚀 部署完成/删除完成后重新刷新
|
||||
progress: progress,
|
||||
statusText: statusText
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="mb-40 md:mb-60 w-11/12 lg:w-2/3 xl:w-3/5 mx-auto">
|
||||
<div className='mb-40 md:mb-60 w-11/12 lg:w-2/3 xl:w-3/5 mx-auto'>
|
||||
<Container className="scroll-smooth">
|
||||
<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] ">
|
||||
<figure className="w-full min-h-[146px] lg:min-h-[246px]">
|
||||
<img
|
||||
src={
|
||||
|
||||
{/* <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="/"
|
||||
className=" hover:text-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
<p className=" ">> </p>
|
||||
<p className="">{frontmatter.title} </p>
|
||||
|
||||
</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]">
|
||||
{
|
||||
frontmatter.tags && frontmatter.tags?.length > 0 && frontmatter.tags?.map((item, index) => {
|
||||
return <h4 className="border rounded-full bg-[#E5E5E5] px-[1.8rem]">{item}</h4>
|
||||
})
|
||||
}
|
||||
</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> */}
|
||||
|
||||
<figure
|
||||
className="w-full min-h-[146px] lg:min-h-[246px]"
|
||||
>
|
||||
<img src={
|
||||
(
|
||||
frontmatter.image_url.includes("http")
|
||||
? frontmatter.image_url
|
||||
: process.env.NEXT_PUBLIC_CLIENT_IMAGE_URL + frontmatter.image_url
|
||||
) || defaultImage
|
||||
}
|
||||
alt={frontmatter.title}
|
||||
style={{ width: '100%', marginBottom: '8px' }}
|
||||
/>
|
||||
|
||||
} alt={frontmatter.title} style={{ width: '100%', marginBottom: '8px' }} />
|
||||
</figure>
|
||||
|
||||
<div className="prose prose-neutral dark:prose-invert prose-pre:border prose-pre:border-border prose-pre:rounded-lg prose-img:rounded-lg prose-img:border prose-img:border-border mx-auto w-full max-w-max">
|
||||
|
|
@ -144,99 +157,12 @@ const BlogArticleWrapper = async ({ params }: { params: { slug: string, locale:
|
|||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
// const BlogArticleWrapper = async ({ params }: { params: { slug: string, locale: string, } }) => {
|
||||
|
||||
// const { serialized, frontmatter, headings } = await getPostContent(params.locale, params.slug);
|
||||
|
||||
// console.log("..........................frontmatter", frontmatter)
|
||||
|
||||
// const defaultImage = "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics3.baidu.com%2Ffeed%2F4ec2d5628535e5dd7c7cdc23847e08e2cc1b62c4.jpeg%40f_auto%3Ftoken%3D38327d5cbefb2cd45af58f8d47c0a0b5&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1710435600&t=eafc0a27ff3295bb5b0b9065fc33a523"
|
||||
|
||||
|
||||
// // // 请求部署状态
|
||||
// let statusText = '';
|
||||
// let progress = '0%';
|
||||
// return (
|
||||
// <>
|
||||
// {/* <NavBack /> */}
|
||||
// <DetailPageHeader
|
||||
// data={{
|
||||
// id: frontmatter.id,
|
||||
// icon: frontmatter.logo_url,
|
||||
// name: frontmatter.p_name,
|
||||
// category: frontmatter.tags,
|
||||
// updated_at: frontmatter.date,
|
||||
// company: frontmatter.title,
|
||||
// progress: progress,
|
||||
// statusText: statusText
|
||||
// }}
|
||||
// />
|
||||
|
||||
// <div className='mb-40 md:mb-60 w-11/12 lg:w-2/3 xl:w-3/5 mx-auto'>
|
||||
// <Container className="scroll-smooth">
|
||||
// <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]">
|
||||
|
||||
// <Link
|
||||
// href="/"
|
||||
// className=" hover:text-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
|
||||
// >
|
||||
// Blog
|
||||
// </Link>
|
||||
// <p className=" ">> </p>
|
||||
// <p className="">{frontmatter.title} </p>
|
||||
|
||||
// </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]">
|
||||
// {
|
||||
// frontmatter.tags && frontmatter.tags?.length > 0 && frontmatter.tags?.map((item, index) => {
|
||||
// return <h4 className="border rounded-full bg-[#E5E5E5] px-[1.8rem]">{item}</h4>
|
||||
// })
|
||||
// }
|
||||
// </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> */}
|
||||
|
||||
// <figure
|
||||
// className="w-full min-h-[146px] lg:min-h-[246px]"
|
||||
// >
|
||||
// <img src={
|
||||
// (
|
||||
// frontmatter.image_url.includes("http")
|
||||
// ? frontmatter.image_url
|
||||
// : process.env.NEXT_PUBLIC_CLIENT_IMAGE_URL + frontmatter.image_url
|
||||
// ) || defaultImage
|
||||
|
||||
// } alt={frontmatter.title} style={{ width: '100%', marginBottom: '8px' }} />
|
||||
// </figure>
|
||||
|
||||
// <div className="prose prose-neutral dark:prose-invert prose-pre:border prose-pre:border-border prose-pre:rounded-lg prose-img:rounded-lg prose-img:border prose-img:border-border mx-auto w-full max-w-max">
|
||||
// <MdxContent source={serialized} />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <div className="pt-16"></div>
|
||||
// </div>
|
||||
// </Container>
|
||||
// </div>
|
||||
|
||||
// </>
|
||||
// );
|
||||
|
||||
|
||||
// };
|
||||
|
||||
export default BlogArticleWrapper;
|
||||
|
||||
|
|
|
|||
|
|
@ -403,7 +403,7 @@ export function Header() {
|
|||
|
||||
|
||||
|
||||
export function DetailPageHeader({ data, onStatusChange }: { data: any; onStatusChange?:() => void }) {
|
||||
export function DetailPageHeader({ data }: { data: any }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [statusText, setStatusText] = useState(data?.statusText || "加载中...");
|
||||
const [progress, setProgress] = useState(data?.progress || "0%");
|
||||
|
|
@ -433,8 +433,9 @@ export function DetailPageHeader({ data, onStatusChange }: { data: any; onStatus
|
|||
setProgress(match[1] + "%");
|
||||
|
||||
if (match[1] === "100") {
|
||||
console.log("部署完成 ✅，触发 onStatusChange");
|
||||
onStatusChange?.(); // ✅ 部署完成，通知父组件刷新
|
||||
setStatusText("运行中");
|
||||
setProgressBarColor("bg-green-500");
|
||||
setShowDelete(true); // 部署完成允许删除
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -539,7 +540,6 @@ export function DetailPageHeader({ data, onStatusChange }: { data: any; onStatus
|
|||
setStatusText("删除成功");
|
||||
setProgress("0%");
|
||||
setShowDelete(false); // 删除成功后隐藏按钮
|
||||
onStatusChange?.();
|
||||
} else {
|
||||
setStatusText(json?.header?.message || "删除失败（后端返回错误）");
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue