From 8d015f8b370ecb6f0024130b30aa75d7d4cb6205 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= <liqiworkers@gmail.com>
Date: Sat, 1 Aug 2026 16:11:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B9=9D=E5=AE=AB=E6=A0=BC=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-tailwindcss/src/views/index/index.vue | 28 +++++++++++++++-------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/vite-tailwindcss/src/views/index/index.vue b/vite-tailwindcss/src/views/index/index.vue
index 6b4b611..8c0188b 100644
--- a/vite-tailwindcss/src/views/index/index.vue
+++ b/vite-tailwindcss/src/views/index/index.vue
@@ -55,12 +55,14 @@
         <!-- 曲目切换弹层 -->
         <div v-if="showTrackList && audio.tracks.value.length" class="track-pop">
           <div class="track-pop-title">选择曲目</div>
-          <div v-for="t in audio.tracks.value" :key="t.url"
-               class="track-item" :class="{ active: t.url === audio.activeUrl.value }"
-               @click="selectTrack(t.url)">
-            <span class="eq" v-if="t.url === audio.activeUrl.value && audio.isPlaying.value"><i></i><i></i><i></i></span>
-            <span class="tname">{{ t.name }}</span>
-            <span class="tcheck" v-if="t.url === audio.activeUrl.value">✓</span>
+          <div class="track-pop-list">
+            <div v-for="t in audio.tracks.value" :key="t.url"
+                 class="track-item" :class="{ active: t.url === audio.activeUrl.value }"
+                 @click="selectTrack(t.url)">
+              <span class="eq" v-if="t.url === audio.activeUrl.value && audio.isPlaying.value"><i></i><i></i><i></i></span>
+              <span class="tname">{{ t.name }}</span>
+              <span class="tcheck" v-if="t.url === audio.activeUrl.value">✓</span>
+            </div>
           </div>
         </div>
       </div>
@@ -70,6 +72,12 @@
         <img v-if="isAutoScroll" src="https://api.iconify.design/lucide:pause.svg?color=%23a88c6b" class="w-4 h-4" />
         <img v-else src="https://api.iconify.design/lucide:play.svg?color=%23a88c6b" class="w-4 h-4 ml-0.5" />
       </div>
+      <div @click="showTrackList = false; openNavigation()" class="control-btn cursor-pointer" title="导航">
+        <img src="https://api.iconify.design/lucide:map-pinned.svg?color=%23a88c6b" class="w-4 h-4" />
+      </div>
+      <div @click="showTrackList = false; isDrawerOpen = true" class="control-btn cursor-pointer" title="出席回执">
+        <img src="https://api.iconify.design/lucide:clipboard-pen.svg?color=%23a88c6b" class="w-4 h-4" />
+      </div>
     </div>
 
     <!-- 主滚动区域（注意：不要加 scroll-smooth，它会劫持 JS 滚动赋值导致卡顿） -->
@@ -1439,11 +1447,15 @@ watch(
 /* ---------- 音乐曲目弹层 ---------- */
 .music-wrap { position: relative; }
 .track-pop {
-  position: absolute; right: 0; bottom: 50px; width: 200px; background: rgba(255,255,255,0.95);
+  position: absolute; right: 46px; top: 0; width: 200px;
+  max-height: min(320px, calc(100vh - 3rem - 12px));
+  display: flex; flex-direction: column;
+  background: rgba(255,255,255,0.95);
   border: 1px solid rgba(168,140,107,0.25); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,0.18);
   padding: 8px; backdrop-filter: blur(12px); z-index: 60;
 }
-.track-pop-title { font-size: 10px; color: #a88c6b; letter-spacing: 0.2em; padding: 4px 8px 6px; }
+.track-pop-title { flex-shrink: 0; font-size: 10px; color: #a88c6b; letter-spacing: 0.2em; padding: 4px 8px 6px; }
+.track-pop-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
 .track-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; cursor: pointer; transition: background 0.2s; }
 .track-item:hover { background: rgba(168,140,107,0.1); }
 .track-item.active { background: rgba(168,140,107,0.16); color: #a88c6b; }