feat(zen-box): 新增云端配置同步功能,完善应用构建与配置
本次提交实现了观空禅音应用的核心云端同步功能,包括: 1. 添加用户登录验证接口与本地存储管理 2. 新增云端配置存储与拉取接口,支持跨设备同步歌单、播放进度等设置 3. 新增登录页面与设置页账号管理模块 4. 更新依赖包版本与安卓、iOS打包配置 5. 优化缓存下载逻辑,修复OSS链接编码问题 6. 新增离线模式支持,自动过滤无缓存歌单 7. 新增歌曲排序偏好本地与云端同步功能
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { View, Text, StyleSheet, TouchableOpacity, Alert, Switch, ActivityIndicator } from 'react-native';
|
||||
import { View, Text, StyleSheet, TouchableOpacity, Alert, Switch, ActivityIndicator, ScrollView } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import Svg, { Path } from 'react-native-svg';
|
||||
import { theme } from '../theme';
|
||||
@@ -66,10 +66,13 @@ interface SettingsScreenProps {
|
||||
currentPlaylistFile: string;
|
||||
cachedTrackCount: number;
|
||||
trackCount: number;
|
||||
loggedInUser: string | null;
|
||||
onCacheOnlyChange: (value: boolean) => Promise<void>;
|
||||
onResumePlaybackChange: (value: boolean) => Promise<void>;
|
||||
onCacheChanged: () => Promise<void> | void;
|
||||
onPlaylistChange: (fileName: string) => Promise<void>;
|
||||
onLoginPress: () => void;
|
||||
onLogout: () => void;
|
||||
}
|
||||
|
||||
export const SettingsScreen: React.FC<SettingsScreenProps> = ({
|
||||
@@ -79,10 +82,13 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
|
||||
currentPlaylistFile,
|
||||
cachedTrackCount,
|
||||
trackCount,
|
||||
loggedInUser,
|
||||
onCacheOnlyChange,
|
||||
onResumePlaybackChange,
|
||||
onCacheChanged,
|
||||
onPlaylistChange,
|
||||
onLoginPress,
|
||||
onLogout,
|
||||
}) => {
|
||||
const [cacheSize, setCacheSize] = useState<string>('0 B');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
@@ -163,12 +169,32 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
Alert.alert(
|
||||
'退出登录',
|
||||
'确定要退出登录吗?退出后云端配置将不再同步。',
|
||||
[
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{
|
||||
text: '退出',
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
onLogout();
|
||||
Alert.alert('已退出', '已退出登录');
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container} edges={['top', 'bottom']}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>设置</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.scrollContent} contentContainerStyle={styles.scrollContentInner}>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>播放设置</Text>
|
||||
<SettingItem
|
||||
@@ -249,6 +275,33 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>账号</Text>
|
||||
{loggedInUser ? (
|
||||
<>
|
||||
<SettingItem
|
||||
title="已登录"
|
||||
subtitle={`当前账号:${loggedInUser}`}
|
||||
rightElement={
|
||||
<TouchableOpacity onPress={handleLogout} style={styles.logoutBtn}>
|
||||
<Text style={styles.logoutText}>退出</Text>
|
||||
</TouchableOpacity>
|
||||
}
|
||||
/>
|
||||
<Text style={styles.syncHint}>
|
||||
歌单选择、播放进度等配置已同步到云端,跨设备可用。
|
||||
</Text>
|
||||
</>
|
||||
) : (
|
||||
<SettingItem
|
||||
title="登录以同步配置"
|
||||
subtitle="跨设备同步歌单选择、播放进度等"
|
||||
onPress={onLoginPress}
|
||||
showChevron={true}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>关于</Text>
|
||||
<View style={styles.aboutCard}>
|
||||
@@ -263,9 +316,10 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
|
||||
</View>
|
||||
<SettingItem
|
||||
title="版本"
|
||||
subtitle="1.0.0"
|
||||
subtitle="1.0.0 (2)"
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
@@ -275,6 +329,12 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
backgroundColor: theme.colors.background,
|
||||
},
|
||||
scrollContent: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContentInner: {
|
||||
paddingBottom: theme.spacing.xl,
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: theme.spacing.md,
|
||||
paddingVertical: theme.spacing.sm,
|
||||
@@ -399,4 +459,22 @@ const styles = StyleSheet.create({
|
||||
lineHeight: 22,
|
||||
color: theme.colors.textSecondary,
|
||||
},
|
||||
logoutBtn: {
|
||||
paddingHorizontal: theme.spacing.sm,
|
||||
paddingVertical: theme.spacing.xs,
|
||||
borderRadius: theme.borderRadius.sm,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.colors.error,
|
||||
},
|
||||
logoutText: {
|
||||
fontSize: 13,
|
||||
color: theme.colors.error,
|
||||
},
|
||||
syncHint: {
|
||||
fontSize: 12,
|
||||
lineHeight: 18,
|
||||
color: theme.colors.textSecondary,
|
||||
paddingHorizontal: theme.spacing.md,
|
||||
paddingVertical: theme.spacing.xs,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user