新闻页面

app/[locale]/blog/ParallaxHero.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
+export default function ParallaxHero() {
+  const [y, setY] = useState(0);
+  useEffect(() => {
+    const onScroll = () => setY(window.scrollY);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  const maxH = 420;
+  const minH = 140;
+  const delta = Math.max(0, Math.min(maxH - minH, y));
+  const height = maxH - delta;
+  const overlayOpacity = 0.25 + delta / (maxH - minH) * 0.15;
+  const titleScale = 1 - delta / (maxH - minH) * 0.2;
+
+  return (
+    <div className="relative" style={{ height: maxH }}>
+      <div className="sticky top-0 z-40">
+        <div className="relative w-full" style={{ height }}>
+          <Image src="/placeholder.svg" alt="投资者关系" fill className="object-cover" priority />
+          <div className="absolute inset-0" style={{ backgroundColor: `rgba(0,0,0,${overlayOpacity})` }} />
+          <div className="absolute left-6 md:left-12 bottom-6 md:bottom-10 text-white" style={{ transform: `scale(${titleScale})`, transformOrigin: "left bottom" }}>
+            <div className="text-2xl md:text-4xl font-semibold">投资者关系</div>
+            <div className="text-lg md:text-2xl mt-1 opacity-90">Investor</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/blog/page.tsx

@@ -1,12 +1,17 @@
-import { BlogCard } from "@/app/[locale]/blog/BlogCard";
-import { Locale, LOCALES } from "@/i18n/routing";
+import { Locale, LOCALES, Link as I18nLink } from "@/i18n/routing";
 import { getPosts } from "@/lib/getBlogs";
 import { constructMetadata } from "@/lib/metadata";
 import { Metadata } from "next";
 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 SearchParams = { page?: string };
+
 type MetadataProps = {
   params: Params;
 };
@@ -27,20 +32,153 @@ export async function generateMetadata({
   });
 }
 
-export default async function Page({ params }: { params: Params }) {
+export default async function Page({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams?: SearchParams;
+}) {
   const { locale } = await params;
   const { posts } = await getPosts(locale);
 
   const t = await getTranslations("Blog");
 
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <h1 className="text-4xl font-bold mb-8 text-center">{t("title")}</h1>
+  const pageRaw = searchParams?.page;
+  const page = Math.max(1, parseInt(pageRaw || "1", 10));
+  const pageSize = 10;
+  const totalPages = Math.max(1, Math.ceil(posts.length / pageSize));
+  const start = (page - 1) * pageSize;
+  const end = start + pageSize;
+  const pagePosts = posts.slice(start, end);
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-        {posts.map((post) => (
-          <BlogCard key={post.slug} locale={locale} post={post} />
-        ))}
+  return (
+    <div className="w-full">
+      <ParallaxHero />
+
+      {/* 顶部操作区：标签 + 面包屑 */}
+      <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">
+            <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 className="flex items-center gap-2 text-sm text-gray-500">
+            <I18nLink href="/" prefetch={false} className="hover:underline">
+              首页
+            </I18nLink>
+            <span>/</span>
+            <I18nLink href="/blog" prefetch={false} className="hover:underline">
+              新闻中心
+            </I18nLink>
+          </div>
+        </div>
+
+        {/* 列表 */}
+        <div className="mt-4">
+          {pagePosts.map((post) => {
+            const year = dayjs(post.date).format("YYYY");
+            const monthDay = dayjs(post.date).format("MM-DD");
+            const views = (post.metadata?.views as number) || 0;
+            return (
+              <I18nLink
+                key={post.slug}
+                href={`/blog${post.slug}`}
+                prefetch={false}
+                className="block rounded-md mb-4 bg-gray-100 px-6 py-5 hover:bg-gray-200 transition-colors"
+              >
+                <div className="flex items-center">
+                  <div className="flex-1 pr-4">
+                    <div className="text-base md:text-lg font-medium text-gray-800">
+                      {post.title}
+                    </div>
+                    <div className="mt-2 text-xs text-gray-600 flex items-center gap-1">
+                      <TablerEyeFilled className="w-4 h-4" />
+                      访问量：{views}
+                    </div>
+                  </div>
+                  <div className="w-24 md:w-28 text-right">
+                    <div className="text-xs text-gray-500">{year}</div>
+                    <div className="text-2xl md:text-3xl font-bold text-gray-500">{monthDay}</div>
+                  </div>
+                </div>
+              </I18nLink>
+            );
+          })}
+        </div>
+
+        <div className="my-6 flex items-center justify-center gap-2">
+          <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"
+            }`}
+          >
+            {"<"}
+          </I18nLink>
+          {(() => {
+            const items: (number | string)[] = [];
+            const showTotal = totalPages;
+            const maxNumbers = 4;
+            const startNum = 1;
+            const endNum = Math.min(showTotal, maxNumbers);
+            for (let n = startNum; n <= endNum; n++) items.push(n);
+            if (showTotal > maxNumbers + 1) items.push("...");
+            if (showTotal > maxNumbers) items.push(showTotal);
+            return items.map((it, idx) => {
+              if (typeof it === "string")
+                return (
+                  <span key={`dot-${idx}`} className="px-2.5 py-1 text-sm text-gray-500">
+                    {it}
+                  </span>
+                );
+              const isActive = it === page;
+              return (
+                <I18nLink
+                  key={it}
+                  href={`/blog?page=${it}`}
+                  prefetch={false}
+                  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"
+                  }`}
+                >
+                  {it}
+                </I18nLink>
+              );
+            });
+          })()}
+          <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"
+            }`}
+          >
+            {">"}
+          </I18nLink>
+          <span className="ml-2 text-sm text-gray-600">跳往</span>
+          <form action="/blog" method="get" className="flex items-center gap-1">
+            <input
+              type="number"
+              name="page"
+              min={1}
+              max={totalPages}
+              defaultValue={page}
+              className="w-14 h-7 border rounded-sm px-2 text-sm"
+            />
+            <button className="px-2.5 h-7 border rounded-sm text-sm bg-white hover:bg-gray-50" type="submit">
+              前往
+            </button>
+            <span className="text-sm text-gray-600">页</span>
+          </form>
+        </div>
       </div>
     </div>
   );