fix(styles): header z-index 过低，导致子组件层级低

src/components/AudioPlayer/widget/index.module.css

@@ -91,7 +91,6 @@
 
 .VolumeBarContainer {
   box-shadow: 0px 6px 34px rgba(0, 0, 0, 0.1);
-  /* overflow: hidden; */
 }
 
 .VolumeBarContainer::before {
@@ -105,7 +104,7 @@
   height: calc(200% + 1.4px); /* 考虑到阴影会占用额外空间，增加 1.4px */
   box-shadow: 0 0 0 0.7px #e1e1e1; /* 使用阴影模拟边框 */
   transform: scale(0.5);
-  pointer-events: none; /** 防止 userCard 点击事件失效 */
+  pointer-events: none; /** 防止子元素点击事件失效 */
   overflow: hidden;
 }
 

src/components/Button/CollectButton.tsx

@@ -6,6 +6,8 @@ import { useEffect, useState } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
 
+import IconStyle from '@/components/Icon/heart.module.css';
+
 import { IconHeart } from '@/components';
 import { apiCollect } from '@/services';
 import { useAudioStore } from '@/store';
@@ -120,7 +122,7 @@ export default function CollectButton({
 
   return (
     <div
-      className={`flex flex-row items-center gap-[${gap}px] w-fit h-fit cursor-pointer group ${className}`}
+      className={`flex flex-row items-center gap-[${gap}px] w-fit h-fit cursor-pointer group ${IconStyle['collect-button']} ${className}`}
       onClick={handleCollect}
     >
       {iconPosition === 'left' && <IconHeart active={haveCollect} animateState={animate} color={color} />}

src/components/Button/thumb.module.css

@@ -12,7 +12,7 @@
 .thumb-svg {
   width: 100%;
   position: relative;
-  z-index: 9;
+  z-index: 2;
 }
 
 .thumb-path {
@@ -31,6 +31,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  z-index: 3;
   opacity: 0;
 }
 

src/components/Header/Header.tsx

@@ -7,7 +7,7 @@ import { Logo, Search } from '@/components';
 
 export default function Header({ type = 'server', className }: { type?: NextComponentType; className?: string }) {
   return (
-    <header className={`w-full h-80px z-2 ${className}`}>
+    <header className={`w-full h-80px z-10 ${className}`}>
       <div className="relative w-1200px h-full mx-auto flex items-center justify-between">
         <div className="relative flex items-center h-full">
           <Logo type={type} />

src/components/Header/index.module.css

@@ -13,5 +13,5 @@
   height: calc(200% + 1.4px); /* 考虑到阴影会占用额外空间，增加 1.4px */
   box-shadow: 0 0 0 0.7px #e1e1e1; /* 使用阴影模拟边框 */
   transform: scale(0.5);
-  pointer-events: none; /** 防止 userCard 点击事件失效 */
+  pointer-events: none; /** 防止子元素点击事件失效 */
 }

src/components/Icon/heart.module.css

@@ -24,7 +24,7 @@
 .heart-svg {
   width: 100%;
   position: relative;
-  z-index: 9;
+  z-index: 2;
 }
 
 .heart-path {
@@ -42,6 +42,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  z-index: 3;
   opacity: 0;
 }
 
@@ -59,6 +60,12 @@
   transition: stroke 0.2s ease-in-out;
 }
 
+/* 不起作用，暂留 */
+/* .collect-button:hover + svg .heart-path {
+  stroke: var(--hover-color);
+  transition: stroke 0.2s ease-in-out;
+} */
+
 /* 抖动 */
 .animate_touch {
   animation: touch 0.7s forwards ease-in;

src/components/Search/Dropdown.tsx

@@ -15,7 +15,8 @@ export default function SearchDropdown({ journalData, songData, className, onClo
 
   return (
     <div
-      className={`relative w-747px h-fit min-h-162px max-h-747px rounded-10px mt-10px pt-24px pb-40px pl-36px pr-18px border-1px border-#e1e1e1 bg-base z-11 overflow-auto ${style.dropdownScrollbar} ${className}`}
+      className={`relative w-747px h-fit max-h-747px rounded-10px mt-10px pt-24px pb-40px pl-36px pr-18px bg-base border-0.5px border-#e1e1e1 overflow-y-auto z-11 ${style.dropdownScrollbar} ${className}`}
+      style={{ boxShadow: '0px 6px 34px 0px rgba(0, 0, 0, 0.1)' }}
     >
       {haveData ? (
         <div className="h-fit">

src/components/Search/Input.tsx

@@ -8,9 +8,9 @@ import IconSearch from './widget/IconSearch';
 
 export default function SearchInput({ className, onInput, onFocus }: IProps) {
   return (
-    <div className={`relative w-208px h-38px border-1px border-#fff ${className}`}>
+    <div className={`relative w-208px h-38px ${className}`}>
       <input
-        className="w-full h-full px-45px text-13px leading-38px text-#000/95 bg-transparent outline-none rounded-47px"
+        className="w-full h-full px-45px border-0.5px border-#e1e1e1 text-13px leading-38px text-#000/95 bg-transparent outline-none rounded-47px"
         onInput={(e: any) => onInput(e.target.value)}
         onFocus={onFocus}
         style={{ boxShadow: '0px 6px 34px 0px rgba(0, 0, 0, 0.1)' }}

src/components/Search/index.module.css

@@ -1,3 +1,5 @@
+/** Dropdown 滚动条 */
+/******************************************************************************************************/
 .dropdownScrollbar::-webkit-scrollbar {
   width: 4px; /* 滚动条宽度 */
 }