feat: 完成前端响应式设计优化，增强移动端体验

- 添加触摸手势支持库 (react-spring + @use-gesture/react)
- 照片模态框增加左右滑动切换功能
- 照片画廊增加下拉刷新功能 (移动端)
- 优化所有按钮符合44px最小触摸目标标准
- 增强移动端导航体验，增加悬停和选中状态
- 创建设备信息检测钩子 (useDeviceInfo)
- 开发优化图片组件，支持懒加载和骨架屏
- 改进移动端手势交互和视觉反馈
- 完善响应式断点系统和触摸设备检测
- 前端构建测试成功，开发服务器正常启动

Task 23 completed: 前端响应式设计优化

frontend/hooks/use-mobile.tsx

@@ -1,6 +1,8 @@
 import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768
+const TABLET_BREAKPOINT = 1024
+const TOUCH_SUPPORT = typeof window !== 'undefined' && 'ontouchstart' in window
 
 export function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
@@ -17,3 +19,47 @@ export function useIsMobile() {
 
   return !!isMobile
 }
+
+export function useDeviceInfo() {
+  const [deviceInfo, setDeviceInfo] = React.useState({
+    isMobile: false,
+    isTablet: false,
+    isDesktop: false,
+    hasTouch: false,
+    viewport: { width: 0, height: 0 }
+  })
+
+  React.useEffect(() => {
+    const updateDeviceInfo = () => {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      
+      setDeviceInfo({
+        isMobile: width < MOBILE_BREAKPOINT,
+        isTablet: width >= MOBILE_BREAKPOINT && width < TABLET_BREAKPOINT,
+        isDesktop: width >= TABLET_BREAKPOINT,
+        hasTouch: TOUCH_SUPPORT,
+        viewport: { width, height }
+      })
+    }
+
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const mqt = window.matchMedia(`(max-width: ${TABLET_BREAKPOINT - 1}px)`)
+    
+    updateDeviceInfo()
+    
+    const handleResize = () => updateDeviceInfo()
+    
+    mql.addEventListener("change", handleResize)
+    mqt.addEventListener("change", handleResize)
+    window.addEventListener("resize", handleResize)
+    
+    return () => {
+      mql.removeEventListener("change", handleResize)
+      mqt.removeEventListener("change", handleResize)
+      window.removeEventListener("resize", handleResize)
+    }
+  }, [])
+
+  return deviceInfo
+}