From cb3fb65348cf21f4ccb6ca939ebbcd8e61e609c5 Mon Sep 17 00:00:00 2001
From: mtvpls <mtvpls@redaaa.ip-ddns.com>
Date: Fri, 22 May 2026 11:32:52 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9F=B3=E4=B9=90=E5=B0=81=E9=9D=A2=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E9=BB=91=E8=83=B6=E7=95=99=E5=A3=B0=E6=9C=BA?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/music/page.tsx | 199 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 193 insertions(+), 6 deletions(-)

diff --git a/src/app/music/page.tsx b/src/app/music/page.tsx
index 7dc0b39..f51fdc8 100644
--- a/src/app/music/page.tsx
+++ b/src/app/music/page.tsx
@@ -183,6 +183,74 @@ function AudioSpectrumCanvas({
   );
 }
 
+
+const VINYL_NEEDLE_SVG = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 130"><path d="M21,21 C21,65 86,70 86,100" fill="none" stroke="rgba(0,0,0,0.28)" stroke-width="6" stroke-linecap="round"/><path d="M20,20 C20,65 85,70 85,100" fill="none" stroke="%23e0e0e0" stroke-width="4.5" stroke-linecap="round"/><path d="M19,20 C19,65 84,70 84,100" fill="none" stroke="%23fff" stroke-width="1.5" stroke-linecap="round"/><g transform="translate(85, 100) rotate(25)"><rect x="-6" y="0" width="12" height="18" rx="2" fill="%23ccc"/><rect x="-4" y="5" width="8" height="14" rx="1" fill="%23333"/><rect x="-2" y="16" width="4" height="5" rx="1" fill="%23d43c33"/></g><circle cx="20" cy="20" r="10" fill="%23f0f0f0" stroke="%23ccc" stroke-width="1"/><circle cx="20" cy="20" r="4" fill="%23fff"/><circle cx="20" cy="20" r="1.5" fill="%23999"/></svg>')`;
+
+function VinylTurntable({
+  cover,
+  title,
+  isPlaying,
+  className = '',
+}: {
+  cover?: string;
+  title: string;
+  isPlaying: boolean;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`relative mx-auto mt-12 mb-5 flex h-[280px] w-[280px] items-center justify-center md:mt-16 md:mb-8 md:h-[340px] md:w-[340px] ${className}`}
+      aria-label="黑胶唱片机封面"
+    >
+      <div
+        className="pointer-events-none absolute left-1/2 top-[-54px] z-20 h-[140px] w-[108px] drop-shadow-xl transition-transform duration-500"
+        style={{
+          marginLeft: '-20px',
+          backgroundImage: VINYL_NEEDLE_SVG,
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: 'contain',
+          transformOrigin: '20px 20px',
+          transform: isPlaying ? 'rotate(0deg)' : 'rotate(-30deg)',
+        }}
+      />
+      <div
+        className="relative flex h-[246px] w-[246px] items-center justify-center overflow-hidden rounded-full md:h-[300px] md:w-[300px]"
+        style={{
+          background: 'conic-gradient(from 45deg, #070707 0%, #2b2b2b 10%, #101010 20%, #080808 32%, #242424 42%, #0b0b0b 55%, #1e1e1e 68%, #050505 80%, #2c2c2c 90%, #070707 100%)',
+          boxShadow: '0 0 0 8px rgba(255,255,255,0.055), 0 20px 42px rgba(0,0,0,0.65), inset 0 0 28px rgba(255,255,255,0.045)',
+          animation: 'vinyl-spin 20s linear infinite',
+          animationPlayState: isPlaying ? 'running' : 'paused',
+        }}
+      >
+        <div
+          className="pointer-events-none absolute inset-0 rounded-full"
+          style={{
+            background: 'repeating-radial-gradient(circle, transparent 0, transparent 3px, rgba(255,255,255,0.055) 3px, rgba(255,255,255,0.055) 4px)',
+          }}
+        />
+        <div className="pointer-events-none absolute left-[18%] top-[10%] h-[42%] w-[22%] rotate-[-28deg] rounded-full bg-white/10 blur-md" />
+        <div className="relative z-10 flex h-[158px] w-[158px] items-center justify-center overflow-hidden rounded-full border-[5px] border-black bg-zinc-800 md:h-[192px] md:w-[192px]">
+          {cover ? (
+            <img
+              src={cover}
+              alt={title}
+              className="h-full w-full rounded-full object-cover"
+              onError={(e) => {
+                e.currentTarget.style.display = 'none';
+              }}
+            />
+          ) : (
+            <svg className="h-14 w-14 text-zinc-500 md:h-16 md:w-16" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
+            </svg>
+          )}
+        </div>
+        <div className="pointer-events-none absolute z-20 h-3 w-3 rounded-full border border-white/30 bg-zinc-950" />
+      </div>
+    </div>
+  );
+}
+
 // 扩展 Window 接口以支持 Document PiP API
 declare global {
   interface Window {
@@ -216,6 +284,7 @@ export default function MusicPage() {
   const [showPlayer, setShowPlayer] = useState(false);
   const [loading, setLoading] = useState(false);
   const [showLyrics, setShowLyrics] = useState(false);
+  const [mobileLyricsView, setMobileLyricsView] = useState<'lyrics' | 'vinyl'>('lyrics');
   const [musicProxyEnabled, setMusicProxyEnabled] = useState(() => {
     if (typeof window === 'undefined') return true;
     return (window as any).RUNTIME_CONFIG?.MUSIC_PROXY_ENABLED !== false;
@@ -1928,7 +1997,99 @@ export default function MusicPage() {
   return (
     <div className="music-theme min-h-screen bg-zinc-950 text-white">
       <>
-      <style jsx>{`
+      <style jsx global>{`
+        @keyframes vinyl-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        .vinyl-player {
+          position: relative;
+          width: min(72vw, 300px);
+          height: min(72vw, 300px);
+          margin: 42px auto 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        @media (min-width: 768px) {
+          .vinyl-player {
+            width: clamp(260px, 30vw, 360px);
+            height: clamp(260px, 30vw, 360px);
+            margin: 54px auto 28px;
+          }
+        }
+        .vinyl-needle {
+          position: absolute;
+          top: -50px;
+          left: 50%;
+          margin-left: -20px;
+          width: 108px;
+          height: 140px;
+          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 130"><path d="M21,21 C21,65 86,70 86,100" fill="none" stroke="rgba(0,0,0,0.28)" stroke-width="6" stroke-linecap="round"/><path d="M20,20 C20,65 85,70 85,100" fill="none" stroke="%23e0e0e0" stroke-width="4.5" stroke-linecap="round"/><path d="M19,20 C19,65 84,70 84,100" fill="none" stroke="%23fff" stroke-width="1.5" stroke-linecap="round"/><g transform="translate(85, 100) rotate(25)"><rect x="-6" y="0" width="12" height="18" rx="2" fill="%23ccc"/><rect x="-4" y="5" width="8" height="14" rx="1" fill="%23333"/><rect x="-2" y="16" width="4" height="5" rx="1" fill="%23d43c33"/></g><circle cx="20" cy="20" r="10" fill="%23f0f0f0" stroke="%23ccc" stroke-width="1"/><circle cx="20" cy="20" r="4" fill="%23fff"/><circle cx="20" cy="20" r="1.5" fill="%23999"/></svg>');
+          background-repeat: no-repeat;
+          background-size: contain;
+          transform-origin: 20px 20px;
+          transform: rotate(-30deg);
+          transition: transform 0.5s cubic-bezier(0.3, 0, 0.1, 1);
+          z-index: 5;
+          pointer-events: none;
+          filter: drop-shadow(0 8px 8px rgba(0,0,0,0.35));
+        }
+        .vinyl-player.playing .vinyl-needle {
+          transform: rotate(0deg);
+        }
+        .vinyl-disc {
+          position: relative;
+          width: 88%;
+          height: 88%;
+          border-radius: 9999px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: conic-gradient(from 45deg, #080808 0%, #2a2a2a 10%, #0f0f0f 20%, #111 40%, #303030 50%, #111 60%, #090909 80%, #2a2a2a 90%, #080808 100%);
+          box-shadow: 0 0 0 8px rgba(255,255,255,0.045), 0 18px 36px rgba(0,0,0,0.55), inset 0 0 24px rgba(255,255,255,0.04);
+          animation: vinyl-spin 20s linear infinite;
+          animation-play-state: paused;
+        }
+        .vinyl-player.playing .vinyl-disc {
+          animation-play-state: running;
+        }
+        .vinyl-disc::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          border-radius: inherit;
+          background: repeating-radial-gradient(transparent 0, transparent 3px, rgba(255,255,255,0.045) 3px, rgba(255,255,255,0.045) 4px), radial-gradient(circle at 35% 25%, rgba(255,255,255,0.14), transparent 28%);
+          pointer-events: none;
+        }
+        .vinyl-disc::after {
+          content: '';
+          position: absolute;
+          width: 12px;
+          height: 12px;
+          border-radius: 9999px;
+          background: #111;
+          border: 2px solid rgba(255,255,255,0.25);
+          z-index: 3;
+          pointer-events: none;
+        }
+        .vinyl-cover {
+          position: relative;
+          z-index: 2;
+          width: 64%;
+          height: 64%;
+          border-radius: 9999px;
+          object-fit: cover;
+          border: 5px solid #0a0a0a;
+          user-select: none;
+          box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
+        }
+        .vinyl-cover-fallback {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #27272a;
+        }
         @keyframes music-note-bounce {
           0%,
           100% {
@@ -2564,7 +2725,7 @@ export default function MusicPage() {
             </button>
             <div className="flex flex-1 min-h-0 flex-col md:flex-row">
               {/* Cover / Meta */}
-              <div className="relative h-32 md:h-auto md:w-[320px] lg:w-[360px] xl:w-[420px] bg-gradient-to-b from-zinc-800 to-zinc-900 shrink-0">
+              <div className="relative h-32 md:h-auto md:w-[380px] lg:w-[430px] xl:w-[480px] bg-gradient-to-b from-zinc-800 to-zinc-900 shrink-0 overflow-hidden">
                 {currentSong.pic && (
                   <div className="absolute inset-0">
                     <img
@@ -2575,7 +2736,13 @@ export default function MusicPage() {
                   </div>
                 )}
                 <div className="relative h-full flex flex-col items-center justify-center p-4 md:p-6 lg:p-8">
-                  <div className="w-16 h-16 md:w-40 md:h-40 lg:w-56 lg:h-56 rounded-xl lg:rounded-2xl overflow-hidden shadow-2xl mb-2 md:mb-4 lg:mb-6">
+                  <div
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setMobileLyricsView((view) => (view === 'lyrics' ? 'vinyl' : 'lyrics'));
+                    }}
+                    className="w-16 h-16 md:hidden rounded-xl overflow-hidden shadow-2xl mb-2"
+                  >
                     {currentSong.pic ? (
                       <img
                         src={currentSong.pic}
@@ -2584,19 +2751,39 @@ export default function MusicPage() {
                       />
                     ) : (
                       <div className="w-full h-full bg-zinc-800 flex items-center justify-center">
-                        <svg className="w-8 h-8 md:w-16 md:h-16 lg:w-20 lg:h-20 text-zinc-600" fill="currentColor" viewBox="0 0 20 20">
+                        <svg className="w-8 h-8 text-zinc-600" fill="currentColor" viewBox="0 0 20 20">
                           <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
                         </svg>
                       </div>
                     )}
                   </div>
-                  <h2 className="text-base md:text-lg lg:text-2xl font-bold text-white text-center mb-1 line-clamp-2">{currentSong.name}</h2>
+                  <div className="hidden md:block w-full">
+                    <VinylTurntable cover={currentSong.pic} title={currentSong.name} isPlaying={isPlaying} />
+                  </div>
+                  <h2 className="text-base md:text-xl lg:text-2xl font-bold text-white text-center mb-1 line-clamp-2">{currentSong.name}</h2>
                   <p className="text-xs md:text-sm lg:text-base text-zinc-400 line-clamp-1 text-center">{currentSong.artist}</p>
                 </div>
               </div>
 
+              {mobileLyricsView === 'vinyl' && (
+                <div className="relative md:hidden flex-1 min-h-0 overflow-hidden bg-gradient-to-b from-zinc-800 to-zinc-900">
+                  {currentSong.pic && (
+                    <div className="absolute inset-0">
+                      <img
+                        src={currentSong.pic}
+                        alt={currentSong.name}
+                        className="w-full h-full object-cover opacity-30 blur-xl"
+                      />
+                    </div>
+                  )}
+                  <div className="relative h-full flex items-center justify-center p-4">
+                    <VinylTurntable cover={currentSong.pic} title={currentSong.name} isPlaying={isPlaying} />
+                  </div>
+                </div>
+              )}
+
               {/* Lyrics Content */}
-              <div ref={lyricsContainerRef} className="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8">
+              <div ref={lyricsContainerRef} className={`${mobileLyricsView === 'vinyl' ? 'hidden md:block' : 'block'} flex-1 overflow-y-auto p-4 md:p-6 lg:p-8`}>
                 {lyrics.length > 0 ? (
                   <div className="space-y-4 md:space-y-5">
                     {lyrics.map((line, index) => (