From 70a8de227ae2db7f175c1eaefba8040a9e286446 Mon Sep 17 00:00:00 2001
From: ikmkj <1@qq,com>
Date: Sat, 26 Jul 2025 23:21:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(music-detail):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=AD=8C=E8=AF=8D=E5=B1=95=E5=BC=80=E5=92=8C=E6=8A=98=E5=8F=A0?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 MusicDetail 组件中添加了歌词展开和折叠功能
- 新增 isLyricExpanded、isLyricTooLong 和 displayedLyric 等响应式变量
- 实现了 toggleLyricExpansion 方法来切换歌词展开状态
- 在模板中添加了折叠和展开歌词的按钮
---
 .gitignore                               |  2 ++
 music-qianduan/src/views/MusicDetail.vue | 36 +++++++++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 843870d..6f6eca6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,7 @@ dist
 dist-ssr
 *.local
 
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
@@ -35,6 +36,7 @@ target
 *.iml
 out
 gen
+*/upload
 */.vscode
 .vscode
 #忽略所有.svn目录
diff --git a/music-qianduan/src/views/MusicDetail.vue b/music-qianduan/src/views/MusicDetail.vue
index e31d89d..dbb4dc1 100644
--- a/music-qianduan/src/views/MusicDetail.vue
+++ b/music-qianduan/src/views/MusicDetail.vue
@@ -106,7 +106,10 @@
         <div v-if="activeTab === 'lyric'">
           <div v-if="music && music.lyric" class="music-lyric">
             <h2>歌词</h2>
-            <pre>{{ music.lyric }}</pre>
+            <pre>{{ displayedLyric }}</pre>
+            <div v-if="isLyricTooLong" class="lyric-toggle-button" @click="toggleLyricExpansion">
+              {{ isLyricExpanded ? '收起歌词' : '查看更多歌词' }}
+            </div>
           </div>
           <el-empty v-else description="暂无歌词" />
         </div>
@@ -226,6 +229,26 @@ const replyingTo = ref(null)
 const expandedComments = ref([])
 let commentSubscription = null;
 
+const isLyricExpanded = ref(false)
+const LYRIC_PREVIEW_LINES = 10
+
+const isLyricTooLong = computed(() => {
+  if (!music.value || !music.value.lyric) return false
+  return music.value.lyric.split('\n').length > LYRIC_PREVIEW_LINES
+})
+
+const displayedLyric = computed(() => {
+  if (!music.value || !music.value.lyric) return ''
+  if (isLyricExpanded.value || !isLyricTooLong.value) {
+    return music.value.lyric
+  }
+  return music.value.lyric.split('\n').slice(0, LYRIC_PREVIEW_LINES).join('\n')
+})
+
+const toggleLyricExpansion = () => {
+  isLyricExpanded.value = !isLyricExpanded.value
+}
+
 // 计算属性
 const isPlaying = computed(() => {
   return playerStore.getCurrentMusic?.id === music.value?.id && playerStore.getIsPlaying
@@ -517,6 +540,17 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+.lyric-toggle-button {
+  cursor: pointer;
+  color: var(--el-color-primary);
+  text-align: center;
+  margin-top: 10px;
+  font-size: 14px;
+}
+
+.lyric-toggle-button:hover {
+  color: var(--el-color-primary-light-3);
+}
 .music-detail-page {
   padding: 20px;
 }