优化UI
lyswhut
parent
c9d8bbe874
commit
3530a95738
|
|
@ -4,7 +4,7 @@ import { homedir } from 'os'
|
|||
const defaultSetting: LX.AppSetting = {
|
||||
version: '2.0.0',
|
||||
|
||||
'common.windowSizeId': 2,
|
||||
'common.windowSizeId': 3,
|
||||
'common.fontSize': 16,
|
||||
'common.startInFullscreen': false,
|
||||
'common.langId': null,
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
// Height
|
||||
@height-toolbar: 54px;
|
||||
@height-player: 70px;
|
||||
@height-player: 68px;
|
||||
|
||||
|
||||
// Shadow
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
<template>
|
||||
<component :is="Teleport" to="#root">
|
||||
<div :class="[$style.popup, {[$style.top]: isShowTop}, {[$style.active]: props.visible}]" :style="popupStyle" :aria-hidden="!props.visible" @click.stop>
|
||||
<div
|
||||
:class="[$style.popup, {[$style.top]: isShowTop}, {[$style.active]: props.visible}]"
|
||||
:style="popupStyle"
|
||||
:aria-hidden="!props.visible"
|
||||
@click.stop
|
||||
@mouseenter="emit('mouseenter', $event)"
|
||||
@mouseleave="emit('mouseleave', $event)"
|
||||
>
|
||||
<div ref="dom_content" class="scroll" :class="$style.list">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -30,6 +37,8 @@ const props = defineProps<{
|
|||
|
||||
interface Emitter {
|
||||
(event: 'update:visible', visible: boolean): void
|
||||
(event: 'mouseenter', visible: MouseEvent): void
|
||||
(event: 'mouseleave', visible: MouseEvent): void
|
||||
}
|
||||
const emit = defineEmits<Emitter>()
|
||||
|
||||
|
|
|
|||
|
|
@ -96,13 +96,13 @@ export default {
|
|||
.progress {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
// overflow: hidden;
|
||||
overflow: hidden;
|
||||
transition: @transition-normal;
|
||||
transition-property: background-color;
|
||||
background-color: var(--color-primary-light-100-alpha-800);
|
||||
// background-color: #f5f5f5;
|
||||
position: relative;
|
||||
// border-radius: 20px;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.progress-mask {
|
||||
position: absolute;
|
||||
|
|
@ -119,7 +119,6 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: 0;
|
||||
// border-radius: 20px;
|
||||
}
|
||||
.progress-bar1 {
|
||||
background-color: var(--color-primary-light-100-alpha-600);
|
||||
|
|
|
|||
|
|
@ -92,8 +92,8 @@ export default {
|
|||
// cursor: pointer;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
// border-radius: 10px;
|
||||
// overflow: hidden;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
transition: @transition-normal;
|
||||
transition-property: background-color, opacity;
|
||||
background-color: var(--color-primary-alpha-700);
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ const icon = computed(() => {
|
|||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
font-size: 14px;
|
||||
padding: 2px 3px;
|
||||
gap: 8px;
|
||||
label span {
|
||||
line-height: 1;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -58,6 +58,11 @@ void getSetting().then(setting => {
|
|||
console.log('Set lang', setting['common.langId'])
|
||||
}
|
||||
window.i18n.setLanguage(setting['common.langId'])
|
||||
|
||||
if ((document.body.clientHeight > window.screen.availHeight || document.body.clientWidth > window.screen.availWidth) && setting['common.windowSizeId'] > 1) {
|
||||
void updateSetting({ 'common.windowSizeId': 1 })
|
||||
}
|
||||
|
||||
// store.commit('setSetting', setting)
|
||||
initSetting(setting)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue