mod: 调整迷你播放器

暂时还没有暂停播放和其他控制

src/App.vue

@@ -71,14 +71,17 @@ watch(
 							<SearchIcon :size="4" />
 						</button> -->
 
+						<Player />
+
+
+						<MiniPlayer />
+
 						<button
 							class="text-white w-9 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"
 							@click="presentPreferencePanel = true">
 							<CorgIcon :size="4" />
 						</button>
 
-						<MiniPlayer />
-						<Player />
 					</div>
 				</div>
 			</div>

src/components/MiniPlayer.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
+import { usePlayQueueStore } from '../stores/usePlayQueueStore'
 
 const route = useRoute()
+const playQueue = usePlayQueueStore()
 </script>
 
 <template>
-	<RouterLink to="/playroom">
+	<RouterLink to="/playroom" v-if="playQueue.currentTrack">
 		<div
-			class="h-9 w-52 bg-neutral-800/80 border border-[#ffffff39] rounded-full backdrop-blur-3xl flex items-center justify-between select-none">
+			class="h-9 w-52 bg-neutral-800/80 border border-[#ffffff39] rounded-full backdrop-blur-3xl flex items-center justify-between select-none overflow-hidden">
 			<div class="flex items-center gap-2">
-				<div class="rounded-full w-9 h-9 bg-gray-600" />
+				<div class="rounded-full w-9 h-9 bg-gray-600 overflow-hidden">
-				<div class="text-white">Song title</div>
+					<img :src="playQueue.currentTrack.album?.coverUrl ?? ''" />
+				</div>
+				<div class="text-white">{{playQueue.currentTrack.song.name}}</div>
 			</div>
 		</div>
 	</RouterLink>