feat: 加入导航按钮,支持前进回退,加入歌单详情界面

package-lock.json

@@ -22,6 +22,7 @@
         "jss": "^10.10.0",
         "jss-preset-default": "^10.10.0",
         "pinia": "^3.0.4",
+        "tdesign-vue-next": "^1.17.7",
         "vue": "^3.4.21",
         "vue-router": "^4.6.4"
       },
@@ -2026,6 +2027,24 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.15.9.tgz",
+      "integrity": "sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/tinycolor2": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmmirror.com/@types/tinycolor2/-/tinycolor2-1.4.6.tgz",
+      "integrity": "sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/validator": {
+      "version": "13.15.10",
+      "resolved": "https://registry.npmmirror.com/@types/validator/-/validator-13.15.10.tgz",
+      "integrity": "sha512-T8L6i7wCuyoK8A/ZeLYt1+q0ty3Zb9+qbSSvrIVitzT3YjZqkTZ40IbRsPanlB4h1QB3JVL1SYCdR6ngtFYcuA==",
+      "license": "MIT"
+    },
     "node_modules/@types/verror": {
       "version": "1.10.11",
       "resolved": "https://registry.npmmirror.com/@types/verror/-/verror-1.10.11.tgz",
@@ -6568,6 +6587,12 @@
         "npm": ">= 3.0.0"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.15.6.tgz",
+      "integrity": "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==",
+      "license": "MIT"
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@@ -6800,6 +6825,55 @@
         "node": ">=6"
       }
     },
+    "node_modules/tdesign-icons-vue-next": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/tdesign-icons-vue-next/-/tdesign-icons-vue-next-0.4.1.tgz",
+      "integrity": "sha512-uDPuTLRORnGcTyVGNoentNaK4V+ZcBmhYwcY3KqDaQQ5rrPeLMxu0ZVmgOEf0JtF2QZiqAxY7vodNEiLUdoRKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.16.3"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/tdesign-vue-next": {
+      "version": "1.17.7",
+      "resolved": "https://registry.npmmirror.com/tdesign-vue-next/-/tdesign-vue-next-1.17.7.tgz",
+      "integrity": "sha512-mV/9mm/nIS+tfx1oUG1IMMmTPFeZfLmP8bIVEa7S9CpVke2+Yei5i8RBXmDwF/d+OaDoKVgwUq08goSIZfRePQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "@popperjs/core": "^2.11.8",
+        "@types/lodash-es": "^4.17.12",
+        "@types/sortablejs": "^1.15.1",
+        "@types/tinycolor2": "^1.4.3",
+        "@types/validator": "^13.7.17",
+        "dayjs": "^1.11.10",
+        "lodash-es": "^4.17.21",
+        "mitt": "^3.0.1",
+        "sortablejs": "^1.15.0",
+        "tdesign-icons-vue-next": "~0.4.1",
+        "tinycolor2": "^1.6.0",
+        "validator": "^13.15.23"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "vue": ">=3.1.0"
+      }
+    },
+    "node_modules/tdesign-vue-next/node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/temp-file": {
       "version": "3.4.0",
       "resolved": "https://registry.npmmirror.com/temp-file/-/temp-file-3.4.0.tgz",
@@ -6855,6 +6929,12 @@
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
       "license": "MIT"
     },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
+      "license": "MIT"
+    },
     "node_modules/tmp": {
       "version": "0.2.5",
       "resolved": "https://registry.npmmirror.com/tmp/-/tmp-0.2.5.tgz",
@@ -6995,6 +7075,15 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/validator": {
+      "version": "13.15.26",
+      "resolved": "https://registry.npmmirror.com/validator/-/validator-13.15.26.tgz",
+      "integrity": "sha512-spH26xU080ydGggxRyR1Yhcbgx+j3y5jbNXk/8L+iRvdIEQ4uTRH2Sgf2dokud6Q4oAtsbNvJ1Ft+9xmm6IZcA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/varint": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/varint/-/varint-6.0.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "jss": "^10.10.0",
     "jss-preset-default": "^10.10.0",
     "pinia": "^3.0.4",
+    "tdesign-vue-next": "^1.17.7",
     "vue": "^3.4.21",
     "vue-router": "^4.6.4"
   },

src/App.vue

@@ -5,7 +5,27 @@
 
     <main class="main-content">
       <header class="header-bar">
-        <div class="header-left"></div>
+        <div class="header-left">
+          <!-- 路由导航按钮 -->
+          <div class="navigation-buttons">
+            <button 
+              class="nav-btn" 
+              @click="handleBack" 
+              :disabled="!canGoBack"
+              title="返回"
+            >
+              <Icon icon="lucide:chevron-left" width="18" />
+            </button>
+            <button 
+              class="nav-btn" 
+              @click="handleForward" 
+              :disabled="!canGoForward"
+              title="前进"
+            >
+              <Icon icon="lucide:chevron-right" width="18" />
+            </button>
+          </div>
+        </div>
         <WindowControls />
       </header>
 
@@ -30,8 +50,50 @@ import SideBar from './components/layout/SideBar.vue';
 import WindowControls from './components/layout/WindowControls.vue';
 import PlayerBar from './components/layout/PlayerBar.vue';
 import SettingsOverlay from "./components/layout/SettingsOverlay.vue";
+import { Icon } from '@iconify/vue';
+import { ref, watch, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 
 const store = usePlayerStore();
+const router = useRouter();
+const route = useRoute();
+
+// 跟踪路由历史，判断是否可以返回和前进
+const canGoBack = ref(true); // 返回按钮始终可用，让浏览器处理
+const canGoForward = ref(false);
+
+// 记录之前的路由路径
+const previousPath = ref(route.path);
+
+// 监听路由变化，更新前进按钮状态
+watch(
+  () => route.path,
+  (newPath) => {
+    // 当从歌单页返回主页时，前进按钮应该可用
+    if (newPath === '/' && previousPath.value.startsWith('/playlist/')) {
+      canGoForward.value = true;
+    } else if (newPath.startsWith('/playlist/')) {
+      // 当进入歌单页时，前进按钮不可用
+      canGoForward.value = false;
+    }
+    // 更新之前的路径
+    previousPath.value = newPath;
+  },
+  { immediate: true }
+);
+
+// 监听返回和前进事件
+const handleBack = () => {
+  router.back();
+};
+
+const handleForward = () => {
+  if (canGoForward.value) {
+    router.forward();
+    // 前进后前进按钮可能不可用，具体取决于历史记录
+    canGoForward.value = false;
+  }
+};
 </script>
 
 <style lang="scss">
@@ -142,6 +204,44 @@ html, body, #app {
       align-items: center;
       -webkit-app-region: drag; /* Electron 拖拽 */
       background: var(--header-bg);
+      
+      .header-left {
+        padding: 0 20px;
+        -webkit-app-region: no-drag;
+        
+        .navigation-buttons {
+          display: flex;
+          gap: 12px;
+          
+          .nav-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            border: 1px solid var(--border-color);
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            
+            &:hover:not(:disabled) {
+              background: var(--bg-secondary);
+              border-color: var(--border-light);
+              transform: translateY(-2px);
+              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+            }
+            
+            &:disabled {
+              opacity: 0.4;
+              cursor: not-allowed;
+              transform: none;
+              box-shadow: none;
+            }
+          }
+        }
+      }
     }
 
     /* 路由视图滚动区 */

src/components/layout/SettingsOverlay.vue

@@ -30,11 +30,11 @@
               <h2>{{ menuItems.find(i => i.id === activeTab)?.name }}</h2>
               <div class="dummy-option">
                 <span>深色模式</span>
-                <el-switch v-model="store.darkMode" @change="logSetting('darkMode', store.darkMode)" />
+                <t-switch v-model="store.darkMode" @change="logSetting('darkMode', store.darkMode)" />
               </div>
               <div class="dummy-option">
                 <span>自动播放</span>
-                <el-switch v-model="settings.autoPlay" @change="logSetting('autoPlay', settings.autoPlay)" />
+                <t-switch v-model="settings.autoPlay" @change="logSetting('autoPlay', settings.autoPlay)" />
               </div>
             </div>
 
@@ -43,15 +43,15 @@
               <h2>{{ menuItems.find(i => i.id === activeTab)?.name }}</h2>
               <div class="dummy-option">
                 <span>启用高音质 (Hi-Res)</span>
-                <el-switch v-model="settings.hiResAudio" @change="logSetting('hiResAudio', settings.hiResAudio)" />
+                <t-switch v-model="settings.hiResAudio" @change="logSetting('hiResAudio', settings.hiResAudio)" />
               </div>
               <div class="dummy-option">
                 <span>开启桌面歌词</span>
-                <el-switch v-model="settings.desktopLyrics" @change="logSetting('desktopLyrics', settings.desktopLyrics)" />
+                <t-switch v-model="settings.desktopLyrics" @change="logSetting('desktopLyrics', settings.desktopLyrics)" />
               </div>
               <div class="dummy-option">
                 <span>音量增强</span>
-                <el-switch v-model="settings.volumeBoost" @change="logSetting('volumeBoost', settings.volumeBoost)" />
+                <t-switch v-model="settings.volumeBoost" @change="logSetting('volumeBoost', settings.volumeBoost)" />
               </div>
             </div>
 
@@ -60,11 +60,11 @@
               <h2>{{ menuItems.find(i => i.id === activeTab)?.name }}</h2>
               <div class="dummy-option">
                 <span>启用全局快捷键</span>
-                <el-switch v-model="settings.globalShortcuts" @change="logSetting('globalShortcuts', settings.globalShortcuts)" />
+                <t-switch v-model="settings.globalShortcuts" @change="logSetting('globalShortcuts', settings.globalShortcuts)" />
               </div>
               <div class="dummy-option">
                 <span>媒体键控制</span>
-                <el-switch v-model="settings.mediaKeys" @change="logSetting('mediaKeys', settings.mediaKeys)" />
+                <t-switch v-model="settings.mediaKeys" @change="logSetting('mediaKeys', settings.mediaKeys)" />
               </div>
             </div>
 
@@ -73,11 +73,11 @@
               <h2>{{ menuItems.find(i => i.id === activeTab)?.name }}</h2>
               <div class="dummy-option">
                 <span>下载完成后通知</span>
-                <el-switch v-model="settings.downloadNotify" @change="logSetting('downloadNotify', settings.downloadNotify)" />
+                <t-switch v-model="settings.downloadNotify" @change="logSetting('downloadNotify', settings.downloadNotify)" />
               </div>
               <div class="dummy-option">
                 <span>高质量下载</span>
-                <el-switch v-model="settings.hqDownload" @change="logSetting('hqDownload', settings.hqDownload)" />
+                <t-switch v-model="settings.hqDownload" @change="logSetting('hqDownload', settings.hqDownload)" />
               </div>
             </div>
 

src/components/layout/SideBar.vue

@@ -6,17 +6,16 @@
     </div>
 
     <nav class="menu">
-      <router-link to="/" class="menu-item" active-class="active">
+      <router-link 
-        <Icon icon="lucide:home" width="20" />
+        v-for="item in menuItems" 
-        <span>主页</span>
+        :key="item.path"
-      </router-link>
+        :to="item.path" 
-      <router-link to="/local" class="menu-item" active-class="active">
+        class="menu-item"
-        <Icon icon="lucide:hard-drive" width="20" />
+        active-class="active"
-        <span>本地音乐</span>
+        :title="item.label"
-      </router-link>
+      >
-      <router-link to="/playlist" class="menu-item" active-class="active">
+        <Icon :icon="item.icon" width="20" />
-        <Icon icon="lucide:list-music" width="20" />
+        <span>{{ item.label }}</span>
-        <span>我的歌单</span>
       </router-link>
     </nav>
   </aside>
@@ -24,6 +23,12 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
+
+const menuItems = [
+  { path: '/', label: '主页', icon: 'lucide:home' },
+  { path: '/local', label: '本地音乐', icon: 'lucide:hard-drive' },
+  { path: '/playlist', label: '我的歌单', icon: 'lucide:list-music' }
+];
 </script>
 
 <style scoped lang="scss">
@@ -33,34 +38,52 @@ import { Icon } from '@iconify/vue';
   background-color: var(--sidebar-bg);
   display: flex;
   flex-direction: column;
-  padding: 20px 12px;
+  padding: 24px 16px;
   border-right: 1px solid var(--sidebar-border);
-  // 针对 Electron 的拖拽区域避免
   -webkit-app-region: drag;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0.05);
+
+  &:hover {
+    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
+  }
 
   .brand {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 16px;
-    margin-bottom: 40px;
+    margin-bottom: 48px;
     padding-left: 12px;
+    -webkit-app-region: no-drag;
+    transition: all 0.3s ease;
+    opacity: 0;
+    animation: fadeInDown 0.6s ease forwards;
 
     .logo-placeholder {
-      width: 32px;
+      width: 36px;
-      height: 32px;
+      height: 36px;
-      background: linear-gradient(135deg, #ff6b6b, #556270);
+      background: linear-gradient(135deg, #6366f1, #8b5cf6);
-      border-radius: 8px;
+      border-radius: 12px;
       color: white;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: bold;
+      font-size: 18px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+
+      &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
+      }
     }
 
     .app-name {
       font-weight: 600;
-      font-size: 18px;
+      font-size: 20px;
       color: var(--text-primary);
+      letter-spacing: -0.02em;
     }
   }
 
@@ -68,31 +91,100 @@ import { Icon } from '@iconify/vue';
     display: flex;
     flex-direction: column;
     gap: 8px;
-    -webkit-app-region: no-drag; // 菜单项可点击，不可拖拽
+    -webkit-app-region: no-drag;
 
     .menu-item {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 14px;
-      padding: 10px 16px;
+      padding: 12px 16px;
-      border-radius: 10px;
+      border-radius: 12px;
       color: var(--text-secondary);
       text-decoration: none;
-      transition: all 0.2s ease;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      font-size: 14px;
+      font-size: 15px;
+      font-weight: 400;
+      position: relative;
+      overflow: hidden;
+      opacity: 0;
+      animation: fadeInLeft 0.5s ease forwards;
+
+      &:nth-child(1) { animation-delay: 0.2s; }
+      &:nth-child(2) { animation-delay: 0.3s; }
+      &:nth-child(3) { animation-delay: 0.4s; }
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 4px;
+        height: 100%;
+        background: linear-gradient(180deg, #6366f1, #8b5cf6);
+        transform: scaleY(0);
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 0 2px 2px 0;
+      }
 
       &:hover {
         background-color: var(--nav-item-hover);
         color: var(--text-primary);
+        transform: translateX(4px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+
+        &::before {
+          transform: scaleY(1);
+        }
       }
 
       &.active {
-        background-color: var(--bg-primary);
+        background-color: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
-        color: var(--text-primary);
+        background: var(--bg-primary);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        color: #6366f1;
         font-weight: 500;
+        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.15);
+        transform: translateX(4px);
+
+        &::before {
+          transform: scaleY(1);
+        }
+
+        .iconify {
+          filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.5));
+        }
+      }
+
+      span {
+        transition: all 0.3s ease;
+      }
+
+      &:hover span {
+        transform: translateX(2px);
       }
     }
   }
 }
+
+// 动画定义
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
 </style>

src/main.ts

@@ -5,15 +5,17 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 
 import App from './App.vue'
 import HomeView from './views/HomeView.vue'
+import PlaylistDetailView from './views/PlaylistDetailView.vue'
 
-import ElementPlus from 'element-plus'
+import TDesign from 'tdesign-vue-next'
-import 'element-plus/dist/index.css'
+import 'tdesign-vue-next/es/style/index.css'
 
 const pinia = createPinia()
 const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     { path: '/', component: HomeView },
+    { path: '/playlist/:id', component: PlaylistDetailView },
     // 可扩展其他路由
   ]
 })
@@ -21,5 +23,5 @@ const router = createRouter({
 const app = createApp(App)
 app.use(pinia)
 app.use(router)
-app.use(ElementPlus)
+app.use(TDesign)
 app.mount('#app')

src/views/HomeView.vue

@@ -261,17 +261,22 @@ const playlistData = ref([
 
 ]);
 
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
 const handlePlayListClick = (item: any) => {
-  console.log("跳转到歌单详情:", item.id);
+  router.push(`/playlist/${item.id}`);
 };
 </script>
 
 <style scoped lang="scss">
 .home-view {
-  padding-bottom: 40px;
+  padding: 20px 0 40px 0;
 
   .section-container {
     margin-bottom: 40px;
+    padding: 0 20px;
 
     .section-header {
       display: flex;
@@ -282,18 +287,18 @@ const handlePlayListClick = (item: any) => {
       .section-title {
         font-size: 24px;
         font-weight: 800;
-        color: #1a1a1a;
+        color: var(--text-primary);
         margin: 0;
       }
 
       .more {
         font-size: 13px;
-        color: #888;
+        color: var(--text-secondary);
         display: flex;
         align-items: center;
         cursor: pointer;
         transition: color 0.2s;
-        &:hover { color: #ff6b6b; }
+        &:hover { color: #6366f1; }
       }
     }
   }

src/views/PlaylistDetailView.vue

@@ -0,0 +1,568 @@
+<template>
+  <div class="playlist-detail">
+    <!-- 歌单头部信息 -->
+    <header class="playlist-header">
+      <div class="header-content">
+        <div class="cover-area">
+          <img :src="playlist.info.img" :alt="playlist.info.name" class="playlist-cover" />
+          <div class="cover-overlay"></div>
+        </div>
+        
+        <div class="info-area">
+          <div class="playlist-type">歌单</div>
+          <h1 class="playlist-name">{{ playlist.info.name }}</h1>
+          <div class="playlist-meta">
+            <span class="author">{{ playlist.info.author }}</span>
+            <span class="play-count">
+              <Icon icon="lucide:play" width="14" /> {{ playlist.info.play_count }}
+            </span>
+            <span class="song-count">{{ playlist.total }} 首</span>
+          </div>
+          
+          <div class="playlist-desc" v-if="playlist.info.desc">
+            {{ playlist.info.desc }}
+          </div>
+          
+          <div class="action-buttons">
+            <button class="play-btn">
+              <Icon icon="lucide:play" width="20" /> 播放全部
+            </button>
+            <button class="add-btn">
+              <Icon icon="lucide:plus" width="18" /> 收藏
+            </button>
+            <button class="more-btn">
+              <Icon icon="lucide:more-vertical" width="18" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+    
+    <!-- 歌曲列表 -->
+    <main class="song-list">
+      <div class="list-header">
+        <div class="list-title">歌曲列表</div>
+        <div class="list-info">共 {{ playlist.total }} 首歌曲</div>
+      </div>
+      
+      <table class="song-table">
+        <thead>
+          <tr>
+            <th class="col-index">#</th>
+            <th class="col-info">歌曲</th>
+            <th class="col-album">专辑</th>
+            <th class="col-duration">时长</th>
+            <th class="col-action">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(song, index) in playlist.list" :key="song.songmid" class="song-item">
+            <td class="col-index">{{ index + 1 }}</td>
+            <td class="col-info">
+              <div class="song-info">
+                <img :src="song.s_img" :alt="song.name" class="song-cover" />
+                <div class="song-detail">
+                  <div class="song-name">{{ song.name }}</div>
+                  <div class="song-singer">{{ song.singer }}</div>
+                </div>
+              </div>
+            </td>
+            <td class="col-album">{{ song.albumName }}</td>
+            <td class="col-duration">{{ song.interval }}</td>
+            <td class="col-action">
+              <button class="play-action">
+                <Icon icon="lucide:play" width="16" />
+              </button>
+              <button class="more-action">
+                <Icon icon="lucide:more-vertical" width="16" />
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon } from '@iconify/vue';
+
+// 固定歌单数据
+const playlist = ref({
+  "list": [
+    {
+      "singer": "那束花本是给她",
+      "name": "David Lessenger-地球脉动的小曲We Don't Talk Anymore (纯享版) （那束花本是给她 remix）",
+      "albumName": "万物",
+      "albumId": 286652435,
+      "source": "wy",
+      "interval": "03:17",
+      "songmid": 2750774430,
+      "img": "https://p2.music.126.net/zT9grAc0aicJbxglDtnPXA==/109951172079101681.jpg?param=1024y1024",
+      "m_img": "https://p2.music.126.net/zT9grAc0aicJbxglDtnPXA==/109951172079101681.jpg?param=512y512",
+      "s_img": "https://p2.music.126.net/zT9grAc0aicJbxglDtnPXA==/109951172079101681.jpg?param=128y128",
+      "types": [
+        {
+          "type": "standard",
+          "size": "4.53MB"
+        },
+        {
+          "type": "exhigh",
+          "size": "7.55MB"
+        },
+        {
+          "type": "lossless",
+          "size": "19.43MB"
+        },
+        {
+          "type": "sky",
+          "size": "19.46MB"
+        },
+        {
+          "type": "jyeffect",
+          "size": "69.05MB"
+        },
+        {
+          "type": "jymaster",
+          "size": "118.62MB"
+        }
+      ]
+    },
+    {
+      "singer": "Taylor Swift、Brendon Urie",
+      "name": "ME!",
+      "albumName": "Lover",
+      "albumId": 80752440,
+      "source": "wy",
+      "interval": "03:13",
+      "songmid": 1382781549,
+      "img": "https://p2.music.126.net/6CB6Jsmb7k7qiJqfMY5Row==/109951164260234943.jpg?param=1024y1024",
+      "m_img": "https://p2.music.126.net/6CB6Jsmb7k7qiJqfMY5Row==/109951164260234943.jpg?param=512y512",
+      "s_img": "https://p2.music.126.net/6CB6Jsmb7k7qiJqfMY5Row==/109951164260234943.jpg?param=128y128",
+      "types": [
+        {
+          "type": "standard",
+          "size": "4.42MB"
+        },
+        {
+          "type": "exhigh",
+          "size": "7.37MB"
+        },
+        {
+          "type": "lossless",
+          "size": "25.86MB"
+        },
+        {
+          "type": "sky",
+          "size": "23.40MB"
+        },
+        {
+          "type": "jyeffect",
+          "size": "73.40MB"
+        },
+        {
+          "type": "jymaster",
+          "size": "127.41MB"
+        }
+      ]
+    },
+    {
+      "singer": "DECO*27、初音ミク",
+      "name": "ラビットホール",
+      "albumName": "ラビットホール",
+      "albumId": 164629017,
+      "source": "wy",
+      "interval": "02:39",
+      "songmid": 2043178301,
+      "img": "https://p2.music.126.net/20QetRSvLjUmyyGF__1ALA==/109951168575689926.jpg?param=1024y1024",
+      "m_img": "https://p2.music.126.net/20QetRSvLjUmyyGF__1ALA==/109951168575689926.jpg?param=512y512",
+      "s_img": "https://p2.music.126.net/20QetRSvLjUmyyGF__1ALA==/109951168575689926.jpg?param=128y128",
+      "types": [
+        {
+          "type": "standard",
+          "size": "3.64MB"
+        },
+        {
+          "type": "exhigh",
+          "size": "6.07MB"
+        },
+        {
+          "type": "lossless",
+          "size": "20.65MB"
+        },
+        {
+          "type": "sky",
+          "size": "20.15MB"
+        },
+        {
+          "type": "jyeffect",
+          "size": "64.58MB"
+        },
+        {
+          "type": "jymaster",
+          "size": "113.57MB"
+        }
+      ]
+    },
+    {
+      "singer": "d0tc0mmie、GUMI",
+      "name": "I Can't Wait (feat. GUMI)",
+      "albumName": "I Can't Wait (feat. GUMI)",
+      "albumId": 353993404,
+      "source": "wy",
+      "interval": "01:35",
+      "songmid": 3326907142,
+      "img": "https://p2.music.126.net/0GEf5ziQ8mG0HfRY8djyvg==/109951172408103691.jpg?param=1024y1024",
+      "m_img": "https://p2.music.126.net/0GEf5ziQ8mG0HfRY8djyvg==/109951172408103691.jpg?param=512y512",
+      "s_img": "https://p2.music.126.net/0GEf5ziQ8mG0HfRY8djyvg==/109951172408103691.jpg?param=128y128",
+      "types": [
+        {
+          "type": "standard",
+          "size": "2.19MB"
+        },
+        {
+          "type": "exhigh",
+          "size": "3.65MB"
+        },
+        {
+          "type": "lossless",
+          "size": "12.01MB"
+        },
+        {
+          "type": "hires",
+          "size": "20.59MB"
+        },
+        {
+          "type": "sky",
+          "size": "11.29MB"
+        },
+        {
+          "type": "jyeffect",
+          "size": "36.05MB"
+        },
+        {
+          "type": "jymaster",
+          "size": "65.54MB"
+        }
+      ]
+    },
+    {
+      "singer": "梶浦由記",
+      "name": "Sis puella magica!",
+      "albumName": "魔法少女まどか☆マギカ Music Collection",
+      "albumId": 2732401,
+      "source": "wy",
+      "interval": "02:49",
+      "songmid": 28138654,
+      "img": "https://p2.music.126.net/7cYVfSgSZFZeVheUFDGOIg==/109951166197931207.jpg?param=1024y1024",
+      "m_img": "https://p2.music.126.net/7cYVfSgSZFZeVheUFDGOIg==/109951166197931207.jpg?param=512y512",
+      "s_img": "https://p2.music.126.net/7cYVfSgSZFZeVheUFDGOIg==/109951166197931207.jpg?param=128y128",
+      "types": [
+        {
+          "type": "standard",
+          "size": "3.88MB"
+        },
+        {
+          "type": "exhigh",
+          "size": "6.47MB"
+        },
+        {
+          "type": "lossless",
+          "size": "31.72MB"
+        },
+        {
+          "type": "sky",
+          "size": "17.53MB"
+        },
+        {
+          "type": "jyeffect",
+          "size": "59.17MB"
+        },
+        {
+          "type": "jymaster",
+          "size": "100.19MB"
+        }
+      ]
+    }
+  ],
+  "page": 1,
+  "limit": 5,
+  "total": 53,
+  "source": "wy",
+  "info": {
+    "play_count": "51",
+    "name": "我喜欢的音乐",
+    "img": "https://p1.music.126.net/G3NA3TqQD3L51OkzrhNQmw==/109951172080623907.jpg",
+    "desc": "",
+    "author": "蓝蜻蜓017"
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.playlist-detail {
+  min-height: 100%;
+  
+  .playlist-header {
+    background: var(--header-bg);
+    padding: 40px 20px;
+    color: var(--text-primary);
+    
+    .header-content {
+      max-width: 1400px;
+      margin: 0 auto;
+      display: flex;
+      gap: 30px;
+      align-items: flex-end;
+      
+      .cover-area {
+        position: relative;
+        
+        .playlist-cover {
+          width: 200px;
+          height: 200px;
+          object-fit: cover;
+          border-radius: 12px;
+          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
+        }
+        
+        .cover-overlay {
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
+          border-radius: 12px;
+        }
+      }
+      
+      .info-area {
+        flex: 1;
+        padding-bottom: 20px;
+        
+        .playlist-type {
+          font-size: 14px;
+          opacity: 0.9;
+          margin-bottom: 8px;
+        }
+        
+        .playlist-name {
+          font-size: 36px;
+          font-weight: 800;
+          margin: 0 0 16px 0;
+          line-height: 1.2;
+        }
+        
+        .playlist-meta {
+          display: flex;
+          gap: 20px;
+          font-size: 14px;
+          opacity: 0.9;
+          margin-bottom: 20px;
+          
+          .author {
+            font-weight: 500;
+          }
+          
+          .play-count {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+          }
+        }
+        
+        .playlist-desc {
+          font-size: 14px;
+          line-height: 1.6;
+          opacity: 0.9;
+          margin-bottom: 24px;
+          max-width: 600px;
+        }
+        
+        .action-buttons {
+          display: flex;
+          gap: 12px;
+          
+          button {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 24px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            
+            &.play-btn {
+              background: #6366f1;
+              color: white;
+              padding: 12px 24px;
+              
+              &:hover {
+                transform: scale(1.05);
+                box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
+              }
+            }
+            
+            &.add-btn {
+              background: var(--bg-secondary);
+              color: var(--text-primary);
+              border: 1px solid var(--border-color);
+              
+              &:hover {
+                background: var(--bg-tertiary);
+                border-color: var(--text-secondary);
+              }
+            }
+            
+            &.more-btn {
+              background: var(--bg-secondary);
+              color: var(--text-primary);
+              border: 1px solid var(--border-color);
+              width: 40px;
+              height: 40px;
+              padding: 0;
+              justify-content: center;
+              border-radius: 50%;
+              
+              &:hover {
+                background: var(--bg-tertiary);
+                border-color: var(--text-secondary);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  .song-list {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 30px 20px;
+    
+    .list-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+      
+      .list-title {
+        font-size: 20px;
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+      
+      .list-info {
+        font-size: 14px;
+        color: var(--text-secondary);
+      }
+    }
+    
+    .song-table {
+      width: 100%;
+      border-collapse: collapse;
+      background: var(--bg-primary);
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+      
+      th, td {
+        padding: 16px 20px;
+        text-align: left;
+        border-bottom: 1px solid var(--border-light);
+      }
+      
+      th {
+        background: var(--bg-secondary);
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+      
+      .col-index {
+        width: 60px;
+        font-size: 14px;
+        color: var(--text-secondary);
+      }
+      
+      .col-info {
+        flex: 1;
+      }
+      
+      .col-album {
+        width: 250px;
+        font-size: 14px;
+        color: var(--text-secondary);
+      }
+      
+      .col-duration {
+        width: 100px;
+        font-size: 14px;
+        color: var(--text-secondary);
+      }
+      
+      .col-action {
+        width: 80px;
+      }
+      
+      .song-item {
+        transition: background-color 0.2s ease;
+        
+        &:hover {
+          background: var(--bg-secondary);
+        }
+        
+        .song-info {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          
+          .song-cover {
+            width: 44px;
+            height: 44px;
+            object-fit: cover;
+            border-radius: 6px;
+          }
+          
+          .song-detail {
+            .song-name {
+              font-size: 14px;
+              font-weight: 500;
+              color: var(--text-primary);
+              margin-bottom: 4px;
+            }
+            
+            .song-singer {
+              font-size: 13px;
+              color: var(--text-secondary);
+            }
+          }
+        }
+        
+        button {
+          background: none;
+          border: none;
+          color: var(--text-secondary);
+          cursor: pointer;
+          padding: 6px;
+          border-radius: 4px;
+          transition: all 0.2s ease;
+          
+          &:hover {
+            background: var(--nav-item-hover);
+            color: var(--text-primary);
+          }
+          
+          &.play-action:hover {
+            color: #6366f1;
+          }
+        }
+      }
+    }
+  }
+}
+</style>