feat(about): 添加关于页面的多个子页面内容

components/header/HeaderLinks.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Link as I18nLink, usePathname } from "@/i18n/routing";
+import { Link as I18nLink, usePathname, useRouter } from "@/i18n/routing";
 import { cn } from "@/lib/utils";
 import { HeaderLink } from "@/types/common";
 import { ExternalLink } from "lucide-react";
@@ -9,32 +9,112 @@ import { useTranslations } from "next-intl";
 const HeaderLinks = () => {
   const tHeader = useTranslations("Header");
   const pathname = usePathname();
+  const router = useRouter();
 
   const headerLinks: HeaderLink[] = tHeader.raw("links");
+  const localePrefix = `/${(pathname || "/zh").split("/")[1] || "zh"}`;
 
   return (
     <div className="hidden md:flex flex-row items-center gap-x-2 text-sm font-medium text-muted-500">
-      {headerLinks.map((link) => (
-        <I18nLink
-          key={link.name}
-          href={link.href}
-          title={link.name}
-          prefetch={link.target && link.target === "_blank" ? false : true}
-          target={link.target || "_self"}
-          rel={link.rel || undefined}
-          className={cn(
-            "rounded-xl px-4 py-2 flex items-center gap-x-1 hover:bg-accent-foreground/10 hover:text-accent-foreground",
-            pathname === link.href && "font-semibold text-accent-foreground"
-          )}
-        >
-          {link.name}
-          {link.target && link.target === "_blank" && (
-            <span className="text-xs">
-              <ExternalLink className="w-4 h-4" />
-            </span>
-          )}
-        </I18nLink>
-      ))}
+      {headerLinks.map((link) => {
+        const isAbout = link.href === "/about";
+        const isNews = link.href === "/blog";
+        if (isAbout) {
+          return (
+            <div key={link.name} className="relative group">
+              <I18nLink
+                href={link.href}
+                title={link.name}
+                prefetch={true}
+                className={cn(
+                  "rounded-xl px-4 py-2 flex items-center gap-x-1 hover:bg-accent-foreground/10 hover:text-accent-foreground",
+                  pathname === link.href && "font-semibold text-accent-foreground"
+                )}
+              >
+                {link.name}
+              </I18nLink>
+              {/* 移除触发器与菜单间的间隙，使用 pt-2 保持视觉间距但不中断 hover 区域 */}
+              <div className="absolute left-0 top-full hidden group-hover:block z-50 pt-2">
+                <div className="w-56 rounded-md border bg-white shadow-md overflow-hidden">
+                  <I18nLink prefetch={false} href="/about/arch#arch-vision" className="block px-4 py-2 hover:bg-red-600 hover:text-white">友发愿景</I18nLink>
+                  <I18nLink prefetch={false} href="/about/arch#arch-products" className="block px-4 py-2 hover:bg-red-600 hover:text-white">产品体系</I18nLink>
+                  <I18nLink prefetch={false} href="/about/arch#arch-application" className="block px-4 py-2 hover:bg-red-600 hover:text-white">应用场景</I18nLink>
+                  <I18nLink prefetch={false} href="/about/arch#arch-contact" className="block px-4 py-2 hover:bg-red-600 hover:text-white">联系方式</I18nLink>
+                </div>
+              </div>
+            </div>
+          );
+        }
+        if (isNews) {
+          return (
+            <div key={link.name} className="relative group">
+              <I18nLink
+                href={link.href}
+                title={link.name}
+                prefetch={true}
+                className={cn(
+                  "rounded-xl px-4 py-2 flex items-center gap-x-1 hover:bg-accent-foreground/10 hover:text-accent-foreground",
+                  pathname === link.href && "font-semibold text-accent-foreground"
+                )}
+              >
+                {link.name}
+              </I18nLink>
+              <div className="absolute left-0 top-full hidden group-hover:block z-50 pt-2">
+                <div className="w-44 rounded-md border bg-white shadow-md overflow-hidden">
+                  {[
+                    { key: "company", label: "公司新闻" },
+                    { key: "experts", label: "专家访谈" },
+                    { key: "industry", label: "行业动态" },
+                    { key: "notice", label: "公告" },
+                  ].map((it) => (
+                    <button
+                      key={it.key}
+                      className="block w-full text-left px-4 py-2 hover:bg-red-600 hover:text-white"
+                      onMouseDown={(e) => {
+                        const url = `${localePrefix}/blog?type=${it.key}`;
+                        try { router.push(url as any); } catch {}
+                        // 兜底，确保跳转
+                        setTimeout(() => { if (typeof window !== 'undefined') window.location.href = url; }, 0);
+                      }}
+                      onClick={(e) => {
+                        const url = `${localePrefix}/blog?type=${it.key}`;
+                        try { router.push(url as any); } catch {}
+                      }}
+                      onTouchStart={() => {
+                        const url = `${localePrefix}/blog?type=${it.key}`;
+                        try { router.push(url as any); } catch {}
+                      }}
+                    >
+                      {it.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          );
+        }
+        return (
+          <I18nLink
+            key={link.name}
+            href={link.href}
+            title={link.name}
+            prefetch={link.target && link.target === "_blank" ? false : true}
+            target={link.target || "_self"}
+            rel={link.rel || undefined}
+            className={cn(
+              "rounded-xl px-4 py-2 flex items-center gap-x-1 hover:bg-accent-foreground/10 hover:text-accent-foreground",
+              pathname === link.href && "font-semibold text-accent-foreground"
+            )}
+          >
+            {link.name}
+            {link.target && link.target === "_blank" && (
+              <span className="text-xs">
+                <ExternalLink className="w-4 h-4" />
+              </span>
+            )}
+          </I18nLink>
+        );
+      })}
     </div>
   );
 };

components/header/SectionDropdown.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useSectionStore } from "@/stores/sectionStore";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export default function SectionDropdown() {
+  const { sections } = useSectionStore();
+  if (!sections || sections.length === 0) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="px-3 py-2 rounded-md text-sm hover:bg-accent hover:text-accent-foreground">
+        页面目录
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuGroup>
+          {sections.map((s) => (
+            <DropdownMenuItem key={s.id}
+              onClick={() => {
+                const el = document.getElementById(s.id);
+                if (!el) return;
+                const rect = el.getBoundingClientRect();
+                const top = rect.top + window.scrollY - 80;
+                window.scrollTo({ top, behavior: "smooth" });
+                history.replaceState(null, "", `#${s.id}`);
+              }}
+            >
+              {s.name}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}