1import React, {useEffect} from 'react'; 2import {StyleSheet} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import {SafeAreaView} from 'react-native-safe-area-context'; 5import StatusBar from '@/components/base/statusBar'; 6import MusicBar from '@/components/musicBar'; 7import Header from './components/header'; 8import Body from './components/body'; 9import {useAtom, useSetAtom} from 'jotai'; 10import {initQueryResult, queryResultAtom, scrollToTopAtom} from './store/atoms'; 11import ComplexAppBar from '@/components/base/ComplexAppBar'; 12import {ROUTE_PATH, useNavigate, useParams} from '@/entry/router'; 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 20 useEffect(() => { 21 return () => { 22 setQueryResult(initQueryResult); 23 setScrollToTopState(true); 24 }; 25 }, []); 26 27 return ( 28 <SafeAreaView style={style.wrapper}> 29 <StatusBar /> 30 <ComplexAppBar 31 title="作者" 32 menuOptions={[ 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 <Header /> 48 <Body /> 49 <MusicBar /> 50 </SafeAreaView> 51 ); 52} 53 54const style = StyleSheet.create({ 55 wrapper: { 56 width: rpx(750), 57 flex: 1, 58 }, 59 body: { 60 flex: 1, 61 }, 62}); 63