允许选中列表内的部分文字，优化界面

publish/changeLog.md

@@ -1,3 +1,12 @@
+### 新增
+
+- 允许选中列表内歌曲名、歌手名、专辑名内的文字，选中后可使用键盘快捷键进行复制
+
+### 优化
+
+- 优化木叶之村主题翻页器背景颜色
+- 优化其他一些界面细节
+
 ### 修复
 
 - 修复启用透明窗口鼠标不穿透的bug

src/renderer/assets/styles/index.less

@@ -20,6 +20,13 @@
   word-break: break-all;
 }
 
+.select {
+  user-select: text;
+}
+.no-select {
+  user-select: none;
+}
+
 table {
   width: 100%;
   border-spacing: 0;
@@ -50,7 +57,7 @@ table {
         position: relative;
         transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         font-size: 13px;
-        line-height: 1.3;
+        line-height: 1.4;
         vertical-align: middle;
       }
     }
@@ -129,6 +136,10 @@ input, textarea {
     color: @color-theme_2-font-label;
   }
 }
+::selection {
+  color: @color-theme_2;
+  background: @color-btn;
+}
 
 .hover, a {
   cursor: pointer;
@@ -206,6 +217,10 @@ each(@themes, {
         color: ~'@{color-@{value}-theme_2-font-label}';
       }
     }
+    ::selection {
+      color: ~'@{color-@{value}-theme_2}';
+      background: ~'@{color-@{value}-btn}';
+    }
 
     .badge {
       &.badge-theme-success {

src/renderer/assets/styles/variables.less

@@ -61,7 +61,7 @@
 @color-green-badge-success-font: #fff;
 @color-green-badge-info: #4baed5;
 @color-green-badge-info-font: #fff;
-@color-badge-success: #32bc63;
+@color-badge-success: @color-theme;
 @color-badge-success-font: #fff;
 @color-badge-info: #4baed5;
 @color-badge-info-font: #fff;
@@ -463,7 +463,7 @@
 @color-midAutumn-badge-info-font: #fff;
 
 @color-dhHyrz-theme: rgb(87, 144, 167);
-@color-dhHyrz-theme-bgimg: url(../images/hzwbg.jpeg);
+@color-dhHyrz-theme-bgimg: url(../images/myzcbg.jpeg);
 @color-dhHyrz-theme-bgposition: center;
 @color-dhHyrz-theme-bgsize: auto 100%;
 @color-dhHyrz-theme-hover: fadeout(lighten(@color-dhHyrz-theme, 10%), 45%);
@@ -481,10 +481,10 @@
 @color-dhHyrz-theme-sidebar: rgba(255, 255, 255, .3);
 @color-dhHyrz-btn: fadeout(darken(@color-dhHyrz-theme, 5%), 15%);
 @color-dhHyrz-btn-background: fadeout(lighten(@color-dhHyrz-theme, 35%), 70%);
-@color-dhHyrz-pagination-background: fadeout(lighten(@color-dhHyrz-theme, 45%), 50%);
+@color-dhHyrz-pagination-background: fadeout(lighten(@color-dhHyrz-theme, 15%), 60%);
-@color-dhHyrz-pagination-hover: fadeout(lighten(@color-dhHyrz-theme, 10%), 70%);
+@color-dhHyrz-pagination-hover: fadeout(lighten(@color-dhHyrz-theme, 10%), 60%);
 @color-dhHyrz-pagination-active: fadeout(darken(@color-dhHyrz-theme, 10%), 70%);
-@color-dhHyrz-pagination-select: fadeout(lighten(@color-dhHyrz-theme, 10%), 55%);
+@color-dhHyrz-pagination-select: fadeout(lighten(@color-dhHyrz-theme, 10%), 50%);
 @color-dhHyrz-search-form-background: fadeout(lighten(@color-dhHyrz-theme, 30%), 20%);
 @color-dhHyrz-search-list-hover: fadeout(darken(@color-dhHyrz-theme, 10%), 50%);
 @color-dhHyrz-scrollbar-track: fadeout(@color-dhHyrz-theme, 80%);

src/renderer/components/core/Player.vue

@@ -588,7 +588,7 @@ export default {
   }
 }
 .left {
-  width: @height-player;
+  width: @height-player - 2;
   color: @color-theme;
   transition: @transition-theme;
   transition-property: color;
@@ -617,7 +617,7 @@ export default {
 .right {
   flex: auto;
   // margin-left: 10px;
-  padding: 5px 10px;
+  padding: 5px 10px 5px 8px;
   display: flex;
   flex-flow: column nowrap;
 }

src/renderer/components/material/SongList.vue

@@ -17,15 +17,17 @@ div(:class="$style.songList")
       div.scroll(:class="$style.tbody" ref="dom_scrollContent")
         table
           tbody
-            tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick(index)")
+            tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick($event, index)")
               td.nobreak.center(style="width: 37px;" @click.stop)
                 material-checkbox(:id="index.toString()" v-model="selectdList" @change="handleChangeSelect" :value="item")
               td.break(style="width: 25%;")
-                | {{item.name}}
+                span.select {{item.name}}
                 span.badge.badge-theme-info(v-if="!(item._types.ape || item._types.flac) && item._types['320k']") 高品质
                 span.badge.badge-theme-success(v-if="item._types.ape || item._types.flac") 无损
-              td.break(style="width: 20%;") {{item.singer}}
+              td.break(style="width: 20%;")
-              td.break(style="width: 20%;") {{item.albumName}}
+                span.select {{item.singer}}
+              td.break(style="width: 20%;")
+                span.select {{item.albumName}}
               td(style="width: 20%; padding-left: 0; padding-right: 0;")
                 material-list-buttons(:index="index" :search-btn="true"
                   :remove-btn="false" @btn-click="handleListBtnClick"
@@ -131,7 +133,9 @@ export default {
     }
   },
   methods: {
-    handleDoubleClick(index) {
+    handleDoubleClick(event, index) {
+      if (event.target.classList.contains('select')) return
+
       if (
         window.performance.now() - this.clickTime > 400 ||
         this.clickIndex !== index
@@ -197,14 +201,8 @@ export default {
   td {
     font-size: 12px;
     :global(.badge) {
-      margin-right: 3px;
-      &:first-child {
       margin-left: 3px;
     }
-      &:last-child {
-        margin-right: 0;
-      }
-    }
   }
   :global(.badge) {
     opacity: .85;

src/renderer/utils/request.js

@@ -27,7 +27,7 @@ const buildHttpPromose = (url, options) => {
     requestObj = fetchData(url, options.method, options, (err, resp, body) => {
     // options.isShowProgress && window.api.hideProgress()
       debugRequest && console.log(`\n---response------${url}------------`)
-      debugRequest && console.log(JSON.stringify(body))
+      debugRequest && console.log(body)
       requestObj = null
       cancelFn = null
       if (err) {
@@ -112,7 +112,7 @@ export const http = (url, options, cb) => {
   return fetchData(url, options.method, options, (err, resp, body) => {
     // options.isShowProgress && window.api.hideProgress()
     debugRequest && console.log(`\n---response------${url}------------`)
-    debugRequest && console.log(JSON.stringify(body))
+    debugRequest && console.log(body)
     if (err) {
       debugRequest && console.log(JSON.stringify(err))
     }
@@ -141,7 +141,7 @@ export const httpGet = (url, options, callback) => {
   return fetchData(url, 'get', options, function(err, resp, body) {
     // options.isShowProgress && window.api.hideProgress()
     debugRequest && console.log(`\n---response------${url}------------`)
-    debugRequest && console.log(JSON.stringify(body))
+    debugRequest && console.log(body)
     if (err) {
       debugRequest && console.log(JSON.stringify(err))
     }
@@ -172,7 +172,7 @@ export const httpPost = (url, data, options, callback) => {
   return fetchData(url, 'post', options, function(err, resp, body) {
     // options.isShowProgress && window.api.hideProgress()
     debugRequest && console.log(`\n---response------${url}------------`)
-    debugRequest && console.log(JSON.stringify(body))
+    debugRequest && console.log(body)
     if (err) {
       debugRequest && console.log(JSON.stringify(err))
     }
@@ -209,7 +209,7 @@ export const http_jsonp = (url, options, callback) => {
   return fetchData(url, 'get', options, function(err, resp, body) {
     // options.isShowProgress && window.api.hideProgress()
     debugRequest && console.log(`\n---response------${url}------------`)
-    debugRequest && console.log(JSON.stringify(body))
+    debugRequest && console.log(body)
     if (err) {
       debugRequest && console.log(JSON.stringify(err))
     } else {

src/renderer/views/Download.vue

@@ -19,10 +19,11 @@ div(:class="$style.download")
     div.scroll(v-if="list.length" :class="$style.tbody")
       table
         tbody
-          tr(v-for='(item, index) in showList' :key='item.key' @click="handleDoubleClick(index)" :class="playListIndex === index ? $style.active : ''")
+          tr(v-for='(item, index) in showList' :key='item.key' @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
             td.nobreak.center(style="width: 37px;" @click.stop)
               material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
-            td.break(style="width: 28%;") {{item.musicInfo.name}} - {{item.musicInfo.singer}}
+            td.break(style="width: 28%;")
+              span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
             td.break(style="width: 22%;") {{item.progress.progress}}%
             td.break(style="width: 15%;") {{item.statusText}}
             td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
@@ -133,7 +134,9 @@ export default {
       let dl = this.dls[info.key]
       dl ? dl.start() : this.startTask(info)
     },
-    handleDoubleClick(index) {
+    handleDoubleClick(event, index) {
+      if (event.target.classList.contains('select')) return
+
       if (
         window.performance.now() - this.clickTime > 400 ||
         this.clickIndex !== index

src/renderer/views/List.vue

@@ -18,19 +18,21 @@
         table
           tbody
             tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"
-              @click="handleDoubleClick(index)" :class="[isPlayList && playIndex === index ? $style.active : '', (isAPITemp && item.source != 'kw') ? $style.disabled : '']")
+              @click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', (isAPITemp && item.source != 'kw') ? $style.disabled : '']")
               td.nobreak.center(style="width: 37px;" @click.stop)
                   material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
               td.break(style="width: 25%;")
-                | {{item.name}}
+                span.select {{item.name}}
                 span(:class="$style.labelSource" v-if="isShowSource") {{item.source}}
                 //- span.badge.badge-light(v-if="item._types['128k']") 128K
                 //- span.badge.badge-light(v-if="item._types['192k']") 192K
                 //- span.badge.badge-secondary(v-if="item._types['320k']") 320K
                 //- span.badge.badge-theme-info(v-if="item._types.ape") APE
                 //- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
-              td.break(style="width: 20%;") {{item.singer}}
+              td.break(style="width: 20%;")
-              td.break(style="width: 20%;") {{item.albumName}}
+                span.select {{item.singer}}
+              td.break(style="width: 20%;")
+                span.select {{item.albumName}}
               td(style="width: 20%; padding-left: 0; padding-right: 0;")
                 material-list-buttons(:index="index" @btn-click="handleListBtnClick")
                 //- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
@@ -229,7 +231,8 @@ export default {
         })
       })
     },
-    handleDoubleClick(index) {
+    handleDoubleClick(event, index) {
+      if (event.target.classList.contains('select')) return
       if (
         window.performance.now() - this.clickTime > 400 ||
         this.clickIndex !== index

src/renderer/views/Search.vue

@@ -19,16 +19,18 @@
       div.scroll(:class="$style.tbody" ref="dom_scrollContent")
         table
           tbody
-            tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @click="handleDoubleClick(index)")
+            tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @click="handleDoubleClick($event, index)")
               td.nobreak.center(style="width: 37px;" @click.stop)
                 material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
               td.break(style="width: 25%;")
-                | {{item.name}}
+                span.select {{item.name}}
                 span.badge.badge-theme-info(v-if="!(item._types.ape || item._types.flac) && item._types['320k']") 高品质
                 span.badge.badge-theme-success(v-if="item._types.ape || item._types.flac") 无损
                 span(:class="$style.labelSource" v-if="searchSourceId == 'all'") {{item.source}}
-              td.break(style="width: 20%;") {{item.singer}}
+              td.break(style="width: 20%;")
-              td.break(style="width: 25%;") {{item.albumName}}
+                span.select {{item.singer}}
+              td.break(style="width: 25%;")
+                span.select {{item.albumName}}
               td(style="width: 15%; padding-left: 0; padding-right: 0;")
                 material-list-buttons(:index="index" :remove-btn="false" :class="$style.listBtn"
                   :play-btn="item.source == 'kw' || !isAPITemp"
@@ -152,7 +154,8 @@ export default {
         })
       })
     },
-    handleDoubleClick(index) {
+    handleDoubleClick(event, index) {
+      if (event.target.classList.contains('select')) return
       if (
         window.performance.now() - this.clickTime > 400 ||
         this.clickIndex !== index
@@ -279,14 +282,8 @@ export default {
   td {
     font-size: 12px;
     :global(.badge) {
-      margin-right: 3px;
-      &:first-child {
       margin-left: 3px;
     }
-      &:last-child {
-        margin-right: 0;
-      }
-    }
   }
   :global(.badge) {
     opacity: .85;