feat: Refactor settings management into a dedicated page with new configuration options, including live stream source and remote input settings

components/settings/APIConfigSection.tsx

@@ -1,52 +1,75 @@
 import React, { useState, useRef } from "react";
-import { View, TextInput, StyleSheet } from "react-native";
+import { View, TextInput, StyleSheet, Pressable, Animated } from "react-native";
+import { useTVEventHandler } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
-import { ThemedView } from "@/components/ThemedView";
+import { SettingsSection } from "./SettingsSection";
 import { useSettingsStore } from "@/stores/settingsStore";
+import { useButtonAnimation } from "@/hooks/useAnimation";
 
 interface APIConfigSectionProps {
   onChanged: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
-export const APIConfigSection: React.FC<APIConfigSectionProps> = ({ onChanged }) => {
+export const APIConfigSection: React.FC<APIConfigSectionProps> = ({ onChanged, onFocus, onBlur }) => {
   const { apiBaseUrl, setApiBaseUrl } = useSettingsStore();
   const [isInputFocused, setIsInputFocused] = useState(false);
+  const [isSectionFocused, setIsSectionFocused] = useState(false);
   const inputRef = useRef<TextInput>(null);
+  const inputAnimationStyle = useButtonAnimation(isSectionFocused, 1.01);
 
   const handleUrlChange = (url: string) => {
     setApiBaseUrl(url);
     onChanged();
   };
 
+  const handleSectionFocus = () => {
+    setIsSectionFocused(true);
+    onFocus?.();
+  };
+
+  const handleSectionBlur = () => {
+    setIsSectionFocused(false);
+    onBlur?.();
+  };
+
+  // TV遥控器事件处理
+  const handleTVEvent = React.useCallback(
+    (event: any) => {
+      if (isSectionFocused && event.eventType === "select") {
+        inputRef.current?.focus();
+      }
+    },
+    [isSectionFocused]
+  );
+
+  useTVEventHandler(handleTVEvent);
+
   return (
-    <ThemedView style={styles.section}>
+    <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
       <View style={styles.inputContainer}>
         <ThemedText style={styles.sectionTitle}>API 地址</ThemedText>
-        <TextInput
-          ref={inputRef}
-          style={[styles.input, isInputFocused && styles.inputFocused]}
-          value={apiBaseUrl}
-          onChangeText={handleUrlChange}
-          placeholder="输入 API 地址"
-          placeholderTextColor="#888"
-          autoCapitalize="none"
-          autoCorrect={false}
-          onFocus={() => setIsInputFocused(true)}
-          onBlur={() => setIsInputFocused(false)}
-        />
+        <Animated.View style={inputAnimationStyle}>
+          <TextInput
+            ref={inputRef}
+            style={[styles.input, isInputFocused && styles.inputFocused]}
+            value={apiBaseUrl}
+            onChangeText={handleUrlChange}
+            placeholder="输入 API 地址"
+            placeholderTextColor="#888"
+            autoCapitalize="none"
+            autoCorrect={false}
+            onFocus={() => setIsInputFocused(true)}
+            onBlur={() => setIsInputFocused(false)}
+          />
+        </Animated.View>
       </View>
-    </ThemedView>
+    </SettingsSection>
   );
 };
 
 const styles = StyleSheet.create({
-  section: {
-    padding: 20,
-    marginBottom: 16,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: "#333",
-  },
   sectionTitle: {
     fontSize: 16,
     fontWeight: "bold",