设置页面

2026-07-08 07:28:37 +08:00 · 2026-03-19 16:34:56 +08:00
parent 965a6b411f
commit 462a090599
12 changed files with 586 additions and 156 deletions
--- a/app/settings.tsx
+++ b/app/settings.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useRouter } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+import { useAuthStore } from '../store/authStore';
+import { useSettingsStore } from '../store/settingsStore';
+
+export default function SettingsScreen() {
+  const router = useRouter();
+  const { isLoggedIn, logout } = useAuthStore();
+  const { coverQuality, setCoverQuality } = useSettingsStore();
+
+  const handleLogout = async () => {
+    await logout();
+    router.back();
+  };
+
+  return (
+    <SafeAreaView style={styles.safe}>
+      <View style={styles.topBar}>
+        <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
+          <Ionicons name="chevron-back" size={24} color="#212121" />
+        </TouchableOpacity>
+        <Text style={styles.topTitle}>设置</Text>
+        <View style={styles.spacer} />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionLabel}>封面图清晰度</Text>
+        <View style={styles.optionRow}>
+          <TouchableOpacity
+            style={[styles.option, coverQuality === 'hd' && styles.optionActive]}
+            onPress={() => setCoverQuality('hd')}
+            activeOpacity={0.7}
+          >
+            <Text style={[styles.optionText, coverQuality === 'hd' && styles.optionTextActive]}>
+              高清
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.option, coverQuality === 'normal' && styles.optionActive]}
+            onPress={() => setCoverQuality('normal')}
+            activeOpacity={0.7}
+          >
+            <Text style={[styles.optionText, coverQuality === 'normal' && styles.optionTextActive]}>
+              普通
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {isLoggedIn && (
+        <TouchableOpacity style={styles.logoutBtn} onPress={handleLogout} activeOpacity={0.8}>
+          <Text style={styles.logoutText}>退出登录</Text>
+        </TouchableOpacity>
+      )}
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: '#f4f4f4' },
+  topBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    backgroundColor: '#fff',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#eee',
+  },
+  backBtn: { padding: 4, width: 32 },
+  spacer: { width: 32 },
+  topTitle: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#212121',
+    textAlign: 'center',
+  },
+  section: {
+    backgroundColor: '#fff',
+    marginTop: 16,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#eee',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#eee',
+  },
+  sectionLabel: { fontSize: 13, color: '#999', marginBottom: 10 },
+  optionRow: { flexDirection: 'row', gap: 10 },
+  option: {
+    paddingHorizontal: 20,
+    paddingVertical: 6,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    backgroundColor: '#fff',
+  },
+  optionActive: { borderColor: '#00AEEC', backgroundColor: '#e8f7fd' },
+  optionText: { fontSize: 14, color: '#666' },
+  optionTextActive: { color: '#00AEEC', fontWeight: '600' },
+  logoutBtn: {
+    margin: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#ff4757',
+    alignItems: 'center',
+  },
+  logoutText: { fontSize: 15, color: '#ff4757', fontWeight: '600' },
+});