1import React, {memo} from 'react'; 2import {StyleSheet, View, BackHandler, Platform} 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 ]; 61 62 if (Platform.OS === 'android') { 63 otherSetting.push({ 64 icon: 'cellphone-key', 65 title: '权限管理', 66 onPress: () => { 67 navigate(ROUTE_PATH.PERMISSIONS); 68 }, 69 }); 70 } 71 72 return ( 73 <> 74 <PageBackground /> 75 <DrawerContentScrollView {...[props]} style={style.scrollWrapper}> 76 <View style={style.header}> 77 <ThemeText fontSize="appbar" fontWeight="bold"> 78 {DeviceInfo.getApplicationName()} 79 </ThemeText> 80 {/* <IconButton icon={'qrcode-scan'} size={rpx(36)} /> */} 81 </View> 82 <View style={style.card}> 83 <ListItem withHorizonalPadding heightType="smallest"> 84 <ListItem.ListItemText 85 fontSize="subTitle" 86 fontWeight="bold"> 87 设置 88 </ListItem.ListItemText> 89 </ListItem> 90 {basicSetting.map(item => ( 91 <ListItem 92 withHorizonalPadding 93 key={item.title} 94 onPress={item.onPress}> 95 <ListItem.ListItemIcon 96 icon={item.icon} 97 width={rpx(48)} 98 /> 99 <ListItem.Content title={item.title} /> 100 </ListItem> 101 ))} 102 </View> 103 <View style={style.card}> 104 <ListItem withHorizonalPadding heightType="smallest"> 105 <ListItem.ListItemText 106 fontSize="subTitle" 107 fontWeight="bold"> 108 其他 109 </ListItem.ListItemText> 110 </ListItem> 111 <CountDownItem /> 112 {otherSetting.map(item => ( 113 <ListItem 114 withHorizonalPadding 115 key={item.title} 116 onPress={item.onPress}> 117 <ListItem.ListItemIcon 118 icon={item.icon} 119 width={rpx(48)} 120 /> 121 <ListItem.Content title={item.title} /> 122 </ListItem> 123 ))} 124 </View> 125 126 <View style={style.card}> 127 <ListItem withHorizonalPadding heightType="smallest"> 128 <ListItem.ListItemText 129 fontSize="subTitle" 130 fontWeight="bold"> 131 软件 132 </ListItem.ListItemText> 133 </ListItem> 134 135 <ListItem 136 withHorizonalPadding 137 key={'update'} 138 onPress={() => { 139 checkUpdateAndShowResult(true); 140 }}> 141 <ListItem.ListItemIcon 142 icon={'update'} 143 width={rpx(48)} 144 /> 145 <ListItem.Content title="检查更新" /> 146 <ListItem.ListItemText 147 position="right" 148 fontSize="subTitle"> 149 {`当前版本: ${deviceInfoModule.getVersion()}`} 150 </ListItem.ListItemText> 151 </ListItem> 152 <ListItem 153 withHorizonalPadding 154 key={'about'} 155 onPress={() => { 156 navigateToSetting('about'); 157 }}> 158 <ListItem.ListItemIcon 159 icon={'information-outline'} 160 width={rpx(48)} 161 /> 162 <ListItem.Content 163 title={`关于 ${deviceInfoModule.getApplicationName()}`} 164 /> 165 </ListItem> 166 </View> 167 168 <Divider /> 169 <ListItem 170 withHorizonalPadding 171 onPress={() => { 172 // 仅安卓生效 173 BackHandler.exitApp(); 174 }}> 175 <ListItem.ListItemIcon 176 icon={'home-outline'} 177 width={rpx(48)} 178 /> 179 <ListItem.Content title={'返回桌面'} /> 180 </ListItem> 181 <ListItem 182 withHorizonalPadding 183 onPress={async () => { 184 await TrackPlayer.reset(); 185 NativeUtils.exitApp(); 186 }}> 187 <ListItem.ListItemIcon icon={'power'} width={rpx(48)} /> 188 <ListItem.Content title={'退出应用'} /> 189 </ListItem> 190 </DrawerContentScrollView> 191 </> 192 ); 193} 194 195export default memo(HomeDrawer, () => true); 196 197const style = StyleSheet.create({ 198 wrapper: { 199 flex: 1, 200 backgroundColor: '#999999', 201 }, 202 scrollWrapper: { 203 paddingTop: rpx(12), 204 }, 205 206 header: { 207 height: rpx(120), 208 width: '100%', 209 flexDirection: 'row', 210 justifyContent: 'space-between', 211 alignItems: 'center', 212 marginLeft: rpx(24), 213 }, 214 card: { 215 marginBottom: rpx(24), 216 }, 217 cardContent: { 218 paddingHorizontal: 0, 219 }, 220 221 /** 倒计时 */ 222 countDownText: { 223 height: ITEM_HEIGHT, 224 textAlignVertical: 'center', 225 }, 226}); 227 228function _CountDownItem() { 229 const countDown = useTimingClose(); 230 231 return ( 232 <ListItem 233 withHorizonalPadding 234 onPress={() => { 235 showPanel('TimingClose'); 236 }}> 237 <ListItem.ListItemIcon icon="timer-outline" width={rpx(48)} /> 238 <ListItem.Content title="定时关闭" /> 239 <ListItem.ListItemText position="right" fontSize="subTitle"> 240 {countDown ? timeformat(countDown) : ''} 241 </ListItem.ListItemText> 242 </ListItem> 243 ); 244} 245 246const CountDownItem = memo(_CountDownItem, () => true); 247