From f836c8dab7a6ae9cac1642b521c51bb8ae9a1f4e Mon Sep 17 00:00:00 2001
From: Fam Zheng <fam@euphon.net>
Date: Sun, 10 May 2026 14:59:07 +0100
Subject: [PATCH] =?UTF-8?q?music:=20=E4=B9=90=E8=B0=B1=E5=9B=BE=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E5=85=A8=E5=B1=8F=EF=BC=88=E5=86=8D=E7=82=B9=20/=20ES?=
 =?UTF-8?q?C=20=E9=80=80=E5=87=BA=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/music/frontend/src/views/PlayerView.vue | 42 ++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/apps/music/frontend/src/views/PlayerView.vue b/apps/music/frontend/src/views/PlayerView.vue
index 05d92f9..78486d6 100644
--- a/apps/music/frontend/src/views/PlayerView.vue
+++ b/apps/music/frontend/src/views/PlayerView.vue
@@ -138,6 +138,7 @@
                 :src="attachmentUrl(att.id)"
                 :alt="att.filename"
                 class="sheet-img"
+                @click="fullscreenSrc = attachmentUrl(att.id)"
               />
               <div
                 v-if="activeTab === 'chord' && roleAttachments('chord').length === 0"
@@ -230,6 +231,15 @@
         </template>
       </section>
 
+      <!-- 全屏乐谱 overlay：再点一下关闭，或按 ESC -->
+      <div
+        v-if="fullscreenSrc"
+        class="fs-overlay"
+        @click="fullscreenSrc = null"
+      >
+        <img :src="fullscreenSrc" class="fs-img" />
+      </div>
+
       <!-- 右侧 LLM chat 边栏 -->
       <aside v-if="selected" class="chat">
         <header class="chat-head">
@@ -326,6 +336,9 @@ let notesTimer = null
 let randomSeed = Math.random()
 let lastReportedId = null
 
+// fullscreen 乐谱
+const fullscreenSrc = ref(null)
+
 // chord
 const chordState = ref('idle')
 const chordError = ref('')
@@ -777,6 +790,12 @@ function scrollChatBottom() {
 
 // keyboard
 function onKeyDown(e) {
+  // ESC 在任何输入态下都能关全屏
+  if (e.key === 'Escape' && fullscreenSrc.value) {
+    e.preventDefault()
+    fullscreenSrc.value = null
+    return
+  }
   const tag = (e.target.tagName || '').toLowerCase()
   if (tag === 'input' || tag === 'textarea') return
   if (e.code === 'Space') { e.preventDefault(); togglePlay() }
@@ -1138,6 +1157,29 @@ onBeforeUnmount(() => {
   max-width: 100%;
   border-radius: 8px;
   background: #fff;
+  cursor: zoom-in;
+  transition: transform 0.1s;
+}
+.sheet-img:hover { transform: scale(1.005); }
+
+.fs-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.96);
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 16px;
+  cursor: zoom-out;
+}
+.fs-img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  background: #fff;
+  border-radius: 4px;
 }
 
 .auto-fetch {