snowykami/neo-blog
1
0
Fork 0
mirror of https://github.com/snowykami/neo-blog.git synced 2025-09-26 11:06:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 添加 useDevice 钩子以判断移动端，优化组件动画效果

Browse Source
This commit is contained in:
远野千束
2025-09-10 23:45:54 +08:00
parent 77eaa7a612
commit f5b30a6fe4
2 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/blog-home/blog-home.tsx
View File

@ -14,6 +14,7 @@ import { useStoredState } from '@/hooks/use-storage-state';
import { listLabels } from "@/api/label"; import { listLabels } from "@/api/label";
import { POST_SORT_TYPE } from "@/localstore"; import { POST_SORT_TYPE } from "@/localstore";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { useDevice } from "@/hooks/use-device";
// 定义排序类型 // 定义排序类型
type SortType = 'latest' | 'popular'; type SortType = 'latest' | 'popular';
@ -22,6 +23,7 @@ export default function BlogHome() {
const [labels, setLabels] = useState<Label[]>([]); const [labels, setLabels] = useState<Label[]>([]);
const [posts, setPosts] = useState<Post[]>([]); const [posts, setPosts] = useState<Post[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const { isMobile } = useDevice();
const [sortType, setSortType, sortTypeLoaded] = useStoredState<SortType>(POST_SORT_TYPE, 'latest'); const [sortType, setSortType, sortTypeLoaded] = useStoredState<SortType>(POST_SORT_TYPE, 'latest');
useEffect(() => { useEffect(() => {
if (!sortTypeLoaded) return; if (!sortTypeLoaded) return;
@ -88,7 +90,7 @@ export default function BlogHome() {
{/* 主要内容区域 */} {/* 主要内容区域 */}
<motion.div <motion.div
className="lg:col-span-3 self-start" className="lg:col-span-3 self-start"
initial={{ y: 150, opacity: 0 }} initial={{ y: isMobile ? 30 : 60, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ duration: config.animationDurationSecond, ease: "easeOut" }}> transition={{ duration: config.animationDurationSecond, ease: "easeOut" }}>
{/* 文章列表标题 */} {/* 文章列表标题 */}
@ -153,8 +155,8 @@ export default function BlogHome() {
{/* 侧边栏 */} {/* 侧边栏 */}
<motion.div <motion.div
initial={{ x: 200, opacity: 0 }} initial={isMobile ? { y: 30, opacity: 0 } : { x: 80, opacity: 0 }}
animate={{ x: 0, opacity: 1 }} animate={isMobile ? { y: 0, opacity: 1 } : { x: 0, opacity: 1 }}
transition={{ duration: config.animationDurationSecond, ease: "easeOut" }} transition={{ duration: config.animationDurationSecond, ease: "easeOut" }}
> >
<Sidebar <Sidebar

18
web/src/hooks/use-device.ts Normal file
View File

@ -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 };
}