From a7f01cd194add4ab0585bb10a16f9a0615a0c358 Mon Sep 17 00:00:00 2001
From: hailin <hailin@gdzx.xyz>
Date: Sun, 6 Apr 2025 14:28:18 +0800
Subject: [PATCH] .

---
 .../app/[locale]/details/[slug]/page.tsx      | 206 ++++++++++++------
 apps/blogai/components/header.tsx             |  10 +-
 2 files changed, 146 insertions(+), 70 deletions(-)

diff --git a/apps/blogai/app/[locale]/details/[slug]/page.tsx b/apps/blogai/app/[locale]/details/[slug]/page.tsx
index f674c0b..be54b00 100644
--- a/apps/blogai/app/[locale]/details/[slug]/page.tsx
+++ b/apps/blogai/app/[locale]/details/[slug]/page.tsx
@@ -77,81 +77,62 @@ 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({
+      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 (
     <>
-      {/* <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
-                }}
-      />
+      {detailData && (
+        <DetailPageHeader
+          data={detailData}
+          onStatusChange={() => {
+            console.log("📢 部署完成，刷新 DetailPageHeader 数据！");
+            fetchDetailData(); // 🚀 部署完成/删除完成后重新刷新
+          }}
+        />
+      )}
 
-      <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] ">
-
-              {/* <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' }} />
+          <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={
+                    (
+                      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">
@@ -163,12 +144,99 @@ 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=" ">&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;
 
diff --git a/apps/blogai/components/header.tsx b/apps/blogai/components/header.tsx
index a6c8acd..5910bc8 100644
--- a/apps/blogai/components/header.tsx
+++ b/apps/blogai/components/header.tsx
@@ -403,7 +403,7 @@ export function Header() {
 
 
 
-export function DetailPageHeader({ data }: { data: any }) {
+export function DetailPageHeader({ data, onStatusChange }: { data: any; onStatusChange?:() => void }) {
   const [loading, setLoading] = useState(false);
   const [statusText, setStatusText] = useState(data?.statusText || "加载中...");
   const [progress, setProgress] = useState(data?.progress || "0%");
@@ -431,6 +431,12 @@ export function DetailPageHeader({ data }: { data: any }) {
       const match = msg.match(/进度[:：]?\s*(\d+)%/);
       if (match && match[1]) {
         setProgress(match[1] + "%");
+
+        if (match[1] === "100") {
+          console.log("部署完成 ✅，触发 onStatusChange");
+          onStatusChange?.(); // ✅ 部署完成，通知父组件刷新
+        }        
+        
       }
 
       setProgressBarColor("bg-blue-500"); // 保持默认颜色
@@ -453,6 +459,7 @@ export function DetailPageHeader({ data }: { data: any }) {
   const handleClick = async (source: "icon" | "info") => {
     setLoading(true);
     setStatusText(source === "icon" ? "正在处理图标操作..." : "正在处理信息操作...");
+    setShowProgressBar(true)
 
     try {
       const userData = JSON.parse(localStorage.getItem("UserData") || "null");
@@ -532,6 +539,7 @@ export function DetailPageHeader({ data }: { data: any }) {
         setStatusText("删除成功");
         setProgress("0%");
         setShowDelete(false); // 删除成功后隐藏按钮
+        onStatusChange?.();
       } else {
         setStatusText(json?.header?.message || "删除失败（后端返回错误）");
       }