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

components/settings/LiveStreamSection.tsx

@@ -1,37 +1,98 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
+import React, { useState, useRef } from 'react';
+import { View, TextInput, StyleSheet, 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 LiveStreamSectionProps {
   onChanged: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
-export const LiveStreamSection: React.FC<LiveStreamSectionProps> = ({ onChanged }) => {
+export const LiveStreamSection: React.FC<LiveStreamSectionProps> = ({ onChanged, onFocus, onBlur }) => {
+  const { m3uUrl, setM3uUrl } = 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) => {
+    setM3uUrl(url);
+    onChanged();
+  };
+
+  const handleSectionFocus = () => {
+    setIsSectionFocused(true);
+    onFocus?.();
+  };
+
+  const handleSectionBlur = () => {
+    setIsSectionFocused(false);
+    onBlur?.();
+  };
+
+  const handleTVEvent = React.useCallback(
+    (event: any) => {
+      if (isSectionFocused && event.eventType === "select") {
+        inputRef.current?.focus();
+      }
+    },
+    [isSectionFocused]
+  );
+
+  useTVEventHandler(handleTVEvent);
+
   return (
-    <ThemedView style={styles.section}>
-      <ThemedText style={styles.sectionTitle}>直播源配置</ThemedText>
-      <ThemedText style={styles.placeholder}>直播源配置功能即将上线</ThemedText>
-    </ThemedView>
+    <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+      <View style={styles.inputContainer}>
+        <ThemedText style={styles.sectionTitle}>直播源地址</ThemedText>
+        <Animated.View style={inputAnimationStyle}>
+          <TextInput
+            ref={inputRef}
+            style={[styles.input, isInputFocused && styles.inputFocused]}
+            value={m3uUrl}
+            onChangeText={handleUrlChange}
+            placeholder="输入 M3U 直播源地址"
+            placeholderTextColor="#888"
+            autoCapitalize="none"
+            autoCorrect={false}
+            onFocus={() => setIsInputFocused(true)}
+            onBlur={() => setIsInputFocused(false)}
+          />
+        </Animated.View>
+      </View>
+    </SettingsSection>
   );
 };
 
 const styles = StyleSheet.create({
-  section: {
-    padding: 20,
-    marginBottom: 16,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#333',
-  },
   sectionTitle: {
-    fontSize: 20,
+    fontSize: 16,
     fontWeight: 'bold',
-    marginBottom: 16,
+    marginBottom: 8,
   },
-  placeholder: {
-    fontSize: 14,
-    color: '#888',
-    fontStyle: 'italic',
+  inputContainer: {
+    marginBottom: 12,
+  },
+  input: {
+    height: 50,
+    borderWidth: 2,
+    borderRadius: 8,
+    paddingHorizontal: 15,
+    fontSize: 16,
+    backgroundColor: '#3a3a3c',
+    color: 'white',
+    borderColor: 'transparent',
+  },
+  inputFocused: {
+    borderColor: '#007AFF',
+    shadowColor: '#007AFF',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.8,
+    shadowRadius: 10,
+    elevation: 5,
   },
 });