github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

完善自定义列表、新增右键菜单

pull/277/head
lyswhut 2020-05-20 22:52:37 +08:00
parent 88b416c949
commit 0332b81d58
39 changed files with 1175 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
publish/changeLog.md
View File

@ -1,14 +1,14 @@
### 新增 ### 新增
- 新增`rpm`、`pacman`包的打包 - 新增`rpm`、`pacman`包的构建
- 新增当前音频输出设备改变时是否暂停播放的设置，默认关闭 - 新增当前音频输出设备改变时是否暂停播放的设置，默认关闭
- 新增自定义列表，创建列表的按钮在表头`#`左侧，鼠标移上去才会显示；编辑列表名字时，按`ESC`键可取消编辑，按回车键或使输入框失去焦点即可保存列表名字 - 新增歌曲列表右键菜单
- 新增自定义列表，创建列表的按钮在表头`#`左侧，鼠标移上去才会显示；编辑列表名字时，按`ESC`键可快速取消编辑，按回车键或使输入框失去焦点即可保存列表名字，右击列表可编辑已创建的列表，“试听列表”与“我的收藏”两个列表固定不可编辑
### 优化 ### 优化
- 优化浮动按钮与布局颜色
- 改进歌曲切换时的歌词滚动效果 - 改进歌曲切换时的歌词滚动效果
- 极大优化批量添加、删除播放列表的歌曲操作流畅度 - 优化批量添加、删除播放列表的歌曲操作逻辑，大幅提升流畅度
### 修复 ### 修复
@ -21,3 +21,4 @@
### 更变 ### 更变
- 修改设置-列表-是否显示歌曲源的默认设置为选中（该变更不影响之前的设置） - 修改设置-列表-是否显示歌曲源的默认设置为选中（该变更不影响之前的设置）
- 移除浮动按钮，现在在多选完成后可鼠标右击随意一项在弹出的右键菜单中进行原来悬浮按钮的操作

10
src/common/config.js
View File

@ -17,35 +17,35 @@ module.exports = {
{ {
id: 2, id: 2,
name: 'medium', name: 'medium',
width: 1012, width: 1018,
height: 650, height: 650,
fontSize: '16px', fontSize: '16px',
}, },
{ {
id: 3, id: 3,
name: 'big', name: 'big',
width: 1104, width: 1114,
height: 708, height: 708,
fontSize: '17px', fontSize: '17px',
}, },
{ {
id: 4, id: 4,
name: 'larger', name: 'larger',
width: 1198, width: 1202,
height: 766, height: 766,
fontSize: '17px', fontSize: '17px',
}, },
{ {
id: 5, id: 5,
name: 'oversized', name: 'oversized',
width: 1380, width: 1382,
height: 886, height: 886,
fontSize: '18px', fontSize: '18px',
}, },
{ {
id: 6, id: 6,
name: 'huge', name: 'huge',
width: 1656, width: 1686,
height: 1062, height: 1062,
fontSize: '19px', fontSize: '19px',
}, },

6
src/renderer/assets/styles/index.less
View File

@ -57,6 +57,9 @@ table {
&.active { &.active {
background-color: @color-theme_2-active; background-color: @color-theme_2-active;
} }
&.selected {
background-color: @color-theme_2-hover;
}
td { td {
padding: 6px; padding: 6px;
position: relative; position: relative;
@ -217,6 +220,9 @@ each(@themes, {
&.active { &.active {
background-color: ~'@{color-@{value}-theme_2-active}'; background-color: ~'@{color-@{value}-theme_2-active}';
} }
&.selected {
background-color: ~'@{color-@{value}-theme_2-hover}';
}
} }
} }
} }

41
src/renderer/assets/styles/variables.less
View File

@ -25,6 +25,9 @@
@color-theme-sidebar: @color-theme; @color-theme-sidebar: @color-theme;
@color-btn: lighten(@color-theme, 5%); @color-btn: lighten(@color-theme, 5%);
@color-btn-background: fadeout(lighten(@color-theme, 35%), 70%); @color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
@color-btn-hover: fadeout(lighten(@color-theme, 5%), 70%);
@color-btn-active: fadeout(darken(@color-theme, 5%), 70%);
@color-btn-select: fadeout(lighten(@color-theme, 5%), 50%);
@color-pagination-background: fadeout(lighten(@color-theme, 45%), 30%); @color-pagination-background: fadeout(lighten(@color-theme, 45%), 30%);
@color-pagination-hover: fadeout(lighten(@color-theme, 10%), 70%); @color-pagination-hover: fadeout(lighten(@color-theme, 10%), 70%);
@ -89,6 +92,9 @@
@color-green-theme-sidebar: @color-green-theme; @color-green-theme-sidebar: @color-green-theme;
@color-green-btn: lighten(@color-green-theme, 5%); @color-green-btn: lighten(@color-green-theme, 5%);
@color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%); @color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
@color-green-btn-hover: fadeout(lighten(@color-green-theme, 5%), 70%);
@color-green-btn-active: fadeout(darken(@color-green-theme, 5%), 70%);
@color-green-btn-select: fadeout(lighten(@color-green-theme, 5%), 50%);
@color-green-pagination-background: fadeout(lighten(@color-green-theme, 45%), 30%); @color-green-pagination-background: fadeout(lighten(@color-green-theme, 45%), 30%);
@color-green-pagination-hover: fadeout(lighten(@color-green-theme, 10%), 70%); @color-green-pagination-hover: fadeout(lighten(@color-green-theme, 10%), 70%);
@color-green-pagination-active: fadeout(darken(@color-green-theme, 10%), 70%); @color-green-pagination-active: fadeout(darken(@color-green-theme, 10%), 70%);
@ -142,6 +148,9 @@
@color-yellow-theme-sidebar: @color-yellow-theme; @color-yellow-theme-sidebar: @color-yellow-theme;
@color-yellow-btn: darken(@color-yellow-theme, 5%); @color-yellow-btn: darken(@color-yellow-theme, 5%);
@color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%); @color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%);
@color-yellow-btn-hover: fadeout(lighten(@color-yellow-theme, 5%), 70%);
@color-yellow-btn-active: fadeout(darken(@color-yellow-theme, 5%), 70%);
@color-yellow-btn-select: fadeout(lighten(@color-yellow-theme, 5%), 50%);
@color-yellow-pagination-background: fadeout(lighten(@color-yellow-theme, 30%), 30%); @color-yellow-pagination-background: fadeout(lighten(@color-yellow-theme, 30%), 30%);
@color-yellow-pagination-hover: fadeout(lighten(@color-yellow-theme, 5%), 70%); @color-yellow-pagination-hover: fadeout(lighten(@color-yellow-theme, 5%), 70%);
@color-yellow-pagination-active: fadeout(darken(@color-yellow-theme, 5%), 70%); @color-yellow-pagination-active: fadeout(darken(@color-yellow-theme, 5%), 70%);
@ -194,6 +203,9 @@
@color-orange-theme-sidebar: @color-orange-theme; @color-orange-theme-sidebar: @color-orange-theme;
@color-orange-btn: lighten(@color-orange-theme, 5%); @color-orange-btn: lighten(@color-orange-theme, 5%);
@color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%); @color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%);
@color-orange-btn-hover: fadeout(lighten(@color-orange-theme, 5%), 70%);
@color-orange-btn-active: fadeout(darken(@color-orange-theme, 5%), 70%);
@color-orange-btn-select: fadeout(lighten(@color-orange-theme, 5%), 50%);
@color-orange-pagination-background: fadeout(lighten(@color-orange-theme, 25%), 40%); @color-orange-pagination-background: fadeout(lighten(@color-orange-theme, 25%), 40%);
@color-orange-pagination-hover: fadeout(lighten(@color-orange-theme, 10%), 70%); @color-orange-pagination-hover: fadeout(lighten(@color-orange-theme, 10%), 70%);
@color-orange-pagination-active: fadeout(darken(@color-orange-theme, 10%), 70%); @color-orange-pagination-active: fadeout(darken(@color-orange-theme, 10%), 70%);
@ -246,6 +258,9 @@
@color-blue-theme-sidebar: @color-blue-theme; @color-blue-theme-sidebar: @color-blue-theme;
@color-blue-btn: lighten(@color-blue-theme, 5%); @color-blue-btn: lighten(@color-blue-theme, 5%);
@color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%); @color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%);
@color-blue-btn-hover: fadeout(lighten(@color-blue-theme, 5%), 70%);
@color-blue-btn-active: fadeout(darken(@color-blue-theme, 5%), 70%);
@color-blue-btn-select: fadeout(lighten(@color-blue-theme, 5%), 50%);
@color-blue-pagination-background: fadeout(lighten(@color-blue-theme, 40%), 30%); @color-blue-pagination-background: fadeout(lighten(@color-blue-theme, 40%), 30%);
@color-blue-pagination-hover: fadeout(lighten(@color-blue-theme, 15%), 70%); @color-blue-pagination-hover: fadeout(lighten(@color-blue-theme, 15%), 70%);
@color-blue-pagination-active: fadeout(darken(@color-blue-theme, 15%), 70%); @color-blue-pagination-active: fadeout(darken(@color-blue-theme, 15%), 70%);
@ -298,6 +313,9 @@
@color-red-theme-sidebar: @color-red-theme; @color-red-theme-sidebar: @color-red-theme;
@color-red-btn: lighten(@color-red-theme, 5%); @color-red-btn: lighten(@color-red-theme, 5%);
@color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%); @color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
@color-red-btn-hover: fadeout(lighten(@color-red-theme, 5%), 70%);
@color-red-btn-active: fadeout(darken(@color-red-theme, 5%), 70%);
@color-red-btn-select: fadeout(lighten(@color-red-theme, 5%), 50%);
@color-red-pagination-background: fadeout(lighten(@color-red-theme, 40%), 30%); @color-red-pagination-background: fadeout(lighten(@color-red-theme, 40%), 30%);
@color-red-pagination-hover: fadeout(lighten(@color-red-theme, 15%), 70%); @color-red-pagination-hover: fadeout(lighten(@color-red-theme, 15%), 70%);
@color-red-pagination-active: fadeout(darken(@color-red-theme, 15%), 70%); @color-red-pagination-active: fadeout(darken(@color-red-theme, 15%), 70%);
@ -352,6 +370,9 @@
@color-pink-theme-sidebar: @color-pink-theme; @color-pink-theme-sidebar: @color-pink-theme;
@color-pink-btn: darken(@color-pink-theme, 3%); @color-pink-btn: darken(@color-pink-theme, 3%);
@color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%); @color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%);
@color-pink-btn-hover: fadeout(lighten(@color-pink-theme, 5%), 70%);
@color-pink-btn-active: fadeout(darken(@color-pink-theme, 5%), 70%);
@color-pink-btn-select: fadeout(lighten(@color-pink-theme, 5%), 50%);
@color-pink-pagination-background: fadeout(lighten(@color-pink-theme, 23%), 25%); @color-pink-pagination-background: fadeout(lighten(@color-pink-theme, 23%), 25%);
@color-pink-pagination-hover: fadeout(lighten(@color-pink-theme, 5%), 70%); @color-pink-pagination-hover: fadeout(lighten(@color-pink-theme, 5%), 70%);
@color-pink-pagination-active: fadeout(darken(@color-pink-theme, 5%), 70%); @color-pink-pagination-active: fadeout(darken(@color-pink-theme, 5%), 70%);
@ -404,6 +425,9 @@
@color-purple-theme-sidebar: @color-purple-theme; @color-purple-theme-sidebar: @color-purple-theme;
@color-purple-btn: lighten(@color-purple-theme, 5%); @color-purple-btn: lighten(@color-purple-theme, 5%);
@color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%); @color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
@color-purple-btn-hover: fadeout(lighten(@color-purple-theme, 5%), 70%);
@color-purple-btn-active: fadeout(darken(@color-purple-theme, 5%), 70%);
@color-purple-btn-select: fadeout(lighten(@color-purple-theme, 5%), 50%);
@color-purple-pagination-background: fadeout(lighten(@color-purple-theme, 40%), 30%); @color-purple-pagination-background: fadeout(lighten(@color-purple-theme, 40%), 30%);
@color-purple-pagination-hover: fadeout(lighten(@color-purple-theme, 15%), 70%); @color-purple-pagination-hover: fadeout(lighten(@color-purple-theme, 15%), 70%);
@color-purple-pagination-active: fadeout(darken(@color-purple-theme, 15%), 70%); @color-purple-pagination-active: fadeout(darken(@color-purple-theme, 15%), 70%);
@ -456,6 +480,9 @@
@color-grey-theme-sidebar: @color-grey-theme; @color-grey-theme-sidebar: @color-grey-theme;
@color-grey-btn: lighten(@color-grey-theme, 5%); @color-grey-btn: lighten(@color-grey-theme, 5%);
@color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%); @color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
@color-grey-btn-hover: fadeout(lighten(@color-grey-theme, 5%), 70%);
@color-grey-btn-active: fadeout(darken(@color-grey-theme, 5%), 70%);
@color-grey-btn-select: fadeout(lighten(@color-grey-theme, 5%), 50%);
@color-grey-pagination-background: fadeout(lighten(@color-grey-theme, 45%), 30%); @color-grey-pagination-background: fadeout(lighten(@color-grey-theme, 45%), 30%);
@color-grey-pagination-hover: fadeout(lighten(@color-grey-theme, 10%), 70%); @color-grey-pagination-hover: fadeout(lighten(@color-grey-theme, 10%), 70%);
@color-grey-pagination-active: fadeout(darken(@color-grey-theme, 10%), 70%); @color-grey-pagination-active: fadeout(darken(@color-grey-theme, 10%), 70%);
@ -509,6 +536,9 @@
@color-ming-theme-sidebar: @color-ming-theme; @color-ming-theme-sidebar: @color-ming-theme;
@color-ming-btn: lighten(@color-ming-theme, 5%); @color-ming-btn: lighten(@color-ming-theme, 5%);
@color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%); @color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%);
@color-ming-btn-hover: fadeout(lighten(@color-ming-theme, 5%), 70%);
@color-ming-btn-active: fadeout(darken(@color-ming-theme, 5%), 70%);
@color-ming-btn-select: fadeout(lighten(@color-ming-theme, 5%), 50%);
@color-ming-pagination-background: fadeout(lighten(@color-ming-theme, 50%), 35%); @color-ming-pagination-background: fadeout(lighten(@color-ming-theme, 50%), 35%);
@color-ming-pagination-hover: fadeout(lighten(@color-ming-theme, 15%), 70%); @color-ming-pagination-hover: fadeout(lighten(@color-ming-theme, 15%), 70%);
@color-ming-pagination-active: fadeout(darken(@color-ming-theme, 15%), 70%); @color-ming-pagination-active: fadeout(darken(@color-ming-theme, 15%), 70%);
@ -563,6 +593,9 @@
@color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0); @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
@color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%); @color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%);
@color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%); @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
@color-mid_autumn-btn-hover: fadeout(lighten(@color-mid_autumn-theme, 5%), 70%);
@color-mid_autumn-btn-active: fadeout(darken(@color-mid_autumn-theme, 5%), 70%);
@color-mid_autumn-btn-select: fadeout(lighten(@color-mid_autumn-theme, 5%), 50%);
@color-mid_autumn-pagination-background: fadeout(lighten(@color-mid_autumn-theme, 45%), 50%); @color-mid_autumn-pagination-background: fadeout(lighten(@color-mid_autumn-theme, 45%), 50%);
@color-mid_autumn-pagination-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 70%); @color-mid_autumn-pagination-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 70%);
@color-mid_autumn-pagination-active: fadeout(darken(@color-mid_autumn-theme, 10%), 70%); @color-mid_autumn-pagination-active: fadeout(darken(@color-mid_autumn-theme, 10%), 70%);
@ -615,6 +648,9 @@
@color-naruto-theme-sidebar: rgba(255, 255, 255, .3); @color-naruto-theme-sidebar: rgba(255, 255, 255, .3);
@color-naruto-btn: lighten(@color-naruto-theme, 2%); @color-naruto-btn: lighten(@color-naruto-theme, 2%);
@color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%); @color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%);
@color-naruto-btn-hover: fadeout(lighten(@color-naruto-theme, 5%), 70%);
@color-naruto-btn-active: fadeout(darken(@color-naruto-theme, 5%), 70%);
@color-naruto-btn-select: fadeout(lighten(@color-naruto-theme, 5%), 50%);
@color-naruto-pagination-background: fadeout(lighten(@color-naruto-theme, 20%), 70%); @color-naruto-pagination-background: fadeout(lighten(@color-naruto-theme, 20%), 70%);
@color-naruto-pagination-hover: fadeout(lighten(@color-naruto-theme, 10%), 60%); @color-naruto-pagination-hover: fadeout(lighten(@color-naruto-theme, 10%), 60%);
@color-naruto-pagination-active: fadeout(darken(@color-naruto-theme, 10%), 70%); @color-naruto-pagination-active: fadeout(darken(@color-naruto-theme, 10%), 70%);
@ -667,6 +703,9 @@
@color-happy_new_year-theme-sidebar: rgba(119, 37, 18, 0.1); @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: desaturate(@color-happy_new_year-theme, 10%);
@color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%); @color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%);
@color-happy_new_year-btn-hover: fadeout(lighten(@color-happy_new_year-theme, 5%), 70%);
@color-happy_new_year-btn-active: fadeout(darken(@color-happy_new_year-theme, 5%), 70%);
@color-happy_new_year-btn-select: fadeout(lighten(@color-happy_new_year-theme, 5%), 50%);
@color-happy_new_year-pagination-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 40%); @color-happy_new_year-pagination-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 40%);
@color-happy_new_year-pagination-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 70%); @color-happy_new_year-pagination-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 70%);
@color-happy_new_year-pagination-active: fadeout(darken(@color-happy_new_year-theme, 10%), 70%); @color-happy_new_year-pagination-active: fadeout(darken(@color-happy_new_year-theme, 10%), 70%);
@ -703,7 +742,7 @@
// Width // Width
@width-app-left: 6.5%; @width-app-left: 6.6%;
// Height // Height
@height-toolbar: 54px; @height-toolbar: 54px;

4
src/renderer/components/core/Player.vue
View File

@ -162,8 +162,8 @@ export default {
'setting.player.mediaDeviceId'(n) { 'setting.player.mediaDeviceId'(n) {
this.setMediaDevice() this.setMediaDevice()
}, },
list(n, o) { async list(n, o) {
if (n === o) { if (n === o && this.musicInfo.songmid) {
let index = this.listId == 'download' let index = this.listId == 'download'
? n.findIndex(s => s.musicInfo.songmid === this.musicInfo.songmid) ? n.findIndex(s => s.musicInfo.songmid === this.musicInfo.songmid)
: n.findIndex(s => s.songmid === this.musicInfo.songmid) : n.findIndex(s => s.songmid === this.musicInfo.songmid)

8
src/renderer/components/material/Btn.vue
View File

@ -37,10 +37,10 @@ export default {
} }
&:hover { &:hover {
background-color: @color-theme_2-hover; background-color: @color-btn-hover;
} }
&:active { &:active {
background-color: @color-theme_2-active; background-color: @color-btn-active;
} }
} }
@ -55,10 +55,10 @@ each(@themes, {
color: ~'@{color-@{value}-btn}'; color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}'; background-color: ~'@{color-@{value}-btn-background}';
&:hover { &:hover {
background-color: ~'@{color-@{value}-theme_2-hover}'; background-color: ~'@{color-@{value}-btn-hover}';
} }
&:active { &:active {
background-color: ~'@{color-@{value}-theme_2-active}'; background-color: ~'@{color-@{value}-btn-active}';
} }
} }
} }

22
src/renderer/components/material/ListButtons.vue
View File

@ -1,27 +1,27 @@
<template lang="pug"> <template lang="pug">
div(:class="$style.btns") div(:class="$style.btns")
button(type="button" v-if="playBtn" :title="$t('material.list_buttons.play')" @click.stop="handleClick('play')") button(type="button" v-if="playBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.play')" @click.stop="handleClick('play')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 287.386 287.386' space='preserve') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 287.386 287.386' space='preserve')
use(xlink:href='#icon-testPlay') use(xlink:href='#icon-testPlay')
button(type="button" v-if="listAddBtn" :title="$t('material.list_buttons.add_to')" @click.stop="handleClick('listAdd')") button(type="button" v-if="listAddBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.add_to')" @click.stop="handleClick('listAdd')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo') use(xlink:href='#icon-addTo')
button(type="button" v-if="downloadBtn" :title="$t('material.list_buttons.download')" @click.stop="handleClick('download')") button(type="button" v-if="downloadBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.download')" @click.stop="handleClick('download')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 475.078 475.077' space='preserve') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 475.078 475.077' space='preserve')
use(xlink:href='#icon-download') use(xlink:href='#icon-download')
button(type="button" :title="$t('material.list_buttons.add')" v-if="userInfo" @click.stop="handleClick('add')") //- button(type="button" :title="$t('material.list_buttons.add')" v-if="userInfo" @click.stop="handleClick('add')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo') use(xlink:href='#icon-addTo')
button(type="button" v-if="startBtn" :title="$t('material.list_buttons.start')" @click.stop="handleClick('start')") button(type="button" v-if="startBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.start')" @click.stop="handleClick('start')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
use(xlink:href='#icon-play') use(xlink:href='#icon-play')
button(type="button" v-if="pauseBtn" :title="$t('material.list_buttons.pause')" @click.stop="handleClick('pause')") button(type="button" v-if="pauseBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.pause')" @click.stop="handleClick('pause')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
use(xlink:href='#icon-pause') use(xlink:href='#icon-pause')
button(type="button" v-if="fileBtn" :title="$t('material.list_buttons.file')" @click.stop="handleClick('file')") button(type="button" v-if="fileBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.file')" @click.stop="handleClick('file')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='-61 0 512 512' space='preserve') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='-61 0 512 512' space='preserve')
use(xlink:href='#icon-musicFile') use(xlink:href='#icon-musicFile')
button(type="button" v-if="searchBtn" :title="$t('material.list_buttons.search')" @click.stop="handleClick('search')") button(type="button" v-if="searchBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.search')" @click.stop="handleClick('search')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve')
use(xlink:href='#icon-search') use(xlink:href='#icon-search')
button(type="button" v-if="removeBtn" :title="$t('material.list_buttons.remove')" @click.stop="handleClick('remove')") button(type="button" v-if="removeBtn" :title="$t('material.list_buttons.remove')" @click.stop="handleClick('remove')")
@ -31,7 +31,7 @@ div(:class="$style.btns")
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' // import { mapGetters } from 'vuex'
export default { export default {
props: { props: {
@ -49,7 +49,7 @@ export default {
}, },
removeBtn: { removeBtn: {
type: Boolean, type: Boolean,
default: true, default: false,
}, },
downloadBtn: { downloadBtn: {
type: Boolean, type: Boolean,
@ -73,7 +73,7 @@ export default {
}, },
}, },
computed: { computed: {
...mapGetters(['userInfo']), // ...mapGetters(['userInfo']),
}, },
methods: { methods: {
handleClick(action) { handleClick(action) {

29
src/renderer/components/material/Menu.vue
View File

@ -1,6 +1,6 @@
<template lang="pug"> <template lang="pug">
ul(:class="$style.list" :style="listStyles" ref="dom_list") ul(:class="$style.list" :style="listStyles" ref="dom_list")
li(v-for="item in menus" @click="handleClick(item)" :disabled="item.disabled") {{item[itemName]}} li(v-for="item in menus" @click="handleClick(item)" v-if="!item.hide" :disabled="item.disabled") {{item[itemName]}}
</template> </template>
<script> <script>
@ -41,7 +41,7 @@ export default {
this.listStyles.top = n.y + 'px' this.listStyles.top = n.y + 'px'
if (this.show) { if (this.show) {
if (this.listStyles.transitionProperty != this.transition2) this.listStyles.transitionProperty = this.transition2 if (this.listStyles.transitionProperty != this.transition2) this.listStyles.transitionProperty = this.transition2
this.listStyles.transform = `scaleY(1) translateY(${this.handleGetOffset(n.y)}px)` this.listStyles.transform = `scaleY(1) translate(${this.handleGetOffsetXY(n.x, n.y)})`
} }
}, },
deep: true, deep: true,
@ -55,7 +55,7 @@ export default {
top: 0, top: 0,
opacity: 0, opacity: 0,
transitionProperty: 'transform, opacity', transitionProperty: 'transform, opacity',
transform: 'scale(0) translateY(0)', transform: 'scale(0) translate(0,0)',
}, },
transition1: 'transform, opacity', transition1: 'transform, opacity',
transition2: 'transform, opacity, top, left', transition2: 'transform, opacity, top, left',
@ -72,21 +72,30 @@ export default {
handleShow() { handleShow() {
this.show = true this.show = true
this.listStyles.opacity = 1 this.listStyles.opacity = 1
this.listStyles.transform = `scaleY(1) translateY(${this.handleGetOffset(this.location.y)}px)` this.listStyles.transform = `scaleY(1) translate(${this.handleGetOffsetXY(this.location.x, this.location.y)})`
}, },
handleHide(e) { handleHide(e) {
this.listStyles.opacity = 0 this.listStyles.opacity = 0
this.listStyles.transform = 'scale(0) translateY(0)' this.listStyles.transform = 'scale(0) translate(0, 0)'
this.show = false this.show = false
}, },
handleGetOffset(top) { handleGetOffsetXY(left, top) {
const listWidth = this.$refs.dom_list.clientWidth
const listHeight = this.$refs.dom_list.clientHeight const listHeight = this.$refs.dom_list.clientHeight
const dom_container = this.$refs.dom_list.offsetParent const dom_container = this.$refs.dom_list.offsetParent
const containerWidth = dom_container.clientWidth
const containerHeight = dom_container.clientHeight const containerHeight = dom_container.clientHeight
if (containerHeight < listHeight) return 0 const offsetWidth = containerWidth - left - listWidth
const offsetHeight = containerHeight - top - listHeight const offsetHeight = containerHeight - top - listHeight
if (offsetHeight > 0) return 0 let x = 0
return offsetHeight - 5 let y = 0
if (containerWidth > listWidth && offsetWidth < 0) {
x = offsetWidth - 15
}
if (containerHeight > listHeight && offsetHeight < 0) {
y = offsetHeight - 5
}
return `${x}px, ${y}px`
}, },
handleDocumentClick(event) { handleDocumentClick(event) {
if (!this.show) return if (!this.show) return
@ -121,7 +130,7 @@ export default {
background-color: @color-theme_2-background_2; background-color: @color-theme_2-background_2;
box-shadow: 0 1px 8px 0 rgba(0,0,0,.2); box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
z-index: 10; z-index: 10;
overflow: hidden;
li { li {
cursor: pointer; cursor: pointer;
min-width: 80px; min-width: 80px;

16
src/renderer/components/material/Select.vue
View File

@ -86,10 +86,10 @@ export default {
.mixin-ellipsis-1; .mixin-ellipsis-1;
&:hover { &:hover {
background-color: @color-theme_2-hover; background-color: @color-btn-hover;
} }
&:active { &:active {
background-color: @color-theme_2-active; background-color: @color-btn-active;
} }
} }
@ -121,10 +121,10 @@ export default {
.mixin-ellipsis-1; .mixin-ellipsis-1;
&:hover { &:hover {
background-color: @color-theme_2-hover; background-color: @color-btn-hover;
} }
&:active { &:active {
background-color: @color-theme_2-active; background-color: @color-btn-active;
} }
} }
} }
@ -137,10 +137,10 @@ each(@themes, {
border-left-color: ~'@{color-@{value}-tab-border-bottom}'; border-left-color: ~'@{color-@{value}-tab-border-bottom}';
color: ~'@{color-@{value}-btn}'; color: ~'@{color-@{value}-btn}';
&:hover { &:hover {
background-color: ~'@{color-@{value}-theme_2-hover}'; background-color: ~'@{color-@{value}-btn-hover}';
} }
&:active { &:active {
background-color: ~'@{color-@{value}-theme_2-active}'; background-color: ~'@{color-@{value}-btn-active}';
} }
} }
@ -152,10 +152,10 @@ each(@themes, {
// color: ~'@{color-@{value}-btn}'; // color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}'; background-color: ~'@{color-@{value}-btn-background}';
&:hover { &:hover {
background-color: ~'@{color-@{value}-theme_2-hover}'; background-color: ~'@{color-@{value}-btn-hover}';
} }
&:active { &:active {
background-color: ~'@{color-@{value}-theme_2-active}'; background-color: ~'@{color-@{value}-btn-active}';
} }
} }
} }

26
src/renderer/components/material/Selection.vue
View File

@ -1,11 +1,11 @@
<template lang="pug"> <template lang="pug">
div(:class="[$style.select, show ? $style.active : '']") div.content(:class="[$style.select, show ? $style.active : '']")
div(:class="$style.label" ref="dom_btn" @click="handleShow") div.label-content(:class="$style.label" ref="dom_btn" @click="handleShow")
span {{label}} span.label {{label}}
div(:class="$style.icon") div.icon(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve')
use(xlink:href='#icon-down') use(xlink:href='#icon-down')
ul.scroll(:class="$style.list" :style="listStyles" ref="dom_list") ul.list.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}} li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
</template> </template>
@ -140,10 +140,10 @@ export default {
} }
&:hover { &:hover {
background-color: @color-theme_2-hover; background-color: @color-btn-hover;
} }
&:active { &:active {
background-color: @color-theme_2-active; background-color: @color-btn-active;
} }
} }
@ -176,10 +176,10 @@ export default {
.mixin-ellipsis-1; .mixin-ellipsis-1;
&:hover { &:hover {
background-color: @color-theme_2-hover; background-color: @color-btn-hover;
} }
&:active { &:active {
background-color: @color-theme_2-active; background-color: @color-btn-active;
} }
&.active { &.active {
color: @color-btn; color: @color-btn;
@ -194,10 +194,10 @@ each(@themes, {
color: ~'@{color-@{value}-btn}'; color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}'; background-color: ~'@{color-@{value}-btn-background}';
&:hover { &:hover {
background-color: ~'@{color-@{value}-theme_2-hover}'; background-color: ~'@{color-@{value}-btn-hover}';
} }
&:active { &:active {
background-color: ~'@{color-@{value}-theme_2-active}'; background-color: ~'@{color-@{value}-btn-active}';
} }
} }
@ -207,10 +207,10 @@ each(@themes, {
// color: ~'@{color-@{value}-btn}'; // color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}'; background-color: ~'@{color-@{value}-btn-background}';
&:hover { &:hover {
background-color: ~'@{color-@{value}-theme_2-hover}'; background-color: ~'@{color-@{value}-btn-hover}';
} }
&:active { &:active {
background-color: ~'@{color-@{value}-theme_2-active}'; background-color: ~'@{color-@{value}-btn-active}';
} }
&.active { &.active {
color: ~'@{color-@{value}-btn}'; color: ~'@{color-@{value}-btn}';

189
src/renderer/components/material/SongList.vue
View File

@ -1,52 +1,54 @@
<template lang="pug"> <template lang="pug">
div(:class="$style.songList") div(:class="$style.songList")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut") transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(v-show="list.length" :class="$style.list") div(:class="$style.list")
div(:class="$style.thead") div(:class="$style.thead")
table table
thead thead
tr tr
th.nobreak.center(style="width: 10px;") # th.nobreak.center(:style="{ width: rowWidth.r1 }") #
th.nobreak(style="width: 25%;") {{$t('material.song_list.name')}} th.nobreak(:style="{ width: rowWidth.r2 }") {{$t('material.song_list.name')}}
th.nobreak(style="width: 20%;") {{$t('material.song_list.singer')}} th.nobreak(:style="{ width: rowWidth.r3 }") {{$t('material.song_list.singer')}}
th.nobreak(style="width: 20%;") {{$t('material.song_list.album')}} th.nobreak(:style="{ width: rowWidth.r4 }") {{$t('material.song_list.album')}}
th.nobreak(style="width: 10%;") {{$t('material.song_list.time')}} th.nobreak(:style="{ width: rowWidth.r5 }") {{$t('material.song_list.time')}}
th.nobreak(style="width: 20%;") {{$t('material.song_list.action')}} th.nobreak(:style="{ width: rowWidth.r6 }") {{$t('material.song_list.action')}}
div.scroll(:class="$style.tbody" ref="dom_scrollContent") div(:class="$style.content")
table div.scroll(v-show="list.length" :class="$style.tbody" ref="dom_scrollContent")
tbody(@contextmenu="handleContextMenu" ref="dom_tbody") table
tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick($event, index)") tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}} tr(v-for='(item, index) in list' :key='item.songmid' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)")
td.break(style="width: 25%;") td.nobreak.center(:style="{ width: rowWidth.r1 }" style="padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
span.select {{item.name}} td.break(:style="{ width: rowWidth.r2 }")
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.select {{item.name}}
span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" 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')}}
td.break(style="width: 20%;") span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}}
span.select {{item.singer}} td.break(:style="{ width: rowWidth.r3 }")
td.break(style="width: 20%;") span.select {{item.singer}}
span.select {{item.albumName}} td.break(:style="{ width: rowWidth.r4 }")
td(style="width: 10%;") span.select {{item.albumName}}
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}} td(:style="{ width: rowWidth.r5 }")
td(style="width: 20%; padding-left: 0; padding-right: 0;") span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
material-list-buttons(:index="index" :search-btn="true" :class="$style.btns" td(:style="{ width: rowWidth.r6 }" style="padding-left: 0; padding-right: 0;")
:remove-btn="false" @btn-click="handleListBtnClick" material-list-buttons(:index="index" :class="$style.btns"
:listAdd-btn="assertApiSupport(item.source)" :remove-btn="false" @btn-click="handleListBtnClick"
:play-btn="assertApiSupport(item.source)" :listAdd-btn="assertApiSupport(item.source)"
:download-btn="assertApiSupport(item.source)") :play-btn="assertApiSupport(item.source)"
//- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载 :download-btn="assertApiSupport(item.source)")
//- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听 //- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
//- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋ //- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
div(:class="$style.pagination") //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage") div(:class="$style.pagination")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut") material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
div(v-show="!list.length" :class="$style.noitem") transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
p(v-html="noItem") div(v-show="!list.length" :class="$style.noitem")
material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick") p(v-html="noItem")
//- material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { scrollTo, clipboardWriteText, assertApiSupport } from '../../utils' import { scrollTo, clipboardWriteText, assertApiSupport, findParentNode } from '../../utils'
export default { export default {
name: 'MaterialSongList', name: 'MaterialSongList',
model: { model: {
@ -83,26 +85,63 @@ export default {
type: String, type: String,
default: '列表加载中...', default: '列表加载中...',
}, },
rowWidth: {
type: Object,
default() {
return {
r1: '5%',
r2: 'auto',
r3: '22%',
r4: '22%',
r5: '8%',
r6: '13%',
}
},
},
}, },
computed: { computed: {
...mapGetters(['setting']), ...mapGetters(['setting']),
listItemMenu() {
return [
{
name: this.$t('material.song_list.list_play'),
action: 'play',
disabled: !this.listMenu.itemMenuControl.play,
},
{
name: this.$t('material.song_list.list_download'),
action: 'download',
disabled: !this.listMenu.itemMenuControl.download,
},
{
name: this.$t('material.song_list.list_add_to'),
action: 'addTo',
disabled: !this.listMenu.itemMenuControl.addTo,
},
{
name: this.$t('material.song_list.list_search'),
action: 'search',
disabled: !this.listMenu.itemMenuControl.search,
},
]
},
}, },
watch: { watch: {
selectdList(n) { // selectdList(n) {
const len = n.length // const len = n.length
if (len) { // if (len) {
this.isShowEditBtn = true // this.isShowEditBtn = true
} else { // } else {
this.isShowEditBtn = false // this.isShowEditBtn = false
} // }
}, // },
selectdData(n) { selectdData(n) {
const len = n.length const len = n.length
if (len) { if (len) {
this.isShowEditBtn = true // this.isShowEditBtn = true
this.selectdList = [...n] this.selectdList = [...n]
} else { } else {
this.isShowEditBtn = false // this.isShowEditBtn = false
this.removeAllSelect() this.removeAllSelect()
} }
}, },
@ -122,6 +161,19 @@ export default {
isShiftDown: false, isShiftDown: false,
isModDown: false, isModDown: false,
}, },
listMenu: {
isShowItemMenu: false,
itemMenuControl: {
play: true,
addTo: true,
download: true,
search: true,
},
menuLocation: {
x: 0,
y: 0,
},
},
} }
}, },
created() { created() {
@ -245,9 +297,9 @@ export default {
handleTogglePage(page) { handleTogglePage(page) {
this.emitEvent('togglePage', page) this.emitEvent('togglePage', page)
}, },
handleFlowBtnClick(action) { // handleFlowBtnClick(action) {
this.emitEvent('flowBtnClick', action) // this.emitEvent('flowBtnClick', action)
}, // },
emitEvent(action, data) { emitEvent(action, data) {
this.$emit('action', { action, data }) this.$emit('action', { action, data })
}, },
@ -256,6 +308,7 @@ export default {
}, },
handleContextMenu(event) { handleContextMenu(event) {
if (!event.target.classList.contains('select')) return if (!event.target.classList.contains('select')) return
event.stopImmediatePropagation()
let classList = this.$refs.dom_scrollContent.classList let classList = this.$refs.dom_scrollContent.classList
classList.add(this.$style.copying) classList.add(this.$style.copying)
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
@ -269,6 +322,32 @@ export default {
assertApiSupport(source) { assertApiSupport(source) {
return assertApiSupport(source) return assertApiSupport(source)
}, },
handleListItemRigthClick(event, index) {
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
let dom_td = findParentNode(event.target, 'TD')
this.listMenu.rightClickItemIndex = index
this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
this.listMenu.menuLocation.y = dom_td.offsetParent.offsetTop + dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
this.$nextTick(() => {
this.listMenu.isShowItemMenu = true
})
},
hideListMenu() {
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.listMenu.isShowItemMenu = false
this.listMenu.rightClickItemIndex = -1
},
handleListItemMenuClick(action) {
// console.log(action)
let index = this.listMenu.rightClickItemIndex
this.hideListMenu()
if (!action) return
this.emitEvent('menuClick', { action: action.action, index })
},
}, },
} }
</script> </script>
@ -290,6 +369,7 @@ export default {
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
height: 100%;
} }
.thead { .thead {
flex: none; flex: none;
@ -298,8 +378,13 @@ export default {
// padding-left: 10px; // padding-left: 10px;
} }
} }
.tbody { .content {
flex: auto; flex: auto;
min-height: 0;
position: relative;
}
.tbody {
height: 100%;
overflow-y: auto; overflow-y: auto;
td { td {
font-size: 12px; font-size: 12px;

24
src/renderer/components/material/TagList.vue
View File

@ -123,10 +123,10 @@ export default {
} }
&:hover { &:hover {
background-color: @color-theme_2-hover; background-color: @color-btn-hover;
} }
&:active { &:active {
background-color: @color-theme_2-active; background-color: @color-btn-active;
} }
} }
@ -161,10 +161,10 @@ export default {
box-sizing: border-box; box-sizing: border-box;
&:hover { &:hover {
background-color: @color-theme_2-hover; background-color: @color-btn-hover;
} }
&:active { &:active {
background-color: @color-theme_2-active; background-color: @color-btn-active;
} }
} }
} }
@ -184,10 +184,10 @@ export default {
transition: background-color @transition-theme; transition: background-color @transition-theme;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: @color-theme_2-hover; background-color: @color-btn-hover;
} }
&:active { &:active {
background-color: @color-theme_2-active; background-color: @color-btn-active;
} }
} }
@ -199,10 +199,10 @@ each(@themes, {
// border-left-color: ~'@{color-@{value}-tab-border-bottom}'; // border-left-color: ~'@{color-@{value}-tab-border-bottom}';
color: ~'@{color-@{value}-btn}'; color: ~'@{color-@{value}-btn}';
&:hover { &:hover {
background-color: ~'@{color-@{value}-theme_2-hover}'; background-color: ~'@{color-@{value}-btn-hover}';
} }
&:active { &:active {
background-color: ~'@{color-@{value}-theme_2-active}'; background-color: ~'@{color-@{value}-btn-active}';
} }
} }
@ -215,10 +215,10 @@ each(@themes, {
// color: ~'@{color-@{value}-btn}'; // color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}'; background-color: ~'@{color-@{value}-btn-background}';
&:hover { &:hover {
background-color: ~'@{color-@{value}-theme_2-hover}'; background-color: ~'@{color-@{value}-btn-hover}';
} }
&:active { &:active {
background-color: ~'@{color-@{value}-theme_2-active}'; background-color: ~'@{color-@{value}-btn-active}';
} }
} }
} }
@ -226,10 +226,10 @@ each(@themes, {
.tag { .tag {
background-color: ~'@{color-@{value}-btn-background}'; background-color: ~'@{color-@{value}-btn-background}';
&:hover { &:hover {
background-color: ~'@{color-@{value}-theme_2-hover}'; background-color: ~'@{color-@{value}-btn-hover}';
} }
&:active { &:active {
background-color: ~'@{color-@{value}-theme_2-active}'; background-color: ~'@{color-@{value}-btn-active}';
} }
} }

16
src/renderer/components/material/listAddModal.vue
View File

@ -2,7 +2,7 @@
material-modal(:show="show" :bg-close="bgClose" @close="handleClose") material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main") main(:class="$style.main")
h2 h2
| {{$t('material.list_add_modal.title_first')}}&nbsp; | {{$t('material.list_add_modal.' + (isMove ? 'title_first_move' : 'title_first_add'))}}&nbsp;
span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}} span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}}
| &nbsp;{{$t('material.list_add_modal.title_last')}} | &nbsp;{{$t('material.list_add_modal.title_last')}}
div.scroll(:class="$style.btnContent") div.scroll(:class="$style.btnContent")
@ -39,6 +39,14 @@ export default {
type: String, type: String,
default: '', default: '',
}, },
fromListId: {
type: String,
default: null,
},
isMove: {
type: Boolean,
default: false,
},
}, },
data() { data() {
return { return {
@ -60,9 +68,11 @@ export default {
}, },
}, },
methods: { methods: {
...mapMutations('list', ['listAdd', 'createUserList']), ...mapMutations('list', ['listAdd', 'listMove', 'createUserList']),
handleClick(index) { handleClick(index) {
this.listAdd({ id: this.lists[index].id, musicInfo: this.musicInfo }) this.isMove
? this.listMove({ fromId: this.fromListId, toId: this.lists[index].id, musicInfo: this.musicInfo })
: this.listAdd({ id: this.lists[index].id, musicInfo: this.musicInfo })
this.$nextTick(() => { this.$nextTick(() => {
this.handleClose() this.handleClose()
}) })

16
src/renderer/components/material/listAddMultipleModal.vue
View File

@ -1,7 +1,7 @@
<template lang="pug"> <template lang="pug">
material-modal(:show="show" :bg-close="bgClose" @close="handleClose") material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main") main(:class="$style.main")
h2 {{$t('material.list_add_multiple_modal.title', { num: musicList.length })}} h2 {{$t('material.list_add_multiple_modal.' + (isMove ? 'title_move' : 'title_add'), { num: musicList.length })}}
div.scroll(:class="$style.btnContent") div.scroll(:class="$style.btnContent")
material-btn(:class="$style.btn" :title="$t('material.list_add_multiple_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}} material-btn(:class="$style.btn" :title="$t('material.list_add_multiple_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :title="$t('view.list.lists_new_list_btn')") material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :title="$t('view.list.lists_new_list_btn')")
@ -39,6 +39,14 @@ export default {
type: String, type: String,
default: '', default: '',
}, },
fromListId: {
type: String,
default: null,
},
isMove: {
type: Boolean,
default: false,
},
}, },
data() { data() {
return { return {
@ -61,9 +69,11 @@ export default {
}, },
}, },
methods: { methods: {
...mapMutations('list', ['listAddMultiple', 'createUserList']), ...mapMutations('list', ['listAddMultiple', 'listMoveMultiple', 'createUserList']),
handleClick(index) { handleClick(index) {
this.listAddMultiple({ id: this.lists[index].id, list: this.musicList }) this.isMove
? this.listMoveMultiple({ fromId: this.fromListId, toId: this.lists[index].id, list: this.musicList })
: this.listAddMultiple({ id: this.lists[index].id, list: this.musicList })
this.$nextTick(() => { this.$nextTick(() => {
this.handleClose(true) this.handleClose(true)
}) })

3
src/renderer/lang/cns/material/list_add_modal.json
View File

@ -1,5 +1,6 @@
{ {
"title_first": "添加", "title_first_add": "添加",
"title_first_move": "移动",
"title_last": "到...", "title_last": "到...",
"btn_title": "把该歌曲添加到 {name}" "btn_title": "把该歌曲添加到 {name}"
} }

3
src/renderer/lang/cns/material/list_add_multiple_modal.json
View File

@ -1,4 +1,5 @@
{ {
"title": "添加已选的 {num} 首歌曲到...", "title_add": "添加已选的 {num} 首歌曲到...",
"title_move": "移动已选的 {num} 首歌曲到...",
"btn_title": "把这些歌曲添加到 {name}" "btn_title": "把这些歌曲添加到 {name}"
} }

6
src/renderer/lang/cns/material/song_list.json
View File

@ -1,6 +1,8 @@
{ {
"select_all": "全选", "list_play": "播放",
"unselect_all": "全不选", "list_add_to": "添加到...",
"list_download": "下载",
"list_search": "搜索",
"name": "歌曲名", "name": "歌曲名",
"singer": "歌手", "singer": "歌手",
"album": "专辑", "album": "专辑",

8
src/renderer/lang/cns/view/download.json
View File

@ -1,6 +1,10 @@
{ {
"select_all": "全选", "menu_play": "播放",
"unselect_all": "全不选", "menu_start": "开始任务",
"menu_pause": "暂停任务",
"menu_file": "定位文件",
"menu_search": "搜索",
"menu_remove": "删除",
"name": "歌曲名", "name": "歌曲名",
"progress": "进度", "progress": "进度",
"status": "状态", "status": "状态",

5
src/renderer/lang/cns/view/list.json
View File

@ -5,6 +5,11 @@
"lists_moveup": "上移", "lists_moveup": "上移",
"lists_movedown": "下移", "lists_movedown": "下移",
"lists_remove": "删除", "lists_remove": "删除",
"list_play": "播放",
"list_add_to": "添加到...",
"list_move_to": "移动到...",
"list_download": "下载",
"list_remove": "删除",
"default_list": "试听列表", "default_list": "试听列表",
"love_list": "收藏", "love_list": "收藏",
"name": "歌曲名", "name": "歌曲名",

5
src/renderer/lang/cns/view/search.json
View File

@ -1,6 +1,7 @@
{ {
"select_all": "全选", "list_play": "播放",
"unselect_all": "全不选", "list_add_to": "添加到...",
"list_download": "下载",
"name": "歌曲名", "name": "歌曲名",
"singer": "歌手", "singer": "歌手",
"album": "专辑", "album": "专辑",

3
src/renderer/lang/cnt/material/list_add_modal.json
View File

@ -1,5 +1,6 @@
{ {
"title_first": "添加", "title_first_add": "添加",
"title_first_move": "移動",
"title_last": "到...", "title_last": "到...",
"btn_title": "把該歌曲添加到 {name}" "btn_title": "把該歌曲添加到 {name}"
} }

3
src/renderer/lang/cnt/material/list_add_multiple_modal.json
View File

@ -1,4 +1,5 @@
{ {
"title": "添加已選的 {num} 首歌曲到...", "title_add": "添加已選的 {num} 首歌曲到...",
"title_move": "添加移動已選的 {num} 首歌曲到...",
"btn_title": "把這些歌曲添加到 {name}" "btn_title": "把這些歌曲添加到 {name}"
} }

6
src/renderer/lang/cnt/material/song_list.json
View File

@ -1,6 +1,8 @@
{ {
"select_all": "全選", "list_play": "播放",
"unselect_all": "全不選", "list_add_to": "添加到...",
"list_download": "下載",
"list_search": "搜索",
"name": "歌曲名", "name": "歌曲名",
"singer": "歌手", "singer": "歌手",
"album": "專輯", "album": "專輯",

8
src/renderer/lang/cnt/view/download.json
View File

@ -1,6 +1,10 @@
{ {
"select_all": "全選", "menu_play": "播放",
"unselect_all": "全不選", "menu_start": "開始任務",
"menu_pause": "暫停任務",
"menu_file": "定位文件",
"menu_search": "搜索",
"menu_remove": "刪除",
"name": "歌曲名", "name": "歌曲名",
"progress": "進度", "progress": "進度",
"status": "狀態", "status": "狀態",

5
src/renderer/lang/cnt/view/list.json
View File

@ -5,6 +5,11 @@
"lists_moveup": "上移", "lists_moveup": "上移",
"lists_movedown": "下移", "lists_movedown": "下移",
"lists_remove": "刪除", "lists_remove": "刪除",
"list_play": "播放",
"list_add_to": "添加到...",
"list_move_to": "移動到...",
"list_download": "下載",
"list_remove": "刪除",
"default_list": "試聽列表", "default_list": "試聽列表",
"love_list": "收藏列表", "love_list": "收藏列表",
"name": "歌曲名", "name": "歌曲名",

5
src/renderer/lang/cnt/view/search.json
View File

@ -1,6 +1,7 @@
{ {
"select_all": "全選", "list_play": "播放",
"unselect_all": "全不選", "list_add_to": "添加到...",
"list_download": "下載",
"name": "歌曲名", "name": "歌曲名",
"singer": "歌手", "singer": "歌手",
"album": "專輯", "album": "專輯",

3
src/renderer/lang/en/material/list_add_modal.json
View File

@ -1,5 +1,6 @@
{ {
"title_first": "Add", "title_first_add": "Add",
"title_first_move": "Move",
"title_last": "to...", "title_last": "to...",
"btn_title": "Add the song(s) to {name}" "btn_title": "Add the song(s) to {name}"
} }

3
src/renderer/lang/en/material/list_add_multiple_modal.json
View File

@ -1,4 +1,5 @@
{ {
"title": "Add the selected {num} song(s) to ...", "title_add": "Add the selected {num} song(s) to ...",
"title_move": "Move the selected {num} song(s) to ...",
"btn_title": "Add these song(s) to {name}" "btn_title": "Add these song(s) to {name}"
} }

6
src/renderer/lang/en/material/song_list.json
View File

@ -1,6 +1,8 @@
{ {
"select_all": "Select all", "list_play": "Play",
"unselect_all": "Select none", "list_add_to": "Add to ...",
"list_download": "Download",
"list_search": "Search",
"name": "Name", "name": "Name",
"singer": "Artist", "singer": "Artist",
"album": "Album", "album": "Album",

8
src/renderer/lang/en/view/download.json
View File

@ -1,6 +1,10 @@
{ {
"select_all": "Select all", "menu_play": "Play",
"unselect_all": "Select none", "menu_start": "Start task",
"menu_pause": "Pause Task",
"menu_file": "Locate File",
"menu_search": "Search",
"menu_remove": "Remove",
"name": "Name", "name": "Name",
"progress": "Progress", "progress": "Progress",
"status": "State", "status": "State",

5
src/renderer/lang/en/view/list.json
View File

@ -5,6 +5,11 @@
"lists_moveup": "Move Up", "lists_moveup": "Move Up",
"lists_movedown": "Move Down", "lists_movedown": "Move Down",
"lists_remove": "Remove", "lists_remove": "Remove",
"list_play": "Play",
"list_add_to": "Add to ...",
"list_move_to": "Move to ...",
"list_download": "Download",
"list_remove": "Remove",
"default_list": "Recently Played", "default_list": "Recently Played",
"love_list": "Favorites", "love_list": "Favorites",
"name": "Name", "name": "Name",

5
src/renderer/lang/en/view/search.json
View File

@ -1,6 +1,7 @@
{ {
"select_all": "Select all", "list_play": "Play",
"unselect_all": "Unselect all", "list_add_to": "Add to ...",
"list_download": "Download",
"name": "Name", "name": "Name",
"singer": "Artist", "singer": "Artist",
"album": "Album", "album": "Album",

15
src/renderer/store/modules/list.js
View File

@ -80,6 +80,15 @@ const mutations = {
if (targetList.list.some(s => s.songmid === musicInfo.songmid)) return if (targetList.list.some(s => s.songmid === musicInfo.songmid)) return
targetList.list.push(musicInfo) targetList.list.push(musicInfo)
}, },
listMove(state, { fromId, musicInfo, toId }) {
const fromList = allList[fromId]
const toList = allList[toId]
if (!fromList || !toList) return
fromList.list.splice(fromList.list.indexOf(musicInfo), 1)
let index = toList.list.findIndex(s => s.songmid === musicInfo.songmid)
if (index > -1) return toList.list.splice(index, 1)
toList.list.push(musicInfo)
},
listAddMultiple(state, { id, list }) { listAddMultiple(state, { id, list }) {
let targetList = allList[id] let targetList = allList[id]
if (!targetList) return if (!targetList) return
@ -93,6 +102,12 @@ const mutations = {
} }
targetList.list.splice(0, targetList.list.length, ...ids.map(id => map[id])) targetList.list.splice(0, targetList.list.length, ...ids.map(id => map[id]))
}, },
// { fromId, toId, list }
listMoveMultiple(state, { fromId, toId, list }) {
console.log(state.commit)
this.commit('list/listRemoveMultiple', { id: fromId, list })
this.commit('list/listAddMultiple', { id: toId, list })
},
listRemove(state, { id, index }) { listRemove(state, { id, index }) {
let targetList = allList[id] let targetList = allList[id]
if (!targetList) return if (!targetList) return

2
src/renderer/utils/index.js
View File

@ -351,6 +351,8 @@ export const asyncSetArray = (from, to, num = 100) => new Promise(resolve => {
}) })
}) })
export const findParentNode = (target, tagName) => target.tagName == tagName ? target : target === document ? null : findParentNode(target.parentNode, tagName)
/** /**
* 获取缓存大小 * 获取缓存大小

285
src/renderer/views/Download.vue
View File

@ -8,34 +8,35 @@ div(:class="$style.download")
table table
thead thead
tr tr
th.nobreak.center(style="width: 10px;") # th.nobreak.center(style="width: 5%;") #
th.nobreak(style="width: 28%;") {{$t('view.download.name')}} th.nobreak {{$t('view.download.name')}}
th.nobreak(style="width: 22%;") {{$t('view.download.progress')}} th.nobreak(style="width: 20%;") {{$t('view.download.progress')}}
th.nobreak(style="width: 15%;") {{$t('view.download.status')}} th.nobreak(style="width: 22%;") {{$t('view.download.status')}}
th.nobreak(style="width: 10%;") {{$t('view.download.quality')}} th.nobreak(style="width: 10%;") {{$t('view.download.quality')}}
th.nobreak(style="width: 20%;") {{$t('view.download.action')}} th.nobreak(style="width: 13%;") {{$t('view.download.action')}}
div.scroll(v-if="list.length" :class="$style.tbody") div.scroll(v-if="list.length" :class="$style.tbody" ref="dom_scrollContent")
table table
tbody(ref="dom_tbody") tbody(ref="dom_tbody")
tr(v-for='(item, index) in showList' :key='item.key' @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''") tr(v-for='(item, index) in showList' :key='item.key' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
td.nobreak.center(style="width: 37px;" @click.stop) {{index + 1}} td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" @click.stop) {{index + 1}}
td.break(style="width: 28%;") td.break
span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}} span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
td.break(style="width: 22%;") {{item.progress.progress}}% td.break(style="width: 20%;") {{item.progress.progress}}%
td.break(style="width: 15%;") {{item.statusText}} td.break(style="width: 22%;") {{item.statusText}}
td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}} td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
td(style="width: 20%; padding-left: 0; padding-right: 0;") td(style="width: 13%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :download-btn="false" :file-btn="item.status != downloadStatus.ERROR" material-list-buttons(:index="index" :download-btn="false" :file-btn="item.status != downloadStatus.ERROR" remove-btn
:start-btn="!item.isComplate && item.status != downloadStatus.WAITING && (item.status != downloadStatus.RUN)" :start-btn="!item.isComplate && item.status != downloadStatus.WAITING && (item.status != downloadStatus.RUN)"
:pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)" :list-add-btn="false" :pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)" :list-add-btn="false"
:play-btn="item.status == downloadStatus.COMPLETED" :search-btn="item.status == downloadStatus.ERROR" @btn-click="handleListBtnClick") :play-btn="item.status == downloadStatus.COMPLETED" :search-btn="item.status == downloadStatus.ERROR" @btn-click="handleListBtnClick")
material-flow-btn(:show="isShowEditBtn" :play-btn="false" :download-btn="false" :add-btn="false" :start-btn="true" :pause-btn="true" @btn-click="handleFlowBtnClick") //- material-flow-btn(:show="isShowEditBtn" :play-btn="false" :download-btn="false" :add-btn="false" :start-btn="true" :pause-btn="true" @btn-click="handleFlowBtnClick")
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
div(:class="$style.noItem" v-else) div(:class="$style.noItem" v-else)
</template> </template>
<script> <script>
import { mapGetters, mapActions, mapMutations } from 'vuex' import { mapGetters, mapActions, mapMutations } from 'vuex'
import { checkPath, openDirInExplorer } from '../utils' import { checkPath, openDirInExplorer, findParentNode } from '../utils'
import path from 'path' import path from 'path'
export default { export default {
@ -45,35 +46,28 @@ export default {
clickTime: window.performance.now(), clickTime: window.performance.now(),
clickIndex: -1, clickIndex: -1,
selectdData: [], selectdData: [],
isShowEditBtn: false, // isShowEditBtn: false,
isShowDownloadMultiple: false, isShowDownloadMultiple: false,
tabs: [
{
name: this.$t('view.download.all'),
id: 'all',
},
{
name: this.$t('view.download.runing'),
id: 'runing',
},
{
name: this.$t('view.download.paused'),
id: 'paused',
},
{
name: this.$t('view.download.error'),
id: 'error',
},
{
name: this.$t('view.download.finished'),
id: 'finished',
},
],
tabId: 'all', tabId: 'all',
keyEvent: { keyEvent: {
isShiftDown: false, isShiftDown: false,
isModDown: false, isModDown: false,
}, },
listMenu: {
isShowItemMenu: false,
itemMenuControl: {
play: true,
start: true,
pause: true,
file: true,
search: true,
remove: true,
},
menuLocation: {
x: 0,
y: 0,
},
},
} }
}, },
computed: { computed: {
@ -104,6 +98,64 @@ export default {
return this.list return this.list
} }
}, },
tabs() {
return [
{
name: this.$t('view.download.all'),
id: 'all',
},
{
name: this.$t('view.download.runing'),
id: 'runing',
},
{
name: this.$t('view.download.paused'),
id: 'paused',
},
{
name: this.$t('view.download.error'),
id: 'error',
},
{
name: this.$t('view.download.finished'),
id: 'finished',
},
]
},
listItemMenu() {
return [
{
name: this.$t('view.download.menu_play'),
action: 'play',
hide: !this.listMenu.itemMenuControl.play,
},
{
name: this.$t('view.download.menu_start'),
action: 'start',
hide: !this.listMenu.itemMenuControl.start,
},
{
name: this.$t('view.download.menu_pause'),
action: 'pause',
hide: !this.listMenu.itemMenuControl.pause,
},
{
name: this.$t('view.download.menu_file'),
action: 'file',
hide: !this.listMenu.itemMenuControl.file,
},
{
name: this.$t('view.download.menu_search'),
action: 'search',
hide: !this.listMenu.itemMenuControl.search,
},
{
name: this.$t('view.download.menu_remove'),
action: 'remove',
hide: !this.listMenu.itemMenuControl.remove,
},
]
},
}, },
watch: { watch: {
selectdData(n) { selectdData(n) {
@ -228,25 +280,22 @@ export default {
index = this.list.findIndex(i => i.key === key) index = this.list.findIndex(i => i.key === key)
let info = this.list[index] let info = this.list[index]
if (info.isComplate) { if (info.isComplate) {
this.handlePlay(index) this.handlePlay(info)
} else if (info.status === this.downloadStatus.RUN) { } else if (info.status === this.downloadStatus.RUN) {
this.handlePauseTask(index) this.handlePauseTask(index)
} else { } else {
this.handleStartTask(index) this.handleStartTask(index)
} }
}, },
async handlePlay(index) { async handlePlay(targetSong) {
const targetSong = this.list[index]
if (!await checkPath(path.join(this.setting.download.savePath, targetSong.fileName))) return if (!await checkPath(path.join(this.setting.download.savePath, targetSong.fileName))) return
this.setList({ list: { list: this.list, id: 'download' }, index: this.list.findIndex(i => i.key === targetSong.key) }) this.setList({ list: { list: this.list, id: 'download' }, index: this.list.findIndex(i => i.key === targetSong.key) })
}, },
handleListBtnClick(info) { handleListBtnClick(info) {
let item = this.showList[info.index] let item = this.showList[info.index]
const key = item.key
let index = this.list.findIndex(i => i.key === key)
switch (info.action) { switch (info.action) {
case 'play': case 'play':
this.handlePlay(index) this.handlePlay(item)
break break
case 'start': case 'start':
this.startTask(item) this.startTask(item)
@ -258,10 +307,10 @@ export default {
this.removeTask(item) this.removeTask(item)
break break
case 'file': case 'file':
this.handleOpenFolder(index) this.handleOpenFolder(item.filePath)
break break
case 'search': case 'search':
this.handleSearch(index) this.handleSearch(item.musicInfo)
break break
} }
}, },
@ -274,40 +323,138 @@ export default {
node.classList.add('active') node.classList.add('active')
} }
}, },
async handleFlowBtnClick(action) { // async handleFlowBtnClick(action) {
let selectdData = [...this.selectdData] // let selectdData = [...this.selectdData]
this.removeAllSelect() // this.removeAllSelect()
await this.$nextTick() // await this.$nextTick()
switch (action) { // switch (action) {
case 'start': // case 'start':
this.startTasks(selectdData) // this.startTasks(selectdData)
break // break
case 'pause': // case 'pause':
this.pauseTasks(selectdData) // this.pauseTasks(selectdData)
break // break
case 'remove': // case 'remove':
this.removeTasks(selectdData) // this.removeTasks(selectdData)
break // break
} // }
// },
async handleOpenFolder(filePath) {
if (!await checkPath(filePath)) return
openDirInExplorer(filePath)
}, },
async handleOpenFolder(index) { handleSearch(musicInfo) {
let path = this.list[index].filePath
if (!await checkPath(path)) return
openDirInExplorer(path)
},
handleSearch(index) {
const info = this.list[index].musicInfo
this.$router.push({ this.$router.push({
path: 'search', path: 'search',
query: { query: {
text: `${info.name} ${info.singer}`, text: `${musicInfo.name} ${musicInfo.singer}`,
}, },
}) })
}, },
handleTabChange() { handleTabChange() {
this.selectdData = [] this.selectdData = []
}, },
handleListItemRigthClick(event, index) {
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
let dom_td = findParentNode(event.target, 'TD')
this.listMenu.rightClickItemIndex = index
this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
let item = this.showList[index]
if (item.isComplate) {
this.listMenu.itemMenuControl.play =
this.listMenu.itemMenuControl.file = true
this.listMenu.itemMenuControl.start =
this.listMenu.itemMenuControl.pause = false
} else if (item.status === this.downloadStatus.ERROR || item.status === this.downloadStatus.PAUSE) {
this.listMenu.itemMenuControl.play =
this.listMenu.itemMenuControl.pause =
this.listMenu.itemMenuControl.file = false
this.listMenu.itemMenuControl.start = true
} else {
this.listMenu.itemMenuControl.play =
this.listMenu.itemMenuControl.start =
this.listMenu.itemMenuControl.file = false
this.listMenu.itemMenuControl.pause = true
}
this.$nextTick(() => {
this.listMenu.isShowItemMenu = true
})
},
hideListMenu() {
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.listMenu.isShowItemMenu = false
this.listMenu.rightClickItemIndex = -1
},
handleListItemMenuClick(action) {
// console.log(action)
let index = this.listMenu.rightClickItemIndex
this.hideListMenu()
// let key
let item
switch (action && action.action) {
case 'play':
item = this.showList[index]
if (item) this.handlePlay(item)
break
case 'start':
if (this.selectdData.length) {
let selectdData = [...this.selectdData]
this.removeAllSelect()
this.startTasks(selectdData)
} else {
item = this.showList[index]
if (item) this.startTask(item)
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
case 'pause':
if (this.selectdData.length) {
let selectdData = [...this.selectdData]
this.removeAllSelect()
this.pauseTasks(selectdData)
} else {
item = this.showList[index]
if (item) this.pauseTask(item)
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
case 'file':
item = this.showList[index]
// key = item.key
// index = this.list.findIndex(i => i.key === key)
if (item) this.handleOpenFolder(item.filePath)
break
case 'search':
item = this.showList[index]
if (item) this.handleSearch(item.musicInfo)
break
case 'remove':
if (this.selectdData.length) {
let selectdData = [...this.selectdData]
this.removeAllSelect()
this.removeTasks(selectdData)
} else {
item = this.showList[index]
if (item) this.removeTask(item)
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
}
},
}, },
} }
</script> </script>

237
src/renderer/views/Leaderboard.vue
View File

@ -1,9 +1,20 @@
<template lang="pug"> <template lang="pug">
div(:class="$style.leaderboard") div(:class="$style.leaderboard")
div(:class="$style.header") //- div(:class="$style.header")
material-tab(:class="$style.tab" :list="types" align="left" item-key="id" item-name="name" v-model="tabId") material-tab(:class="$style.tab" :list="types" align="left" item-key="id" item-name="name" v-model="tabId")
material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source") material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :noItem="$t('material.song_list.loding_list')" :list="list") div(:class="$style.lists" ref="dom_lists")
div(:class="$style.listsSelect")
//- h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
material-selection(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
//- button(:class="$style.listsAdd" @click="handleShowNewList" :title="$t('view.list.lists_new_list_btn')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='70%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-list-add')
ul.scroll(:class="$style.listsContent" ref="dom_lists_list")
li(:class="[$style.listsItem, item.id == tabId ? $style.active : null]" :title="item.name" v-for="item in types" :key="item.id" @click="handleToggleList(item.id)")
span(:class="$style.listsLabel") {{item.name}}
div(:class="$style.list")
material-song-list(v-model="selectdData" :rowWidth="{r1: '5%', r2: 'auto', r3: '22%', r4: '22%', r5: '9%', r6: '15%'}" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :noItem="$t('material.song_list.loding_list')" :list="list")
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false") material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false") material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false") material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
@ -81,6 +92,38 @@ export default {
break break
} }
}, },
handleMenuClick(info) {
switch (info.action) {
case 'download':
if (this.selectdData.length) {
this.isShowDownloadMultiple = true
} else {
this.musicInfo = this.list[info.index]
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
case 'play':
this.testPlay(info.index)
break
case 'search':
this.handleSearch(info.index)
break
case 'addTo':
if (this.selectdData.length) {
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
} else {
this.musicInfo = this.list[info.index]
this.$nextTick(() => {
this.isShowListAdd = true
})
}
break
}
},
testPlay(index) { testPlay(index) {
let targetSong let targetSong
if (index == null) { if (index == null) {
@ -129,33 +172,39 @@ export default {
if (isSelect) this.resetSelect() if (isSelect) this.resetSelect()
this.isShowListAddMultiple = false this.isShowListAddMultiple = false
}, },
handleFlowBtnClick(action) { // handleFlowBtnClick(action) {
switch (action) { // switch (action) {
case 'download': // case 'download':
this.isShowDownloadMultiple = true // this.isShowDownloadMultiple = true
break // break
case 'play': // case 'play':
this.testPlay() // this.testPlay()
break // break
case 'add': // case 'add':
this.isShowListAddMultiple = true // this.isShowListAddMultiple = true
break // break
} // }
}, // },
handleSongListAction({ action, data }) { handleSongListAction({ action, data }) {
switch (action) { switch (action) {
case 'listBtnClick': case 'listBtnClick':
return this.handleListBtnClick(data) return this.handleListBtnClick(data)
case 'menuClick':
return this.handleMenuClick(data)
case 'togglePage': case 'togglePage':
return this.handleTogglePage(data) return this.handleTogglePage(data)
case 'flowBtnClick': // case 'flowBtnClick':
return this.handleFlowBtnClick(data) // return this.handleFlowBtnClick(data)
case 'testPlay': case 'testPlay':
return this.testPlay(data) return this.testPlay(data)
case 'search': case 'search':
return this.handleSearch(data) return this.handleSearch(data)
} }
}, },
handleToggleList(id) {
if (this.tabId == id) return
this.tabId = id
},
resetSelect() { resetSelect() {
this.selectdData = [] this.selectdData = []
}, },
@ -169,7 +218,7 @@ export default {
.leaderboard { .leaderboard {
height: 100%; height: 100%;
display: flex; display: flex;
flex-flow: column nowrap; position: relative;
} }
.header { .header {
flex: none; flex: none;
@ -192,4 +241,156 @@ export default {
flex-flow: column nowrap; flex-flow: column nowrap;
} }
.lists {
flex: none;
width: 14.8%;
display: flex;
flex-flow: column nowrap;
}
.listsHeader {
position: relative;
}
.listsSelect {
font-size: 12px;
&:hover {
:global(.icon) {
opacity: 1;
}
}
>:global(.content) {
display: block;
width: 100%;
}
:global(.label-content) {
background-color: transparent !important;
line-height: 38px;
height: 38px;
border-radius: 0;
&:hover {
background: none !important;
}
}
:global(.label) {
color: rgba(0, 0, 0, 0.95) !important;
}
:global(.icon) {
opacity: .6;
transition: opacity .3s ease;
}
:global(.list) {
max-height: 500px;
box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
li {
background-color: @color-theme_2-background_2;
line-height: 38px;
font-size: 13px;
&:hover {
background-color: @color-btn-hover;
}
&:active {
background-color: @color-btn-active;
}
}
}
// line-height: 38px;
// padding: 0 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
flex: none;
}
.listsContent {
flex: auto;
min-width: 0;
overflow-y: scroll;
overflow-x: hidden;
// border-right: 1px solid rgba(0, 0, 0, 0.12);
}
.listsItem {
position: relative;
transition: .3s ease;
transition-property: color, background-color;
background-color: transparent;
&:hover:not(.active) {
background-color: @color-theme_2-hover;
cursor: pointer;
}
&.active {
// background-color:
color: @color-theme;
}
&.selected {
background-color: @color-theme_2-active;
}
&.clicked {
background-color: @color-theme_2-hover;
}
&.editing {
padding: 0 10px;
background-color: @color-theme_2-hover;
.listsLabel {
display: none;
}
.listsInput {
display: block;
}
}
}
.listsLabel {
display: block;
height: 100%;
padding: 0 10px;
font-size: 13px;
line-height: 36px;
.mixin-ellipsis-1;
}
.list {
overflow: hidden;
height: 100%;
flex: auto;
display: flex;
flex-flow: column nowrap;
// .noItem {
// }
}
each(@themes, {
:global(#container.@{value}) {
.listsSelect {
:global(.list) {
li {
background-color: ~'@{color-@{value}-theme_2-background_2}';
&:hover {
background-color: ~'@{color-@{value}-btn-hover}';
}
&:active {
background-color: ~'@{color-@{value}-btn-active}';
}
}
}
}
.listsItem {
&:hover:not(.active) {
background-color: ~'@{color-@{value}-theme_2-hover}';
}
&.active {
color: ~'@{color-@{value}-theme}';
}
&.select {
background-color: ~'@{color-@{value}-theme_2-active}';
}
&.clicked {
background-color: ~'@{color-@{value}-theme_2-hover}';
}
&.editing {
background-color: ~'@{color-@{value}-theme_2-hover}';
}
}
}
})
</style> </style>

231
src/renderer/views/List.vue
View File

@ -1,5 +1,5 @@
<template lang="pug"> <template lang="pug">
div(:class="$style.container" @click="handleContainerClick($event)") div(:class="$style.container" @click="handleContainerClick")
div(:class="$style.lists" ref="dom_lists") div(:class="$style.lists" ref="dom_lists")
div(:class="$style.listHeader") div(:class="$style.listHeader")
h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}} h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
@ -13,30 +13,30 @@
span(:class="$style.listsLabel") {{loveList.name}} span(:class="$style.listsLabel") {{loveList.name}}
li.user-list(:class="[$style.listsItem, item.id == listId ? $style.active : null, listsData.rightClickItemIndex == index ? $style.clicked : null]" @contextmenu="handleListsItemRigthClick($event, index)" :title="item.name" v-for="(item, index) in userList" :key="item.id") li.user-list(:class="[$style.listsItem, item.id == listId ? $style.active : null, listsData.rightClickItemIndex == index ? $style.clicked : null]" @contextmenu="handleListsItemRigthClick($event, index)" :title="item.name" v-for="(item, index) in userList" :key="item.id")
span(:class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)") {{item.name}} span(:class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)") {{item.name}}
input.key-bind(:class="$style.listsInput" type="text" @keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name") input.key-bind(:class="$style.listsInput" @contextmenu.stop type="text" @keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name")
transition(enter-active-class="animated-fast slideInLeft" leave-active-class="animated-fast fadeOut" @after-leave="handleListsNewAfterLeave") transition(enter-active-class="animated-fast slideInLeft" leave-active-class="animated-fast fadeOut" @after-leave="handleListsNewAfterLeave")
li(:class="[$style.listsItem, $style.listsNew, listsData.isNewLeave ? $style.newLeave : null]" v-if="listsData.isShowNewList") li(:class="[$style.listsItem, $style.listsNew, listsData.isNewLeave ? $style.newLeave : null]" v-if="listsData.isShowNewList")
input.key-bind(:class="$style.listsInput" ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate($event)" @blur="handleListsCreate($event)" :placeholder="$t('view.list.lists_new_list_input')") input.key-bind(:class="$style.listsInput" @contextmenu.stop ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate" @blur="handleListsCreate" :placeholder="$t('view.list.lists_new_list_input')")
div(:class="$style.list") div(:class="$style.list")
//- transition //- transition
div(:class="$style.thead") div(:class="$style.thead")
table table
thead thead
tr tr
th.nobreak.center(style="width: 10px;") # th.nobreak.center(style="width: 5%;") #
th.nobreak(style="width: 25%;") {{$t('view.list.name')}} th.nobreak {{$t('view.list.name')}}
th.nobreak(style="width: 20%;") {{$t('view.list.singer')}} th.nobreak(style="width: 22%;") {{$t('view.list.singer')}}
th.nobreak(style="width: 20%;") {{$t('view.list.album')}} th.nobreak(style="width: 22%;") {{$t('view.list.album')}}
th.nobreak(style="width: 9%;") {{$t('view.list.time')}} th.nobreak(style="width: 9%;") {{$t('view.list.time')}}
th.nobreak(style="width: 21%;") {{$t('view.list.action')}} th.nobreak(style="width: 15%;") {{$t('view.list.action')}}
div(v-if="delayShow && list.length" :class="$style.content") div(v-if="delayShow && list.length" :class="$style.content")
div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent") div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
table table
tbody(@contextmenu="handleContextMenu" ref="dom_tbody") tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid" tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid" @contextmenu="handleListItemRigthClick($event, index)"
@click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]") @click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}} td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
td.break(style="width: 25%;") td.break
span.select {{item.name}} span.select {{item.name}}
span(:class="[$style.labelSource, $style.noSelect]" 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['128k']") 128K
@ -44,13 +44,13 @@
//- span.badge.badge-secondary(v-if="item._types['320k']") 320K //- 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-info(v-if="item._types.ape") APE
//- span.badge.badge-theme-success(v-if="item._types.flac") FLAC //- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
td.break(style="width: 20%;") td.break(style="width: 22%;")
span.select {{item.singer}} span.select {{item.singer}}
td.break(style="width: 20%;") td.break(style="width: 22%;")
span.select {{item.albumName}} span.select {{item.albumName}}
td(style="width: 9%;") td(style="width: 9%;")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}} span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
td(style="width: 21%; padding-left: 0; padding-right: 0;") td(style="width: 15%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" @btn-click="handleListBtnClick") 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)') 下载 //- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
//- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听 //- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
@ -60,15 +60,16 @@
p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')") 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") material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdListDetailData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false") material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdListDetailData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick") //- material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick")
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="isShowListAdd = false") material-list-add-modal(:show="isShowListAdd" :is-move="isMove" :from-list-id="listData.id" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdListDetailData" :exclude-list-id="excludeListId" @close="handleListAddModalClose") material-list-add-multiple-modal(:show="isShowListAddMultiple" :is-move="isMoveMultiple" :from-list-id="listData.id" :musicList="selectdListDetailData" :exclude-list-id="excludeListId" @close="handleListAddMultipleModalClose")
material-menu(:menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick") material-menu(:menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick")
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
</template> </template>
<script> <script>
import { mapMutations, mapGetters, mapActions } from 'vuex' import { mapMutations, mapGetters, mapActions } from 'vuex'
import { throttle, scrollTo, clipboardWriteText, assertApiSupport } from '../utils' import { throttle, scrollTo, clipboardWriteText, assertApiSupport, findParentNode } from '../utils'
export default { export default {
name: 'List', name: 'List',
data() { data() {
@ -80,7 +81,7 @@ export default {
musicInfo: null, musicInfo: null,
selectdListDetailData: [], selectdListDetailData: [],
selectdListData: [], selectdListData: [],
isShowEditBtn: false, // isShowEditBtn: false,
isShowDownloadMultiple: false, isShowDownloadMultiple: false,
delayShow: false, delayShow: false,
routeLeaveLocation: null, routeLeaveLocation: null,
@ -109,6 +110,22 @@ export default {
isShowNewList: false, isShowNewList: false,
isNewLeave: false, isNewLeave: false,
}, },
listMenu: {
isShowItemMenu: false,
itemMenuControl: {
play: true,
addTo: true,
moveTo: true,
download: true,
remove: true,
},
menuLocation: {
x: 0,
y: 0,
},
},
isMove: false,
isMoveMultiple: false,
} }
}, },
computed: { computed: {
@ -175,16 +192,45 @@ export default {
}, },
] ]
}, },
listItemMenu() {
return [
{
name: this.$t('view.list.list_play'),
action: 'play',
disabled: !this.listMenu.itemMenuControl.play,
},
{
name: this.$t('view.list.list_download'),
action: 'download',
disabled: !this.listMenu.itemMenuControl.download,
},
{
name: this.$t('view.list.list_add_to'),
action: 'addTo',
disabled: !this.listMenu.itemMenuControl.addTo,
},
{
name: this.$t('view.list.list_move_to'),
action: 'moveTo',
disabled: !this.listMenu.itemMenuControl.moveTo,
},
{
name: this.$t('view.list.list_remove'),
action: 'remove',
disabled: !this.listMenu.itemMenuControl.remove,
},
]
},
}, },
watch: { watch: {
selectdListDetailData(n) { // selectdListDetailData(n) {
const len = n.length // const len = n.length
if (len) { // if (len) {
this.isShowEditBtn = true // this.isShowEditBtn = true
} else { // } else {
this.isShowEditBtn = false // this.isShowEditBtn = false
} // }
}, // },
'listData.list'(n, o) { 'listData.list'(n, o) {
if (n === o && n.length === o.length) return if (n === o && n.length === o.length) return
this.removeAllSelectListDetail() this.removeAllSelectListDetail()
@ -494,23 +540,28 @@ export default {
this.removeAllSelectListDetail() this.removeAllSelectListDetail()
this.isShowDownloadMultiple = false this.isShowDownloadMultiple = false
}, },
handleFlowBtnClick(action) { // handleFlowBtnClick(action) {
switch (action) { // switch (action) {
case 'download': // case 'download':
this.isShowDownloadMultiple = true // this.isShowDownloadMultiple = true
break // break
case 'remove': // case 'remove':
this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData }) // this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
this.removeAllSelectListDetail() // this.removeAllSelectListDetail()
break // break
case 'add': // case 'add':
this.isShowListAddMultiple = true // this.isShowListAddMultiple = true
break // break
} // }
// },
handleListAddModalClose() {
this.isShowListAdd = false
if (this.isMove) this.isMove = false
}, },
handleListAddModalClose(isClearSelect) { handleListAddMultipleModalClose(isClearSelect) {
if (isClearSelect) this.removeAllSelectListDetail() if (isClearSelect) this.removeAllSelectListDetail()
this.isShowListAddMultiple = false this.isShowListAddMultiple = false
if (this.isMoveMultiple) this.isMoveMultiple = false
}, },
getMusicLocation(index) { getMusicLocation(index) {
let dom = document.getElementById('mid_' + this.list[index].songmid) let dom = document.getElementById('mid_' + this.list[index].songmid)
@ -521,6 +572,7 @@ export default {
// }, // },
handleContextMenu(event) { handleContextMenu(event) {
if (!event.target.classList.contains('select')) return if (!event.target.classList.contains('select')) return
event.stopImmediatePropagation()
let classList = this.$refs.dom_scrollContent.classList let classList = this.$refs.dom_scrollContent.classList
classList.add(this.$style.copying) classList.add(this.$style.copying)
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
@ -591,33 +643,116 @@ export default {
this.listsData.rightClickItemIndex = index this.listsData.rightClickItemIndex = index
this.listsData.menuLocation.x = event.currentTarget.offsetLeft + event.offsetX this.listsData.menuLocation.x = event.currentTarget.offsetLeft + event.offsetX
this.listsData.menuLocation.y = event.currentTarget.offsetTop + event.offsetY - this.$refs.dom_lists_list.scrollTop this.listsData.menuLocation.y = event.currentTarget.offsetTop + event.offsetY - this.$refs.dom_lists_list.scrollTop
this.hideListMenu()
this.$nextTick(() => { this.$nextTick(() => {
this.listsData.isShowItemMenu = true this.listsData.isShowItemMenu = true
}) })
}, },
handleListItemRigthClick(event, index) {
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
let dom_td = findParentNode(event.target, 'TD')
this.listMenu.rightClickItemIndex = index
this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
this.hideListsMenu()
this.$nextTick(() => {
this.listMenu.isShowItemMenu = true
})
},
hideListsMenu() {
this.listsData.isShowItemMenu = false
this.listsData.rightClickItemIndex = -1
},
handleListsItemMenuClick(action) { handleListsItemMenuClick(action) {
// console.log(action) // console.log(action)
let index = this.listsData.rightClickItemIndex
this.hideListsMenu()
this.listsData.isShowItemMenu = false this.listsData.isShowItemMenu = false
let dom let dom
switch (action && action.action) { switch (action && action.action) {
case 'rename': case 'rename':
dom = this.$refs.dom_lists_list.querySelectorAll('.user-list')[this.listsData.rightClickItemIndex] dom = this.$refs.dom_lists_list.querySelectorAll('.user-list')[index]
this.$nextTick(() => { this.$nextTick(() => {
dom.classList.add(this.$style.editing) dom.classList.add(this.$style.editing)
dom.querySelector('input').focus() dom.querySelector('input').focus()
}) })
break break
case 'moveup': case 'moveup':
this.moveupUserList(this.listsData.rightClickItemIndex) this.moveupUserList(index)
break break
case 'movedown': case 'movedown':
this.movedownUserList(this.listsData.rightClickItemIndex) this.movedownUserList(index)
break break
case 'remove': case 'remove':
this.removeUserList(this.listsData.rightClickItemIndex) this.removeUserList(index)
break
}
},
hideListMenu() {
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.listMenu.isShowItemMenu = false
this.listMenu.rightClickItemIndex = -1
},
handleListItemMenuClick(action) {
// console.log(action)
let index = this.listMenu.rightClickItemIndex
this.hideListMenu()
let minfo
switch (action && action.action) {
case 'play':
this.testPlay(index)
break
case 'addTo':
if (this.selectdListDetailData.length) {
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
} else {
this.musicInfo = this.list[index]
this.$nextTick(() => {
this.isShowListAdd = true
})
}
break
case 'moveTo':
if (this.selectdListDetailData.length) {
this.isMoveMultiple = true
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
} else {
this.musicInfo = this.list[index]
this.isMove = true
this.$nextTick(() => {
this.isShowListAdd = true
})
}
break
case 'download':
if (this.selectdListDetailData.length) {
this.isShowDownloadMultiple = true
} else {
minfo = this.list[index]
if (!this.assertApiSupport(minfo.source)) return
this.musicInfo = minfo
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
case 'remove':
if (this.selectdListDetailData.length) {
this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
this.removeAllSelectListDetail()
} else {
this.handleRemove(index)
}
break break
} }
this.listsData.rightClickItemIndex = -1
}, },
}, },
} }
@ -712,7 +847,7 @@ export default {
} }
.listsLabel { .listsLabel {
display: block; display: block;
height: 100%; height: 36px;
padding: 0 10px; padding: 0 10px;
font-size: 13px; font-size: 13px;
line-height: 36px; line-height: 36px;

185
src/renderer/views/Search.vue
View File

@ -8,29 +8,29 @@
table table
thead thead
tr tr
th.nobreak.center(style="width: 10px;") # th.nobreak.center(style="width: 5%;") #
th.nobreak(style="width: 25%;") {{$t('view.search.name')}} th.nobreak {{$t('view.search.name')}}
th.nobreak(style="width: 20%;") {{$t('view.search.singer')}} th.nobreak(style="width: 22%;") {{$t('view.search.singer')}}
th.nobreak(style="width: 25%;") {{$t('view.search.album')}} th.nobreak(style="width: 22%;") {{$t('view.search.album')}}
th.nobreak(style="width: 10%;") {{$t('view.search.time')}} th.nobreak(style="width: 8%;") {{$t('view.search.time')}}
th.nobreak(style="width: 15%;") {{$t('view.search.action')}} th.nobreak(style="width: 13%;") {{$t('view.search.action')}}
div.scroll(:class="$style.tbody" ref="dom_scrollContent") div.scroll(:class="$style.tbody" ref="dom_scrollContent")
table table
tbody(@contextmenu="handleContextMenu" ref="dom_tbody") tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @click="handleDoubleClick($event, index)") tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)")
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}} td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
td.break(style="width: 25%;") td.break
span.select {{item.name}} span.select {{item.name}}
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-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.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}} span(:class="[$style.labelSource, $style.noSelect]" v-if="searchSourceId == 'all'") {{item.source}}
td.break(style="width: 20%;") td.break(style="width: 22%;")
span.select {{item.singer}} span.select {{item.singer}}
td.break(style="width: 25%;") td.break(style="width: 22%;")
span.select {{item.albumName}} span.select {{item.albumName}}
td(style="width: 10%;") td(style="width: 8%;")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}} span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
td(style="width: 15%; padding-left: 0; padding-right: 0;") td(style="width: 13%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :remove-btn="false" :class="$style.listBtn" material-list-buttons(:index="index" :remove-btn="false" :class="$style.listBtn"
:play-btn="assertApiSupport(item.source)" :play-btn="assertApiSupport(item.source)"
:download-btn="assertApiSupport(item.source)" :download-btn="assertApiSupport(item.source)"
@ -53,14 +53,15 @@
p {{$t('view.search.no_item')}} p {{$t('view.search.no_item')}}
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false") material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false") material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
material-flow-btn(:show="isShowEditBtn && (searchSourceId == 'all' || assertApiSupport(searchSourceId))" :remove-btn="false" @btn-click="handleFlowBtnClick") //- material-flow-btn(:show="isShowEditBtn && (searchSourceId == 'all' || assertApiSupport(searchSourceId))" :remove-btn="false" @btn-click="handleFlowBtnClick")
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false") material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="handleListAddModalClose")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose") material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddMultipleModalClose")
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
</template> </template>
<script> <script>
import { mapGetters, mapActions, mapMutations } from 'vuex' import { mapGetters, mapActions, mapMutations } from 'vuex'
import { scrollTo, clipboardWriteText, assertApiSupport } from '../utils' import { scrollTo, clipboardWriteText, assertApiSupport, findParentNode } from '../utils'
// import music from '../utils/music' // import music from '../utils/music'
export default { export default {
name: 'Search', name: 'Search',
@ -73,7 +74,7 @@ export default {
isShowDownload: false, isShowDownload: false,
musicInfo: null, musicInfo: null,
selectdData: [], selectdData: [],
isShowEditBtn: false, // isShowEditBtn: false,
isShowDownloadMultiple: false, isShowDownloadMultiple: false,
searchSourceId: null, searchSourceId: null,
isShowListAdd: false, isShowListAdd: false,
@ -82,6 +83,18 @@ export default {
isShiftDown: false, isShiftDown: false,
isModDown: false, isModDown: false,
}, },
listMenu: {
isShowItemMenu: false,
itemMenuControl: {
play: true,
addTo: true,
download: true,
},
menuLocation: {
x: 0,
y: 0,
},
},
} }
}, },
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
@ -120,14 +133,14 @@ export default {
this.handleGetHotSearch() this.handleGetHotSearch()
}, },
watch: { watch: {
selectdData(n) { // selectdData(n) {
const len = n.length // const len = n.length
if (len) { // if (len) {
this.isShowEditBtn = true // this.isShowEditBtn = true
} else { // } else {
this.isShowEditBtn = false // this.isShowEditBtn = false
} // }
}, // },
'listInfo.list'() { 'listInfo.list'() {
this.removeAllSelect() this.removeAllSelect()
}, },
@ -147,6 +160,25 @@ export default {
...mapGetters(['userInfo', 'setting']), ...mapGetters(['userInfo', 'setting']),
...mapGetters('search', ['sourceList', 'allList', 'sources', 'historyList']), ...mapGetters('search', ['sourceList', 'allList', 'sources', 'historyList']),
...mapGetters('list', ['defaultList']), ...mapGetters('list', ['defaultList']),
listItemMenu() {
return [
{
name: this.$t('view.search.list_play'),
action: 'play',
disabled: !this.listMenu.itemMenuControl.play,
},
{
name: this.$t('view.search.list_download'),
action: 'download',
disabled: !this.listMenu.itemMenuControl.download,
},
{
name: this.$t('view.search.list_add_to'),
action: 'addTo',
disabled: !this.listMenu.itemMenuControl.addTo,
},
]
},
listInfo() { listInfo() {
return this.setting.search.searchSource == 'all' ? this.allList : this.sourceList[this.setting.search.searchSource] return this.setting.search.searchSource == 'all' ? this.allList : this.sourceList[this.setting.search.searchSource]
}, },
@ -329,32 +361,36 @@ export default {
node.classList.add('active') node.classList.add('active')
} }
}, },
handleFlowBtnClick(action) { // handleFlowBtnClick(action) {
switch (action) { // switch (action) {
case 'download': // case 'download':
this.isShowDownloadMultiple = true // this.isShowDownloadMultiple = true
break // break
case 'play': // case 'play':
this.testPlay() // this.testPlay()
this.removeAllSelect() // this.removeAllSelect()
break // break
case 'add': // case 'add':
this.isShowListAddMultiple = true // this.isShowListAddMultiple = true
break // break
} // }
}, // },
filterList(list) { filterList(list) {
return this.searchSourceId == 'all' return this.searchSourceId == 'all'
? list.filter(s => this.assertApiSupport(s.source)) ? list.filter(s => this.assertApiSupport(s.source))
: this.assertApiSupport(this.searchSourceId) : this.assertApiSupport(this.searchSourceId)
? [...list] : [] ? [...list] : []
}, },
handleListAddModalClose(isClearSelect) { handleListAddModalClose() {
if (isClearSelect) this.removeAllSelect() this.isShowListAdd = false
},
handleListAddMultipleModalClose(isClearSelect) {
if (isClearSelect) this.removeAllSelectListDetail()
this.isShowListAddMultiple = false this.isShowListAddMultiple = false
}, },
handleContextMenu(event) { handleContextMenu(event) {
if (!event.target.classList.contains('select')) return if (!event.target.classList.contains('select')) return
event.stopImmediatePropagation()
let classList = this.$refs.dom_scrollContent.classList let classList = this.$refs.dom_scrollContent.classList
classList.add(this.$style.copying) classList.add(this.$style.copying)
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
@ -380,6 +416,59 @@ export default {
assertApiSupport(source) { assertApiSupport(source) {
return assertApiSupport(source) return assertApiSupport(source)
}, },
handleListItemRigthClick(event, index) {
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
let dom_td = findParentNode(event.target, 'TD')
this.listMenu.rightClickItemIndex = index
this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
this.$nextTick(() => {
this.listMenu.isShowItemMenu = true
})
},
hideListMenu() {
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.listMenu.isShowItemMenu = false
this.listMenu.rightClickItemIndex = -1
},
handleListItemMenuClick(action) {
// console.log(action)
let index = this.listMenu.rightClickItemIndex
this.hideListMenu()
let minfo
switch (action && action.action) {
case 'play':
this.testPlay(index)
break
case 'addTo':
if (this.selectdData.length) {
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
} else {
this.musicInfo = this.listInfo.list[index]
this.$nextTick(() => {
this.isShowListAdd = true
})
}
break
case 'download':
if (this.selectdData.length) {
this.isShowDownloadMultiple = true
} else {
minfo = this.listInfo.list[index]
if (!this.assertApiSupport(minfo.source)) return
this.musicInfo = minfo
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
}
},
}, },
} }
</script> </script>
@ -397,7 +486,7 @@ export default {
flex: none; flex: none;
} }
.list { .list {
position: relative; // position: relative;
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
@ -498,10 +587,10 @@ export default {
.mixin-ellipsis-1; .mixin-ellipsis-1;
max-width: 150px; max-width: 150px;
&:hover { &:hover {
background-color: @color-theme_2-hover; background-color: @color-btn-hover;
} }
&:active { &:active {
background-color: @color-theme_2-active; background-color: @color-btn-active;
} }
} }
.history-clear-btn { .history-clear-btn {
@ -536,10 +625,10 @@ each(@themes, {
color: ~'@{color-@{value}-btn}'; color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}'; background-color: ~'@{color-@{value}-btn-background}';
&:hover { &:hover {
background-color: ~'@{color-@{value}-theme_2-hover}'; background-color: ~'@{color-@{value}-btn-hover}';
} }
&:active { &:active {
background-color: ~'@{color-@{value}-theme_2-active}'; background-color: ~'@{color-@{value}-btn-active}';
} }
} }
.tbody { .tbody {

64
src/renderer/views/SongList.vue
View File

@ -197,6 +197,38 @@ export default {
break break
} }
}, },
handleMenuClick(info) {
switch (info.action) {
case 'download':
if (this.selectdData.length) {
this.isShowDownloadMultiple = true
} else {
this.musicInfo = this.listDetail.list[info.index]
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
case 'play':
this.testPlay(info.index)
break
case 'search':
this.handleSearch(info.index)
break
case 'addTo':
if (this.selectdData.length) {
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
} else {
this.musicInfo = this.listDetail.list[info.index]
this.$nextTick(() => {
this.isShowListAdd = true
})
}
break
}
},
testPlay(index) { testPlay(index) {
let targetSong let targetSong
if (index == null) { if (index == null) {
@ -259,27 +291,29 @@ export default {
this.handleGetListDetail(this.selectListInfo.id, 1) this.handleGetListDetail(this.selectListInfo.id, 1)
}) })
}, },
handleFlowBtnClick(action) { // handleFlowBtnClick(action) {
switch (action) { // switch (action) {
case 'download': // case 'download':
this.isShowDownloadMultiple = true // this.isShowDownloadMultiple = true
break // break
case 'play': // case 'play':
this.testPlay() // this.testPlay()
break // break
case 'add': // case 'add':
this.isShowListAddMultiple = true // this.isShowListAddMultiple = true
break // break
} // }
}, // },
handleSongListAction({ action, data }) { handleSongListAction({ action, data }) {
switch (action) { switch (action) {
case 'listBtnClick': case 'listBtnClick':
return this.handleListBtnClick(data) return this.handleListBtnClick(data)
case 'menuClick':
return this.handleMenuClick(data)
case 'togglePage': case 'togglePage':
return this.handleToggleListDetailPage(data) return this.handleToggleListDetailPage(data)
case 'flowBtnClick': // case 'flowBtnClick':
return this.handleFlowBtnClick(data) // return this.handleFlowBtnClick(data)
case 'testPlay': case 'testPlay':
return this.testPlay(data) return this.testPlay(data)
case 'search': case 'search':