feat: 云盘/下载音乐分离/粘性头部/播放状态同步/歌手关注

新增:
- 音乐云盘页面(列表/详情弹窗/删除/存储空间, NOS multipart上传+LBS区域查询+进度事件)
- 下载音乐页面(独立于本地音乐, 只显示应用下载的歌曲)
- PageHeader粘性头部组件(IntersectionObserver控制显隐, 渐变模糊背景)
- useLocalMusic composable(LocalSong类型/formatFileSize/localSongToSong/fetchMissingCovers)
- 云盘上传完整流程(cloud_upload命令: check->token->LBS->NOS分块上传->info->publish)
- 云盘API(user_cloud/user_cloud_detail/user_cloud_del)
- 歌手关注/取关(artist_sub/artist_sublist命令, ArtistDetail关注按钮+artistSublist查询状态)
- 本地音乐多文件夹扫描(scan_local_folders命令, settings.localMusicPaths, 模态框管理)
- 侧边栏下载音乐和云盘导航项, 路由新增downloaded-music和cloud-music
- md5 crate依赖

改进:
- 路由全部改为懒加载
- keep-alive缓存管理重写(30s TTL+导航栈保护+FavoriteSongs常驻+10s定时清理)
- 播放器状态同步改为轮询isAudioPlaying(替代audio-started事件), 超时后watchForLatePlayback继续监听
- audio.rs新增is_playing原子状态+is_audio_playing命令
- 同步命令改async+spawn_blocking(list_local_songs/delete_local_song/check_local_song/get_default_download_path)
- scan_dir_for_songs抽取为公共函数, 新增downloaded_only参数
- RoamDrawer tab状态从组件本地ref移至store(roamTab替换roamInitialTab)
- App.vue onMounted改为非阻塞
- 多页面添加骨架屏加载态和加载失败重试
- 多页面使用PageHeader替代手动返回按钮
- PlaylistDetail/ArtistDetail添加简介弹窗(溢出时显示查看完整介绍)
- Home推荐/排行榜拆分为独立fetch函数支持分别重试
- Toast去重(3s窗口)+数量限制(最多3条)
- LocalMusic移除删除功能改文件夹模态框, ArtistDetail头像改圆形简介内嵌
- README重写

修复:
- 播放超时后后端实际开始播放但UI显示暂停(watchForLatePlayback+tick定期同步isAudioPlaying)
- FM播放缺少playSeq竞态保护
- scrobble离线时仍发送(添加navigator.onLine检查)
- RoamDrawer已打开时点击评论按钮无法切换(roamTab移至store)
- 关闭RoamDrawer后再打开永远显示评论(closeRoamDrawer重置roamTab)
- 歌手详情页关注状态离开后丢失(artist_detail不返回followed, 改用artistSublist查询)
- audio-ended事件在切歌时误触发(新增_switchingSong标志拦截)
- 路由beforeEach中localStorage key从user改为user_profile
- toggle播放前先同步后端状态

src/views/AlbumDetail.vue

@@ -1,10 +1,20 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
-      ← 返回
-    </button>
+    <PageHeader />
 
-    <div v-if="album" class="flex gap-6 mb-8">
+    <!-- 头部骨架 -->
+    <div v-if="!album && albumLoading" class="flex gap-6 mb-8">
+      <div class="w-44 h-44 rounded-xl bg-muted animate-pulse flex-shrink-0"></div>
+      <div class="flex-1 space-y-3">
+        <div class="h-7 bg-muted rounded w-1/2 animate-pulse"></div>
+        <div class="h-4 bg-muted rounded w-1/3 animate-pulse"></div>
+        <div class="h-4 bg-muted rounded w-1/4 animate-pulse"></div>
+        <div class="h-10 w-28 bg-muted rounded-full animate-pulse mt-4"></div>
+      </div>
+    </div>
+
+    <!-- 头部信息 -->
+    <div v-else-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>
@@ -34,9 +44,25 @@
       </div>
     </div>
 
-    <div v-if="loading" class="text-content-2">加载中...</div>
+    <!-- 加载失败 -->
+    <div v-if="loadError" class="flex flex-col items-center justify-center py-16 gap-3">
+      <p class="text-content-2 text-sm">加载失败</p>
+      <button @click="fetchAlbum(Number(route.params.id), true)" class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">重试</button>
+    </div>
 
-    <div v-else class="space-y-1">
+    <!-- 歌曲列表骨架 -->
+    <div v-else-if="songsLoading" class="space-y-1">
+      <div v-for="i in 6" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 歌曲列表 -->
+    <div v-else-if="songs.length" class="space-y-1">
       <SongListItem
         v-for="(song, index) in songs"
         :key="song.id"
@@ -57,36 +83,61 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, watch, onActivated } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { MusicApi } from '../api';
 import { usePlayerStore } from '../stores/player';
 import { normalizeSong, type Song } from '../utils/song';
 import { formatDate } from '../utils/format';
+import { pageCacheGet, pageCacheSet } from '../composables/usePageCache';
 import SongListItem from '../components/SongListItem.vue';
+import PageHeader from '../components/PageHeader.vue';
 import IconPlay from '~icons/lucide/play';
 
+defineOptions({ name: 'AlbumDetailView' });
+
 const route = useRoute();
 const router = useRouter();
 const player = usePlayerStore();
 
 const album = ref<any>(null);
 const songs = ref<Song[]>([]);
-const loading = ref(true);
+const albumLoading = ref(true);
+const songsLoading = ref(false);
+const loadError = ref(false);
 
-async function fetchAlbum(id: number) {
-  loading.value = true;
+async function fetchAlbum(id: number, force = false) {
+  const cacheKey = `album_${id}`;
+  if (!force) {
+    const cached = pageCacheGet(cacheKey);
+    if (cached) {
+      album.value = cached.album;
+      songs.value = cached.songs;
+      albumLoading.value = false;
+      songsLoading.value = false;
+      loadError.value = false;
+      return;
+    }
+  }
+
+  albumLoading.value = true;
+  songsLoading.value = true;
+  loadError.value = false;
   album.value = null;
   songs.value = [];
   try {
     const jsonStr: string = await MusicApi.albumDetail(id);
     const data = JSON.parse(jsonStr);
     album.value = data.album;
+    albumLoading.value = false;
     songs.value = (data.songs || []).map(normalizeSong);
+    songsLoading.value = false;
+    pageCacheSet(cacheKey, { album: album.value, songs: songs.value });
   } catch (e) {
     console.error(e);
-  } finally {
-    loading.value = false;
+    loadError.value = true;
+    albumLoading.value = false;
+    songsLoading.value = false;
   }
 }
 
@@ -95,7 +146,11 @@ onMounted(() => {
 });
 
 watch(() => route.params.id, (newId) => {
-  if (newId) fetchAlbum(Number(newId));
+  if (newId && route.name === 'album') fetchAlbum(Number(newId));
+});
+
+onActivated(() => {
+  if (loadError.value) fetchAlbum(Number(route.params.id), true);
 });
 
 function playAll() {

src/views/ArtistDetail.vue

@@ -1,94 +1,184 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
-      ← 返回
-    </button>
+    <PageHeader />
 
-    <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"
-          >
-            <IconPlay class="w-4 h-4 fill-current" />
-            播放全部
-          </button>
+    <!-- 头部骨架 -->
+    <div v-if="!artist && !songs.length && !albums.length" class="flex gap-6 mb-4">
+      <div class="w-44 h-44 rounded-full bg-muted animate-pulse flex-shrink-0"></div>
+      <div class="flex-1 space-y-3">
+        <div class="h-7 bg-muted rounded w-1/3 animate-pulse"></div>
+        <div class="h-4 bg-muted rounded w-1/4 animate-pulse"></div>
+        <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+        <div class="flex gap-3 mt-4">
+          <div class="h-10 w-28 bg-muted rounded-full animate-pulse"></div>
+          <div class="h-10 w-20 bg-muted rounded-full animate-pulse"></div>
         </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 v-else-if="loadError" class="flex flex-col items-center justify-center py-16 gap-3">
+      <p class="text-content-2 text-sm">加载失败</p>
+      <button @click="fetchArtist(Number(route.params.id), true)" class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">重试</button>
     </div>
 
-    <div v-if="loading" class="text-content-2">加载中...</div>
-
-    <template v-else>
-      <div v-if="activeTab === 'songs'" class="space-y-1">
-        <SongListItem
-          v-for="(song, index) in songs"
-          :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(songs, index)"
-        />
-      </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">{{ formatDate(album.publishTime) }}</p>
+    <template v-if="!loadError">
+      <!-- 头部：头像 + 简介 -->
+      <div v-if="artist || songs.length || albums.length" class="flex gap-6 mb-4">
+        <img v-if="artistCover" :src="artistCover" class="w-44 h-44 rounded-full object-cover shadow-lg flex-shrink-0" />
+        <div v-else class="w-44 h-44 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
+          <IconMusic class="w-12 h-12 text-content-4" />
+        </div>
+        <div class="flex flex-col min-w-0 flex-1">
+          <div>
+            <h1 class="text-2xl font-bold leading-tight">{{ artistName }}</h1>
+            <p v-if="artistFollowers || artist?.musicSize" class="text-xs text-content-3 mt-1">
+              <span v-if="artistFollowers">{{ formatPlayCount(artistFollowers) }} 粉丝</span>
+              <span v-if="artistFollowers && artist?.musicSize"> · </span>
+              <span v-if="artist?.musicSize">{{ artist.musicSize }} 首歌曲</span>
+            </p>
+          </div>
+          <div v-if="briefDesc" class="mt-3">
+            <p
+              ref="descEl"
+              class="text-sm text-content-2 leading-relaxed whitespace-pre-wrap overflow-hidden"
+              style="max-height: 4.5em"
+            >{{ briefDesc }}</p>
+            <button
+              v-if="descOverflow"
+              @click="showDescModal = true"
+              class="inline-flex items-center gap-1 text-xs text-accent-text hover:text-accent-text/80 mt-1.5 px-2 py-0.5 rounded-full bg-accent-text/10 transition"
+            >
+              <IconChevronDown class="w-3 h-3" />
+              查看完整介绍
+            </button>
+          </div>
+          <div class="flex items-center gap-3 mt-auto pt-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"
+            >
+              <IconPlay class="w-4 h-4 fill-current" />
+              播放全部
+            </button>
+            <button
+              @click="toggleFollow"
+              :disabled="followLoading"
+              class="px-5 py-2 rounded-full font-medium transition flex items-center gap-2"
+              :class="isFollowed
+                ? 'bg-subtle text-content-2 hover:bg-muted'
+                : 'bg-accent/15 text-accent-text hover:bg-accent/25'"
+            >
+              {{ isFollowed ? '已关注' : '关注' }}
+            </button>
           </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>
+      <!-- 简介弹窗 -->
+      <Teleport to="body">
+        <div v-if="showDescModal" class="fixed inset-0 z-50 flex items-center justify-center" @click.self="showDescModal = false">
+          <div class="absolute inset-0 bg-black/50" @click="showDescModal = false"></div>
+          <div class="relative bg-surface rounded-2xl shadow-2xl max-w-lg w-full mx-4 max-h-[70vh] flex flex-col">
+            <div class="flex items-center justify-between p-5 border-b border-line-2">
+              <h2 class="text-lg font-semibold">{{ artistName }} 的介绍</h2>
+              <button @click="showDescModal = false" class="text-content-3 hover:text-content transition">
+                <IconX class="w-5 h-5" />
+              </button>
+            </div>
+            <div class="p-5 overflow-y-auto text-sm text-content-2 leading-relaxed whitespace-pre-wrap">{{ briefDesc }}</div>
+          </div>
+        </div>
+      </Teleport>
+
+      <!-- 内容区：热门歌曲 / 专辑 -->
+      <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="activeTab === 'songs'">
+        <div v-if="songsLoading" class="space-y-1">
+          <div v-for="i in 6" :key="i" class="flex items-center gap-3 px-3 py-2">
+            <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+            <div class="flex-1 space-y-2">
+              <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+              <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+            </div>
+          </div>
+        </div>
+        <div v-else-if="songs.length" class="space-y-1">
+          <SongListItem
+            v-for="(song, index) in songs"
+            :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(songs, index)"
+          />
+        </div>
+      </div>
+
+      <!-- 专辑列表 -->
+      <div v-if="activeTab === 'albums'">
+        <div v-if="albumsLoading" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          <div v-for="i in 8" :key="i" class="bg-muted rounded-xl animate-pulse">
+            <div class="w-full aspect-square"></div>
+            <div class="p-3 space-y-2">
+              <div class="h-4 bg-subtle rounded w-3/4"></div>
+              <div class="h-3 bg-subtle rounded w-1/2"></div>
+            </div>
+          </div>
+        </div>
+        <div v-else-if="albums.length" 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">{{ formatDate(album.publishTime) }}</p>
+            </div>
+          </div>
+        </div>
       </div>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch, onActivated, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { MusicApi } from '../api';
 import { usePlayerStore } from '../stores/player';
 import { formatPlayCount, formatDate } from '../utils/format';
 import { normalizeSong, type Song } from '../utils/song';
+import { pageCacheGet, pageCacheSet } from '../composables/usePageCache';
 import SongListItem from '../components/SongListItem.vue';
+import PageHeader from '../components/PageHeader.vue';
 import IconPlay from '~icons/lucide/play';
+import IconMusic from '~icons/lucide/music';
+import IconX from '~icons/lucide/x';
+import IconChevronDown from '~icons/lucide/chevron-down';
+
+defineOptions({ name: 'ArtistDetailView' });
 
 const route = useRoute();
 const router = useRouter();
@@ -98,41 +188,128 @@ const artist = ref<any>(null);
 const songs = ref<Song[]>([]);
 const albums = ref<any[]>([]);
 const briefDesc = ref('');
-const loading = ref(true);
+const loadError = ref(false);
+const songsLoading = ref(false);
+const albumsLoading = ref(false);
 const activeTab = ref('songs');
+const showDescModal = ref(false);
+const descOverflow = ref(false);
+const descEl = ref<HTMLElement | null>(null);
+const isFollowed = ref(false);
+const followLoading = ref(false);
 
 const tabs = [
   { key: 'songs', label: '热门歌曲' },
   { key: 'albums', label: '专辑' },
-  { key: 'desc', label: '简介' },
 ];
 
-async function fetchArtist(id: number) {
-  loading.value = true;
+const artistName = computed(() => {
+  if (artist.value?.name) return artist.value.name;
+  if (songs.value.length > 0 && songs.value[0].ar?.length > 0) return songs.value[0].ar[0].name;
+  if (albums.value.length > 0) return albums.value[0].artist?.name || albums.value[0].artists?.[0]?.name || '';
+  return '未知歌手';
+});
+
+const artistCover = computed(() => {
+  if (artist.value?.cover) return artist.value.cover;
+  if (artist.value?.picUrl) return artist.value.picUrl;
+  if (artist.value?.img1v1Url) return artist.value.img1v1Url;
+  return '';
+});
+
+const artistFollowers = computed(() => {
+  if (!artist.value) return 0;
+  return artist.value.followeds || artist.value.followCount || artist.value.fans || 0;
+});
+
+function checkDescOverflow() {
+  nextTick(() => {
+    if (descEl.value) {
+      descOverflow.value = descEl.value.scrollHeight > descEl.value.clientHeight + 2;
+    }
+  });
+}
+
+async function fetchArtist(id: number, force = false) {
+  const cacheKey = `artist_${id}`;
+  if (!force) {
+    const cached = pageCacheGet(cacheKey);
+    if (cached) {
+      artist.value = cached.artist;
+      songs.value = cached.songs;
+      albums.value = cached.albums;
+      briefDesc.value = cached.briefDesc;
+      loadError.value = false;
+      checkDescOverflow();
+      return;
+    }
+  }
+
+  loadError.value = false;
   artist.value = null;
   songs.value = [];
   albums.value = [];
   briefDesc.value = '';
-  try {
-    const [detailStr, songsStr, albumStr, descStr] = await Promise.all([
-      MusicApi.artistDetail(id),
-      MusicApi.artistSongs({ id, order: 'hot', limit: 50, offset: 0 }),
-      MusicApi.artistAlbum(id, 30, 0),
-      MusicApi.artistDesc(id),
-    ]);
-    const detailData = JSON.parse(detailStr);
-    artist.value = detailData.artist;
-    const songsData = JSON.parse(songsStr);
-    songs.value = (songsData.songs || []).map(normalizeSong);
-    const albumData = JSON.parse(albumStr);
-    albums.value = albumData.hotAlbums || [];
-    const descData = JSON.parse(descStr);
-    briefDesc.value = descData.briefDesc || '';
-  } catch (e) {
-    console.error(e);
-  } finally {
-    loading.value = false;
+
+  const loadDetail = async () => {
+    try {
+      const jsonStr = await MusicApi.artistDetail(id);
+      const data = JSON.parse(jsonStr);
+      const a = data.artist || data.data?.artist || data;
+      artist.value = a;
+    } catch { /* 忽略 */ }
+  };
+
+  const loadFollowStatus = async () => {
+    try {
+      const jsonStr = await MusicApi.artistSublist(100, 0);
+      const data = JSON.parse(jsonStr);
+      const list = data.data || [];
+      isFollowed.value = list.some((item: any) => item.id === id);
+    } catch { /* 忽略 */ }
+  };
+
+  const loadSongs = async () => {
+    songsLoading.value = true;
+    try {
+      const jsonStr = await MusicApi.artistSongs({ id, order: 'hot', limit: 50, offset: 0 });
+      const data = JSON.parse(jsonStr);
+      songs.value = (data.songs || []).map(normalizeSong);
+    } catch { /* 忽略 */ }
+    finally { songsLoading.value = false; }
+  };
+
+  const loadAlbums = async () => {
+    albumsLoading.value = true;
+    try {
+      const jsonStr = await MusicApi.artistAlbum(id, 30, 0);
+      const data = JSON.parse(jsonStr);
+      albums.value = data.hotAlbums || [];
+    } catch { /* 忽略 */ }
+    finally { albumsLoading.value = false; }
+  };
+
+  const loadDesc = async () => {
+    try {
+      const jsonStr = await MusicApi.artistDesc(id);
+      const data = JSON.parse(jsonStr);
+      if (data.briefDesc) {
+        briefDesc.value = data.briefDesc;
+      } else if (Array.isArray(data.introduction) && data.introduction.length > 0) {
+        briefDesc.value = data.introduction.map((item: any) => item.txt || '').filter(Boolean).join('\n');
+      }
+      checkDescOverflow();
+    } catch { /* 忽略 */ }
+  };
+
+  await Promise.allSettled([loadDetail(), loadSongs(), loadAlbums(), loadDesc(), loadFollowStatus()]);
+
+  if (!artist.value && !songs.value.length && !albums.value.length && !briefDesc.value) {
+    loadError.value = true;
+    return;
   }
+
+  pageCacheSet(cacheKey, { artist: artist.value, songs: songs.value, albums: albums.value, briefDesc: briefDesc.value });
 }
 
 onMounted(() => {
@@ -140,11 +317,29 @@ onMounted(() => {
 });
 
 watch(() => route.params.id, (newId) => {
-  if (newId) fetchArtist(Number(newId));
+  if (newId && route.name === 'artist') fetchArtist(Number(newId));
+});
+
+onActivated(() => {
+  if (loadError.value) fetchArtist(Number(route.params.id), true);
 });
 
 function playAll() {
   if (songs.value.length === 0) return;
   player.playAll(songs.value);
 }
+
+async function toggleFollow() {
+  const id = Number(route.params.id);
+  if (!id || followLoading.value) return;
+  followLoading.value = true;
+  try {
+    await MusicApi.artistSub(id, !isFollowed.value);
+    isFollowed.value = !isFollowed.value;
+  } catch (e) {
+    console.error('关注操作失败', e);
+  } finally {
+    followLoading.value = false;
+  }
+}
 </script>

src/views/CloudMusic.vue

@@ -0,0 +1,436 @@
+<template>
+  <div class="p-8 text-content">
+    <PageHeader>
+      <h1 class="text-2xl font-bold">音乐云盘</h1>
+      <span v-if="totalCount" class="text-xs text-content-3">{{ totalCount }} 首</span>
+      <template #actions>
+        <button
+          @click="refresh"
+          class="px-3 py-1 bg-muted hover:bg-emphasis rounded-full text-xs transition"
+        >
+          刷新
+        </button>
+        <button
+          @click="pickAndUpload"
+          :disabled="uploading"
+          class="px-3 py-1 bg-accent/15 text-accent-text hover:bg-accent/25 rounded-full text-xs transition disabled:opacity-50"
+        >
+          {{ uploading ? '上传中...' : '上传歌曲' }}
+        </button>
+        <!-- 上传进度 -->
+        <div v-if="uploading && uploadProgress < 100" class="flex items-center gap-2 text-xs text-content-3">
+          <div class="w-24 h-1.5 bg-muted rounded-full overflow-hidden">
+            <div class="h-full bg-accent rounded-full transition-all duration-300" :style="{ width: uploadProgress + '%' }"></div>
+          </div>
+          <span>{{ uploadProgress.toFixed(0) }}%</span>
+        </div>
+      </template>
+    </PageHeader>
+
+    <!-- 存储空间 -->
+    <div v-if="cloudSize > 0" class="mb-6 p-4 bg-subtle rounded-xl">
+      <div class="flex items-center justify-between text-xs mb-2">
+        <span class="text-content-2">已使用 {{ formatFileSize(cloudSize) }} / {{ formatFileSize(cloudMaxSize) }}</span>
+        <span class="text-content-3">{{ cloudUsagePercent }}%</span>
+      </div>
+      <div class="h-1.5 bg-muted rounded-full overflow-hidden">
+        <div class="h-full bg-accent rounded-full transition-all duration-500" :style="{ width: cloudUsagePercent + '%' }"></div>
+      </div>
+    </div>
+
+    <div v-if="!userStore.isLoggedIn" class="text-content-3 py-8">
+      请先登录后查看云盘音乐
+    </div>
+
+    <div v-else-if="loading && !songs.length" class="space-y-1">
+      <div v-for="i in 8" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else-if="loadError" class="flex flex-col items-center justify-center py-16 gap-3">
+      <p class="text-content-2 text-sm">加载失败</p>
+      <button @click="refresh" class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">重试</button>
+    </div>
+
+    <div v-else-if="!songs.length" class="text-content-3 py-8">云盘中暂无音乐</div>
+
+    <div v-else class="space-y-1">
+      <SongListItem
+        v-for="(song, index) in songs"
+        :key="song.id"
+        :song="song"
+        :index="index"
+        :is-current="player.currentSong?.id === song.id"
+        show-index
+        show-like
+        show-download
+        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)"
+      >
+        <template #actions>
+          <span class="text-xs text-content-3 flex-shrink-0">{{ formatFileSize(cloudData[index]?.fileSize || 0) }}</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="更多"
+            >
+              <IconEllipsis class="w-4 h-4 fill-current" />
+            </button>
+            <Transition name="fade">
+              <div v-if="openMenuId === song.id" class="absolute right-0 top-full mt-1 w-40 bg-surface border border-line rounded-xl shadow-2xl overflow-hidden z-50" @click.stop>
+                <button @click="showDetail(index)" class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-content-2 hover:bg-subtle transition">
+                  <IconInfo style="font-size: 14px" />
+                  查看详情
+                </button>
+                <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">
+                  <IconTrash2 style="font-size: 14px" />
+                  从云盘删除
+                </button>
+              </div>
+            </Transition>
+          </div>
+        </template>
+      </SongListItem>
+    </div>
+
+    <!-- 加载更多 -->
+    <div v-if="hasMore && songs.length" class="flex justify-center py-6">
+      <button
+        @click="loadMore"
+        :disabled="loadingMore"
+        class="px-6 py-2 bg-subtle hover:bg-muted rounded-full text-sm transition disabled:opacity-50"
+      >
+        {{ loadingMore ? '加载中...' : '加载更多' }}
+      </button>
+    </div>
+
+    <!-- 详情弹窗 -->
+    <Transition name="fade">
+      <div v-if="showDetailModal && detailData" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showDetailModal = false">
+        <div class="bg-surface border border-line rounded-2xl shadow-2xl w-[380px] p-6 select-auto">
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-lg font-semibold truncate pr-4">{{ detailData.songName }}</h2>
+            <button @click="showDetailModal = false" class="text-content-3 hover:text-content transition flex-shrink-0">
+              <IconX class="w-5 h-5" />
+            </button>
+          </div>
+          <div class="space-y-3 text-sm">
+            <div class="flex justify-between">
+              <span class="text-content-3">文件名</span>
+              <span class="text-content-2 text-right max-w-[220px] truncate" :title="detailData.fileName">{{ detailData.fileName }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-content-3">歌手</span>
+              <span class="text-content-2">{{ detailData.artist }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-content-3">专辑</span>
+              <span class="text-content-2">{{ detailData.album }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-content-3">文件大小</span>
+              <span class="text-content-2">{{ formatFileSize(detailData.fileSize) }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-content-3">比特率</span>
+              <span class="text-content-2">{{ detailData.bitrate ? (detailData.bitrate / 1000) + ' kbps' : '未知' }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-content-3">上传时间</span>
+              <span class="text-content-2">{{ detailData.addTime }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- 删除确认 -->
+    <Transition name="fade">
+      <div v-if="showDeleteConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showDeleteConfirm = false">
+        <div class="bg-surface border border-line rounded-2xl shadow-2xl w-80 p-6 select-auto">
+          <h2 class="text-lg font-semibold text-content mb-1">确认删除</h2>
+          <p class="text-sm text-content-2 mb-5">确定要从云盘删除「{{ deleteTarget?.name }}」吗？</p>
+          <div class="flex gap-3">
+            <button @click="showDeleteConfirm = false"
+              class="flex-1 py-2 rounded-lg bg-muted hover:bg-emphasis text-sm text-content-2 transition">
+              取消
+            </button>
+            <button @click="doDelete"
+              class="flex-1 py-2 rounded-lg bg-danger/20 hover:bg-danger/30 text-danger text-sm font-medium transition">
+              删除
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onActivated, onBeforeUnmount } from 'vue';
+import { MusicApi } from '../api';
+import { usePlayerStore } from '../stores/player';
+import { useUserStore } from '../stores/user';
+import { showToast } from '../composables/useToast';
+import { normalizeSong, type Song } from '../utils/song';
+import { pageCacheGet, pageCacheSet, pageCacheInvalidate } from '../composables/usePageCache';
+import { formatFileSize } from '../composables/useLocalMusic';
+import { open } from '@tauri-apps/plugin-dialog';
+import { listen, type UnlistenFn } from '@tauri-apps/api/event';
+import SongListItem from '../components/SongListItem.vue';
+import PageHeader from '../components/PageHeader.vue';
+import IconEllipsis from '~icons/lucide/ellipsis';
+import IconInfo from '~icons/lucide/info';
+import IconTrash2 from '~icons/lucide/trash-2';
+import IconX from '~icons/lucide/x';
+
+defineOptions({ name: 'CloudMusicView' });
+
+const player = usePlayerStore();
+const userStore = useUserStore();
+
+interface CloudItem {
+  songId: number;
+  fileSize: number;
+  fileName: string;
+  bitrate: number;
+  addTime: string;
+  artist: string;
+  album: string;
+  songName: string;
+}
+
+const songs = ref<Song[]>([]);
+const cloudData = ref<CloudItem[]>([]);
+const loading = ref(true);
+const loadingMore = ref(false);
+const loadError = ref(false);
+const hasMore = ref(false);
+const totalCount = ref(0);
+const openMenuId = ref<number | null>(null);
+const showDeleteConfirm = ref(false);
+const showDetailModal = ref(false);
+const detailData = ref<CloudItem | null>(null);
+const deleteTarget = ref<Song | null>(null);
+const cloudSize = ref(0);
+const cloudMaxSize = ref(0);
+const uploading = ref(false);
+const uploadProgress = ref(0);
+let unlistenProgress: UnlistenFn | null = null;
+
+const cloudUsagePercent = computed(() => {
+  if (cloudMaxSize.value === 0) return 0;
+  return Math.min(100, Math.round(cloudSize.value / cloudMaxSize.value * 100));
+});
+
+const LIMIT = 30;
+let currentOffset = 0;
+
+function formatTimestamp(ts: number): string {
+  if (!ts) return '未知';
+  return new Date(ts).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
+}
+
+function toggleMenu(id: number) {
+  openMenuId.value = openMenuId.value === id ? null : id;
+}
+
+function closeMenu() {
+  openMenuId.value = null;
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeMenu);
+  // 监听上传进度事件
+  listen<{ filename: string; progress: number; uploaded: number; total: number }>('cloud-upload-progress', (e) => {
+    uploadProgress.value = e.payload.progress;
+  }).then(fn => { unlistenProgress = fn; });
+});
+onBeforeUnmount(() => {
+  document.removeEventListener('click', closeMenu);
+  unlistenProgress?.();
+});
+
+async function fetchCloud(offset = 0, append = false) {
+  if (!userStore.isLoggedIn) {
+    loading.value = false;
+    return;
+  }
+
+  if (!append) {
+    loading.value = true;
+    loadError.value = false;
+  } else {
+    loadingMore.value = true;
+  }
+
+  try {
+    const jsonStr = await MusicApi.userCloud(LIMIT, offset);
+    const data = JSON.parse(jsonStr);
+    const items = data.data || [];
+
+    const newSongs = items.map((item: any) => {
+      const s = item.simpleSong || {};
+      return normalizeSong({
+        ...s,
+        id: s.id || item.songId,
+        name: s.name || item.fileName,
+        ar: s.ar || (item.artist ? [{ name: item.artist }] : []),
+        al: s.al || { name: item.album || '未知专辑' },
+        dt: s.dt || item.duration,
+      });
+    });
+
+    const newCloudData: CloudItem[] = items.map((item: any) => ({
+      songId: item.songId,
+      fileSize: item.fileSize || 0,
+      fileName: item.fileName || '',
+      bitrate: item.bitrate || 0,
+      addTime: formatTimestamp(item.addTime),
+      artist: item.artist || (item.simpleSong?.ar || []).map((a: any) => a.name).join(' / ') || '未知歌手',
+      album: item.album || item.simpleSong?.al?.name || '未知专辑',
+      songName: item.simpleSong?.name || item.fileName?.replace(/\.\w+$/, '') || '未知歌曲',
+    }));
+
+    if (append) {
+      songs.value = [...songs.value, ...newSongs];
+      cloudData.value = [...cloudData.value, ...newCloudData];
+    } else {
+      songs.value = newSongs;
+      cloudData.value = newCloudData;
+    }
+
+    totalCount.value = data.count || songs.value.length;
+    currentOffset = offset + items.length;
+    hasMore.value = songs.value.length < totalCount.value;
+    cloudSize.value = data.size || 0;
+    cloudMaxSize.value = data.maxSize || 0;
+
+    if (!append) {
+      pageCacheSet('cloudMusic', {
+        songs: songs.value, cloudData: cloudData.value, totalCount: totalCount.value,
+        hasMore: hasMore.value, offset: currentOffset,
+        cloudSize: cloudSize.value, cloudMaxSize: cloudMaxSize.value,
+      });
+    }
+  } catch (e) {
+    console.error(e);
+    if (!append) loadError.value = true;
+    else showToast('加载更多失败', 'error');
+  } finally {
+    loading.value = false;
+    loadingMore.value = false;
+  }
+}
+
+function refresh() {
+  pageCacheInvalidate('cloudMusic');
+  currentOffset = 0;
+  fetchCloud(0, false);
+}
+
+function loadMore() {
+  fetchCloud(currentOffset, true);
+}
+
+async function pickAndUpload() {
+  const selected = await open({
+    multiple: true,
+    filters: [{ name: '音频文件', extensions: ['mp3', 'flac', 'wav', 'ogg', 'aac', 'm4a'] }],
+    title: '选择要上传的歌曲',
+  });
+  if (!selected) return;
+
+  const paths = Array.isArray(selected) ? selected : [selected];
+  uploading.value = true;
+  uploadProgress.value = 0;
+
+  for (const filePath of paths) {
+    uploadProgress.value = 0;
+    try {
+      await MusicApi.cloudUpload(filePath);
+      showToast('上传成功', 'success');
+    } catch (e: any) {
+      showToast(`上传失败: ${e || '未知错误'}`, 'error');
+    }
+  }
+
+  uploading.value = false;
+  uploadProgress.value = 0;
+  // 等待服务端完全提交后再刷新列表
+  setTimeout(() => refresh(), 1000);
+}
+
+function showDetail(index: number) {
+  openMenuId.value = null;
+  detailData.value = cloudData.value[index] || null;
+  showDetailModal.value = true;
+}
+
+function confirmDelete(song: Song) {
+  openMenuId.value = null;
+  deleteTarget.value = song;
+  showDeleteConfirm.value = true;
+}
+
+async function doDelete() {
+  if (!deleteTarget.value) return;
+  try {
+    await MusicApi.userCloudDel(deleteTarget.value.id);
+    const targetId = deleteTarget.value.id;
+    const idx = songs.value.findIndex(s => s.id === targetId);
+    songs.value = songs.value.filter(s => s.id !== targetId);
+    if (idx !== -1) cloudData.value.splice(idx, 1);
+    totalCount.value = Math.max(0, totalCount.value - 1);
+    pageCacheInvalidate('cloudMusic');
+    showToast('已从云盘删除', 'success');
+  } catch {
+    showToast('删除失败', 'error');
+  }
+  showDeleteConfirm.value = false;
+  deleteTarget.value = null;
+}
+
+onMounted(() => {
+  if (!userStore.isLoggedIn) {
+    loading.value = false;
+    return;
+  }
+  const cached = pageCacheGet('cloudMusic');
+  if (cached) {
+    songs.value = cached.songs;
+    cloudData.value = cached.cloudData;
+    totalCount.value = cached.totalCount;
+    hasMore.value = cached.hasMore;
+    currentOffset = cached.offset;
+    cloudSize.value = cached.cloudSize || 0;
+    cloudMaxSize.value = cached.cloudMaxSize || 0;
+    loading.value = false;
+    return;
+  }
+  fetchCloud();
+});
+
+onActivated(() => {
+  if (loadError.value) refresh();
+});
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/views/DailySongs.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
-      ← 返回
-    </button>
-    <div class="flex items-center justify-between mb-6">
+    <PageHeader>
       <h1 class="text-2xl font-bold">每日推荐</h1>
       <button
         v-if="songs.length > 0"
@@ -12,8 +9,20 @@
       >
         播放全部
       </button>
+    </PageHeader>
+    <div v-if="loading" class="space-y-1">
+      <div v-for="i in 8" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="loadError" class="flex flex-col items-center justify-center py-16 gap-3">
+      <p class="text-content-2 text-sm">加载失败</p>
+      <button @click="loadData(true)" class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">重试</button>
     </div>
-    <div v-if="loading" class="text-content-2">加载中...</div>
     <div v-else class="space-y-2">
       <SongListItem
         v-for="(song, index) in songs"
@@ -38,37 +47,42 @@
 import { ref, onMounted, onActivated, watch } from 'vue';
 import { MusicApi } from '../api';
 import SongListItem from '../components/SongListItem.vue';
+import PageHeader from '../components/PageHeader.vue';
 import { usePlayerStore } from '../stores/player';
 import { pageCacheGet, pageCacheSet, pageCacheInvalidate, pageCacheIsStale } from '../composables/usePageCache';
 import { normalizeSong, type Song } from '../utils/song';
-import { useOnlineStatus } from '../composables/useOnlineStatus';
 
 defineOptions({ name: 'DailySongsView' });
 
 const player = usePlayerStore();
-const { isOnline } = useOnlineStatus();
 const songs = ref<Song[]>([]);
 const loading = ref(true);
+const loadError = ref(false);
 
 function isCurrentSong(songId: number): boolean {
   return player.currentSong?.id === songId;
 }
 
-async function loadData() {
-  const cached = pageCacheGet('dailySongs');
-  if (cached) {
-    songs.value = cached;
-    loading.value = false;
-    return;
+async function loadData(force = false) {
+  if (!force) {
+    const cached = pageCacheGet('dailySongs');
+    if (cached) {
+      songs.value = cached;
+      loading.value = false;
+      loadError.value = false;
+      return;
+    }
   }
   loading.value = true;
   try {
+    loadError.value = false;
     const jsonStr: string = await MusicApi.recommendSongs();
     const data = JSON.parse(jsonStr);
     songs.value = (data.data?.dailySongs || []).map(normalizeSong);
     pageCacheSet('dailySongs', songs.value);
   } catch (e) {
     console.error(e);
+    loadError.value = true;
   } finally {
     loading.value = false;
   }
@@ -77,10 +91,14 @@ async function loadData() {
 onMounted(loadData);
 
 onActivated(() => {
-  if (pageCacheIsStale('dailySongs')) loadData();
+  if (loadError.value) {
+    loadData(true);
+  } else if (pageCacheIsStale('dailySongs')) {
+    loadData();
+  }
 });
 
-watch(isOnline, (val, old) => {
+watch(() => navigator.onLine, (val, old) => {
   if (val && !old && songs.value.length === 0) {
     pageCacheInvalidate('dailySongs');
     loadData();

src/views/DownloadedMusic.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="p-8 text-content">
+    <PageHeader>
+      <h1 class="text-2xl font-bold">下载音乐</h1>
+      <span v-if="songs.length" class="text-xs text-content-3">{{ songs.length }} 首</span>
+      <template #actions>
+        <button
+          @click="refresh"
+          class="px-3 py-1 bg-muted hover:bg-emphasis rounded-full text-xs transition"
+        >
+          刷新
+        </button>
+      </template>
+    </PageHeader>
+
+    <div v-if="loading" class="space-y-1">
+      <div v-for="i in 6" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="songs.length === 0" class="text-content-3">
+      暂无下载音乐
+    </div>
+    <div v-else class="space-y-2">
+      <SongListItem
+        v-for="(song, index) in normalizedSongs"
+        :key="song.id + '-' + index"
+        :song="song"
+        :index="index"
+        :is-current="player.currentSong?.id === song.id"
+        show-index
+        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(normalizedSongs, index)"
+      >
+        <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="更多"
+            >
+              <IconEllipsis class="w-4 h-4 fill-current" />
+            </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">
+                  <IconTrash2 style="font-size: 14px" />
+                  从磁盘中删除
+                </button>
+              </div>
+            </Transition>
+          </div>
+        </template>
+      </SongListItem>
+    </div>
+
+    <Transition name="fade">
+      <div v-if="showDeleteConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showDeleteConfirm = false">
+        <div class="bg-surface border border-line rounded-2xl shadow-2xl w-80 p-6 select-auto">
+          <h2 class="text-lg font-semibold text-content mb-1">确认删除</h2>
+          <p class="text-sm text-content-2 mb-5">确定要删除「{{ deleteTarget?.name }}」吗？此操作不可撤销。</p>
+          <div class="flex gap-3">
+            <button @click="showDeleteConfirm = false"
+              class="flex-1 py-2 rounded-lg bg-muted hover:bg-emphasis text-sm text-content-2 transition">
+              取消
+            </button>
+            <button @click="doDelete"
+              class="flex-1 py-2 rounded-lg bg-danger/20 hover:bg-danger/30 text-danger text-sm font-medium transition">
+              删除
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onActivated, onBeforeUnmount, watch } from 'vue';
+import { DownloadApi } from '../api';
+import { usePlayerStore } from '../stores/player';
+import { useDownload } from '../composables/useDownload';
+import { useSettingsStore } from '../stores/settings';
+import { showToast } from '../composables/useToast';
+import { pageCacheSet, pageCacheInvalidate, pageCacheIsStale } from '../composables/usePageCache';
+import { formatFileSize, localSongToSong, fetchMissingCovers, type LocalSong } from '../composables/useLocalMusic';
+import SongListItem from '../components/SongListItem.vue';
+import PageHeader from '../components/PageHeader.vue';
+import IconEllipsis from '~icons/lucide/ellipsis';
+import IconTrash2 from '~icons/lucide/trash-2';
+
+defineOptions({ name: 'DownloadedMusicView' });
+
+const player = usePlayerStore();
+const download = useDownload();
+const settings = useSettingsStore();
+
+const songs = ref<LocalSong[]>([]);
+const loading = ref(true);
+const showDeleteConfirm = ref(false);
+const deleteTarget = ref<LocalSong | null>(null);
+const openMenuId = ref<number | null>(null);
+
+const normalizedSongs = computed(() => songs.value.map(localSongToSong));
+
+function toggleMenu(id: number) {
+  openMenuId.value = openMenuId.value === id ? null : id;
+}
+
+function closeMenu() {
+  openMenuId.value = null;
+}
+
+onMounted(() => { document.addEventListener('click', closeMenu); });
+onBeforeUnmount(() => { document.removeEventListener('click', closeMenu); });
+
+async function refresh() {
+  loading.value = true;
+  try {
+    const list = await DownloadApi.listLocalSongs(settings.downloadPath || null);
+    songs.value = list;
+    pageCacheSet('downloadedMusic', list);
+    fetchMissingCovers(songs.value);
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(refresh);
+
+onActivated(() => {
+  if (pageCacheIsStale('downloadedMusic')) refresh();
+});
+
+watch(() => settings.downloadPath, () => { refresh(); });
+
+function confirmDelete(song: LocalSong) {
+  openMenuId.value = null;
+  deleteTarget.value = song;
+  showDeleteConfirm.value = true;
+}
+
+async function doDelete() {
+  if (!deleteTarget.value) return;
+  try {
+    await DownloadApi.deleteLocalSong({ id: deleteTarget.value.id, filename: deleteTarget.value.filename, downloadPath: settings.downloadPath || null });
+    songs.value = songs.value.filter(s => s.id !== deleteTarget.value!.id);
+    download.localSongIds.delete(deleteTarget.value.id);
+    pageCacheInvalidate('downloadedMusic');
+    showToast('已删除', 'success');
+  } catch (e) {
+    showToast('删除失败', 'error');
+  }
+  showDeleteConfirm.value = false;
+  deleteTarget.value = null;
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/views/FavoriteSongs.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
-      ← 返回
-    </button>
-    <div class="flex items-center justify-between mb-6">
+    <PageHeader>
       <h1 class="text-2xl font-bold">我喜欢的音乐</h1>
       <button
         v-if="songs.length"
@@ -13,11 +10,23 @@
         <IconPlay class="w-4 h-4 fill-current" />
         播放全部
       </button>
-    </div>
+    </PageHeader>
     <div v-if="!userStore.isLoggedIn" class="text-content-2">
       请先登录后查看喜欢的音乐
     </div>
-    <div v-else-if="loading" class="text-content-2">加载中...</div>
+    <div v-else-if="loading" class="space-y-1">
+      <div v-for="i in 8" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="loadError" class="flex flex-col items-center justify-center py-16 gap-3">
+      <p class="text-content-2 text-sm">加载失败</p>
+      <button @click="loadData(true)" class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">重试</button>
+    </div>
     <div v-else-if="songs.length === 0" class="text-content-2">暂无喜欢的音乐</div>
     <div v-else class="space-y-1">
       <SongListItem
@@ -43,34 +52,38 @@
 import { ref, onMounted, onActivated, watch } from 'vue';
 import { MusicApi } from '../api';
 import SongListItem from '../components/SongListItem.vue';
+import PageHeader from '../components/PageHeader.vue';
 import { usePlayerStore } from '../stores/player';
 import { useUserStore } from '../stores/user';
 import { normalizeSong, type Song } from '../utils/song';
 import { pageCacheGet, pageCacheSet, pageCacheInvalidate, pageCacheIsStale } from '../composables/usePageCache';
-import { useOnlineStatus } from '../composables/useOnlineStatus';
 import IconPlay from '~icons/lucide/play';
 
 defineOptions({ name: 'FavoriteSongsView' });
 
 const player = usePlayerStore();
 const userStore = useUserStore();
-const { isOnline } = useOnlineStatus();
 const songs = ref<Song[]>([]);
 const loading = ref(true);
+const loadError = ref(false);
 
-async function loadData() {
+async function loadData(force = false) {
   if (!userStore.isLoggedIn) {
     loading.value = false;
     return;
   }
-  const cached = pageCacheGet('favoriteSongs');
-  if (cached) {
-    songs.value = cached;
-    loading.value = false;
-    return;
+  if (!force) {
+    const cached = pageCacheGet('favoriteSongs');
+    if (cached) {
+      songs.value = cached;
+      loading.value = false;
+      loadError.value = false;
+      return;
+    }
   }
   loading.value = true;
   try {
+    loadError.value = false;
     const playlistJson: string = await MusicApi.userPlaylist(userStore.user!.userId);
     const playlistData = JSON.parse(playlistJson);
     const created = (playlistData.playlist || []).filter((p: any) => !p.subscribed);
@@ -85,6 +98,7 @@ async function loadData() {
     pageCacheSet('favoriteSongs', songs.value);
   } catch (e) {
     console.error(e);
+    loadError.value = true;
   } finally {
     loading.value = false;
   }
@@ -93,10 +107,14 @@ async function loadData() {
 onMounted(loadData);
 
 onActivated(() => {
-  if (pageCacheIsStale('favoriteSongs')) loadData();
+  if (loadError.value) {
+    loadData(true);
+  } else if (pageCacheIsStale('favoriteSongs')) {
+    loadData();
+  }
 });
 
-watch(isOnline, (val, old) => {
+watch(() => navigator.onLine, (val, old) => {
   if (val && !old && userStore.isLoggedIn && songs.value.length === 0) {
     pageCacheInvalidate('favoriteSongs');
     loadData();

src/views/Home.vue

@@ -71,15 +71,37 @@
     </div>
 
     <!-- 第二行：为你推荐（需登录） -->
-    <div v-if="userStore.isLoggedIn && recPlaylists.length" class="mb-10">
+    <div v-if="userStore.isLoggedIn" 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 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
+
+      <!-- 加载中：骨架屏 -->
+      <div v-if="recLoading && !recPlaylists.length" 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="i in 6" :key="'skel-'+i" class="bg-subtle rounded-xl overflow-hidden max-w-[220px] justify-self-center w-full animate-pulse">
+          <div class="w-full aspect-square bg-muted"></div>
+          <div class="p-3 space-y-2">
+            <div class="h-4 bg-muted rounded w-3/4"></div>
+            <div class="h-3 bg-muted rounded w-1/2"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 加载失败 -->
+      <div v-else-if="recError && !recPlaylists.length" class="flex flex-col items-center justify-center py-12 gap-3">
+        <p class="text-content-2 text-sm">推荐加载失败</p>
+        <button @click="fetchRecPlaylists"
+          class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">
+          重试
+        </button>
+      </div>
+
+      <!-- 正常内容 -->
+      <div v-else-if="recPlaylists.length" 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 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>
-            <p class="text-xs text-content-2 mt-1">{{ pl.copywriter || '' }}</p>
+            <p class="text-xs text-content-2 mt-1 truncate">{{ pl.copywriter || pl.description || '' }}</p>
           </div>
         </div>
       </div>
@@ -88,12 +110,34 @@
     <!-- 第三行：热门歌单（排行榜） -->
     <div>
       <h2 class="text-xl font-semibold mb-4">📈 热门歌单</h2>
-      <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-if="rankLoading && !rankPlaylists.length" 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="i in 4" :key="'rskel-'+i" class="bg-subtle rounded-xl overflow-hidden max-w-[220px] justify-self-center w-full animate-pulse">
+          <div class="w-full aspect-square bg-muted"></div>
+          <div class="p-3 space-y-2">
+            <div class="h-4 bg-muted rounded w-3/4"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 加载失败 -->
+      <div v-else-if="rankError && !rankPlaylists.length" class="flex flex-col items-center justify-center py-12 gap-3">
+        <p class="text-content-2 text-sm">热门歌单加载失败</p>
+        <button @click="fetchRankPlaylists"
+          class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">
+          重试
+        </button>
+      </div>
+
+      <!-- 正常内容 -->
+      <div v-else-if="rankPlaylists.length" 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 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>
+            <p v-if="pl.description || pl.copywriter" class="text-xs text-content-2 mt-1 truncate">{{ pl.description || pl.copywriter }}</p>
           </div>
         </div>
       </div>
@@ -119,7 +163,11 @@ const userStore = useUserStore();
 const { isOnline } = useOnlineStatus();
 
 const rankPlaylists = ref<any[]>([]);
+const rankLoading = ref(false);
+const rankError = ref(false);
 const recPlaylists = ref<any[]>([]);
+const recLoading = ref(false);
+const recError = ref(false);
 const todayStr = ref('');
 const RANK_IDS = [3778678, 3779629, 19723756, 2884035];
 
@@ -160,6 +208,56 @@ function onFmCardClick() {
   player.openRoamDrawer();
 }
 
+async function fetchRankPlaylists() {
+  const cacheKey = 'home_rank';
+  const cached = pageCacheGet(cacheKey);
+  if (cached) {
+    rankPlaylists.value = cached;
+    return;
+  }
+  rankLoading.value = true;
+  rankError.value = false;
+  try {
+    const results = await Promise.allSettled(
+      RANK_IDS.map(id => MusicApi.getPlaylistDetail(id))
+    );
+    rankPlaylists.value = results
+      .filter(r => r.status === 'fulfilled')
+      .map((r: any) => {
+        const data = JSON.parse(r.value);
+        return data.playlist;
+      })
+      .filter(Boolean);
+    pageCacheSet(cacheKey, rankPlaylists.value);
+  } catch {
+    rankError.value = true;
+  } finally {
+    rankLoading.value = false;
+  }
+}
+
+async function fetchRecPlaylists() {
+  if (!userStore.isLoggedIn) return;
+  const cacheKey = 'home_rec';
+  const cached = pageCacheGet(cacheKey);
+  if (cached) {
+    recPlaylists.value = cached;
+    return;
+  }
+  recLoading.value = true;
+  recError.value = false;
+  try {
+    const json = await MusicApi.recommendResource();
+    const data = JSON.parse(json as string);
+    recPlaylists.value = data.recommend || [];
+    pageCacheSet(cacheKey, recPlaylists.value);
+  } catch {
+    recError.value = true;
+  } finally {
+    recLoading.value = false;
+  }
+}
+
 async function loadData() {
   const cached = pageCacheGet('home');
   if (cached) {
@@ -168,26 +266,8 @@ async function loadData() {
     return;
   }
 
-  const results = await Promise.allSettled(
-    RANK_IDS.map(id => MusicApi.getPlaylistDetail(id))
-  );
-  rankPlaylists.value = results
-    .filter(r => r.status === 'fulfilled')
-    .map((r: any) => {
-      const data = JSON.parse(r.value);
-      return data.playlist;
-    })
-    .filter(Boolean);
-
-  if (userStore.isLoggedIn) {
-    try {
-      const json = await MusicApi.recommendResource();
-      const data = JSON.parse(json as string);
-      recPlaylists.value = data.recommend || [];
-    } catch { /* 忽略 */ }
-  }
-
-  pageCacheSet('home', { rankPlaylists: rankPlaylists.value, recPlaylists: recPlaylists.value });
+  fetchRankPlaylists();
+  fetchRecPlaylists();
 }
 
 onMounted(async () => {
@@ -201,9 +281,22 @@ onActivated(() => {
 });
 
 watch(isOnline, (val, old) => {
-  if (val && !old && rankPlaylists.value.length === 0 && recPlaylists.value.length === 0) {
-    pageCacheInvalidate('home');
-    loadData();
+  if (val && !old) {
+    if (rankPlaylists.value.length === 0 && recPlaylists.value.length === 0) {
+      pageCacheInvalidate('home');
+      pageCacheInvalidate('home_rank');
+      pageCacheInvalidate('home_rec');
+      loadData();
+    } else {
+      if (rankError.value) {
+        pageCacheInvalidate('home_rank');
+        fetchRankPlaylists();
+      }
+      if (recError.value) {
+        pageCacheInvalidate('home_rec');
+        fetchRecPlaylists();
+      }
+    }
   }
 });
 

src/views/LocalMusic.vue

@@ -1,19 +1,37 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
-      ← 返回
-    </button>
-    <div class="flex items-center gap-4 mb-6">
+    <PageHeader>
       <h1 class="text-2xl font-bold">本地音乐</h1>
       <span v-if="songs.length" class="text-xs text-content-3">{{ songs.length }} 首</span>
-      <button
-        @click="refresh"
-        class="px-3 py-1 bg-muted hover:bg-emphasis rounded-full text-xs transition"
-      >
-        刷新
-      </button>
+      <template #actions>
+        <button
+          @click="refresh"
+          class="px-3 py-1 bg-muted hover:bg-emphasis rounded-full text-xs transition"
+        >
+          刷新
+        </button>
+        <button
+          @click="showFolderModal = true"
+          class="text-content-3 hover:text-content transition p-1 rounded hover:bg-muted"
+          title="文件夹管理"
+        >
+          <IconEllipsis class="w-5 h-5 fill-current" />
+        </button>
+      </template>
+    </PageHeader>
+
+    <div v-if="loading" class="space-y-1">
+      <div v-for="i in 6" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="settings.localMusicPaths.length === 0" class="text-content-3 py-4">
+      请先添加要扫描的文件夹
     </div>
-    <div v-if="loading" class="text-content-2">加载中...</div>
     <div v-else-if="songs.length === 0" class="text-content-3">
       当前文件夹下没有音乐文件，支持 mp3、flac、wav、ogg、aac、m4a 格式
     </div>
@@ -32,42 +50,46 @@
       >
         <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="更多"
-            >
-              <IconEllipsis class="w-4 h-4 fill-current" />
-            </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">
-                  <IconTrash2 style="font-size: 14px" />
-                  从磁盘中删除
-                </button>
-              </div>
-            </Transition>
-          </div>
         </template>
       </SongListItem>
     </div>
 
+    <!-- 文件夹管理弹窗 -->
     <Transition name="fade">
-      <div v-if="showDeleteConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showDeleteConfirm = false">
-        <div class="bg-surface border border-line rounded-2xl shadow-2xl w-80 p-6 select-auto">
-          <h2 class="text-lg font-semibold text-content mb-1">确认删除</h2>
-          <p class="text-sm text-content-2 mb-5">确定要删除「{{ deleteTarget?.name }}」吗？此操作不可撤销。</p>
-          <div class="flex gap-3">
-            <button @click="showDeleteConfirm = false"
-              class="flex-1 py-2 rounded-lg bg-muted hover:bg-emphasis text-sm text-content-2 transition">
-              取消
-            </button>
-            <button @click="doDelete"
-              class="flex-1 py-2 rounded-lg bg-danger/20 hover:bg-danger/30 text-danger text-sm font-medium transition">
-              删除
+      <div v-if="showFolderModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showFolderModal = false">
+        <div class="bg-surface border border-line rounded-2xl shadow-2xl w-[420px] p-6 select-auto">
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-lg font-semibold">扫描文件夹</h2>
+            <button @click="showFolderModal = false" class="text-content-3 hover:text-content transition">
+              <IconX class="w-5 h-5" />
             </button>
           </div>
+          <div v-if="settings.localMusicPaths.length === 0" class="text-sm text-content-3 py-4 text-center">
+            未添加任何文件夹
+          </div>
+          <div v-else class="space-y-1.5 max-h-60 overflow-y-auto mb-4">
+            <div
+              v-for="p in settings.localMusicPaths"
+              :key="p"
+              class="flex items-center gap-2 px-3 py-2 bg-subtle rounded-lg group"
+            >
+              <IconFolder class="w-4 h-4 text-content-3 flex-shrink-0" />
+              <span class="text-sm text-content-2 truncate flex-1" :title="p">{{ p }}</span>
+              <button
+                @click="settings.removeLocalMusicPath(p)"
+                class="text-content-4 hover:text-danger transition opacity-0 group-hover:opacity-100"
+                title="移除"
+              >
+                <IconX class="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+          <button
+            @click="addFolder"
+            class="w-full py-2.5 rounded-lg bg-accent/15 text-accent-text hover:bg-accent/25 text-sm font-medium transition"
+          >
+            添加文件夹
+          </button>
         </div>
       </div>
     </Transition>
@@ -75,64 +97,53 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onActivated, onBeforeUnmount, watch } from 'vue';
-import { MusicApi, DownloadApi } from '../api';
+import { ref, computed, onMounted, onActivated, watch } from 'vue';
+import { DownloadApi } from '../api';
 import { usePlayerStore } from '../stores/player';
-import { useDownload } from '../composables/useDownload';
 import { useSettingsStore } from '../stores/settings';
-import { showToast } from '../composables/useToast';
-import { pageCacheSet, pageCacheInvalidate, pageCacheIsStale } from '../composables/usePageCache';
+import { pageCacheSet, pageCacheIsStale } from '../composables/usePageCache';
+import { formatFileSize, localSongToSong, fetchMissingCovers, type LocalSong } from '../composables/useLocalMusic';
+import { open } from '@tauri-apps/plugin-dialog';
 import SongListItem from '../components/SongListItem.vue';
+import PageHeader from '../components/PageHeader.vue';
 import IconEllipsis from '~icons/lucide/ellipsis';
-import IconTrash2 from '~icons/lucide/trash-2';
-import type { Song } from '../utils/song';
+import IconFolder from '~icons/lucide/folder';
+import IconX from '~icons/lucide/x';
 
 defineOptions({ name: 'LocalMusicView' });
 
 const player = usePlayerStore();
-const download = useDownload();
 const settings = useSettingsStore();
 
-interface LocalSong {
-  id: number;
-  name: string;
-  artist: string;
-  album: string;
-  duration: number;
-  cover: string | null;
-  filename: string;
-  fileSize: number;
-  path: string;
-  local: boolean;
-}
-
 const songs = ref<LocalSong[]>([]);
 const loading = ref(true);
-const showDeleteConfirm = ref(false);
-const deleteTarget = ref<LocalSong | null>(null);
-const openMenuId = ref<number | null>(null);
+const showFolderModal = ref(false);
 
-const normalizedSongs = computed(() => songs.value.map(toSong));
+const normalizedSongs = computed(() => songs.value.map(localSongToSong));
 
-function toggleMenu(id: number) {
-  openMenuId.value = openMenuId.value === id ? null : id;
+async function addFolder() {
+  const selected = await open({
+    directory: true,
+    multiple: false,
+    title: '选择音乐文件夹',
+  });
+  if (selected) {
+    settings.addLocalMusicPath(selected);
+  }
 }
 
-function closeMenu() {
-  openMenuId.value = null;
-}
-
-onMounted(() => { document.addEventListener('click', closeMenu); });
-onBeforeUnmount(() => { document.removeEventListener('click', closeMenu); });
-
 async function refresh() {
+  if (settings.localMusicPaths.length === 0) {
+    songs.value = [];
+    loading.value = false;
+    return;
+  }
   loading.value = true;
-  pageCacheInvalidate('localMusic');
   try {
-    const list = await DownloadApi.listLocalSongs(settings.downloadPath || null);
+    const list = await DownloadApi.scanLocalFolders(settings.localMusicPaths);
     songs.value = list;
     pageCacheSet('localMusic', list);
-    fetchMissingCovers();
+    fetchMissingCovers(songs.value);
   } catch (e) {
     console.error(e);
   } finally {
@@ -140,70 +151,13 @@ async function refresh() {
   }
 }
 
-async function fetchMissingCovers() {
-  const missing = songs.value.filter(s => !s.cover && s.id > 0 && s.id < 1e12);
-  if (missing.length === 0) return;
-  const ids = [...new Set(missing.map(s => s.id))];
-  try {
-    const jsonStr: string = await MusicApi.getSongDetail(JSON.stringify(ids));
-    const data = JSON.parse(jsonStr);
-    const detailMap = new Map<number, string>();
-    for (const s of data.songs || []) {
-      const url = s.al?.picUrl;
-      if (url && s.id) detailMap.set(s.id, url + '?param=100y100');
-    }
-    for (const song of missing) {
-      const url = detailMap.get(song.id);
-      if (url) song.cover = url;
-    }
-  } catch { /* 忽略 */ }
-}
-
 onMounted(refresh);
 
 onActivated(() => {
   if (pageCacheIsStale('localMusic')) refresh();
 });
 
-watch(() => settings.downloadPath, () => { refresh(); });
-
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 B';
-  const units = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  return (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0) + ' ' + units[i];
-}
-
-function toSong(local: LocalSong): Song {
-  return {
-    id: local.id,
-    name: local.name,
-    ar: local.artist ? [{ name: local.artist }] : [],
-    al: { picUrl: local.cover || '', name: local.album || undefined },
-    dt: local.duration || undefined,
-    localPath: local.path,
-  };
-}
-
-function confirmDelete(song: LocalSong) {
-  openMenuId.value = null;
-  deleteTarget.value = song;
-  showDeleteConfirm.value = true;
-}
-
-async function doDelete() {
-  if (!deleteTarget.value) return;
-  try {
-    await DownloadApi.deleteLocalSong({ id: deleteTarget.value.id, filename: deleteTarget.value.filename, downloadPath: settings.downloadPath || null });
-    songs.value = songs.value.filter(s => s.id !== deleteTarget.value!.id);
-    download.localSongIds.delete(deleteTarget.value.id);
-    showToast('已删除', 'success');
-  } catch (e) {
-    showToast('删除失败', 'error');
-  }
-  showDeleteConfirm.value = false;
-  deleteTarget.value = null;
-}
+watch(() => settings.localMusicPaths, () => { refresh(); }, { deep: true });
 </script>
 
 <style scoped>

src/views/PlaylistDetail.vue

@@ -1,10 +1,23 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
-      ← 返回
-    </button>
+    <PageHeader />
 
-    <div v-if="playlist" class="flex gap-6 mb-8">
+    <!-- 头部骨架 -->
+    <div v-if="!playlist && playlistLoading" class="flex gap-6 mb-8">
+      <div class="w-44 h-44 rounded-xl bg-muted animate-pulse flex-shrink-0"></div>
+      <div class="flex-1 space-y-3">
+        <div class="h-7 bg-muted rounded w-1/2 animate-pulse"></div>
+        <div class="h-4 bg-muted rounded w-1/3 animate-pulse"></div>
+        <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+        <div class="flex gap-3 mt-4">
+          <div class="h-10 w-28 bg-muted rounded-full animate-pulse"></div>
+          <div class="h-10 w-20 bg-muted rounded-full animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 头部信息 -->
+    <div v-else-if="playlist" class="flex gap-6 mb-8">
       <img :src="playlist.coverImgUrl" 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>
@@ -13,7 +26,21 @@
             <img :src="playlist.creator.avatarUrl" class="w-5 h-5 rounded-full" />
             <span class="text-sm text-content-2">{{ playlist.creator.nickname }}</span>
           </div>
-          <p class="text-sm text-content-2 mt-2 line-clamp-2">{{ playlist.description }}</p>
+          <div v-if="playlist.description" class="mt-2">
+            <p
+              ref="descEl"
+              class="text-sm text-content-2 leading-relaxed overflow-hidden"
+              style="max-height: 3em"
+            >{{ playlist.description }}</p>
+            <button
+              v-if="descOverflow"
+              @click="showDescModal = true"
+              class="inline-flex items-center gap-1 text-xs text-accent-text hover:text-accent-text/80 mt-1 px-2 py-0.5 rounded-full bg-accent-text/10 transition"
+            >
+              <IconChevronDown class="w-3 h-3" />
+              查看完整介绍
+            </button>
+          </div>
           <p class="text-xs text-content-3 mt-2">
             {{ playlist.trackCount }} 首歌曲 · 播放 {{ formatPlayCount(playlist.playCount) }} 次
           </p>
@@ -39,9 +66,41 @@
       </div>
     </div>
 
-    <div v-if="loading" class="text-content-2">加载中...</div>
+    <!-- 简介弹窗 -->
+    <Teleport to="body">
+      <div v-if="showDescModal" class="fixed inset-0 z-50 flex items-center justify-center" @click.self="showDescModal = false">
+        <div class="absolute inset-0 bg-black/50" @click="showDescModal = false"></div>
+        <div class="relative bg-surface rounded-2xl shadow-2xl max-w-lg w-full mx-4 max-h-[70vh] flex flex-col">
+          <div class="flex items-center justify-between p-5 border-b border-line-2">
+            <h2 class="text-lg font-semibold">{{ playlist?.name }} 的介绍</h2>
+            <button @click="showDescModal = false" class="text-content-3 hover:text-content transition">
+              <IconX class="w-5 h-5" />
+            </button>
+          </div>
+          <div class="p-5 overflow-y-auto text-sm text-content-2 leading-relaxed whitespace-pre-wrap">{{ playlist?.description }}</div>
+        </div>
+      </div>
+    </Teleport>
 
-    <div v-else class="space-y-1">
+    <!-- 加载失败 -->
+    <div v-if="loadError" class="flex flex-col items-center justify-center py-16 gap-3">
+      <p class="text-content-2 text-sm">加载失败</p>
+      <button @click="fetchPlaylist(Number(route.params.id), true)" class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">重试</button>
+    </div>
+
+    <!-- 歌曲列表骨架 -->
+    <div v-else-if="songsLoading" class="space-y-1">
+      <div v-for="i in 8" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 歌曲列表 -->
+    <div v-else-if="songs.length" class="space-y-1">
       <SongListItem
         v-for="(song, index) in songs"
         :key="song.id"
@@ -59,6 +118,8 @@
       />
     </div>
 
+    <div v-else-if="!songsLoading && !loadError" class="text-content-2">暂无歌曲</div>
+
     <div v-if="playlist" class="mt-8">
       <CommentSection :type="2" :id="Number(route.params.id)" />
     </div>
@@ -66,7 +127,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch, onActivated, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import { MusicApi } from '../api';
 import { usePlayerStore } from '../stores/player';
@@ -74,10 +135,16 @@ import { useUserStore } from '../stores/user';
 import { showToast } from '../composables/useToast';
 import { formatPlayCount } from '../utils/format';
 import { normalizeSong, type Song } from '../utils/song';
+import { pageCacheGet, pageCacheSet } from '../composables/usePageCache';
 import SongListItem from '../components/SongListItem.vue';
 import CommentSection from '../components/CommentSection.vue';
+import PageHeader from '../components/PageHeader.vue';
 import IconPlay from '~icons/lucide/play';
 import IconBookmark from '~icons/lucide/bookmark';
+import IconX from '~icons/lucide/x';
+import IconChevronDown from '~icons/lucide/chevron-down';
+
+defineOptions({ name: 'PlaylistDetailView' });
 
 const route = useRoute();
 const player = usePlayerStore();
@@ -85,29 +152,64 @@ const userStore = useUserStore();
 
 const playlist = ref<any>(null);
 const songs = ref<Song[]>([]);
-const loading = ref(true);
+const playlistLoading = ref(true);
+const songsLoading = ref(false);
+const loadError = ref(false);
 const subscribed = ref(false);
+const showDescModal = ref(false);
+const descOverflow = ref(false);
+const descEl = ref<HTMLElement | null>(null);
 
 const isOwnPlaylist = computed(() => {
   if (!playlist.value || !userStore.user) return false;
   return playlist.value.creator?.userId === userStore.user.userId;
 });
 
-async function fetchPlaylist(id: number) {
-  loading.value = true;
+function checkDescOverflow() {
+  nextTick(() => {
+    if (descEl.value) {
+      descOverflow.value = descEl.value.scrollHeight > descEl.value.clientHeight + 2;
+    }
+  });
+}
+
+async function fetchPlaylist(id: number, force = false) {
+  const cacheKey = `playlist_${id}`;
+  if (!force) {
+    const cached = pageCacheGet(cacheKey);
+    if (cached) {
+      playlist.value = cached.playlist;
+      songs.value = cached.songs;
+      subscribed.value = cached.subscribed;
+      playlistLoading.value = false;
+      songsLoading.value = false;
+      loadError.value = false;
+      checkDescOverflow();
+      return;
+    }
+  }
+
+  playlistLoading.value = true;
+  songsLoading.value = true;
+  loadError.value = false;
   playlist.value = null;
   songs.value = [];
   try {
     const jsonStr: string = await MusicApi.getPlaylistDetail(id);
     const data = JSON.parse(jsonStr);
     playlist.value = data.playlist;
+    playlistLoading.value = false;
     songs.value = (data.playlist.tracks || []).map(normalizeSong);
+    songsLoading.value = false;
     subscribed.value = data.playlist.subscribed || false;
+    pageCacheSet(cacheKey, { playlist: playlist.value, songs: songs.value, subscribed: subscribed.value });
+    checkDescOverflow();
   } catch (e) {
     console.error(e);
+    loadError.value = true;
+    playlistLoading.value = false;
+    songsLoading.value = false;
     showToast('获取歌单详情失败', 'error');
-  } finally {
-    loading.value = false;
   }
 }
 
@@ -116,7 +218,11 @@ onMounted(() => {
 });
 
 watch(() => route.params.id, (newId) => {
-  if (newId) fetchPlaylist(Number(newId));
+  if (newId && route.name === 'playlist') fetchPlaylist(Number(newId));
+});
+
+onActivated(() => {
+  if (loadError.value) fetchPlaylist(Number(route.params.id), true);
 });
 
 function playAll() {

src/views/RecentPlays.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
-      ← 返回
-    </button>
-    <h1 class="text-2xl font-bold mb-6">最近播放</h1>
+    <PageHeader>
+      <h1 class="text-2xl font-bold">最近播放</h1>
+    </PageHeader>
     <div v-if="player.recentLocal.length === 0" class="text-content-3">还没有播放记录，去听首歌吧</div>
     <div v-else class="space-y-2">
       <SongListItem
@@ -28,6 +27,7 @@
 <script setup lang="ts">
 import { usePlayerStore } from '../stores/player';
 import SongListItem from '../components/SongListItem.vue';
+import PageHeader from '../components/PageHeader.vue';
 
 const player = usePlayerStore();
 </script>

src/views/Settings.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
-      ← 返回
-    </button>
-    <h1 class="text-2xl font-bold mb-8">设置</h1>
+    <PageHeader>
+      <h1 class="text-2xl font-bold">设置</h1>
+    </PageHeader>
 
     <section class="mb-8">
       <h2 class="text-sm text-content-2 uppercase tracking-wider mb-4">播放</h2>
@@ -263,6 +262,7 @@ import { getVersion } from '@tauri-apps/api/app';
 import { openUrl } from '@tauri-apps/plugin-opener';
 import { open } from '@tauri-apps/plugin-dialog';
 import CustomSelect from '../components/CustomSelect.vue';
+import PageHeader from '../components/PageHeader.vue';
 import IconX from '~icons/lucide/x';
 import IconFileText from '~icons/lucide/file-text';
 import IconLoader2 from '~icons/lucide/loader-2';