优化大屏下的UI展示

src/renderer/components/common/AudioVisualizer.vue

@@ -29,11 +29,14 @@ const themes = {
 
 const getBarWidth = canvasWidth => {
   let barWidth = (canvasWidth / 128) * 2.5
-  const width = canvasWidth / 85
+  const width = canvasWidth / 86
+  const diffWidth = barWidth - width
   // console.log(barWidth - width)
   // if (barWidth - width > 20) newBarWidth = 20
   // barWidth = newBarWidth
-  return barWidth - width > 12 ? width : barWidth
+  return diffWidth > 32
+    ? canvasWidth / 128 // 4k屏、超宽屏直接显示所有频谱条
+    : diffWidth > 12 ? width : barWidth
 }
 export default {
   setup() {

src/renderer/components/common/ListAddModal.vue

@@ -92,11 +92,11 @@ export default {
     ...mapMutations('list', ['listAdd', 'listMove', 'createUserList']),
     handleResize() {
       const width = window.innerWidth
-      this.rowNum = width <= 1440
+      this.rowNum = width < 1920
         ? 3
-        : width <= 1920
+        : width < 2560
           ? 4
-          : width <= 2560 ? 5 : 6
+          : width < 3840 ? 5 : 6
     },
     handleClick(index) {
       this.isMove
@@ -212,19 +212,19 @@ export default {
 }
 
 @item-width2: (100% / 4);
-@media screen and (min-width: 1920px){
+@media (min-width: 1920px){
   .btn {
     width: calc(@item-width2 - 15px);
   }
 }
 @item-width3: (100% / 5);
-@media screen and (min-width: 2048px){
+@media (min-width: 2560px){
   .btn {
     width: calc(@item-width3 - 15px);
   }
 }
 @item-width4: (100% / 6);
-@media screen and (min-width: 2560px){
+@media (min-width: 3840px){
   .btn {
     width: calc(@item-width4 - 15px);
   }

src/renderer/components/common/ListAddMultipleModal.vue

@@ -93,11 +93,11 @@ export default {
     ...mapMutations('list', ['listAddMultiple', 'listMoveMultiple', 'createUserList']),
     handleResize() {
       const width = window.innerWidth
-      this.rowNum = width <= 1440
+      this.rowNum = width < 1920
         ? 3
-        : width <= 1920
+        : width < 2560
           ? 4
-          : width <= 2560 ? 5 : 6
+          : width < 3840 ? 5 : 6
     },
     handleClick(index) {
       this.isMove
@@ -210,19 +210,19 @@ export default {
 }
 
 @item-width2: (100% / 4);
-@media screen and (min-width: 1920px){
+@media (min-width: 1920px){
   .btn {
     width: calc(@item-width2 - 15px);
   }
 }
 @item-width3: (100% / 5);
-@media screen and (min-width: 2048px){
+@media (min-width: 2560px){
   .btn {
     width: calc(@item-width3 - 15px);
   }
 }
 @item-width4: (100% / 6);
-@media screen and (min-width: 2560px){
+@media (min-width: 3840px){
   .btn {
     width: calc(@item-width4 - 15px);
   }

src/renderer/components/core/PlayDetail/LyricPlayer.vue

@@ -31,6 +31,7 @@
 <script>
 import { clipboardWriteText } from '@renderer/utils'
 import { lyric } from '@renderer/core/share/lyric'
+import { isFullscreen } from '@renderer/core/share'
 import { isPlay, isShowLrcSelectContent, isShowPlayComment } from '@renderer/core/share/player'
 import { onMounted, onBeforeUnmount, useCommit, useRefGetter, computed } from '@renderer/utils/vueTools'
 import useLyric from '@renderer/utils/compositions/useLyric'
@@ -68,7 +69,8 @@ export default {
       }
     })
     const lrcFontSize = computed(() => {
-      const size = setting.value.playDetail.style.fontSize / 100
+      let size = setting.value.playDetail.style.fontSize / 100
+      if (isFullscreen.value) size = size *= 1.4
       return {
         '--playDetail-lrc-font-size': (isShowPlayComment.value ? size * 0.82 : size) + 'rem',
       }