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