refactor(config): clean up and standardize code formatting in configuration files

hooks/useResponsiveLayout.ts

@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react';
-import { Dimensions, Platform } from 'react-native';
+import { useState, useEffect } from "react";
+import { Dimensions, Platform } from "react-native";
 
-export type DeviceType = 'mobile' | 'tablet' | 'tv';
+export type DeviceType = "mobile" | "tablet" | "tv";
 
 export interface ResponsiveConfig {
   deviceType: DeviceType;
@@ -17,40 +17,44 @@ export interface ResponsiveConfig {
 const BREAKPOINTS = {
   mobile: { min: 0, max: 767 },
   tablet: { min: 768, max: 1023 },
-  tv: { min: 1024, max: Infinity }
+  tv: { min: 1024, max: Infinity },
 };
 
 const getDeviceType = (width: number): DeviceType => {
-  const isTV = process.env.EXPO_TV === '1' || Platform.isTV;
-  if (isTV) return 'tv';
-  
-  if (width >= BREAKPOINTS.tv.min) return 'tv';
-  if (width >= BREAKPOINTS.tablet.min) return 'tablet';
-  return 'mobile';
+  if (Platform.isTV) return "tv";
+
+  if (width >= BREAKPOINTS.tv.min) return "tv";
+  if (width >= BREAKPOINTS.tablet.min) return "tablet";
+  return "mobile";
 };
 
-const getLayoutConfig = (deviceType: DeviceType, width: number, height: number, isPortrait: boolean): ResponsiveConfig => {
-  const spacing = deviceType === 'mobile' ? 8 : deviceType === 'tablet' ? 12 : 16;
-  
+const getLayoutConfig = (
+  deviceType: DeviceType,
+  width: number,
+  height: number,
+  isPortrait: boolean
+): ResponsiveConfig => {
+  const spacing = deviceType === "mobile" ? 8 : deviceType === "tablet" ? 12 : 16;
+
   let columns: number;
   let cardWidth: number;
   let cardHeight: number;
 
   switch (deviceType) {
-    case 'mobile':
+    case "mobile":
       columns = isPortrait ? 3 : 4;
       // 使用flex布局，卡片可以更大一些来填充空间
-      cardWidth = (width - spacing) / columns * 0.85; // 增大到85%
+      cardWidth = ((width - spacing) / columns) * 0.85; // 增大到85%
       cardHeight = cardWidth * 1.2; // 5:6 aspect ratio (reduced from 2:3)
       break;
-    
-    case 'tablet':
+
+    case "tablet":
       columns = isPortrait ? 3 : 4;
-      cardWidth = (width - spacing) / columns * 0.85; // 增大到85%
+      cardWidth = ((width - spacing) / columns) * 0.85; // 增大到85%
       cardHeight = cardWidth * 1.4; // slightly less tall ratio
       break;
-    
-    case 'tv':
+
+    case "tv":
     default:
       columns = 5;
       cardWidth = 160; // Fixed width for TV
@@ -72,12 +76,12 @@ const getLayoutConfig = (deviceType: DeviceType, width: number, height: number,
 
 export const useResponsiveLayout = (): ResponsiveConfig => {
   const [dimensions, setDimensions] = useState(() => {
-    const { width, height } = Dimensions.get('window');
+    const { width, height } = Dimensions.get("window");
     return { width, height };
   });
 
   useEffect(() => {
-    const subscription = Dimensions.addEventListener('change', ({ window }) => {
+    const subscription = Dimensions.addEventListener("change", ({ window }) => {
       setDimensions({ width: window.width, height: window.height });
     });
 
@@ -87,7 +91,7 @@ export const useResponsiveLayout = (): ResponsiveConfig => {
   const { width, height } = dimensions;
   const isPortrait = height > width;
   const deviceType = getDeviceType(width);
-  
+
   return getLayoutConfig(deviceType, width, height, isPortrait);
 };
 
@@ -100,31 +104,31 @@ export const useResponsiveValue = <T>(values: { mobile: T; tablet: T; tv: T }):
 // Utility hook for responsive styles
 export const useResponsiveStyles = () => {
   const config = useResponsiveLayout();
-  
+
   return {
     // Common responsive styles
     container: {
       paddingHorizontal: config.spacing,
     },
-    
+
     // Card styles
     cardContainer: {
       width: config.cardWidth,
       height: config.cardHeight,
       marginBottom: config.spacing,
     },
-    
+
     // Grid styles
     gridContainer: {
       paddingHorizontal: config.spacing / 2,
     },
-    
+
     // Typography
-    titleFontSize: config.deviceType === 'mobile' ? 18 : config.deviceType === 'tablet' ? 22 : 28,
-    bodyFontSize: config.deviceType === 'mobile' ? 14 : config.deviceType === 'tablet' ? 16 : 18,
-    
+    titleFontSize: config.deviceType === "mobile" ? 18 : config.deviceType === "tablet" ? 22 : 28,
+    bodyFontSize: config.deviceType === "mobile" ? 14 : config.deviceType === "tablet" ? 16 : 18,
+
     // Spacing
-    sectionSpacing: config.deviceType === 'mobile' ? 16 : config.deviceType === 'tablet' ? 20 : 24,
+    sectionSpacing: config.deviceType === "mobile" ? 16 : config.deviceType === "tablet" ? 20 : 24,
     itemSpacing: config.spacing,
   };
-};
+};