From 8e257b70f7b36452a8899de31183f95c80e7f70a Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Mon, 29 Apr 2024 14:13:42 +0800
Subject: [PATCH] update(Player): styles

---
 src/components/AudioPlayer/Player.tsx         | 14 ++++++----
 src/components/AudioPlayer/widget/Order.tsx   | 26 +++++++++----------
 src/components/AudioPlayer/widget/Volume.tsx  |  5 ++--
 .../AudioPlayer/widget/VolumeBar.tsx          | 24 +++++++++--------
 .../AudioPlayer/widget/index.module.css       | 26 ++++++++++++++-----
 src/components/Icon/heart.module.css          | 14 +++++++---
 uno.config.ts                                 | 17 ------------
 7 files changed, 69 insertions(+), 57 deletions(-)

diff --git a/src/components/AudioPlayer/Player.tsx b/src/components/AudioPlayer/Player.tsx
index 9621f2b..7a7dac5 100644
--- a/src/components/AudioPlayer/Player.tsx
+++ b/src/components/AudioPlayer/Player.tsx
@@ -212,9 +212,9 @@ export default function AudioPlayer({
           </div>
 
           {/* 播放进度 */}
-          <div className="flex items-end justify-between h-fit mt-3px gap-6px">
+          <div className="flex items-end justify-between h-fit mt-6px gap-6px">
             {/* 播放时长 */}
-            <span className="block w-27px mt-1px text-10px leading-14px text-center text-#000">
+            <span className="block w-27px text-10px leading-14px text-center text-#000">
               {secondToDate(trackProgress)}
             </span>
 
@@ -226,7 +226,7 @@ export default function AudioPlayer({
             />
 
             {/* 总时长 */}
-            <span className="block w-27px mt-1px text-10px leading-14px text-center text-#000">
+            <span className="block w-27px text-10px leading-14px text-center text-#000">
               {secondToDate(duration || 0)}
             </span>
           </div>
@@ -238,8 +238,12 @@ export default function AudioPlayer({
             {/* 收藏歌曲 */}
             {<CollectButton id={audio.id || '0'} active={audio.haveCollect} collectType="0" color="dark" />}
             {/* 播放顺序 */}
-            {playListInfo.type !== 'fm' && <OrderButton order={playOrder} onClick={handleChangeOrder} />}
-            <VolumeButton value={volume} onChange={handleChangeVolumn} />
+            <OrderButton
+              order={playOrder}
+              onClick={handleChangeOrder}
+              className={`mb-1px ${playListInfo.type === 'fm' && 'hidden'}`}
+            />
+            <VolumeButton value={volume} onChange={handleChangeVolumn} className="mb-1px" />
           </div>
         </div>
       </div>
diff --git a/src/components/AudioPlayer/widget/Order.tsx b/src/components/AudioPlayer/widget/Order.tsx
index b0bd2f9..ee42348 100644
--- a/src/components/AudioPlayer/widget/Order.tsx
+++ b/src/components/AudioPlayer/widget/Order.tsx
@@ -24,22 +24,22 @@ export default function Order({
   // ));
 
   return (
-    <ButtonProvide className={className} onClick={onClick}>
+    <ButtonProvide className={`group ${className}`} onClick={onClick}>
       {orderList.find((item) => item.value === order)?.icon ?? null}
     </ButtonProvide>
   );
 }
 
 const ListLoop = () => (
-  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="group">
+  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      className="fill-[rgba(0,0,0,70)] group-hover:fill-[rgba(0,0,0,0.95)] transition-all"
+      className="fill-#000/70 group-hover:fill-#000/95 transition-all"
       fillRule="evenodd"
       clipRule="evenodd"
       d="M18.5303 1.46967C18.2374 1.17678 17.7626 1.17678 17.4697 1.46967C17.1768 1.76256 17.1768 2.23744 17.4697 2.53033L19.1893 4.25H8C4.82436 4.25 2.25 6.82436 2.25 10V12C2.25 12.4142 2.58579 12.75 3 12.75C3.41421 12.75 3.75 12.4142 3.75 12V10C3.75 7.65279 5.65279 5.75 8 5.75H19.1893L17.4697 7.46967C17.1768 7.76256 17.1768 8.23744 17.4697 8.53033C17.7626 8.82322 18.2374 8.82322 18.5303 8.53033L21.5303 5.53033C21.6768 5.38388 21.75 5.19194 21.75 5C21.75 4.89831 21.7298 4.80134 21.6931 4.71291C21.6565 4.62445 21.6022 4.54158 21.5303 4.46967L18.5303 1.46967Z"
     />
     <path
-      className="fill-[rgba(0,0,0,70)] group-hover:fill-[rgba(0,0,0,0.95)] transition-all"
+      className="fill-#000/70 group-hover:fill-#000/95 transition-all"
       fillRule="evenodd"
       clipRule="evenodd"
       d="M5.46967 22.5303C5.76256 22.8232 6.23744 22.8232 6.53033 22.5303C6.82322 22.2374 6.82322 21.7626 6.53033 21.4697L4.81066 19.75H16C19.1756 19.75 21.75 17.1756 21.75 14V12C21.75 11.5858 21.4142 11.25 21 11.25C20.5858 11.25 20.25 11.5858 20.25 12V14C20.25 16.3472 18.3472 18.25 16 18.25H4.81066L6.53033 16.5303C6.82322 16.2374 6.82322 15.7626 6.53033 15.4697C6.23744 15.1768 5.76256 15.1768 5.46967 15.4697L2.46967 18.4697C2.32322 18.6161 2.25 18.8081 2.25 19C2.25 19.1017 2.27024 19.1987 2.30691 19.2871C2.34351 19.3755 2.39776 19.4584 2.46967 19.5303L5.46967 22.5303Z"
@@ -48,37 +48,37 @@ const ListLoop = () => (
 );
 
 const Random = () => (
-  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="group">
+  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-[rgba(0,0,0,0.95)] transition-all"
+      className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-#000/95 transition-all"
       d="M15.5 3H20.5V8"
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
-      className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-[rgba(0,0,0,0.95)] transition-all"
+      className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-#000/95 transition-all"
       d="M3.5 20L20.5 3"
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
-      className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-[rgba(0,0,0,0.95)] transition-all"
+      className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-#000/95 transition-all"
       d="M20.5 16V21H15.5"
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
-      className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-[rgba(0,0,0,0.95)] transition-all"
+      className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-#000/95 transition-all"
       d="M14.5 15L20.5 21"
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
-      className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-[rgba(0,0,0,0.95)] transition-all"
+      className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-#000/95 transition-all"
       d="M3.5 4L8.5 9"
       strokeWidth="1.5"
       strokeLinecap="round"
@@ -88,15 +88,15 @@ const Random = () => (
 );
 
 const SingleLoop = () => (
-  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="group">
+  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      className="fill-[rgba(0,0,0,70)] group-hover:fill-[rgba(0,0,0,0.95)] transition-all"
+      className="fill-#000/70 group-hover:fill-#000/95 transition-all"
       fillRule="evenodd"
       clipRule="evenodd"
       d="M18.5303 1.46967C18.2374 1.17678 17.7626 1.17678 17.4697 1.46967C17.1768 1.76256 17.1768 2.23744 17.4697 2.53033L19.1893 4.25H8C4.82436 4.25 2.25 6.82436 2.25 10V16C2.25 19.1756 4.82436 21.75 8 21.75H16C19.1757 21.75 21.75 19.1755 21.75 15.9999V14.5C21.75 14.0858 21.4142 13.75 21 13.75C20.5858 13.75 20.25 14.0858 20.25 14.5V15.9999C20.25 18.3471 18.3472 20.25 16 20.25H8C5.65279 20.25 3.75 18.3472 3.75 16V10C3.75 7.65279 5.65279 5.75 8 5.75H19.1893L17.4697 7.46967C17.1768 7.76256 17.1768 8.23744 17.4697 8.53033C17.7626 8.82322 18.2374 8.82322 18.5303 8.53033L21.5303 5.53033C21.6768 5.38388 21.75 5.19194 21.75 5C21.75 4.89831 21.7298 4.80134 21.6931 4.71291C21.6565 4.62445 21.6022 4.54158 21.5303 4.46967L18.5303 1.46967Z"
     />
     <path
-      className="fill-[rgba(0,0,0,70)] group-hover:fill-[rgba(0,0,0,0.95)] transition-all"
+      className="fill-#000/70 group-hover:fill-#000/95 transition-all"
       fillRule="evenodd"
       clipRule="evenodd"
       d="M12.6707 9.12895C12.8768 9.26848 13.0002 9.50114 13.0002 9.75V16.25C13.0002 16.6642 12.6644 17 12.2502 17C11.836 17 11.5002 16.6642 11.5002 16.25V10.8578L10.0287 11.4464C9.64415 11.6002 9.20768 11.4131 9.05384 11.0285C8.90001 10.6439 9.08707 10.2075 9.47166 10.0536L11.9717 9.05365C12.2027 8.96122 12.4646 8.98943 12.6707 9.12895Z"
diff --git a/src/components/AudioPlayer/widget/Volume.tsx b/src/components/AudioPlayer/widget/Volume.tsx
index 3ebb64f..d7cc771 100644
--- a/src/components/AudioPlayer/widget/Volume.tsx
+++ b/src/components/AudioPlayer/widget/Volume.tsx
@@ -22,12 +22,13 @@ export default function Volume({
 
   return (
     <div
-      className={`flex flex-col justify-between relative w-22px cursor-pointer ${hover ? 'h-173px' : 'h-22px'} ${className}`}
+      className={`flex flex-col justify-between relative w-22px cursor-pointer ${hover ? 'h-148px' : 'h-22px'} ${className}`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >
+      {/* 音量条 */}
       <VolumeBar value={value} className={`${!hover && '!hidden'}  transition-all`} onChange={onChange} />
-
+      {/* 按钮 */}
       <ButtonProvide className="group" onClick={handleClick}>
         {value >= 50 ? (
           <VolumeFull hover={hover} />
diff --git a/src/components/AudioPlayer/widget/VolumeBar.tsx b/src/components/AudioPlayer/widget/VolumeBar.tsx
index 135ba5b..a4c4772 100644
--- a/src/components/AudioPlayer/widget/VolumeBar.tsx
+++ b/src/components/AudioPlayer/widget/VolumeBar.tsx
@@ -16,16 +16,18 @@ export default function Volumne({
   };
 
   return (
-    <SliderPrimitive.Root
-      value={[value]}
-      orientation="vertical"
-      className={`${styles.VolumeBarRoot} ${className}`}
-      onValueChange={(value: number[]) => handleChange(value[0])}
-    >
-      <SliderPrimitive.Track className={`${styles.VolumeBarTrack}`}>
-        <SliderPrimitive.Range className={`${styles.VolumeBarRange}`} />
-      </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className={`${styles.VolumeBarThumb}`} />
-    </SliderPrimitive.Root>
+    <div className={`relative flex items-center w-18px h-118px bg-#fff ${styles.VolumeBarContainer} ${className}`}>
+      <SliderPrimitive.Root
+        value={[value]}
+        orientation="vertical"
+        className={`flex flex-col items-center w-full h-107px ${styles.VolumeBarRoot}`}
+        onValueChange={(value: number[]) => handleChange(value[0])}
+      >
+        <SliderPrimitive.Track className={`${styles.VolumeBarTrack}`}>
+          <SliderPrimitive.Range className={`${styles.VolumeBarRange}`} />
+        </SliderPrimitive.Track>
+        <SliderPrimitive.Thumb className={`${styles.VolumeBarThumb}`} />
+      </SliderPrimitive.Root>
+    </div>
   );
 }
diff --git a/src/components/AudioPlayer/widget/index.module.css b/src/components/AudioPlayer/widget/index.module.css
index 6d0d7e5..28cefdc 100644
--- a/src/components/AudioPlayer/widget/index.module.css
+++ b/src/components/AudioPlayer/widget/index.module.css
@@ -36,6 +36,7 @@
 }
 
 /* 音量条 */
+/******************************************************************************************************/
 .VolumeBarRoot {
   display: flex;
   align-items: center;
@@ -43,19 +44,18 @@
 }
 .VolumeBarRoot[data-orientation='vertical'] {
   flex-direction: column;
-  width: 20px;
-  height: 100px;
+  height: 102px;
   border-radius: 37px;
 }
 
-/* 底色 */
 .VolumeBarTrack {
   position: relative;
   flex-grow: 1;
   background-color: rgba(0, 0, 0, 0.1);
 }
+
 .VolumeBarTrack[data-orientation='vertical'] {
-  width: 3px;
+  width: 2px;
 }
 
 /* 激活区域 */
@@ -70,8 +70,8 @@
 /* 滑块 */
 .VolumeBarThumb {
   display: block;
-  width: 11px;
-  height: 11px;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
   background-color: #646464;
   outline: none;
@@ -84,3 +84,17 @@
 .VolumeBarRoot:hover .VolumeBarThumb {
   background-color: rgba(0, 0, 0, 0.95);
 }
+
+.VolumeBarContainer::before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: calc(-50% - 0.7px);
+  top: calc(-50% - 0.7px);
+  border-radius: 24px;
+  width: calc(200% + 1.4px); /* 考虑到阴影会占用额外空间，增加 1.4px */
+  height: calc(200% + 1.4px); /* 考虑到阴影会占用额外空间，增加 1.4px */
+  box-shadow: 0 0 0 0.7px #e1e1e1; /* 使用阴影模拟边框 */
+  transform: scale(0.5);
+  pointer-events: none; /** 防止 userCard 点击事件失效 */
+}
diff --git a/src/components/Icon/heart.module.css b/src/components/Icon/heart.module.css
index 4f772f5..303e8e4 100644
--- a/src/components/Icon/heart.module.css
+++ b/src/components/Icon/heart.module.css
@@ -9,12 +9,16 @@
 
 .color-default {
   --default-color: rgb(197, 197, 197);
-  --active-color: #c43737;
+  --hover-color: var(--primary-color);
+  --active-color: var(--primary-color);
+  --active-hover-color: var(--primary-color);
 }
 
 .color-dark {
   --default-color: rgba(0, 0, 0, 0.7);
-  --active-color: #c43737;
+  --hover-color: rgba(0, 0, 0, 0.95);
+  --active-color: var(--primary-color);
+  --active-hover-color: var(--primary-color);
 }
 
 .heart-svg {
@@ -47,8 +51,12 @@
   fill: var(--active-color);
 }
 
+.checkbox[type='checkbox']:checked:hover + svg .heart-path {
+  stroke: var(--active-hover-color);
+}
+
 .checkbox[type='checkbox']:hover + svg .heart-path {
-  stroke: var(--active-color);
+  stroke: var(--hover-color);
   transition: stroke 0.2s ease-in-out;
 }
 
diff --git a/uno.config.ts b/uno.config.ts
index 0709b64..ab60f3e 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -48,22 +48,5 @@ export default defineConfig({
     colors: {
       brand: 'var(--primary-color)',
     },
-    extend: {
-      'border-half': {
-        position: 'relative',
-        '::after': {
-          content: '',
-          display: 'block',
-          position: 'absolute',
-          left: '-50%',
-          top: '-50%',
-          width: '200%',
-          height: '200%',
-          border: '1px solid red',
-          transform: 'scale(0.5)',
-          '-webkit-transform': 'scale(0.5)',
-        },
-      },
-    },
   },
 });