refactor: ♻️ 重构组件

src/app/blog/BlogClientComponent.tsx

@@ -98,11 +98,6 @@ export default function BlogList() {
     [router]
   );
 
-  const visibleTags = useMemo(
-    () => (isTagsExpanded ? allTags : allTags.slice(0, INITIAL_TAG_COUNT)),
-    [isTagsExpanded, allTags]
-  );
-
   const handleSearch = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const newSearchTerm = e.target.value;

src/app/blog/BlogPostCard.tsx

@@ -24,6 +24,9 @@ const cardVariants = {
 };
 
 export function BlogPostCard({ post, onTagClick, index }: BlogPostCardProps) {
+  const displayTags = post.tags.slice(0, 3);
+  const remainingTags = post.tags.length - 3;
+
   return (
     <motion.div
       variants={cardVariants}
@@ -48,7 +51,7 @@ export function BlogPostCard({ post, onTagClick, index }: BlogPostCardProps) {
           <p className="line-clamp-1 overflow-hidden">{post.excerpt}</p>
         </CardContent>
         <CardFooter className="flex flex-wrap gap-2">
-          {post.tags.map((tag) => (
+          {displayTags.map((tag) => (
             <Badge
               key={tag}
               variant="secondary"
@@ -58,6 +61,11 @@ export function BlogPostCard({ post, onTagClick, index }: BlogPostCardProps) {
               {tag}
             </Badge>
           ))}
+          {remainingTags > 0 && (
+            <Badge variant="secondary" className="text-xs px-2 py-1 h-6">
+              +{remainingTags}...
+            </Badge>
+          )}
         </CardFooter>
       </Card>
     </motion.div>

src/app/blog/[id]/AnimatedBlogPost.tsx

@@ -7,7 +7,7 @@ import BlogFooter from "./BlogFooter";
 import RelatedPosts from "./RelatedPosts";
 import ShareButtons from "./ShareButtons";
 import TableOfContents from "./TableOfContents";
-import Comments from "@/components/Comments";
+import Comments from "@/components/blog/id/Comments";
 import { mdxComponents } from "./MdxComponents";
 import type { Heading } from "./types";
 import type { BlogPost } from "@/data/blogPosts";

src/app/blog/[id]/MdxComponents.tsx

@@ -3,7 +3,7 @@ import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 import dynamic from "next/dynamic";
 import { MDXComponents } from "./types";
 
-const CopyButton = dynamic(() => import("@/components/CopyButton"), {
+const CopyButton = dynamic(() => import("@/components/blog/id/CopyButton"), {
   ssr: false,
 });
 
@@ -30,10 +30,7 @@ export const mdxComponents: MDXComponents = {
     <p className="mb-4 text-gray-600 dark:text-gray-400" {...props} />
   ),
   a: (props: any) => (
-    <a
-      className="text-blue-500 dark:text-blue-400"
-      {...props}
-    />
+    <a className="text-blue-500 dark:text-blue-400" {...props} />
   ),
   ol: (props: any) => (
     <ol
@@ -68,7 +65,7 @@ export const mdxComponents: MDXComponents = {
           customStyle={{
             backgroundColor: "var(--code-bg)",
             color: "var(--code-text)",
-            paddingRight: "7rem",
+            paddingRight: "6rem",
           }}
           {...props}
         />

src/app/blog/[id]/page.tsx

@@ -1,6 +1,6 @@
 import { notFound } from "next/navigation";
 import { blogPosts } from "@/data/blogPosts";
-import ReadingProgress from "@/components/ReadingProgress";
+import ReadingProgress from "@/components/blog/id/ReadingProgress";
 import { extractHeadings, estimateReadingTime } from "@/utils/blogHelpers";
 import type { Heading } from "./types";
 import type { BlogPost } from "@/data/blogPosts";

src/app/layout.tsx

@@ -1,15 +1,15 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "@/style/globals.css";
-import Header from "@/components/Header";
-import Footer from "@/components/Footer";
+import Header from "@/components/app/Header";
+import Footer from "@/components/app/Footer";
 
 import { cn } from "@/lib/utils";
 
 import { ViewTransitions } from "next-view-transitions";
 
 import { ThemeProvider } from "next-themes";
-import AnimatedLayout from "@/components/AnimatedLayout";
+import AnimatedLayout from "@/components/app/AnimatedLayout";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
@@ -38,11 +38,7 @@ export default function RootLayout({
         >
           <ThemeProvider attribute="class">
             <Header />
-            <AnimatedLayout>
-              <main className="flex-grow container mx-auto px-4 h-full">
-                {children}
-              </main>
-            </AnimatedLayout>
+            <AnimatedLayout>{children}</AnimatedLayout>
             <Footer />
           </ThemeProvider>
         </body>

src/app/mdx/page.mdx

@@ -1,4 +1,4 @@
-import MdxLayout from '../../components/MDXLayout'
+import MdxLayout from '../../components/mdx/MDXLayout'
 
 # 欢迎来到我的 MDX 页面!
 

src/app/page.tsx

@@ -2,6 +2,15 @@
 import { Link } from "next-view-transitions";
 import { motion } from "framer-motion";
 import { blogPosts } from "@/data/blogPosts";
+import dynamic from "next/dynamic";
+
+// 延迟加载非关键组件
+const TechStack = dynamic(() => import("@/components/page/TechStack"), {
+  ssr: false,
+});
+const LatestPosts = dynamic(() => import("@/components/page/LatestPosts"), {
+  ssr: false,
+});
 
 export default function Home() {
   // 根据日期排序博客文章,并取最新的两篇
@@ -11,20 +20,20 @@ export default function Home() {
 
   return (
     <div className="flex flex-col items-center justify-center h-full text-center bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 text-white p-4">
-      {/* 标题和介绍 */}
+      {/* 标题和介绍 - 保持优先级高 */}
       <motion.h1
         className="text-5xl font-bold mb-4"
         initial={{ opacity: 0, y: -50 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.7, ease: "easeOut" }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
       >
         欢迎来到我的博客
       </motion.h1>
       <motion.p
         className="text-lg mb-6 max-w-2xl"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
-        transition={{ delay: 0.3, duration: 0.5 }}
+        transition={{ delay: 0.1, duration: 0.3 }}
       >
         你好,我是[Zhuba-Ahhh]。作为一名前端开发者,我热衷于探索和分享Web开发的最新趋势、技巧和最佳实践。
       </motion.p>
@@ -33,7 +42,7 @@ export default function Home() {
       <motion.div
         initial={{ opacity: 0, scale: 0.5 }}
         animate={{ opacity: 1, scale: 1 }}
-        transition={{ delay: 0.6, duration: 0.5 }}
+        transition={{ delay: 0.2, duration: 0.3 }}
       >
         <Link
           href="/blog"
@@ -43,70 +52,18 @@ export default function Home() {
         </Link>
       </motion.div>
 
-      {/* 最新文章预览 */}
-      <motion.div
-        className="mt-12 w-full max-w-4xl"
-        initial={{ opacity: 0, y: 50 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.9, duration: 0.5 }}
-      >
-        <h2 className="text-3xl font-semibold mb-4">最新文章</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {sortedPosts.map((post, index) => (
-            <Link href={`/blog/${post.id}`} key={post.id}>
-              <motion.div
-                className="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-lg cursor-pointer border border-white border-opacity-20"
-                whileHover={{
-                  scale: 1.03,
-                  backgroundColor: "rgba(255,255,255,0.15)",
-                }}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: index * 0.1 }}
-              >
-                <h3 className="text-xl font-semibold mb-2">{post.title}</h3>
-                <p className="text-sm opacity-80">{post.date}</p>
-              </motion.div>
-            </Link>
-          ))}
-        </div>
-      </motion.div>
+      {/* 最新文章预览 - 延迟加载 */}
+      <LatestPosts />
 
-      {/* 技术栈展示 */}
-      <motion.div
-        className="mt-12 w-full max-w-4xl"
-        initial={{ opacity: 0, y: 50 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 1.2, duration: 0.5 }}
-      >
-        <h2 className="text-3xl font-semibold mb-4">技术栈</h2>
-        <div className="flex flex-wrap justify-center gap-4">
-          {["React", "Next.js", "TypeScript", "Tailwind CSS"].map(
-            (tech, index) => (
-              <motion.span
-                key={tech}
-                className="bg-white bg-opacity-10 px-4 py-2 rounded-full text-sm font-medium"
-                whileHover={{
-                  scale: 1.05,
-                  backgroundColor: "rgba(255,255,255,0.2)",
-                }}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: index * 0.1 }}
-              >
-                {tech}
-              </motion.span>
-            )
-          )}
-        </div>
-      </motion.div>
+      {/* 技术栈展示 - 延迟加载 */}
+      <TechStack posts={sortedPosts} />
 
       {/* 联系方式 */}
       <motion.div
         className="mt-12 text-sm opacity-80"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
-        transition={{ delay: 1.5, duration: 0.5 }}
+        transition={{ delay: 0.3, duration: 0.3 }}
       >
         <p>
           联系我: [email protected] |{" "}

src/components/AnimatedLayout.tsx → src/components/app/AnimatedLayout.tsx

@@ -7,7 +7,7 @@ import {
   AnimatePresence,
 } from "framer-motion";
 import { usePathname } from "next/navigation";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 
 const pageVariants = {
   initial: { opacity: 0, x: "-100%" },
@@ -31,17 +31,17 @@ export default function AnimatedLayout({ children }: AnimatedLayoutProps) {
   return (
     <LazyMotion features={domAnimation}>
       <AnimatePresence mode="wait">
-        <motion.div
+        <motion.main
           key={pathname}
           initial="initial"
           animate="in"
-          // exit="out"
+          exit="out"
           variants={pageVariants}
-          transition={pageTransition}
+          // transition={pageTransition}
           className="flex-grow container mx-auto px-4"
         >
           {children}
-        </motion.div>
+        </motion.main>
       </AnimatePresence>
     </LazyMotion>
   );

src/components/Footer.tsx → src/components/app/Footer.tsx

@@ -18,12 +18,16 @@ export default function Footer() {
         </div>
         <nav className="flex items-center space-x-4">
           {links.map((link) => (
-            <Link key={link.href} href={link.href} className="text-sm text-muted-foreground">
+            <Link
+              key={link.href}
+              href={link.href}
+              className="text-sm text-muted-foreground"
+            >
               <Badge>{link.label}</Badge>
             </Link>
           ))}
         </nav>
       </div>
     </footer>
   );
-}
+}

src/components/Header.tsx → src/components/app/Header.tsx

@@ -1,8 +1,8 @@
 "use client";
+import React from "react";
 import { Link } from "next-view-transitions";
 import { usePathname } from "next/navigation";
 import ThemeToggle from "./ThemeToggle";
-import { Button } from "@/components/ui/button";
 
 const NAV_ITEMS = [
   { href: "/", label: "首页" },

src/components/ThemeToggle.tsx → src/components/app/ThemeToggle.tsx

@@ -1,4 +1,5 @@
 "use client";
+import React from "react";
 import { useState, useEffect } from "react";
 import { useThemeType } from "@/hooks";
 

src/components/Comments.tsx → src/components/blog/id/Comments.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useCallback, useMemo } from "react";
+import React, { useState, useCallback, useMemo } from "react";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";

src/components/ReadingProgress.tsx → src/components/blog/id/ReadingProgress.tsx

@@ -1,4 +1,5 @@
 "use client";
+import React from "react";
 import { useState, useEffect, useCallback } from "react";
 
 export default function ReadingProgress() {

src/components/index.ts

@@ -1,7 +1,3 @@
-export * from './ui';
-export * from './Comments';
-export * from './Footer';
-export * from './Header';
-export * from './Layout';
-export * from './ReadingProgress';
-export * from './ThemeToggle'
+export * from "./ui";
+export * from "./app/Layout";
+export * from "./blog/id/ReadingProgress";

src/components/MDXContent.tsx → src/components/mdx/MDXContent.tsx

@@ -1,5 +1,5 @@
 import { MDXProvider } from "@mdx-js/react";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 
 const components = {
   h1: (props: any) => <h1 className="text-3xl font-bold my-4" {...props} />,
@@ -14,4 +14,4 @@ interface MDXContentProps {
 
 export default function MDXContent({ children }: MDXContentProps) {
   return <MDXProvider components={components}>{children}</MDXProvider>;
-}
+}

src/components/MDXLayout.tsx → src/components/mdx/MDXLayout.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export default function MdxLayout({ children }: { children: React.ReactNode }) {
   return <div className="prose dark:prose-invert">{children}</div>
 }