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

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 {