diff --git a/vite-tailwindcss/src/views/index/index.vue b/vite-tailwindcss/src/views/index/index.vue
index fe57b0d..a93cbea 100644
--- a/vite-tailwindcss/src/views/index/index.vue
+++ b/vite-tailwindcss/src/views/index/index.vue
@@ -173,16 +173,21 @@
               </button>
               <div class="player-panel-sliders">
                 <div class="player-vol-row">
-                  <i class="fa-solid fa-volume-low" />
-                  <input
-                    type="range"
-                    class="player-range player-vol"
-                    min="0"
-                    max="1"
-                    step="0.01"
-                    :value="audio.volume.value"
-                    @input="onVolumeInput"
-                  />
+                  <button type="button" class="player-vol-icon" title="音量" @click="toggleMute">
+                    <i :class="volumeIconClass" />
+                  </button>
+                  <div class="player-vol-track">
+                    <input
+                      type="range"
+                      class="player-vol-range"
+                      min="0"
+                      max="1"
+                      step="0.01"
+                      :value="audio.volume.value"
+                      :style="{ '--vol': `${Math.round((audio.volume.value || 0) * 100)}%` }"
+                      @input="onVolumeInput"
+                    />
+                  </div>
                 </div>
                 <div class="player-seek-wrap">
                   <input
@@ -192,6 +197,7 @@
                     :max="seekMax"
                     step="0.1"
                     :value="audio.currentTime.value"
+                    :style="{ '--seek': seekPercent }"
                     @input="onSeekInput"
                   />
                   <div class="player-time">
@@ -605,6 +611,26 @@ const lrcListRef = ref(null)
 const danmakuLayerRef = ref(null)
 
 const seekMax = computed(() => Math.max(audio.duration.value || 0, audio.currentTime.value || 0, 1))
+const seekPercent = computed(() => {
+  const d = audio.duration.value || 0
+  if (!d) return '0%'
+  return `${Math.min(100, Math.max(0, (audio.currentTime.value / d) * 100))}%`
+})
+const volumeIconClass = computed(() => {
+  const v = audio.volume.value || 0
+  if (v <= 0.001) return 'fa-solid fa-volume-xmark'
+  if (v < 0.45) return 'fa-solid fa-volume-low'
+  return 'fa-solid fa-volume-high'
+})
+let lastVolumeBeforeMute = 0.5
+const toggleMute = () => {
+  if ((audio.volume.value || 0) > 0.001) {
+    lastVolumeBeforeMute = audio.volume.value
+    audio.setVolume(0)
+  } else {
+    audio.setVolume(lastVolumeBeforeMute || 0.5)
+  }
+}
 const activeLrcIndex = computed(() => findLrcIndex(lrcLines.value, audio.currentTime.value))
 
 const loadLrcForActive = async () => {
@@ -835,7 +861,7 @@ const clearBottomReturn = () => {
 }
 
 const scheduleBottomReturn = (reset = false) => {
-  if (!isAtBottom() || !isAutoScroll.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value || showBlessingDrawer.value || showPlayerPanel.value) return
+  if (!isAtBottom() || !isAutoScroll.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value || showBlessingDrawer.value) return
   if (bottomReturnTimer && !reset) return
   clearBottomReturn()
   bottomReturnTimer = setTimeout(() => {
@@ -879,7 +905,6 @@ const canAutoAdvance = () =>
   && !isInteracting.value
   && !isDrawerOpen.value
   && !showBlessingDrawer.value
-  && !showPlayerPanel.value
   && !previewVisible.value
   && !showMapOptions.value
   && !showOpenInBrowser.value
@@ -1215,9 +1240,9 @@ watch(
 )
 watch(freeScrollSignature, restartAutoScroll)
 watch(
-  () => [isDrawerOpen.value, showBlessingDrawer.value, showPlayerPanel.value, previewVisible.value, showMapOptions.value, showOpenInBrowser.value],
+  () => [isDrawerOpen.value, showBlessingDrawer.value, previewVisible.value, showMapOptions.value, showOpenInBrowser.value],
   () => {
-    if (isDrawerOpen.value || showBlessingDrawer.value || showPlayerPanel.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value) {
+    if (isDrawerOpen.value || showBlessingDrawer.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value) {
       cancelAnimationFrame(animId)
       clearBottomReturn()
     }
@@ -1445,9 +1470,24 @@ watch(
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
   padding: 0 2px;
 }
+.player-panel-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+.player-panel-cover {
+  flex: 0 0 auto;
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  background: #c4a484 center/cover no-repeat;
+  box-shadow: 0 3px 10px rgba(92, 74, 53, 0.18);
+}
 .player-panel-title {
   font-size: 14px;
   color: #5c4a35;
@@ -1467,79 +1507,10 @@ watch(
   display: inline-flex;
   align-items: center;
   justify-content: center;
-}
-.player-panel-controls {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-.player-play-btn {
-  width: 42px;
-  height: 42px;
-  border-radius: 999px;
-  background: linear-gradient(145deg, #c4a484, #a88c6b);
-  color: #fff;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   flex: 0 0 auto;
-  box-shadow: 0 6px 14px rgba(168, 140, 107, 0.35);
-  font-size: 14px;
 }
-.player-play-btn .fa-play { margin-left: 2px; }
-.player-seek-wrap { flex: 1; min-width: 0; }
-.player-time {
-  display: flex;
-  justify-content: space-between;
-  font-size: 10px;
-  color: #9a9084;
-  margin-top: 4px;
-  padding: 0 2px;
-}
-.player-vol-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 10px;
-  padding: 8px 12px;
-  border-radius: 999px;
-  background: rgba(168, 140, 107, 0.08);
-  color: #a88c6b;
-  font-size: 12px;
-}
-.player-range {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: 6px;
-  border-radius: 999px;
-  background: rgba(168, 140, 107, 0.22);
-  outline: none;
-}
-.player-range::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 999px;
-  background: #fff;
-  border: 2px solid #a88c6b;
-  box-shadow: 0 2px 6px rgba(92, 74, 53, 0.2);
-  cursor: pointer;
-}
-.player-range::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  border-radius: 999px;
-  background: #fff;
-  border: 2px solid #a88c6b;
-  box-shadow: 0 2px 6px rgba(92, 74, 53, 0.2);
-  cursor: pointer;
-}
-.player-vol { flex: 1; }
 .player-lrc-list {
-  margin-top: 12px;
-  max-height: 148px;
+  max-height: 132px;
   overflow-y: auto;
   padding: 10px 8px;
   border-radius: 18px;
@@ -1569,6 +1540,141 @@ watch(
   font-size: 12px;
   color: #9a9084;
 }
+.player-panel-footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 12px;
+}
+.player-play-btn {
+  width: 46px;
+  height: 46px;
+  border-radius: 999px;
+  background: linear-gradient(145deg, #c4a484, #a88c6b);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  box-shadow: 0 6px 14px rgba(168, 140, 107, 0.35);
+  font-size: 15px;
+}
+.player-play-btn .fa-play { margin-left: 2px; }
+.player-panel-sliders {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.player-vol-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #a88c6b;
+}
+.player-vol-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #a88c6b;
+  font-size: 12px;
+  flex: 0 0 auto;
+  background: transparent;
+}
+.player-vol-track {
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  display: flex;
+  align-items: center;
+}
+.player-vol-range {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  border-radius: 999px;
+  outline: none;
+  background: linear-gradient(
+    90deg,
+    #c4a484 0%,
+    #a88c6b var(--vol, 50%),
+    rgba(168, 140, 107, 0.18) var(--vol, 50%),
+    rgba(168, 140, 107, 0.18) 100%
+  );
+  cursor: pointer;
+}
+.player-vol-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: #fff;
+  border: none;
+  box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35);
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+.player-vol-range:active::-webkit-slider-thumb { transform: scale(1.12); }
+.player-vol-range::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: #fff;
+  border: none;
+  box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35);
+  cursor: pointer;
+}
+.player-seek-wrap { width: 100%; }
+.player-time {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  color: #9a9084;
+  margin-top: 3px;
+  padding: 0 2px;
+}
+.player-range {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  border-radius: 999px;
+  outline: none;
+  background: linear-gradient(
+    90deg,
+    #c4a484 0%,
+    #a88c6b var(--seek, 0%),
+    rgba(168, 140, 107, 0.18) var(--seek, 0%),
+    rgba(168, 140, 107, 0.18) 100%
+  );
+  cursor: pointer;
+}
+.player-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: #fff;
+  border: none;
+  box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35);
+  cursor: pointer;
+}
+.player-range::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: #fff;
+  border: none;
+  box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35);
+  cursor: pointer;
+}
 @keyframes vinyl-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
@@ -2353,4 +2459,3 @@ watch(
   100% { opacity: 0; transform: translateY(-12px) scale(.94); filter: blur(1.4px); }
 }
 </style>
-
\ No newline at end of file