调整首页布局 & 首页移动端适配

src/lib/hooks/useMediaQuery.ts

@@ -0,0 +1,36 @@
+import { useSyncExternalStore } from "react"
+
+const subscribeMediaQuery = (query: string) => (callback: () => void) => {
+  if (typeof window === "undefined") return () => {}
+  const mql = window.matchMedia(query)
+  mql.addEventListener("change", callback)
+  return () => mql.removeEventListener("change", callback)
+}
+
+const getMediaQuerySnapshot = (query: string) => () => {
+  if (typeof window === "undefined") return false
+  return window.matchMedia(query).matches
+}
+
+export function useMediaQuery(query: string): boolean {
+  return useSyncExternalStore(
+    subscribeMediaQuery(query),
+    getMediaQuerySnapshot(query),
+    () => false,
+  )
+}
+
+// 移动端：< 768px（对应 Tailwind md 断点以下）
+export function useIsMobile(): boolean {
+  return useMediaQuery("(max-width: 47.999rem)")
+}
+
+// 桌面端：>= 768px
+export function useIsDesktop(): boolean {
+  return useMediaQuery("(min-width: 48rem)")
+}
+
+// 窄桌面/平板横屏：< 1280px（对应 Tailwind xl 断点以下）
+export function useIsNarrowDesktop(): boolean {
+  return useMediaQuery("(max-width: 79.999rem)")
+}