feat: Refactor settings management into a dedicated page with new configuration options

components/SettingsModal.tsx

@@ -1,118 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { Modal, View, Text, TextInput, StyleSheet } from "react-native";
-import { ThemedText } from "./ThemedText";
-import { ThemedView } from "./ThemedView";
-import { useSettingsStore } from "@/stores/settingsStore";
-import { StyledButton } from "./StyledButton";
-
-export const SettingsModal: React.FC = () => {
-  const { isModalVisible, hideModal, apiBaseUrl, setApiBaseUrl, saveSettings, loadSettings } = useSettingsStore();
-
-  const [isInputFocused, setIsInputFocused] = useState(false);
-  const colorScheme = "dark"; // Replace with useColorScheme() if needed
-  const inputRef = useRef<TextInput>(null);
-
-  useEffect(() => {
-    if (isModalVisible) {
-      loadSettings();
-      const timer = setTimeout(() => {
-        inputRef.current?.focus();
-      }, 200);
-      return () => clearTimeout(timer);
-    }
-  }, [isModalVisible, loadSettings]);
-
-  const handleSave = () => {
-    saveSettings();
-  };
-
-  const styles = StyleSheet.create({
-    modalContainer: {
-      flex: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      backgroundColor: "rgba(0, 0, 0, 0.6)",
-    },
-    modalContent: {
-      width: "80%",
-      maxWidth: 500,
-      padding: 24,
-      borderRadius: 12,
-      elevation: 10,
-    },
-    title: {
-      fontSize: 24,
-      fontWeight: "bold",
-      marginBottom: 20,
-      textAlign: "center",
-    },
-    input: {
-      height: 50,
-      borderWidth: 2,
-      borderRadius: 8,
-      paddingHorizontal: 15,
-      fontSize: 16,
-      marginBottom: 24,
-      backgroundColor: colorScheme === "dark" ? "#3a3a3c" : "#f0f0f0",
-      color: colorScheme === "dark" ? "white" : "black",
-      borderColor: "transparent",
-    },
-    inputFocused: {
-      borderColor: "#007AFF",
-      shadowColor: "#007AFF",
-      shadowOffset: { width: 0, height: 0 },
-      shadowOpacity: 0.8,
-      shadowRadius: 10,
-      elevation: 5,
-    },
-    buttonContainer: {
-      flexDirection: "row",
-      justifyContent: "space-around",
-    },
-    button: {
-      flex: 1,
-      marginHorizontal: 8,
-    },
-    buttonText: {
-      fontSize: 18,
-    },
-  });
-
-  return (
-    <Modal animationType="fade" transparent={true} visible={isModalVisible} onRequestClose={hideModal}>
-      <View style={styles.modalContainer}>
-        <ThemedView style={styles.modalContent}>
-          <ThemedText style={styles.title}>设置</ThemedText>
-          <TextInput
-            ref={inputRef}
-            style={[styles.input, isInputFocused && styles.inputFocused]}
-            value={apiBaseUrl}
-            onChangeText={setApiBaseUrl}
-            placeholder="输入 API 地址"
-            placeholderTextColor={colorScheme === "dark" ? "#888" : "#555"}
-            autoCapitalize="none"
-            autoCorrect={false}
-            onFocus={() => setIsInputFocused(true)}
-            onBlur={() => setIsInputFocused(false)}
-          />
-          <View style={styles.buttonContainer}>
-            <StyledButton
-              text="取消"
-              onPress={hideModal}
-              style={styles.button}
-              textStyle={styles.buttonText}
-              variant="default"
-            />
-            <StyledButton
-              text="保存"
-              onPress={handleSave}
-              style={styles.button}
-              textStyle={styles.buttonText}
-              variant="primary"
-            />
-          </View>
-        </ThemedView>
-      </View>
-    </Modal>
-  );
-};

components/settings/APIConfigSection.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useRef } from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import { useSettingsStore } from "@/stores/settingsStore";
+
+interface APIConfigSectionProps {
+  onChanged: () => void;
+}
+
+export const APIConfigSection: React.FC<APIConfigSectionProps> = ({ onChanged }) => {
+  const { apiBaseUrl, setApiBaseUrl } = useSettingsStore();
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const handleUrlChange = (url: string) => {
+    setApiBaseUrl(url);
+    onChanged();
+  };
+
+  return (
+    <ThemedView style={styles.section}>
+      <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)}
+        />
+      </View>
+    </ThemedView>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    padding: 20,
+    marginBottom: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginBottom: 8,
+  },
+  inputContainer: {
+    marginBottom: 12,
+  },
+  label: {
+    fontSize: 16,
+    marginBottom: 8,
+    color: "#ccc",
+  },
+  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,
+  },
+});

components/settings/LiveStreamSection.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+
+interface LiveStreamSectionProps {
+  onChanged: () => void;
+}
+
+export const LiveStreamSection: React.FC<LiveStreamSectionProps> = ({ onChanged }) => {
+  return (
+    <ThemedView style={styles.section}>
+      <ThemedText style={styles.sectionTitle}>直播源配置</ThemedText>
+      <ThemedText style={styles.placeholder}>直播源配置功能即将上线</ThemedText>
+    </ThemedView>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    padding: 20,
+    marginBottom: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#333',
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 16,
+  },
+  placeholder: {
+    fontSize: 14,
+    color: '#888',
+    fontStyle: 'italic',
+  },
+});

components/settings/PlaybackSourceSection.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+
+interface PlaybackSourceSectionProps {
+  onChanged: () => void;
+}
+
+export const PlaySourceSection: React.FC<PlaybackSourceSectionProps> = ({ onChanged }) => {
+  return (
+    <ThemedView style={styles.section}>
+      <ThemedText style={styles.sectionTitle}>播放源配置</ThemedText>
+      <ThemedText style={styles.placeholder}>播放源配置功能即将上线</ThemedText>
+    </ThemedView>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    padding: 20,
+    marginBottom: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: "bold",
+    marginBottom: 16,
+  },
+  placeholder: {
+    fontSize: 14,
+    color: "#888",
+    fontStyle: "italic",
+  },
+});

components/settings/RemoteInputSection.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { View, Switch, StyleSheet } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { useRemoteControlStore } from "@/stores/remoteControlStore";
+
+interface RemoteInputSectionProps {
+  onChanged: () => void;
+}
+
+export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChanged }) => {
+  const { remoteInputEnabled, setRemoteInputEnabled } = useSettingsStore();
+  const { isServerRunning, serverUrl, error } = useRemoteControlStore();
+
+  const handleToggle = async (enabled: boolean) => {
+    setRemoteInputEnabled(enabled);
+    onChanged();
+  };
+
+  return (
+    <ThemedView style={styles.section}>
+      <View style={styles.settingItem}>
+        <View style={styles.settingInfo}>
+          <ThemedText style={styles.settingName}>启用远程输入</ThemedText>
+        </View>
+        <Switch
+          value={remoteInputEnabled}
+          onValueChange={handleToggle}
+          trackColor={{ false: "#767577", true: "#007AFF" }}
+          thumbColor={remoteInputEnabled ? "#ffffff" : "#f4f3f4"}
+        />
+      </View>
+
+      {remoteInputEnabled && (
+        <View style={styles.statusContainer}>
+          <View style={styles.statusItem}>
+            <ThemedText style={styles.statusLabel}>服务状态：</ThemedText>
+            <ThemedText style={[styles.statusValue, { color: isServerRunning ? "#00FF00" : "#FF6B6B" }]}>
+              {isServerRunning ? "运行中" : "已停止"}
+            </ThemedText>
+          </View>
+
+          {serverUrl && (
+            <View style={styles.statusItem}>
+              <ThemedText style={styles.statusLabel}>访问地址：</ThemedText>
+              <ThemedText style={styles.statusValue}>{serverUrl}</ThemedText>
+            </View>
+          )}
+
+          {error && (
+            <View style={styles.statusItem}>
+              <ThemedText style={styles.statusLabel}>错误：</ThemedText>
+              <ThemedText style={[styles.statusValue, { color: "#FF6B6B" }]}>{error}</ThemedText>
+            </View>
+          )}
+        </View>
+      )}
+    </ThemedView>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    padding: 20,
+    marginBottom: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: "bold",
+    marginBottom: 16,
+  },
+  settingItem: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 12,
+  },
+  settingInfo: {
+    flex: 1,
+  },
+  settingName: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginBottom: 4,
+  },
+  settingDescription: {
+    fontSize: 14,
+    color: "#888",
+  },
+  statusContainer: {
+    marginTop: 16,
+    padding: 16,
+    backgroundColor: "#2a2a2c",
+    borderRadius: 8,
+  },
+  statusItem: {
+    flexDirection: "row",
+    marginBottom: 8,
+  },
+  statusLabel: {
+    fontSize: 14,
+    color: "#ccc",
+    minWidth: 80,
+  },
+  statusValue: {
+    fontSize: 14,
+    flex: 1,
+  },
+  actionButtons: {
+    flexDirection: "row",
+    gap: 12,
+    marginTop: 12,
+  },
+  actionButton: {
+    flex: 1,
+  },
+});