feat(home.vue,App.vue):新增页面的切换过渡动画。fix(flowBall):悬浮球位置问题和调整悬浮球大小

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ceru-music",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "一款简洁优雅的音乐播放器",
   "main": "./out/main/index.js",
   "author": "sqj,wldss,star",
@@ -45,6 +45,7 @@
     "@pixi/sprite": "^7.4.3",
     "@types/needle": "^3.3.0",
     "NeteaseCloudMusicApi": "^4.27.0",
+    "animate.css": "^4.1.1",
     "axios": "^1.11.0",
     "color-extraction": "^1.0.8",
     "crypto-js": "^4.2.0",

src/main/utils/musicSdk/kg/songList.js

@@ -407,6 +407,7 @@ export default {
     return result.list[0].global_collection_id
   },
 
+  
   async getUserListDetailByLink({ info }, link) {
     let listInfo = info['0']
     let total = listInfo.count

src/renderer/components.d.ts

@@ -21,26 +21,8 @@ declare module 'vue' {
     SearchComponent: typeof import('./src/components/Search/SearchComponent.vue')['default']
     ShaderBackground: typeof import('./src/components/Play/ShaderBackground.vue')['default']
     SongVirtualList: typeof import('./src/components/Music/SongVirtualList.vue')['default']
-    TAlert: typeof import('tdesign-vue-next')['Alert']
-    TAside: typeof import('tdesign-vue-next')['Aside']
-    TBadge: typeof import('tdesign-vue-next')['Badge']
-    TButton: typeof import('tdesign-vue-next')['Button']
-    TCard: typeof import('tdesign-vue-next')['Card']
-    TContent: typeof import('tdesign-vue-next')['Content']
-    TDialog: typeof import('tdesign-vue-next')['Dialog']
-    ThemeDemo: typeof import('./src/components/ThemeDemo.vue')['default']
     ThemeSelector: typeof import('./src/components/ThemeSelector.vue')['default']
-    TIcon: typeof import('tdesign-vue-next')['Icon']
-    TImage: typeof import('tdesign-vue-next')['Image']
-    TInput: typeof import('tdesign-vue-next')['Input']
     TitleBarControls: typeof import('./src/components/TitleBarControls.vue')['default']
-    TLayout: typeof import('tdesign-vue-next')['Layout']
-    TLoading: typeof import('tdesign-vue-next')['Loading']
-    TRadioButton: typeof import('tdesign-vue-next')['RadioButton']
-    TRadioGroup: typeof import('tdesign-vue-next')['RadioGroup']
-    TSlider: typeof import('tdesign-vue-next')['Slider']
-    TSwitch: typeof import('tdesign-vue-next')['Switch']
-    TTooltip: typeof import('tdesign-vue-next')['Tooltip']
     UpdateExample: typeof import('./src/components/UpdateExample.vue')['default']
     UpdateProgress: typeof import('./src/components/UpdateProgress.vue')['default']
     UpdateSettings: typeof import('./src/components/Settings/UpdateSettings.vue')['default']

src/renderer/src/App.vue

@@ -17,7 +17,7 @@ import './assets/theme/cyan.css'
 onMounted(() => {
   userInfo.init()
   loadSavedTheme()
-  
+
   // 应用启动后延迟3秒检查更新，避免影响启动速度
   setTimeout(() => {
     checkForUpdates()
@@ -42,23 +42,38 @@ const loadSavedTheme = () => {
 
 const applyTheme = (themeName) => {
   const documentElement = document.documentElement
-  
+
   // 移除之前的主题
   documentElement.removeAttribute('theme-mode')
-  
+
   // 应用新主题（如果不是默认主题）
   if (themeName !== 'default') {
     documentElement.setAttribute('theme-mode', themeName)
   }
-  
+
   // 保存到本地存储
   localStorage.setItem('selected-theme', themeName)
 }
 </script>
 
 <template>
-  <router-view />
-  <GlobalAudio />
-  <FloatBall />
-  <UpdateProgress />
+  <div class="page">
+    <router-view v-slot="{ Component, route }">
+      <Transition :enter-active-class="`animate__animated ${route.meta.transitionIn} pagesApp`"
+        :leave-active-class="`animate__animated ${route.meta.transitionOut} pagesApp`">
+        <KeepAlive>
+          <component :is="Component" />
+        </KeepAlive>
+      </Transition>
+    </router-view>
+    <GlobalAudio />
+    <FloatBall />
+    <UpdateProgress />
+  </div>
 </template>
+<style>
+.pagesApp {
+  width: 100vw;
+  position: fixed;
+}
+</style>

src/renderer/src/components/AI/FloatBall.vue

@@ -106,11 +106,12 @@ const handleMouseMove = (e: MouseEvent) => {
 
   // 限制在屏幕范围内，底部边界为 height - 196，考虑外层容器尺寸120px
   const maxX = windowSize.value.width - 120
-  const maxY = windowSize.value.height - 196
+  const maxY = windowSize.value.height - 176
+  const minY = 90 // 顶部边界限制，不允许进入顶部90px区域
 
   ballPosition.value = {
     x: Math.max(0, Math.min(x, maxX)),
-    y: Math.max(0, Math.min(y, maxY))
+    y: Math.max(minY, Math.min(y, maxY))
   }
 }
 
@@ -134,7 +135,7 @@ const handleMouseUp = () => {
       ballClass.value = 'hidden-left'
     } else {
       // 吸附到右边
-      ballPosition.value.x = windowSize.value.width - 126
+      ballPosition.value.x = windowSize.value.width - 106
       isOnLeft.value = false
       ballClass.value = 'hidden-right'
     }
@@ -374,7 +375,7 @@ const setDefaultPosition = () => {
   updateWindowSize()
   ballPosition.value = {
     x: windowSize.value.width - 126, // 考虑外层容器尺寸120px
-    y: windowSize.value.height - 196
+    y: windowSize.value.height - 176
   }
   isOnLeft.value = false
 }
@@ -390,14 +391,24 @@ const handleResize = () => {
   updateWindowSize()
   // 保证悬浮球不超出边界
   const maxX = windowSize.value.width - 120
-  const maxY = windowSize.value.height - 196
+  const maxY = windowSize.value.height - 176
+  const minY = 90 // 顶部边界限制
+  
+  // 如果悬浮球在右侧，随窗口宽度变化更新位置
+  if (!isOnLeft.value) {
+    // 重新计算右侧位置
+    ballPosition.value.x = windowSize.value.width - 106
+  }
+  
+  // 确保位置在有效范围内
   ballPosition.value.x = Math.max(0, Math.min(ballPosition.value.x, maxX))
-  ballPosition.value.y = Math.max(0, Math.min(ballPosition.value.y, maxY))
+  ballPosition.value.y = Math.max(minY, Math.min(ballPosition.value.y, maxY))
 }
 
 onMounted(() => {
   initBallPosition()
   startAutoHide()
+  handleResize()
   window.addEventListener('resize', handleResize)
 })
 
@@ -454,7 +465,7 @@ onBeforeUnmount(() => {
         :style="{
           left: isOnLeft ? ballPosition.x + 120 + 'px' : 'auto',
           right: isOnLeft ? 'auto' : windowSize.width - ballPosition.x + 20 + 'px',
-          bottom: Math.max(20, 196) + 'px'
+          bottom: Math.max(20, 176) + 'px'
         }"
       >
         <div class="ask-header">
@@ -508,8 +519,8 @@ onBeforeUnmount(() => {
 }
 
 .float-ball {
-  width: 100px;
-  height: 100px;
+  width: 80px;
+  height: 80px;
   border-radius: 50%;
   background: #409eff;
   display: flex;

src/renderer/src/main.ts

@@ -1,4 +1,5 @@
 import './assets/base.css'
+import 'animate.css';
 
 // 引入组件库的少量全局样式变量
 // import 'tdesign-vue-next/es/style/index.css' //tdesign 组件样式

src/renderer/src/router/index.ts

@@ -1,6 +1,6 @@
 import { createWebHashHistory, createRouter, RouteRecordRaw, RouterOptions } from 'vue-router'
 
-const routes: RouteRecordRaw[] = [
+let routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'welcome',
@@ -11,10 +11,6 @@ const routes: RouteRecordRaw[] = [
     redirect: '/home/find',
     component: () => import('@renderer/views/home/index.vue'),
     children: [
-      {
-        path: '',
-        redirect: '/home/find'
-      },
       {
         path: 'find',
         name: 'find',
@@ -45,6 +41,10 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/settings',
     name: 'settings',
+    meta: {
+      transitionIn: "animate__fadeIn",
+      transitionOut: "animate__fadeOut",
+    },
     component: () => import('@renderer/views/settings/index.vue')
   },
   {
@@ -53,9 +53,30 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@renderer/views/settings/plugins.vue')
   }
 ]
+function setAnimate(routerObj: RouteRecordRaw[]) {
+  for (let i = 0; i < routerObj.length; i++) {
+    let item = routerObj[i];
+    if (item.children && item.children.length > 0) {
+      setAnimate(item.children);
+    } else {
+      if (item.meta) continue
+      item.meta = item.meta || {};
+      item.meta.transitionIn = 'animate__fadeInRight';
+      item.meta.transitionOut = 'animate__fadeOutLeft';
+    }
+  }
+}
+setAnimate(routes)
 const option: RouterOptions = {
   history: createWebHashHistory(),
-  routes
+  routes,
+  scrollBehavior(_to_, _from_, savedPosition) {
+    if (savedPosition) {
+      return savedPosition;
+    } else {
+      return { top: 0 };
+    }
+  },
 }
 
 const router = createRouter(option)

src/renderer/src/views/home/index.vue

@@ -103,14 +103,8 @@ const handleKeyDown = () => {
         </div>
 
         <nav class="nav-section">
-          <t-button
-            v-for="(item, index) in menuList"
-            :key="index"
-            :variant="menuActive == index ? 'base' : 'text'"
-            :class="menuActive == index ? 'nav-button active' : 'nav-button'"
-            block
-            @click="handleClick(index)"
-          >
+          <t-button v-for="(item, index) in menuList" :key="index" :variant="menuActive == index ? 'base' : 'text'"
+            :class="menuActive == index ? 'nav-button active' : 'nav-button'" block @click="handleClick(index)">
             <i :class="`iconfont ${item.icon} nav-icon`"></i>
             {{ item.name }}
           </t-button>
@@ -135,20 +129,10 @@ const handleKeyDown = () => {
                 <svg class="icon" aria-hidden="true">
                   <use :xlink:href="`#icon-${source}`"></use>
                 </svg>
-                <t-input
-                  v-model="keyword"
-                  placeholder="搜索音乐、歌手"
-                  style="width: 100%"
-                  @enter="handleKeyDown"
-                >
+                <t-input v-model="keyword" placeholder="搜索音乐、歌手" style="width: 100%" @enter="handleKeyDown">
                   <template #suffix>
-                    <t-button
-                      theme="primary"
-                      variant="text"
-                      shape="circle"
-                      style="display: flex; align-items: center; justify-content: center"
-                      @click="handleSearch"
-                    >
+                    <t-button theme="primary" variant="text" shape="circle"
+                      style="display: flex; align-items: center; justify-content: center" @click="handleSearch">
                       <SearchIcon style="font-size: 16px; color: #000" />
                     </t-button>
                   </template>
@@ -160,9 +144,14 @@ const handleKeyDown = () => {
           </div>
 
           <div class="mainContent">
-            <keep-alive>
-              <router-view />
-            </keep-alive>
+            <router-view v-slot="{ Component, route }">
+              <Transition name="page" :enter-active-class="`animate__animated ${route.meta.transitionIn} animate__fast`"
+                :leave-active-class="`animate__animated ${route.meta.transitionOut} animate__fast`">
+                <KeepAlive exclude="list">
+                  <component :is="Component" />
+                </KeepAlive>
+              </Transition>
+            </router-view>
           </div>
         </div>
       </t-content>
@@ -172,6 +161,11 @@ const handleKeyDown = () => {
 </template>
 
 <style lang="scss" scoped>
+.animate__animated {
+  position: absolute;
+  width: 100%;
+}
+
 .home-container {
   height: calc(100vh - var(--play-bottom-height));
   overflow-y: hidden;
@@ -218,6 +212,7 @@ const handleKeyDown = () => {
         font-weight: 500;
         font-size: 1.125rem;
         color: #111827;
+
         span {
           font-weight: 500;
           color: #b8f0cc;
@@ -264,10 +259,12 @@ const handleKeyDown = () => {
     }
   }
 }
+
 :deep(.t-layout__content) {
   height: 100%;
   display: flex;
 }
+
 .content {
   padding: 0;
   background: #f6f6f6;
@@ -288,6 +285,7 @@ const handleKeyDown = () => {
       &:last-of-type {
         margin-right: 0.5rem;
       }
+
       .iconfont {
         font-size: 1rem;
         color: #3d4043;
@@ -303,6 +301,7 @@ const handleKeyDown = () => {
       flex: 1;
       position: relative;
       justify-content: space-between;
+
       .search-input {
         -webkit-app-region: no-drag;
         display: flex;
@@ -333,11 +332,14 @@ const handleKeyDown = () => {
       }
     }
   }
+
   .mainContent {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
-    height: 0; /* 确保flex子元素能够正确计算高度 */
+    position: relative;
+    height: 0;
+    /* 确保flex子元素能够正确计算高度 */
 
     &::-webkit-scrollbar {
       width: 0.375rem;

src/renderer/src/views/music/list.vue

@@ -186,6 +186,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .list-container {
+  box-sizing: border-box;
   background: #fafafa;
   box-sizing: border-box;
   width: 100%;

src/renderer/src/views/music/local.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { MessagePlugin } from 'tdesign-vue-next'
 
 // 本地音乐数据
 const localSongs = ref([
@@ -85,25 +86,303 @@ const deleteSong = (song: any): void => {
   console.log('删除歌曲:', song.title)
   // 这里可以添加删除确认和实际删除逻辑
 }
+
+// 歌单相关功能
+interface Playlist {
+  id: number
+  name: string
+  songs: any[]
+  createdAt: string
+  updatedAt: string
+}
+
+const playlists = ref<Playlist[]>([
+  {
+    id: 1,
+    name: '我喜欢的音乐',
+    songs: [localSongs.value[0], localSongs.value[2]],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString()
+  },
+  {
+    id: 2,
+    name: '周杰伦精选',
+    songs: [localSongs.value[1], localSongs.value[3], localSongs.value[4]],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString()
+  }
+])
+
+// 当前选中的歌单
+const currentPlaylist = ref<Playlist | null>(null)
+
+// 显示歌单对话框
+const showPlaylistDialog = ref(false)
+const showCreatePlaylistDialog = ref(false)
+const newPlaylistName = ref('')
+
+// 创建新歌单
+const createPlaylist = () => {
+  if (!newPlaylistName.value.trim()) {
+    MessagePlugin.warning('歌单名称不能为空')
+    return
+  }
+
+  const newPlaylist: Playlist = {
+    id: playlists.value.length + 1,
+    name: newPlaylistName.value,
+    songs: [],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString()
+  }
+
+  playlists.value.push(newPlaylist)
+  newPlaylistName.value = ''
+  showCreatePlaylistDialog.value = false
+  MessagePlugin.success('歌单创建成功')
+}
+
+// 将当前播放列表保存为歌单
+const saveCurrentPlaylistAs = () => {
+  showCreatePlaylistDialog.value = true
+}
+
+// 一键播放歌单
+const playPlaylist = (playlist: Playlist) => {
+  if (playlist.songs.length === 0) {
+    MessagePlugin.warning('歌单中没有歌曲')
+    return
+  }
+
+  // 这里应该调用播放器的方法替换播放列表
+  console.log('播放歌单:', playlist.name, '共', playlist.songs.length, '首歌曲')
+  MessagePlugin.success(`已将播放列表替换为歌单"${playlist.name}"`)
+}
+
+// 查看歌单详情
+const viewPlaylist = (playlist: Playlist) => {
+  currentPlaylist.value = playlist
+  showPlaylistDialog.value = true
+}
+
+// 添加歌曲到歌单
+const addToPlaylist = (song: any, playlist: Playlist) => {
+  // 检查歌曲是否已在歌单中
+  const exists = playlist.songs.some((s) => s.id === song.id)
+  if (exists) {
+    MessagePlugin.warning(`歌曲"${song.title}"已在歌单中`)
+    return
+  }
+
+  playlist.songs.push(song)
+  playlist.updatedAt = new Date().toISOString()
+  MessagePlugin.success(`已将"${song.title}"添加到歌单"${playlist.name}"`)
+}
+
+// 从歌单中移除歌曲
+const removeFromPlaylist = (songId: number, playlist: Playlist) => {
+  const index = playlist.songs.findIndex((s) => s.id === songId)
+  if (index !== -1) {
+    const songTitle = playlist.songs[index].title
+    playlist.songs.splice(index, 1)
+    playlist.updatedAt = new Date().toISOString()
+    MessagePlugin.success(`已从歌单"${playlist.name}"中移除"${songTitle}"`)
+  }
+}
+
+// 删除歌单
+const deletePlaylist = (playlistId: number) => {
+  const index = playlists.value.findIndex((p) => p.id === playlistId)
+  if (index !== -1) {
+    const playlistName = playlists.value[index].name
+    playlists.value.splice(index, 1)
+
+    // 如果正在查看的歌单被删除，关闭对话框
+    if (currentPlaylist.value && currentPlaylist.value.id === playlistId) {
+      currentPlaylist.value = null
+      showPlaylistDialog.value = false
+    }
+
+    MessagePlugin.success(`已删除歌单"${playlistName}"`)
+  }
+}
 </script>
 
 <template>
-  <div class="local-container">
-    <!-- 页面标题和操作 -->
-    <div class="page-header">
-      <div class="header-left">
-        <h2>本地音乐</h2>
-        <div class="stats">
-          <span>{{ stats.totalSongs }} 首歌曲</span>
-          <span>总时长 {{ stats.totalDuration }}</span>
-          <span>总大小 {{ stats.totalSize }}</span>
+  <div>
+    <div class="local-container">
+      <!-- 页面标题和操作 -->
+      <div class="page-header">
+        <div class="header-left">
+          <h2>本地音乐</h2>
+          <div class="stats">
+            <span>{{ stats.totalSongs }} 首歌曲</span>
+            <span>总时长 {{ stats.totalDuration }}</span>
+            <span>总大小 {{ stats.totalSize }}</span>
+          </div>
+        </div>
+        <div class="header-actions">
+          <t-button theme="default" @click="openMusicFolder">
+            <i class="iconfont icon-shouye"></i>
+            打开文件夹
+          </t-button>
+          <t-button theme="primary" @click="importMusic">
+            <i class="iconfont icon-zengjia"></i>
+            导入音乐
+          </t-button>
+          <t-button theme="default" @click="saveCurrentPlaylistAs">
+            <i class="iconfont icon-baocun"></i>
+            保存为歌单
+          </t-button>
         </div>
       </div>
-      <div class="header-actions">
-        <t-button theme="default" @click="openMusicFolder">
-          <i class="iconfont icon-shouye"></i>
-          打开文件夹
-        </t-button>
+
+      <!-- 歌单区域 -->
+      <div class="playlists-section">
+        <div class="section-header">
+          <h3>我的歌单</h3>
+          <t-button theme="primary" variant="text" @click="showCreatePlaylistDialog = true">
+            <i class="iconfont icon-zengjia"></i>
+            新建歌单
+          </t-button>
+        </div>
+
+        <div class="playlists-grid">
+          <div v-for="playlist in playlists" :key="playlist.id" class="playlist-card">
+            <div class="playlist-cover" @click="viewPlaylist(playlist)">
+              <div class="cover-overlay">
+                <i class="iconfont icon-bofang"></i>
+              </div>
+            </div>
+            <div class="playlist-info">
+              <div class="playlist-name" @click="viewPlaylist(playlist)">{{ playlist.name }}</div>
+              <div class="playlist-meta">{{ playlist.songs.length }}首歌曲</div>
+            </div>
+            <div class="playlist-actions">
+              <t-button
+                shape="circle"
+                theme="primary"
+                variant="text"
+                size="small"
+                title="播放歌单"
+                @click="playPlaylist(playlist)"
+              >
+                <i class="iconfont icon-a-tingzhiwukuang"></i>
+              </t-button>
+              <t-button
+                shape="circle"
+                theme="default"
+                variant="text"
+                size="small"
+                title="查看详情"
+                @click="viewPlaylist(playlist)"
+              >
+                <i class="iconfont icon-liebiao"></i>
+              </t-button>
+              <t-button
+                shape="circle"
+                theme="danger"
+                variant="text"
+                size="small"
+                title="删除歌单"
+                @click="deletePlaylist(playlist.id)"
+              >
+                <i class="iconfont icon-shanchu"></i>
+              </t-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 音乐列表 -->
+      <div class="music-list">
+        <div class="list-header">
+          <div class="header-item index">#</div>
+          <div class="header-item title">标题</div>
+          <div class="header-item artist">艺术家</div>
+          <div class="header-item album">专辑</div>
+          <div class="header-item duration">时长</div>
+          <div class="header-item size">大小</div>
+          <div class="header-item format">格式</div>
+          <div class="header-item actions">操作</div>
+        </div>
+
+        <div class="list-body">
+          <div
+            v-for="(song, index) in localSongs"
+            :key="song.id"
+            class="song-row"
+            @dblclick="playSong(song)"
+          >
+            <div class="row-item index">{{ index + 1 }}</div>
+            <div class="row-item title">
+              <div class="song-title">{{ song.title }}</div>
+            </div>
+            <div class="row-item artist">{{ song.artist }}</div>
+            <div class="row-item album">{{ song.album }}</div>
+            <div class="row-item duration">{{ song.duration }}</div>
+            <div class="row-item size">{{ song.size }}</div>
+            <div class="row-item format">
+              <span class="format-badge">{{ song.format }}</span>
+              <span class="bitrate">{{ song.bitrate }}</span>
+            </div>
+            <div class="row-item actions">
+              <t-button
+                shape="circle"
+                theme="primary"
+                variant="text"
+                size="small"
+                title="播放"
+                @click="playSong(song)"
+              >
+                <i class="iconfont icon-a-tingzhiwukuang"></i>
+              </t-button>
+              <t-dropdown
+                :options="[
+                  {
+                    content: '添加到歌单',
+                    value: 'addToPlaylist',
+                    children: playlists.map((p) => ({ content: p.name, value: `playlist-${p.id}` }))
+                  }
+                ]"
+                @click="
+                  (data) => {
+                    if (data.startsWith('playlist-')) {
+                      const playlistId = parseInt(data.split('-')[1])
+                      const targetPlaylist = playlists.find((p) => p.id === playlistId)
+                      if (targetPlaylist) {
+                        addToPlaylist(song, targetPlaylist)
+                      }
+                    }
+                  }
+                "
+              >
+                <t-button shape="circle" theme="default" variant="text" size="small" title="更多">
+                  <i class="iconfont icon-gengduo"></i>
+                </t-button>
+              </t-dropdown>
+              <t-button
+                shape="circle"
+                theme="danger"
+                variant="text"
+                size="small"
+                title="删除"
+                @click="deleteSong(song)"
+              >
+                <i class="iconfont icon-shanchu"></i>
+              </t-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="localSongs.length === 0" class="empty-state">
+        <div class="empty-icon">
+          <i class="iconfont icon-music"></i>
+        </div>
+        <h3>暂无本地音乐</h3>
+        <p>点击"导入音乐"按钮添加您的音乐文件</p>
         <t-button theme="primary" @click="importMusic">
           <i class="iconfont icon-zengjia"></i>
           导入音乐
@@ -111,87 +390,110 @@ const deleteSong = (song: any): void => {
       </div>
     </div>
 
-    <!-- 音乐列表 -->
-    <div class="music-list">
-      <div class="list-header">
-        <div class="header-item index">#</div>
-        <div class="header-item title">标题</div>
-        <div class="header-item artist">艺术家</div>
-        <div class="header-item album">专辑</div>
-        <div class="header-item duration">时长</div>
-        <div class="header-item size">大小</div>
-        <div class="header-item format">格式</div>
-        <div class="header-item actions">操作</div>
-      </div>
+    <!-- 创建歌单对话框 -->
+    <t-dialog
+      v-model:visible="showCreatePlaylistDialog"
+      header="创建新歌单"
+      :confirm-btn="{ content: '创建', theme: 'primary' }"
+      :cancel-btn="{ content: '取消' }"
+      @confirm="createPlaylist"
+    >
+      <t-input
+        v-model="newPlaylistName"
+        placeholder="请输入歌单名称"
+        clearable
+        @keyup.enter="createPlaylist"
+      />
+    </t-dialog>
 
-      <div class="list-body">
-        <div
-          v-for="(song, index) in localSongs"
-          :key="song.id"
-          class="song-row"
-          @dblclick="playSong(song)"
-        >
-          <div class="row-item index">{{ index + 1 }}</div>
-          <div class="row-item title">
-            <div class="song-title">{{ song.title }}</div>
+    <!-- 歌单详情对话框 -->
+    <t-dialog
+      v-model:visible="showPlaylistDialog"
+      :header="currentPlaylist?.name || '歌单详情'"
+      width="800px"
+      :footer="false"
+    >
+      <template v-if="currentPlaylist">
+        <div class="playlist-header">
+          <div class="playlist-info">
+            <h3>{{ currentPlaylist.name }}</h3>
+            <div class="playlist-meta">
+              <span>{{ currentPlaylist.songs.length }} 首歌曲</span>
+              <span>创建于 {{ new Date(currentPlaylist.createdAt).toLocaleDateString() }}</span>
+            </div>
           </div>
-          <div class="row-item artist">{{ song.artist }}</div>
-          <div class="row-item album">{{ song.album }}</div>
-          <div class="row-item duration">{{ song.duration }}</div>
-          <div class="row-item size">{{ song.size }}</div>
-          <div class="row-item format">
-            <span class="format-badge">{{ song.format }}</span>
-            <span class="bitrate">{{ song.bitrate }}</span>
-          </div>
-          <div class="row-item actions">
-            <t-button
-              shape="circle"
-              theme="primary"
-              variant="text"
-              size="small"
-              title="播放"
-              @click="playSong(song)"
-            >
+          <div class="playlist-actions">
+            <t-button theme="primary" @click="playPlaylist(currentPlaylist)">
               <i class="iconfont icon-a-tingzhiwukuang"></i>
-            </t-button>
-            <t-button shape="circle" theme="default" variant="text" size="small" title="更多">
-              <i class="iconfont icon-gengduo"></i>
-            </t-button>
-            <t-button
-              shape="circle"
-              theme="danger"
-              variant="text"
-              size="small"
-              title="删除"
-              @click="deleteSong(song)"
-            >
-              <i class="iconfont icon-shanchu"></i>
+              一键播放
             </t-button>
           </div>
         </div>
-      </div>
-    </div>
 
-    <!-- 空状态 -->
-    <div v-if="localSongs.length === 0" class="empty-state">
-      <div class="empty-icon">
-        <i class="iconfont icon-music"></i>
-      </div>
-      <h3>暂无本地音乐</h3>
-      <p>点击"导入音乐"按钮添加您的音乐文件</p>
-      <t-button theme="primary" @click="importMusic">
-        <i class="iconfont icon-zengjia"></i>
-        导入音乐
-      </t-button>
-    </div>
+        <div class="playlist-songs">
+          <div class="list-header">
+            <div class="header-item index">#</div>
+            <div class="header-item title">标题</div>
+            <div class="header-item artist">艺术家</div>
+            <div class="header-item album">专辑</div>
+            <div class="header-item duration">时长</div>
+            <div class="header-item actions">操作</div>
+          </div>
+
+          <div class="list-body">
+            <div
+              v-for="(song, index) in currentPlaylist.songs"
+              :key="song.id"
+              class="song-row"
+              @dblclick="playSong(song)"
+            >
+              <div class="row-item index">{{ index + 1 }}</div>
+              <div class="row-item title">
+                <div class="song-title">{{ song.title }}</div>
+              </div>
+              <div class="row-item artist">{{ song.artist }}</div>
+              <div class="row-item album">{{ song.album }}</div>
+              <div class="row-item duration">{{ song.duration }}</div>
+              <div class="row-item actions">
+                <t-button
+                  shape="circle"
+                  theme="primary"
+                  variant="text"
+                  size="small"
+                  title="播放"
+                  @click="playSong(song)"
+                >
+                  <i class="iconfont icon-a-tingzhiwukuang"></i>
+                </t-button>
+                <t-button
+                  shape="circle"
+                  theme="danger"
+                  variant="text"
+                  size="small"
+                  title="从歌单中移除"
+                  @click="removeFromPlaylist(song.id, currentPlaylist)"
+                >
+                  <i class="iconfont icon-shanchu"></i>
+                </t-button>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="currentPlaylist.songs.length === 0" class="empty-playlist">
+            <p>歌单中暂无歌曲</p>
+          </div>
+        </div>
+      </template>
+    </t-dialog>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .local-container {
   padding: 2rem;
-  max-width: 1400px;
   margin: 0 auto;
+  width: 100%;
+  position: relative;
 }
 
 .page-header {
@@ -231,6 +533,7 @@ const deleteSong = (song: any): void => {
 }
 
 .music-list {
+  width: 100%;
   background: #fff;
   border-radius: 0.75rem;
   overflow: hidden;
@@ -239,7 +542,9 @@ const deleteSong = (song: any): void => {
 
 .list-header {
   display: grid;
-  grid-template-columns: 60px 1fr 150px 150px 80px 80px 120px 120px;
+  width: 100%;
+  grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr 1fr 1fr;
+
   gap: 1rem;
   padding: 1rem 1.5rem;
   background: #f9fafb;
@@ -257,7 +562,8 @@ const deleteSong = (song: any): void => {
 .list-body {
   .song-row {
     display: grid;
-    grid-template-columns: 60px 1fr 150px 150px 80px 80px 120px 120px;
+    grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr 1fr 1fr;
+
     gap: 1rem;
     padding: 1rem 1.5rem;
     border-bottom: 1px solid #f3f4f6;
@@ -365,4 +671,152 @@ const deleteSong = (song: any): void => {
     margin-bottom: 2rem;
   }
 }
+
+/* 歌单区域样式 */
+.playlists-section {
+  margin-bottom: 2rem;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+
+    h3 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #111827;
+    }
+  }
+}
+
+.playlists-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.playlist-card {
+  background: #fff;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+    .playlist-cover .cover-overlay {
+      opacity: 1;
+    }
+  }
+
+  .playlist-cover {
+    height: 160px;
+    background: linear-gradient(135deg, #4f46e5, #7c3aed);
+    position: relative;
+    cursor: pointer;
+
+    .cover-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.3);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+
+      .iconfont {
+        font-size: 3rem;
+        color: #fff;
+      }
+    }
+  }
+
+  .playlist-info {
+    padding: 1rem;
+
+    .playlist-name {
+      font-weight: 600;
+      color: #111827;
+      margin-bottom: 0.25rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+
+      &:hover {
+        color: #4f46e5;
+      }
+    }
+
+    .playlist-meta {
+      font-size: 0.75rem;
+      color: #6b7280;
+    }
+  }
+
+  .playlist-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 1rem 1rem;
+    gap: 0.5rem;
+  }
+}
+
+/* 歌单详情对话框样式 */
+.playlist-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+
+  .playlist-info {
+    h3 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: #111827;
+      margin-bottom: 0.5rem;
+    }
+
+    .playlist-meta {
+      display: flex;
+      gap: 1rem;
+      font-size: 0.875rem;
+      color: #6b7280;
+
+      span {
+        &:not(:last-child)::after {
+          content: '•';
+          margin-left: 1rem;
+          color: #d1d5db;
+        }
+      }
+    }
+  }
+}
+
+.playlist-songs {
+  .list-header {
+    grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr;
+  }
+
+  .list-body .song-row {
+    grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr;
+  }
+}
+
+.empty-playlist {
+  text-align: center;
+  padding: 2rem;
+  color: #6b7280;
+}
 </style>

yarn.lock

@@ -2285,6 +2285,11 @@ alien-signals@^2.0.5:
   resolved "https://registry.npmmirror.com/alien-signals/-/alien-signals-2.0.6.tgz"
   integrity sha512-P3TxJSe31bUHBiblg59oU1PpaWPtmxF9GhJ/cB7OkgJ0qN/ifFSKUI25/v8ZhsT+lIG6ac8DpTOplXxORX6F3Q==
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-2.1.1.tgz"
@@ -5303,12 +5308,7 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash@^4.17.15:
-  version "4.17.21"
-  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-lodash@^4.17.21:
+lodash@^4.17.15, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==