feat: 添加 motion 动画支持，优化组件动画效果，调整动画持续时间

web/src/components/blog-home/blog-home-card.tsx

@@ -7,6 +7,8 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import config from '@/config'
 import { cn } from '@/lib/utils'
 import { getPostHref } from '@/utils/common/post'
+import { motion } from 'framer-motion'
+import { deceleration } from '@/motion/curve'
 
 interface BlogCardProps {
   post: Post
@@ -29,34 +31,47 @@ export function BlogCard({ post, className }: BlogCardProps) {
     )}
     >
       {/* 封面图片区域 */}
-      <div className="relative aspect-[16/9] overflow-hidden">
+      <div
+        className="relative aspect-[16/9] overflow-hidden"
+      >
         {/* 自定义封面图片 */}
-        {(post.cover || config.defaultCover) ? (
-          <Image
-            src={post.cover || config.defaultCover}
-            alt={post.title}
-            fill
-            className="object-cover w-full h-full transition-transform duration-300 group-hover:scale-105"
-            sizes="(max-width: 768px) 100vw, 33vw"
-            priority={false}
-          />
-        ) : (
-          // 默认渐变背景 - 基于热度生成颜色
-          <div
-            className={cn(
-              'w-full h-full bg-gradient-to-br',
-              post.heat > 80
-                ? 'from-red-400 via-pink-500 to-orange-500'
-                : post.heat > 60
-                  ? 'from-orange-400 via-yellow-500 to-red-500'
-                  : post.heat > 40
-                    ? 'from-blue-400 via-purple-500 to-pink-500'
-                    : post.heat > 20
-                      ? 'from-green-400 via-blue-500 to-purple-500'
-                      : 'from-gray-400 via-slate-500 to-gray-600',
-            )}
-          />
-        )}
+        <motion.div
+          initial={{ scale: 1.2, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{
+            duration: config.animationDurationSecond,
+            ease: deceleration,
+          }}
+          className="absolute inset-0 w-full h-full"
+        >
+          {(post.cover || config.defaultCover) ? (
+            <Image
+              src={post.cover || config.defaultCover}
+              alt={post.title}
+              fill
+              className="object-cover w-full h-full transition-transform duration-300 group-hover:scale-105"
+              sizes="(max-width: 768px) 100vw, 33vw"
+              priority={false}
+            />
+          ) : (
+            // 默认渐变背景 - 基于热度生成颜色
+            <div
+              className={cn(
+          'w-full h-full bg-gradient-to-br',
+          post.heat > 80
+            ? 'from-red-400 via-pink-500 to-orange-500'
+            : post.heat > 60
+              ? 'from-orange-400 via-yellow-500 to-red-500'
+              : post.heat > 40
+                ? 'from-blue-400 via-purple-500 to-pink-500'
+                : post.heat > 20
+            ? 'from-green-400 via-blue-500 to-purple-500'
+            : 'from-gray-400 via-slate-500 to-gray-600',
+              )}
+            />
+          )}
+        </motion.div>
+
 
         {/* 覆盖层 */}
         <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
@@ -117,6 +132,7 @@ export function BlogCard({ post, className }: BlogCardProps) {
         </CardTitle>
 
       </CardHeader>
+
       {/* Card Content - 主要内容 */}
       <CardContent className="flex-1">
         <CardDescription className="line-clamp-3 leading-relaxed">

web/src/components/blog-post/blog-post.tsx

@@ -6,6 +6,8 @@ import { isMobileByUA } from "@/utils/server/device";
 import { calculateReadingTime } from "@/utils/common/post";
 import { CommentSection } from "@/components/comment";
 import { TargetType } from '@/models/types';
+import * as motion from "motion/react-client"
+import config from "@/config";
 
 function PostMeta({ post }: { post: Post }) {
   return (
@@ -71,25 +73,33 @@ async function PostHeader({ post }: { post: Post }) {
         aria-hidden="true"
         style={{ zIndex: -1 }}
       />
-      {(post.labels || post.isOriginal) && (
-        <div className="flex flex-wrap gap-2 mb-4">
-          {post.isOriginal && (
-            <span className="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">
-              原创
-            </span>
-          )}
-          {(post.labels || []).map(label => (
-            <span key={label.id} className="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">
-              {label.key}
-            </span>
-          ))}
+      <motion.div
+        initial={{ opacity: 0, x: -50 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: config.animationDurationSecond, ease: "easeOut" }}
+        className="container mx-auto px-4"
+      >
+        {(post.labels || post.isOriginal) && (
+          <div className="flex flex-wrap gap-2 mb-4">
+            {post.isOriginal && (
+              <span className="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">
+                原创
+              </span>
+            )}
+            {(post.labels || []).map(label => (
+              <span key={label.id} className="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">
+                {label.key}
+              </span>
+            ))}
+          </div>
+        )}
+        <h1 className="text-5xl font-bold mb-2 text-primary-foreground">{post.title}</h1>
+        {/* 元数据区 */}
+        <div>
+          <PostMeta post={post} />
         </div>
-      )}
-      <h1 className="text-5xl font-bold mb-2 text-primary-foreground">{post.title}</h1>
-      {/* 元数据区 */}
-      <div>
-        <PostMeta post={post} />
-      </div>
+      </motion.div>
+
     </div>
   );
 }

web/src/components/common/markdown.tsx

@@ -6,79 +6,119 @@ import "highlight.js/styles/github.css"; // 你可以换成喜欢的主题
 import "highlight.js/styles/github-dark.css"; // 适用于暗黑模式
 import "highlight.js/styles/github-dark-dimmed.css"; // 适用于暗黑模式
 import CodeBlock from "@/components/common/markdown-codeblock";
+import * as motion from "motion/react-client"
+import config from "@/config";
+import { Skeleton } from "@/components/ui/skeleton";
+
+
+export function MotionDiv(props: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <motion.div
+      initial={{ opacity: 0.3, y: 50 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: config.animationDurationSecond, ease: "easeOut" }}
+    >{props.children}
+    </motion.div>
+  );
+}
 
 export const markdownComponents = {
-    h1: (props: React.ComponentPropsWithoutRef<"h1">) => (
-        <h1
-            className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance mt-10 mb-6"
-            {...props}
-        />
-    ),
-    h2: (props: React.ComponentPropsWithoutRef<"h2">) => (
-        <h2
-            className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 mt-8 mb-4"
-            {...props}
-        />
-    ),
-    h3: (props: React.ComponentPropsWithoutRef<"h3">) => (
-        <h3
-            className="scroll-m-20 text-2xl font-semibold tracking-tight mt-6 mb-3"
-            {...props}
-        />
-    ),
-    h4: (props: React.ComponentPropsWithoutRef<"h4">) => (
-        <h4
-            className="scroll-m-20 text-xl font-semibold tracking-tight mt-5 mb-2"
-            {...props}
-        />
-    ),
-    p: (props: React.ComponentPropsWithoutRef<"p">) => (
-        <p
-            className="leading-7 mt-4 mb-4"
-            {...props}
-        />
-    ),
-    blockquote: (props: React.ComponentPropsWithoutRef<"blockquote">) => (
-        <blockquote
-            className="border-l-4 border-blue-400 pl-4 italic my-6 py-2"
-            {...props}
-        />
-    ),
-    code: (props: React.ComponentPropsWithoutRef<"code">) => (
-        <code
-            className="bg-gray-100 dark:bg-gray-800 rounded px-1 py-0.5 text-sm font-mono"
-            {...props}
-        />
-    ),
-    pre: ({ children, ...props }: React.ComponentPropsWithoutRef<"pre">) => (
-        <CodeBlock {...props}>{children}</CodeBlock>
-    ),
-    a: (props: React.ComponentPropsWithoutRef<"a">) => (
-        <a
-            className="text-blue-600 hover:underline"
-            {...props}
-        />
-    ),
+  h1: (props: React.ComponentPropsWithoutRef<"h1">) => (
+    <MotionDiv>
+      <h1
+        className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance mt-10 mb-6"
+        {...props}
+      />
+    </MotionDiv>
+
+  ),
+  h2: (props: React.ComponentPropsWithoutRef<"h2">) => (
+    <MotionDiv>
+      <h2
+        className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 mt-8 mb-4"
+        {...props}
+      />
+    </MotionDiv>
+  ),
+  h3: (props: React.ComponentPropsWithoutRef<"h3">) => (
+    <MotionDiv>
+      <h3
+        className="scroll-m-20 text-2xl font-semibold tracking-tight mt-6 mb-3"
+        {...props}
+      />
+    </MotionDiv>
+  ),
+  h4: (props: React.ComponentPropsWithoutRef<"h4">) => (
+    <MotionDiv>
+      <h4
+        className="scroll-m-20 text-xl font-semibold tracking-tight mt-5 mb-2"
+        {...props}
+      /></MotionDiv>
+  ),
+  p: (props: React.ComponentPropsWithoutRef<"p">) => (
+    <MotionDiv>
+      <div className="leading-7 mt-4 mb-4">{props.children}</div>
+    </MotionDiv>
+  ),
+  blockquote: (props: React.ComponentPropsWithoutRef<"blockquote">) => (
+    <MotionDiv>
+      <blockquote
+        className="border-l-4 border-blue-400 pl-4 italic my-6 py-2"
+        {...props}
+      />
+    </MotionDiv>
+  ),
+  code: (props: React.ComponentPropsWithoutRef<"code">) => (
+    <code
+      className="bg-gray-100 dark:bg-gray-800 rounded px-1 py-0.5 text-sm font-mono"
+      {...props}
+    />
+  ),
+  pre: ({ children, ...props }: React.ComponentPropsWithoutRef<"pre">) => (
+    <MotionDiv><CodeBlock {...props}>{children}</CodeBlock></MotionDiv>
+  ),
+  a: (props: React.ComponentPropsWithoutRef<"a">) => (
+    <a
+      className="text-blue-600 hover:underline"
+      {...props}
+    />
+  ),
 };
 
 export function RenderMarkdown(props: Omit<MDXRemoteProps, "components">) {
-    return (
-        <Suspense fallback={<div>加载中...</div>}>
-            <MDXRemote {...props}
-                components={markdownComponents}
-                options={{
-                    mdxOptions: {
-                        rehypePlugins: [[rehypeHighlight, { ignoreMissing: true }]],
-                    }
-                }} />
-        </Suspense>
-    );
+  return (
+    <Suspense fallback={<MarkdownSkeleton />}>
+      <MDXRemote {...props}
+        components={markdownComponents}
+        options={{
+          mdxOptions: {
+            rehypePlugins: [[rehypeHighlight, { ignoreMissing: true }]],
+          }
+        }} />
+    </Suspense>
+  );
 }
 
 export function RenderMarkdownWithComponents(props: MDXRemoteProps) {
-    return (
-        <Suspense fallback={<div>加载中...</div>}>
-            <MDXRemote {...props} components={markdownComponents} />
-        </Suspense>
-    );
+  return (
+    <Suspense fallback={<MarkdownSkeleton />}>
+      <MDXRemote {...props} components={markdownComponents} />
+    </Suspense>
+  );
+}
+
+export function MarkdownSkeleton() {
+  return (
+    <div className="space-y-4 mt-8">
+      <Skeleton className="h-10 w-2/3" />
+      <Skeleton className="h-6 w-1/2" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-5/6" />
+      <Skeleton className="h-4 w-4/6" />
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-4 w-2/3" />
+      <Skeleton className="h-4 w-1/2" />
+      <Skeleton className="h-4 w-1/3" />
+    </div>
+  );
 }

web/src/config.ts

@@ -16,7 +16,7 @@ const config = {
     bodyWidthMobile: "100vw",
     postsPerPage: 12,
     commentsPerPage: 8,
-    animationDurationSecond: 0.5,
+    animationDurationSecond: 0.618,
     footer: {
         text: "Liteyuki ICP备 1145141919810",
         links: []

web/src/motion/curve.ts

@@ -0,0 +1,7 @@
+// 定义一系列motion动画用的曲线
+
+export const liner = (t: number) => t;
+
+export const acceleration = (t: number) => t * t;
+
+export const deceleration = (t: number) => 1 - (1 - t) * (1 - t);