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