优化UI

src/renderer/App.vue

@@ -404,7 +404,7 @@ body {
   border-top-left-radius: @radius-border;
   border-bottom-left-radius: @radius-border;
   overflow: hidden;
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
 }
 #toolbar, #player {
   flex: none;

src/renderer/assets/styles/variables.less

@@ -21,8 +21,8 @@
 @color-theme_2-active: fadeout(lighten(@color-theme, 10%), 70%);
 @color-theme_2-font: darken(@color-theme_2, 70%);
 @color-theme_2-font-label: fadeout(@color-theme_2-font, 40%);
-@color-theme_2-line: transparent;
+// @color-theme_2-line: transparent;
-// @color-theme_2-line: lighten(@color-theme, 35%);
+@color-theme_2-line: lighten(@color-theme, 35%);
 @color-theme-sidebar: @color-theme;
 @color-btn: lighten(@color-theme, 5%);
 @color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
@@ -89,8 +89,8 @@
 @color-green-theme_2-active: fadeout(lighten(@color-green-theme, 10%), 70%);
 @color-green-theme_2-font: darken(@color-green-theme_2, 70%);
 @color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 40%);
-@color-green-theme_2-line: transparent;
+// @color-green-theme_2-line: transparent;
-// @color-green-theme_2-line: lighten(@color-green-theme, 45%);
+@color-green-theme_2-line: lighten(@color-green-theme, 45%);
 @color-green-theme-sidebar: @color-green-theme;
 @color-green-btn: lighten(@color-green-theme, 5%);
 @color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
@@ -146,8 +146,8 @@
 @color-yellow-theme_2-active: fadeout(lighten(@color-yellow-theme, 10%), 60%);
 @color-yellow-theme_2-font: darken(@color-yellow-theme_2, 70%);
 @color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 40%);
-@color-yellow-theme_2-line: transparent;
+// @color-yellow-theme_2-line: transparent;
-// @color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
+@color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
 @color-yellow-theme-sidebar: @color-yellow-theme;
 @color-yellow-btn: darken(@color-yellow-theme, 5%);
 @color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%);
@@ -202,8 +202,8 @@
 @color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%);
 @color-orange-theme_2-font: darken(@color-orange-theme_2, 70%);
 @color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 40%);
-@color-orange-theme_2-line: transparent;
+// @color-orange-theme_2-line: transparent;
-// @color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
+@color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
 @color-orange-theme-sidebar: @color-orange-theme;
 @color-orange-btn: lighten(@color-orange-theme, 5%);
 @color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%);
@@ -258,8 +258,8 @@
 @color-blue-theme_2-active: fadeout(lighten(@color-blue-theme, 10%), 70%);
 @color-blue-theme_2-font: darken(@color-blue-theme_2, 70%);
 @color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 40%);
-@color-blue-theme_2-line: transparent;
+// @color-blue-theme_2-line: transparent;
-// @color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
+@color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
 @color-blue-theme-sidebar: @color-blue-theme;
 @color-blue-btn: lighten(@color-blue-theme, 5%);
 @color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%);
@@ -314,8 +314,8 @@
 @color-red-theme_2-background_2: fadeout(@color-red-theme_2-background_1, 2%);
 @color-red-theme_2-font: darken(@color-red-theme_2, 70%);
 @color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 40%);
-@color-red-theme_2-line: transparent;
+// @color-red-theme_2-line: transparent;
-// @color-red-theme_2-line: lighten(@color-red-theme, 42%);
+@color-red-theme_2-line: lighten(@color-red-theme, 42%);
 @color-red-theme-sidebar: @color-red-theme;
 @color-red-btn: lighten(@color-red-theme, 5%);
 @color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
@@ -372,8 +372,8 @@
 @color-pink-theme_2-active: fadeout(lighten(@color-pink-theme, 10%), 60%);
 @color-pink-theme_2-font: darken(@color-pink-theme_2, 70%);
 @color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 40%);
-@color-pink-theme_2-line: transparent;
+// @color-pink-theme_2-line: transparent;
-// @color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
+@color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
 @color-pink-theme-sidebar: @color-pink-theme;
 @color-pink-btn: darken(@color-pink-theme, 3%);
 @color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%);
@@ -428,8 +428,8 @@
 @color-purple-theme_2-active: fadeout(lighten(@color-purple-theme, 10%), 70%);
 @color-purple-theme_2-font: darken(@color-purple-theme_2, 70%);
 @color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 40%);
-@color-purple-theme_2-line: transparent;
+// @color-purple-theme_2-line: transparent;
-// @color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
+@color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
 @color-purple-theme-sidebar: @color-purple-theme;
 @color-purple-btn: lighten(@color-purple-theme, 5%);
 @color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
@@ -484,8 +484,8 @@
 @color-grey-theme_2-active: fadeout(lighten(@color-grey-theme, 10%), 70%);
 @color-grey-theme_2-font: darken(@color-grey-theme_2, 70%);
 @color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 40%);
-@color-grey-theme_2-line: transparent;
+// @color-grey-theme_2-line: transparent;
-// @color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
+@color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
 @color-grey-theme-sidebar: @color-grey-theme;
 @color-grey-btn: lighten(@color-grey-theme, 5%);
 @color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
@@ -541,8 +541,8 @@
 @color-ming-theme_2-background_2: fadeout(@color-ming-theme_2-background_1, 2%);
 @color-ming-theme_2-font: darken(@color-ming-theme_2, 70%);
 @color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 40%);
-@color-ming-theme_2-line: transparent;
+// @color-ming-theme_2-line: transparent;
-// @color-ming-theme_2-line: lighten(@color-ming-theme, 60%);
+@color-ming-theme_2-line: lighten(@color-ming-theme, 60%);
 @color-ming-theme-sidebar: @color-ming-theme;
 @color-ming-btn: lighten(@color-ming-theme, 5%);
 @color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%);
@@ -600,8 +600,8 @@
 @color-blue2-theme_2-active: fadeout(lighten(@color-blue2-theme, 10%), 70%);
 @color-blue2-theme_2-font: darken(@color-blue2-theme_2, 70%);
 @color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 40%);
-@color-blue2-theme_2-line: transparent;
+// @color-blue2-theme_2-line: transparent;
-// @color-blue2-theme_2-line: lighten(@color-blue2-theme, 47%);
+@color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%);
 @color-blue2-theme-sidebar: @color-blue2-theme;
 @color-blue2-btn: lighten(@color-blue2-theme, 5%);
 @color-blue2-btn-background: fadeout(lighten(@color-blue2-theme, 30%), 70%);
@@ -657,8 +657,8 @@
 @color-mid_autumn-theme_2-active: fadeout(lighten(@color-mid_autumn-theme, 15%), 70%);
 @color-mid_autumn-theme_2-font: darken(@color-mid_autumn-theme_2, 70%);
 @color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
-@color-mid_autumn-theme_2-line: transparent;
+// @color-mid_autumn-theme_2-line: transparent;
-// @color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 63%);
+@color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 63%);
 @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
 @color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%);
 @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
@@ -713,8 +713,8 @@
 @color-naruto-theme_2-active: fadeout(lighten(@color-naruto-theme, 10%), 65%);
 @color-naruto-theme_2-font: darken(@color-naruto-theme_2, 80%);
 @color-naruto-theme_2-font-label: desaturate(lighten(@color-naruto-theme, 10%), 45%);
-@color-naruto-theme_2-line: transparent;
+// @color-naruto-theme_2-line: transparent;
-// @color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%);
+@color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%);
 @color-naruto-theme-sidebar: rgba(255, 255, 255, .3);
 @color-naruto-btn: lighten(@color-naruto-theme, 2%);
 @color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%);
@@ -769,8 +769,8 @@
 @color-happy_new_year-theme_2-active: fadeout(lighten(@color-happy_new_year-theme, 10%), 55%);
 @color-happy_new_year-theme_2-font: darken(@color-happy_new_year-theme_2, 90%);
 @color-happy_new_year-theme_2-font-label: desaturate(darken(@color-happy_new_year-theme, 5%), 50%);
-@color-happy_new_year-theme_2-line: transparent;
+// @color-happy_new_year-theme_2-line: transparent;
-// @color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%);
+@color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%);
 @color-happy_new_year-theme-sidebar: rgba(119, 37, 18, 0.1);
 @color-happy_new_year-btn: desaturate(@color-happy_new_year-theme, 10%);
 @color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%);

src/renderer/components/material/AasideList.vue

@@ -90,6 +90,7 @@ export default {
         isADown: false,
         aDownTimeout: null,
       },
+      lastSelectIndex: -1,
     }
   },
   created() {
@@ -168,7 +169,7 @@ export default {
     handleSelectData(event, clickIndex) {
       if (this.keyEvent.isShiftDown) {
         if (this.selectdList.length) {
-          let lastSelectIndex = this.list.indexOf(this.selectdList[this.selectdList.length - 1])
+          let lastSelectIndex = this.lastSelectIndex
           this.removeAllSelect()
           if (lastSelectIndex != clickIndex) {
             let isNeedReverse = false
@@ -189,6 +190,7 @@ export default {
         } else {
           event.currentTarget.classList.add('active')
           this.selectdList.push(this.list[clickIndex])
+          this.lastSelectIndex = clickIndex
         }
       } else if (this.keyEvent.isModDown) {
         let item = this.list[clickIndex]

src/renderer/components/material/SongList.vue

@@ -161,6 +161,7 @@ export default {
         isShiftDown: false,
         isModDown: false,
       },
+      lastSelectIndex: -1,
       listMenu: {
         isShowItemMenu: false,
         itemMenuControl: {
@@ -236,7 +237,7 @@ export default {
     handleSelectData(event, clickIndex) {
       if (this.keyEvent.isShiftDown) {
         if (this.selectdList.length) {
-          let lastSelectIndex = this.list.indexOf(this.selectdList[this.selectdList.length - 1])
+          let lastSelectIndex = this.lastSelectIndex
           this.removeAllSelect()
           if (lastSelectIndex != clickIndex) {
             let isNeedReverse = false
@@ -257,6 +258,7 @@ export default {
         } else {
           event.currentTarget.classList.add('active')
           this.selectdList.push(this.list[clickIndex])
+          this.lastSelectIndex = clickIndex
         }
       } else if (this.keyEvent.isModDown) {
         let item = this.list[clickIndex]

src/renderer/views/Download.vue

@@ -53,6 +53,7 @@ export default {
         isShiftDown: false,
         isModDown: false,
       },
+      lastSelectIndex: -1,
       listMenu: {
         isShowItemMenu: false,
         itemMenuControl: {
@@ -232,7 +233,7 @@ export default {
     handleSelectData(event, clickIndex) {
       if (this.keyEvent.isShiftDown) {
         if (this.selectdData.length) {
-          let lastSelectIndex = this.showList.indexOf(this.selectdData[this.selectdData.length - 1])
+          let lastSelectIndex = this.lastSelectIndex
           this.removeAllSelect()
           if (lastSelectIndex != clickIndex) {
             let isNeedReverse = false
@@ -253,6 +254,7 @@ export default {
         } else {
           event.currentTarget.classList.add('active')
           this.selectdData.push(this.showList[clickIndex])
+          this.lastSelectIndex = clickIndex
         }
       } else if (this.keyEvent.isModDown) {
         let item = this.showList[clickIndex]

src/renderer/views/List.vue

@@ -94,6 +94,7 @@ export default {
         isShiftDown: false,
         isModDown: false,
       },
+      lastSelectIndex: -1,
       listsData: {
         isShowItemMenu: false,
         itemMenuControl: {
@@ -406,7 +407,7 @@ export default {
 
       if (this.keyEvent.isShiftDown) {
         if (this.selectdListDetailData.length) {
-          let lastSelectIndex = this.list.indexOf(this.selectdListDetailData[this.selectdListDetailData.length - 1])
+          let lastSelectIndex = this.lastSelectIndex
           if (lastSelectIndex == clickIndex) return this.removeAllSelectListDetail()
           this.removeAllSelectListDetail()
           let isNeedReverse = false
@@ -426,6 +427,7 @@ export default {
         } else {
           event.currentTarget.classList.add('active')
           this.selectdListDetailData.push(this.list[clickIndex])
+          this.lastSelectIndex = clickIndex
         }
       } else if (this.keyEvent.isModDown) {
         let item = this.list[clickIndex]

src/renderer/views/Search.vue

@@ -83,6 +83,7 @@ export default {
         isShiftDown: false,
         isModDown: false,
       },
+      lastSelectIndex: -1,
       listMenu: {
         isShowItemMenu: false,
         itemMenuControl: {
@@ -278,7 +279,7 @@ export default {
     handleSelectData(event, clickIndex) {
       if (this.keyEvent.isShiftDown) {
         if (this.selectedData.length) {
-          let lastSelectIndex = this.listInfo.list.indexOf(this.selectedData[this.selectedData.length - 1])
+          let lastSelectIndex = this.lastSelectIndex
           this.removeAllSelect()
           if (lastSelectIndex != clickIndex) {
             let isNeedReverse = false
@@ -299,6 +300,7 @@ export default {
         } else {
           event.currentTarget.classList.add('active')
           this.selectedData.push(this.listInfo.list[clickIndex])
+          this.lastSelectIndex = clickIndex
         }
       } else if (this.keyEvent.isModDown) {
         let item = this.listInfo.list[clickIndex]