初步设计了按钮和播放列表的ui

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>

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>

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>