feat(music-detail): 添加歌词展开和折叠功能

- 在 MusicDetail 组件中添加了歌词展开和折叠功能
- 新增 isLyricExpanded、isLyricTooLong 和 displayedLyric 等响应式变量
- 实现了 toggleLyricExpansion 方法来切换歌词展开状态
- 在模板中添加了折叠和展开歌词的按钮

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;
 }