music: 乐谱图点击全屏(再点 / ESC 退出)
deploy music / build-and-deploy (push) Successful in 1m48s

This commit is contained in:
Fam Zheng
2026-05-10 14:59:07 +01:00
parent eed5e88dc0
commit f836c8dab7
@@ -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 {