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