chore: 用esbuild代替vite来打包main

2025-12-16 21:28:06 +00:00 · 2022-03-29 16:52:53 +08:00 · 2022-03-29 16:52:53 +08:00 · c4219afd3d
commit c4219afd3d
parent b4590c3c34
152 changed files with 669 additions and 747 deletions
--- a/src/renderer/pages/Artist.tsx
+++ b/src/renderer/pages/Artist.tsx
@ -0,0 +1,196 @@
+import Button, { Color as ButtonColor } from '@/components/Button'
+import SvgIcon from '@/components/SvgIcon'
+import Cover from '@/components/Cover'
+import useArtist from '@/hooks/useArtist'
+import useArtistAlbums from '@/hooks/useArtistAlbums'
+import { resizeImage } from '@/utils/common'
+import dayjs from 'dayjs'
+import TracksGrid from '@/components/TracksGrid'
+import CoverRow, { Subtitle } from '@/components/CoverRow'
+import Skeleton from '@/components/Skeleton'
+import useTracks from '@/hooks/useTracks'
+
+const Header = ({ artist }: { artist: Artist | undefined }) => {
+  const coverImage = resizeImage(artist?.img1v1Url || '', 'md')
+
+  return (
+    <>
+      <div className='absolute top-0 left-0 z-0 h-[24rem] w-full overflow-hidden'>
+        {coverImage && (
+          <>
+            <img src={coverImage} className='absolute  w-full blur-[100px]' />
+            <img src={coverImage} className='absolute w-full blur-[100px]' />
+          </>
+        )}
+        <div className='absolute top-0 h-full w-full bg-gradient-to-b from-white/80 to-white dark:from-black/50 dark:to-[#1d1d1d]'></div>
+      </div>
+
+      <div className='relative mt-6 overflow-hidden rounded-2xl bg-gray-500/10 dark:bg-gray-800/20'>
+        <div className='flex h-[26rem] justify-center overflow-hidden'>
+          <img src={coverImage} className='aspect-square brightness-[.5]' />
+          <img src={coverImage} className='aspect-square brightness-[.5]' />
+          <img src={coverImage} />
+          <img src={coverImage} className='aspect-square brightness-[.5]' />
+          <img src={coverImage} className='aspect-square brightness-[.5]' />
+        </div>
+
+        <div className='absolute right-0 left-0 top-[18rem] h-32 bg-gradient-to-t  from-[#222]/60 to-transparent'></div>
+
+        <div className='absolute top-0 right-0 left-0 flex h-[26rem] items-end justify-between p-8 pb-6'>
+          <div className='text-7xl font-bold text-white'>{artist?.name}</div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const LatestRelease = ({
+  album,
+  isLoading,
+}: {
+  album: Album | undefined
+  isLoading: boolean
+}) => {
+  return (
+    <div>
+      <div className='mb-6 text-2xl font-semibold text-gray-800 dark:text-white'>
+        最新发行
+      </div>
+      <div className='flex-grow rounded-xl '>
+        {isLoading ? (
+          <Skeleton className='aspect-square w-full rounded-xl'></Skeleton>
+        ) : (
+          <Cover imageUrl={album?.picUrl ?? ''} showPlayButton={true} />
+        )}
+        <div className='line-clamp-2  line-clamp-1 mt-2 font-semibold leading-tight decoration-gray-600 decoration-2 hover:underline  dark:text-white dark:decoration-gray-200'>
+          {album?.name}
+        </div>
+        <div className='text-[12px] text-gray-500 dark:text-gray-400'>
+          {album?.type} · {dayjs(album?.publishTime || 0).year()}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const PopularTracks = ({
+  tracks,
+  isLoadingArtist,
+}: {
+  tracks: Track[] | undefined
+  isLoadingArtist: boolean
+}) => {
+  const { data: tracksWithExtraInfo } = useTracks({
+    ids: tracks?.slice(0, 10)?.map(t => t.id) ?? [],
+  })
+
+  return (
+    <div>
+      <div className='mb-6 text-2xl font-semibold text-gray-800 dark:text-white'>
+        热门歌曲
+      </div>
+      <div className='rounded-xl'>
+        <TracksGrid
+          tracks={tracksWithExtraInfo?.songs ?? tracks?.slice(0, 10) ?? []}
+          isSkeleton={isLoadingArtist}
+        />
+      </div>
+    </div>
+  )
+}
+
+const Artist = () => {
+  const params = useParams()
+
+  const { data: artist, isLoading: isLoadingArtist } = useArtist({
+    id: Number(params.id) || 0,
+  })
+
+  const { data: albumsRaw, isLoading: isLoadingAlbums } = useArtistAlbums({
+    id: Number(params.id) || 0,
+    limit: 1000,
+  })
+
+  const albums = useMemo(() => {
+    if (!albumsRaw?.hotAlbums) return []
+    const albums: Album[] = []
+    albumsRaw.hotAlbums.forEach(album => {
+      if (album.type !== '专辑') return false
+      if (['混音版', '精选集', 'Remix'].includes(album.subType)) return false
+
+      // No singles
+      if (album.size <= 1) return false
+
+      // No remixes
+      if (
+        /(\(|\[)(.*)(Remix|remix)(.*)(\)|\])/.test(
+          album.name.toLocaleLowerCase()
+        )
+      ) {
+        return false
+      }
+
+      // If have same name album only keep the Explicit version
+      const sameNameAlbumIndex = albums.findIndex(a => a.name === album.name)
+      if (sameNameAlbumIndex !== -1) {
+        if (album.mark === 1056768) albums[sameNameAlbumIndex] = album
+        return
+      }
+
+      albums.push(album)
+    })
+    return albums
+  }, [albumsRaw?.hotAlbums])
+
+  const singles = useMemo(() => {
+    if (!albumsRaw?.hotAlbums) return []
+    const albumsIds = albums.map(album => album.id)
+    return albumsRaw.hotAlbums.filter(
+      album => albumsIds.includes(album.id) === false
+    )
+  }, [albums, albumsRaw?.hotAlbums])
+
+  return (
+    <div>
+      <Header artist={artist?.artist} />
+
+      <div className='mt-12 grid h-[20rem] grid-cols-[14rem,_auto] grid-rows-1 gap-16 px-2'>
+        <LatestRelease
+          album={albumsRaw?.hotAlbums[0]}
+          isLoading={isLoadingAlbums}
+        />
+
+        <PopularTracks
+          tracks={artist?.hotSongs}
+          isLoadingArtist={isLoadingArtist}
+        />
+      </div>
+
+      {/* Albums */}
+      {albums.length !== 0 && (
+        <div className='mt-20 px-2'>
+          <div className='mb-6 text-2xl font-semibold text-gray-800 dark:text-white'>
+            专辑
+          </div>
+          <CoverRow
+            albums={albums.slice(0, 10)}
+            subtitle={Subtitle.TYPE_RELEASE_YEAR}
+          />
+        </div>
+      )}
+
+      {/* Singles/EP */}
+      <div className='mt-16 px-2'>
+        <div className='mb-6 text-2xl font-semibold text-gray-800 dark:text-white'>
+          单曲和EP
+        </div>
+        <CoverRow
+          albums={singles.slice(0, 5)}
+          subtitle={Subtitle.TYPE_RELEASE_YEAR}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Artist