QZMusic-Web/qzmusic-web/src/views/Playlist.vue

<template>
  <div class="view-container playlist-view">
    <div class="content-wrapper">
      <div class="playlist-header">
        <div class="header-bg" :class="themeClass">
          <div class="flow-circle c1"></div>
          <div class="flow-circle c2"></div>
        </div>
        
        <div class="header-content">
          <div class="cover-box" :style="{ background: coverGradient }">
             <div class="icon-wrapper">
               <Icon :icon="iconName" class="big-icon" />
             </div>
          </div>
          
          <div class="info-box">
            <div class="sub-title">PLAYLIST</div>
            <h1 class="title">{{ title }}</h1>
            <div class="meta-info">
              <div class="avatar-row">
                 <div class="user-avatar">
                   <Icon icon="lucide:user" />
                 </div>
                 <span class="user-name">User</span>
              </div>
              <span class="divider">•</span>
              <span class="count">{{ songCount }} 首歌曲</span>
            </div>
            
            <div class="action-row">
              <button class="play-all-btn" :class="themeClass" @click="handlePlayAll">
                <Icon icon="lucide:play" class="btn-icon" />
                播放全部
              </button>
              <button class="action-btn">
                <Icon icon="lucide:download" />
              </button>
              <button class="action-btn">
                <Icon icon="lucide:share-2" />
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="song-list-container">
        <div class="list-header">
           <div class="col-index">#</div>
           <div class="col-title">标题</div>
           <div class="col-album">专辑</div>
           <div class="col-time">时长</div>
        </div>
        
        <div class="song-list">
          <div class="song-item" v-for="(song, i) in songs" :key="song.id" @dblclick="handlePlaySong(i)">
            <div class="song-index">{{ i + 1 }}</div>
            <div class="song-cover">
              <div class="cover-gradient" :class="themeClass"></div>
            </div>
            <div class="song-info">
              <h4 class="song-title">{{ song.name }}</h4>
              <p class="song-artist">{{ song.artist }}</p>
            </div>
            <div class="song-album">{{ song.albumName }}</div>
            <div class="song-duration">{{ song.duration }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { Icon } from '@iconify/vue';
import { usePlayerStore } from '../stores/player';
import type { Song } from '../types/song';

const route = useRoute();
const playerStore = usePlayerStore();

const isLiked = computed(() => route.path.includes('liked'));
const isRecent = computed(() => route.path.includes('recent'));

const title = computed(() => {
  if (isLiked.value) return '我喜欢的音乐';
  if (isRecent.value) return '最近播放';
  return '歌单';
});

const iconName = computed(() => {
  if (isLiked.value) return 'lucide:heart';
  if (isRecent.value) return 'lucide:clock';
  return 'lucide:music';
});

const themeClass = computed(() => {
  if (isLiked.value) return 'theme-liked';
  if (isRecent.value) return 'theme-recent';
  return 'theme-default';
});

const coverGradient = computed(() => {
  if (isLiked.value) return 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%)';
  if (isRecent.value) return 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)';
  return 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
});

const songs = ref<Song[]>(Array.from({ length: 15 }, (_, i) => ({
    id: String(i + 1),
    name: `Song Title ${i + 1}`,
    artist: `Artist Name ${i + 1}`,
    albumName: `Album Mock`,
    duration: '03:30',
    url: 'http://commondatastorage.googleapis.com/codeskulptor-demos/riceracer_assets/music/win.ogg',
    picUrl: '',
    source: 'local',
    type: 'Local' 
})));

const songCount = computed(() => songs.value.length);

const handlePlayAll = () => {
    playerStore.setPlaylist(songs.value);
};

const handlePlaySong = (index: number) => {
    playerStore.playFromList(songs.value[index], songs.value);
};
</script>

<style scoped>
.playlist-view {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.content-wrapper {
  box-sizing: border-box;
  padding: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.playlist-header {
  position: relative;
  height: 240px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
  box-shadow: var(--shadow-lg);
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  z-index: 1;
}

.header-bg {
  background-image: linear-gradient(-45deg, #1e1e1e, #2a2a2a, #3a1c1c, #1a1a1a);
}

.header-bg.theme-liked {
  background-image: linear-gradient(-45deg, #2a1a1a, #4a2c2c, #3a1c1c, #1a1a1a);
}

.header-bg.theme-recent {
  background-image: linear-gradient(-45deg, #1a1a2a, #2c2c4a, #1c1c3a, #1a1a1a);
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.flow-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  animation: float 10s infinite ease-in-out;
}

.c1 {
  width: 300px;
  height: 300px;
  background: #ec4141;
  top: -50px;
  left: -50px;
  animation-delay: 0s;
}

.c2 {
  width: 400px;
  height: 400px;
  background: #4facfe;
  bottom: -100px;
  right: -50px;
  animation-delay: -5s;
}

.theme-recent .c1 { background: #a18cd1; }
.theme-recent .c2 { background: #fbc2eb; }

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(20px) scale(1.1); }
}

.header-content {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 32px;
  align-items: center;
  width: 100%;
}

.cover-box {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.icon-wrapper {
  background: rgba(255,255,255,0.2);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.big-icon {
  color: #fff;
  width: 40px;
  height: 40px;
  fill: currentColor;
}

.info-box {
  flex: 1;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sub-title {
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0.8;
  margin-bottom: 8px;
}

.title {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}

.avatar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 24px;
  height: 24px;
  background: #555;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divider {
  opacity: 0.4;
}

.action-row {
  display: flex;
  gap: 12px;
}

.play-all-btn {
  background: #ec4141;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.play-all-btn.theme-recent {
  background: #a18cd1;
}

.play-all-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.action-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: white;
}

.list-header {
  display: flex;
  padding: 0 16px;
  margin-bottom: 8px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.col-index { width: 40px; text-align: center; }
.col-title { flex: 1; }
.col-album { width: 200px; }
.col-time { width: 60px; text-align: right; }

.song-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  transition: background-color 0.2s;
  cursor: pointer;
  color: var(--color-text-secondary);
}

.song-item:hover {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.song-item:hover .song-index {
  color: var(--color-text-primary);
}

.song-index {
  width: 40px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
}

.song-cover {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-right: 16px;
  background: #333;
  overflow: hidden;
}

.cover-gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #667eea, #764ba2);
}

.cover-gradient.theme-liked {
   background: linear-gradient(45deg, #ff9a9e, #fecfef);
}

.cover-gradient.theme-recent {
   background: linear-gradient(45deg, #a18cd1, #fbc2eb);
}

.song-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.song-title {
  font-size: 15px;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.song-artist {
  font-size: 12px;
  color: var(--color-text-muted);
}

.song-album {
  width: 200px;
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-duration {
  width: 60px;
  text-align: right;
  font-size: 13px;
  color: var(--color-text-muted);
}
</style>