优化UI

src/common/defaultSetting.ts

@@ -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,

src/renderer/assets/styles/variables.less

@@ -6,7 +6,7 @@
 
 // Height
 @height-toolbar: 54px;
-@height-player: 70px;
+@height-player: 68px;
 
 
 // Shadow

src/renderer/components/base/Popup.vue

@@ -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>()
 

src/renderer/components/common/ProgressBar.vue

@@ -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);

src/renderer/components/common/VolumeBar.vue

@@ -92,8 +92,8 @@ export default {
   // cursor: pointer;
   width: 100%;
   height: 5px;
-  // border-radius: 10px;
+  border-radius: 20px;
-  // overflow: hidden;
+  overflow: hidden;
   transition: @transition-normal;
   transition-property: background-color, opacity;
   background-color: var(--color-primary-alpha-700);

src/renderer/components/common/VolumeBtn.vue

@@ -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;

src/renderer/components/layout/PlayBar/ControlBtnsLeft.vue

@@ -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>

src/renderer/components/layout/PlayBar/PlayProgress.vue

@@ -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>

src/renderer/components/layout/PlayBar/index.vue

@@ -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 {

src/renderer/components/layout/PlayDetail/components/ControlBtns.vue

@@ -111,7 +111,7 @@ export default {
   flex-flow: row nowrap;
   justify-content: flex-end;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
 
   button {
     width: 20px;

src/renderer/main.ts

@@ -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)