fix: fix style

Author: wkylin

docs/FETCH_REQUESTS.md

@@ -140,7 +140,7 @@ const UserProfile = ({ id }) => {
   const [user, loading, error, refresh] = useGet('/api/user', { id })
 
   if (loading) return <Spin />
-  if (error) return <Alert message={error.message} />
+  if (error) return <Alert title={error.message} />
 
   return (
     <div>

package.json

@@ -387,8 +387,8 @@
     "user-agents": "^1.1.669"
   },
   "engines": {
-    "node": ">=20.12.1",
-    "npm": ">=10.5.0",
+    "node": ">=22.21.0",
+    "npm": ">=11.6.3",
     "yarn": ">=1.22.10"
   },
   "packageManager": "[email protected]",

src/assets/images/music/music00.png

@@ -1,8 +1,8 @@
 import React from 'react'
-import wkylinPng from '@assets/images/wkylin.png'
+import defaultPng from '@assets/images/music/music00.png'
 
 const Track = ({ isPlaying, isActive, activeSong, textColor, secondaryTextColor }) => {
-  const coverArt = activeSong?.coverart ?? wkylinPng
+  const coverArt = activeSong?.coverart ?? defaultPng
   const title = activeSong?.title ?? 'No active Song'
   const subtitle = activeSong?.subtitle ?? 'No active Song'
 

src/assets/images/music/music01.png

@@ -1,30 +1,30 @@
 import heartyAudio from '@assets/audio/hearty.mp3'
 import longnightAudio from '@assets/audio/longnight.mp3'
 import yesterdayAudio from '@assets/audio/yesterday.mp3'
-import heImage from '@assets/images/he.png'
-import springImage from '@assets/images/song.png'
-import xueImage from '@assets/images/xue.png'
+import music01Png from '@assets/images/music/music01.png'
+import music02Png from '@assets/images/music/music02.png'
+import music03Png from '@assets/images/music/music03.png'
 
 export const songData = [
   {
     key: 'song-1',
     title: 'Hearty',
     subtitle: 'Aventure - Hearty',
-    coverart: heImage,
+    coverart: music01Png,
     audioUrl: heartyAudio,
   },
   {
     key: 'song-2',
     title: 'Long Night',
     subtitle: 'Bohdan Hlukhov - Long Night',
-    coverart: springImage,
+    coverart: music02Png,
     audioUrl: longnightAudio,
   },
   {
     key: 'song-3',
     title: 'Yesterday',
     subtitle: 'Aventure - Yesterday',
-    coverart: xueImage,
+    coverart: music03Png,
     audioUrl: yesterdayAudio,
   },
 ]

src/assets/images/music/music02.png

@@ -66,8 +66,21 @@ const MusicPlayer = () => {
   const activeColor = themeSettings.colorPrimary || '#1677ff'
 
   return (
-    <>
-      <div className={`animate-slideup absolute right-0 bottom-0 left-0 z-10 flex h-20 sm:h-28 ${bgClass}`}>
+    <div className="flex h-full flex-col">
+      <div className="flex-1">
+        <Playlist
+          songs={currentSongs}
+          currentIndex={currentIndex}
+          isPlaying={isPlaying}
+          isActive={isActive}
+          onSongClick={handleSongClick}
+          themeMode={themeSettings.themeMode}
+          textColor={textColor}
+          secondaryTextColor={secondaryTextColor}
+          activeColor={activeColor}
+        />
+      </div>
+      <div className={`animate-slideup sticky right-0 bottom-0 left-0 z-10 mt-auto flex h-20 sm:h-28 ${bgClass}`}>
         <div className="relative flex w-full items-center justify-between px-4 sm:px-8 md:px-12">
           <Track
             isPlaying={isPlaying}
@@ -123,18 +136,7 @@ const MusicPlayer = () => {
           />
         </div>
       </div>
-      <Playlist
-        songs={currentSongs}
-        currentIndex={currentIndex}
-        isPlaying={isPlaying}
-        isActive={isActive}
-        onSongClick={handleSongClick}
-        themeMode={themeSettings.themeMode}
-        textColor={textColor}
-        secondaryTextColor={secondaryTextColor}
-        activeColor={activeColor}
-      />
-    </>
+    </div>
   )
 }
 

src/assets/images/music/music03.png

@@ -30,7 +30,7 @@ const FixTabPanel = React.forwardRef(({ style, children, className, ...rest }, r
       }}
     >
       {children}
-      <FloatButton.BackTop target={() => innerRef.current} style={{ right: 20, bottom: 10 }}>
+      <FloatButton.BackTop target={() => innerRef.current} style={{ right: 6, bottom: 2 }}>
         <VerticalAlignTopOutlined style={{ fontSize: 20 }} />
       </FloatButton.BackTop>
     </div>