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

app/settings.tsx

@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from "react";
+import { View, StyleSheet, ScrollView, Alert } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import { StyledButton } from "@/components/StyledButton";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { APIConfigSection } from "@/components/settings/APIConfigSection";
+import { LiveStreamSection } from "@/components/settings/LiveStreamSection";
+import { RemoteInputSection } from "@/components/settings/RemoteInputSection";
+import { PlaySourceSection } from "@/components/settings/PlaybackSourceSection";
+
+export default function SettingsScreen() {
+  const { loadSettings, saveSettings } = useSettingsStore();
+
+  const [hasChanges, setHasChanges] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    loadSettings();
+  }, [loadSettings]);
+
+  const handleSave = async () => {
+    setIsLoading(true);
+    try {
+      await saveSettings();
+      setHasChanges(false);
+      Alert.alert("成功", "设置已保存");
+    } catch {
+      Alert.alert("错误", "保存设置失败");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const markAsChanged = () => {
+    setHasChanges(true);
+  };
+
+  return (
+    <ThemedView style={styles.container}>
+      <View style={styles.header}>
+        <ThemedText style={styles.title}>设置</ThemedText>
+      </View>
+
+      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+        <RemoteInputSection onChanged={markAsChanged} />
+        <APIConfigSection onChanged={markAsChanged} />
+        <LiveStreamSection onChanged={markAsChanged} />
+        <PlaySourceSection onChanged={markAsChanged} />
+      </ScrollView>
+
+      <View style={styles.footer}>
+        <StyledButton
+          text={isLoading ? "保存中..." : "保存设置"}
+          onPress={handleSave}
+          variant="primary"
+          disabled={!hasChanges || isLoading}
+          style={[styles.saveButton, (!hasChanges || isLoading) && styles.disabledButton]}
+        />
+      </View>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 10,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "bold",
+    paddingTop: 24,
+  },
+  backButton: {
+    minWidth: 100,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  footer: {
+    paddingTop: 24,
+    borderTopWidth: 1,
+    borderTopColor: "#333",
+  },
+  saveButton: {
+    minHeight: 50,
+  },
+  disabledButton: {
+    opacity: 0.5,
+  },
+});