From 6204359b94aef43326e6962f2dd11cc9e4c5c233 Mon Sep 17 00:00:00 2001
From: zhuba-Ahhh <3477826311@qq.com>
Date: Sat, 24 Aug 2024 15:28:20 +0800
Subject: [PATCH 1/4] fix: :bug: init

---
 src/components/AnimatedLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AnimatedLayout.tsx b/src/components/AnimatedLayout.tsx
index f2c6070..104a743 100644
--- a/src/components/AnimatedLayout.tsx
+++ b/src/components/AnimatedLayout.tsx
@@ -25,7 +25,7 @@ export default function AnimatedLayout({ children }: AnimatedLayoutProps) {
 
   return (
     <LazyMotion features={domAnimation}>
-      <AnimatePresence mode="wait" initial={false}>
+      <AnimatePresence mode="wait">
         <motion.div
           key={pathname}
           initial="initial"

From 3f9343900128662b2937ab7dc429667c68306651 Mon Sep 17 00:00:00 2001
From: zhuba-Ahhh <3477826311@qq.com>
Date: Sat, 24 Aug 2024 15:34:06 +0800
Subject: [PATCH 2/4] fix: :bug: link classname

---
 src/app/blog/BlogClientComponent.tsx  |  5 +++--
 src/app/blog/[id]/MdxComponents.tsx   |  2 +-
 src/app/blog/[id]/RelatedPosts.tsx    |  5 +----
 src/app/blog/[id]/TableOfContents.tsx |  2 +-
 src/components/Footer.tsx             | 15 +++------------
 src/components/ui/alert.tsx           | 22 +++++++++++-----------
 src/components/ui/button.tsx          | 24 ++++++++++++------------
 7 files changed, 32 insertions(+), 43 deletions(-)

diff --git a/src/app/blog/BlogClientComponent.tsx b/src/app/blog/BlogClientComponent.tsx
index f7608f3..a016457 100644
--- a/src/app/blog/BlogClientComponent.tsx
+++ b/src/app/blog/BlogClientComponent.tsx
@@ -240,9 +240,10 @@ export default function BlogList() {
                     <CardTitle>
                       <Link
                         href={`/blog/${post.id}`}
-                        className="hover:underline"
                       >
-                        {post.title}
+                        <p className="line-clamp-1 overflow-hidden">
+                          {post.title}
+                        </p>
                       </Link>
                     </CardTitle>
                     <CardDescription>
diff --git a/src/app/blog/[id]/MdxComponents.tsx b/src/app/blog/[id]/MdxComponents.tsx
index e480024..2d2f824 100644
--- a/src/app/blog/[id]/MdxComponents.tsx
+++ b/src/app/blog/[id]/MdxComponents.tsx
@@ -31,7 +31,7 @@ export const mdxComponents: MDXComponents = {
   ),
   a: (props: any) => (
     <a
-      className="text-blue-500 hover:underline dark:text-blue-400"
+      className="text-blue-500 dark:text-blue-400"
       {...props}
     />
   ),
diff --git a/src/app/blog/[id]/RelatedPosts.tsx b/src/app/blog/[id]/RelatedPosts.tsx
index 8bf2036..b1f415d 100644
--- a/src/app/blog/[id]/RelatedPosts.tsx
+++ b/src/app/blog/[id]/RelatedPosts.tsx
@@ -14,10 +14,7 @@ function RelatedPosts({ posts }: { posts: BlogPost[] }) {
         <ul className="space-y-2">
           {posts.map((relatedPost) => (
             <li key={relatedPost.id}>
-              <Link
-                href={`/blog/${relatedPost.id}`}
-                className="text-primary hover:underline"
-              >
+              <Link href={`/blog/${relatedPost.id}`} className="text-primary">
                 {relatedPost.title}
               </Link>
             </li>
diff --git a/src/app/blog/[id]/TableOfContents.tsx b/src/app/blog/[id]/TableOfContents.tsx
index 9f49b9c..511eb07 100644
--- a/src/app/blog/[id]/TableOfContents.tsx
+++ b/src/app/blog/[id]/TableOfContents.tsx
@@ -19,7 +19,7 @@ const TableOfContents = React.memo(function TableOfContents({
             <li key={index} className={`${heading.level === 3 ? "ml-2" : ""}`}>
               <a
                 href={`#${heading.slug}`}
-                className="text-primary dark:text-primary-light hover:underline text-sm block truncate"
+                className="text-primary dark:text-primary-light text-sm block truncate"
                 title={heading.text}
               >
                 {heading.text.length > 20
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index bd08396..2ca3427 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -11,22 +11,13 @@ export default function Footer() {
           </p>
         </div>
         <nav className="flex items-center space-x-4">
-          <Link
-            href="/privacy"
-            className="text-sm text-muted-foreground hover:underline"
-          >
+          <Link href="/privacy" className="text-sm text-muted-foreground">
             <Badge>隐私政策</Badge>
           </Link>
-          <Link
-            href="/terms"
-            className="text-sm text-muted-foreground hover:underline"
-          >
+          <Link href="/terms" className="text-sm text-muted-foreground">
             <Badge>使用条款</Badge>
           </Link>
-          <Link
-            href="/contact"
-            className="text-sm text-muted-foreground hover:underline"
-          >
+          <Link href="/contact" className="text-sm text-muted-foreground">
             <Badge>联系我们</Badge>
           </Link>
         </nav>
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 41fa7e0..29bd44f 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
@@ -17,7 +17,7 @@ const alertVariants = cva(
       variant: "default",
     },
   }
-)
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -29,8 +29,8 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-))
-Alert.displayName = "Alert"
+));
+Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -41,8 +41,8 @@ const AlertTitle = React.forwardRef<
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     {...props}
   />
-))
-AlertTitle.displayName = "AlertTitle"
+));
+AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,7 +53,7 @@ const AlertDescription = React.forwardRef<
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
-))
-AlertDescription.displayName = "AlertDescription"
+));
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 0ba4277..402f8a6 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -17,7 +17,7 @@ const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-primary underline-offset-4",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -31,26 +31,26 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

From fb1a149750a66c7cbd2c8495ebd28a0aad2a48df Mon Sep 17 00:00:00 2001
From: zhuba-Ahhh <3477826311@qq.com>
Date: Sat, 24 Aug 2024 15:49:17 +0800
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20:recycle:=20blog=20list?=
 =?UTF-8?q?=E6=8B=86=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/blog/BlogClientComponent.tsx   | 187 +++++--------------------
 src/app/blog/BlogPostCard.tsx          |  65 +++++++++
 src/app/blog/BlogSearch.tsx            |  43 ++++++
 src/app/blog/Pagination.tsx            |  39 ++++++
 src/app/blog/TagList.tsx               |  55 ++++++++
 src/app/blog/[id]/AnimatedBlogPost.tsx |   3 +-
 src/app/blog/[id]/BlogFooter.tsx       |   2 +-
 src/app/blog/[id]/BlogHeader.tsx       |   2 +-
 src/app/blog/[id]/RelatedPosts.tsx     |   2 +-
 src/app/blog/[id]/page.tsx             |   3 +-
 src/app/blog/[id]/types.ts             |  12 --
 src/components/AnimatedLayout.tsx      |   7 +-
 src/data/blogPosts.ts                  |   1 +
 13 files changed, 250 insertions(+), 171 deletions(-)
 create mode 100644 src/app/blog/BlogPostCard.tsx
 create mode 100644 src/app/blog/BlogSearch.tsx
 create mode 100644 src/app/blog/Pagination.tsx
 create mode 100644 src/app/blog/TagList.tsx

diff --git a/src/app/blog/BlogClientComponent.tsx b/src/app/blog/BlogClientComponent.tsx
index a016457..65fe5b2 100644
--- a/src/app/blog/BlogClientComponent.tsx
+++ b/src/app/blog/BlogClientComponent.tsx
@@ -1,31 +1,23 @@
 "use client";
 import { useState, useMemo, useEffect, useCallback } from "react";
-import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { blogPosts } from "@/data/blogPosts";
 import {
-  Input,
-  Button,
-  Badge,
   Skeleton,
   Card,
   CardHeader,
-  CardTitle,
-  CardDescription,
   CardContent,
   CardFooter,
   Alert,
   AlertDescription,
   AlertTitle,
-  Label,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
 } from "@/components/ui";
-import { ChevronDown, ChevronUp, AlertCircle } from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
+import { AlertCircle } from "lucide-react";
+import { AnimatePresence } from "framer-motion";
+import { BlogSearch } from "./BlogSearch";
+import { TagList } from "./TagList";
+import { BlogPostCard } from "./BlogPostCard";
+import { Pagination } from "./Pagination";
 
 const POSTS_PER_PAGE = 6;
 const INITIAL_TAG_COUNT = 10;
@@ -33,12 +25,6 @@ const INITIAL_TAG_COUNT = 10;
 // 添加新的排序选项类型
 type SortOption = "date" | "title";
 
-const cardVariants = {
-  hidden: { opacity: 0, y: -20 },
-  visible: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: 20 },
-};
-
 export default function BlogList() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -138,74 +124,23 @@ export default function BlogList() {
   return (
     <div className="container mx-auto px-4 py-8">
       <h1 className="text-4xl font-bold mb-8 text-center">博客文章</h1>
-      <div className="mb-6 flex items-end space-x-4">
-        <div className="flex-grow">
-          <Label htmlFor="search" className="mb-2 block">
-            搜索文章
-          </Label>
-          <Input
-            id="search"
-            type="text"
-            placeholder="输入关键词..."
-            value={searchTerm}
-            onChange={handleSearch}
-          />
-        </div>
-        <div className="w-40">
-          <Label htmlFor="sort" className="mb-2 block">
-            排序方式
-          </Label>
-          <Select
-            onValueChange={(value: SortOption) => setSortOption(value)}
-            defaultValue={sortOption}
-          >
-            <SelectTrigger id="sort" className="w-full">
-              <SelectValue placeholder="选择排序方式" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="date">按日期排序</SelectItem>
-              <SelectItem value="title">按标题排序</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <div className="mb-6 flex flex-wrap items-center gap-2">
-        <Badge
-          variant={selectedTag === null ? "default" : "secondary"}
-          className="cursor-pointer"
-          onClick={() => handleTagClick(null)}
-        >
-          全部
-        </Badge>
-        {visibleTags.map((tag) => (
-          <Badge
-            key={tag}
-            variant={tag === selectedTag ? "default" : "secondary"}
-            className="cursor-pointer"
-            onClick={() => handleTagClick(tag)}
-          >
-            {tag}
-          </Badge>
-        ))}
-        {allTags.length > INITIAL_TAG_COUNT && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setIsTagsExpanded(!isTagsExpanded)}
-            className="ml-2"
-          >
-            {isTagsExpanded ? (
-              <>
-                收起 <ChevronUp className="ml-1 h-4 w-4" />
-              </>
-            ) : (
-              <>
-                展开 <ChevronDown className="ml-1 h-4 w-4" />
-              </>
-            )}
-          </Button>
-        )}
-      </div>
+      
+      <BlogSearch
+        searchTerm={searchTerm}
+        onSearchChange={handleSearch}
+        sortOption={sortOption}
+        onSortChange={(value: SortOption) => setSortOption(value)}
+      />
+      
+      <TagList
+        allTags={allTags}
+        selectedTag={selectedTag}
+        onTagClick={handleTagClick}
+        isTagsExpanded={isTagsExpanded}
+        onToggleExpand={() => setIsTagsExpanded(!isTagsExpanded)}
+        initialTagCount={INITIAL_TAG_COUNT}
+      />
+      
       <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
         {isLoading ? (
           Array.from({ length: POSTS_PER_PAGE }).map((_, index) => (
@@ -226,49 +161,12 @@ export default function BlogList() {
         ) : currentPosts.length > 0 ? (
           <AnimatePresence mode="wait">
             {currentPosts.map((post, index) => (
-              <motion.div
+              <BlogPostCard
                 key={post.id}
-                variants={cardVariants}
-                initial="hidden"
-                animate="visible"
-                exit="exit"
-                transition={{ duration: 0.3, delay: index * 0.1 }}
-                layout
-              >
-                <Card>
-                  <CardHeader>
-                    <CardTitle>
-                      <Link
-                        href={`/blog/${post.id}`}
-                      >
-                        <p className="line-clamp-1 overflow-hidden">
-                          {post.title}
-                        </p>
-                      </Link>
-                    </CardTitle>
-                    <CardDescription>
-                      {post.date} | {post.author}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <p className="line-clamp-1 overflow-hidden">
-                      {post.excerpt}
-                    </p>
-                  </CardContent>
-                  <CardFooter className="flex flex-wrap gap-2">
-                    {post.tags.map((tag) => (
-                      <Badge
-                        key={tag}
-                        variant="secondary"
-                        className="text-xs px-2 py-1 h-6 cursor-pointer"
-                        onClick={() => handleTagClick(tag)}
-                      >
-                        {tag}
-                      </Badge>
-                    ))}
-                  </CardFooter>
-                </Card>
-              </motion.div>
+                post={post}
+                onTagClick={handleTagClick}
+                index={index}
+              />
             ))}
           </AnimatePresence>
         ) : (
@@ -289,30 +187,13 @@ export default function BlogList() {
           </div>
         )}
       </div>
+      
       {filteredPostsMemo.length > 0 && (
-        <motion.div
-          variants={cardVariants}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-          layout
-        >
-          <div className="mt-8 flex justify-center">
-            {Array.from(
-              { length: Math.ceil(filteredPostsMemo.length / POSTS_PER_PAGE) },
-              (_, i) => (
-                <Button
-                  key={i}
-                  onClick={() => paginate(i + 1)}
-                  variant={currentPage === i + 1 ? "default" : "outline"}
-                  className="mx-1"
-                >
-                  {i + 1}
-                </Button>
-              )
-            )}
-          </div>
-        </motion.div>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={Math.ceil(filteredPostsMemo.length / POSTS_PER_PAGE)}
+          onPageChange={paginate}
+        />
       )}
     </div>
   );
diff --git a/src/app/blog/BlogPostCard.tsx b/src/app/blog/BlogPostCard.tsx
new file mode 100644
index 0000000..77e33cd
--- /dev/null
+++ b/src/app/blog/BlogPostCard.tsx
@@ -0,0 +1,65 @@
+import Link from "next/link";
+import { motion } from "framer-motion";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Badge,
+} from "@/components/ui";
+import { BlogPost } from "@/data/blogPosts";
+
+interface BlogPostCardProps {
+  post: BlogPost;
+  onTagClick: (tag: string) => void;
+  index: number;
+}
+
+const cardVariants = {
+  hidden: { opacity: 0, y: -20 },
+  visible: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 20 },
+};
+
+export function BlogPostCard({ post, onTagClick, index }: BlogPostCardProps) {
+  return (
+    <motion.div
+      variants={cardVariants}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      transition={{ duration: 0.3, delay: index * 0.1 }}
+      layout
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <Link href={`/blog/${post.id}`}>
+              <p className="line-clamp-1 overflow-hidden">{post.title}</p>
+            </Link>
+          </CardTitle>
+          <CardDescription>
+            {post.date} | {post.author}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="line-clamp-1 overflow-hidden">{post.excerpt}</p>
+        </CardContent>
+        <CardFooter className="flex flex-wrap gap-2">
+          {post.tags.map((tag) => (
+            <Badge
+              key={tag}
+              variant="secondary"
+              className="text-xs px-2 py-1 h-6 cursor-pointer"
+              onClick={() => onTagClick(tag)}
+            >
+              {tag}
+            </Badge>
+          ))}
+        </CardFooter>
+      </Card>
+    </motion.div>
+  );
+}
diff --git a/src/app/blog/BlogSearch.tsx b/src/app/blog/BlogSearch.tsx
new file mode 100644
index 0000000..909c679
--- /dev/null
+++ b/src/app/blog/BlogSearch.tsx
@@ -0,0 +1,43 @@
+import { Label, Input, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui";
+
+type SortOption = "date" | "title";
+
+interface BlogSearchProps {
+  searchTerm: string;
+  onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  sortOption: SortOption;
+  onSortChange: (value: SortOption) => void;
+}
+
+export function BlogSearch({ searchTerm, onSearchChange, sortOption, onSortChange }: BlogSearchProps) {
+  return (
+    <div className="mb-6 flex items-end space-x-4">
+      <div className="flex-grow">
+        <Label htmlFor="search" className="mb-2 block">
+          搜索文章
+        </Label>
+        <Input
+          id="search"
+          type="text"
+          placeholder="输入关键词..."
+          value={searchTerm}
+          onChange={onSearchChange}
+        />
+      </div>
+      <div className="w-40">
+        <Label htmlFor="sort" className="mb-2 block">
+          排序方式
+        </Label>
+        <Select onValueChange={onSortChange} defaultValue={sortOption}>
+          <SelectTrigger id="sort" className="w-full">
+            <SelectValue placeholder="选择排序方式" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="date">按日期排序</SelectItem>
+            <SelectItem value="title">按标题排序</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/blog/Pagination.tsx b/src/app/blog/Pagination.tsx
new file mode 100644
index 0000000..6036561
--- /dev/null
+++ b/src/app/blog/Pagination.tsx
@@ -0,0 +1,39 @@
+import { Button } from "@/components/ui";
+import { motion } from "framer-motion";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (pageNumber: number) => void;
+}
+
+const cardVariants = {
+  hidden: { opacity: 0, y: -20 },
+  visible: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 20 },
+};
+
+export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
+  return (
+    <motion.div
+      variants={cardVariants}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      layout
+    >
+      <div className="mt-8 flex justify-center">
+        {Array.from({ length: totalPages }, (_, i) => (
+          <Button
+            key={i}
+            onClick={() => onPageChange(i + 1)}
+            variant={currentPage === i + 1 ? "default" : "outline"}
+            className="mx-1"
+          >
+            {i + 1}
+          </Button>
+        ))}
+      </div>
+    </motion.div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/blog/TagList.tsx b/src/app/blog/TagList.tsx
new file mode 100644
index 0000000..55aab1a
--- /dev/null
+++ b/src/app/blog/TagList.tsx
@@ -0,0 +1,55 @@
+import { Badge, Button } from "@/components/ui";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+interface TagListProps {
+  allTags: string[];
+  selectedTag: string | null;
+  onTagClick: (tag: string | null) => void;
+  isTagsExpanded: boolean;
+  onToggleExpand: () => void;
+  initialTagCount: number;
+}
+
+export function TagList({ allTags, selectedTag, onTagClick, isTagsExpanded, onToggleExpand, initialTagCount }: TagListProps) {
+  const visibleTags = isTagsExpanded ? allTags : allTags.slice(0, initialTagCount);
+
+  return (
+    <div className="mb-6 flex flex-wrap items-center gap-2">
+      <Badge
+        variant={selectedTag === null ? "default" : "secondary"}
+        className="cursor-pointer"
+        onClick={() => onTagClick(null)}
+      >
+        全部
+      </Badge>
+      {visibleTags.map((tag) => (
+        <Badge
+          key={tag}
+          variant={tag === selectedTag ? "default" : "secondary"}
+          className="cursor-pointer"
+          onClick={() => onTagClick(tag)}
+        >
+          {tag}
+        </Badge>
+      ))}
+      {allTags.length > initialTagCount && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onToggleExpand}
+          className="ml-2"
+        >
+          {isTagsExpanded ? (
+            <>
+              收起 <ChevronUp className="ml-1 h-4 w-4" />
+            </>
+          ) : (
+            <>
+              展开 <ChevronDown className="ml-1 h-4 w-4" />
+            </>
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/blog/[id]/AnimatedBlogPost.tsx b/src/app/blog/[id]/AnimatedBlogPost.tsx
index be4b406..9b1f7b1 100644
--- a/src/app/blog/[id]/AnimatedBlogPost.tsx
+++ b/src/app/blog/[id]/AnimatedBlogPost.tsx
@@ -9,7 +9,8 @@ import ShareButtons from "./ShareButtons";
 import TableOfContents from "./TableOfContents";
 import Comments from "@/components/Comments";
 import { mdxComponents } from "./MdxComponents";
-import type { BlogPost, Heading } from "./types";
+import type { Heading } from "./types";
+import type { BlogPost } from "@/data/blogPosts";
 
 interface AnimatedBlogPostProps {
   post: BlogPost;
diff --git a/src/app/blog/[id]/BlogFooter.tsx b/src/app/blog/[id]/BlogFooter.tsx
index c8907fb..7e71a1e 100644
--- a/src/app/blog/[id]/BlogFooter.tsx
+++ b/src/app/blog/[id]/BlogFooter.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { Badge, Button } from "@/components/ui";
-import { BlogPost } from "./types";
+import { BlogPost } from "@/data/blogPosts";
 
 interface BlogFooterProps {
   post: BlogPost;
diff --git a/src/app/blog/[id]/BlogHeader.tsx b/src/app/blog/[id]/BlogHeader.tsx
index 6714a53..6e95007 100644
--- a/src/app/blog/[id]/BlogHeader.tsx
+++ b/src/app/blog/[id]/BlogHeader.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { BlogPost } from "./types";
+import { BlogPost } from "@/data/blogPosts";
 
 interface BlogHeaderProps {
   post: BlogPost;
diff --git a/src/app/blog/[id]/RelatedPosts.tsx b/src/app/blog/[id]/RelatedPosts.tsx
index b1f415d..62e53d8 100644
--- a/src/app/blog/[id]/RelatedPosts.tsx
+++ b/src/app/blog/[id]/RelatedPosts.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui";
-import { BlogPost } from "./types";
+import { BlogPost } from "@/data/blogPosts";
 
 function RelatedPosts({ posts }: { posts: BlogPost[] }) {
   if (posts.length === 0) return null;
diff --git a/src/app/blog/[id]/page.tsx b/src/app/blog/[id]/page.tsx
index 4180c32..4241b8d 100644
--- a/src/app/blog/[id]/page.tsx
+++ b/src/app/blog/[id]/page.tsx
@@ -2,7 +2,8 @@ import { notFound } from "next/navigation";
 import { blogPosts } from "@/data/blogPosts";
 import ReadingProgress from "@/components/ReadingProgress";
 import { extractHeadings, estimateReadingTime } from "@/utils/blogHelpers";
-import type { BlogPost, Heading } from "./types";
+import type { Heading } from "./types";
+import type { BlogPost } from "@/data/blogPosts";
 import dynamic from "next/dynamic";
 
 const AnimatedBlogPost = dynamic(() => import("./AnimatedBlogPost"), {
diff --git a/src/app/blog/[id]/types.ts b/src/app/blog/[id]/types.ts
index 4e78d78..90703bb 100644
--- a/src/app/blog/[id]/types.ts
+++ b/src/app/blog/[id]/types.ts
@@ -1,15 +1,3 @@
-import { MDXRemoteSerializeResult } from 'next-mdx-remote';
-
-export interface BlogPost {
-  id: number;
-  title: string;
-  date: string;
-  author: string;
-  content: string;
-  coverImage?: string;
-  tags: string[];
-}
-
 export interface Heading {
   level: number;
   text: string;
diff --git a/src/components/AnimatedLayout.tsx b/src/components/AnimatedLayout.tsx
index 104a743..1f3160e 100644
--- a/src/components/AnimatedLayout.tsx
+++ b/src/components/AnimatedLayout.tsx
@@ -1,6 +1,11 @@
 "use client";
 
-import { LazyMotion, domAnimation, motion, AnimatePresence } from "framer-motion";
+import {
+  LazyMotion,
+  domAnimation,
+  motion,
+  AnimatePresence,
+} from "framer-motion";
 import { usePathname } from "next/navigation";
 import { ReactNode } from "react";
 
diff --git a/src/data/blogPosts.ts b/src/data/blogPosts.ts
index 5618af9..945737a 100644
--- a/src/data/blogPosts.ts
+++ b/src/data/blogPosts.ts
@@ -7,6 +7,7 @@ export interface BlogPost {
   author: string;
   tags: string[];
   category?: string;
+  coverImage?: string;
 }
 
 export const blogPosts: BlogPost[] = [

From 7429e965212b5617875ae114749b229b0ec24134 Mon Sep 17 00:00:00 2001
From: zhuba-Ahhh <3477826311@qq.com>
Date: Sat, 24 Aug 2024 16:11:25 +0800
Subject: [PATCH 4/4] fix: :bug: lighthouse

---
 next.config.mjs                    |  6 +++++-
 src/app/about/page.tsx             |  4 ++--
 src/app/blog/[id]/ShareButtons.tsx | 16 ++++++++++------
 src/app/contact/page.tsx           |  8 ++++++++
 src/app/privacy/page.tsx           |  8 ++++++++
 src/app/terms/page.tsx             |  8 ++++++++
 src/components/CopyButton.tsx      |  4 ++--
 src/components/Footer.tsx          | 22 ++++++++++++----------
 src/components/ThemeToggle.tsx     |  4 ++--
 src/hooks/index.ts                 |  1 +
 src/hooks/useThemeType.ts          | 10 ++++++++++
 11 files changed, 68 insertions(+), 23 deletions(-)
 create mode 100644 src/app/contact/page.tsx
 create mode 100644 src/app/privacy/page.tsx
 create mode 100644 src/app/terms/page.tsx
 create mode 100644 src/hooks/index.ts
 create mode 100644 src/hooks/useThemeType.ts

diff --git a/next.config.mjs b/next.config.mjs
index d730e0c..b253027 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -12,12 +12,16 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
+  productionBrowserSourceMaps: true,
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
-  webpack: (config, { isServer }) => {
+  webpack: (config, { dev, isServer }) => {
     if (!isServer) {
       config.externals = {
         // 添加其他需要从 CDN 加载的依赖
       };
+      if (!dev && !isServer) {
+        config.optimization.usedExports = true;
+      }
     }
     return config;
   },
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 3077f41..408460d 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import Image from "next/image";
-import { useTheme } from "next-themes";
+import { useThemeType } from "@/hooks";
 
 export default function About() {
-  const { theme } = useTheme();
+  const { theme } = useThemeType();
 
   return (
     <div
diff --git a/src/app/blog/[id]/ShareButtons.tsx b/src/app/blog/[id]/ShareButtons.tsx
index a1933c8..ffb2d7c 100644
--- a/src/app/blog/[id]/ShareButtons.tsx
+++ b/src/app/blog/[id]/ShareButtons.tsx
@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { FaTwitter, FaFacebook, FaLinkedin } from "react-icons/fa";
 
 interface ShareButtonsProps {
@@ -8,30 +9,33 @@ interface ShareButtonsProps {
 export default function ShareButtons({ url, title }: ShareButtonsProps) {
   return (
     <div className="flex space-x-4 mt-6">
-      <a
+      <Link
         href={`https://twitter.com/intent/tweet?url=${url}&text=${title}`}
         target="_blank"
         rel="noopener noreferrer"
         className="text-blue-400 hover:text-blue-500"
+        aria-label="在Twitter上分享"
       >
         <FaTwitter size={24} />
-      </a>
-      <a
+      </Link>
+      <Link
         href={`https://www.facebook.com/sharer/sharer.php?u=${url}`}
         target="_blank"
         rel="noopener noreferrer"
         className="text-blue-600 hover:text-blue-700"
+        aria-label="在Facebook上分享"
       >
         <FaFacebook size={24} />
-      </a>
-      <a
+      </Link>
+      <Link
         href={`https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}`}
         target="_blank"
         rel="noopener noreferrer"
         className="text-blue-700 hover:text-blue-800"
+        aria-label="在LinkedIn上分享"
       >
         <FaLinkedin size={24} />
-      </a>
+      </Link>
     </div>
   );
 }
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..e393614
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,8 @@
+export default function PrivacyPage() {
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-2xl font-bold mb-4">隐私政策</h1>
+      <p>这里是您的隐私政策内容...</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
new file mode 100644
index 0000000..ce26ba4
--- /dev/null
+++ b/src/app/privacy/page.tsx
@@ -0,0 +1,8 @@
+export default function PrivacyPage() {
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-2xl font-bold mb-4">隐私政策</h1>
+      <p>这里是您的隐私政策内容...</p>
+    </div>
+  );
+}
diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx
new file mode 100644
index 0000000..ce26ba4
--- /dev/null
+++ b/src/app/terms/page.tsx
@@ -0,0 +1,8 @@
+export default function PrivacyPage() {
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-2xl font-bold mb-4">隐私政策</h1>
+      <p>这里是您的隐私政策内容...</p>
+    </div>
+  );
+}
diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
index 8bfc51e..6a24d15 100644
--- a/src/components/CopyButton.tsx
+++ b/src/components/CopyButton.tsx
@@ -3,7 +3,7 @@
 import React, { useState, useCallback, useMemo } from "react";
 import Image from "next/image";
 import { throttle } from "lodash-es";
-import { useTheme } from "next-themes";
+import { useThemeType } from "@/hooks";
 
 interface CopyButtonProps {
   text: string;
@@ -13,7 +13,7 @@ interface CopyButtonProps {
 const CopyButton: React.FC<CopyButtonProps> = ({ text, language }) => {
   const [state, setState] = useState<"idle" | "copy" | "copied">("idle");
   const [isHovered, setIsHovered] = useState(false);
-  const { theme } = useTheme();
+  const { theme } = useThemeType();
 
   const throttledCopy = useMemo(
     () =>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 2ca3427..52b6562 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,6 +2,12 @@ import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
 
 export default function Footer() {
+  const links = [
+    { href: "/privacy", label: "隐私政策" },
+    { href: "/terms", label: "使用条款" },
+    { href: "/contact", label: "联系我们" },
+  ];
+
   return (
     <footer className="border-t py-6 md:py-0">
       <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
@@ -11,17 +17,13 @@ export default function Footer() {
           </p>
         </div>
         <nav className="flex items-center space-x-4">
-          <Link href="/privacy" className="text-sm text-muted-foreground">
-            <Badge>隐私政策</Badge>
-          </Link>
-          <Link href="/terms" className="text-sm text-muted-foreground">
-            <Badge>使用条款</Badge>
-          </Link>
-          <Link href="/contact" className="text-sm text-muted-foreground">
-            <Badge>联系我们</Badge>
-          </Link>
+          {links.map((link) => (
+            <Link key={link.href} href={link.href} className="text-sm text-muted-foreground">
+              <Badge>{link.label}</Badge>
+            </Link>
+          ))}
         </nav>
       </div>
     </footer>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index b2e4948..13661b2 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { useState, useEffect } from "react";
-import { useTheme } from "next-themes";
+import { useThemeType } from "@/hooks";
 
 const MoonIcon = () => (
   <svg viewBox="0 0 1024 1024" className="w-5 h-5">
@@ -22,7 +22,7 @@ const SunIcon = () => (
 
 function ThemeToggle() {
   const [mounted, setMounted] = useState(false);
-  const { theme, setTheme } = useTheme();
+  const { theme, setTheme } = useThemeType();
   const [userOverride, setUserOverride] = useState(false);
 
   useEffect(() => {
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 0000000..41d1e9c
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./useThemeType";
\ No newline at end of file
diff --git a/src/hooks/useThemeType.ts b/src/hooks/useThemeType.ts
new file mode 100644
index 0000000..976e8d5
--- /dev/null
+++ b/src/hooks/useThemeType.ts
@@ -0,0 +1,10 @@
+import { useTheme } from "next-themes";
+
+export function useThemeType() {
+  const { theme, setTheme } = useTheme();
+
+  return {
+    theme,
+    setTheme,
+  };
+}