xref: /MusicFree/src/pages/home/components/drawer/index.tsx (revision 94b17902d7c8c6dce1ad263d5d77ec62a072dc67) 
1import React from 'react';
2import {StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import {DrawerContentScrollView} from '@react-navigation/drawer';
5import {Button, Card} from 'react-native-paper';
6import ListItem from '@/components/base/listItem';
7import {ROUTE_PATH, useNavigate} from '@/entry/router';
8import ThemeText from '@/components/base/themeText';
9import PageBackground from '@/components/base/pageBackground';
10import DeviceInfo from 'react-native-device-info';
11import NativeUtils from '@/native/utils';
12import MusicQueue from '@/core/musicQueue';
13
14export default function HomeDrawer(props: any) {
15    const navigate = useNavigate();
16    function navigateToSetting(settingType: string) {
17        navigate(ROUTE_PATH.SETTING, {
18            type: settingType,
19        });
20    }
21
22    const basicSetting = [
23        {
24            icon: 'cog-outline',
25            title: '基本设置',
26            onPress: () => {
27                navigateToSetting('basic');
28            },
29        },
30        {
31            icon: 'language-javascript',
32            title: '插件设置',
33            onPress: () => {
34                navigateToSetting('plugin');
35            },
36        },
37        {
38            icon: 'tshirt-v-outline',
39            title: '主题设置',
40            onPress: () => {
41                navigateToSetting('theme');
42            },
43        },
44        {
45            icon: 'backup-restore',
46            title: '备份与恢复',
47            onPress: () => {
48                navigateToSetting('backup');
49            },
50        },
51        {
52            icon: 'information-outline',
53            title: '关于',
54            onPress: () => {
55                navigateToSetting('about');
56            },
57        },
58    ] as const;
59
60    return (
61        <>
62            <PageBackground />
63            <DrawerContentScrollView {...[props]} style={style.scrollWrapper}>
64                <View style={style.header}>
65                    <ThemeText fontSize="appbar" fontWeight="bold">
66                        {DeviceInfo.getApplicationName()}
67                    </ThemeText>
68                    {/* <IconButton icon={'qrcode-scan'} size={rpx(36)} /> */}
69                </View>
70                <Card style={style.card}>
71                    <Card.Title
72                        title={
73                            <ThemeText fontSize="description">设置</ThemeText>
74                        }
75                    />
76                    <Card.Content style={style.cardContent}>
77                        {basicSetting.map(item => (
78                            <ListItem
79                                itemHeight={rpx(110)}
80                                key={item.title}
81                                left={{
82                                    icon: {
83                                        name: item.icon,
84                                        size: 'normal',
85                                        fontColor: 'normal',
86                                    },
87                                    width: rpx(48),
88                                }}
89                                title={item.title}
90                                onPress={item.onPress}
91                            />
92                        ))}
93                    </Card.Content>
94                </Card>
95                <View style={style.bottom}>
96                    <Button
97                        onPress={async () => {
98                            await MusicQueue.reset();
99                            NativeUtils.exitApp();
100                        }}>
101                        <ThemeText>退出</ThemeText>
102                    </Button>
103                </View>
104            </DrawerContentScrollView>
105        </>
106    );
107}
108
109const style = StyleSheet.create({
110    wrapper: {
111        flex: 1,
112        backgroundColor: '#999999',
113    },
114    scrollWrapper: {
115        paddingTop: rpx(12),
116    },
117
118    header: {
119        height: rpx(120),
120        width: '100%',
121        flexDirection: 'row',
122        justifyContent: 'space-between',
123        alignItems: 'center',
124        marginLeft: rpx(24),
125    },
126    card: {
127        backgroundColor: '#eeeeee22',
128    },
129    cardContent: {
130        paddingHorizontal: 0,
131    },
132    bottom: {
133        height: rpx(100),
134        flexDirection: 'row',
135        alignItems: 'center',
136        justifyContent: 'flex-end',
137    },
138});
139