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

.

This commit is contained in:
hailin 2025-04-06 14:39:22 +08:00
parent a7f01cd194
commit f3e874438b
2 changed files with 69 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
apps/blogai/app/[locale]/details/[slug]/page.tsx
View File

@ -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); 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({
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]);
// // 请求部署状态
let statusText = '';
let progress = '0%';
return ( return (
<> <>
{detailData && ( {/* <NavBack /> */}
<DetailPageHeader <DetailPageHeader
data={detailData} data={{
onStatusChange={() => { id: frontmatter.id,
console.log("📢 部署完成，刷新 DetailPageHeader 数据！"); icon: frontmatter.logo_url,
fetchDetailData(); // 🚀 部署完成/删除完成后重新刷新 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"> <div className='mb-40 md:mb-60 w-11/12 lg:w-2/3 xl:w-3/5 mx-auto'>
<Container className="scroll-smooth"> <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="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="mx-auto pt-[3rem] lg:pt-[0] ">
<figure className="w-full min-h-[146px] lg:min-h-[246px]">
<img {/* <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]">
src={
( <Link
frontmatter.image_url.includes("http") href="/"
? frontmatter.image_url className=" hover:text-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
: process.env.NEXT_PUBLIC_CLIENT_IMAGE_URL + frontmatter.image_url >
) || defaultImage Blog
} </Link>
alt={frontmatter.title} <p className=" ">&gt; </p>
style={{ width: '100%', marginBottom: '8px' }} <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> </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"> <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> </div>
</Container> </Container>
</div> </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=" ">&gt; </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; export default BlogArticleWrapper;

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

@ -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 [loading, setLoading] = useState(false);
const [statusText, setStatusText] = useState(data?.statusText || "加载中..."); const [statusText, setStatusText] = useState(data?.statusText || "加载中...");
const [progress, setProgress] = useState(data?.progress || "0%"); const [progress, setProgress] = useState(data?.progress || "0%");
@ -433,8 +433,9 @@ export function DetailPageHeader({ data, onStatusChange }: { data: any; onStatus
setProgress(match[1] + "%"); setProgress(match[1] + "%");
if (match[1] === "100") { if (match[1] === "100") {
console.log("部署完成 ✅，触发 onStatusChange"); setStatusText("运行中");
onStatusChange?.(); // ✅ 部署完成，通知父组件刷新 setProgressBarColor("bg-green-500");
setShowDelete(true); // 部署完成允许删除
} }
} }
@ -539,7 +540,6 @@ export function DetailPageHeader({ data, onStatusChange }: { data: any; onStatus
setStatusText("删除成功"); setStatusText("删除成功");
setProgress("0%"); setProgress("0%");
setShowDelete(false); // 删除成功后隐藏按钮 setShowDelete(false); // 删除成功后隐藏按钮
onStatusChange?.();
} else { } else {
setStatusText(json?.header?.message || "删除失败（后端返回错误）"); setStatusText(json?.header?.message || "删除失败（后端返回错误）");
} }