- **歌手相关功能添加**: 添加歌曲的艺术家入口,

歌曲的艺术家现可点击查看其他歌曲，专辑和介绍
- **歌曲评论功能添加**: 添加歌曲的评论查看功能

- 修复私人漫游自动播放下一首调用多次问题

-
优化播放逻辑，歌曲列表在点击时候不在单首累加, 而是直接获取当前列表所有的歌曲作为播放内容

src/views/AlbumDetail.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="p-8 text-content">
+    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+      ← 返回
+    </button>
+
+    <div v-if="album" class="flex gap-6 mb-8">
+      <img :src="album.picUrl" class="w-44 h-44 rounded-xl object-cover shadow-lg flex-shrink-0" />
+      <div class="flex flex-col justify-between min-w-0">
+        <div>
+          <h1 class="text-2xl font-bold leading-tight">{{ album.name }}</h1>
+          <div v-if="album.artists?.length" class="flex items-center gap-1 mt-2 text-sm text-content-2">
+            <template v-for="(ar, idx) in album.artists" :key="ar.id">
+              <span v-if="idx > 0" class="text-content-3">/</span>
+              <span
+                class="hover:text-accent-text cursor-pointer transition"
+                @click="ar.id && router.push({ name: 'artist', params: { id: ar.id } })"
+              >{{ ar.name }}</span>
+            </template>
+          </div>
+          <p class="text-xs text-content-3 mt-2">
+            {{ formatDate(album.publishTime) }} · {{ songs.length }} 首歌曲
+          </p>
+        </div>
+        <div class="flex items-center gap-3 mt-4">
+          <button
+            @click="playAll"
+            class="px-5 py-2 bg-accent hover:bg-accent-hover rounded-full text-white font-medium transition flex items-center gap-2"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2.5v11l9-5.5z"/></svg>
+            播放全部
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="loading" class="text-content-2">加载中...</div>
+
+    <div v-else class="space-y-1">
+      <div
+        v-for="(song, index) in songs"
+        :key="song.id"
+        @click="playSingle(song)"
+        class="flex items-center gap-4 p-3 rounded-xl hover:bg-subtle transition cursor-pointer group"
+        :class="{ 'bg-accent-dim': isCurrentSong(song.id) }"
+      >
+        <div class="w-6 text-right flex-shrink-0 flex items-center justify-end h-5">
+          <div v-if="isCurrentSong(song.id)" class="flex items-center justify-end">
+            <div class="flex items-center gap-[3px] h-4">
+              <span class="w-[3px] bg-accent-text rounded-full animate-bounce" style="height: 50%; animation-delay: 0ms"></span>
+              <span class="w-[3px] bg-accent-text rounded-full animate-bounce" style="height: 100%; animation-delay: 150ms"></span>
+              <span class="w-[3px] bg-accent-text rounded-full animate-bounce" style="height: 35%; animation-delay: 300ms"></span>
+            </div>
+          </div>
+          <template v-else>
+            <span class="text-xs text-content-3 group-hover:hidden">{{ index + 1 }}</span>
+            <svg class="hidden group-hover:block text-content" width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2.5v11l9-5.5z"/></svg>
+          </template>
+        </div>
+        <img :src="song.al?.picUrl" class="w-10 h-10 rounded object-cover flex-shrink-0" />
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium truncate" :class="isCurrentSong(song.id) ? 'text-accent-text' : ''">{{ song.name }}</p>
+          <p class="text-xs text-content-2 truncate">
+            <template v-for="(a, i) in song.ar || []" :key="a.id || i">
+              <span v-if="i > 0" class="text-content-3">/</span>
+              <span class="hover:text-accent-text cursor-pointer transition" @click.stop="a.id && router.push({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
+            </template>
+            <template v-if="song.al?.name">
+              <span class="text-content-3 mx-1">·</span>
+              <span class="hover:text-accent-text cursor-pointer transition" @click.stop="song.al.id && router.push({ name: 'album', params: { id: song.al.id } })">{{ song.al.name }}</span>
+            </template>
+          </p>
+        </div>
+        <button @click.stop="player.toggleLike(song.id)" class="text-content-3 hover:text-danger transition flex-shrink-0">
+          <svg v-if="player.isLiked(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-danger"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+        </button>
+        <button @click.stop="download.downloadSong(song)" class="text-content-3 hover:text-accent-text transition flex-shrink-0" :title="download.isDownloaded(song.id) ? '已下载' : '下载'">
+          <svg v-if="download.isDownloading(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 11-6.22-8.56"/></svg>
+          <svg v-else-if="download.isDownloaded(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent-text"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+        </button>
+        <SongItemMenu :song-id="song.id" />
+        <span class="text-xs text-content-3">{{ formatDuration(song.dt) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { invoke } from '@tauri-apps/api/core';
+import { usePlayerStore } from '../stores/player';
+import { useDownload } from '../composables/useDownload';
+import { formatDuration } from '../utils/format';
+import SongItemMenu from '../components/SongItemMenu.vue';
+
+const route = useRoute();
+const router = useRouter();
+const player = usePlayerStore();
+const download = useDownload();
+
+const album = ref<any>(null);
+const songs = ref<any[]>([]);
+const loading = ref(true);
+
+function formatDate(ts: number): string {
+  if (!ts) return '';
+  const d = new Date(ts);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+async function fetchAlbum(id: number) {
+  loading.value = true;
+  album.value = null;
+  songs.value = [];
+  try {
+    const jsonStr: string = await invoke('album_detail', { id });
+    const data = JSON.parse(jsonStr);
+    const a = data.album;
+    if (a) {
+      delete a.uid;
+      if (a.artists) a.artists.forEach((ar: any) => delete ar.uid);
+    }
+    album.value = a;
+    songs.value = data.songs || [];
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  fetchAlbum(Number(route.params.id));
+});
+
+watch(() => route.params.id, (newId) => {
+  if (newId) fetchAlbum(Number(newId));
+});
+
+function isCurrentSong(songId: number): boolean {
+  return player.currentSong?.id === songId;
+}
+
+async function playSingle(song: any) {
+  const idx = songs.value.findIndex((s: any) => s.id === song.id);
+  player.playFromList(songs.value, idx >= 0 ? idx : 0);
+}
+
+function playAll() {
+  if (songs.value.length === 0) return;
+  player.playAll(songs.value);
+}
+</script>

src/views/ArtistDetail.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="p-8 text-content">
+    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+      ← 返回
+    </button>
+
+    <div v-if="artist" class="flex gap-6 mb-8">
+      <img :src="artist.cover" class="w-44 h-44 rounded-xl object-cover shadow-lg flex-shrink-0" />
+      <div class="flex flex-col justify-between min-w-0">
+        <div>
+          <h1 class="text-2xl font-bold leading-tight">{{ artist.name }}</h1>
+          <p class="text-xs text-content-3 mt-2">
+            {{ formatPlayCount(artist.followeds || 0) }} 粉丝 · {{ artist.musicSize || 0 }} 首歌曲
+          </p>
+        </div>
+        <div class="flex items-center gap-3 mt-4">
+          <button
+            @click="playAll"
+            class="px-5 py-2 bg-accent hover:bg-accent-hover rounded-full text-white font-medium transition flex items-center gap-2"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2.5v11l9-5.5z"/></svg>
+            播放全部
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex gap-2 mb-6">
+      <button
+        v-for="tab in tabs"
+        :key="tab.key"
+        @click="activeTab = tab.key"
+        class="px-4 py-1.5 rounded-full text-sm transition"
+        :class="activeTab === tab.key ? 'bg-accent text-white' : 'bg-subtle text-content-2 hover:bg-muted'"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <div v-if="loading" class="text-content-2">加载中...</div>
+
+    <template v-else>
+      <div v-if="activeTab === 'songs'" class="space-y-1">
+        <div
+          v-for="(song, index) in songs"
+          :key="song.id"
+          @click="playSingle(song)"
+          class="flex items-center gap-4 p-3 rounded-xl hover:bg-subtle transition cursor-pointer group"
+          :class="{ 'bg-accent-dim': isCurrentSong(song.id) }"
+        >
+          <div class="w-6 text-right flex-shrink-0 flex items-center justify-end h-5">
+            <div v-if="isCurrentSong(song.id)" class="flex items-center justify-end">
+              <div class="flex items-center gap-[3px] h-4">
+                <span class="w-[3px] bg-accent-text rounded-full animate-bounce" style="height: 50%; animation-delay: 0ms"></span>
+                <span class="w-[3px] bg-accent-text rounded-full animate-bounce" style="height: 100%; animation-delay: 150ms"></span>
+                <span class="w-[3px] bg-accent-text rounded-full animate-bounce" style="height: 35%; animation-delay: 300ms"></span>
+              </div>
+            </div>
+            <template v-else>
+              <span class="text-xs text-content-3 group-hover:hidden">{{ index + 1 }}</span>
+              <svg class="hidden group-hover:block text-content" width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2.5v11l9-5.5z"/></svg>
+            </template>
+          </div>
+          <img :src="song.al?.picUrl" class="w-10 h-10 rounded object-cover flex-shrink-0" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium truncate" :class="isCurrentSong(song.id) ? 'text-accent-text' : ''">{{ song.name }}</p>
+            <p class="text-xs text-content-2 truncate">
+              <template v-for="(a, i) in song.ar || []" :key="a.id || i">
+                <span v-if="i > 0" class="text-content-3">/</span>
+                <span class="hover:text-accent-text cursor-pointer transition" @click.stop="a.id && router.push({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
+              </template>
+              <template v-if="song.al?.name">
+                <span class="text-content-3 mx-1">·</span>
+                <span class="hover:text-accent-text cursor-pointer transition" @click.stop="song.al.id && router.push({ name: 'album', params: { id: song.al.id } })">{{ song.al.name }}</span>
+              </template>
+            </p>
+          </div>
+          <button @click.stop="player.toggleLike(song.id)" class="text-content-3 hover:text-danger transition flex-shrink-0">
+            <svg v-if="player.isLiked(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-danger"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+          </button>
+          <button @click.stop="download.downloadSong(song)" class="text-content-3 hover:text-accent-text transition flex-shrink-0" :title="download.isDownloaded(song.id) ? '已下载' : '下载'">
+            <svg v-if="download.isDownloading(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 11-6.22-8.56"/></svg>
+            <svg v-else-if="download.isDownloaded(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent-text"><polyline points="20 6 9 17 4 12"/></svg>
+            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          </button>
+          <SongItemMenu :song-id="song.id" />
+          <span class="text-xs text-content-3">{{ formatDuration(song.dt) }}</span>
+        </div>
+      </div>
+
+      <div v-if="activeTab === 'albums'" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        <div
+          v-for="album in albums"
+          :key="album.id"
+          @click="router.push({ name: 'album', params: { id: album.id } })"
+          class="bg-subtle rounded-xl overflow-hidden hover:bg-muted transition cursor-pointer"
+        >
+          <img :src="album.picUrl" class="w-full aspect-square object-cover" />
+          <div class="p-3">
+            <p class="text-sm font-medium truncate">{{ album.name }}</p>
+            <p class="text-xs text-content-2 mt-1">{{ formatAlbumDate(album.publishTime) }}</p>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="activeTab === 'desc'" class="max-w-2xl">
+        <p class="text-sm text-content-2 leading-relaxed whitespace-pre-wrap">{{ briefDesc }}</p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { invoke } from '@tauri-apps/api/core';
+import { usePlayerStore } from '../stores/player';
+import { useDownload } from '../composables/useDownload';
+import { formatDuration, formatPlayCount } from '../utils/format';
+import SongItemMenu from '../components/SongItemMenu.vue';
+
+const route = useRoute();
+const router = useRouter();
+const player = usePlayerStore();
+const download = useDownload();
+
+const artist = ref<any>(null);
+const songs = ref<any[]>([]);
+const albums = ref<any[]>([]);
+const briefDesc = ref('');
+const loading = ref(true);
+const activeTab = ref('songs');
+
+const tabs = [
+  { key: 'songs', label: '热门歌曲' },
+  { key: 'albums', label: '专辑' },
+  { key: 'desc', label: '简介' },
+];
+
+async function fetchArtist(id: number) {
+  loading.value = true;
+  artist.value = null;
+  songs.value = [];
+  albums.value = [];
+  briefDesc.value = '';
+  try {
+    const [detailStr, songsStr, albumStr, descStr] = await Promise.all([
+      invoke('artist_detail', { id }) as Promise<string>,
+      invoke('artist_songs', { query: { id, order: 'hot', limit: 50, offset: 0 } }) as Promise<string>,
+      invoke('artist_album', { id, limit: 30, offset: 0 }) as Promise<string>,
+      invoke('artist_desc', { id }) as Promise<string>,
+    ]);
+    const detailData = JSON.parse(detailStr);
+    artist.value = detailData.artist;
+    const songsData = JSON.parse(songsStr);
+    songs.value = songsData.songs || [];
+    const albumData = JSON.parse(albumStr);
+    const rawAlbums = albumData.hotAlbums || [];
+    rawAlbums.forEach((a: any) => {
+      delete a.uid;
+      if (a.artist) delete a.artist.uid;
+      if (a.artists) a.artists.forEach((ar: any) => delete ar.uid);
+    });
+    albums.value = rawAlbums;
+    const descData = JSON.parse(descStr);
+    briefDesc.value = descData.briefDesc || '';
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  fetchArtist(Number(route.params.id));
+});
+
+watch(() => route.params.id, (newId) => {
+  if (newId) fetchArtist(Number(newId));
+});
+
+function formatAlbumDate(ts: number): string {
+  if (!ts) return '';
+  const d = new Date(ts);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+function isCurrentSong(songId: number): boolean {
+  return player.currentSong?.id === songId;
+}
+
+async function playSingle(song: any) {
+  const idx = songs.value.findIndex((s: any) => s.id === song.id);
+  player.playFromList(songs.value, idx >= 0 ? idx : 0);
+}
+
+function playAll() {
+  if (songs.value.length === 0) return;
+  player.playAll(songs.value);
+}
+</script>

src/views/DailySongs.vue

@@ -39,7 +39,14 @@
         <div class="flex-1 min-w-0">
           <p class="text-sm font-medium truncate" :class="isCurrentSong(song.id) ? 'text-accent-text' : ''">{{ song.name }}</p>
           <p class="text-xs text-content-2 truncate">
-            {{ song.ar?.map((a: any) => a.name).join(' / ') }}
+            <template v-for="(a, i) in song.ar || []" :key="a.id || i">
+              <span v-if="i > 0" class="text-content-3">/</span>
+              <span class="hover:text-accent-text cursor-pointer transition" @click.stop="a.id && router.push({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
+            </template>
+            <template v-if="song.al?.name">
+              <span class="text-content-3 mx-1">·</span>
+              <span class="hover:text-accent-text cursor-pointer transition" @click.stop="song.al.id && router.push({ name: 'album', params: { id: song.al.id } })">{{ song.al.name }}</span>
+            </template>
           </p>
         </div>
         <button @click.stop="player.toggleLike(song.id)" class="text-content-3 hover:text-danger transition flex-shrink-0">
@@ -51,6 +58,7 @@
           <svg v-else-if="download.isDownloaded(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent-text"><polyline points="20 6 9 17 4 12"/></svg>
           <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
         </button>
+        <SongItemMenu :song-id="song.id" />
         <span class="text-xs text-content-3">{{ formatDuration(song.dt) }}</span>
       </div>
     </div>
@@ -59,13 +67,16 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
 import { invoke } from '@tauri-apps/api/core';
+import SongItemMenu from '../components/SongItemMenu.vue';
 import { usePlayerStore } from '../stores/player';
 import { useDownload } from '../composables/useDownload';
 import { formatDuration } from '../utils/format';
 
 const player = usePlayerStore();
 const download = useDownload();
+const router = useRouter();
 const songs = ref<any[]>([]);
 const loading = ref(true);
 

src/views/Discover.vue

@@ -47,7 +47,14 @@
         <div class="flex-1 min-w-0">
           <p class="font-medium truncate">{{ song.name }}</p>
           <p class="text-sm text-content-2 truncate">
-            {{ song.ar?.map((a: any) => a.name).join(' / ') }}
+            <template v-for="(a, i) in song.ar || []" :key="a.id || i">
+              <span v-if="i > 0" class="text-content-3">/</span>
+              <span class="hover:text-accent-text cursor-pointer transition" @click.stop="a.id && router.push({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
+            </template>
+            <template v-if="song.al?.name">
+              <span class="text-content-3 mx-1">·</span>
+              <span class="hover:text-accent-text cursor-pointer transition" @click.stop="song.al.id && router.push({ name: 'album', params: { id: song.al.id } })">{{ song.al.name }}</span>
+            </template>
           </p>
         </div>
         <button @click.stop="download.downloadSong(song)" class="text-content-3 hover:text-accent-text transition flex-shrink-0" :title="download.isDownloaded(song.id) ? '已下载' : '下载'">
@@ -55,6 +62,7 @@
           <svg v-else-if="download.isDownloaded(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent-text"><polyline points="20 6 9 17 4 12"/></svg>
           <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
         </button>
+        <SongItemMenu :song-id="song.id" />
       </div>
       <p v-if="!loading && hasSearched && results.length === 0" class="text-content-2">无结果</p>
     </div>
@@ -69,6 +77,7 @@ import { useRouter, useRoute } from 'vue-router';
 import { invoke } from '@tauri-apps/api/core';
 import { usePlayerStore } from '../stores/player';
 import { useDownload } from '../composables/useDownload';
+import SongItemMenu from '../components/SongItemMenu.vue';
 
 const router = useRouter();
 const route = useRoute();

src/views/FavoriteSongs.vue

@@ -30,7 +30,14 @@
         <div class="flex-1 min-w-0">
           <p class="text-sm font-medium truncate">{{ song.name }}</p>
           <p class="text-xs text-content-2 truncate">
-            {{ song.ar?.map((a: any) => a.name).join(' / ') }}
+            <template v-for="(a, i) in song.ar || []" :key="a.id || i">
+              <span v-if="i > 0" class="text-content-3">/</span>
+              <span class="hover:text-accent-text cursor-pointer transition" @click.stop="a.id && router.push({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
+            </template>
+            <template v-if="song.al?.name">
+              <span class="text-content-3 mx-1">·</span>
+              <span class="hover:text-accent-text cursor-pointer transition" @click.stop="song.al.id && router.push({ name: 'album', params: { id: song.al.id } })">{{ song.al.name }}</span>
+            </template>
           </p>
         </div>
         <button @click.stop="player.toggleLike(song.id)" class="text-content-3 hover:text-danger transition flex-shrink-0">
@@ -42,6 +49,7 @@
           <svg v-else-if="download.isDownloaded(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent-text"><polyline points="20 6 9 17 4 12"/></svg>
           <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
         </button>
+        <SongItemMenu :song-id="song.id" />
         <span class="text-xs text-content-3">{{ formatDuration(song.dt) }}</span>
       </div>
     </div>
@@ -50,7 +58,9 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
 import { invoke } from '@tauri-apps/api/core';
+import SongItemMenu from '../components/SongItemMenu.vue';
 import { usePlayerStore } from '../stores/player';
 import { useUserStore } from '../stores/user';
 import { useDownload } from '../composables/useDownload';
@@ -60,6 +70,7 @@ import { formatDuration } from '../utils/format';
 const player = usePlayerStore();
 const userStore = useUserStore();
 const download = useDownload();
+const router = useRouter();
 const songs = ref<any[]>([]);
 const loading = ref(true);
 

src/views/PlaylistDetail.vue

@@ -69,7 +69,14 @@
         <div class="flex-1 min-w-0">
           <p class="text-sm font-medium truncate" :class="isCurrentSong(song.id) ? 'text-accent-text' : ''">{{ song.name }}</p>
           <p class="text-xs text-content-2 truncate">
-            {{ song.ar?.map((a: any) => a.name).join(' / ') }}
+            <template v-for="(a, i) in song.ar || []" :key="a.id || i">
+              <span v-if="i > 0" class="text-content-3">/</span>
+              <span class="hover:text-accent-text cursor-pointer transition" @click.stop="a.id && router.push({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
+            </template>
+            <template v-if="song.al?.name">
+              <span class="text-content-3 mx-1">·</span>
+              <span class="hover:text-accent-text cursor-pointer transition" @click.stop="song.al.id && router.push({ name: 'album', params: { id: song.al.id } })">{{ song.al.name }}</span>
+            </template>
           </p>
         </div>
         <button @click.stop="player.toggleLike(song.id)" class="text-content-3 hover:text-danger transition flex-shrink-0">
@@ -81,23 +88,31 @@
           <svg v-else-if="download.isDownloaded(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent-text"><polyline points="20 6 9 17 4 12"/></svg>
           <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
         </button>
+        <SongItemMenu :song-id="song.id" />
         <span class="text-xs text-content-3">{{ formatDuration(song.dt) }}</span>
       </div>
     </div>
+
+    <div v-if="playlist" class="mt-8">
+      <CommentSection :type="2" :id="Number(route.params.id)" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { invoke } from '@tauri-apps/api/core';
 import { usePlayerStore } from '../stores/player';
 import { useUserStore } from '../stores/user';
 import { useDownload } from '../composables/useDownload';
 import { showToast } from '../composables/useToast';
 import { formatDuration, formatPlayCount } from '../utils/format';
+import SongItemMenu from '../components/SongItemMenu.vue';
+import CommentSection from '../components/CommentSection.vue';
 
 const route = useRoute();
+const router = useRouter();
 const player = usePlayerStore();
 const userStore = useUserStore();
 const download = useDownload();

src/views/RecentPlays.vue

@@ -17,7 +17,14 @@
         <div class="flex-1 min-w-0">
           <p class="text-sm font-medium truncate">{{ song.name }}</p>
           <p class="text-xs text-content-2 truncate">
-            {{ song.ar?.map((a: any) => a.name).join(' / ') }}
+            <template v-for="(a, i) in song.ar || []" :key="a.id || i">
+              <span v-if="i > 0" class="text-content-3">/</span>
+              <span class="hover:text-accent-text cursor-pointer transition" @click.stop="a.id && router.push({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
+            </template>
+            <template v-if="song.al?.name">
+              <span class="text-content-3 mx-1">·</span>
+              <span class="hover:text-accent-text cursor-pointer transition" @click.stop="song.al.id && router.push({ name: 'album', params: { id: song.al.id } })">{{ song.al.name }}</span>
+            </template>
           </p>
         </div>
         <button @click.stop="player.toggleLike(song.id)" class="text-content-3 hover:text-danger transition flex-shrink-0">
@@ -29,6 +36,7 @@
           <svg v-else-if="download.isDownloaded(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent-text"><polyline points="20 6 9 17 4 12"/></svg>
           <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
         </button>
+        <SongItemMenu :song-id="song.id" />
         <span class="text-xs text-content-3">{{ formatDuration(song.dt ?? 0) }}</span>
       </div>
     </div>
@@ -39,7 +47,10 @@
 import { usePlayerStore } from '../stores/player';
 import { useDownload } from '../composables/useDownload';
 import { formatDuration } from '../utils/format';
+import { useRouter } from 'vue-router';
+import SongItemMenu from '../components/SongItemMenu.vue';
 
 const player = usePlayerStore();
 const download = useDownload();
+const router = useRouter();
 </script>

src/views/Roam.vue

@@ -26,7 +26,14 @@
 
       <h1 class="text-3xl font-bold mb-2">{{ currentSong.name }}</h1>
       <p class="text-lg text-content-2 mb-8">
-        {{ artists }}
+        <template v-for="(a, i) in currentSong.ar || []" :key="a.id || i">
+          <span v-if="i > 0" class="text-content-3">/</span>
+          <span class="hover:text-accent-text cursor-pointer transition" @click="a.id && router.push({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
+        </template>
+        <template v-if="currentSong.al?.name">
+          <span class="text-content-3 mx-1">·</span>
+          <span class="hover:text-accent-text cursor-pointer transition" @click="currentSong.al.id && router.push({ name: 'album', params: { id: currentSong.al.id } })">{{ currentSong.al.name }}</span>
+        </template>
       </p>
 
       <div class="flex items-center gap-8">
@@ -58,8 +65,10 @@ import { ref, computed, watch, onMounted } from 'vue';
 import { usePlayerStore } from '../stores/player';
 import { invoke } from '@tauri-apps/api/core';
 import { normalizeSong } from '../utils/song';
+import { useRouter } from 'vue-router';
 
 const player = usePlayerStore();
+const router = useRouter();
 const coverError = ref(false);
 
 const currentSong = computed(() => {
@@ -76,12 +85,6 @@ const coverUrl = computed(() => {
 
 watch(coverUrl, () => { coverError.value = false; });
 
-const artists = computed(() => {
-  if (!currentSong.value) return '';
-  return currentSong.value.ar?.map((a: any) => a.name).join(' / ') ||
-         currentSong.value.artists?.map((a: any) => a.name).join(' / ') || '';
-});
-
 onMounted(async () => {
   if (!player.isFmMode || !player.currentSong) {
     await startFm();