上传完整的WebUI前端仓库

dashboard/src/hooks/use-media-query.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches
+    }
+    return false
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    const mediaQuery = window.matchMedia(query)
+    
+    const handleChange = (event: MediaQueryListEvent) => {
+      setMatches(event.matches)
+    }
+
+    setMatches(mediaQuery.matches)
+    mediaQuery.addEventListener('change', handleChange)
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange)
+    }
+  }, [query])
+
+  return matches
+}
+
+export function useIsMobile(): boolean {
+  return useMediaQuery('(max-width: 768px)')
+}