update(CollectButton): Add color prop

src/components/AudioPlayer/PlayerControl.tsx

@@ -105,7 +105,9 @@ export default function AudioPlayer({
       {/* control */}
       <div className="flex items-center h-fit pb-4px">
         {/* 收藏歌曲 */}
-        {!!audio?.id && <CollectButton id={audio.id} active={audio.haveCollect} collectType="0" className="ml-24px" />}
+        {!!audio?.id && (
+          <CollectButton id={audio.id} active={audio.haveCollect} collectType="0" color="dark" className="ml-24px" />
+        )}
         {/* 播放顺序 */}
         {showOrder &&
           orderList.map((item) => (

src/components/Button/CollectButton.tsx

@@ -6,8 +6,7 @@ import { useEffect, useState } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
 
-import styles from './collect.module.css';
+import { IconHeart } from '@/components';
-
 import { apiCollect } from '@/services';
 import { useAudioStore } from '@/store';
 
@@ -26,6 +25,7 @@ interface Props {
   textClassName?: string;
   /** 文字跟图标之间的间隔  单位px */
   gap?: number;
+  color?: string;
 }
 
 export default function CollectButton({
@@ -39,6 +39,7 @@ export default function CollectButton({
   className = '',
   textClassName = '',
   showText = false,
+  color,
 }: Props) {
   const { playList, playQueue, updatePlayList, setPlayQueue } = useAudioStore(
     useShallow((state) => {
@@ -122,38 +123,17 @@ export default function CollectButton({
       className={`flex flex-row items-center gap-[${gap}px] w-fit h-fit cursor-pointer group ${className}`}
       onClick={handleCollect}
     >
-      {iconPosition === 'left' && <Icon haveCollect={haveCollect} animate={animate} />}
+      {iconPosition === 'left' && <IconHeart active={haveCollect} animateState={animate} color={color} />}
       {/* 文案 */}
       {!!(showText && currentCount > 0) && (
         <p
-          className={`${haveCollect ? 'text-brand' : 'text-[rgba(0,0,0,0.4)]'} group-hover:text-brand transition-colors text-[13px] leading-[18.2px] ${textClassName} ${styles.text} `}
+          className={`${haveCollect ? 'text-brand' : 'text-[rgba(0,0,0,0.4)]'} group-hover:text-brand transition-colors text-[13px] leading-[18.2px] ${textClassName}`}
         >
           {`${currentCount || ''}${text || ''}`}
         </p>
       )}
       {/* 图标 */}
-      {iconPosition === 'right' && <Icon haveCollect={haveCollect} animate={animate} />}
+      {iconPosition === 'right' && <IconHeart active={haveCollect} animateState={animate} color={color} />}
-    </div>
-  );
-}
-
-function Icon({ haveCollect, animate }: { haveCollect: boolean; animate: boolean }) {
-  return (
-    <div className={styles['heart-icon']}>
-      <input type="checkbox" readOnly className={`checkbox ${styles.checkbox}`} checked={haveCollect} />
-
-      <svg
-        className={`${styles['heart-svg']} ${animate && styles.animate_touch}`}
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          className={`${styles['heart-path']} ${animate && styles.animate_run}`}
-          d="M19.612 5.41452C19.1722 4.96607 18.65 4.61034 18.0752 4.36763C17.5005 4.12492 16.8844 4 16.2623 4C15.6401 4 15.0241 4.12492 14.4493 4.36763C13.8746 4.61034 13.3524 4.96607 12.9126 5.41452L11.9998 6.34476L11.087 5.41452C10.1986 4.50912 8.99364 4.00047 7.73725 4.00047C6.48085 4.00047 5.27591 4.50912 4.38751 5.41452C3.4991 6.31992 3 7.5479 3 8.82833C3 10.1088 3.4991 11.3367 4.38751 12.2421L11.9998 20L19.612 12.2421C20.0521 11.7939 20.4011 11.2617 20.6393 10.676C20.8774 10.0902 21 9.46237 21 8.82833C21 8.19428 20.8774 7.56645 20.6393 6.9807C20.4011 6.39494 20.0521 5.86275 19.612 5.41452Z"
-        />
-      </svg>
     </div>
   );
 }

src/components/Icon/Heart.tsx

@@ -0,0 +1,30 @@
+import styles from './heart.module.css';
+
+export default function Heart({
+  active,
+  animateState,
+  color = 'default',
+}: {
+  active: boolean;
+  animateState: boolean;
+  color?: string;
+}) {
+  return (
+    <div className={`${styles['heart-icon']} ${styles[`color-${color}`]} var(--brand-color-#c43737);`}>
+      <input type="checkbox" readOnly className={`checkbox ${styles.checkbox}`} checked={active} />
+
+      <svg
+        className={`${styles['heart-svg']} ${animateState && styles.animate_touch}`}
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          className={`${styles['heart-path']} ${animateState && styles.animate_run}`}
+          d="M19.612 5.41452C19.1722 4.96607 18.65 4.61034 18.0752 4.36763C17.5005 4.12492 16.8844 4 16.2623 4C15.6401 4 15.0241 4.12492 14.4493 4.36763C13.8746 4.61034 13.3524 4.96607 12.9126 5.41452L11.9998 6.34476L11.087 5.41452C10.1986 4.50912 8.99364 4.00047 7.73725 4.00047C6.48085 4.00047 5.27591 4.50912 4.38751 5.41452C3.4991 6.31992 3 7.5479 3 8.82833C3 10.1088 3.4991 11.3367 4.38751 12.2421L11.9998 20L19.612 12.2421C20.0521 11.7939 20.4011 11.2617 20.6393 10.676C20.8774 10.0902 21 9.46237 21 8.82833C21 8.19428 20.8774 7.56645 20.6393 6.9807C20.4011 6.39494 20.0521 5.86275 19.612 5.41452Z"
+        />
+      </svg>
+    </div>
+  );
+}

src/components/Icon/heart.module.css

@@ -2,13 +2,21 @@
   width: var(--size);
   position: relative;
 
-  --gray-color: rgb(197, 197, 197);
   --no-color: rgba(244, 244, 244, 0);
-  --skin-color: #c43737;
   --size: 24px;
   --path-dasharray: 120;
 }
 
+.color-default {
+  --default-color: rgb(197, 197, 197);
+  --active-color: #c43737;
+}
+
+.color-dark {
+  --default-color: rgba(0, 0, 0, 0.95);
+  --active-color: #c43737;
+}
+
 .heart-svg {
   width: 100%;
   position: relative;
@@ -17,7 +25,7 @@
 
 .heart-path {
   fill: var(--no-color);
-  stroke: var(--gray-color);
+  stroke: var(--default-color);
   stroke-dasharray: var(--path-dasharray);
   stroke-width: 1.5px;
   stroke-linecap: round;
@@ -35,12 +43,12 @@
 }
 
 .checkbox[type='checkbox']:checked + svg .heart-path {
-  stroke: var(--skin-color);
+  stroke: var(--active-color);
-  fill: var(--skin-color);
+  fill: var(--active-color);
 }
 
 .checkbox[type='checkbox']:hover + svg .heart-path {
-  stroke: var(--skin-color);
+  stroke: var(--active-color);
   transition: stroke 0.2s ease-in-out;
 }
 
@@ -57,19 +65,19 @@
 /* 填充 */
 @keyframes run {
   0% {
-    stroke: var(--skin-color);
+    stroke: var(--active-color);
     stroke-dashoffset: var(--path-dasharray);
     fill: var(--no-color);
   }
 
   80% {
     stroke-dashoffset: 0;
-    fill: var(--skin-color);
+    fill: var(--active-color);
   }
   100% {
     stroke-dashoffset: 0;
-    stroke: var(--skin-color);
+    stroke: var(--active-color);
-    fill: var(--skin-color);
+    fill: var(--active-color);
   }
 }
 

src/components/index.ts

@@ -7,6 +7,7 @@ export { default as MiniFooter } from './Footer/MiniFooter';
 export { default as IconEqualizer } from './Icon/Equalizer';
 export { default as IconComment } from './Icon/Comment';
 export { default as IconClose } from './Icon/Close';
+export { default as IconHeart } from './Icon/Heart';
 export { default as IconPlayAll } from './Icon/PlayAll';
 
 // Home