1import React, {memo} from 'react'; 2import {StyleSheet, View, BackHandler} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import {DrawerContentScrollView} from '@react-navigation/drawer'; 5import ListItem from '@/components/base/listItem'; 6import {ROUTE_PATH, useNavigate} from '@/entry/router'; 7import ThemeText from '@/components/base/themeText'; 8import PageBackground from '@/components/base/pageBackground'; 9import DeviceInfo from 'react-native-device-info'; 10import NativeUtils from '@/native/utils'; 11import MusicQueue from '@/core/musicQueue'; 12import {useTimingClose} from '@/utils/timingClose'; 13 14import timeformat from '@/utils/timeformat'; 15import {showPanel} from '@/components/panels/usePanel'; 16import Divider from '@/components/base/divider'; 17 18const ITEM_HEIGHT = rpx(108); 19function HomeDrawer(props: any) { 20 const navigate = useNavigate(); 21 function navigateToSetting(settingType: string) { 22 navigate(ROUTE_PATH.SETTING, { 23 type: settingType, 24 }); 25 } 26 27 const basicSetting = [ 28 { 29 icon: 'cog-outline', 30 title: '基本设置', 31 onPress: () => { 32 navigateToSetting('basic'); 33 }, 34 }, 35 { 36 icon: 'language-javascript', 37 title: '插件管理', 38 onPress: () => { 39 navigateToSetting('plugin'); 40 }, 41 }, 42 { 43 icon: 'tshirt-v-outline', 44 title: '主题设置', 45 onPress: () => { 46 navigateToSetting('theme'); 47 }, 48 }, 49 ] as const; 50 51 const otherSetting = [ 52 { 53 icon: 'backup-restore', 54 title: '备份与恢复', 55 onPress: () => { 56 navigateToSetting('backup'); 57 }, 58 }, 59 { 60 icon: 'information-outline', 61 title: '关于', 62 onPress: () => { 63 navigateToSetting('about'); 64 }, 65 }, 66 ] as const; 67 68 return ( 69 <> 70 <PageBackground /> 71 <DrawerContentScrollView {...[props]} style={style.scrollWrapper}> 72 <View style={style.header}> 73 <ThemeText fontSize="appbar" fontWeight="bold"> 74 {DeviceInfo.getApplicationName()} 75 </ThemeText> 76 {/* <IconButton icon={'qrcode-scan'} size={rpx(36)} /> */} 77 </View> 78 <View style={style.card}> 79 <ListItem withHorizonalPadding heightType="small"> 80 <ListItem.ListItemText 81 fontSize="subTitle" 82 fontWeight="bold"> 83 设置 84 </ListItem.ListItemText> 85 </ListItem> 86 {basicSetting.map(item => ( 87 <ListItem 88 withHorizonalPadding 89 key={item.title} 90 onPress={item.onPress}> 91 <ListItem.ListItemIcon 92 icon={item.icon} 93 width={rpx(48)} 94 /> 95 <ListItem.Content title={item.title} /> 96 </ListItem> 97 ))} 98 </View> 99 <View style={style.card}> 100 <ListItem withHorizonalPadding heightType="small"> 101 <ListItem.ListItemText 102 fontSize="subTitle" 103 fontWeight="bold"> 104 其他 105 </ListItem.ListItemText> 106 </ListItem> 107 <CountDownItem /> 108 {otherSetting.map(item => ( 109 <ListItem 110 withHorizonalPadding 111 key={item.title} 112 onPress={item.onPress}> 113 <ListItem.ListItemIcon 114 icon={item.icon} 115 width={rpx(48)} 116 /> 117 <ListItem.Content title={item.title} /> 118 </ListItem> 119 ))} 120 </View> 121 122 <Divider /> 123 <ListItem 124 withHorizonalPadding 125 onPress={() => { 126 // 仅安卓生效 127 BackHandler.exitApp(); 128 }}> 129 <ListItem.ListItemIcon 130 icon={'home-outline'} 131 width={rpx(48)} 132 /> 133 <ListItem.Content title={'返回桌面'} /> 134 </ListItem> 135 <ListItem 136 withHorizonalPadding 137 onPress={async () => { 138 await MusicQueue.reset(); 139 NativeUtils.exitApp(); 140 }}> 141 <ListItem.ListItemIcon icon={'power'} width={rpx(48)} /> 142 <ListItem.Content title={'退出应用'} /> 143 </ListItem> 144 </DrawerContentScrollView> 145 </> 146 ); 147} 148 149export default memo(HomeDrawer, () => true); 150 151const style = StyleSheet.create({ 152 wrapper: { 153 flex: 1, 154 backgroundColor: '#999999', 155 }, 156 scrollWrapper: { 157 paddingTop: rpx(12), 158 }, 159 160 header: { 161 height: rpx(120), 162 width: '100%', 163 flexDirection: 'row', 164 justifyContent: 'space-between', 165 alignItems: 'center', 166 marginLeft: rpx(24), 167 }, 168 card: { 169 marginBottom: rpx(24), 170 }, 171 cardContent: { 172 paddingHorizontal: 0, 173 }, 174 175 /** 倒计时 */ 176 countDownText: { 177 height: ITEM_HEIGHT, 178 textAlignVertical: 'center', 179 }, 180}); 181 182function _CountDownItem() { 183 const countDown = useTimingClose(); 184 185 return ( 186 <ListItem 187 withHorizonalPadding 188 onPress={() => { 189 showPanel('TimingClose'); 190 }}> 191 <ListItem.ListItemIcon icon="timer-outline" width={rpx(48)} /> 192 <ListItem.Content title="定时关闭" /> 193 <ListItem.ListItemText position="right" fontSize="subTitle"> 194 {countDown ? timeformat(countDown) : ''} 195 </ListItem.ListItemText> 196 </ListItem> 197 ); 198} 199 200const CountDownItem = memo(_CountDownItem, () => true); 201