feat(zen-box): 新增云端配置同步功能,完善应用构建与配置

本次提交实现了观空禅音应用的核心云端同步功能,包括:
1.  添加用户登录验证接口与本地存储管理
2.  新增云端配置存储与拉取接口,支持跨设备同步歌单、播放进度等设置
3.  新增登录页面与设置页账号管理模块
4.  更新依赖包版本与安卓、iOS打包配置
5.  优化缓存下载逻辑,修复OSS链接编码问题
6.  新增离线模式支持,自动过滤无缓存歌单
7.  新增歌曲排序偏好本地与云端同步功能
This commit is contained in:
yangxiangyuan
2026-07-11 10:57:02 +08:00
parent 33625e3438
commit 6a043687f5
18 changed files with 880 additions and 66 deletions
+80 -2
View File
@@ -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,
},
});