Compare commits
2 Commits
17a30157db
...
0a420f2dbb
| Author | SHA1 | Date | |
|---|---|---|---|
| 0a420f2dbb | |||
| 64ad7a9cce |
@@ -0,0 +1,37 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { useSectionStore } from "@/stores/sectionStore";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
const { setSections } = useSectionStore();
|
||||||
|
useEffect(() => {
|
||||||
|
setSections([
|
||||||
|
{ id: "arch-vision", name: "友发愿景" },
|
||||||
|
{ id: "arch-products", name: "产品体系" },
|
||||||
|
{ id: "arch-application", name: "应用场景" },
|
||||||
|
{ id: "arch-contact", name: "联系方式" },
|
||||||
|
]);
|
||||||
|
}, [setSections]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<section id="arch-vision" className="container mx-auto px-4 py-12">
|
||||||
|
<h2 className="text-3xl font-bold mb-4">友发愿景</h2>
|
||||||
|
<p className="text-gray-600">内容占位</p>
|
||||||
|
</section>
|
||||||
|
<section id="arch-products" className="container mx-auto px-4 py-12">
|
||||||
|
<h2 className="text-3xl font-bold mb-4">产品体系</h2>
|
||||||
|
<p className="text-gray-600">内容占位</p>
|
||||||
|
</section>
|
||||||
|
<section id="arch-application" className="container mx-auto px-4 py-12">
|
||||||
|
<h2 className="text-3xl font-bold mb-4">应用场景</h2>
|
||||||
|
<p className="text-gray-600">内容占位</p>
|
||||||
|
</section>
|
||||||
|
<section id="arch-contact" className="container mx-auto px-4 py-12">
|
||||||
|
<h2 className="text-3xl font-bold mb-4">联系方式</h2>
|
||||||
|
<p className="text-gray-600">内容占位</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-12">基础介绍</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-12">发展历程</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-12">企业文化</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-12">绿色发展</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-12">荣誉资质</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-12">公司介绍</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,16 +1,15 @@
|
|||||||
import { Locale, LOCALES, Link as I18nLink } from "@/i18n/routing";
|
import ParallaxHero from "@/app/[locale]/blog/ParallaxHero";
|
||||||
|
import TablerEyeFilled from "@/components/icons/eye";
|
||||||
|
import { Link as I18nLink, Locale, LOCALES } from "@/i18n/routing";
|
||||||
import { getPosts } from "@/lib/getBlogs";
|
import { getPosts } from "@/lib/getBlogs";
|
||||||
import { constructMetadata } from "@/lib/metadata";
|
import { constructMetadata } from "@/lib/metadata";
|
||||||
|
import dayjs from "dayjs";
|
||||||
import { Metadata } from "next";
|
import { Metadata } from "next";
|
||||||
import { getTranslations } from "next-intl/server";
|
import { getTranslations } from "next-intl/server";
|
||||||
import Image from "next/image";
|
|
||||||
import dayjs from "dayjs";
|
|
||||||
import TablerEyeFilled from "@/components/icons/eye";
|
|
||||||
import ParallaxHero from "@/app/[locale]/blog/ParallaxHero";
|
|
||||||
|
|
||||||
type Params = Promise<{ locale: string }>;
|
type Params = Promise<{ locale: string }>;
|
||||||
|
|
||||||
type SearchParams = { page?: string };
|
type SearchParams = { page?: string; type?: string };
|
||||||
|
|
||||||
type MetadataProps = {
|
type MetadataProps = {
|
||||||
params: Params;
|
params: Params;
|
||||||
@@ -40,10 +39,29 @@ export default async function Page({
|
|||||||
searchParams?: SearchParams;
|
searchParams?: SearchParams;
|
||||||
}) {
|
}) {
|
||||||
const { locale } = await params;
|
const { locale } = await params;
|
||||||
const { posts } = await getPosts(locale);
|
let { posts } = await getPosts(locale);
|
||||||
|
|
||||||
const t = await getTranslations("Blog");
|
const t = await getTranslations("Blog");
|
||||||
|
|
||||||
|
// 分类筛选(公司新闻/专家访谈/行业动态/公告)
|
||||||
|
const type = (searchParams?.type || "").toLowerCase();
|
||||||
|
const typeLabelMap: Record<string, string> = {
|
||||||
|
company: "公司新闻",
|
||||||
|
experts: "专家访谈",
|
||||||
|
industry: "行业动态",
|
||||||
|
notice: "公告",
|
||||||
|
};
|
||||||
|
const typeLabel = typeLabelMap[type];
|
||||||
|
if (type) {
|
||||||
|
posts = posts.filter((p) => {
|
||||||
|
const metaType = String((p.metadata as any)?.type || "").toLowerCase();
|
||||||
|
const tags: string[] = (p.tags as any) || [];
|
||||||
|
const hitMeta = metaType === type;
|
||||||
|
const hitTag = Array.isArray(tags) && tags.some((t) => String(t).toLowerCase() === type);
|
||||||
|
return hitMeta || hitTag;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const pageRaw = searchParams?.page;
|
const pageRaw = searchParams?.page;
|
||||||
const page = Math.max(1, parseInt(pageRaw || "1", 10));
|
const page = Math.max(1, parseInt(pageRaw || "1", 10));
|
||||||
const pageSize = 10;
|
const pageSize = 10;
|
||||||
@@ -75,6 +93,12 @@ export default async function Page({
|
|||||||
<I18nLink href="/blog" prefetch={false} className="hover:underline">
|
<I18nLink href="/blog" prefetch={false} className="hover:underline">
|
||||||
新闻中心
|
新闻中心
|
||||||
</I18nLink>
|
</I18nLink>
|
||||||
|
{typeLabel && (
|
||||||
|
<>
|
||||||
|
<span>/</span>
|
||||||
|
<span className="text-gray-700">{typeLabel}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"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 { cn } from "@/lib/utils";
|
||||||
import { HeaderLink } from "@/types/common";
|
import { HeaderLink } from "@/types/common";
|
||||||
import { ExternalLink } from "lucide-react";
|
import { ExternalLink } from "lucide-react";
|
||||||
@@ -9,32 +9,112 @@ import { useTranslations } from "next-intl";
|
|||||||
const HeaderLinks = () => {
|
const HeaderLinks = () => {
|
||||||
const tHeader = useTranslations("Header");
|
const tHeader = useTranslations("Header");
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
const headerLinks: HeaderLink[] = tHeader.raw("links");
|
const headerLinks: HeaderLink[] = tHeader.raw("links");
|
||||||
|
const localePrefix = `/${(pathname || "/zh").split("/")[1] || "zh"}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="hidden md:flex flex-row items-center gap-x-2 text-sm font-medium text-muted-500">
|
<div className="hidden md:flex flex-row items-center gap-x-2 text-sm font-medium text-muted-500">
|
||||||
{headerLinks.map((link) => (
|
{headerLinks.map((link) => {
|
||||||
<I18nLink
|
const isAbout = link.href === "/about";
|
||||||
key={link.name}
|
const isNews = link.href === "/blog";
|
||||||
href={link.href}
|
if (isAbout) {
|
||||||
title={link.name}
|
return (
|
||||||
prefetch={link.target && link.target === "_blank" ? false : true}
|
<div key={link.name} className="relative group">
|
||||||
target={link.target || "_self"}
|
<I18nLink
|
||||||
rel={link.rel || undefined}
|
href={link.href}
|
||||||
className={cn(
|
title={link.name}
|
||||||
"rounded-xl px-4 py-2 flex items-center gap-x-1 hover:bg-accent-foreground/10 hover:text-accent-foreground",
|
prefetch={true}
|
||||||
pathname === link.href && "font-semibold text-accent-foreground"
|
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">
|
{link.name}
|
||||||
<ExternalLink className="w-4 h-4" />
|
</I18nLink>
|
||||||
</span>
|
{/* 移除触发器与菜单间的间隙,使用 pt-2 保持视觉间距但不中断 hover 区域 */}
|
||||||
)}
|
<div className="absolute left-0 top-full hidden group-hover:block z-50 pt-2">
|
||||||
</I18nLink>
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
41
components/header/SectionDropdown.tsx
Normal file
41
components/header/SectionDropdown.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -127,9 +127,11 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"Home": {
|
"Home": {
|
||||||
"title": "福安德外贸",
|
"title": "Next Forge",
|
||||||
"tagLine": "福安德对外贸易的门户网站",
|
"tagLine": "Next.js 多语言启动模板",
|
||||||
"description": "内置多语言支持的 Next.js 16 启动模板,助您快速构建面向全球的出海网站。简洁高效,开箱即用,完全优化的SEO基础架构。"
|
"description": "内置多语言支持的 Next.js 16 启动模板,助您快速构建面向全球的出海网站。简洁高效,开箱即用,完全优化的SEO基础架构。",
|
||||||
|
"carousel": "轮播图",
|
||||||
|
"company_video": "企业视频"
|
||||||
},
|
},
|
||||||
"Blog": {
|
"Blog": {
|
||||||
"title": "新闻中心",
|
"title": "新闻中心",
|
||||||
|
|||||||
15
stores/sectionStore.ts
Normal file
15
stores/sectionStore.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { create } from "zustand";
|
||||||
|
|
||||||
|
export type SectionItem = { id: string; name: string };
|
||||||
|
|
||||||
|
type SectionStore = {
|
||||||
|
sections: SectionItem[];
|
||||||
|
setSections: (items: SectionItem[]) => void;
|
||||||
|
clear: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useSectionStore = create<SectionStore>((set) => ({
|
||||||
|
sections: [],
|
||||||
|
setSections: (items) => set({ sections: items }),
|
||||||
|
clear: () => set({ sections: [] }),
|
||||||
|
}));
|
||||||
Reference in New Issue
Block a user