From 0affe046832659d5b06a87bb6b357c94916cea0a Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Sun, 4 May 2025 01:09:09 +0800
Subject: [PATCH] =?UTF-8?q?musiclist=E7=9A=84=E7=BB=98=E5=88=B6ui=E4=B8=8E?=
 =?UTF-8?q?=E5=85=B6=E5=8A=9F=E8=83=BD=E4=B8=BA=E5=BC=BA=E8=80=A6=E5=90=88?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E6=97=A0=E6=B3=95=E5=A4=8D=E7=94=A8=EF=BC=8C?=
 =?UTF-8?q?=E5=8F=AA=E8=83=BD=E6=88=91=E8=87=AA=E5=B7=B1=E5=86=99=E7=82=B9?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=E5=87=91=E5=90=88=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/PlayListWindow/index.vue           | 142 +++++++++++++-----
 src/renderer/store/player/state.ts            |   2 +-
 2 files changed, 105 insertions(+), 39 deletions(-)

diff --git a/src/renderer/components/layout/PlayListWindow/index.vue b/src/renderer/components/layout/PlayListWindow/index.vue
index dc44ad46..dde41510 100644
--- a/src/renderer/components/layout/PlayListWindow/index.vue
+++ b/src/renderer/components/layout/PlayListWindow/index.vue
@@ -1,48 +1,81 @@
 <template>
   <div class="playlist-window">
-      <button class="close-button" @click="emitClose">✖</button>
-      <h2 class="title">播放列表</h2>
-      <div class="song-list">
-        <div v-for="(song, index) in songs" :key="index" class="song-item">
-          <div class="song-index">{{ index + 1 }}</div>
-          <div class="song-info">
-            <div class="song-title">{{ song.title }}</div>
-            <div class="song-meta">{{ song.artist }} · {{ song.album }}</div>
-          </div>
+    <button class="close-button" @click="emitClose">✖</button>
+    <h2 class="title">播放列表</h2>
+    <div class="song-list">
+      <div
+        v-for="(song, index) in songs"
+        :key="index"
+        class="song-item"
+        :class="[
+          { active: currentPlayIndexValue === index },
+          { selected: selectedIndex === index || rightClickSelectedIndex === index }
+        ]"
+        @click="handleListItemClick(index)"
+        @contextmenu.prevent="handleListItemRightClick(index, $event)"
+      >
+        <div class="song-index">{{ index + 1 }}</div>
+        <div class="song-info">
+          <div class="song-title">{{ song.title }}</div>
+          <div class="song-meta">{{ song.artist }} · {{ song.album }}</div>
         </div>
       </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { tempPlayList, currentPlaybackOrder } from '@renderer/store/player/state'
+import { ref, computed, toRef } from 'vue'
+import { tempPlayList, currentPlaybackOrder, currentPlayIndex } from '@renderer/store/player/state'
+
+// 为了模板里更方便使用 .value，这里取一个普通变量
+const currentPlayIndexValue = toRef(currentPlayIndex, 'value')
 
 const emit = defineEmits(['close'])
-// todo 点击item切换歌曲
-// todo 当前播放歌曲的item高亮
+
+// 把 ref 数组转成本地 reactive 引用
 const playlist = ref(tempPlayList)
 
+// 计算渲染顺序后的歌曲信息列表
 const songs = computed(() => {
-  let showlist = []
-  for (const index of currentPlaybackOrder.value) {
-    const playMusicInfo = playlist.value[index]
-    showlist.push({
-      title: playMusicInfo.musicInfo.name,
-      artist: playMusicInfo.musicInfo.singer,
-      album: playMusicInfo.musicInfo.meta.albumName,
-    })
+  const showlist = []
+  for (const idx of currentPlaybackOrder.value) {
+    const info = playlist.value[idx]
+    if (info && info.musicInfo) {
+      showlist.push({
+        title: info.musicInfo.name,
+        artist: info.musicInfo.singer,
+        album: info.musicInfo.meta.albumName,
+      })
+    }
   }
   return showlist
-},
-)
-const emitClose = () => {
+})
+
+// 本地控制的“选中”索引
+const selectedIndex = ref(null)
+const rightClickSelectedIndex = ref(null)
+
+// 点击选中
+function handleListItemClick(index) {
+  selectedIndex.value = index
+  // 也可以在这里改变 currentPlayIndex
+  currentPlayIndex.value = index
+}
+
+// 右键选中
+function handleListItemRightClick(index, event) {
+  rightClickSelectedIndex.value = index
+  // 这里你可以记录 event.clientX/Y 来显示菜单
+}
+
+// 关闭按钮
+function emitClose() {
   emit('close')
 }
 </script>
 
 <style scoped>
-
 .playlist-window {
   background-color: #222;
   color: white;
@@ -51,18 +84,11 @@ const emitClose = () => {
   width: 320px;
   max-height: 80%;
   overflow-y: auto;
-  position: relative;
   display: flex;
   flex-direction: column;
 }
 
-.title {
-  margin-bottom: 15px;
-  font-size: 18px;
-  font-weight: bold;
-  text-align: center;
-}p
-
+/* 关闭按钮 */
 .close-button {
   position: absolute;
   top: 10px;
@@ -74,48 +100,88 @@ const emitClose = () => {
   cursor: pointer;
 }
 
+/* 标题 */
+.title {
+  margin-bottom: 15px;
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+  color: white;
+}
+
+/* 歌曲列表容器 */
 .song-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
 }
 
+/* 交替背景：奇数白色，偶数浅灰 */
+.song-item:nth-child(2n-1) {
+  background-color: #ffffff;
+}
+.song-item:nth-child(2n) {
+  background-color: #f5f5f5; /* 很浅的灰 */
+}
+
+/* 通用样式 */
 .song-item {
   display: flex;
   align-items: center;
   padding: 10px;
   border-radius: 6px;
-  background-color: #2c2c2c;
   transition: background-color 0.2s;
+  cursor: pointer;
+  color: black; /* 字体统一黑色 */
 }
 
+/* hover 状态稍微加深一下 */
 .song-item:hover {
-  background-color: #3a3a3a;
+  background-color: #eaeaea;
 }
 
+/* 当前播放项高亮（深灰） */
+.active {
+  background-color: #555555 !important;
+  color: black !important;
+}
+
+/* 选中（左键或右键）状态，更深的灰 */
+.selected {
+  background-color: #333333 !important;
+  color: black !important;
+}
+
+/* 序号 */
 .song-index {
   width: 24px;
   text-align: right;
   margin-right: 10px;
-  color: #aaa;
+  color: #666666;
   font-size: 14px;
+  flex-shrink: 0;
 }
 
+/* 歌曲信息 */
 .song-info {
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 
+/* 标题 */
 .song-title {
   font-size: 16px;
+  font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: black;
 }
 
+/* 元信息（歌手 · 专辑） */
 .song-meta {
   font-size: 12px;
-  color: #888;
+  color: #444444;
+  margin-top: 2px;
 }
 </style>
diff --git a/src/renderer/store/player/state.ts b/src/renderer/store/player/state.ts
index be3fe447..88acdb89 100644
--- a/src/renderer/store/player/state.ts
+++ b/src/renderer/store/player/state.ts
@@ -69,7 +69,7 @@ export const playInfo = shallowReactive<LX.Player.PlayInfo>({
 
 export const playedList = window.lxData.playedList = shallowReactive<LX.Player.PlayMusicInfo[]>([])
 
-export const tempPlayList = shallowReactive<LX.Player.PlayMusicInfo[]>([])//todo
+export const tempPlayList = shallowReactive<LX.Player.PlayMusicInfo[]>([])
 
 export const currentPlayIndex = ref<number>(0)