diff --git a/apps/blogai/app/[locale]/details/[slug]/page.tsx b/apps/blogai/app/[locale]/details/[slug]/page.tsx
index df3f1fb..ace7eac 100644
--- a/apps/blogai/app/[locale]/details/[slug]/page.tsx
+++ b/apps/blogai/app/[locale]/details/[slug]/page.tsx
@@ -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={
                   (
diff --git a/apps/blogai/components/header.tsx b/apps/blogai/components/header.tsx
index 5a3b3dc..2c3abb8 100644
--- a/apps/blogai/components/header.tsx
+++ b/apps/blogai/components/header.tsx
@@ -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();