完成播放列表按钮及布局
QiuLiang-99
parent
c1e7faa7bf
commit
a22a9ffc85
|
|
@ -3,9 +3,13 @@
|
|||
<layout-aside id="left" />
|
||||
<div id="right">
|
||||
<layout-toolbar id="toolbar" />
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue