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

feat: 添加移动端检测功能，优化组件动画效果
All checks were successful
Push to Helm Chart Repository / build (push) Successful in 9s
Details

Browse Source
This commit is contained in:
远野千束
2025-09-11 00:03:03 +08:00
parent 29dc8bf27a
commit b3e8a5ef77
4 changed files with 29 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ import { listLabels } from "@/api/label";
import { POST_SORT_TYPE } from "@/localstore";
import { motion } from "framer-motion";
import { useDevice } from "@/hooks/use-device";
import { checkIsMobile } from "@/utils/client/device";
// 定义排序类型
type SortType = 'latest' | 'popular';
@ -23,7 +24,6 @@ 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;
@ -90,7 +90,7 @@ export default function BlogHome() {
{/* 主要内容区域 */}
<motion.div
className="lg:col-span-3 self-start"
initial={{ y: isMobile ? 30 : 60, opacity: 0 }}
initial={{ y: checkIsMobile() ? 30 : 60, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: config.animationDurationSecond, ease: "easeOut" }}>
{/* 文章列表标题 */}
@ -155,9 +155,9 @@ export default function BlogHome() {
{/* 侧边栏 */}
<motion.div
initial={isMobile ? { y: 30, opacity: 0 } : { x: 80, opacity: 0 }}
initial={checkIsMobile() ? { y: 30, opacity: 0 } : { x: 80, opacity: 0 }}
animate={{ x: 0, y: 0, opacity: 1 }}
transition={{ duration: config.animationDurationSecond , ease: "easeOut" }}
transition={{ duration: config.animationDurationSecond, ease: "easeOut" }}
>
<Sidebar
cards={[