From a22a9ffc855b3ede3e33db71b2a61a5eb241a956 Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Thu, 1 May 2025 22:04:29 +0800
Subject: [PATCH 01/15] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=8C=89=E9=92=AE=E5=8F=8A=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/App.vue                          | 73 +++++++++----------
 .../components/common/PlayListButton.vue      | 24 ++++++
 .../components/common/PlayListWindow.vue      | 62 ++++++++++++++++
 .../components/layout/PlayBar/ControlBtns.vue |  1 +
 src/renderer/store/player/action.ts           |  5 ++
 src/renderer/store/player/state.ts            |  2 +
 6 files changed, 129 insertions(+), 38 deletions(-)
 create mode 100644 src/renderer/components/common/PlayListButton.vue
 create mode 100644 src/renderer/components/common/PlayListWindow.vue

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index c9151f4c..c5712ee7 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -3,9 +3,13 @@
     <layout-aside id="left" />
     <div id="right">
       <layout-toolbar id="toolbar" />
-      <layout-view id="view" />
+      <div class="middle">
+        <layout-view id="view" />
+        <PlayListWindow v-if="isShowPlaylist" class="playlist-window" @close="closePlaylist()" />
+      </div>
       <layout-play-bar id="player" />
     </div>
+
     <layout-icons />
     <layout-change-log-modal />
     <layout-update-modal />
@@ -18,29 +22,22 @@
 
 <script setup>
 import { onMounted } from '@common/utils/vueTools'
-// import BubbleCursor from '@common/utils/effects/cursor-effects/bubbleCursor'
-// import '@common/utils/effects/snow.min'
 import useApp from '@renderer/core/useApp'
+import PlayListWindow from '@renderer/components/common/PlayListWindow.vue'
+import { isShowPlaylist } from '@renderer/store/player/state'
+import { setShowPlaylist } from '@renderer/store/player/action'
+
+const closePlaylist = () => {
+  setShowPlaylist(false)
+}
 
 useApp()
 
 onMounted(() => {
   document.getElementById('root').style.display = 'block'
-
-  // const styles = getComputedStyle(document.documentElement)
-  // window.lxData.bubbleCursor = new BubbleCursor({
-  //   fillStyle: styles.getPropertyValue('--color-primary-alpha-900'),
-  //   strokeStyle: styles.getPropertyValue('--color-primary-alpha-700'),
-  // })
 })
-
-// onBeforeUnmount(() => {
-//   window.lxData.bubbleCursor?.destroy()
-// })
-
 </script>
 
-
 <style lang="less">
 @import './assets/styles/index.less';
 @import './assets/styles/layout.less';
@@ -49,10 +46,8 @@ html {
   height: 100vh;
 }
 html, body {
-  // overflow: hidden;
   box-sizing: border-box;
 }
-
 body {
   user-select: none;
   height: 100%;
@@ -77,13 +72,6 @@ body {
 .transparent {
   background: transparent;
   padding: @shadow-app;
-  // #waiting-mask {
-  //   border-radius: @radius-border;
-  //   left: @shadow-app;
-  //   right: @shadow-app;
-  //   top: @shadow-app;
-  //   bottom: @shadow-app;
-  // }
   #body {
     border-radius: @radius-border;
   }
@@ -91,10 +79,6 @@ body {
     box-shadow: 0 0 @shadow-app rgba(0, 0, 0, 0.5);
     border-radius: @radius-border;
   }
-  // #container {
-    // border-radius: @radius-border;
-    // background-color: transparent;
-  // }
 }
 .disableTransparent {
   background-color: var(--color-content-background);
@@ -107,10 +91,6 @@ body {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
-
-  // #view { // 偏移5px距离解决非透明模式下右侧滚动条无法拖动的问题
-  //   margin-right: 5Px;
-  // }
 }
 .fullscreen {
   background-color: var(--color-content-background);
@@ -132,28 +112,47 @@ body {
   flex: none;
   width: @width-app-left;
 }
+
 #right {
   flex: auto;
   display: flex;
-  flex-flow: column nowrap;
+  flex-direction: column;
   transition: background-color @transition-normal;
   background-color: var(--color-main-background);
-
   border-top-left-radius: @radius-border;
   border-bottom-left-radius: @radius-border;
   overflow: hidden;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
 }
-#toolbar, #player {
+
+#toolbar,
+#player {
   flex: none;
 }
+
+/* 中间区域横向布局 */
+.middle {
+  flex: auto;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* 主内容区域自动伸缩 */
 #view {
   position: relative;
   flex: auto;
-  // display: flex;
   min-height: 0;
 }
 
+/* 播放列表窗口，默认宽度固定 */
+.playlist-window {
+  width: 300px;
+  flex: none;
+  border-left: 1px solid var(--color-border);
+  background-color: var(--color-main-background);
+}
+
 .view-container {
   transition: opacity @transition-normal;
 }
@@ -163,6 +162,4 @@ body {
 #view.show-modal > .view-container {
   opacity: .2;
 }
-
 </style>
-
diff --git a/src/renderer/components/common/PlayListButton.vue b/src/renderer/components/common/PlayListButton.vue
new file mode 100644
index 00000000..223b576e
--- /dev/null
+++ b/src/renderer/components/common/PlayListButton.vue
@@ -0,0 +1,24 @@
+<template>
+<button class="playlist-button" @click="togglePlaylist">
+  🎵 播放列表
+</button>
+</template>
+<script setup>
+import { setShowPlaylist } from '@renderer/store/player/action'
+const togglePlaylist = () => {
+  setShowPlaylist(true)
+}
+</script>
+<style scoped>
+.playlist-button {
+  padding: 10px 20px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+}
+.playlist-button:hover {
+  background-color: #45a049;
+}
+</style>
diff --git a/src/renderer/components/common/PlayListWindow.vue b/src/renderer/components/common/PlayListWindow.vue
new file mode 100644
index 00000000..da60e583
--- /dev/null
+++ b/src/renderer/components/common/PlayListWindow.vue
@@ -0,0 +1,62 @@
+<template>
+<div class="playlist-overlay">
+  <div class="playlist-window">
+    <button class="close-button" @click="emitClose">✖</button>
+    <h2>播放列表</h2>
+    <ul>
+      <li v-for="(song, index) in songs" :key="index">
+        {{ index + 1 }}. {{ song }}
+      </li>
+    </ul>
+  </div>
+</div>
+</template>
+<script setup>
+import { ref } from 'vue'
+const emit = defineEmits(['close'])
+
+const songs = ref([
+  '海阔天空 - Beyond',
+  '夜曲 - 周杰伦',
+  '告白气球 - 周杰伦',
+  '平凡之路 - 朴树',
+])
+
+const emitClose = () => {
+  emit('close')
+}
+</script>
+<style scoped>
+.playlist-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+.playlist-window {
+  background-color: #222;
+  color: white;
+  padding: 20px;
+  border-radius: 10px;
+  width: 300px;
+  max-height: 80%;
+  overflow-y: auto;
+  position: relative;
+}
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: transparent;
+  color: white;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/renderer/components/layout/PlayBar/ControlBtns.vue b/src/renderer/components/layout/PlayBar/ControlBtns.vue
index 4601342f..e15dbafe 100644
--- a/src/renderer/components/layout/PlayBar/ControlBtns.vue
+++ b/src/renderer/components/layout/PlayBar/ControlBtns.vue
@@ -17,6 +17,7 @@
     <common-volume-btn />
     <common-toggle-play-mode-btn />
     <common-list-add-modal v-model:show="isShowAddMusicTo" :music-info="playMusicInfo.musicInfo" />
+    <common-play-list-button />
   </div>
 </template>
 
diff --git a/src/renderer/store/player/action.ts b/src/renderer/store/player/action.ts
index 87977fc1..35ed3b94 100644
--- a/src/renderer/store/player/action.ts
+++ b/src/renderer/store/player/action.ts
@@ -12,6 +12,7 @@ import {
   playMusicInfo,
   playedList,
   tempPlayList,
+  isShowPlaylist,
 } from './state'
 import { getListMusicsFromCache } from '@renderer/store/list/action'
 import { downloadList } from '@renderer/store/download/state'
@@ -61,6 +62,10 @@ export const setShowPlayerDetail = (val: boolean) => {
   isShowPlayerDetail.value = val
 }
 
+export const setShowPlaylist = (val: boolean) => {
+  isShowPlaylist.value = val
+}
+
 export const setShowPlayComment = (val: boolean) => {
   isShowPlayComment.value = val
 }
diff --git a/src/renderer/store/player/state.ts b/src/renderer/store/player/state.ts
index 48aea238..f7267fe9 100644
--- a/src/renderer/store/player/state.ts
+++ b/src/renderer/store/player/state.ts
@@ -36,6 +36,8 @@ export const statusText = ref('')
 
 export const isShowPlayerDetail = ref(false)
 
+export const isShowPlaylist = ref(false)
+
 export const isShowPlayComment = ref(false)
 
 export const isShowLrcSelectContent = ref(false)

From 44fe92df94c47f1a965b74b29482a5581158f6aa Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Fri, 2 May 2025 01:48:07 +0800
Subject: [PATCH 02/15] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E4=BA=86=E6=8C=89=E9=92=AE=E5=92=8C=E6=92=AD=E6=94=BE=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=9A=84ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/App.vue                          | 110 ++++++------------
 .../components/common/PlayListButton.vue      |   3 +-
 .../components/common/PlayListWindow.vue      |  89 +++++++++++---
 3 files changed, 114 insertions(+), 88 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index c5712ee7..6825334a 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -4,8 +4,12 @@
     <div id="right">
       <layout-toolbar id="toolbar" />
       <div class="middle">
-        <layout-view id="view" />
-        <PlayListWindow v-if="isShowPlaylist" class="playlist-window" @close="closePlaylist()" />
+        <layout-view id="view" ref="viewRef" />
+        <PlayListWindow
+          v-if="isShowPlaylist"
+          :style="playlistStyle"
+          @close="closePlaylist"
+        />
       </div>
       <layout-play-bar id="player" />
     </div>
@@ -21,20 +25,37 @@
 </template>
 
 <script setup>
-import { onMounted } from '@common/utils/vueTools'
+import { nextTick, onMounted, ref, computed } from '@common/utils/vueTools'
 import useApp from '@renderer/core/useApp'
 import PlayListWindow from '@renderer/components/common/PlayListWindow.vue'
 import { isShowPlaylist } from '@renderer/store/player/state'
 import { setShowPlaylist } from '@renderer/store/player/action'
 
+const viewRef = ref(null)
+
+const playlistStyle = computed(() => {
+  const el = viewRef.value?.$el || viewRef.value
+  if (!el) return {}
+  const rect = el.getBoundingClientRect()
+  return {
+    position: 'absolute',
+    left: `${rect.left}px`,
+    top: `${rect.top}px`,
+    height: `${rect.height}px`,
+    width: `${rect.width}px`,
+    zIndex: 1000,
+  }
+})
+
 const closePlaylist = () => {
   setShowPlaylist(false)
 }
 
 useApp()
 
-onMounted(() => {
+onMounted(async () => {
   document.getElementById('root').style.display = 'block'
+  await nextTick()
 })
 </script>
 
@@ -42,15 +63,10 @@ onMounted(() => {
 @import './assets/styles/index.less';
 @import './assets/styles/layout.less';
 
-html {
-  height: 100vh;
-}
 html, body {
-  box-sizing: border-box;
-}
-body {
-  user-select: none;
   height: 100%;
+  box-sizing: border-box;
+  user-select: none;
 }
 #root {
   height: 100%;
@@ -61,44 +77,6 @@ body {
   background-size: var(--background-image-size);
   transition: background-color @transition-normal;
   background-color: var(--color-content-background);
-  box-sizing: border-box;
-}
-
-.disableAnimation * {
-  transition: none !important;
-  animation: none !important;
-}
-
-.transparent {
-  background: transparent;
-  padding: @shadow-app;
-  #body {
-    border-radius: @radius-border;
-  }
-  #root {
-    box-shadow: 0 0 @shadow-app rgba(0, 0, 0, 0.5);
-    border-radius: @radius-border;
-  }
-}
-.disableTransparent {
-  background-color: var(--color-content-background);
-
-  #body {
-    border: 1Px solid var(--color-primary-light-500);
-  }
-
-  #right {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-}
-.fullscreen {
-  background-color: var(--color-content-background);
-
-  #right {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
 }
 
 #container {
@@ -117,49 +95,35 @@ body {
   flex: auto;
   display: flex;
   flex-direction: column;
-  transition: background-color @transition-normal;
   background-color: var(--color-main-background);
   border-top-left-radius: @radius-border;
   border-bottom-left-radius: @radius-border;
-  overflow: hidden;
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
 }
 
-#toolbar,
-#player {
-  flex: none;
-}
-
-/* 中间区域横向布局 */
 .middle {
   flex: auto;
   display: flex;
-  overflow: hidden;
+  position: relative;
   min-height: 0;
 }
 
-/* 主内容区域自动伸缩 */
 #view {
   position: relative;
   flex: auto;
   min-height: 0;
 }
 
-/* 播放列表窗口，默认宽度固定 */
 .playlist-window {
-  width: 300px;
-  flex: none;
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   border-left: 1px solid var(--color-border);
   background-color: var(--color-main-background);
-}
-
-.view-container {
-  transition: opacity @transition-normal;
-}
-#root.show-modal > .view-container {
-  opacity: .9;
-}
-#view.show-modal > .view-container {
-  opacity: .2;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  border-radius: @radius-border;
+  overflow: hidden;
+  z-index: 1000;
 }
 </style>
diff --git a/src/renderer/components/common/PlayListButton.vue b/src/renderer/components/common/PlayListButton.vue
index 223b576e..8e5e47e8 100644
--- a/src/renderer/components/common/PlayListButton.vue
+++ b/src/renderer/components/common/PlayListButton.vue
@@ -4,9 +4,10 @@
 </button>
 </template>
 <script setup>
+import { isShowPlaylist } from '@renderer/store/player/state'
 import { setShowPlaylist } from '@renderer/store/player/action'
 const togglePlaylist = () => {
-  setShowPlaylist(true)
+  setShowPlaylist(!isShowPlaylist.value)
 }
 </script>
 <style scoped>
diff --git a/src/renderer/components/common/PlayListWindow.vue b/src/renderer/components/common/PlayListWindow.vue
index da60e583..33213b2f 100644
--- a/src/renderer/components/common/PlayListWindow.vue
+++ b/src/renderer/components/common/PlayListWindow.vue
@@ -1,31 +1,36 @@
 <template>
-<div class="playlist-overlay">
   <div class="playlist-window">
-    <button class="close-button" @click="emitClose">✖</button>
-    <h2>播放列表</h2>
-    <ul>
-      <li v-for="(song, index) in songs" :key="index">
-        {{ index + 1 }}. {{ song }}
-      </li>
-    </ul>
+      <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>
+        </div>
+      </div>
   </div>
-</div>
 </template>
+
 <script setup>
 import { ref } from 'vue'
+
 const emit = defineEmits(['close'])
 
 const songs = ref([
-  '海阔天空 - Beyond',
-  '夜曲 - 周杰伦',
-  '告白气球 - 周杰伦',
-  '平凡之路 - 朴树',
+  { title: '海阔天空', artist: 'Beyond', album: '乐与怒' },
+  { title: '夜曲', artist: '周杰伦', album: '十一月的萧邦' },
+  { title: '告白气球', artist: '周杰伦', album: '周杰伦的床边故事' },
+  { title: '平凡之路', artist: '朴树', album: '平凡之路' },
 ])
 
 const emitClose = () => {
   emit('close')
 }
 </script>
+
 <style scoped>
 .playlist-overlay {
   position: fixed;
@@ -39,16 +44,27 @@ const emitClose = () => {
   align-items: center;
   z-index: 999;
 }
+
 .playlist-window {
   background-color: #222;
   color: white;
   padding: 20px;
   border-radius: 10px;
-  width: 300px;
+  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;
+}
+
 .close-button {
   position: absolute;
   top: 10px;
@@ -59,4 +75,49 @@ const emitClose = () => {
   font-size: 18px;
   cursor: pointer;
 }
+
+.song-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.song-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border-radius: 6px;
+  background-color: #2c2c2c;
+  transition: background-color 0.2s;
+}
+
+.song-item:hover {
+  background-color: #3a3a3a;
+}
+
+.song-index {
+  width: 24px;
+  text-align: right;
+  margin-right: 10px;
+  color: #aaa;
+  font-size: 14px;
+}
+
+.song-info {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.song-title {
+  font-size: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.song-meta {
+  font-size: 12px;
+  color: #888;
+}
 </style>

From d300064c5627a4c3831d3eecd6787f6abe5d3b1f Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Fri, 2 May 2025 02:12:14 +0800
Subject: [PATCH 03/15] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E7=9A=84css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/App.vue                          | 46 +++++--------------
 .../components/common/PlayListWindow.vue      | 12 -----
 2 files changed, 12 insertions(+), 46 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 6825334a..b6cf01c6 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -5,15 +5,10 @@
       <layout-toolbar id="toolbar" />
       <div class="middle">
         <layout-view id="view" ref="viewRef" />
-        <PlayListWindow
-          v-if="isShowPlaylist"
-          :style="playlistStyle"
-          @close="closePlaylist"
-        />
+        <PlayListWindow id="playlist" v-if="isShowPlaylist" @close="closePlaylist" />
       </div>
       <layout-play-bar id="player" />
     </div>
-
     <layout-icons />
     <layout-change-log-modal />
     <layout-update-modal />
@@ -31,31 +26,15 @@ import PlayListWindow from '@renderer/components/common/PlayListWindow.vue'
 import { isShowPlaylist } from '@renderer/store/player/state'
 import { setShowPlaylist } from '@renderer/store/player/action'
 
-const viewRef = ref(null)
-
-const playlistStyle = computed(() => {
-  const el = viewRef.value?.$el || viewRef.value
-  if (!el) return {}
-  const rect = el.getBoundingClientRect()
-  return {
-    position: 'absolute',
-    left: `${rect.left}px`,
-    top: `${rect.top}px`,
-    height: `${rect.height}px`,
-    width: `${rect.width}px`,
-    zIndex: 1000,
-  }
-})
-
 const closePlaylist = () => {
   setShowPlaylist(false)
 }
 
 useApp()
 
-onMounted(async () => {
+onMounted(() => {
   document.getElementById('root').style.display = 'block'
-  await nextTick()
+  nextTick()
 })
 </script>
 
@@ -63,11 +42,13 @@ onMounted(async () => {
 @import './assets/styles/index.less';
 @import './assets/styles/layout.less';
 
+
 html, body {
   height: 100%;
   box-sizing: border-box;
   user-select: none;
 }
+
 #root {
   height: 100%;
   position: relative;
@@ -112,18 +93,15 @@ html, body {
   flex: auto;
   min-height: 0;
 }
-
-.playlist-window {
-  position: relative;
+#playlist {
+  position: absolute;
   top: 0;
-  left: 0;
-  width: 100%;
+  right: 0;
+  width: 320px;
   height: 100%;
-  border-left: 1px solid var(--color-border);
-  background-color: var(--color-main-background);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-  border-radius: @radius-border;
-  overflow: hidden;
   z-index: 1000;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0,0,0,0.3);
 }
+
 </style>
diff --git a/src/renderer/components/common/PlayListWindow.vue b/src/renderer/components/common/PlayListWindow.vue
index 33213b2f..66e22593 100644
--- a/src/renderer/components/common/PlayListWindow.vue
+++ b/src/renderer/components/common/PlayListWindow.vue
@@ -32,18 +32,6 @@ const emitClose = () => {
 </script>
 
 <style scoped>
-.playlist-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 999;
-}
 
 .playlist-window {
   background-color: #222;

From 5422cc4024a88bf49aeca007e80c0e634fde8448 Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Fri, 2 May 2025 02:24:20 +0800
Subject: [PATCH 04/15] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E8=A2=ABai?=
 =?UTF-8?q?=E7=AF=A1=E6=94=B9=E7=9A=84=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/App.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index b6cf01c6..c6835116 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -4,8 +4,8 @@
     <div id="right">
       <layout-toolbar id="toolbar" />
       <div class="middle">
-        <layout-view id="view" ref="viewRef" />
-        <PlayListWindow id="playlist" v-if="isShowPlaylist" @close="closePlaylist" />
+        <layout-view id="view" />
+        <PlayListWindow v-if="isShowPlaylist" id="playlist" @close="closePlaylist" />
       </div>
       <layout-play-bar id="player" />
     </div>
@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import { nextTick, onMounted, ref, computed } from '@common/utils/vueTools'
+import { onMounted } from '@common/utils/vueTools'
 import useApp from '@renderer/core/useApp'
 import PlayListWindow from '@renderer/components/common/PlayListWindow.vue'
 import { isShowPlaylist } from '@renderer/store/player/state'
@@ -34,7 +34,6 @@ useApp()
 
 onMounted(() => {
   document.getElementById('root').style.display = 'block'
-  nextTick()
 })
 </script>
 
@@ -58,6 +57,7 @@ html, body {
   background-size: var(--background-image-size);
   transition: background-color @transition-normal;
   background-color: var(--color-content-background);
+  box-sizing: border-box;
 }
 
 #container {
@@ -87,12 +87,19 @@ html, body {
   position: relative;
   min-height: 0;
 }
-
+#toolbar, #player {
+  flex: none;
+}
 #view {
   position: relative;
   flex: auto;
+  // display: flex;
   min-height: 0;
 }
+
+.view-container {
+  transition: opacity @transition-normal;
+}
 #playlist {
   position: absolute;
   top: 0;

From 366f248b7575f21d72a705552b8a9d03b83c8bae Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Fri, 2 May 2025 13:54:49 +0800
Subject: [PATCH 05/15] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/App.vue                          |  3 +-
 .../PlayListWindow/index.vue}                 | 37 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 3 deletions(-)
 rename src/renderer/components/{common/PlayListWindow.vue => layout/PlayListWindow/index.vue} (66%)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index c6835116..e51cc388 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -5,7 +5,7 @@
       <layout-toolbar id="toolbar" />
       <div class="middle">
         <layout-view id="view" />
-        <PlayListWindow v-if="isShowPlaylist" id="playlist" @close="closePlaylist" />
+        <layout-play-list-window v-if="isShowPlaylist" id="playlist" @close="closePlaylist" />
       </div>
       <layout-play-bar id="player" />
     </div>
@@ -22,7 +22,6 @@
 <script setup>
 import { onMounted } from '@common/utils/vueTools'
 import useApp from '@renderer/core/useApp'
-import PlayListWindow from '@renderer/components/common/PlayListWindow.vue'
 import { isShowPlaylist } from '@renderer/store/player/state'
 import { setShowPlaylist } from '@renderer/store/player/action'
 
diff --git a/src/renderer/components/common/PlayListWindow.vue b/src/renderer/components/layout/PlayListWindow/index.vue
similarity index 66%
rename from src/renderer/components/common/PlayListWindow.vue
rename to src/renderer/components/layout/PlayListWindow/index.vue
index 66e22593..87d0254c 100644
--- a/src/renderer/components/common/PlayListWindow.vue
+++ b/src/renderer/components/layout/PlayListWindow/index.vue
@@ -16,7 +16,16 @@
 
 <script setup>
 import { ref } from 'vue'
-
+import {
+  statusText,
+  musicInfo,
+  isShowPlayerDetail,
+  isPlay,
+  playInfo,
+  playMusicInfo,
+} from '@renderer/store/player/state'
+import { isPlay, playedList, playInfo, playMusicInfo, tempPlayList, musicInfo as _musicInfo } from '@renderer/store/player/state'
+import { togglePlay, playNext, playPrev } from '@renderer/core/player'
 const emit = defineEmits(['close'])
 
 const songs = ref([
@@ -25,6 +34,32 @@ const songs = ref([
   { title: '告白气球', artist: '周杰伦', album: '周杰伦的床边故事' },
   { title: '平凡之路', artist: '朴树', album: '平凡之路' },
 ])
+if (tempPlayList.length) { // 如果稍后播放列表存在歌曲则直接播放改列表的歌曲
+    for (let music of tempPlayList) {
+        songs.value.push(
+            { title: music.musicInfo.name, artist: music.musicInfo.singer, album: music.musicInfo.meta.albumName }
+        )
+    }
+    return
+  }
+
+  if (playMusicInfo.musicInfo == null) {
+    handleToggleStop()
+    console.log('musicInfo empty')
+    return
+  }
+
+  // console.log(playInfo.playerListId)
+  const currentListId = playInfo.playerListId
+  if (!currentListId) {
+    handleToggleStop()
+    console.log('currentListId empty')
+    return
+  }
+  const currentList = getList(currentListId)
+songs.value.push(
+    { title: musicInfo.name, artist: musicInfo.singer, album: musicInfo.album }
+)
 
 const emitClose = () => {
   emit('close')

From 8fd7fa208f747f72695df10a38138883bec0afa2 Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Fri, 2 May 2025 14:55:14 +0800
Subject: [PATCH 06/15] mark

---
 src/renderer/core/player/action.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/core/player/action.ts b/src/renderer/core/player/action.ts
index 88995d0a..f205fbf7 100644
--- a/src/renderer/core/player/action.ts
+++ b/src/renderer/core/player/action.ts
@@ -339,7 +339,7 @@ export const getNextPlayMusicInfo = async(): Promise<LX.Player.PlayMusicInfo | n
       nextIndex = playerIndex === filteredList.length - 1 ? 0 : playerIndex + 1
       break
     case 'random':
-      nextIndex = getRandom(0, filteredList.length)
+      nextIndex = getRandom(0, filteredList.length)//todo
       break
     case 'list':
       nextIndex = playerIndex === filteredList.length - 1 ? -1 : playerIndex + 1

From 51c08d3bf3a5eedddf3671d286bd4b21827cf855 Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Fri, 2 May 2025 21:30:39 +0800
Subject: [PATCH 07/15] mark

---
 .../layout/PlayListWindow/index.vue           | 87 ++++++++++---------
 src/renderer/core/player/action.ts            |  6 +-
 src/renderer/store/player/action.ts           |  2 +-
 src/renderer/store/player/state.ts            |  5 +-
 4 files changed, 55 insertions(+), 45 deletions(-)

diff --git a/src/renderer/components/layout/PlayListWindow/index.vue b/src/renderer/components/layout/PlayListWindow/index.vue
index 87d0254c..60adbdf0 100644
--- a/src/renderer/components/layout/PlayListWindow/index.vue
+++ b/src/renderer/components/layout/PlayListWindow/index.vue
@@ -15,52 +15,59 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import {
-  statusText,
-  musicInfo,
-  isShowPlayerDetail,
-  isPlay,
-  playInfo,
-  playMusicInfo,
+  // musicInfo,
+  // isPlay,
+  // playMusicInfo, playInfo,
+  tempPlayList,
 } from '@renderer/store/player/state'
-import { isPlay, playedList, playInfo, playMusicInfo, tempPlayList, musicInfo as _musicInfo } from '@renderer/store/player/state'
-import { togglePlay, playNext, playPrev } from '@renderer/core/player'
+// import { togglePlay, playNext, playPrev } from '@renderer/core/player'
 const emit = defineEmits(['close'])
 
-const songs = ref([
-  { title: '海阔天空', artist: 'Beyond', album: '乐与怒' },
-  { title: '夜曲', artist: '周杰伦', album: '十一月的萧邦' },
-  { title: '告白气球', artist: '周杰伦', album: '周杰伦的床边故事' },
-  { title: '平凡之路', artist: '朴树', album: '平凡之路' },
-])
-if (tempPlayList.length) { // 如果稍后播放列表存在歌曲则直接播放改列表的歌曲
-    for (let music of tempPlayList) {
-        songs.value.push(
-            { title: music.musicInfo.name, artist: music.musicInfo.singer, album: music.musicInfo.meta.albumName }
-        )
-    }
-    return
-  }
-
-  if (playMusicInfo.musicInfo == null) {
-    handleToggleStop()
-    console.log('musicInfo empty')
-    return
-  }
-
-  // console.log(playInfo.playerListId)
-  const currentListId = playInfo.playerListId
-  if (!currentListId) {
-    handleToggleStop()
-    console.log('currentListId empty')
-    return
-  }
-  const currentList = getList(currentListId)
-songs.value.push(
-    { title: musicInfo.name, artist: musicInfo.singer, album: musicInfo.album }
+const playlist = ref(tempPlayList)
+const songs = computed(() =>
+  playlist.value.map(music => ({
+    title: music.musicInfo.name,
+    artist: music.musicInfo.singer,
+    album: music.musicInfo.meta.albumName,
+  })),
 )
+// const showPlaylist = () => {
+//   if (tempPlayList.length) { // 如果稍后播放列表存在歌曲则直接播放改列表的歌曲
+//     for (let music of tempPlayList) {
+//       songs.value.push(
+//         {
+//           title: music.musicInfo.name,
+//           artist: music.musicInfo.singer,
+//           album: music.musicInfo.meta.albumName,
+//         },
+//       )
+//     }
+//     return
+//   }
 
+//   if (playMusicInfo.musicInfo == null) {
+//     handleToggleStop()
+//     console.log('musicInfo empty')
+//     return
+//   }
+
+//   // console.log(playInfo.playerListId)
+//   const currentListId = playInfo.playerListId
+//   if (!currentListId) {
+//     handleToggleStop()
+//     console.log('currentListId empty')
+//     return
+//   }
+//   // const currentList = getList(currentListId)
+//   // songs.value.push({
+//   //   title: music.musicInfo.name,
+//   //   artist: music.musicInfo.singer,
+//   //   album: music.musicInfo.meta.albumName,
+//   // })
+// }
+// showPlaylist()
 const emitClose = () => {
   emit('close')
 }
diff --git a/src/renderer/core/player/action.ts b/src/renderer/core/player/action.ts
index f205fbf7..d29d243c 100644
--- a/src/renderer/core/player/action.ts
+++ b/src/renderer/core/player/action.ts
@@ -243,7 +243,7 @@ export const playListById = (listId: string, id: string) => {
   // pause()
   const musicInfo = getList(listId).find(m => m.id == id)
   if (!musicInfo) return
-  setPlayMusicInfo(listId, musicInfo)
+  setPlayMusicInfo(listId, musicInfo)//todo 设置播放音乐
   if (appSetting['player.isAutoCleanPlayedList'] || prevListId != listId) clearPlayedList()
   clearTempPlayeList()
   handlePlay()
@@ -258,7 +258,7 @@ export const playList = (listId: string, index: number) => {
   const prevListId = playInfo.playerListId
   setPlayListId(listId)
   // pause()
-  setPlayMusicInfo(listId, getList(listId)[index])
+  setPlayMusicInfo(listId, getList(listId)[index])//todo 设置播放音乐
   if (appSetting['player.isAutoCleanPlayedList'] || prevListId != listId) clearPlayedList()
   clearTempPlayeList()
   handlePlay()
@@ -366,7 +366,7 @@ export const getNextPlayMusicInfo = async(): Promise<LX.Player.PlayMusicInfo | n
 
 const handlePlayNext = (playMusicInfo: LX.Player.PlayMusicInfo) => {
   // pause()
-  setPlayMusicInfo(playMusicInfo.listId, playMusicInfo.musicInfo, playMusicInfo.isTempPlay)
+  setPlayMusicInfo(playMusicInfo.listId, playMusicInfo.musicInfo, playMusicInfo.isTempPlay)//todo 设置播放音乐
   handlePlay()
 }
 /**
diff --git a/src/renderer/store/player/action.ts b/src/renderer/store/player/action.ts
index 35ed3b94..be4343df 100644
--- a/src/renderer/store/player/action.ts
+++ b/src/renderer/store/player/action.ts
@@ -228,7 +228,7 @@ export const clearPlayedList = () => {
 /**
  * 添加歌曲到稍后播放列表
  * @param list 歌曲列表
- */
+ *///todo
 export const addTempPlayList = (list: LX.Player.TempPlayListItem[]) => {
   const topList: Array<Omit<LX.Player.TempPlayListItem, 'top'>> = []
   const bottomList = list.filter(({ isTop, ...musicInfo }) => {
diff --git a/src/renderer/store/player/state.ts b/src/renderer/store/player/state.ts
index f7267fe9..e75bd7e4 100644
--- a/src/renderer/store/player/state.ts
+++ b/src/renderer/store/player/state.ts
@@ -69,7 +69,10 @@ export const playInfo = shallowReactive<LX.Player.PlayInfo>({
 
 export const playedList = window.lxData.playedList = shallowReactive<LX.Player.PlayMusicInfo[]>([])
 
-export const tempPlayList = shallowReactive<LX.Player.PlayMusicInfo[]>([])
+export const tempPlayList = shallowReactive<LX.Player.PlayMusicInfo[]>([])//todo
+
+export const PlayList = shallowReactive<LX.Player.PlayMusicInfo[]>([])
+
 
 window.lxData.playInfo = playInfo
 window.lxData.playMusicInfo = playMusicInfo

From 22dc28b9e95da5ec03fcbd71ea42b1ccd1b57e8d Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Fri, 2 May 2025 22:28:57 +0800
Subject: [PATCH 08/15] =?UTF-8?q?=E6=8E=A5=E7=AE=A1=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E8=A1=8C=E4=B8=BA=EF=BC=8C=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=B0templist?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/views/List/MusicList/usePlay.js | 28 +++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/renderer/views/List/MusicList/usePlay.js b/src/renderer/views/List/MusicList/usePlay.js
index a2340004..5cf9f768 100644
--- a/src/renderer/views/List/MusicList/usePlay.js
+++ b/src/renderer/views/List/MusicList/usePlay.js
@@ -1,15 +1,41 @@
 import { addTempPlayList } from '@renderer/store/player/action'
 import { playList } from '@renderer/core/player'
+// import { tempPlayList } from '@renderer/store/player/state'
+
+import useMusicAdd from '@renderer/views/List/MusicList/useMusicAdd'
+import { LIST_IDS } from '@common/constants'
+import { getList } from '@renderer/store/player/action'
+
+// setup 函数或组件初始化中
+
 
 export default ({ props, selectedList, list, removeAllSelect }) => {
   let clickTime = 0
   let clickIndex = -1
 
+  // 处理添加音乐到歌单的逻辑
+  const {
+    // handleShowMusicAddModal,
+    // handleShowMusicMoveModal,
+  } = useMusicAdd({ selectedList, list })
+
   const handlePlayMusic = (index) => {
-    playList(props.listId, index)
+    // todo 修改播放歌曲逻辑
+    // playList(props.listId, index)
+    // handlePlayMusicLater(index, true)
+    // todo 若为空，则添加整个歌单
+    // todo 歌单本身就有乱序排序功能
+     addTempPlayList([{ listId: props.listId, musicInfo: list.value[index] }])
+    // playList(LIST_IDS.TEMP, index)
+    // const testlist =getList(props.listId)
+     const testlist =getList(LIST_IDS.TEMP)
+    for (let i=0; i<testlist.length; i++){ 
+      console.log(testlist[i])
+    }
   }
 
   const handlePlayMusicLater = (index, single) => {
+    // todo 修改播放歌曲逻辑
     if (selectedList.value.length && !single) {
       addTempPlayList(selectedList.value.map(s => ({ listId: props.listId, musicInfo: s })))
       removeAllSelect()

From ea733cad0459e58ad5bc11c7a61d12a72b8c2fef Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Fri, 2 May 2025 23:43:27 +0800
Subject: [PATCH 09/15] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E4=BA=86=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E7=9A=84=E9=80=BB=E8=BE=91=E5=A4=84=E7=90=86=EF=BC=8C?=
 =?UTF-8?q?=E4=BD=86=E5=8F=AA=E6=8E=A5=E7=AE=A1=E4=BA=86=E2=80=9C=E6=88=91?=
 =?UTF-8?q?=E7=9A=84=E5=88=97=E8=A1=A8=E2=80=9D=E7=9A=84=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E8=A1=8C=E4=B8=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/PlayListWindow/index.vue           | 34 -------------------
 src/renderer/core/player/action.ts            |  9 ++---
 src/renderer/store/player/action.ts           |  3 +-
 src/renderer/store/player/state.ts            |  2 +-
 src/renderer/views/List/MusicList/usePlay.js  | 33 +++++++-----------
 5 files changed, 20 insertions(+), 61 deletions(-)

diff --git a/src/renderer/components/layout/PlayListWindow/index.vue b/src/renderer/components/layout/PlayListWindow/index.vue
index 60adbdf0..c5279694 100644
--- a/src/renderer/components/layout/PlayListWindow/index.vue
+++ b/src/renderer/components/layout/PlayListWindow/index.vue
@@ -33,41 +33,7 @@ const songs = computed(() =>
     album: music.musicInfo.meta.albumName,
   })),
 )
-// const showPlaylist = () => {
-//   if (tempPlayList.length) { // 如果稍后播放列表存在歌曲则直接播放改列表的歌曲
-//     for (let music of tempPlayList) {
-//       songs.value.push(
-//         {
-//           title: music.musicInfo.name,
-//           artist: music.musicInfo.singer,
-//           album: music.musicInfo.meta.albumName,
-//         },
-//       )
-//     }
-//     return
-//   }
 
-//   if (playMusicInfo.musicInfo == null) {
-//     handleToggleStop()
-//     console.log('musicInfo empty')
-//     return
-//   }
-
-//   // console.log(playInfo.playerListId)
-//   const currentListId = playInfo.playerListId
-//   if (!currentListId) {
-//     handleToggleStop()
-//     console.log('currentListId empty')
-//     return
-//   }
-//   // const currentList = getList(currentListId)
-//   // songs.value.push({
-//   //   title: music.musicInfo.name,
-//   //   artist: music.musicInfo.singer,
-//   //   album: music.musicInfo.meta.albumName,
-//   // })
-// }
-// showPlaylist()
 const emitClose = () => {
   emit('close')
 }
diff --git a/src/renderer/core/player/action.ts b/src/renderer/core/player/action.ts
index d29d243c..0649ee68 100644
--- a/src/renderer/core/player/action.ts
+++ b/src/renderer/core/player/action.ts
@@ -1,5 +1,5 @@
 import { isEmpty, setPause, setPlay, setResource, setStop } from '@renderer/plugins/player'
-import { isPlay, playedList, playInfo, playMusicInfo, tempPlayList, musicInfo as _musicInfo } from '@renderer/store/player/state'
+import { isPlay, playedList, playInfo, playMusicInfo, tempPlayList, musicInfo as _musicInfo, currentPlayIndex } from '@renderer/store/player/state'
 import {
   getList,
   clearPlayedList,
@@ -376,14 +376,15 @@ const handlePlayNext = (playMusicInfo: LX.Player.PlayMusicInfo) => {
  */
 export const playNext = async(isAutoToggle = false): Promise<void> => {
   console.log('skip next', isAutoToggle)
+  //todo 需要修改逻辑，不要删除
   if (tempPlayList.length) { // 如果稍后播放列表存在歌曲则直接播放改列表的歌曲
-    const playMusicInfo = tempPlayList[0]
-    removeTempPlayList(0)
+    const playMusicInfo = tempPlayList[++(currentPlayIndex.value) ]
+    // removeTempPlayList(0)
     handlePlayNext(playMusicInfo)
     console.log('play temp list')
     return
   }
-
+  ////////////预计此处往下的代码失去作用(被接管)/////////////
   if (playMusicInfo.musicInfo == null) {
     handleToggleStop()
     console.log('musicInfo empty')
diff --git a/src/renderer/store/player/action.ts b/src/renderer/store/player/action.ts
index be4343df..d578e80a 100644
--- a/src/renderer/store/player/action.ts
+++ b/src/renderer/store/player/action.ts
@@ -241,7 +241,8 @@ export const addTempPlayList = (list: LX.Player.TempPlayListItem[]) => {
   if (topList.length) arrUnshift(tempPlayList, topList.map(({ musicInfo, listId }) => ({ musicInfo, listId, isTempPlay: true })))
   if (bottomList.length) arrPush(tempPlayList, bottomList.map(({ musicInfo, listId }) => ({ musicInfo, listId, isTempPlay: true })))
 
-  if (!playMusicInfo.musicInfo) void playNext()
+  // if (!playMusicInfo.musicInfo) void playNext()
+  // 造成了奇怪的bug
 }
 /**
  * 从稍后播放列表移除歌曲
diff --git a/src/renderer/store/player/state.ts b/src/renderer/store/player/state.ts
index e75bd7e4..518a08b9 100644
--- a/src/renderer/store/player/state.ts
+++ b/src/renderer/store/player/state.ts
@@ -71,7 +71,7 @@ export const playedList = window.lxData.playedList = shallowReactive<LX.Player.P
 
 export const tempPlayList = shallowReactive<LX.Player.PlayMusicInfo[]>([])//todo
 
-export const PlayList = shallowReactive<LX.Player.PlayMusicInfo[]>([])
+export const currentPlayIndex = ref<number>(0)
 
 
 window.lxData.playInfo = playInfo
diff --git a/src/renderer/views/List/MusicList/usePlay.js b/src/renderer/views/List/MusicList/usePlay.js
index 5cf9f768..dae75e90 100644
--- a/src/renderer/views/List/MusicList/usePlay.js
+++ b/src/renderer/views/List/MusicList/usePlay.js
@@ -1,11 +1,6 @@
-import { addTempPlayList } from '@renderer/store/player/action'
-import { playList } from '@renderer/core/player'
-// import { tempPlayList } from '@renderer/store/player/state'
-
-import useMusicAdd from '@renderer/views/List/MusicList/useMusicAdd'
-import { LIST_IDS } from '@common/constants'
-import { getList } from '@renderer/store/player/action'
-
+import { addTempPlayList, clearTempPlayeList, getList } from '@renderer/store/player/action'
+import { tempPlayList, currentPlayIndex } from '@renderer/store/player/state'
+import { playNext } from '@renderer/core/player'
 // setup 函数或组件初始化中
 
 
@@ -13,25 +8,21 @@ export default ({ props, selectedList, list, removeAllSelect }) => {
   let clickTime = 0
   let clickIndex = -1
 
-  // 处理添加音乐到歌单的逻辑
-  const {
-    // handleShowMusicAddModal,
-    // handleShowMusicMoveModal,
-  } = useMusicAdd({ selectedList, list })
-
   const handlePlayMusic = (index) => {
+    currentPlayIndex.value = index
+    // todo 播放选中的歌曲
     // todo 修改播放歌曲逻辑
     // playList(props.listId, index)
     // handlePlayMusicLater(index, true)
-    // todo 若为空，则添加整个歌单
     // todo 歌单本身就有乱序排序功能
-     addTempPlayList([{ listId: props.listId, musicInfo: list.value[index] }])
-    // playList(LIST_IDS.TEMP, index)
-    // const testlist =getList(props.listId)
-     const testlist =getList(LIST_IDS.TEMP)
-    for (let i=0; i<testlist.length; i++){ 
-      console.log(testlist[i])
+    if (tempPlayList.length > 0 ) {// 双击操作会切换到当前歌单
+      clearTempPlayeList()
     }
+    const currentchooselist = getList(props.listId)
+    for(let music of currentchooselist) {
+      addTempPlayList([{ listId: props.listId, musicInfo: music }])
+    }
+    playNext()
   }
 
   const handlePlayMusicLater = (index, single) => {

From 19de946df16295241c47322a2a87efeef7ca8cc9 Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Sat, 3 May 2025 15:49:17 +0800
Subject: [PATCH 10/15] mark

---
 src/renderer/components/layout/PlayListWindow/index.vue | 3 ++-
 src/renderer/core/player/action.ts                      | 8 ++++++++
 src/renderer/store/player/action.ts                     | 2 ++
 src/renderer/store/player/state.ts                      | 1 +
 src/renderer/views/List/MusicList/usePlay.js            | 8 +++++++-
 5 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/layout/PlayListWindow/index.vue b/src/renderer/components/layout/PlayListWindow/index.vue
index c5279694..067205ad 100644
--- a/src/renderer/components/layout/PlayListWindow/index.vue
+++ b/src/renderer/components/layout/PlayListWindow/index.vue
@@ -24,7 +24,8 @@ import {
 } from '@renderer/store/player/state'
 // import { togglePlay, playNext, playPrev } from '@renderer/core/player'
 const emit = defineEmits(['close'])
-
+// todo 点击item切换歌曲
+// todo 当前播放歌曲的item高亮
 const playlist = ref(tempPlayList)
 const songs = computed(() =>
   playlist.value.map(music => ({
diff --git a/src/renderer/core/player/action.ts b/src/renderer/core/player/action.ts
index 0649ee68..189b950a 100644
--- a/src/renderer/core/player/action.ts
+++ b/src/renderer/core/player/action.ts
@@ -490,6 +490,14 @@ export const playNext = async(isAutoToggle = false): Promise<void> => {
  * 上一曲
  */
 export const playPrev = async(isAutoToggle = false): Promise<void> => {
+  if (currentPlayIndex.value > 0) { // 如果稍后播放列表存在歌曲则直接播放改列表的歌曲
+    const playMusicInfo = tempPlayList[--(currentPlayIndex.value) ]
+    // removeTempPlayList(0)
+    handlePlayNext(playMusicInfo)
+    console.log('play temp list')
+    return
+  }
+  ////////////预计此处往下的代码失去作用(被接管)/////////////
   if (playMusicInfo.musicInfo == null) {
     handleToggleStop()
     return
diff --git a/src/renderer/store/player/action.ts b/src/renderer/store/player/action.ts
index d578e80a..79db7e9d 100644
--- a/src/renderer/store/player/action.ts
+++ b/src/renderer/store/player/action.ts
@@ -230,6 +230,8 @@ export const clearPlayedList = () => {
  * @param list 歌曲列表
  *///todo
 export const addTempPlayList = (list: LX.Player.TempPlayListItem[]) => {
+  // todo 添加到下一首播放而不是到最后一首
+  // todo 重复歌曲不添加
   const topList: Array<Omit<LX.Player.TempPlayListItem, 'top'>> = []
   const bottomList = list.filter(({ isTop, ...musicInfo }) => {
     if (isTop) {
diff --git a/src/renderer/store/player/state.ts b/src/renderer/store/player/state.ts
index 518a08b9..be3fe447 100644
--- a/src/renderer/store/player/state.ts
+++ b/src/renderer/store/player/state.ts
@@ -73,6 +73,7 @@ export const tempPlayList = shallowReactive<LX.Player.PlayMusicInfo[]>([])//todo
 
 export const currentPlayIndex = ref<number>(0)
 
+export const currentPlaybackOrder = ref<number[]>([])
 
 window.lxData.playInfo = playInfo
 window.lxData.playMusicInfo = playMusicInfo
diff --git a/src/renderer/views/List/MusicList/usePlay.js b/src/renderer/views/List/MusicList/usePlay.js
index dae75e90..a24d73b8 100644
--- a/src/renderer/views/List/MusicList/usePlay.js
+++ b/src/renderer/views/List/MusicList/usePlay.js
@@ -1,6 +1,8 @@
 import { addTempPlayList, clearTempPlayeList, getList } from '@renderer/store/player/action'
-import { tempPlayList, currentPlayIndex } from '@renderer/store/player/state'
+import { tempPlayList, currentPlayIndex, currentPlaybackOrder } from '@renderer/store/player/state'
 import { playNext } from '@renderer/core/player'
+import { appSetting } from '@renderer/store/setting'
+// import { arrShuffle } from '@common/utils/common'
 // setup 函数或组件初始化中
 
 
@@ -22,6 +24,10 @@ export default ({ props, selectedList, list, removeAllSelect }) => {
     for(let music of currentchooselist) {
       addTempPlayList([{ listId: props.listId, musicInfo: music }])
     }
+    if (appSetting['player.togglePlayMethod'] == 'random') {
+      // todo 随机播放
+      // arrShuffle(tempPlayList)
+    }
     playNext()
   }
 

From 5ba914c162e7f3f10ed5832db8c240f82eb6728c Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Sat, 3 May 2025 17:08:52 +0800
Subject: [PATCH 11/15] mark

---
 src/renderer/components/material/OnlineList/usePlay.ts | 2 +-
 src/renderer/views/Download/usePlay.js                 | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/material/OnlineList/usePlay.ts b/src/renderer/components/material/OnlineList/usePlay.ts
index a7f59417..263d9eda 100644
--- a/src/renderer/components/material/OnlineList/usePlay.ts
+++ b/src/renderer/components/material/OnlineList/usePlay.ts
@@ -17,7 +17,7 @@ export default ({ selectedList, props, removeAllSelect, emit }: {
 }) => {
   let clickTime = 0
   let clickIndex = -1
-
+  // todo 待接管
   const handlePlayMusic = async(index: number, single: boolean) => {
     let targetSong = props.list[index]
     const defaultListMusics = await getListMusics(defaultList.id)
diff --git a/src/renderer/views/Download/usePlay.js b/src/renderer/views/Download/usePlay.js
index dd7da417..f038c5e3 100644
--- a/src/renderer/views/Download/usePlay.js
+++ b/src/renderer/views/Download/usePlay.js
@@ -4,6 +4,7 @@ import { LIST_IDS } from '@common/constants'
 
 export default ({ selectedList, list, listAll, removeAllSelect }) => {
   const handlePlayMusic = (index) => {
+    // todo 待接管
     playList(LIST_IDS.DOWNLOAD, listAll.value.indexOf(list.value[index]))
   }
 

From e32f6ef871d536bb9d6f32535d80231aa643e5ac Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Sat, 3 May 2025 17:14:26 +0800
Subject: [PATCH 12/15] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E4=BA=86=E5=AF=B9?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=88=97=E8=A1=A8=E7=9A=84=E9=9A=8F=E6=9C=BA?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/core/player/action.ts            | 117 +++++++++++++-----
 .../utils/compositions/useNextTogglePlay.ts   |  15 +++
 src/renderer/views/List/MusicList/usePlay.js  |  31 +++--
 3 files changed, 119 insertions(+), 44 deletions(-)

diff --git a/src/renderer/core/player/action.ts b/src/renderer/core/player/action.ts
index 189b950a..8e6f9527 100644
--- a/src/renderer/core/player/action.ts
+++ b/src/renderer/core/player/action.ts
@@ -1,5 +1,5 @@
 import { isEmpty, setPause, setPlay, setResource, setStop } from '@renderer/plugins/player'
-import { isPlay, playedList, playInfo, playMusicInfo, tempPlayList, musicInfo as _musicInfo, currentPlayIndex } from '@renderer/store/player/state'
+import { isPlay, playedList, playInfo, playMusicInfo, tempPlayList, musicInfo as _musicInfo, currentPlayIndex, currentPlaybackOrder } from '@renderer/store/player/state'
 import {
   getList,
   clearPlayedList,
@@ -148,6 +148,7 @@ export const setMusicUrl = (musicInfo: LX.Music.MusicInfo | LX.Download.ListItem
 
 // 恢复上次播放的状态
 const handleRestorePlay = async(restorePlayInfo: LX.Player.SavedPlayInfo) => {
+  // todo 恢复软件关闭时tempplaylist的状态
   const musicInfo = playMusicInfo.musicInfo
   if (!musicInfo) return
 
@@ -364,7 +365,7 @@ export const getNextPlayMusicInfo = async(): Promise<LX.Player.PlayMusicInfo | n
   return nextPlayMusicInfo
 }
 
-const handlePlayNext = (playMusicInfo: LX.Player.PlayMusicInfo) => {
+export const handlePlayNext = (playMusicInfo: LX.Player.PlayMusicInfo) => {
   // pause()
   setPlayMusicInfo(playMusicInfo.listId, playMusicInfo.musicInfo, playMusicInfo.isTempPlay)//todo 设置播放音乐
   handlePlay()
@@ -376,9 +377,35 @@ const handlePlayNext = (playMusicInfo: LX.Player.PlayMusicInfo) => {
  */
 export const playNext = async(isAutoToggle = false): Promise<void> => {
   console.log('skip next', isAutoToggle)
-  //todo 需要修改逻辑，不要删除
+  let togglePlayMethod = appSetting['player.togglePlayMethod']
+  if (!isAutoToggle) {
+    switch (togglePlayMethod) {
+      case 'list':
+      case 'singleLoop':
+      case 'none':
+        togglePlayMethod = 'listLoop'
+    }
+  }
+  switch (togglePlayMethod) {
+    case 'listLoop':
+      currentPlayIndex.value++
+      // bug 实际上不是列表循环...
+      break
+    case 'random':
+      currentPlayIndex.value++
+      break
+    case 'list':
+      currentPlayIndex.value++
+      break
+    case 'singleLoop':
+      break
+    default:
+      currentPlayIndex.value = -1
+      console.log('stop toggle play', togglePlayMethod, isAutoToggle)
+      return
+  }
   if (tempPlayList.length) { // 如果稍后播放列表存在歌曲则直接播放改列表的歌曲
-    const playMusicInfo = tempPlayList[++(currentPlayIndex.value) ]
+    const playMusicInfo = tempPlayList[currentPlaybackOrder.value[currentPlayIndex.value]]
     // removeTempPlayList(0)
     handlePlayNext(playMusicInfo)
     console.log('play temp list')
@@ -448,32 +475,32 @@ export const playNext = async(isAutoToggle = false): Promise<void> => {
   if (playerIndex == -1 && filteredList.length) playerIndex = 0
   let nextIndex = playerIndex
 
-  let togglePlayMethod = appSetting['player.togglePlayMethod']
-  if (!isAutoToggle) {
-    switch (togglePlayMethod) {
-      case 'list':
-      case 'singleLoop':
-      case 'none':
-        togglePlayMethod = 'listLoop'
-    }
-  }
-  switch (togglePlayMethod) {
-    case 'listLoop':
-      nextIndex = playerIndex === filteredList.length - 1 ? 0 : playerIndex + 1
-      break
-    case 'random':
-      nextIndex = getRandom(0, filteredList.length)
-      break
-    case 'list':
-      nextIndex = playerIndex === filteredList.length - 1 ? -1 : playerIndex + 1
-      break
-    case 'singleLoop':
-      break
-    default:
-      nextIndex = -1
-      console.log('stop toggle play', togglePlayMethod, isAutoToggle)
-      return
-  }
+  // let togglePlayMethod = appSetting['player.togglePlayMethod']
+  // if (!isAutoToggle) {
+  //   switch (togglePlayMethod) {
+  //     case 'list':
+  //     case 'singleLoop':
+  //     case 'none':
+  //       togglePlayMethod = 'listLoop'
+  //   }
+  // }
+  // switch (togglePlayMethod) {
+  //   case 'listLoop':
+  //     nextIndex = playerIndex === filteredList.length - 1 ? 0 : playerIndex + 1
+  //     break
+  //   case 'random':
+  //     nextIndex = getRandom(0, filteredList.length)
+  //     break
+  //   case 'list':
+  //     nextIndex = playerIndex === filteredList.length - 1 ? -1 : playerIndex + 1
+  //     break
+  //   case 'singleLoop':
+  //     break
+  //   default:
+  //     nextIndex = -1
+  //     console.log('stop toggle play', togglePlayMethod, isAutoToggle)
+  //     return
+  // }
   if (nextIndex < 0) {
     console.log('next index empty')
     return
@@ -490,8 +517,36 @@ export const playNext = async(isAutoToggle = false): Promise<void> => {
  * 上一曲
  */
 export const playPrev = async(isAutoToggle = false): Promise<void> => {
+  // todo 重复代码块，可以提取
+  let togglePlayMethod = appSetting['player.togglePlayMethod']
+  if (!isAutoToggle) {
+    switch (togglePlayMethod) {
+      case 'list':
+      case 'singleLoop':
+      case 'none':
+        togglePlayMethod = 'listLoop'
+    }
+  }
+  switch (togglePlayMethod) {
+    case 'listLoop':
+      currentPlayIndex.value--
+      // bug 实际上不是列表循环...
+      break
+    case 'random':
+      currentPlayIndex.value--
+      break
+    case 'list':
+      currentPlayIndex.value--
+      break
+    case 'singleLoop':
+      break
+    default:
+      currentPlayIndex.value = -1
+      console.log('stop toggle play', togglePlayMethod, isAutoToggle)
+      return
+  }
   if (currentPlayIndex.value > 0) { // 如果稍后播放列表存在歌曲则直接播放改列表的歌曲
-    const playMusicInfo = tempPlayList[--(currentPlayIndex.value) ]
+    const playMusicInfo = tempPlayList[currentPlaybackOrder.value[currentPlayIndex.value]]
     // removeTempPlayList(0)
     handlePlayNext(playMusicInfo)
     console.log('play temp list')
diff --git a/src/renderer/utils/compositions/useNextTogglePlay.ts b/src/renderer/utils/compositions/useNextTogglePlay.ts
index 37047eae..00803316 100644
--- a/src/renderer/utils/compositions/useNextTogglePlay.ts
+++ b/src/renderer/utils/compositions/useNextTogglePlay.ts
@@ -3,6 +3,7 @@ import {
   computed,
 } from '@common/utils/vueTools'
 import { useI18n } from '@renderer/plugins/i18n'
+import { tempPlayList, currentPlayIndex, currentPlaybackOrder } from '@renderer/store/player/state'
 
 // const playNextModes = [
 //   'listLoop',
@@ -28,6 +29,20 @@ export default () => {
     if (mode == appSetting['player.togglePlayMethod']) return
     // let index = playNextModes.indexOf(appSetting['player.togglePlayMethod'])
     // if (++index >= playNextModes.length) index = 0
+    const N = tempPlayList.length
+    const prevPlayIndex = currentPlaybackOrder.value[currentPlayIndex.value]
+    if (mode === 'random') {
+      const allIndexes = Array.from({ length: N }, (_, i) => i).filter(i => i !== prevPlayIndex)
+      for (let i = allIndexes.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1))
+        ;[allIndexes[i], allIndexes[j]] = [allIndexes[j], allIndexes[i]]
+      }
+      currentPlaybackOrder.value = [prevPlayIndex, ...allIndexes]
+    } else {
+      currentPlaybackOrder.value = Array.from({ length: N }, (_, i) => i)
+      currentPlayIndex.value = prevPlayIndex
+    }
+    // todo 因为只有此函数会修改播放类别，所以直接在这里应用修改效果
     setTogglePlayMode(mode)
   }
 
diff --git a/src/renderer/views/List/MusicList/usePlay.js b/src/renderer/views/List/MusicList/usePlay.js
index a24d73b8..fa3e300f 100644
--- a/src/renderer/views/List/MusicList/usePlay.js
+++ b/src/renderer/views/List/MusicList/usePlay.js
@@ -1,6 +1,6 @@
 import { addTempPlayList, clearTempPlayeList, getList } from '@renderer/store/player/action'
 import { tempPlayList, currentPlayIndex, currentPlaybackOrder } from '@renderer/store/player/state'
-import { playNext } from '@renderer/core/player'
+import { handlePlayNext } from '@renderer/core/player'
 import { appSetting } from '@renderer/store/setting'
 // import { arrShuffle } from '@common/utils/common'
 // setup 函数或组件初始化中
@@ -11,24 +11,29 @@ export default ({ props, selectedList, list, removeAllSelect }) => {
   let clickIndex = -1
 
   const handlePlayMusic = (index) => {
-    currentPlayIndex.value = index
-    // todo 播放选中的歌曲
-    // todo 修改播放歌曲逻辑
-    // playList(props.listId, index)
-    // handlePlayMusicLater(index, true)
-    // todo 歌单本身就有乱序排序功能
-    if (tempPlayList.length > 0 ) {// 双击操作会切换到当前歌单
+    currentPlayIndex.value = 0
+    if (tempPlayList.length > 0) { // 双击操作会切换到当前歌单
       clearTempPlayeList()
     }
     const currentchooselist = getList(props.listId)
-    for(let music of currentchooselist) {
+    for (let music of currentchooselist) {
       addTempPlayList([{ listId: props.listId, musicInfo: music }])
     }
-    if (appSetting['player.togglePlayMethod'] == 'random') {
-      // todo 随机播放
-      // arrShuffle(tempPlayList)
+    // todo 重复代码块，可提取
+    const N = tempPlayList.length
+    if (appSetting['player.togglePlayMethod'] === 'random') {
+      const allIndexes = Array.from({ length: N }, (_, i) => i).filter(i => i !== index)
+      for (let i = allIndexes.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1))
+        ;[allIndexes[i], allIndexes[j]] = [allIndexes[j], allIndexes[i]]
+      }
+      currentPlaybackOrder.value = [index, ...allIndexes]
+    } else {
+      currentPlaybackOrder.value = Array.from({ length: N }, (_, i) => i)
+      currentPlayIndex.value = index
     }
-    playNext()
+    const playMusicInfo = tempPlayList[currentPlaybackOrder.value[currentPlayIndex.value]]
+    handlePlayNext(playMusicInfo)
   }
 
   const handlePlayMusicLater = (index, single) => {

From 5ded7c7e19c8815d9f84b04ed3dad878857036c6 Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Sat, 3 May 2025 17:31:08 +0800
Subject: [PATCH 13/15] =?UTF-8?q?=E5=BD=93=E6=92=AD=E6=94=BE=E9=A1=BA?=
 =?UTF-8?q?=E5=BA=8F=E6=94=B9=E5=8F=98=EF=BC=8C=E6=92=AD=E6=94=BE=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E4=B9=9F=E4=BC=9A=E6=94=B9=E5=8F=98=EF=BC=88=E8=BF=99?=
 =?UTF-8?q?=E4=B8=AA=E5=8F=AF=E4=BB=A5=E5=81=9A=E6=88=90ui=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9=E8=80=8C=E4=B8=8D=E6=98=AF=E5=9B=BA=E5=AE=9A=E8=BF=99?=
 =?UTF-8?q?=E6=A0=B7=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/PlayListWindow/index.vue           | 31 ++++++++++---------
 .../utils/compositions/useNextTogglePlay.ts   |  1 +
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/renderer/components/layout/PlayListWindow/index.vue b/src/renderer/components/layout/PlayListWindow/index.vue
index 067205ad..dc44ad46 100644
--- a/src/renderer/components/layout/PlayListWindow/index.vue
+++ b/src/renderer/components/layout/PlayListWindow/index.vue
@@ -16,25 +16,26 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import {
-  // musicInfo,
-  // isPlay,
-  // playMusicInfo, playInfo,
-  tempPlayList,
-} from '@renderer/store/player/state'
-// import { togglePlay, playNext, playPrev } from '@renderer/core/player'
+import { tempPlayList, currentPlaybackOrder } from '@renderer/store/player/state'
+
 const emit = defineEmits(['close'])
 // todo 点击item切换歌曲
 // todo 当前播放歌曲的item高亮
 const playlist = ref(tempPlayList)
-const songs = computed(() =>
-  playlist.value.map(music => ({
-    title: music.musicInfo.name,
-    artist: music.musicInfo.singer,
-    album: music.musicInfo.meta.albumName,
-  })),
-)
 
+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,
+    })
+  }
+  return showlist
+},
+)
 const emitClose = () => {
   emit('close')
 }
@@ -60,7 +61,7 @@ const emitClose = () => {
   font-size: 18px;
   font-weight: bold;
   text-align: center;
-}
+}p
 
 .close-button {
   position: absolute;
diff --git a/src/renderer/utils/compositions/useNextTogglePlay.ts b/src/renderer/utils/compositions/useNextTogglePlay.ts
index 00803316..72d44f6f 100644
--- a/src/renderer/utils/compositions/useNextTogglePlay.ts
+++ b/src/renderer/utils/compositions/useNextTogglePlay.ts
@@ -32,6 +32,7 @@ export default () => {
     const N = tempPlayList.length
     const prevPlayIndex = currentPlaybackOrder.value[currentPlayIndex.value]
     if (mode === 'random') {
+      currentPlayIndex.value = 0
       const allIndexes = Array.from({ length: N }, (_, i) => i).filter(i => i !== prevPlayIndex)
       for (let i = allIndexes.length - 1; i > 0; i--) {
         const j = Math.floor(Math.random() * (i + 1))

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 14/15] =?UTF-8?q?musiclist=E7=9A=84=E7=BB=98=E5=88=B6ui?=
 =?UTF-8?q?=E4=B8=8E=E5=85=B6=E5=8A=9F=E8=83=BD=E4=B8=BA=E5=BC=BA=E8=80=A6?=
 =?UTF-8?q?=E5=90=88=E5=AF=BC=E8=87=B4=E6=97=A0=E6=B3=95=E5=A4=8D=E7=94=A8?=
 =?UTF-8?q?=EF=BC=8C=E5=8F=AA=E8=83=BD=E6=88=91=E8=87=AA=E5=B7=B1=E5=86=99?=
 =?UTF-8?q?=E7=82=B9=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)
 

From c640dc5ec5ee88542a5d0b7e82ec2904a901ae91 Mon Sep 17 00:00:00 2001
From: QiuLiang-99 <1297829693@qq.com>
Date: Sun, 4 May 2025 01:17:58 +0800
Subject: [PATCH 15/15] =?UTF-8?q?=E8=B0=83=E6=95=B4css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/common/TogglePlayModeBtn.vue   |  2 +-
 .../components/layout/PlayListWindow/index.vue         | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/common/TogglePlayModeBtn.vue b/src/renderer/components/common/TogglePlayModeBtn.vue
index ab5f2e50..d4570756 100644
--- a/src/renderer/components/common/TogglePlayModeBtn.vue
+++ b/src/renderer/components/common/TogglePlayModeBtn.vue
@@ -43,7 +43,7 @@
     </button>
     <template #content>
       <div :class="$style.setting">
-        <button :class="$style.btn" :aria-label="$t('player__play_toggle_mode_list_loop')" @click="toggleMode('listLoop')">
+        <button :class="$style.btn" :aria-label="$t('player__play_toggle_mode_list_loop')" @click="toggleMode('listLoop')"><!-- //todo直接把顺序播放删了然后把图标接到播放列表头上，反正这个模式和列表循环一模一样 -->
           <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 24 24" space="preserve">
             <use xlink:href="#icon-list-loop" />
           </svg>
diff --git a/src/renderer/components/layout/PlayListWindow/index.vue b/src/renderer/components/layout/PlayListWindow/index.vue
index dde41510..29b0e7ed 100644
--- a/src/renderer/components/layout/PlayListWindow/index.vue
+++ b/src/renderer/components/layout/PlayListWindow/index.vue
@@ -41,7 +41,7 @@ const songs = computed(() => {
   const showlist = []
   for (const idx of currentPlaybackOrder.value) {
     const info = playlist.value[idx]
-    if (info && info.musicInfo) {
+    if (info?.musicInfo) {
       showlist.push({
         title: info.musicInfo.name,
         artist: info.musicInfo.singer,
@@ -136,18 +136,18 @@ function emitClose() {
 
 /* hover 状态稍微加深一下 */
 .song-item:hover {
-  background-color: #eaeaea;
+  background-color: #eaeaea!important;
 }
 
 /* 当前播放项高亮（深灰） */
 .active {
-  background-color: #555555 !important;
-  color: black !important;
+  background-color: #EBEBEB ;
+  color: black ;
 }
 
 /* 选中（左键或右键）状态，更深的灰 */
 .selected {
-  background-color: #333333 !important;
+  background-color: #ebebeb ;
   color: black !important;
 }