feat: updates

packages/web/pages/New/Album.tsx

@@ -0,0 +1,50 @@
+import TrackListHeader from '@/web/components/New/TrackListHeader'
+import useAlbum from '@/web/api/hooks/useAlbum'
+import useTracks from '@/web/api/hooks/useTracks'
+import { useParams } from 'react-router-dom'
+import PageTransition from '@/web/components/New/PageTransition'
+import TrackList from '@/web/components/New/TrackList'
+import { player } from '@/web/store'
+import toast from 'react-hot-toast'
+import { useSnapshot } from 'valtio'
+
+const Album = () => {
+  const params = useParams()
+  const { data: album, isLoading } = useAlbum({
+    id: Number(params.id) || 0,
+  })
+
+  const { data: tracks } = useTracks({
+    ids: album?.songs?.map(track => track.id) ?? [],
+  })
+
+  const playerSnapshot = useSnapshot(player)
+
+  const onPlay = async (trackID: number | null = null) => {
+    if (!album?.album.id) {
+      toast('无法播放专辑，该专辑不存在')
+      return
+    }
+    if (
+      playerSnapshot.trackListSource?.type === 'album' &&
+      playerSnapshot.trackListSource?.id === album.album.id
+    ) {
+      await player.playTrack(trackID ?? album.songs[0].id)
+      return
+    }
+    await player.playAlbum(album.album.id, trackID)
+  }
+
+  return (
+    <PageTransition>
+      <TrackListHeader album={album?.album} onPlay={() => onPlay()} />
+      <TrackList
+        tracks={tracks?.songs}
+        className='z-10 mt-20'
+        onPlay={onPlay}
+      />
+    </PageTransition>
+  )
+}
+
+export default Album

packages/web/pages/New/Discover.tsx

@@ -0,0 +1,12 @@
+import CoverWall from '@/web/components/New/CoverWall'
+import PageTransition from '@/web/components/New/PageTransition'
+
+const Discover = () => {
+  return (
+    <PageTransition disableEnterAnimation={true}>
+      <CoverWall />
+    </PageTransition>
+  )
+}
+
+export default Discover

packages/web/pages/New/My.tsx

@@ -0,0 +1,58 @@
+import { css, cx } from '@emotion/css'
+import PlayLikedSongsCard from '@/web/components/New/PlayLikedSongsCard'
+import PageTransition from '@/web/components/New/PageTransition'
+import useUserArtists from '@/web/api/hooks/useUserArtists'
+import ArtistRow from '@/web/components/New/ArtistRow'
+import Tabs from '@/web/components/New/Tabs'
+import { useState } from 'react'
+import CoverRow from '@/web/components/New/CoverRow'
+import useUserPlaylists from '@/web/api/hooks/useUserPlaylists'
+import useUserAlbums from '@/web/api/hooks/useUserAlbums'
+
+const tabs = [
+  {
+    id: 'playlists',
+    name: 'Playlists',
+  },
+  {
+    id: 'albums',
+    name: 'Albums',
+  },
+  {
+    id: 'artists',
+    name: 'Artists',
+  },
+  {
+    id: 'videos',
+    name: 'Videos',
+  },
+]
+
+const My = () => {
+  const { data: artists } = useUserArtists()
+  const { data: playlists } = useUserPlaylists()
+  const { data: albums } = useUserAlbums()
+  const [selectedTab, setSelectedTab] = useState(tabs[0].id)
+
+  return (
+    <PageTransition>
+      <div className='grid grid-cols-1 gap-10'>
+        <PlayLikedSongsCard />
+        <div>
+          <ArtistRow artists={artists?.data} title='ARTISTS' />
+        </div>
+
+        <div>
+          <Tabs
+            tabs={tabs}
+            value={selectedTab}
+            onChange={(id: string) => setSelectedTab(id)}
+          />
+          <CoverRow albums={albums?.data} className='mt-6' />
+        </div>
+      </div>
+    </PageTransition>
+  )
+}
+
+export default My