优化下载、歌曲添加弹窗在大屏幕下的排版

publish/changeLog.md

@@ -18,7 +18,7 @@
 
 ### 文档
 
-添加LX中定义的快捷操作汇总说明到常见问题中，这是目前可用的鼠标、键盘快捷操作，他们都可以在更新日志中找到
+添加LX中定义的快捷操作汇总说明到常见问题中，这是目前可用的鼠标、键盘快捷操作，它们都可以在更新日志中找到
 
 - 鼠标右击播放栏的歌曲图片封面可以定位当前播放的歌曲
 - 鼠标右击播放栏进度条上的LRC按钮可以锁定/解锁桌面歌词

src/renderer/components/common/DownloadModal.vue

@@ -79,7 +79,7 @@ export default {
 
 .main {
   padding: 15px;
-  max-width: 300px;
+  max-width: 400px;
   min-width: 200px;
   display: flex;
   flex-flow: column nowrap;

src/renderer/components/common/DownloadMultipleModal.vue

@@ -51,7 +51,7 @@ export default {
 
 .main {
   padding: 15px;
-  max-width: 300px;
+  max-width: 400px;
   min-width: 200px;
   display: flex;
   flex-flow: column nowrap;

src/renderer/components/common/ListAddModal.vue

@@ -1,5 +1,5 @@
 <template>
-<material-modal :show="show" :bg-close="bgClose" @close="handleClose" :teleport="teleport">
+<material-modal :show="show" :bg-close="bgClose" @close="handleClose" :teleport="teleport" max-width="70%">
   <main :class="$style.main">
     <h2>{{$t('list_add__' + (isMove ? 'title_first_move' : 'title_first_add'))}}&nbsp;<span :class="$style.name">{{this.musicInfo && `${musicInfo.name}`}}</span>&nbsp;{{$t('list_add__title_last')}}</h2>
     <div class="scroll" :class="$style.btnContent">
@@ -74,15 +74,30 @@ export default {
     return {
       isEditing: false,
       newListName: '',
+      rowNum: 3,
     }
   },
   computed: {
     spaceNum() {
-      return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)
+      return this.lists.length < 2 ? 0 : (this.rowNum - this.lists.length % this.rowNum - 1)
     },
   },
+  mounted() {
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
   methods: {
     ...mapMutations('list', ['listAdd', 'listMove', 'createUserList']),
+    handleResize() {
+      const width = window.innerWidth
+      this.rowNum = width <= 1440
+        ? 3
+        : width <= 1920
+          ? 4
+          : width <= 2560 ? 5 : 6
+    },
     handleClick(index) {
       this.isMove
         ? this.listMove({ fromId: this.fromListId, toId: this.lists[index].id, musicInfo: this.musicInfo })
@@ -117,7 +132,7 @@ export default {
 
 .main {
   // padding: 15px 0;
-  max-width: 620px;
+  // max-width: 70%;
   min-width: 200px;
   display: flex;
   flex-flow: column nowrap;
@@ -147,6 +162,7 @@ export default {
   justify-content: space-evenly;
 }
 
+@item-width: (100% / 3);
 .btn {
   box-sizing: border-box;
   margin-left: 15px;
@@ -154,7 +170,8 @@ export default {
   height: 36px;
   line-height: 36px;
   padding: 0 10px !important;
-  width: 180px;
+  width: calc(@item-width - 15px);
+  min-width: 160px;
   .mixin-ellipsis-1;
 }
 
@@ -194,6 +211,25 @@ export default {
   display: none;
 }
 
+@item-width2: (100% / 4);
+@media screen and (min-width: 1920px){
+  .btn {
+    width: calc(@item-width2 - 15px);
+  }
+}
+@item-width3: (100% / 5);
+@media screen and (min-width: 2048px){
+  .btn {
+    width: calc(@item-width3 - 15px);
+  }
+}
+@item-width4: (100% / 6);
+@media screen and (min-width: 2560px){
+  .btn {
+    width: calc(@item-width4 - 15px);
+  }
+}
+
 each(@themes, {
   :global(#root.@{value}) {
     .main {

src/renderer/components/common/ListAddMultipleModal.vue

@@ -1,5 +1,5 @@
 <template>
-<material-modal :show="show" :bg-close="bgClose" @close="handleClose">
+<material-modal :show="show" :bg-close="bgClose" @close="handleClose" max-width="70%">
   <main :class="$style.main">
     <h2>{{$t('list_add__multiple_' + (isMove ? 'title_move' : 'title_add'), { num: musicList.length })}}</h2>
     <div class="scroll" :class="$style.btnContent">
@@ -74,16 +74,31 @@ export default {
     return {
       isEditing: false,
       newListName: '',
+      rowNum: 3,
     }
   },
   computed: {
 
     spaceNum() {
-      return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)
+      return this.lists.length < 2 ? 0 : (this.rowNum - this.lists.length % this.rowNum - 1)
     },
   },
+  mounted() {
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
   methods: {
     ...mapMutations('list', ['listAddMultiple', 'listMoveMultiple', 'createUserList']),
+    handleResize() {
+      const width = window.innerWidth
+      this.rowNum = width <= 1440
+        ? 3
+        : width <= 1920
+          ? 4
+          : width <= 2560 ? 5 : 6
+    },
     handleClick(index) {
       this.isMove
         ? this.listMoveMultiple({ fromId: this.fromListId, toId: this.lists[index].id, list: this.musicList })
@@ -119,7 +134,7 @@ export default {
 
 .main {
   // padding: 15px 0;
-  max-width: 620px;
+  // max-width: 620px;
   min-width: 200px;
   display: flex;
   flex-flow: column nowrap;
@@ -145,6 +160,7 @@ export default {
   justify-content: space-evenly;
 }
 
+@item-width: (100% / 3);
 .btn {
   box-sizing: border-box;
   margin-left: 15px;
@@ -152,7 +168,8 @@ export default {
   height: 36px;
   line-height: 36px;
   padding: 0 10px !important;
-  width: 180px;
+  width: calc(@item-width - 15px);
+  min-width: 160px;
   .mixin-ellipsis-1;
 }
 
@@ -192,6 +209,26 @@ export default {
   display: none;
 }
 
+@item-width2: (100% / 4);
+@media screen and (min-width: 1920px){
+  .btn {
+    width: calc(@item-width2 - 15px);
+  }
+}
+@item-width3: (100% / 5);
+@media screen and (min-width: 2048px){
+  .btn {
+    width: calc(@item-width3 - 15px);
+  }
+}
+@item-width4: (100% / 6);
+@media screen and (min-width: 2560px){
+  .btn {
+    width: calc(@item-width4 - 15px);
+  }
+}
+
+
 each(@themes, {
   :global(#root.@{value}) {
     .main {

src/renderer/components/core/PlayDetail/components/MusicComment/index.vue

@@ -132,7 +132,9 @@ export default {
   },
   methods: {
     setWidth() {
-      this.$refs.dom_container.style.width = this.$refs.dom_container.clientWidth + 'px'
+      setTimeout(() => {
+        this.$refs.dom_container.style.width = Math.floor(this.$refs.dom_container.parentNode.clientWidth * 0.5) + 'px'
+      })
     },
     async getComment(musicInfo, page, limit, retryNum = 0) {
       let resp

src/renderer/components/material/Modal.vue

@@ -4,7 +4,7 @@ teleport(:to="teleport")
     transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
       div(:class="$style.modal" v-show="showContent" @click="bgClose && close()")
         transition(:enter-active-class="inClass" :leave-active-class="outClass" @after-enter="$emit('after-enter', $event)" @after-leave="handleAfterLeave")
-          div(:class="$style.content" v-show="showContent" @click.stop)
+          div(:class="$style.content" v-show="showContent" @click.stop :style="contentStyle")
             header(:class="$style.header")
               button(type="button" @click="close" v-if="closeBtn")
                 svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
@@ -34,6 +34,10 @@ export default {
       type: String,
       default: '#root',
     },
+    maxWidth: {
+      type: String,
+      default: '76%',
+    },
   },
   emits: ['after-enter', 'after-leave', 'close'],
   data() {
@@ -91,6 +95,11 @@ export default {
   },
   computed: {
     ...mapGetters(['setting']),
+    contentStyle() {
+      return {
+        maxWidth: this.maxWidth,
+      }
+    },
   },
   watch: {
     'setting.randomAnimate'(n) {
@@ -182,7 +191,7 @@ export default {
   box-shadow: 0 0 3px rgba(0, 0, 0, .3);
   overflow: hidden;
   max-height: 80%;
-  max-width: 76%;
+  // max-width: 76%;
   min-width: 220px;
   position: relative;
   display: flex;

src/renderer/views/songList/SongList.vue

@@ -208,8 +208,10 @@ export default {
       window.removeEventListener('resize', this.handleSetTagWidth)
     },
     handleSetTagWidth() {
+      setTimeout(() => {
         this.setTagListWidth()
         setTimeout(this.setTagListWidth, 100)
+      })
     },
     handle_key_backspace_down({ event }) {
       if (!this.isVisibleListDetail ||