1import React from 'react'; 2import VerticalSafeAreaView from '@/components/base/verticalSafeAreaView'; 3import globalStyle from '@/constants/globalStyle'; 4import StatusBar from '@/components/base/statusBar'; 5import musicHistory from '@/core/musicHistory'; 6import MusicList from '@/components/musicList'; 7import {musicHistorySheetId} from '@/constants/commonConst'; 8import MusicBar from '@/components/musicBar'; 9import AppBar from '@/components/base/appBar'; 10import {ROUTE_PATH, useNavigate} from '@/core/router'; 11 12export default function History() { 13 const musicHistoryList = musicHistory.useMusicHistory(); 14 15 const navigate = useNavigate(); 16 17 return ( 18 <VerticalSafeAreaView style={globalStyle.fwflex1}> 19 <StatusBar /> 20 <AppBar 21 menu={[ 22 { 23 icon: 'trash-outline', 24 title: '清空播放记录', 25 onPress() { 26 if (musicHistoryList.length) { 27 musicHistory.clearMusic(); 28 } 29 }, 30 }, 31 { 32 icon: 'pencil-square', 33 title: '编辑', 34 onPress() { 35 navigate(ROUTE_PATH.MUSIC_LIST_EDITOR, { 36 musicList: musicHistoryList, 37 musicSheet: { 38 id: musicHistorySheetId, 39 title: '播放记录', 40 }, 41 }); 42 }, 43 }, 44 ]}> 45 播放记录 46 </AppBar> 47 <MusicList 48 musicList={musicHistoryList} 49 showIndex 50 musicSheet={{ 51 id: musicHistorySheetId, 52 title: '播放记录', 53 musicList: musicHistoryList, 54 }} 55 /> 56 <MusicBar /> 57 </VerticalSafeAreaView> 58 ); 59} 60