修改播放栏UI

src/renderer/assets/styles/variables.less

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

src/renderer/components/base/Popup.vue

@@ -7,6 +7,7 @@
       @click.stop
       @mouseenter="emit('mouseenter', $event)"
       @mouseleave="emit('mouseleave', $event)"
+      @transitionend="emit('transitionend', $event)"
     >
       <div ref="dom_content" class="scroll" :class="$style.list">
         <slot />
@@ -39,6 +40,7 @@ interface Emitter {
   (event: 'update:visible', visible: boolean): void
   (event: 'mouseenter', visible: MouseEvent): void
   (event: 'mouseleave', visible: MouseEvent): void
+  (event: 'transitionend', visible: TransitionEvent): void
 }
 const emit = defineEmits<Emitter>()
 

src/renderer/components/common/VolumeBtn.vue

@@ -7,14 +7,16 @@
     </button>
     <template #content>
       <div :class="$style.setting">
-        <span>{{ Math.trunc(volume * 100) }}%</span>
+        <div :class="$style.info">
+          <span>{{ Math.trunc(volume * 100) }}%</span>
+          <base-checkbox
+            id="player__volume_mute"
+            :model-value="isMute"
+            :label="$t('player__volume_mute_label')"
+            @update:model-value="saveVolumeIsMute($event)"
+          />
+        </div>
         <common-volume-bar />
-        <base-checkbox
-          id="player__volume_mute"
-          :model-value="isMute"
-          :label="$t('player__volume_mute_label')"
-          @update:model-value="saveVolumeIsMute($event)"
-        />
       </div>
     </template>
   </material-popup-btn>
@@ -83,10 +85,17 @@ const icon = computed(() => {
 .setting {
   display: flex;
   flex-flow: column nowrap;
-  font-size: 14px;
   padding: 2px 3px;
   gap: 8px;
-  label span {
+}
+
+.info {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  span {
     line-height: 1;
   }
 }

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

@@ -3,9 +3,9 @@
     <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">
+    <base-popup v-model:visible="visible" :btn-el="dom_btn" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave" @transitionend="handleTranEnd">
       <div :class="$style.progress">
-        <common-progress-bar :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
+        <common-progress-bar v-if="visibleProgress" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
       </div>
     </base-popup>
   </div>
@@ -19,14 +19,13 @@ import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
 export default {
   setup() {
     const visible = ref(false)
+    const visibleProgress = ref(false)
     const dom_btn = ref<HTMLElement | null>(null)
 
     const handleShowPopup = (evt) => {
       if (visible.value) evt.stopPropagation()
-      setTimeout(() => {
+      if (visible.value) handlMsLeave()
-        // if (!)
+      else handlMsEnter()
-        visible.value = !visible.value
-      }, 50)
     }
     const {
       nowPlayTimeStr,
@@ -38,22 +37,31 @@ export default {
 
     let timeout = null
     const handlMsEnter = () => {
-      if (visible.value) {
+      if (timeout) {
-        if (timeout) {
+        clearTimeout(timeout)
-          clearTimeout(timeout)
+        timeout = null
-          timeout = null
-        }
-        return
       }
-      visible.value = true
+      if (visible.value) return
+      timeout = setTimeout(() => {
+        visible.value = true
+        visibleProgress.value = true
+      }, 100)
     }
     const handlMsLeave = () => {
+      if (timeout) {
+        clearTimeout(timeout)
+        timeout = null
+      }
       if (!visible.value) return
       timeout = setTimeout(() => {
         timeout = null
         visible.value = false
       }, 100)
     }
+    const handleTranEnd = () => {
+      if (visible.value) return
+      visibleProgress.value = false
+    }
 
     onMounted(() => {
       visible.value = true
@@ -64,6 +72,7 @@ export default {
 
     return {
       visible,
+      visibleProgress,
       dom_btn,
       handleShowPopup,
       nowPlayTimeStr,
@@ -73,6 +82,7 @@ export default {
       handleTransitionEnd,
       handlMsLeave,
       handlMsEnter,
+      handleTranEnd,
     }
   },
 }
@@ -86,8 +96,8 @@ export default {
   flex: none;
   position: relative;
   // display: inline-block;
-  padding: 5px 0 5px 5px;
+  padding: 5px 0;
-  color: var(--color-font);
+  color: var(--color-300);
   font-size: 13px;
   cursor: pointer;
   transition: opacity @transition-fast;

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

@@ -1,8 +1,5 @@
 <template>
   <div :class="$style.player">
-    <div :class="$style.progress">
-      <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">
       <div v-else :class="$style.emptyPic">L<span>X</span></div>
@@ -15,7 +12,10 @@
     </div>
     <div :class="$style.timeContent">
       <span>{{ nowPlayTimeStr }}</span>
-      <span style="margin: 0 1px;">/</span>
+      <div :class="$style.progress">
+        <common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
+      </div>
+      <!-- <span style="margin: 0 1px;">/</span> -->
       <span>{{ maxPlayTimeStr }}</span>
     </div>
     <!-- <play-progress /> -->
@@ -149,13 +149,13 @@ export default {
 .player {
   position: relative;
   height: @height-player;
-  // border-top: 1px solid var(--color-primary-alpha-900);
+  border-top: 1px solid var(--color-primary-alpha-900);
   box-sizing: border-box;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   contain: strict;
-  padding: 8px 6px 6px;
+  padding: 6px;
   z-index: 2;
   // box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
   * {
@@ -169,22 +169,10 @@ export default {
     width: 100%;
     height: 100%;
     background-color: var(--color-main-background);
-    opacity: .8;
+    opacity: .9;
     z-index: -1;
   }
 }
-.progress {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding-bottom: 6px;
-  // height: 15px;
-  .progressBar {
-    height: 2px;
-    border-radius: 0;
-  }
-}
 
 .picContent {
   height: 100%;
@@ -240,7 +228,7 @@ export default {
 }
 
 .infoContent {
-  padding-left: 10px;
+  padding: 0 10px;
   flex: auto;
   display: flex;
   flex-flow: column nowrap;
@@ -266,10 +254,37 @@ export default {
 }
 
 .timeContent {
+  width: 30%;
+  // position: relative;
   flex: none;
-  color: var(--color-font);
+  color: var(--color-300);
   font-size: 13px;
-  padding-left: 10px;
+  // padding-left: 10px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+.progress {
+  // position: absolute;
+  // top: 0;
+  // left: 0;
+  // width: 100%;
+  flex: auto;
+  // width: 160px;
+  position: relative;
+  // padding-bottom: 6px;
+  margin: 0 8px;
+  padding: 8px 0;
+  // height: 15px;
+  // .progressBar {
+  //   height: 4px;
+  //   // border-radius: 0;
+  // }
+}
+.time {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
 }
 
 .playBtnContent {

src/renderer/components/material/Modal.vue

@@ -54,7 +54,7 @@ export default {
     },
     maxHeight: {
       type: String,
-      default: '80%',
+      default: '76%',
     },
     width: {
       type: String,