优化UI
This commit is contained in:
lyswhut
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<div :class="$style.controlBtn">
|
||||
<div :class="$style.btn" :aria-label="$t('player__add_music_to')" @click="addMusicTo">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="90%" viewBox="0 0 512 512" space="preserve">
|
||||
<use xlink:href="#icon-add-2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div :class="$style.btn" :aria-label="toggleDesktopLyricBtnTitle" @click="toggleDesktopLyric" @contextmenu="toggleLockDesktopLyric">
|
||||
<svg v-show="appSetting['desktopLyric.enable']" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 512 512" space="preserve">
|
||||
<use xlink:href="#icon-desktop-lyric-on" />
|
||||
</svg>
|
||||
<svg v-show="!appSetting['desktopLyric.enable']" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 512 512" space="preserve">
|
||||
<use xlink:href="#icon-desktop-lyric-off" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from '@common/utils/vueTools'
|
||||
import useToggleDesktopLyric from '@renderer/utils/compositions/useToggleDesktopLyric'
|
||||
import { musicInfo, playMusicInfo } from '@renderer/store/player/state'
|
||||
import { appSetting } from '@renderer/store/setting'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const isShowAddMusicTo = ref(false)
|
||||
|
||||
const {
|
||||
toggleDesktopLyricBtnTitle,
|
||||
toggleDesktopLyric,
|
||||
toggleLockDesktopLyric,
|
||||
} = useToggleDesktopLyric()
|
||||
|
||||
|
||||
const addMusicTo = () => {
|
||||
if (!musicInfo.id) return
|
||||
isShowAddMusicTo.value = true
|
||||
}
|
||||
|
||||
return {
|
||||
appSetting,
|
||||
isShowAddMusicTo,
|
||||
toggleDesktopLyricBtnTitle,
|
||||
toggleDesktopLyric,
|
||||
toggleLockDesktopLyric,
|
||||
addMusicTo,
|
||||
playMusicInfo,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
|
||||
.controlBtn {
|
||||
padding-left: 5px;
|
||||
padding-right: 20px;
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: none;
|
||||
height: 100%;
|
||||
width: 26px;
|
||||
color: var(--color-button-font);
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
transition: opacity 0.2s ease;
|
||||
opacity: .6;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div ref="dom_btn" :class="$style.content" @click="handleShowPopup" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave">
|
||||
<span>{{ nowPlayTimeStr }}</span>
|
||||
<span style="margin: 0 1px;">/</span>
|
||||
<span>{{ maxPlayTimeStr }}</span>
|
||||
<base-popup v-model:visible="visible" :btn-el="dom_btn" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave">
|
||||
<div :class="$style.progress">
|
||||
<common-progress-bar :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
|
||||
</div>
|
||||
</base-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted } from '@common/utils/vueTools'
|
||||
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
|
||||
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const visible = ref(false)
|
||||
const dom_btn = ref<HTMLElement | null>(null)
|
||||
|
||||
const handleShowPopup = (evt) => {
|
||||
if (visible.value) evt.stopPropagation()
|
||||
setTimeout(() => {
|
||||
// if (!)
|
||||
visible.value = !visible.value
|
||||
}, 50)
|
||||
}
|
||||
const {
|
||||
nowPlayTimeStr,
|
||||
maxPlayTimeStr,
|
||||
progress,
|
||||
isActiveTransition,
|
||||
handleTransitionEnd,
|
||||
} = usePlayProgress()
|
||||
|
||||
let timeout = null
|
||||
const handlMsEnter = () => {
|
||||
if (visible.value) {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout)
|
||||
timeout = null
|
||||
}
|
||||
return
|
||||
}
|
||||
visible.value = true
|
||||
}
|
||||
const handlMsLeave = () => {
|
||||
if (!visible.value) return
|
||||
timeout = setTimeout(() => {
|
||||
timeout = null
|
||||
visible.value = false
|
||||
}, 100)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
visible.value = true
|
||||
requestAnimationFrame(() => {
|
||||
visible.value = false
|
||||
})
|
||||
})
|
||||
|
||||
return {
|
||||
visible,
|
||||
dom_btn,
|
||||
handleShowPopup,
|
||||
nowPlayTimeStr,
|
||||
maxPlayTimeStr,
|
||||
progress,
|
||||
isActiveTransition,
|
||||
handleTransitionEnd,
|
||||
handlMsLeave,
|
||||
handlMsEnter,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
.content {
|
||||
flex: none;
|
||||
position: relative;
|
||||
// display: inline-block;
|
||||
padding: 5px 0 5px 5px;
|
||||
color: var(--color-font);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: opacity @transition-fast;
|
||||
|
||||
&:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 15px;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div :class="$style.player">
|
||||
<div :class="$style.progress">
|
||||
<common-progress-bar v-if="!isShowPlayerDetail" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
|
||||
<common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
|
||||
</div>
|
||||
<div :class="$style.picContent" :aria-label="$t('player__pic_tip')" @contextmenu="handleToMusicLocation" @click="showPlayerDetail">
|
||||
<img v-if="musicInfo.pic" :src="musicInfo.pic" loading="lazy" decoding="async" @error="imgError">
|
||||
@@ -18,6 +18,7 @@
|
||||
<span style="margin: 0 1px;">/</span>
|
||||
<span>{{ maxPlayTimeStr }}</span>
|
||||
</div>
|
||||
<!-- <play-progress /> -->
|
||||
<control-btns />
|
||||
<div :class="$style.playBtnContent">
|
||||
<div :class="$style.playBtn" :aria-label="$t('player__prev')" style="transform: rotate(180deg);" @click="playPrev()">
|
||||
@@ -47,6 +48,7 @@ import { computed } from '@common/utils/vueTools'
|
||||
import { useRouter } from '@common/utils/vueRouter'
|
||||
import { clipboardWriteText } from '@common/utils/electron'
|
||||
import ControlBtns from './ControlBtns'
|
||||
// import PlayProgress from './PlayProgress'
|
||||
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
|
||||
// import { lyric } from '@renderer/core/share/lyric'
|
||||
import {
|
||||
@@ -68,6 +70,7 @@ export default {
|
||||
name: 'CorePlayBar',
|
||||
components: {
|
||||
ControlBtns,
|
||||
// PlayProgress,
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
@@ -152,7 +155,7 @@ export default {
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
contain: strict;
|
||||
padding: 11px 6px 6px;
|
||||
padding: 8px 6px 6px;
|
||||
z-index: 2;
|
||||
// box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
* {
|
||||
@@ -175,8 +178,12 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 5px;
|
||||
padding-bottom: 6px;
|
||||
// height: 15px;
|
||||
.progressBar {
|
||||
height: 2px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.picContent {
|
||||
|
||||
@@ -111,7 +111,7 @@ export default {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
|
||||
button {
|
||||
width: 20px;
|
||||
|
||||
Reference in New Issue
Block a user