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

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,
+  },
+});