From cdbedf3d64fedc5319bea7f2e142926d5d81d393 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Sun, 26 Apr 2020 22:06:13 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E5=88=97=E8=A1=A8=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E6=A1=86=EF=BC=8C=E6=96=B0=E5=A2=9E=E9=94=AE=E7=9B=98?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E6=9C=BA=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 5 + package.json | 1 + publish/changeLog.md | 1 + src/main/rendererEvents/index.js | 2 +- src/renderer/App.vue | 2 + src/renderer/assets/styles/index.less | 6 + src/renderer/assets/styles/variables.less | 52 +++--- src/renderer/components/material/SongList.vue | 155 ++++++++++++++--- src/renderer/config/bindkey.js | 46 +++++ src/renderer/main.js | 6 +- src/renderer/views/Download.vue | 142 +++++++++++++--- src/renderer/views/List.vue | 159 ++++++++++++++--- src/renderer/views/Search.vue | 160 +++++++++++++++--- 13 files changed, 608 insertions(+), 129 deletions(-) create mode 100644 src/renderer/config/bindkey.js diff --git a/package-lock.json b/package-lock.json index c1e29012..ef7f5013 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10123,6 +10123,11 @@ "minimist": "^1.2.5" } }, + "mousetrap": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz", + "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", diff --git a/package.json b/package.json index fac2ba22..c2762a71 100644 --- a/package.json +++ b/package.json @@ -211,6 +211,7 @@ "image-size": "^0.8.3", "js-htmlencode": "^0.3.0", "lrc-file-parser": "^1.0.3", + "mousetrap": "^1.6.5", "needle": "^2.4.1", "node-id3": "^0.1.16", "request": "^2.88.2", diff --git a/publish/changeLog.md b/publish/changeLog.md index 2e3016f4..72532c22 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -17,6 +17,7 @@ ### 更变 - 下载列表的歌曲下载、播放将随设置中的保存路径改变而改变，不再固定指向其初始位置 +- 移除列表多选框，现在多选需要键盘配合，想要多选前需按下`Shift`或`Alt`键然后再鼠标点击想要选中的内容即可触发多选机制，其中`Shift`键用于连续选择，`Alt`键用于不连续选择，`Ctrl+a`用于快速全选。例子一：想要选中1-5项，则先按下`Shift`键后，鼠标点击第一项，再点击第五项即可完成选择；例子二：想要选中1项与第3项，则先按下`Alt`键后，鼠标点击第一项，再点击第三项即可完成选择；例子三：想要选中当前列表的全部内容，键盘先按下`Ctrl`键不放，然后按`a`键，即可完成选择。用`Shift`或`Alt`选择时，鼠标点击未选中的内容会将其选中，点击已选择的内容会将其取消选择，若想全部取消选择，在不按`Shift`或`Alt`键的情况下，随意点击列表里的一项内容即可全部取消选择。 ### 修复 diff --git a/src/main/rendererEvents/index.js b/src/main/rendererEvents/index.js index b290ac41..29d12ecf 100644 --- a/src/main/rendererEvents/index.js +++ b/src/main/rendererEvents/index.js @@ -1,5 +1,5 @@ -require('./request') +// require('./request') // require('./appName') require('./progressBar') require('./trafficLight') diff --git a/src/renderer/App.vue b/src/renderer/App.vue index 9cc4d5f5..f4e1107d 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -85,6 +85,7 @@ export default { }, mounted() { document.body.classList.add(this.isNt ? 'noTransparent' : 'transparent') + window.eventHub.$emit('bindKey') this.init() }, watch: { @@ -303,6 +304,7 @@ export default { document.body.removeEventListener('mouseleave', this.enableIgnoreMouseEvents) } document.body.removeEventListener('click', this.handleBodyClick) + window.eventHub.$emit('unbindKey') }, } diff --git a/src/renderer/assets/styles/index.less b/src/renderer/assets/styles/index.less index 11903229..3d50608a 100644 --- a/src/renderer/assets/styles/index.less +++ b/src/renderer/assets/styles/index.less @@ -53,6 +53,9 @@ table { &:hover { background-color: @color-theme_2-hover; } + &.active { + background-color: @color-theme_2-active; + } &:first-child { border-top: none; } @@ -213,6 +216,9 @@ each(@themes, { &:hover { background-color: ~'@{color-@{value}-theme_2-hover}'; } + &.active { + background-color: ~'@{color-@{value}-theme_2-active}'; + } } } } diff --git a/src/renderer/assets/styles/variables.less b/src/renderer/assets/styles/variables.less index 562166f8..fd7e5679 100644 --- a/src/renderer/assets/styles/variables.less +++ b/src/renderer/assets/styles/variables.less @@ -17,8 +17,8 @@ @color-theme_2: rgba(255, 255, 255, .9); @color-theme_2-background_1: #fff; @color-theme_2-background_2: fadeout(@color-theme_2-background_1, 2%); -@color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 70%); -@color-theme_2-active: fadeout(darken(@color-theme, 5%), 70%); +@color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 80%); +@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: lighten(@color-theme, 35%); @@ -78,8 +78,8 @@ @color-green-theme_2: #fff; @color-green-theme_2-background_1: #fff; @color-green-theme_2-background_2: fadeout(@color-green-theme_2-background_1, 2%); -@color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 70%); -@color-green-theme_2-active: fadeout(darken(@color-green-theme, 5%), 70%); +@color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 80%); +@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: lighten(@color-green-theme, 45%); @@ -128,8 +128,8 @@ @color-yellow-theme_2: #fff; @color-yellow-theme_2-background_1: #fff; @color-yellow-theme_2-background_2: fadeout(@color-yellow-theme_2-background_1, 2%); -@color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 60%); -@color-yellow-theme_2-active: fadeout(darken(@color-yellow-theme, 5%), 60%); +@color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%); +@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: lighten(@color-yellow-theme, 28%); @@ -177,8 +177,8 @@ @color-orange-theme_2: #fff; @color-orange-theme_2-background_1: #fff; @color-orange-theme_2-background_2: fadeout(@color-orange-theme_2-background_1, 2%); -@color-orange-theme_2-hover: fadeout(lighten(@color-orange-theme, 10%), 70%); -@color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%); +@color-orange-theme_2-hover: fadeout(lighten(@color-orange-theme, 10%), 80%); +@color-orange-theme_2-active: fadeout(lighten(@color-orange-theme, 10%), 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: lighten(@color-orange-theme, 36%); @@ -226,8 +226,8 @@ @color-blue-theme_2: #fff; @color-blue-theme_2-background_1: #fff; @color-blue-theme_2-background_2: fadeout(@color-blue-theme_2-background_1, 2%); -@color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 70%); -@color-blue-theme_2-active: fadeout(darken(@color-blue-theme, 5%), 70%); +@color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 80%); +@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: lighten(@color-blue-theme, 42%); @@ -273,8 +273,8 @@ @color-red-theme-font: #fff; @color-red-theme-font-label: lighten(@color-red-theme, 35%); @color-red-theme_2: #fff; -@color-red-theme_2-hover: fadeout(lighten(@color-red-theme, 10%), 70%); -@color-red-theme_2-active: fadeout(darken(@color-red-theme, 5%), 70%); +@color-red-theme_2-hover: fadeout(lighten(@color-red-theme, 10%), 80%); +@color-red-theme_2-active: fadeout(lighten(@color-red-theme, 10%), 70%); @color-red-theme_2-background_1: #fff; @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%); @@ -326,8 +326,8 @@ @color-pink-theme_2: #fff; @color-pink-theme_2-background_1: #fff; @color-pink-theme_2-background_2: fadeout(@color-pink-theme_2-background_1, 2%); -@color-pink-theme_2-hover: fadeout(lighten(@color-pink-theme, 10%), 60%); -@color-pink-theme_2-active: fadeout(darken(@color-pink-theme, 5%), 60%); +@color-pink-theme_2-hover: fadeout(lighten(@color-pink-theme, 10%), 75%); +@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: lighten(@color-pink-theme, 25%); @@ -375,8 +375,8 @@ @color-purple-theme_2: #fff; @color-purple-theme_2-background_1: #fff; @color-purple-theme_2-background_2: fadeout(@color-purple-theme_2-background_1, 2%); -@color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 70%); -@color-purple-theme_2-active: fadeout(darken(@color-purple-theme, 5%), 70%); +@color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 80%); +@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: lighten(@color-purple-theme, 43%); @@ -424,8 +424,8 @@ @color-grey-theme_2: #fff; @color-grey-theme_2-background_1: #fff; @color-grey-theme_2-background_2: fadeout(@color-grey-theme_2-background_1, 2%); -@color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 70%); -@color-grey-theme_2-active: fadeout(darken(@color-grey-theme, 5%), 70%); +@color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 80%); +@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: lighten(@color-grey-theme, 47%); @@ -472,8 +472,8 @@ @color-ming-theme-font: #fff; @color-ming-theme-font-label: lighten(@color-ming-theme, 35%); @color-ming-theme_2: #fff; -@color-ming-theme_2-hover: fadeout(lighten(@color-ming-theme, 10%), 75%); -@color-ming-theme_2-active: fadeout(darken(@color-ming-theme, 5%), 70%); +@color-ming-theme_2-hover: fadeout(lighten(@color-ming-theme, 10%), 85%); +@color-ming-theme_2-active: fadeout(lighten(@color-ming-theme, 10%), 75%); @color-ming-theme_2-background_1: #fff; @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%); @@ -525,8 +525,8 @@ @color-mid_autumn-theme_2: rgba(255, 255, 255, .93); @color-mid_autumn-theme_2-background_1: #eeedef; @color-mid_autumn-theme_2-background_2: fadeout(@color-mid_autumn-theme_2-background_1, 2%); -@color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 65%); -@color-mid_autumn-theme_2-active: fadeout(darken(@color-mid_autumn-theme, 5%), 70%); +@color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 15%), 80%); +@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: lighten(@color-mid_autumn-theme, 63%); @@ -574,8 +574,8 @@ @color-naruto-theme_2: rgba(255, 255, 255, 0.8); @color-naruto-theme_2-background_1: #e9faff; @color-naruto-theme_2-background_2: fadeout(@color-naruto-theme_2-background_1, 2%); -@color-naruto-theme_2-hover: fadeout(lighten(@color-naruto-theme, 10%), 65%); -@color-naruto-theme_2-active: fadeout(darken(@color-naruto-theme, 5%), 70%); +@color-naruto-theme_2-hover: fadeout(lighten(@color-naruto-theme, 10%), 75%); +@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: fadeout(lighten(@color-naruto-theme, 36%), 70%); @@ -623,8 +623,8 @@ @color-happy_new_year-theme_2: rgba(255, 199, 199, 0.8); @color-happy_new_year-theme_2-background_1: #f2a4a4; @color-happy_new_year-theme_2-background_2: fadeout(@color-happy_new_year-theme_2-background_1, 2%); -@color-happy_new_year-theme_2-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 55%); -@color-happy_new_year-theme_2-active: fadeout(darken(@color-happy_new_year-theme, 5%), 70%); +@color-happy_new_year-theme_2-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 65%); +@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: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%); diff --git a/src/renderer/components/material/SongList.vue b/src/renderer/components/material/SongList.vue index 2fc35090..6306c9a1 100644 --- a/src/renderer/components/material/SongList.vue +++ b/src/renderer/components/material/SongList.vue @@ -6,9 +6,7 @@ div(:class="$style.songList") table thead tr - th.nobreak.center(style="width: 37px;") - material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData" - :indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? $t('material.song_list.unselect_all') : $t('material.song_list.select_all')") + th.nobreak.center(style="width: 10px;") # th.nobreak(style="width: 25%;") {{$t('material.song_list.name')}} th.nobreak(style="width: 20%;") {{$t('material.song_list.singer')}} th.nobreak(style="width: 20%;") {{$t('material.song_list.album')}} @@ -16,14 +14,13 @@ div(:class="$style.songList") th.nobreak(style="width: 10%;") {{$t('material.song_list.time')}} div.scroll(:class="$style.tbody" ref="dom_scrollContent") table - tbody(@contextmenu="handleContextMenu") + tbody(@contextmenu="handleContextMenu" ref="dom_tbody") 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.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}} td.break(style="width: 25%;") span.select {{item.name}} - span.badge.badge-theme-success(:class="$style.labelQuality" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}} - span.badge.badge-theme-info(:class="$style.labelQuality" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}} + span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}} + span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}} td.break(style="width: 20%;") span.select {{item.singer}} td.break(style="width: 20%;") @@ -38,7 +35,7 @@ div(:class="$style.songList") //- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听 //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋ td(style="width: 10%;") - span(:class="$style.time") {{item.interval || '--/--'}} + span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}} div(:class="$style.pagination") material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage") transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut") @@ -97,29 +94,23 @@ export default { selectdList(n) { const len = n.length if (len) { - this.isSelectAll = true - this.isIndeterminate = len !== this.list.length this.isShowEditBtn = true } else { - this.isSelectAll = false this.isShowEditBtn = false } }, selectdData(n) { const len = n.length if (len) { - this.isSelectAll = true - this.isIndeterminate = len !== this.list.length this.isShowEditBtn = true this.selectdList = [...n] } else { - this.isSelectAll = false this.isShowEditBtn = false - this.resetSelect() + this.removeAllSelect() } }, list(n) { - this.resetSelect() + this.removeAllSelect() if (!this.list.length) return this.$nextTick(() => scrollTo(this.$refs.dom_scrollContent, 0)) }, @@ -128,16 +119,64 @@ export default { return { clickTime: 0, clickIndex: -1, - isSelectAll: false, - isIndeterminate: false, isShowEditBtn: false, selectdList: [], + keyEvent: { + isShiftDown: false, + isAltDown: false, + isADown: false, + }, } }, + created() { + this.listenEvent() + }, + beforeDestroy() { + this.unlistenEvent() + }, methods: { + listenEvent() { + window.eventHub.$on('shift_down', this.handle_shift_down) + window.eventHub.$on('shift_up', this.handle_shift_up) + window.eventHub.$on('alt_down', this.handle_alt_down) + window.eventHub.$on('alt_up', this.handle_alt_up) + window.eventHub.$on('mod+a_down', this.handle_mod_a_down) + window.eventHub.$on('mod+a_up', this.handle_mod_a_up) + }, + unlistenEvent() { + window.eventHub.$off('shift_down', this.handle_shift_down) + window.eventHub.$off('shift_up', this.handle_shift_up) + window.eventHub.$off('alt_down', this.handle_alt_down) + window.eventHub.$off('alt_up', this.handle_alt_up) + window.eventHub.$off('mod+a_down', this.handle_mod_a_down) + window.eventHub.$off('mod+a_up', this.handle_mod_a_up) + }, + handle_shift_down() { + if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true + }, + handle_shift_up() { + if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false + }, + handle_alt_down() { + if (!this.keyEvent.isAltDown) this.keyEvent.isAltDown = true + }, + handle_alt_up() { + if (this.keyEvent.isAltDown) this.keyEvent.isAltDown = false + }, + handle_mod_a_down() { + if (!this.keyEvent.isADown) { + this.keyEvent.isADown = true + this.handleSelectAllData() + } + }, + handle_mod_a_up() { + if (this.keyEvent.isADown) this.keyEvent.isADown = false + }, handleDoubleClick(event, index) { if (event.target.classList.contains('select')) return + this.handleSelectData(event, index) + if ( window.performance.now() - this.clickTime > 400 || this.clickIndex !== index @@ -150,17 +189,65 @@ export default { this.clickTime = 0 this.clickIndex = -1 }, + handleSelectData(event, clickIndex) { + if (this.keyEvent.isShiftDown) { + if (this.selectdList.length) { + let lastSelectIndex = this.list.indexOf(this.selectdList[this.selectdList.length - 1]) + this.removeAllSelect() + if (lastSelectIndex != clickIndex) { + let isNeedReverse = false + if (clickIndex < lastSelectIndex) { + let temp = lastSelectIndex + lastSelectIndex = clickIndex + clickIndex = temp + isNeedReverse = true + } + this.selectdList = this.list.slice(lastSelectIndex, clickIndex + 1) + if (isNeedReverse) this.selectdList.reverse() + let nodes = this.$refs.dom_tbody.childNodes + do { + nodes[lastSelectIndex].classList.add('active') + lastSelectIndex++ + } while (lastSelectIndex <= clickIndex) + } + } else { + event.currentTarget.classList.add('active') + this.selectdList.push(this.list[clickIndex]) + } + } else if (this.keyEvent.isAltDown) { + let item = this.list[clickIndex] + let index = this.selectdList.indexOf(item) + if (index < 0) { + this.selectdList.push(item) + event.currentTarget.classList.add('active') + } else { + this.selectdList.splice(index, 1) + event.currentTarget.classList.remove('active') + } + } else if (this.selectdList.length) this.removeAllSelect() + this.$emit('input', [...this.selectdList]) + }, + removeAllSelect() { + this.selectdList = [] + let dom_tbody = this.$refs.dom_tbody + if (!dom_tbody) return + let nodes = dom_tbody.querySelectorAll('.active') + for (const node of nodes) { + if (node.parentNode == dom_tbody) node.classList.remove('active') + } + }, handleListBtnClick(info) { this.emitEvent('listBtnClick', info) }, - handleSelectAllData(isSelect) { - this.selectdList = isSelect ? [...this.list] : [] + handleSelectAllData() { + this.removeAllSelect() + this.selectdList = [...this.list] + let nodes = this.$refs.dom_tbody.childNodes + for (const node of nodes) { + node.classList.add('active') + } this.$emit('input', [...this.selectdList]) }, - resetSelect() { - this.selectdList = false - this.selectdList = [] - }, handleTogglePage(page) { this.emitEvent('togglePage', page) }, @@ -209,6 +296,10 @@ export default { } .thead { flex: none; + tr > th:first-child { + color: @color-theme_2-font-label; + // padding-left: 10px; + } } .tbody { flex: auto; @@ -218,13 +309,18 @@ export default { :global(.badge) { margin-left: 3px; } + &:first-child { + // padding-left: 10px; + font-size: 11px; + color: @color-theme_2-font-label; + } } :global(.badge) { opacity: .85; } &.copying { - .labelQuality, .time { + .no-select { display: none; } } @@ -254,6 +350,13 @@ export default { each(@themes, { :global(#container.@{value}) { + .tbody { + td { + &:first-child { + color: ~'@{color-@{value}-theme_2-font-label}'; + } + } + } .noitem { p { color: ~'@{color-@{value}-theme_2-font-label}'; diff --git a/src/renderer/config/bindkey.js b/src/renderer/config/bindkey.js new file mode 100644 index 00000000..d7fc01ad --- /dev/null +++ b/src/renderer/config/bindkey.js @@ -0,0 +1,46 @@ +import mousetrap from 'mousetrap' +let eventHub + +const bindKey = () => { + mousetrap.reset() + mousetrap.bind('shift', (event, combo) => { + eventHub.$emit('shift_down', { event, combo }) + return false + }, 'keydown') + mousetrap.bind('shift', (event, combo) => { + eventHub.$emit('shift_up', { event, combo }) + return false + }, 'keyup') + mousetrap.bind('alt', (event, combo) => { + eventHub.$emit('alt_down', { event, combo }) + return false + }, 'keydown') + mousetrap.bind('alt', (event, combo) => { + eventHub.$emit('alt_up', { event, combo }) + return false + }, 'keyup') + mousetrap.bind('mod+a', (event, combo) => { + eventHub.$emit('mod+a_down', { event, combo }) + return false + }, 'keydown') + mousetrap.bind('mod+a', (event, combo) => { + eventHub.$emit('mod+a_up', { event, combo }) + return false + }, 'keyup') +} + +const unbindKey = () => { + mousetrap.unbind('shift', 'keydown') + mousetrap.unbind('shift', 'keyup') + mousetrap.unbind('alt', 'keydown') + mousetrap.unbind('alt', 'keyup') + mousetrap.unbind('mod+a', 'keydown') + mousetrap.unbind('mod+a', 'keyup') +} + +export default () => { + eventHub = window.eventHub + + eventHub.$on('bindKey', bindKey) + eventHub.$on('unbindKey', unbindKey) +} diff --git a/src/renderer/main.js b/src/renderer/main.js index 537ff459..bfc2085f 100644 --- a/src/renderer/main.js +++ b/src/renderer/main.js @@ -14,11 +14,13 @@ import store from './store' import '../common/error' +import bindkey from './config/bindkey' + sync(store, router) -// if (!process.env.IS_WEB) { +window.eventHub = new Vue() -// } +bindkey() Vue.config.productionTip = false diff --git a/src/renderer/views/Download.vue b/src/renderer/views/Download.vue index f1f73741..36275089 100644 --- a/src/renderer/views/Download.vue +++ b/src/renderer/views/Download.vue @@ -8,9 +8,7 @@ div(:class="$style.download") table thead tr - th.nobreak.center(style="width: 37px;") - material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData" - :indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? $t('view.download.unselect_all') : $t('view.download.select_all')") + th.nobreak.center(style="width: 10px;") # th.nobreak(style="width: 28%;") {{$t('view.download.name')}} th.nobreak(style="width: 22%;") {{$t('view.download.progress')}} th.nobreak(style="width: 15%;") {{$t('view.download.status')}} @@ -18,10 +16,9 @@ div(:class="$style.download") th.nobreak(style="width: 20%;") {{$t('view.download.action')}} div.scroll(v-if="list.length" :class="$style.tbody") table - tbody + tbody(ref="dom_tbody") 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.nobreak.center(style="width: 37px;" @click.stop) {{index + 1}} td.break(style="width: 28%;") span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}} td.break(style="width: 22%;") {{item.progress.progress}}% @@ -48,8 +45,6 @@ export default { clickTime: window.performance.now(), clickIndex: -1, selectdData: [], - isSelectAll: false, - isIndeterminate: false, isShowEditBtn: false, isShowDownloadMultiple: false, tabs: [ @@ -75,6 +70,11 @@ export default { }, ], tabId: 'all', + keyEvent: { + isShiftDown: false, + isAltDown: false, + isADown: false, + }, } }, computed: { @@ -110,22 +110,62 @@ export default { selectdData(n) { const len = n.length if (len) { - this.isSelectAll = true - this.isIndeterminate = len !== this.showList.length this.isShowEditBtn = true } else { - this.isSelectAll = false this.isShowEditBtn = false } }, list() { - this.resetSelect() + this.removeAllSelect() }, }, + created() { + this.listenEvent() + }, + beforeDestroy() { + this.unlistenEvent() + }, methods: { ...mapActions('download', ['removeTask', 'removeTaskMultiple', 'startTask']), ...mapMutations('player', ['setList']), ...mapMutations('download', ['pauseTask', 'updateFilePath']), + listenEvent() { + window.eventHub.$on('shift_down', this.handle_shift_down) + window.eventHub.$on('shift_up', this.handle_shift_up) + window.eventHub.$on('alt_down', this.handle_alt_down) + window.eventHub.$on('alt_up', this.handle_alt_up) + window.eventHub.$on('mod+a_down', this.handle_mod_a_down) + window.eventHub.$on('mod+a_up', this.handle_mod_a_up) + }, + unlistenEvent() { + window.eventHub.$off('shift_down', this.handle_shift_down) + window.eventHub.$off('shift_up', this.handle_shift_up) + window.eventHub.$off('alt_down', this.handle_alt_down) + window.eventHub.$off('alt_up', this.handle_alt_up) + window.eventHub.$off('mod+a_down', this.handle_mod_a_down) + window.eventHub.$off('mod+a_up', this.handle_mod_a_up) + }, + handle_shift_down() { + if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true + }, + handle_shift_up() { + if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false + }, + handle_alt_down() { + if (!this.keyEvent.isAltDown) this.keyEvent.isAltDown = true + }, + handle_alt_up() { + if (this.keyEvent.isAltDown) this.keyEvent.isAltDown = false + }, + handle_mod_a_down() { + if (!this.keyEvent.isADown) { + this.keyEvent.isADown = true + this.handleSelectAllData() + } + }, + handle_mod_a_up() { + if (this.keyEvent.isADown) this.keyEvent.isADown = false + }, handlePauseTask(index) { let info = this.list[index] let dl = this.dls[info.key] @@ -150,6 +190,8 @@ export default { handleDoubleClick(event, index) { if (event.target.classList.contains('select')) return + this.handleSelectData(event, index) + if ( window.performance.now() - this.clickTime > 400 || this.clickIndex !== index @@ -162,6 +204,52 @@ export default { this.clickTime = 0 this.clickIndex = -1 }, + handleSelectData(event, clickIndex) { + if (this.keyEvent.isShiftDown) { + if (this.selectdData.length) { + let lastSelectIndex = this.showList.indexOf(this.selectdData[this.selectdData.length - 1]) + this.removeAllSelect() + if (lastSelectIndex != clickIndex) { + let isNeedReverse = false + if (clickIndex < lastSelectIndex) { + let temp = lastSelectIndex + lastSelectIndex = clickIndex + clickIndex = temp + isNeedReverse = true + } + this.selectdData = this.showList.slice(lastSelectIndex, clickIndex + 1) + if (isNeedReverse) this.selectdData.reverse() + let nodes = this.$refs.dom_tbody.childNodes + do { + nodes[lastSelectIndex].classList.add('active') + lastSelectIndex++ + } while (lastSelectIndex <= clickIndex) + } + } else { + event.currentTarget.classList.add('active') + this.selectdData.push(this.showList[clickIndex]) + } + } else if (this.keyEvent.isAltDown) { + let item = this.showList[clickIndex] + let index = this.selectdData.indexOf(item) + if (index < 0) { + this.selectdData.push(item) + event.currentTarget.classList.add('active') + } else { + this.selectdData.splice(index, 1) + event.currentTarget.classList.remove('active') + } + } else if (this.selectdData.length) this.removeAllSelect() + }, + removeAllSelect() { + this.selectdData = [] + let dom_tbody = this.$refs.dom_tbody + if (!dom_tbody) return + let nodes = dom_tbody.querySelectorAll('.active') + for (const node of nodes) { + if (node.parentNode == dom_tbody) node.classList.remove('active') + } + }, handleClick(index) { const key = this.showList[index].key index = this.list.findIndex(i => i.key === key) @@ -203,12 +291,14 @@ export default { break } }, - handleSelectAllData(isSelect) { - this.selectdData = isSelect ? [...this.showList] : [] - }, - resetSelect() { - this.isSelectAll = false - this.selectdData = [] + handleSelectAllData() { + this.removeAllSelect() + this.selectdData = [...this.showList] + + let nodes = this.$refs.dom_tbody.childNodes + for (const node of nodes) { + node.classList.add('active') + } }, handleFlowBtnClick(action) { switch (action) { @@ -241,7 +331,7 @@ export default { this.removeTaskMultiple(this.selectdData) break } - this.resetSelect() + this.removeAllSelect() }, handleOpenFolder(index) { let path = this.list[index].filePath @@ -300,12 +390,21 @@ export default { } .thead { flex: none; + tr > th:first-child { + color: @color-theme_2-font-label; + // padding-left: 10px; + } } .tbody { flex: auto; overflow-y: auto; td { font-size: 12px; + &:first-child { + // padding-left: 10px; + font-size: 11px; + color: @color-theme_2-font-label; + } } tr { &.active { @@ -322,6 +421,11 @@ each(@themes, { color: ~'@{color-@{value}-theme}'; } } + td { + &:first-child { + color: ~'@{color-@{value}-theme_2-font-label}'; + } + } } } }) diff --git a/src/renderer/views/List.vue b/src/renderer/views/List.vue index 54849eb7..83bb39b6 100644 --- a/src/renderer/views/List.vue +++ b/src/renderer/views/List.vue @@ -6,9 +6,7 @@ table thead tr - th.nobreak.center(style="width: 37px;") - material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData" - :indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? $t('view.list.unselect_all') : $t('view.list.select_all')") + th.nobreak.center(style="width: 10px;") # th.nobreak(style="width: 25%;") {{$t('view.list.name')}} th.nobreak(style="width: 20%;") {{$t('view.list.singer')}} th.nobreak(style="width: 20%;") {{$t('view.list.album')}} @@ -16,14 +14,13 @@ th.nobreak(style="width: 10%;") {{$t('view.list.time')}} div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent") table - tbody(@contextmenu="handleContextMenu") + tbody(@contextmenu="handleContextMenu" ref="dom_tbody") tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid" @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.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}} td.break(style="width: 25%;") span.select {{item.name}} - span(:class="$style.labelSource" v-if="isShowSource") {{item.source}} + span(:class="[$style.labelSource, $style.noSelect]" 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 @@ -40,7 +37,7 @@ //- button.btn-secondary(type='button' @click.stop='handleRemove(index)') 删除 //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋ td(style="width: 10%;") - span(:class="$style.time") {{item.interval || '--/--'}} + span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}} div(:class="$style.noItem" v-else) p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')") material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false") @@ -63,8 +60,6 @@ export default { isShowDownload: false, musicInfo: null, selectdData: [], - isSelectAll: false, - isIndeterminate: false, isShowEditBtn: false, isShowDownloadMultiple: false, delayShow: false, @@ -73,6 +68,11 @@ export default { isShowListAddMultiple: false, delayTimeout: null, isToggleList: true, + keyEvent: { + isShiftDown: false, + isAltDown: false, + isADown: false, + }, } }, computed: { @@ -118,16 +118,13 @@ export default { selectdData(n) { const len = n.length if (len) { - this.isSelectAll = true - this.isIndeterminate = len !== this.list.length this.isShowEditBtn = true } else { - this.isSelectAll = false this.isShowEditBtn = false } }, list() { - this.resetSelect() + this.removeAllSelect() }, '$route.query.scrollIndex'(n) { if (n == null || this.isToggleList) return @@ -178,10 +175,14 @@ export default { this.setListScroll({ id: this.listId, location: e.target.scrollTop }) } }, 1000) + this.listenEvent() }, mounted() { this.handleDelayShow() }, + beforeDestroy() { + this.unlistenEvent() + }, methods: { ...mapMutations(['setListScroll']), ...mapMutations('list', ['listRemove', 'listRemoveMultiple']), @@ -189,6 +190,43 @@ export default { ...mapMutations('player', { setPlayList: 'setList', }), + listenEvent() { + window.eventHub.$on('shift_down', this.handle_shift_down) + window.eventHub.$on('shift_up', this.handle_shift_up) + window.eventHub.$on('alt_down', this.handle_alt_down) + window.eventHub.$on('alt_up', this.handle_alt_up) + window.eventHub.$on('mod+a_down', this.handle_mod_a_down) + window.eventHub.$on('mod+a_up', this.handle_mod_a_up) + }, + unlistenEvent() { + window.eventHub.$off('shift_down', this.handle_shift_down) + window.eventHub.$off('shift_up', this.handle_shift_up) + window.eventHub.$off('alt_down', this.handle_alt_down) + window.eventHub.$off('alt_up', this.handle_alt_up) + window.eventHub.$off('mod+a_down', this.handle_mod_a_down) + window.eventHub.$off('mod+a_up', this.handle_mod_a_up) + }, + handle_shift_down() { + if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true + }, + handle_shift_up() { + if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false + }, + handle_alt_down() { + if (!this.keyEvent.isAltDown) this.keyEvent.isAltDown = true + }, + handle_alt_up() { + if (this.keyEvent.isAltDown) this.keyEvent.isAltDown = false + }, + handle_mod_a_down() { + if (!this.keyEvent.isADown) { + this.keyEvent.isADown = true + this.handleSelectAllData() + } + }, + handle_mod_a_up() { + if (this.keyEvent.isADown) this.keyEvent.isADown = false + }, handleDelayShow() { this.clearDelayTimeout() if (this.list.length > 150) { @@ -234,6 +272,9 @@ export default { }, handleDoubleClick(event, index) { if (event.target.classList.contains('select')) return + + this.handleSelectData(event, index) + if ( window.performance.now() - this.clickTime > 400 || this.clickIndex !== index @@ -246,6 +287,51 @@ export default { this.clickTime = 0 this.clickIndex = -1 }, + handleSelectData(event, clickIndex) { + if (this.keyEvent.isShiftDown) { + if (this.selectdData.length) { + let lastSelectIndex = this.list.indexOf(this.selectdData[this.selectdData.length - 1]) + if (lastSelectIndex == clickIndex) return this.removeAllSelect() + this.removeAllSelect() + let isNeedReverse = false + if (clickIndex < lastSelectIndex) { + let temp = lastSelectIndex + lastSelectIndex = clickIndex + clickIndex = temp + isNeedReverse = true + } + this.selectdData = this.list.slice(lastSelectIndex, clickIndex + 1) + if (isNeedReverse) this.selectdData.reverse() + let nodes = this.$refs.dom_tbody.childNodes + do { + nodes[lastSelectIndex].classList.add('active') + lastSelectIndex++ + } while (lastSelectIndex <= clickIndex) + } else { + event.currentTarget.classList.add('active') + this.selectdData.push(this.list[clickIndex]) + } + } else if (this.keyEvent.isAltDown) { + let item = this.list[clickIndex] + let index = this.selectdData.indexOf(item) + if (index < 0) { + this.selectdData.push(item) + event.currentTarget.classList.add('active') + } else { + this.selectdData.splice(index, 1) + event.currentTarget.classList.remove('active') + } + } else if (this.selectdData.length) this.removeAllSelect() + }, + removeAllSelect() { + this.selectdData = [] + let dom_tbody = this.$refs.dom_tbody + if (!dom_tbody) return + let nodes = dom_tbody.querySelectorAll('.active') + for (const node of nodes) { + if (node.parentNode == dom_tbody) node.classList.remove('active') + } + }, testPlay(index) { if (this.isAPITemp && this.list[index].source != 'kw') return this.setPlayList({ list: this.list, listId: this.listId, index }) @@ -282,18 +368,19 @@ export default { this.createDownload({ musicInfo: this.musicInfo, type }) this.isShowDownload = false }, - handleSelectAllData(isSelect) { - this.selectdData = isSelect ? [...this.list] : [] + handleSelectAllData() { + this.removeAllSelect() + this.selectdData = [...this.list] + let nodes = this.$refs.dom_tbody.childNodes + for (const node of nodes) { + node.classList.add('active') + } // asyncSetArray(this.selectdData, isSelect ? [...this.list] : []) }, - resetSelect() { - this.isSelectAll = false - this.selectdData = [] - }, handleAddDownloadMultiple(type) { const list = this.setting.apiSource == 'temp' ? this.selectdData.filter(s => s.source == 'kw') : [...this.selectdData] this.createDownloadMultiple({ list, type }) - this.resetSelect() + this.removeAllSelect() this.isShowDownloadMultiple = false }, handleFlowBtnClick(action) { @@ -303,15 +390,15 @@ export default { break case 'remove': this.listRemoveMultiple({ id: this.listId, list: this.selectdData }) - this.resetSelect() + this.removeAllSelect() break case 'add': this.isShowListAddMultiple = true break } }, - handleListAddModalClose(isSelect) { - if (isSelect) this.resetSelect() + handleListAddModalClose(isClearSelect) { + if (isClearSelect) this.removeAllSelect() this.isShowListAddMultiple = false }, getMusicLocation(index) { @@ -365,21 +452,32 @@ export default { } .thead { flex: none; + tr > th:first-child { + color: @color-theme_2-font-label; + // padding-left: 10px; + } } .tbody { flex: auto; overflow-y: auto; - td { - font-size: 12px; - } + tr { &.active { color: @color-theme; } } + td { + font-size: 12px; + + &:first-child { + // padding-left: 10px; + font-size: 11px; + color: @color-theme_2-font-label; + } + } &.copying { - .labelSource, .time { + .no-select { display: none; } } @@ -419,6 +517,11 @@ each(@themes, { color: ~'@{color-@{value}-theme}'; } } + td { + &:first-child { + color: ~'@{color-@{value}-theme_2-font-label}'; + } + } } .labelSource { color: ~'@{color-@{value}-theme}'; diff --git a/src/renderer/views/Search.vue b/src/renderer/views/Search.vue index 2826b6fc..6a8dd705 100644 --- a/src/renderer/views/Search.vue +++ b/src/renderer/views/Search.vue @@ -8,9 +8,7 @@ table thead tr - th.nobreak.center(style="width: 37px;") - material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData" - :indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? $t('view.search.unselect_all') : $t('view.search.select_all')") + th.nobreak.center(style="width: 10px;") # th.nobreak(style="width: 25%;") {{$t('view.search.name')}} th.nobreak(style="width: 20%;") {{$t('view.search.singer')}} th.nobreak(style="width: 25%;") {{$t('view.search.album')}} @@ -18,15 +16,14 @@ th.nobreak(style="width: 10%;") {{$t('view.search.time')}} div.scroll(:class="$style.tbody" ref="dom_scrollContent") table - tbody(@contextmenu="handleContextMenu") + tbody(@contextmenu="handleContextMenu" ref="dom_tbody") 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.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}} td.break(style="width: 25%;") span.select {{item.name}} - span.badge.badge-theme-success(:class="$style.labelQuality" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}} - span.badge.badge-theme-info(:class="$style.labelQuality" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}} - span(:class="$style.labelSource" v-if="searchSourceId == 'all'") {{item.source}} + span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}} + span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}} + span(:class="[$style.labelSource, $style.noSelect]" v-if="searchSourceId == 'all'") {{item.source}} td.break(style="width: 20%;") span.select {{item.singer}} td.break(style="width: 25%;") @@ -37,7 +34,7 @@ :download-btn="item.source == 'kw' || !isAPITemp" @btn-click="handleListBtnClick") td(style="width: 10%;") - span(:class="$style.time") {{item.interval || '--/--'}} + span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}} div(:class="$style.pagination") material-pagination(:count="listInfo.total" :limit="listInfo.limit" :page="page" @btn-click="handleTogglePage") div(v-else :class="$style.noitem") @@ -76,13 +73,16 @@ export default { isShowDownload: false, musicInfo: null, selectdData: [], - isSelectAll: false, - isIndeterminate: false, isShowEditBtn: false, isShowDownloadMultiple: false, searchSourceId: null, isShowListAdd: false, isShowListAddMultiple: false, + keyEvent: { + isShiftDown: false, + isAltDown: false, + isADown: false, + }, } }, beforeRouteUpdate(to, from, next) { @@ -92,6 +92,12 @@ export default { this.handleSearch(this.text, this.page) next() }, + created() { + this.listenEvent() + }, + beforeDestroy() { + this.unlistenEvent() + }, mounted() { // console.log('mounted') @@ -118,16 +124,13 @@ export default { selectdData(n) { const len = n.length if (len) { - this.isSelectAll = true - this.isIndeterminate = len !== this.listInfo.list.length this.isShowEditBtn = true } else { - this.isSelectAll = false this.isShowEditBtn = false } }, 'listInfo.list'() { - this.resetSelect() + this.removeAllSelect() }, searchSourceId(n) { if (n === this.setting.search.searchSource) return @@ -165,6 +168,43 @@ export default { ...mapActions('hotSearch', { getHotSearch: 'getList', }), + listenEvent() { + window.eventHub.$on('shift_down', this.handle_shift_down) + window.eventHub.$on('shift_up', this.handle_shift_up) + window.eventHub.$on('alt_down', this.handle_alt_down) + window.eventHub.$on('alt_up', this.handle_alt_up) + window.eventHub.$on('mod+a_down', this.handle_mod_a_down) + window.eventHub.$on('mod+a_up', this.handle_mod_a_up) + }, + unlistenEvent() { + window.eventHub.$off('shift_down', this.handle_shift_down) + window.eventHub.$off('shift_up', this.handle_shift_up) + window.eventHub.$off('alt_down', this.handle_alt_down) + window.eventHub.$off('alt_up', this.handle_alt_up) + window.eventHub.$off('mod+a_down', this.handle_mod_a_down) + window.eventHub.$off('mod+a_up', this.handle_mod_a_up) + }, + handle_shift_down() { + if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true + }, + handle_shift_up() { + if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false + }, + handle_alt_down() { + if (!this.keyEvent.isAltDown) this.keyEvent.isAltDown = true + }, + handle_alt_up() { + if (this.keyEvent.isAltDown) this.keyEvent.isAltDown = false + }, + handle_mod_a_down() { + if (!this.keyEvent.isADown) { + this.keyEvent.isADown = true + this.handleSelectAllData() + } + }, + handle_mod_a_up() { + if (this.keyEvent.isADown) this.keyEvent.isADown = false + }, handleSearch(text, page) { if (text === '') return this.clearList() @@ -177,6 +217,9 @@ export default { }, handleDoubleClick(event, index) { if (event.target.classList.contains('select')) return + + this.handleSelectData(event, index) + if ( window.performance.now() - this.clickTime > 400 || this.clickIndex !== index @@ -208,6 +251,52 @@ export default { break } }, + handleSelectData(event, clickIndex) { + if (this.keyEvent.isShiftDown) { + if (this.selectdData.length) { + let lastSelectIndex = this.listInfo.list.indexOf(this.selectdData[this.selectdData.length - 1]) + this.removeAllSelect() + if (lastSelectIndex != clickIndex) { + let isNeedReverse = false + if (clickIndex < lastSelectIndex) { + let temp = lastSelectIndex + lastSelectIndex = clickIndex + clickIndex = temp + isNeedReverse = true + } + this.selectdData = this.listInfo.list.slice(lastSelectIndex, clickIndex + 1) + if (isNeedReverse) this.selectdData.reverse() + let nodes = this.$refs.dom_tbody.childNodes + do { + nodes[lastSelectIndex].classList.add('active') + lastSelectIndex++ + } while (lastSelectIndex <= clickIndex) + } + } else { + event.currentTarget.classList.add('active') + this.selectdData.push(this.listInfo.list[clickIndex]) + } + } else if (this.keyEvent.isAltDown) { + let item = this.listInfo.list[clickIndex] + let index = this.selectdData.indexOf(item) + if (index < 0) { + this.selectdData.push(item) + event.currentTarget.classList.add('active') + } else { + this.selectdData.splice(index, 1) + event.currentTarget.classList.remove('active') + } + } else if (this.selectdData.length) this.removeAllSelect() + }, + removeAllSelect() { + this.selectdData = [] + let dom_tbody = this.$refs.dom_tbody + if (!dom_tbody) return + let nodes = dom_tbody.querySelectorAll('.active') + for (const node of nodes) { + if (node.parentNode == dom_tbody) node.classList.remove('active') + } + }, testPlay(index) { let targetSong if (index == null) { @@ -238,15 +327,16 @@ export default { }, handleAddDownloadMultiple(type) { this.createDownloadMultiple({ list: this.filterList(this.selectdData), type }) - this.resetSelect() + this.removeAllSelect() this.isShowDownloadMultiple = false }, - handleSelectAllData(isSelect) { - this.selectdData = isSelect ? [...this.listInfo.list] : [] - }, - resetSelect() { - this.isSelectAll = false - this.selectdData = [] + handleSelectAllData() { + this.removeAllSelect() + this.selectdData = [...this.listInfo.list] + let nodes = this.$refs.dom_tbody.childNodes + for (const node of nodes) { + node.classList.add('active') + } }, handleFlowBtnClick(action) { switch (action) { @@ -255,7 +345,7 @@ export default { break case 'play': this.testPlay() - this.resetSelect() + this.removeAllSelect() break case 'add': this.isShowListAddMultiple = true @@ -265,8 +355,8 @@ export default { filterList(list) { return this.setting.apiSource == 'temp' ? list.filter(s => s.source == 'kw') : [...list] }, - handleListAddModalClose(isSelect) { - if (isSelect) this.resetSelect() + handleListAddModalClose(isClearSelect) { + if (isClearSelect) this.removeAllSelect() this.isShowListAddMultiple = false }, handleContextMenu(event) { @@ -320,6 +410,10 @@ export default { } .thead { flex: none; + tr > th:first-child { + color: @color-theme_2-font-label; + // padding-left: 10px; + } } .tbody { flex: auto; @@ -329,13 +423,18 @@ export default { :global(.badge) { margin-left: 3px; } + &:first-child { + // padding-left: 10px; + font-size: 11px; + color: @color-theme_2-font-label; + } } :global(.badge) { opacity: .85; } &.copying { - .labelQuality, .labelSource, .time { + .no-select { display: none; } } @@ -446,6 +545,13 @@ each(@themes, { background-color: ~'@{color-@{value}-theme_2-active}'; } } + .tbody { + td { + &:first-child { + color: ~'@{color-@{value}-theme_2-font-label}'; + } + } + } .history-clear-btn { color: ~'@{color-@{value}-theme_2-font-label}'; &:hover {