mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-28 19:07:23 +08:00
✨ feat: 更新迷你播放栏在页面显示逻辑
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user