feat: 架构重构与跨平台媒体控制集成

## 后端

- 替换 rodio 为 symphonia + ringbuf，重构 audio.rs 播放引擎
- 重构 api.rs，使用 api_call! 宏统一 API 调用模式
- 新增 media_controls.rs，使用 souvlaki 实现跨平台系统媒体控制
  (Linux MPRIS / Windows SMTC / macOS Now Playing)
- 版本号升至 v0.5.0

## 前端 - 新增

- 新增 SongListItem 通用组件
- 新增 useOnlineStatus composable，检测网络状态
- 新增 usePageCache composable，页面数据缓存与失效
- 新增 getCoverUrl()、formatDate() 工具函数
- 新增 emitPlaybackState() 同步播放状态到系统媒体控制
- 新增 mpris-command 事件监听，响应系统媒体控制命令
- 新增 Toast 离线/恢复在线提示
- 各页面新增断网恢复后自动重试加载
- 新增路由守卫：已登录用户访问 /login 重定向至首页
- 新增音量持久化（settings store + localStorage）
- 新增禁用右键菜单与用户选择限制（输入框除外）

## 前端 - 变更

- Song 接口从 player.ts 迁移至 song.ts 并导出
- AlbumDetail/ArtistDetail/PlaylistDetail/RecentPlays/LocalMusic 迁移至 SongListItem
- PlayerBar 队列列表迁移至 SongListItem，封面使用 getCoverUrl()
- downloadSong 参数类型从内联对象改为 Song，使用 getCoverUrl()
- 默认主题从 green 改为 blue，ThemeName 及相关列表中 blue 移至首位
- 全局快捷键从 Alt+Control 改为 Control+Alt 顺序
- formatShortcut 新增 KeyP → P 显示
- keep-alive 从 max=3 固定 include 改为 max=5 动态列表，窗口隐藏时释放
- App.vue 封面使用 getCoverUrl() 替代手动 al/album 回退
- formatPlayCount 提取常量
- Login.vue text-warning 改为 text-yellow-400

## 前端 - 删除

- 删除 Search.vue（与 Discover.vue 重复）
- 删除 SongItemMenu.vue（被 SongListItem 替代）

## 修复

- 更新器跳过版本逻辑：仅静默检查时跳过已忽略版本，手动检查不再跳过
- 重复播放同一首歌时无法恢复播放
- settings.ts 重复的 ThemeName 定义
- PlayerBar.vue modeTexts 缺少类型注解
- Home.vue map 回调参数缺少类型
- Settings.vue v-for key 类型不匹配

src/views/AlbumDetail.vue

@@ -11,7 +11,7 @@
           <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 v-if="(idx as number) > 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 } })"
@@ -37,52 +37,37 @@
     <div v-if="loading" class="text-content-2">加载中...</div>
 
     <div v-else class="space-y-1">
-      <div
+      <SongListItem
         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) }"
+        :song="song"
+        :index="index"
+        :is-current="player.currentSong?.id === song.id"
+        show-index
+        show-like
+        show-download
+        show-menu
+        show-duration
+        show-playing-overlay
+        :container-class="player.currentSong?.id === song.id ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
+        @click="player.playFromList(songs, index)"
       >
-        <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>
+        <template #index="{ index: idx, isCurrent }">
+          <div class="w-6 text-right flex-shrink-0 flex items-center justify-end h-5">
+            <div v-if="isCurrent" 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">{{ idx + 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>
-          <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>
+        </template>
+      </SongListItem>
     </div>
   </div>
 </template>
@@ -92,25 +77,18 @@ 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';
+import { normalizeSong, type Song } from '../utils/song';
+import { formatDate } from '../utils/format';
+import SongListItem from '../components/SongListItem.vue';
 
 const route = useRoute();
 const router = useRouter();
 const player = usePlayerStore();
-const download = useDownload();
 
 const album = ref<any>(null);
-const songs = ref<any[]>([]);
+const songs = ref<Song[]>([]);
 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;
@@ -118,13 +96,8 @@ async function fetchAlbum(id: number) {
   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 || [];
+    album.value = data.album;
+    songs.value = (data.songs || []).map(normalizeSong);
   } catch (e) {
     console.error(e);
   } finally {
@@ -140,15 +113,6 @@ 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);

src/views/ArtistDetail.vue

@@ -41,52 +41,37 @@
 
     <template v-else>
       <div v-if="activeTab === 'songs'" class="space-y-1">
-        <div
+        <SongListItem
           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) }"
+          :song="song"
+          :index="index"
+          :is-current="player.currentSong?.id === song.id"
+          show-index
+          show-like
+          show-download
+          show-menu
+          show-duration
+          show-playing-overlay
+          :container-class="player.currentSong?.id === song.id ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
+          @click="player.playFromList(songs, index)"
         >
-          <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>
+          <template #index="{ index: idx, isCurrent }">
+            <div class="w-6 text-right flex-shrink-0 flex items-center justify-end h-5">
+              <div v-if="isCurrent" 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">{{ idx + 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>
-            <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>
+          </template>
+        </SongListItem>
       </div>
 
       <div v-if="activeTab === 'albums'" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
@@ -99,7 +84,7 @@
           <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>
+            <p class="text-xs text-content-2 mt-1">{{ formatDate(album.publishTime) }}</p>
           </div>
         </div>
       </div>
@@ -116,17 +101,16 @@ 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';
+import { formatPlayCount, formatDate } from '../utils/format';
+import { normalizeSong, type Song } from '../utils/song';
+import SongListItem from '../components/SongListItem.vue';
 
 const route = useRoute();
 const router = useRouter();
 const player = usePlayerStore();
-const download = useDownload();
 
 const artist = ref<any>(null);
-const songs = ref<any[]>([]);
+const songs = ref<Song[]>([]);
 const albums = ref<any[]>([]);
 const briefDesc = ref('');
 const loading = ref(true);
@@ -154,15 +138,9 @@ async function fetchArtist(id: number) {
     const detailData = JSON.parse(detailStr);
     artist.value = detailData.artist;
     const songsData = JSON.parse(songsStr);
-    songs.value = songsData.songs || [];
+    songs.value = (songsData.songs || []).map(normalizeSong);
     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;
+    albums.value = albumData.hotAlbums || [];
     const descData = JSON.parse(descStr);
     briefDesc.value = descData.briefDesc || '';
   } catch (e) {
@@ -180,21 +158,6 @@ 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);

src/views/DailySongs.vue

@@ -15,84 +15,87 @@
     </div>
     <div v-if="loading" class="text-content-2">加载中...</div>
     <div v-else class="space-y-2">
-      <div
+      <SongListItem
         v-for="(song, index) in songs"
         :key="song.id"
+        :song="song"
+        :index="index"
+        :is-current="isCurrentSong(song.id)"
+        show-index
+        show-like
+        show-download
+        show-menu
+        show-duration
+        show-playing-overlay
+        :container-class="isCurrentSong(song.id) ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
         @click="player.playFromList(songs, index)"
-        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>
+        <template #index="{ index: idx, isCurrent }">
+          <div class="w-6 text-right flex-shrink-0 flex items-center justify-end h-5">
+            <div v-if="isCurrent" 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">{{ idx + 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>
-          <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>
+        </template>
+      </SongListItem>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
+import { ref, onMounted, watch } from 'vue';
 import { invoke } from '@tauri-apps/api/core';
-import SongItemMenu from '../components/SongItemMenu.vue';
+import SongListItem from '../components/SongListItem.vue';
 import { usePlayerStore } from '../stores/player';
-import { useDownload } from '../composables/useDownload';
-import { formatDuration } from '../utils/format';
+import { pageCacheGet, pageCacheSet, pageCacheInvalidate } from '../composables/usePageCache';
+import { normalizeSong, type Song } from '../utils/song';
+import { useOnlineStatus } from '../composables/useOnlineStatus';
+
+defineOptions({ name: 'DailySongsView' });
 
 const player = usePlayerStore();
-const download = useDownload();
-const router = useRouter();
-const songs = ref<any[]>([]);
+const { isOnline } = useOnlineStatus();
+const songs = ref<Song[]>([]);
 const loading = ref(true);
 
 function isCurrentSong(songId: number): boolean {
   return player.currentSong?.id === songId;
 }
 
-onMounted(async () => {
+async function loadData() {
+  const cached = pageCacheGet('dailySongs');
+  if (cached) {
+    songs.value = cached;
+    loading.value = false;
+    return;
+  }
+  loading.value = true;
   try {
     const jsonStr: string = await invoke('recommend_songs');
     const data = JSON.parse(jsonStr);
-    songs.value = data.data?.dailySongs || [];
+    songs.value = (data.data?.dailySongs || []).map(normalizeSong);
+    pageCacheSet('dailySongs', songs.value);
   } catch (e) {
     console.error(e);
   } finally {
     loading.value = false;
   }
+}
+
+onMounted(loadData);
+
+watch(isOnline, (val, old) => {
+  if (val && !old && songs.value.length === 0) {
+    pageCacheInvalidate('dailySongs');
+    loadData();
+  }
 });
 </script>

src/views/Discover.vue

@@ -2,7 +2,6 @@
   <div class="p-8 text-content">
     <h1 class="text-2xl font-bold mb-4">发现音乐</h1>
 
-    <!-- 搜索框 -->
     <input
       v-model="keyword"
       @keyup.enter="handleSearch"
@@ -10,7 +9,6 @@
       class="mb-4 w-full rounded-xl bg-muted p-3 text-content placeholder-content-2 outline-none backdrop-blur"
     />
 
-    <!-- 热门搜索标签（仅在没有搜索且未显示结果时出现） -->
     <div v-if="!hasSearched && !loading && hotTags.length" class="mb-6">
       <h2 class="text-sm font-semibold mb-3">🔥 热门搜索</h2>
       <div class="flex flex-wrap gap-2">
@@ -25,45 +23,19 @@
       </div>
     </div>
 
-    <!-- 输出设备选择 -->
-    <!-- <div class="mb-4">
-      <label class="mr-2 text-sm text-content-2">输出设备：</label>
-      <select v-model="selectedDevice" @change="changeDevice" class="bg-muted text-white rounded p-1 text-sm">
-        <option :value="null">跟随系统默认</option>
-        <option v-for="dev in devices" :key="dev" :value="dev">{{ dev }}</option>
-      </select>
-    </div> -->
-
-    <!-- 搜索结果 -->
     <div v-if="loading" class="text-content-2">搜索中...</div>
     <div v-else class="space-y-3">
-      <div
+      <SongListItem
         v-for="(song, index) in results"
         :key="song.id"
-        @click="playSong(song, index)"
-        class="flex items-center gap-4 p-3 rounded-xl backdrop-blur-md bg-subtle hover:bg-muted border border-line-2 cursor-pointer transition"
-      >
-        <img :src="song.al?.picUrl" class="w-12 h-12 rounded-lg object-cover" />
-        <div class="flex-1 min-w-0">
-          <p class="font-medium truncate">{{ song.name }}</p>
-          <p class="text-sm 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="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" />
-      </div>
+        :song="song"
+        :index="index"
+        show-download
+        show-menu
+        cover-size="w-12 h-12"
+        container-class="backdrop-blur-md bg-subtle hover:bg-muted border border-line-2"
+        @click="player.playFromList(results, index)"
+      />
       <p v-if="!loading && hasSearched && results.length === 0" class="text-content-2">无结果</p>
     </div>
   </div>
@@ -72,38 +44,43 @@
 <script setup lang="ts">
 defineOptions({ name: 'DiscoverView' });
 
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 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';
+import SongListItem from '../components/SongListItem.vue';
+import { normalizeSong, type Song } from '../utils/song';
+import { pageCacheGet, pageCacheSet, pageCacheInvalidate } from '../composables/usePageCache';
+import { useOnlineStatus } from '../composables/useOnlineStatus';
 
 const router = useRouter();
 const route = useRoute();
 const player = usePlayerStore();
-const download = useDownload();
+const { isOnline } = useOnlineStatus();
 
 const keyword = ref('');
-const results = ref<any[]>([]);
+const results = ref<Song[]>([]);
 const loading = ref(false);
 const hasSearched = ref(false);
 const hotTags = ref<any[]>([]);
 
-const devices = ref<string[]>([]);
+async function loadHotTags() {
+  const cached = pageCacheGet('discover_hotTags');
+  if (cached) {
+    hotTags.value = cached;
+  } else {
+    try {
+      const json = await invoke('get_hot_search');
+      const data = JSON.parse(json as string);
+      hotTags.value = (data.data || []).slice(0, 12);
+      pageCacheSet('discover_hotTags', hotTags.value);
+    } catch {}
+  }
+}
 
 onMounted(async () => {
-  // 获取输出设备列表
-  try { devices.value = await invoke('get_output_devices'); } catch {}
+  await loadHotTags();
 
-  // 获取热门搜索
-  try {
-    const json = await invoke('get_hot_search');
-    const data = JSON.parse(json as string);
-    hotTags.value = (data.data || []).slice(0, 12);
-  } catch {}
-
-  // 检查路由是否有查询关键词，自动搜索
   const q = route.query.q as string;
   if (q) {
     keyword.value = q;
@@ -112,6 +89,13 @@ onMounted(async () => {
   }
 });
 
+watch(isOnline, (val, old) => {
+  if (val && !old && hotTags.value.length === 0) {
+    pageCacheInvalidate('discover_hotTags');
+    loadHotTags();
+  }
+});
+
 async function handleSearch() {
   if (!keyword.value.trim()) return;
   loading.value = true;
@@ -119,7 +103,7 @@ async function handleSearch() {
   try {
     const jsonStr: string = await invoke('search_songs', { query: { keyword: keyword.value } });
     const data = JSON.parse(jsonStr);
-    results.value = data.result?.songs || [];
+    results.value = (data.result?.songs || []).map(normalizeSong);
   } catch (e) {
     console.error('搜索出错：', e);
   } finally {
@@ -131,16 +115,4 @@ function searchTag(tag: string) {
   keyword.value = tag;
   handleSearch();
 }
-
-async function playSong(_song: any, index: number) {
-  const normalized = results.value.map((s: any) => ({
-    id: s.id,
-    name: s.name,
-    ar: s.ar || s.artists || [],
-    al: s.al || s.album || { picUrl: '' },
-    dt: s.dt || 0,
-  }));
-  player.playFromList(normalized, index);
-}
-
 </script>

src/views/FavoriteSongs.vue

@@ -19,66 +19,52 @@
     <div v-else-if="loading" class="text-content-2">加载中...</div>
     <div v-else-if="songs.length === 0" class="text-content-2">暂无喜欢的音乐</div>
     <div v-else class="space-y-2">
-      <div
+      <SongListItem
         v-for="(song, index) in songs"
         :key="song.id"
+        :song="song"
+        :index="index"
+        show-index
+        show-like
+        show-download
+        show-menu
+        show-duration
         @click="player.playFromList(songs, index)"
-        class="flex items-center gap-4 p-3 rounded-xl hover:bg-subtle transition cursor-pointer"
-      >
-        <span class="text-xs text-content-3 w-6 text-right">{{ index + 1 }}</span>
-        <img :src="song.al?.picUrl" class="w-10 h-10 rounded object-cover" />
-        <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">
-            <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 } from 'vue';
-import { useRouter } from 'vue-router';
+import { ref, onMounted, watch } from 'vue';
 import { invoke } from '@tauri-apps/api/core';
-import SongItemMenu from '../components/SongItemMenu.vue';
+import SongListItem from '../components/SongListItem.vue';
 import { usePlayerStore } from '../stores/player';
 import { useUserStore } from '../stores/user';
-import { useDownload } from '../composables/useDownload';
-import { normalizeSong } from '../utils/song';
-import { formatDuration } from '../utils/format';
+import { normalizeSong, type Song } from '../utils/song';
+import { pageCacheGet, pageCacheSet, pageCacheInvalidate } from '../composables/usePageCache';
+import { useOnlineStatus } from '../composables/useOnlineStatus';
+
+defineOptions({ name: 'FavoriteSongsView' });
 
 const player = usePlayerStore();
 const userStore = useUserStore();
-const download = useDownload();
-const router = useRouter();
-const songs = ref<any[]>([]);
+const { isOnline } = useOnlineStatus();
+const songs = ref<Song[]>([]);
 const loading = ref(true);
 
-onMounted(async () => {
+async function loadData() {
   if (!userStore.isLoggedIn) {
     loading.value = false;
     return;
   }
+  const cached = pageCacheGet('favoriteSongs');
+  if (cached) {
+    songs.value = cached;
+    loading.value = false;
+    return;
+  }
+  loading.value = true;
   try {
     const playlistJson: string = await invoke('user_playlist', { uid: userStore.user!.userId });
     const playlistData = JSON.parse(playlistJson);
@@ -91,10 +77,20 @@ onMounted(async () => {
     const trackJson: string = await invoke('playlist_track_all', { query: { id: likePlaylistId } });
     const trackData = JSON.parse(trackJson);
     songs.value = (trackData.songs || []).map(normalizeSong);
+    pageCacheSet('favoriteSongs', songs.value);
   } catch (e) {
     console.error(e);
   } finally {
     loading.value = false;
   }
+}
+
+onMounted(loadData);
+
+watch(isOnline, (val, old) => {
+  if (val && !old && userStore.isLoggedIn && songs.value.length === 0) {
+    pageCacheInvalidate('favoriteSongs');
+    loadData();
+  }
 });
 </script>

src/views/Home.vue

@@ -13,7 +13,7 @@
             <p class="text-xs text-white/60 mb-1">📅 {{ todayStr }}</p>
             <h2 class="text-2xl font-bold">每日推荐</h2>
           </div>
-          <p class="text-xs text-white/60">根据你的口味生成，每天 6:00 更新</p>
+          <p class="text-xs text-white/60">根据你的口味生成，每天凌晨更新</p>
         </div>
         <div class="absolute right-4 top-1/2 -translate-y-1/2 text-6xl opacity-20">🎧</div>
       </div>
@@ -80,9 +80,9 @@
     <!-- 第二行：为你推荐（需登录） -->
     <div v-if="userStore.isLoggedIn && recPlaylists.length" class="mb-10">
       <h2 class="text-xl font-semibold mb-4">🎯 为你推荐</h2>
-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
         <div v-for="pl in recPlaylists" :key="pl.id" @click="goPlaylist(pl.id)"
-          class="bg-subtle rounded-xl overflow-hidden hover:bg-muted transition cursor-pointer">
+          class="bg-subtle rounded-xl overflow-hidden hover:bg-muted transition cursor-pointer max-w-[220px] justify-self-center w-full">
           <img :src="pl.picUrl" class="w-full aspect-square object-cover" />
           <div class="p-3">
             <p class="text-sm font-medium truncate">{{ pl.name }}</p>
@@ -95,9 +95,9 @@
     <!-- 第三行：热门歌单（排行榜） -->
     <div>
       <h2 class="text-xl font-semibold mb-4">📈 热门歌单</h2>
-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
         <div v-for="pl in rankPlaylists" :key="pl.id" @click="goPlaylist(pl.id)"
-          class="bg-subtle rounded-xl overflow-hidden hover:bg-muted transition cursor-pointer backdrop-blur-sm">
+          class="bg-subtle rounded-xl overflow-hidden hover:bg-muted transition cursor-pointer backdrop-blur-sm max-w-[220px] justify-self-center w-full">
           <img :src="pl.coverImgUrl" class="w-full aspect-square object-cover" />
           <div class="p-3">
             <p class="text-sm font-medium truncate">{{ pl.name }}</p>
@@ -109,15 +109,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { invoke } from '@tauri-apps/api/core';
 import { useUserStore } from '../stores/user';
 import { usePlayerStore } from '../stores/player';
+import { pageCacheGet, pageCacheSet, pageCacheInvalidate } from '../composables/usePageCache';
+import { useOnlineStatus } from '../composables/useOnlineStatus';
+import { getCoverUrl } from '../utils/song';
+
+defineOptions({ name: 'HomeView' });
 
 const player = usePlayerStore();
 const router = useRouter();
 const userStore = useUserStore();
+const { isOnline } = useOnlineStatus();
 
 const rankPlaylists = ref<any[]>([]);
 const recPlaylists = ref<any[]>([]);
@@ -128,17 +134,15 @@ import { computed } from 'vue';
 
 
 const fmCoverUrl = computed(() => {
-  return player.fmSong?.al?.picUrl || player.fmSong?.album?.picUrl || '';
+  return getCoverUrl(player.fmSong) || '';
 });
 const fmDisplayName = computed(() => player.fmSong?.name || '私人漫游');
 const fmDisplayArtists = computed(() => {
   if (!player.fmSong) return '';
-  return player.fmSong.ar?.map((a: any) => a.name).join(' / ') ||
-         player.fmSong.artists?.map((a: any) => a.name).join(' / ') || '';
+  return player.fmSong.ar?.map((a: { name: string }) => a.name).join(' / ') || '';
 });
 
 
-// 首次点击播放按钮：开始 FM 并播放
 async function startFmPlay() {
   if (!player.fmSong) {
     await player.loadFm();
@@ -159,11 +163,14 @@ function onFmCardClick() {
   player.openRoamDrawer();
 }
 
-onMounted(async () => {
-  const d = new Date();
-  todayStr.value = `${d.getMonth() + 1}月${d.getDate()}日`;
+async function loadData() {
+  const cached = pageCacheGet('home');
+  if (cached) {
+    rankPlaylists.value = cached.rankPlaylists || [];
+    recPlaylists.value = cached.recPlaylists || [];
+    return;
+  }
 
-  // 排行榜
   const results = await Promise.allSettled(
     RANK_IDS.map(id => invoke('get_playlist_detail', { id }))
   );
@@ -175,7 +182,6 @@ onMounted(async () => {
     })
     .filter(Boolean);
 
-  // 推荐歌单（需登录）
   if (userStore.isLoggedIn) {
     try {
       const json = await invoke('recommend_resource');
@@ -183,6 +189,21 @@ onMounted(async () => {
       recPlaylists.value = data.recommend || [];
     } catch { }
   }
+
+  pageCacheSet('home', { rankPlaylists: rankPlaylists.value, recPlaylists: recPlaylists.value });
+}
+
+onMounted(async () => {
+  const d = new Date();
+  todayStr.value = `${d.getMonth() + 1}月${d.getDate()}日`;
+  await loadData();
+});
+
+watch(isOnline, (val, old) => {
+  if (val && !old && rankPlaylists.value.length === 0 && recPlaylists.value.length === 0) {
+    pageCacheInvalidate('home');
+    loadData();
+  }
 });
 
 function goDaily() {

src/views/LocalMusic.vue

@@ -19,46 +19,38 @@
       当前文件夹下没有音乐文件，支持 mp3、flac、wav、ogg、aac、m4a 格式
     </div>
     <div v-else class="space-y-2">
-      <div
-        v-for="(song, index) in songs"
+      <SongListItem
+        v-for="(song, index) in normalizedSongs"
         :key="song.id + '-' + index"
-        @click="playLocalSong(song, index)"
-        class="flex items-center gap-4 p-3 rounded-xl hover:bg-subtle transition cursor-pointer"
-        :class="{ 'bg-subtle': player.currentSong?.id === song.id }"
+        :song="song"
+        :index="index"
+        :is-current="player.currentSong?.id === song.id"
+        show-index
+        show-duration
+        :container-class="player.currentSong?.id === song.id ? 'bg-subtle hover:bg-subtle' : 'hover:bg-subtle'"
+        @click="player.playFromList(normalizedSongs, index)"
       >
-        <span class="text-xs text-content-3 w-6 text-right flex-shrink-0">{{ index + 1 }}</span>
-        <div class="w-10 h-10 rounded-lg overflow-hidden flex-shrink-0 bg-muted">
-          <img v-if="song.cover" :src="song.cover" class="w-full h-full object-cover" />
-          <div v-else class="w-full h-full flex items-center justify-center">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-content-3"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+        <template #actions>
+          <span class="text-xs text-content-3 flex-shrink-0">{{ formatFileSize(songs[index].fileSize) }}</span>
+          <div class="relative flex-shrink-0">
+            <button
+              @click.stop="toggleMenu(songs[index].id)"
+              class="text-content-3 hover:text-content transition p-1 rounded hover:bg-muted"
+              title="更多"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>
+            </button>
+            <Transition name="fade">
+              <div v-if="openMenuId === songs[index].id" class="absolute right-0 top-full mt-1 w-44 bg-surface border border-line rounded-xl shadow-2xl overflow-hidden z-50" @click.stop>
+                <button @click="confirmDelete(songs[index])" class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-danger/80 hover:bg-danger/10 transition">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
+                  从磁盘中删除
+                </button>
+              </div>
+            </Transition>
           </div>
-        </div>
-        <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.artist }}<template v-if="song.album"> · {{ song.album }}</template>
-          </p>
-        </div>
-        <span class="text-xs text-content-3 flex-shrink-0">{{ formatDuration(song.duration) }}</span>
-        <span class="text-xs text-content-3 flex-shrink-0">{{ formatFileSize(song.fileSize) }}</span>
-        <div class="relative flex-shrink-0">
-          <button
-            @click.stop="toggleMenu(song.id)"
-            class="text-content-3 hover:text-content transition p-1 rounded hover:bg-muted"
-            title="更多"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>
-          </button>
-          <Transition name="fade">
-            <div v-if="openMenuId === song.id" class="absolute right-0 top-full mt-1 w-44 bg-surface border border-line rounded-xl shadow-2xl overflow-hidden z-50" @click.stop>
-              <button @click="confirmDelete(song)" class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-danger/80 hover:bg-danger/10 transition">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
-                从磁盘中删除
-              </button>
-            </div>
-          </Transition>
-        </div>
-      </div>
+        </template>
+      </SongListItem>
     </div>
 
     <Transition name="fade">
@@ -83,12 +75,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { invoke } from '@tauri-apps/api/core';
-import { usePlayerStore, type Song } from '../stores/player';
+import { usePlayerStore } from '../stores/player';
 import { useDownload } from '../composables/useDownload';
 import { useSettingsStore } from '../stores/settings';
 import { showToast } from '../composables/useToast';
+import { pageCacheSet, pageCacheInvalidate } from '../composables/usePageCache';
+import SongListItem from '../components/SongListItem.vue';
+import type { Song } from '../utils/song';
+
+defineOptions({ name: 'LocalMusicView' });
 
 const player = usePlayerStore();
 const download = useDownload();
@@ -113,6 +110,8 @@ const showDeleteConfirm = ref(false);
 const deleteTarget = ref<LocalSong | null>(null);
 const openMenuId = ref<number | null>(null);
 
+const normalizedSongs = computed(() => songs.value.map(toSong));
+
 function toggleMenu(id: number) {
   openMenuId.value = openMenuId.value === id ? null : id;
 }
@@ -126,9 +125,11 @@ onBeforeUnmount(() => { document.removeEventListener('click', closeMenu); });
 
 async function refresh() {
   loading.value = true;
+  pageCacheInvalidate('localMusic');
   try {
     const list = await invoke<LocalSong[]>('list_local_songs', { downloadPath: settings.downloadPath || null });
     songs.value = list;
+    pageCacheSet('localMusic', list);
     fetchMissingCovers();
   } catch (e) {
     console.error(e);
@@ -165,14 +166,6 @@ function formatFileSize(bytes: number): string {
   return (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0) + ' ' + units[i];
 }
 
-function formatDuration(ms: number): string {
-  if (!ms || ms === 0) return '--:--';
-  const totalSec = Math.floor(ms / 1000);
-  const min = Math.floor(totalSec / 60);
-  const sec = totalSec % 60;
-  return `${min}:${sec.toString().padStart(2, '0')}`;
-}
-
 function toSong(local: LocalSong): Song {
   return {
     id: local.id,
@@ -180,18 +173,10 @@ function toSong(local: LocalSong): Song {
     ar: local.artist ? [{ name: local.artist }] : [],
     al: { picUrl: local.cover || '', name: local.album || undefined },
     dt: local.duration || undefined,
-    artists: local.artist ? [{ name: local.artist }] : [],
-    album: { picUrl: local.cover || undefined, name: local.album || undefined },
-    duration: local.duration || undefined,
     localPath: local.path,
   };
 }
 
-async function playLocalSong(_song: LocalSong, index: number) {
-  const normalized = songs.value.map(s => toSong(s));
-  player.playFromList(normalized, index);
-}
-
 function confirmDelete(song: LocalSong) {
   openMenuId.value = null;
   deleteTarget.value = song;

src/views/Login.vue

@@ -88,7 +88,7 @@ function startPolling() {
                 statusColor.value = 'text-content-2';
             } else if (code === 802) {
                 statusText.value = '请在手机上确认登录';
-                statusColor.value = 'text-warning';
+                statusColor.value = 'text-yellow-400';
             } else if (code === 803) {
                 clearInterval(pollTimer!);
                 statusText.value = '登录成功！';

src/views/PlaylistDetail.vue

@@ -45,52 +45,37 @@
     <div v-if="loading" class="text-content-2">加载中...</div>
 
     <div v-else class="space-y-1">
-      <div
+      <SongListItem
         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) }"
+        :song="song"
+        :index="index"
+        :is-current="player.currentSong?.id === song.id"
+        show-index
+        show-like
+        show-download
+        show-menu
+        show-duration
+        show-playing-overlay
+        :container-class="player.currentSong?.id === song.id ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
+        @click="player.playFromList(songs, index)"
       >
-        <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>
+        <template #index="{ index: idx, isCurrent }">
+          <div class="w-6 text-right flex-shrink-0 flex items-center justify-end h-5">
+            <div v-if="isCurrent" 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">{{ idx + 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>
-          <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>
+        </template>
+      </SongListItem>
     </div>
 
     <div v-if="playlist" class="mt-8">
@@ -101,24 +86,22 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } 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 { formatPlayCount } from '../utils/format';
+import { normalizeSong, type Song } from '../utils/song';
+import SongListItem from '../components/SongListItem.vue';
 import CommentSection from '../components/CommentSection.vue';
 
 const route = useRoute();
-const router = useRouter();
 const player = usePlayerStore();
 const userStore = useUserStore();
-const download = useDownload();
 
 const playlist = ref<any>(null);
-const songs = ref<any[]>([]);
+const songs = ref<Song[]>([]);
 const loading = ref(true);
 const subscribed = ref(false);
 
@@ -135,7 +118,7 @@ async function fetchPlaylist(id: number) {
     const jsonStr: string = await invoke('get_playlist_detail', { id });
     const data = JSON.parse(jsonStr);
     playlist.value = data.playlist;
-    songs.value = data.playlist.tracks || [];
+    songs.value = (data.playlist.tracks || []).map(normalizeSong);
     subscribed.value = data.playlist.subscribed || false;
   } catch (e) {
     console.error(e);
@@ -153,15 +136,6 @@ watch(() => route.params.id, (newId) => {
   if (newId) fetchPlaylist(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);

src/views/RecentPlays.vue

@@ -6,51 +6,44 @@
     <h1 class="text-2xl font-bold mb-6">最近播放</h1>
     <div v-if="player.recentLocal.length === 0" class="text-content-3">还没有播放记录，去听首歌吧</div>
     <div v-else class="space-y-2">
-      <div
+      <SongListItem
         v-for="(song, index) in player.recentLocal"
         :key="song.id"
+        :song="song"
+        :index="index"
+        :is-current="player.currentSong?.id === song.id"
+        show-index
+        show-like
+        show-download
+        show-menu
+        show-duration
+        show-playing-overlay
+        :container-class="player.currentSong?.id === song.id ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
         @click="player.playFromList(player.recentLocal, index)"
-        class="flex items-center gap-4 p-3 rounded-xl hover:bg-subtle transition cursor-pointer"
       >
-        <span class="text-xs text-content-3 w-6 text-right">{{ index + 1 }}</span>
-        <img :src="song.al?.picUrl" class="w-10 h-10 rounded object-cover" />
-        <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">
-            <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 #index="{ index: idx, isCurrent }">
+          <div class="w-6 text-right flex-shrink-0 flex items-center justify-end h-5">
+            <div v-if="isCurrent" 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">{{ idx + 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>
-            <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 ?? 0) }}</span>
-      </div>
+          </div>
+        </template>
+      </SongListItem>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 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';
+import SongListItem from '../components/SongListItem.vue';
 
 const player = usePlayerStore();
-const download = useDownload();
-const router = useRouter();
 </script>

src/views/Roam.vue

@@ -64,11 +64,13 @@
 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 { normalizeSong, getCoverUrl } from '../utils/song';
 import { useRouter } from 'vue-router';
+import { useOnlineStatus } from '../composables/useOnlineStatus';
 
 const player = usePlayerStore();
 const router = useRouter();
+const { isOnline } = useOnlineStatus();
 const coverError = ref(false);
 
 const currentSong = computed(() => {
@@ -80,7 +82,7 @@ const currentSong = computed(() => {
 
 const coverUrl = computed(() => {
   if (!currentSong.value) return '';
-  return currentSong.value.al?.picUrl || currentSong.value.album?.picUrl || '';
+  return getCoverUrl(currentSong.value) || '';
 });
 
 watch(coverUrl, () => { coverError.value = false; });
@@ -109,4 +111,10 @@ async function startFm() {
 async function nextSong() {
   await startFm();
 }
+
+watch(isOnline, (val, old) => {
+  if (val && !old && !currentSong.value) {
+    startFm();
+  }
+});
 </script>

src/views/Search.vue

@@ -1,106 +0,0 @@
-<template>
-  <div class="text-content">
-    <h1 class="text-2xl font-bold mb-4">搜索</h1>
-
-    <input
-      v-model="keyword"
-      @keyup.enter="handleSearch"
-      placeholder="搜索歌曲..."
-      class="mb-6 w-full rounded-xl bg-muted p-3 text-content placeholder-content-2 outline-none backdrop-blur"
-    />
-
-    <div v-if="loading" class="text-content-2">搜索中...</div>
-    <div v-else class="space-y-3">
-      <div
-        v-for="(song, index) in results"
-        :key="song.id"
-        @click="playSong(song, index)"
-        class="flex items-center gap-4 p-3 rounded-xl backdrop-blur-md bg-subtle hover:bg-muted border border-line-2 cursor-pointer transition-all duration-200 hover:scale-[1.01] active:scale-95"
-      >
-        <img :src="song.al?.picUrl" class="w-12 h-12 rounded-lg object-cover" />
-        <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(' / ') }}
-          </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) ? '已下载' : '下载'">
-          <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>
-      </div>
-      <p v-if="!loading && hasSearched && results.length === 0" class="text-content-2">无结果</p>
-    </div>
-
-  </div>
-</template>
-
-<script setup lang="ts">
-defineOptions({ name: 'SearchView' });
-
-import { useRoute } from 'vue-router';
-import { watch } from 'vue';
-import { ref, onMounted } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
-import { usePlayerStore } from '../stores/player';
-import { useDownload } from '../composables/useDownload';
-import { useRouter } from 'vue-router';
-const router = useRouter();
-
-const keyword = ref('');
-const results = ref<any[]>([]);
-const loading = ref(false);
-const hasSearched = ref(false);
-const player = usePlayerStore();
-const download = useDownload();
-
-const route = useRoute();
-watch(
-  () => route.query.q,
-  (newQ) => {
-    if (newQ) {
-      keyword.value = newQ as string;
-      handleSearch();
-      router.replace({ query: {} });
-    }
-  },
-  { immediate: true }
-);
-
-async function handleSearch() {
-  if (!keyword.value.trim()) return;
-  loading.value = true;
-  hasSearched.value = true;
-  try {
-    const jsonStr: string = await invoke('search_songs', { query: { keyword: keyword.value } });
-    const data = JSON.parse(jsonStr);
-    results.value = data.result?.songs || [];
-  } catch (e) {
-    console.error('搜索出错：', e);
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function playSong(_song: any, index: number) {
-  try {
-    const normalized = results.value.map((s: any) => ({
-      id: s.id,
-      name: s.name,
-      ar: s.ar || s.artists || [],
-      al: s.al || s.album || { picUrl: '' },
-      dt: s.dt || 0,
-    }));
-    await player.playFromList(normalized, index);
-  } catch (e) {
-    alert('暂无播放源或需登录');
-  }
-}
-
-const devices = ref<string[]>([]);
-
-onMounted(async () => {
-  devices.value = await invoke('get_output_devices');
-});
-</script>

src/views/Settings.vue

@@ -105,18 +105,18 @@
           <div class="flex items-center gap-1.5">
             <button
               v-if="sc.key !== defaultShortcuts[id]?.key"
-              @click="settings.setShortcut(id, defaultShortcuts[id].key)"
+              @click="settings.setShortcut(String(id), defaultShortcuts[id].key)"
               class="w-6 h-6 flex items-center justify-center rounded-md text-content-4 hover:text-danger hover:bg-danger/10 transition"
               title="恢复默认"
             >
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
             <button
-              @click="startRecording(id)"
+              @click="startRecording(String(id))"
               class="px-3 py-1.5 rounded-lg text-sm transition min-w-[120px] text-center"
-              :class="recordingId === id ? 'bg-accent text-white' : 'bg-muted hover:bg-emphasis text-content-2'"
+              :class="recordingId === String(id) ? 'bg-accent text-white' : 'bg-muted hover:bg-emphasis text-content-2'"
             >
-              {{ recordingId === id ? '按下新快捷键...' : formatShortcut(sc.key) }}
+              {{ recordingId === String(id) ? '按下新快捷键...' : formatShortcut(sc.key) }}
             </button>
           </div>
         </div>
@@ -361,6 +361,7 @@ function formatShortcut(key: string): string {
     .replace('ArrowRight', '→')
     .replace('ArrowUp', '↑')
     .replace('ArrowDown', '↓')
+    .replace(/Key([A-Z])/g, '$1')
     .replace(/\+/g, ' + ');
 }