1import React, {useEffect} from 'react'; 2import {StyleSheet, View} from 'react-native'; 3import StatusBar from '@/components/base/statusBar'; 4import MusicBar from '@/components/musicBar'; 5import Header from './components/header'; 6import Body from './components/body'; 7import {useAtom, useSetAtom} from 'jotai'; 8import {initQueryResult, queryResultAtom, scrollToTopAtom} from './store/atoms'; 9import ComplexAppBar from '@/components/base/ComplexAppBar'; 10import {ROUTE_PATH, useNavigate, useParams} from '@/entry/router'; 11import VerticalSafeAreaView from '@/components/base/verticalSafeAreaView'; 12import globalStyle from '@/constants/globalStyle'; 13import useOrientation from '@/hooks/useOrientation'; 14 15export default function ArtistDetail() { 16 const [queryResult, setQueryResult] = useAtom(queryResultAtom); 17 const {artistItem} = useParams<'artist-detail'>(); 18 const setScrollToTopState = useSetAtom(scrollToTopAtom); 19 const navigate = useNavigate(); 20 const orientation = useOrientation(); 21 22 useEffect(() => { 23 return () => { 24 setQueryResult(initQueryResult); 25 setScrollToTopState(true); 26 }; 27 }, []); 28 29 return ( 30 <VerticalSafeAreaView style={globalStyle.fwflex1}> 31 <StatusBar /> 32 <ComplexAppBar 33 title="作者" 34 menuOptions={[ 35 { 36 title: '批量编辑单曲', 37 icon: 'playlist-edit', 38 onPress() { 39 navigate(ROUTE_PATH.MUSIC_LIST_EDITOR, { 40 musicList: queryResult?.music?.data ?? [], 41 musicSheet: { 42 title: `${artistItem.name} - 单曲`, 43 }, 44 }); 45 }, 46 }, 47 ]} 48 /> 49 <View 50 style={ 51 orientation === 'horizonal' 52 ? style.horizonal 53 : globalStyle.flex1 54 }> 55 <Header neverFold={orientation === 'horizonal'} /> 56 <Body /> 57 </View> 58 59 <MusicBar /> 60 </VerticalSafeAreaView> 61 ); 62} 63 64const style = StyleSheet.create({ 65 horizonal: { 66 flexDirection: 'row', 67 flex: 1, 68 }, 69}); 70