From f5b30a6fe4e40ad37e66b64e0b4682de10040ac7 Mon Sep 17 00:00:00 2001
From: Snowykami <snowykami@outlook.com>
Date: Wed, 10 Sep 2025 23:45:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20useDevice=20?=
 =?UTF-8?q?=E9=92=A9=E5=AD=90=E4=BB=A5=E5=88=A4=E6=96=AD=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=EF=BC=8C=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/blog-home/blog-home.tsx |  8 +++++---
 web/src/hooks/use-device.ts                | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 web/src/hooks/use-device.ts

diff --git a/web/src/components/blog-home/blog-home.tsx b/web/src/components/blog-home/blog-home.tsx
index cd614c9..e4fbb66 100644
--- a/web/src/components/blog-home/blog-home.tsx
+++ b/web/src/components/blog-home/blog-home.tsx
@@ -14,6 +14,7 @@ import { useStoredState } from '@/hooks/use-storage-state';
 import { listLabels } from "@/api/label";
 import { POST_SORT_TYPE } from "@/localstore";
 import { motion } from "framer-motion";
+import { useDevice } from "@/hooks/use-device";
 
 // 定义排序类型
 type SortType = 'latest' | 'popular';
@@ -22,6 +23,7 @@ export default function BlogHome() {
   const [labels, setLabels] = useState<Label[]>([]);
   const [posts, setPosts] = useState<Post[]>([]);
   const [loading, setLoading] = useState(false);
+  const { isMobile } = useDevice();
   const [sortType, setSortType, sortTypeLoaded] = useStoredState<SortType>(POST_SORT_TYPE, 'latest');
   useEffect(() => {
     if (!sortTypeLoaded) return;
@@ -88,7 +90,7 @@ export default function BlogHome() {
             {/* 主要内容区域 */}
             <motion.div
               className="lg:col-span-3 self-start"
-              initial={{ y: 150, opacity: 0 }}
+              initial={{ y: isMobile ? 30 : 60, opacity: 0 }}
               animate={{ y: 0, opacity: 1 }}
               transition={{ duration: config.animationDurationSecond, ease: "easeOut" }}>
               {/* 文章列表标题 */}
@@ -153,8 +155,8 @@ export default function BlogHome() {
 
             {/* 侧边栏 */}
             <motion.div
-              initial={{ x: 200, opacity: 0 }}
-              animate={{ x: 0, opacity: 1 }}
+              initial={isMobile ? { y: 30, opacity: 0 } : { x: 80, opacity: 0 }}
+              animate={isMobile ? { y: 0, opacity: 1 } : { x: 0, opacity: 1 }}
               transition={{ duration: config.animationDurationSecond, ease: "easeOut" }}
             >
               <Sidebar
diff --git a/web/src/hooks/use-device.ts b/web/src/hooks/use-device.ts
new file mode 100644
index 0000000..d0e8b85
--- /dev/null
+++ b/web/src/hooks/use-device.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+export function useDevice() {
+	const [isMobile, setIsMobile] = useState(false);
+
+	useEffect(() => {
+		// 简单判断移动端
+		const check = () => {
+			const ua = navigator.userAgent;
+			setIsMobile(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua));
+		};
+		check();
+		window.addEventListener("resize", check);
+		return () => window.removeEventListener("resize", check);
+	}, []);
+
+	return { isMobile };
+}