DeXun/fad-trade-next
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 重构导航和博客系统，支持多级菜单和API数据源

Browse Source 
- 重构导航菜单支持多级子菜单结构
- 博客系统改为从API获取数据，移除本地文件存储
- 删除旧的关于页面，准备重构
- 修复博客详情页slug匹配问题
- 默认首页重定向到中文版本
This commit is contained in:
砂糖
2025-11-21 17:49:17 +08:00
parent 0a420f2dbb
commit 216076ff2a
13 changed files with 178 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/[locale]/about/base/page.tsx
View File

@@ -1,5 +0,0 @@
export default function Page() {
return (
<div className="container mx-auto px-4 py-12">基础介绍</div>
);
}

5
app/[locale]/about/course/page.tsx
View File

@@ -1,5 +0,0 @@
export default function Page() {
return (
<div className="container mx-auto px-4 py-12">发展历程</div>
);
}

5
app/[locale]/about/culture/page.tsx
View File

@@ -1,5 +0,0 @@
export default function Page() {
return (
<div className="container mx-auto px-4 py-12">企业文化</div>
);
}

5
app/[locale]/about/green/page.tsx
View File

@@ -1,5 +0,0 @@
export default function Page() {
return (
<div className="container mx-auto px-4 py-12">绿色发展</div>
);
}

5
app/[locale]/about/honor/page.tsx
View File

@@ -1,5 +0,0 @@
export default function Page() {
return (
<div className="container mx-auto px-4 py-12">荣誉资质</div>
);
}

5
app/[locale]/about/introduction/page.tsx
View File

@@ -1,5 +0,0 @@
export default function Page() {
return (
<div className="container mx-auto px-4 py-12">公司介绍</div>
);
}

5
app/[locale]/blog/[slug]/page.tsx
View File

@@ -22,8 +22,9 @@ export async function generateMetadata({
}: MetadataProps): Promise<Metadata> {
const { locale, slug } = await params;
let { posts }: { posts: BlogPost[] } = await getPosts(locale);
const post = posts.find((post) => post.slug === "/" + slug);
const post = posts.find((post) => post.slug === slug);
console.log(post, posts);
if (!post) {
return constructMetadata({
title: "404",
@@ -50,7 +51,7 @@ export default async function BlogPage({ params }: { params: Params }) {
const { locale, slug } = await params;
let { posts }: { posts: BlogPost[] } = await getPosts(locale);
const post = posts.find((item) => item.slug === "/" + slug);
const post = posts.find((item) => item.slug === slug);
if (!post) {
return notFound();

51
app/[locale]/blog/page.tsx
View File

@@ -9,7 +9,7 @@ import { getTranslations } from "next-intl/server";
type Params = Promise<{ locale: string }>;
type SearchParams = { page?: string; type?: string };
type SearchParams = { page?: string; category?: string };
type MetadataProps = {
params: Params;
@@ -36,34 +36,18 @@ export default async function Page({
searchParams,
}: {
params: Params;
searchParams?: SearchParams;
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
const { locale } = await params;
let { posts } = await getPosts(locale);
const resolvedSearchParams = await searchParams;
const category = resolvedSearchParams.category as string || "";
let { posts } = await getPosts(locale, category);
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 page = Math.max(1, parseInt(pageRaw || "1", 10));
const pageRaw = resolvedSearchParams.page as string || "1";
const page = Math.max(1, parseInt(pageRaw, 10));
const pageSize = 10;
const totalPages = Math.max(1, Math.ceil(posts.length / pageSize));
const start = (page - 1) * pageSize;
@@ -77,14 +61,14 @@ export default async function Page({
{/* 顶部操作区：标签 + 面包屑 */}
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mt-4">
<div className="flex gap-3">
{/* <div className="flex gap-3">
<button className="px-4 py-2 rounded-md border bg-white text-gray-700 shadow-sm hover:bg-gray-50">
投资者保护
</button>
<button className="px-4 py-2 rounded-md border bg-white text-gray-700 shadow-sm hover:bg-gray-50">
公司公告
</button>
</div>
</div> */}
<div className="flex items-center gap-2 text-sm text-gray-500">
<I18nLink href="/" prefetch={false} className="hover:underline">
首页
@@ -93,12 +77,12 @@ export default async function Page({
<I18nLink href="/blog" prefetch={false} className="hover:underline">
新闻中心
</I18nLink>
{typeLabel && (
{/* {typeLabel && (
<>
<span>/</span>
<span className="text-gray-700">{typeLabel}</span>
</>
)}
)} */}
</div>
</div>
@@ -111,7 +95,7 @@ export default async function Page({
return (
<I18nLink
key={post.slug}
href={`/blog${post.slug}`}
href={`/blog/${post.slug}`}
prefetch={false}
className="block rounded-md mb-4 bg-gray-100 px-6 py-5 transition-all duration-200 shadow hover:bg-gray-200 hover:translate-y-[1px] hover:shadow-inner active:translate-y-[2px] active:shadow-inner focus:outline-none focus:ring-1 focus:ring-gray-300"
>
@@ -139,8 +123,7 @@ export default async function Page({
<I18nLink
href={`/blog?page=${Math.max(1, page - 1)}`}
prefetch={false}
className={`px-2.5 py-1 border rounded-sm text-sm ${
page === 1 ? "bg-gray-100 text-gray-400" : "bg-white hover:bg-gray-50"
className={`px-2.5 py-1 border rounded-sm text-sm ${page === 1 ? "bg-gray-100 text-gray-400" : "bg-white hover:bg-gray-50"
}`}
>
{"<"}
@@ -167,8 +150,7 @@ export default async function Page({
key={it}
href={`/blog?page=${it}`}
prefetch={false}
className={`px-2.5 py-1 border rounded-sm text-sm ${
isActive
className={`px-2.5 py-1 border rounded-sm text-sm ${isActive
? "bg-red-600 text-white border-red-600"
: "bg-white hover:bg-gray-50"
}`}
@@ -181,8 +163,7 @@ export default async function Page({
<I18nLink
href={`/blog?page=${Math.min(totalPages, page + 1)}`}
prefetch={false}
className={`px-2.5 py-1 border rounded-sm text-sm ${
page === totalPages ? "bg-gray-100 text-gray-400" : "bg-white hover:bg-gray-50"
className={`px-2.5 py-1 border rounded-sm text-sm ${page === totalPages ? "bg-gray-100 text-gray-400" : "bg-white hover:bg-gray-50"
}`}
>
{">"}

6
app/page.tsx Normal file
View File

@@ -0,0 +1,6 @@
// 默认跳转到中文版本
import { redirect } from 'next/navigation';
export default function HomePage() {
redirect('/zh');
}

85
components/header/HeaderLinks.tsx
View File

@@ -3,7 +3,6 @@
import { Link as I18nLink, usePathname, useRouter } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { HeaderLink } from "@/types/common";
import { ExternalLink } from "lucide-react";
import { useTranslations } from "next-intl";
const HeaderLinks = () => {
@@ -17,9 +16,7 @@ const HeaderLinks = () => {
return (
<div className="hidden md:flex flex-row items-center gap-x-2 text-sm font-medium text-muted-500">
{headerLinks.map((link) => {
const isAbout = link.href === "/about";
const isNews = link.href === "/blog";
if (isAbout) {
return (
<div key={link.name} className="relative group">
<I18nLink
@@ -33,86 +30,20 @@ const HeaderLinks = () => {
>
{link.name}
</I18nLink>
{/* 移除触发器与菜单间的间隙，使用 pt-2 保持视觉间距但不中断 hover 区域 */}
{
link?.children && (
<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}
{link.children.map((child) => (
<I18nLink key={child.name} prefetch={false} href={child.href} className="block px-4 py-2 hover:bg-red-600 hover:text-white">
{child.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>

56
i18n/messages/zh.json
View File

@@ -13,7 +13,33 @@
},
{
"name": "走进福安德",
"href": "/about"
"href": "/about",
"children": [
{
"name": "公司简介",
"href": "/about?section=company"
},
{
"name": "企业文化",
"href": "/about?section=culture"
},
{
"name": "生产基地",
"href": "/about?section=base"
},
{
"name": "组织架构",
"href": "/about?section=organization"
},
{
"name": "荣誉资质",
"href": "/about?section=awards"
},
{
"name": "发展历程",
"href": "/about?section=history"
}
]
},
{
"name": "产品中心",
@@ -21,7 +47,21 @@
},
{
"name": "新闻中心",
"href": "/blog"
"href": "/blog",
"children": [
{
"name": "公告",
"href": "/blog?category=announce"
},
{
"name": "新闻",
"href": "/blog?category=news"
},
{
"name": "活动",
"href": "/blog?category=event"
}
]
}
]
},
@@ -35,32 +75,32 @@
"title": "关于我们",
"links": [
{
"href": "/about?section=company",
"href": "/zh/about?section=company",
"name": "公司简介",
"useA": true
},
{
"href": "/about?section=culture",
"href": "/zh/about?section=culture",
"name": "企业文化",
"useA": true
},
{
"href": "/about?section=base",
"href": "/zh/about?section=base",
"name": "生产基地",
"useA": true
},
{
"href": "/about?section=organization",
"href": "/zh/about?section=organization",
"name": "组织架构",
"useA": true
},
{
"href": "/about?section=awards",
"href": "/zh/about?section=awards",
"name": "荣誉资质",
"useA": true
},
{
"href": "/about?section=history",
"href": "/zh/about?section=history",
"name": "发展历程",
"useA": true
}

120
lib/getBlogs.ts
View File

@@ -1,66 +1,92 @@
import { DEFAULT_LOCALE } from '@/i18n/routing';
import { BlogPost } from '@/types/blog';
import fs from 'fs';
import matter from 'gray-matter';
import path from 'path';
const POSTS_BATCH_SIZE = 10;
export async function getPosts(locale: string = DEFAULT_LOCALE): Promise<{ posts: BlogPost[] }> {
const postsDirectory = path.join(process.cwd(), 'blogs', locale);
// is directory exist
if (!fs.existsSync(postsDirectory)) {
return { posts: [] };
export async function getPosts(locale: string = DEFAULT_LOCALE, category?: string): Promise<{ posts: BlogPost[], total: number }> {
const Id_Map: Record<string, string> = {
'announce': '1989174108560080897',
'news': '1988814504336605185',
'event': '1989174018231549954',
}
let filenames = await fs.promises.readdir(postsDirectory);
filenames = filenames.reverse();
let url = 'http://49.232.154.205:18081/export/article/list?pageNum=1&pageSize=10&langCode=' + locale;
if (category) {
url += '&categoryId=' + Id_Map[category || 'announce']
}
let allPosts: BlogPost[] = [];
// read file by batch
for (let i = 0; i < filenames.length; i += POSTS_BATCH_SIZE) {
const batchFilenames = filenames.slice(i, i + POSTS_BATCH_SIZE);
const batchPosts: BlogPost[] = await Promise.all(
batchFilenames.map(async (filename) => {
const fullPath = path.join(postsDirectory, filename);
const fileContents = await fs.promises.readFile(fullPath, 'utf8');
const { data, content } = matter(fileContents);
console.log(url);
const response = await fetch(url);
const data = await response.json();
const posts = data.rows.map((item: any) => {
return {
locale, // use locale parameter
title: data.title,
description: data.description,
image: data.image || '',
slug: data.slug,
tags: data.tags,
date: data.date,
visible: data.visible || 'published',
pin: data.pin || false,
content,
title: item.title,
description: item.summary,
image: item.cover || '',
slug: item.articleId,
tags: '',
date: item.publishedTime,
// visible: data.visible || 'published',
pin: false,
content: item.content,
metadata: data,
};
})
);
allPosts.push(...batchPosts);
}
}) || [];
// // is directory exist
// if (!fs.existsSync(postsDirectory)) {
// return { posts: [] };
// }
// let filenames = await fs.promises.readdir(postsDirectory);
// filenames = filenames.reverse();
// let allPosts: BlogPost[] = [];
// read file by batch
// for (let i = 0; i < filenames.length; i += POSTS_BATCH_SIZE) {
// const batchFilenames = filenames.slice(i, i + POSTS_BATCH_SIZE);
// const batchPosts: BlogPost[] = await Promise.all(
// batchFilenames.map(async (filename) => {
// const fullPath = path.join(postsDirectory, filename);
// const fileContents = await fs.promises.readFile(fullPath, 'utf8');
// const { data, content } = matter(fileContents);
// return {
// locale, // use locale parameter
// title: data.title,
// description: data.description,
// image: data.image || '',
// slug: data.slug,
// tags: data.tags,
// date: data.date,
// visible: data.visible || 'published',
// pin: data.pin || false,
// content,
// metadata: data,
// };
// })
// );
// allPosts.push(...batchPosts);
// }
// filter out non-published articles
allPosts = allPosts.filter(post => post.visible === 'published');
// allPosts = allPosts.filter(post => post.visible === 'published');
// sort posts by pin and date
allPosts = allPosts.sort((a, b) => {
if (a.pin !== b.pin) {
return (b.pin ? 1 : 0) - (a.pin ? 1 : 0);
}
return new Date(b.date).getTime() - new Date(a.date).getTime();
});
// allPosts = allPosts.sort((a, b) => {
// if (a.pin !== b.pin) {
// return (b.pin ? 1 : 0) - (a.pin ? 1 : 0);
// }
// return new Date(b.date).getTime() - new Date(a.date).getTime();
// });
return {
posts: allPosts,
posts,
total: data.total,
};
}

1
types/common.ts
View File

@@ -4,6 +4,7 @@ export interface HeaderLink {
href: string;
target?: string;
rel?: string;
children?: HeaderLink[];
};
export interface FooterLink {