feat: 更新迷你播放栏在页面显示逻辑

This commit is contained in:
alger
2025-04-02 00:07:37 +08:00
parent 7b27cf5bc6
commit 7f7d41f883
2 changed files with 9 additions and 9 deletions
@@ -69,13 +69,13 @@
</n-popover> </n-popover>
<!-- 播放列表按钮 --> <!-- 播放列表按钮 -->
<button class="function-button" @click="togglePlaylist"> <button v-if="!component" class="function-button" @click="togglePlaylist">
<i class="iconfont icon-list"></i> <i class="iconfont icon-list"></i>
</button> </button>
</div> </div>
<!-- 关闭按钮 --> <!-- 关闭按钮 -->
<button class="close-button" @click="handleClose"> <button v-if="!component" class="close-button" @click="handleClose">
<i class="iconfont ri-close-line"></i> <i class="iconfont ri-close-line"></i>
</button> </button>
</div> </div>
@@ -93,6 +93,7 @@
<!-- 播放列表 - 单独放在外层不再使用 popover --> <!-- 播放列表 - 单独放在外层不再使用 popover -->
<div <div
v-if="!component"
v-show="isPlaylistOpen" v-show="isPlaylistOpen"
class="playlist-container" class="playlist-container"
:class="{ 'mini-mode-list': settingsStore.isMiniMode }" :class="{ 'mini-mode-list': settingsStore.isMiniMode }"
@@ -133,10 +134,10 @@ const { navigateToArtist } = useArtist();
withDefaults( withDefaults(
defineProps<{ defineProps<{
pureModeEnabled?: boolean; pureModeEnabled?: boolean;
showInfo?: boolean; component?: boolean;
}>(), }>(),
{ {
showInfo: false component: false
} }
); );
@@ -144,8 +145,6 @@ withDefaults(
const handleClose = () => { const handleClose = () => {
if (settingsStore.isMiniMode) { if (settingsStore.isMiniMode) {
window.api.restore(); window.api.restore();
} else {
window.api.close();
} }
}; };
@@ -335,7 +334,7 @@ const setMusicFull = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.mini-play-bar { .mini-play-bar {
@apply w-full flex flex-col bg-white dark:bg-dark-200 shadow-md bg-opacity-50 backdrop-blur dark:bg-opacity-50; @apply w-full flex flex-col bg-light-200 dark:bg-dark-200 shadow-md bg-opacity-60 backdrop-blur dark:bg-opacity-60;
height: 64px; height: 64px;
border-radius: 8px; border-radius: 8px;
position: relative; position: relative;
@@ -425,7 +424,7 @@ const setMusicFull = () => {
height: 40px; height: 40px;
.cover-img { .cover-img {
@apply w-full h-full rounded-md object-cover; @apply w-full h-full rounded-md object-cover pointer-events-none;
} }
} }
@@ -449,7 +448,7 @@ const setMusicFull = () => {
} }
.control-button { .control-button {
@apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-400; @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600;
width: 32px; width: 32px;
height: 32px; height: 32px;
@@ -66,6 +66,7 @@
v-if="!config.hideMiniPlayBar" v-if="!config.hideMiniPlayBar"
class="mt-4" class="mt-4"
:pure-mode-enabled="config.pureModeEnabled" :pure-mode-enabled="config.pureModeEnabled"
component
/> />
</div> </div>
</div> </div>