update(CollectButton): Add color prop

7 months ago · 86823dcb15
parent da86d205dc
commit 86823dcb15
5 changed files with 58 additions and 37 deletions
--- a/src/components/AudioPlayer/PlayerControl.tsx
+++ b/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) => (
--- a/src/components/Button/CollectButton.tsx
+++ b/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} />}
-    </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>
+      {iconPosition === 'right' && <IconHeart active={haveCollect} animateState={animate} color={color} />}
    </div>
  );
 }
--- a/src/components/Icon/Heart.tsx
+++ b/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>
+  );
+}
--- a/src/components/Button/collect.module.css
+++ b/src/components/Button/collect.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);
-  fill: var(--skin-color);
+  stroke: var(--active-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);
-    fill: var(--skin-color);
+    stroke: var(--active-color);
+    fill: var(--active-color);
  }
 }

--- a/src/components/index.ts
+++ b/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