update(Player): UI

src/components/AudioPlayer/Player.tsx

@@ -243,9 +243,9 @@ export default function AudioPlayer({
   }, []);
 
   return (
-    <div className={`flex justify-between w-1200px h-full pt-6px ${className}`}>
+    <div className={`flex justify-between w-1200px h-full ${className}`}>
       {/* left */}
-      <div className="flex flex-row w-fit h-fit mt-22px">
+      <div className="flex flex-row w-fit h-fit mt-25px">
         {/* 专辑封面 */}
         <div
           className={`relative flex-shrink-0 w-48px h-48px rounded-3px bg-[#000] overflow-hidden cursor-pointer ${showCard ? styles.album_pic_overlay_collapse : styles.album_pic_overlay_expand}`}
@@ -258,26 +258,20 @@ export default function AudioPlayer({
 
         {/* 歌曲信息 */}
         <div className="w-183px ml-15px cursor-default">
-          {/* <AutoScrollContainer key={audio?.id} auto hover width="140px" speed={50}> */}
-          {/* <div className="w-auto h-auto"> */}
-          <p className="mt-2px text-15px leading-24px text-base text-overflow">{audio?.title ?? ''}</p>
-          <p className="text-12px leading-18px mt-2px text-[rgba(0,0,0,0.7)] text-overflow">{`${audio?.artist}/${audio?.album}`}</p>
-          {/* </div> */}
-          {/* </AutoScrollContainer> */}
+          <p className="mt-4px text-15px leading-21px text-base text-overflow">{audio?.title ?? ''}</p>
+          <p className="text-12px leading-17px mt-4px text-[rgba(0,0,0,0.7)] text-overflow">{`${audio?.artist}/${audio?.album}`}</p>
         </div>
       </div>
 
-      {/* center */}
-      <div className="flex flex-col items-center h-full">
-        {/* 按钮 */}
-        <div className="flex items-center gap-18px h-fit mt-9px">
+      <div className="flex items-center h-full pt-10px">
+        {/* 上一首、播放、下一首 */}
+        <div className="flex items-center gap-18px h-fit mx-24px">
           <NextButton className="rotate-180" onClick={throttle(() => handleSwitchAudio(-1), 200)} />
           <PlayButton playState={playState} size={38} onClick={throttle(() => setPlayState(!playState), 200)} />
           <NextButton onClick={throttle(() => handleSwitchAudio(1), 200)} />
         </div>
 
-        {/* 播放进度 */}
-        <div className="flex items-center justify-between h-fit mt-6px gap-6px">
+        <div className="flex items-center justify-between h-fit">
           {/* 播放时长 */}
           <span className="block w-27px text-11px leading-14px text-right text-#000">
             {secondToDate(trackProgress)}
@@ -292,7 +286,7 @@ export default function AudioPlayer({
             onChangeDraging={(value: boolean) => {
               isDrag.current = value;
             }}
-            className="w-710px"
+            className="w-710px ml-6px mr-14px"
           />
 
           {/* 总时长 */}
@@ -301,25 +295,24 @@ export default function AudioPlayer({
       </div>
 
       {/* right */}
-      <div className="flex items-end h-full">
-        <div className="flex h-full items-end h-fit mb-21px gap-18px">
+      <div className="flex items-end h-full ml-60px pb-28px">
+        <div className="flex h-full items-end h-fit gap-18px">
           {/* 收藏歌曲 */}
-          {
-            <CollectButton
-              key={audio?.id ?? '0'}
-              id={audio?.id ?? '0'}
-              active={audio?.haveCollect ?? false}
-              collectType="0"
-              color="dark"
-            />
-          }
+          <CollectButton
+            key={audio?.id ?? '0'}
+            id={audio?.id ?? '0'}
+            active={audio?.haveCollect ?? false}
+            collectType="0"
+            color="dark"
+          />
+
           {/* 播放顺序 */}
           <OrderButton
             order={playOrder}
             onClick={handleChangeOrder}
-            className={`mb-1px ${playListInfo.type === 'fm' && 'hidden'}`}
+            className={`${playListInfo.type === 'fm' && 'hidden'}`}
           />
-          <VolumeButton value={volume} onChange={handleChangeVolumn} className="mb-1px" />
+          <VolumeButton value={volume} onChange={handleChangeVolumn} />
         </div>
       </div>
     </div>

src/components/AudioPlayer/PlayerBar.tsx

@@ -59,7 +59,7 @@ const PlayerBar = ({ className }: { className?: string }) => {
     <div className={`fixed bottom-0 w-full h-auto z-10 ${className}`}>
       {/* 播放器 */}
       <div
-        className="fixed bottom-0 w-full h-[88px] bg-[#fff] bg-op-80 backdrop-blur-[20px] shadow-lg shadow-black-[0_0_10px] z-10 transition-bottom duration-600`"
+        className="fixed bottom-0 w-full h-[90px] bg-[#fff] bg-op-80 backdrop-blur-[20px] shadow-lg shadow-black-[0_0_10px] z-10 transition-bottom duration-600`"
         style={{ bottom: audioId || showCard ? 0 : -80 }}
       >
         <Player className="mx-auto" onSwitchShowCard={() => setShowCard(!showCard)} />

src/components/AudioPlayer/widget/Volume.tsx

@@ -41,12 +41,12 @@ export default function Volume({
 
   return (
     <div
-      className={`flex flex-col justify-between relative w-22px cursor-pointer ${hover ? 'h-148px' : 'h-22px'} ${className}`}
+      className={`flex flex-col justify-between relative w-22px cursor-pointer ${hover ? 'h-150px' : 'h-22px'} ${className}`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >
       {/* 音量条 */}
-      <VolumeBar value={value} className={`${!hover && '!hidden'}  transition-all`} onChange={onChange} />
+      <VolumeBar value={value} className={`${!hover && '!hidden'} transition-all`} onChange={onChange} />
       {/* 按钮 */}
       <ButtonProvide className="group" onClick={handleMute}>
         {value >= 50 ? (