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

Merge branch 'v1' into dev

pull/277/head
lyswhut 2020-05-16 20:29:27 +08:00
parent e29ca2e79c afc3f48f51
commit 9091c2c346
44 changed files with 1659 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
publish/changeLog.md
View File

@ -2,6 +2,13 @@
- 新增`rpm`、`pacman`包的打包 - 新增`rpm`、`pacman`包的打包
- 新增当前音频输出设备改变时是否暂停播放的设置，默认关闭 - 新增当前音频输出设备改变时是否暂停播放的设置，默认关闭
- 新增自定义列表，编辑列表名字时，按`ESC`键可取消编辑，按回车键或使输入框失去焦点即可保存列表名字
### 优化
- 优化浮动按钮与布局颜色
- 改进歌曲切换时的歌词滚动效果
- 极大优化批量添加、删除播放列表的歌曲操作流畅度
### 修复 ### 修复

2
src/common/config.js
View File

@ -33,7 +33,7 @@ module.exports = {
name: 'larger', name: 'larger',
width: 1198, width: 1198,
height: 766, height: 766,
fontSize: '18px', fontSize: '17px',
}, },
{ {
id: 5, id: 5,

38
src/renderer/App.vue
View File

@ -58,7 +58,7 @@ export default {
computed: { computed: {
...mapGetters('player', ['isShowPlayerDetail']), ...mapGetters('player', ['isShowPlayerDetail']),
...mapGetters(['setting', 'theme', 'version', 'windowSizeActive']), ...mapGetters(['setting', 'theme', 'version', 'windowSizeActive']),
...mapGetters('list', ['defaultList', 'loveList']), ...mapGetters('list', ['defaultList', 'loveList', 'userList']),
...mapGetters('download', { ...mapGetters('download', {
downloadList: 'list', downloadList: 'list',
downloadStatus: 'downloadStatus', downloadStatus: 'downloadStatus',
@ -81,6 +81,9 @@ export default {
this.saveLoveList = throttle(n => { this.saveLoveList = throttle(n => {
window.electronStore_list.set('loveList', n) window.electronStore_list.set('loveList', n)
}, 500) }, 500)
this.saveUserList = throttle(n => {
window.electronStore_list.set('userList', n)
}, 500)
this.saveDownloadList = throttle(n => { this.saveDownloadList = throttle(n => {
window.electronStore_list.set('downloadList', n) window.electronStore_list.set('downloadList', n)
}, 1000) }, 1000)
@ -112,6 +115,12 @@ export default {
}, },
deep: true, deep: true,
}, },
userList: {
handler(n) {
this.saveUserList(n)
},
deep: true,
},
downloadList: { downloadList: {
handler(n) { handler(n) {
this.saveDownloadList(n) this.saveDownloadList(n)
@ -196,6 +205,7 @@ export default {
}) })
}, 60 * 30 * 1000) }, 60 * 30 * 1000)
this.listenEvent()
this.initData() this.initData()
this.globalObj.apiSource = this.setting.apiSource this.globalObj.apiSource = this.setting.apiSource
this.globalObj.qualityList = music.supportQuality[this.setting.apiSource] this.globalObj.qualityList = music.supportQuality[this.setting.apiSource]
@ -221,9 +231,10 @@ export default {
this.initDownloadList() // 初始化下载列表 this.initDownloadList() // 初始化下载列表
}, },
initPlayList() { initPlayList() {
let defaultList = window.electronStore_list.get('defaultList') let defaultList = window.electronStore_list.get('defaultList') || this.defaultList
let loveList = window.electronStore_list.get('loveList') let loveList = window.electronStore_list.get('loveList') || this.loveList
this.initList({ defaultList, loveList }) let userList = window.electronStore_list.get('userList') || this.userList
this.initList({ defaultList, loveList, userList })
}, },
initDownloadList() { initDownloadList() {
let downloadList = window.electronStore_list.get('downloadList') let downloadList = window.electronStore_list.get('downloadList')
@ -303,9 +314,22 @@ export default {
handleXMVerifyModalClose() { handleXMVerifyModalClose() {
music.xm.closeVerifyModal() music.xm.closeVerifyModal()
}, },
listenEvent() {
window.eventHub.$on('key_escape_down', this.handle_key_esc_down)
},
unlistenEvent() {
window.eventHub.$off('key_escape_down', this.handle_key_esc_down)
},
handle_key_esc_down({ event }) {
if (event.repeat) return
if (event.target.tagName != 'INPUT' || event.target.classList.contains('ignore-esc')) return
event.target.value = ''
event.target.blur()
},
}, },
beforeDestroy() { beforeDestroy() {
this.clearUpdateTimeout() this.clearUpdateTimeout()
this.unlistenEvent()
if (this.isProd) { if (this.isProd) {
document.body.removeEventListener('mouseenter', this.dieableIgnoreMouseEvents) document.body.removeEventListener('mouseenter', this.dieableIgnoreMouseEvents)
document.body.removeEventListener('mouseleave', this.enableIgnoreMouseEvents) document.body.removeEventListener('mouseleave', this.enableIgnoreMouseEvents)
@ -330,7 +354,7 @@ body {
padding: @shadow-app; padding: @shadow-app;
#container { #container {
box-shadow: 0 0 @shadow-app rgba(0, 0, 0, 0.5); box-shadow: 0 0 @shadow-app rgba(0, 0, 0, 0.5);
border-radius: 4px; border-radius: @radius-border;
background-color: transparent; background-color: transparent;
} }
} }
@ -359,6 +383,10 @@ body {
flex-flow: column nowrap; flex-flow: column nowrap;
transition: background-color @transition-theme; transition: background-color @transition-theme;
background-color: @color-theme_2; background-color: @color-theme_2;
border-top-left-radius: @radius-border;
border-bottom-left-radius: @radius-border;
overflow: hidden;
} }
#toolbar, #player { #toolbar, #player {
flex: none; flex: none;

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

@ -40,25 +40,23 @@ table {
th { th {
font-size: 12px; font-size: 12px;
text-align: left; text-align: left;
height: 28px; line-height: 38px;
line-height: 28px; padding: 0 6px;
padding: 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
} }
tbody { tbody {
tr { tr {
border-top: 1px solid @color-theme_2-line;
// border-top: 1px solid rgba(0, 0, 0, 0.12); // border-top: 1px solid rgba(0, 0, 0, 0.12);
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
+ tr {
border-top: 1px solid @color-theme_2-line;
}
&:hover { &:hover {
background-color: @color-theme_2-hover; background-color: @color-theme_2-hover;
} }
&.active { &.active {
background-color: @color-theme_2-active; background-color: @color-theme_2-active;
} }
&:first-child {
border-top: none;
}
td { td {
padding: 6px; padding: 6px;
position: relative; position: relative;

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

@ -35,9 +35,9 @@
// @color-search-list-background: fadeout(lighten(@color-theme, 35%), 10%); // @color-search-list-background: fadeout(lighten(@color-theme, 35%), 10%);
@color-search-list-hover: fadeout(darken(@color-theme, 10%), 70%); @color-search-list-hover: fadeout(darken(@color-theme, 10%), 70%);
@color-scrollbar-track: fadeout(@color-theme, 80%); @color-scrollbar-track: fadeout(lighten(@color-theme, 10%), 65%);
@color-scrollbar-thumb: fadeout(@color-theme, 60%); @color-scrollbar-thumb: fadeout(lighten(@color-theme, 10%), 45%);
@color-scrollbar-thumb-hover: fadeout(@color-theme, 40%); @color-scrollbar-thumb-hover: fadeout(lighten(@color-theme, 10%), 25%);
@color-player-pic-c1: fadeout(@color-theme_2, 50%); @color-player-pic-c1: fadeout(@color-theme_2, 50%);
@ -95,9 +95,9 @@
@color-green-pagination-select: fadeout(lighten(@color-green-theme, 10%), 50%); @color-green-pagination-select: fadeout(lighten(@color-green-theme, 10%), 50%);
@color-green-search-form-background: fadeout(lighten(@color-green-theme, 35%), 10%); @color-green-search-form-background: fadeout(lighten(@color-green-theme, 35%), 10%);
@color-green-search-list-hover: fadeout(darken(@color-green-theme, 10%), 70%); @color-green-search-list-hover: fadeout(darken(@color-green-theme, 10%), 70%);
@color-green-scrollbar-track: fadeout(@color-green-theme, 80%); @color-green-scrollbar-track: fadeout(lighten(@color-green-theme, 10%), 75%);
@color-green-scrollbar-thumb: fadeout(@color-green-theme, 60%); @color-green-scrollbar-thumb: fadeout(lighten(@color-green-theme, 10%), 50%);
@color-green-scrollbar-thumb-hover: fadeout(@color-green-theme, 40%); @color-green-scrollbar-thumb-hover: fadeout(lighten(@color-green-theme, 10%), 30%);
@color-green-player-pic-c1: fadeout(@color-green-theme_2, 50%); @color-green-player-pic-c1: fadeout(@color-green-theme_2, 50%);
@color-green-player-pic-c2: darken(@color-green-theme_2, 30%); @color-green-player-pic-c2: darken(@color-green-theme_2, 30%);
@color-green-player-progress: darken(@color-green-theme_2, 6%); @color-green-player-progress: darken(@color-green-theme_2, 6%);
@ -148,9 +148,9 @@
@color-yellow-pagination-select: fadeout(lighten(@color-yellow-theme, 5%), 50%); @color-yellow-pagination-select: fadeout(lighten(@color-yellow-theme, 5%), 50%);
@color-yellow-search-form-background: fadeout(lighten(@color-yellow-theme, 25%), 10%); @color-yellow-search-form-background: fadeout(lighten(@color-yellow-theme, 25%), 10%);
@color-yellow-search-list-hover: fadeout(darken(@color-yellow-theme, 10%), 60%); @color-yellow-search-list-hover: fadeout(darken(@color-yellow-theme, 10%), 60%);
@color-yellow-scrollbar-track: fadeout(@color-yellow-theme, 60%); @color-yellow-scrollbar-track: fadeout(lighten(@color-yellow-theme, 5%), 65%);
@color-yellow-scrollbar-thumb: fadeout(@color-yellow-theme, 45%); @color-yellow-scrollbar-thumb: fadeout(lighten(@color-yellow-theme, 5%), 30%);
@color-yellow-scrollbar-thumb-hover: fadeout(@color-yellow-theme, 30%); @color-yellow-scrollbar-thumb-hover: fadeout(lighten(@color-yellow-theme, 5%), 15%);
@color-yellow-player-pic-c1: fadeout(@color-yellow-theme_2, 50%); @color-yellow-player-pic-c1: fadeout(@color-yellow-theme_2, 50%);
@color-yellow-player-pic-c2: darken(@color-yellow-theme_2, 30%); @color-yellow-player-pic-c2: darken(@color-yellow-theme_2, 30%);
@color-yellow-player-progress: darken(@color-yellow-theme_2, 6%); @color-yellow-player-progress: darken(@color-yellow-theme_2, 6%);
@ -200,9 +200,9 @@
@color-orange-pagination-select: fadeout(lighten(@color-orange-theme, 10%), 50%); @color-orange-pagination-select: fadeout(lighten(@color-orange-theme, 10%), 50%);
@color-orange-search-form-background: fadeout(lighten(@color-orange-theme, 30%), 10%); @color-orange-search-form-background: fadeout(lighten(@color-orange-theme, 30%), 10%);
@color-orange-search-list-hover: fadeout(darken(@color-orange-theme, 10%), 70%); @color-orange-search-list-hover: fadeout(darken(@color-orange-theme, 10%), 70%);
@color-orange-scrollbar-track: fadeout(@color-orange-theme, 80%); @color-orange-scrollbar-track: fadeout(lighten(@color-orange-theme, 10%), 75%);
@color-orange-scrollbar-thumb: fadeout(@color-orange-theme, 60%); @color-orange-scrollbar-thumb: fadeout(lighten(@color-orange-theme, 10%), 45%);
@color-orange-scrollbar-thumb-hover: fadeout(@color-orange-theme, 40%); @color-orange-scrollbar-thumb-hover: fadeout(lighten(@color-orange-theme, 10%), 25%);
@color-orange-player-pic-c1: fadeout(@color-orange-theme_2, 50%); @color-orange-player-pic-c1: fadeout(@color-orange-theme_2, 50%);
@color-orange-player-pic-c2: darken(@color-orange-theme_2, 30%); @color-orange-player-pic-c2: darken(@color-orange-theme_2, 30%);
@color-orange-player-progress: darken(@color-orange-theme_2, 6%); @color-orange-player-progress: darken(@color-orange-theme_2, 6%);
@ -252,9 +252,9 @@
@color-blue-pagination-select: fadeout(lighten(@color-blue-theme, 15%), 50%); @color-blue-pagination-select: fadeout(lighten(@color-blue-theme, 15%), 50%);
@color-blue-search-form-background: fadeout(lighten(@color-blue-theme, 35%), 10%); @color-blue-search-form-background: fadeout(lighten(@color-blue-theme, 35%), 10%);
@color-blue-search-list-hover: fadeout(darken(@color-blue-theme, 10%), 70%); @color-blue-search-list-hover: fadeout(darken(@color-blue-theme, 10%), 70%);
@color-blue-scrollbar-track: fadeout(@color-blue-theme, 80%); @color-blue-scrollbar-track: fadeout(lighten(@color-blue-theme, 10%), 75%);
@color-blue-scrollbar-thumb: fadeout(@color-blue-theme, 60%); @color-blue-scrollbar-thumb: fadeout(lighten(@color-blue-theme, 10%), 50%);
@color-blue-scrollbar-thumb-hover: fadeout(@color-blue-theme, 40%); @color-blue-scrollbar-thumb-hover: fadeout(lighten(@color-blue-theme, 10%), 35%);
@color-blue-player-pic-c1: fadeout(@color-blue-theme_2, 50%); @color-blue-player-pic-c1: fadeout(@color-blue-theme_2, 50%);
@color-blue-player-pic-c2: darken(@color-blue-theme_2, 30%); @color-blue-player-pic-c2: darken(@color-blue-theme_2, 30%);
@color-blue-player-progress: darken(@color-blue-theme_2, 6%); @color-blue-player-progress: darken(@color-blue-theme_2, 6%);
@ -304,9 +304,9 @@
@color-red-pagination-select: fadeout(lighten(@color-red-theme, 15%), 50%); @color-red-pagination-select: fadeout(lighten(@color-red-theme, 15%), 50%);
@color-red-search-form-background: fadeout(lighten(@color-red-theme, 35%), 10%); @color-red-search-form-background: fadeout(lighten(@color-red-theme, 35%), 10%);
@color-red-search-list-hover: fadeout(darken(@color-red-theme, 10%), 70%); @color-red-search-list-hover: fadeout(darken(@color-red-theme, 10%), 70%);
@color-red-scrollbar-track: fadeout(@color-red-theme, 80%); @color-red-scrollbar-track: fadeout(lighten(@color-red-theme, 10%), 75%);
@color-red-scrollbar-thumb: fadeout(@color-red-theme, 60%); @color-red-scrollbar-thumb: fadeout(lighten(@color-red-theme, 10%), 45%);
@color-red-scrollbar-thumb-hover: fadeout(@color-red-theme, 40%); @color-red-scrollbar-thumb-hover: fadeout(lighten(@color-red-theme, 10%), 25%);
@color-red-player-pic-c1: fadeout(@color-red-theme_2, 50%); @color-red-player-pic-c1: fadeout(@color-red-theme_2, 50%);
@color-red-player-pic-c2: darken(@color-red-theme_2, 30%); @color-red-player-pic-c2: darken(@color-red-theme_2, 30%);
@color-red-player-progress: darken(@color-red-theme_2, 6%); @color-red-player-progress: darken(@color-red-theme_2, 6%);
@ -358,9 +358,9 @@
@color-pink-pagination-select: fadeout(lighten(@color-pink-theme, 5%), 50%); @color-pink-pagination-select: fadeout(lighten(@color-pink-theme, 5%), 50%);
@color-pink-search-form-background: fadeout(lighten(@color-pink-theme, 20%), 10%); @color-pink-search-form-background: fadeout(lighten(@color-pink-theme, 20%), 10%);
@color-pink-search-list-hover: fadeout(darken(@color-pink-theme, 10%), 60%); @color-pink-search-list-hover: fadeout(darken(@color-pink-theme, 10%), 60%);
@color-pink-scrollbar-track: fadeout(@color-pink-theme, 60%); @color-pink-scrollbar-track: fadeout(lighten(@color-pink-theme, 6%), 75%);
@color-pink-scrollbar-thumb: fadeout(@color-pink-theme, 45%); @color-pink-scrollbar-thumb: fadeout(lighten(@color-pink-theme, 6%), 35%);
@color-pink-scrollbar-thumb-hover: fadeout(@color-pink-theme, 30%); @color-pink-scrollbar-thumb-hover: fadeout(lighten(@color-pink-theme, 6%), 20%);
@color-pink-player-pic-c1: fadeout(@color-pink-theme_2, 50%); @color-pink-player-pic-c1: fadeout(@color-pink-theme_2, 50%);
@color-pink-player-pic-c2: darken(@color-pink-theme_2, 30%); @color-pink-player-pic-c2: darken(@color-pink-theme_2, 30%);
@color-pink-player-progress: darken(@color-pink-theme_2, 6%); @color-pink-player-progress: darken(@color-pink-theme_2, 6%);
@ -410,9 +410,9 @@
@color-purple-pagination-select: fadeout(lighten(@color-purple-theme, 15%), 50%); @color-purple-pagination-select: fadeout(lighten(@color-purple-theme, 15%), 50%);
@color-purple-search-form-background: fadeout(lighten(@color-purple-theme, 35%), 10%); @color-purple-search-form-background: fadeout(lighten(@color-purple-theme, 35%), 10%);
@color-purple-search-list-hover: fadeout(darken(@color-purple-theme, 10%), 70%); @color-purple-search-list-hover: fadeout(darken(@color-purple-theme, 10%), 70%);
@color-purple-scrollbar-track: fadeout(@color-purple-theme, 80%); @color-purple-scrollbar-track: fadeout(lighten(@color-purple-theme, 10%), 77%);
@color-purple-scrollbar-thumb: fadeout(@color-purple-theme, 60%); @color-purple-scrollbar-thumb: fadeout(lighten(@color-purple-theme, 10%), 50%);
@color-purple-scrollbar-thumb-hover: fadeout(@color-purple-theme, 40%); @color-purple-scrollbar-thumb-hover: fadeout(lighten(@color-purple-theme, 10%), 35%);
@color-purple-player-pic-c1: fadeout(@color-purple-theme_2, 50%); @color-purple-player-pic-c1: fadeout(@color-purple-theme_2, 50%);
@color-purple-player-pic-c2: darken(@color-purple-theme_2, 30%); @color-purple-player-pic-c2: darken(@color-purple-theme_2, 30%);
@color-purple-player-progress: darken(@color-purple-theme_2, 6%); @color-purple-player-progress: darken(@color-purple-theme_2, 6%);
@ -462,9 +462,9 @@
@color-grey-pagination-select: fadeout(lighten(@color-grey-theme, 10%), 50%); @color-grey-pagination-select: fadeout(lighten(@color-grey-theme, 10%), 50%);
@color-grey-search-form-background: fadeout(lighten(@color-grey-theme, 35%), 10%); @color-grey-search-form-background: fadeout(lighten(@color-grey-theme, 35%), 10%);
@color-grey-search-list-hover: fadeout(darken(@color-grey-theme, 10%), 70%); @color-grey-search-list-hover: fadeout(darken(@color-grey-theme, 10%), 70%);
@color-grey-scrollbar-track: fadeout(@color-grey-theme, 80%); @color-grey-scrollbar-track: fadeout(lighten(@color-grey-theme, 10%), 75%);
@color-grey-scrollbar-thumb: fadeout(@color-grey-theme, 60%); @color-grey-scrollbar-thumb: fadeout(lighten(@color-grey-theme, 10%), 50%);
@color-grey-scrollbar-thumb-hover: fadeout(@color-grey-theme, 40%); @color-grey-scrollbar-thumb-hover: fadeout(lighten(@color-grey-theme, 10%), 35%);
@color-grey-player-pic-c1: fadeout(@color-grey-theme_2, 50%); @color-grey-player-pic-c1: fadeout(@color-grey-theme_2, 50%);
@color-grey-player-pic-c2: darken(@color-grey-theme_2, 30%); @color-grey-player-pic-c2: darken(@color-grey-theme_2, 30%);
@color-grey-player-progress: darken(@color-grey-theme_2, 6%); @color-grey-player-progress: darken(@color-grey-theme_2, 6%);
@ -515,9 +515,9 @@
@color-ming-pagination-select: fadeout(lighten(@color-ming-theme, 15%), 50%); @color-ming-pagination-select: fadeout(lighten(@color-ming-theme, 15%), 50%);
@color-ming-search-form-background: fadeout(lighten(@color-ming-theme, 45%), 15%); @color-ming-search-form-background: fadeout(lighten(@color-ming-theme, 45%), 15%);
@color-ming-search-list-hover: fadeout(darken(@color-ming-theme, 10%), 70%); @color-ming-search-list-hover: fadeout(darken(@color-ming-theme, 10%), 70%);
@color-ming-scrollbar-track: fadeout(@color-ming-theme, 80%); @color-ming-scrollbar-track: fadeout(lighten(@color-ming-theme, 10%), 75%);
@color-ming-scrollbar-thumb: fadeout(@color-ming-theme, 60%); @color-ming-scrollbar-thumb: fadeout(lighten(@color-ming-theme, 10%), 50%);
@color-ming-scrollbar-thumb-hover: fadeout(@color-ming-theme, 40%); @color-ming-scrollbar-thumb-hover: fadeout(lighten(@color-ming-theme, 10%), 35%);
@color-ming-player-pic-c1: fadeout(@color-ming-theme_2, 50%); @color-ming-player-pic-c1: fadeout(@color-ming-theme_2, 50%);
@color-ming-player-pic-c2: darken(@color-ming-theme_2, 30%); @color-ming-player-pic-c2: darken(@color-ming-theme_2, 30%);
@color-ming-player-progress: darken(@color-ming-theme_2, 6%); @color-ming-player-progress: darken(@color-ming-theme_2, 6%);
@ -569,9 +569,9 @@
@color-mid_autumn-pagination-select: fadeout(lighten(@color-mid_autumn-theme, 10%), 55%); @color-mid_autumn-pagination-select: fadeout(lighten(@color-mid_autumn-theme, 10%), 55%);
@color-mid_autumn-search-form-background: fadeout(lighten(@color-mid_autumn-theme, 50%), 10%); @color-mid_autumn-search-form-background: fadeout(lighten(@color-mid_autumn-theme, 50%), 10%);
@color-mid_autumn-search-list-hover: fadeout(darken(@color-mid_autumn-theme, 10%), 70%); @color-mid_autumn-search-list-hover: fadeout(darken(@color-mid_autumn-theme, 10%), 70%);
@color-mid_autumn-scrollbar-track: fadeout(@color-mid_autumn-theme, 80%); @color-mid_autumn-scrollbar-track: fadeout(lighten(@color-mid_autumn-theme, 10%), 80%);
@color-mid_autumn-scrollbar-thumb: fadeout(@color-mid_autumn-theme, 60%); @color-mid_autumn-scrollbar-thumb: fadeout(lighten(@color-mid_autumn-theme, 10%), 60%);
@color-mid_autumn-scrollbar-thumb-hover: fadeout(@color-mid_autumn-theme, 40%); @color-mid_autumn-scrollbar-thumb-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 40%);
@color-mid_autumn-player-pic-c1: fadeout(@color-mid_autumn-theme_2, 50%); @color-mid_autumn-player-pic-c1: fadeout(@color-mid_autumn-theme_2, 50%);
@color-mid_autumn-player-pic-c2: darken(@color-mid_autumn-theme_2, 30%); @color-mid_autumn-player-pic-c2: darken(@color-mid_autumn-theme_2, 30%);
@color-mid_autumn-player-progress: darken(@color-mid_autumn-theme_2, 10%); @color-mid_autumn-player-progress: darken(@color-mid_autumn-theme_2, 10%);
@ -621,9 +621,9 @@
@color-naruto-pagination-select: fadeout(lighten(@color-naruto-theme, 10%), 50%); @color-naruto-pagination-select: fadeout(lighten(@color-naruto-theme, 10%), 50%);
@color-naruto-search-form-background: fadeout(lighten(@color-naruto-theme, 30%), 20%); @color-naruto-search-form-background: fadeout(lighten(@color-naruto-theme, 30%), 20%);
@color-naruto-search-list-hover: fadeout(darken(@color-naruto-theme, 10%), 50%); @color-naruto-search-list-hover: fadeout(darken(@color-naruto-theme, 10%), 50%);
@color-naruto-scrollbar-track: fadeout(@color-naruto-theme, 80%); @color-naruto-scrollbar-track: fadeout(lighten(@color-naruto-theme, 10%), 75%);
@color-naruto-scrollbar-thumb: fadeout(@color-naruto-theme, 60%); @color-naruto-scrollbar-thumb: fadeout(lighten(@color-naruto-theme, 10%), 50%);
@color-naruto-scrollbar-thumb-hover: fadeout(@color-naruto-theme, 40%); @color-naruto-scrollbar-thumb-hover: fadeout(lighten(@color-naruto-theme, 10%), 35%);
@color-naruto-player-pic-c1: fadeout(@color-naruto-theme_2, 50%); @color-naruto-player-pic-c1: fadeout(@color-naruto-theme_2, 50%);
@color-naruto-player-pic-c2: darken(@color-naruto-theme_2, 30%); @color-naruto-player-pic-c2: darken(@color-naruto-theme_2, 30%);
@color-naruto-player-progress: darken(@color-naruto-theme_2, 10%); @color-naruto-player-progress: darken(@color-naruto-theme_2, 10%);
@ -673,9 +673,9 @@
@color-happy_new_year-pagination-select: fadeout(lighten(@color-happy_new_year-theme, 10%), 55%); @color-happy_new_year-pagination-select: fadeout(lighten(@color-happy_new_year-theme, 10%), 55%);
@color-happy_new_year-search-form-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 20%); @color-happy_new_year-search-form-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 20%);
@color-happy_new_year-search-list-hover: fadeout(darken(@color-happy_new_year-theme, 10%), 50%); @color-happy_new_year-search-list-hover: fadeout(darken(@color-happy_new_year-theme, 10%), 50%);
@color-happy_new_year-scrollbar-track: fadeout(@color-happy_new_year-theme, 80%); @color-happy_new_year-scrollbar-track: fadeout(lighten(@color-happy_new_year-theme, 6%), 75%);
@color-happy_new_year-scrollbar-thumb: fadeout(@color-happy_new_year-theme, 60%); @color-happy_new_year-scrollbar-thumb: fadeout(lighten(@color-happy_new_year-theme, 6%), 50%);
@color-happy_new_year-scrollbar-thumb-hover: fadeout(@color-happy_new_year-theme, 40%); @color-happy_new_year-scrollbar-thumb-hover: fadeout(lighten(@color-happy_new_year-theme, 6%), 35%);
@color-happy_new_year-player-pic-c1: fadeout(@color-happy_new_year-theme_2, 50%); @color-happy_new_year-player-pic-c1: fadeout(@color-happy_new_year-theme_2, 50%);
@color-happy_new_year-player-pic-c2: darken(@color-happy_new_year-theme_2, 30%); @color-happy_new_year-player-pic-c2: darken(@color-happy_new_year-theme_2, 30%);
@color-happy_new_year-player-progress: darken(@color-happy_new_year-theme_2, 10%); @color-happy_new_year-player-progress: darken(@color-happy_new_year-theme_2, 10%);
@ -703,11 +703,11 @@
// Width // Width
@width-app-left: 20%; @width-app-left: 6.5%;
// Height // Height
@height-toolbar: 50px; @height-toolbar: 54px;
@height-player: 55px; @height-player: 60px;
// Shadow // Shadow
@ -716,6 +716,7 @@
// Radius // Radius
@radius-progress-border: 5px; @radius-progress-border: 5px;
@radius-border: 4px;
@transition-theme: .4s ease; @transition-theme: .4s ease;

90
src/renderer/components/core/Aside.vue
View File

@ -1,44 +1,56 @@
<template lang="pug"> <template lang="pug">
div(:class="$style.aside") div(:class="$style.aside")
div(:class="['animated', logoAnimate, $style.logo]") div(:class="['animated', logoAnimate, $style.logo]") L X
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve') //- svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
use(xlink:href='#icon-logo') use(xlink:href='#icon-logo')
div(:class="$style.menu") div(:class="$style.menu")
dl dl
dt {{$t('core.aside.online_music')}} //- dt {{$t('core.aside.online_music')}}
dd dd
router-link(:active-class="$style.active" to="search") {{$t('core.aside.search')}} router-link(:active-class="$style.active" to="search" :title="$t('core.aside.search')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 801.99 811.98' space='preserve')
use(xlink:href='#icon-search-2')
dd dd
router-link(:active-class="$style.active" to="songList") {{$t('core.aside.song_list')}} router-link(:active-class="$style.active" to="songList" :title="$t('core.aside.song_list')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 739.96 763.59' space='preserve')
use(xlink:href='#icon-album')
//- span {{$t('core.aside.song_list')}}
dd dd
router-link(:active-class="$style.active" to="leaderboard") {{$t('core.aside.leaderboard')}} router-link(:active-class="$style.active" to="leaderboard" :title="$t('core.aside.leaderboard')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 819.1 819.38' space='preserve')
use(xlink:href='#icon-leaderboard')
//- span {{$t('core.aside.leaderboard')}}
dl dl
dt {{$t('core.aside.my_music')}} //- dt {{$t('core.aside.my_music')}}
dd dd
router-link(:active-class="($route.query.id === defaultList.id || $route.query.id == '') ? $style.active : ''" :to="`list?id=${defaultList.id || ''}`") {{$t('core.aside.default_list')}} router-link(:active-class="$style.active" :title="$t('core.aside.my_list')" :to="`list?id=${setting.list.prevSelectListId || defaultList.id}`")
router-link(:active-class="$route.query.id === loveList.id ? $style.active : ''" :to="`list?id=${loveList.id}`") {{$t('core.aside.love_list')}} div(:class="$style.icon")
router-link(:active-class="$route.query.id === item.id ? $style.active : ''" v-for="item in userList" :to="`list?id=${item._id}`" :key="item._id") {{item.name}} svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 830.33 740.22' space='preserve')
use(xlink:href='#icon-love')
dl dl
dt {{$t('core.aside.other')}} //- dt {{$t('core.aside.other')}}
dd dd
router-link(:active-class="$style.active" to="download") {{$t('core.aside.download')}} router-link(:active-class="$style.active" to="download" :title="$t('core.aside.download')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 798.85 718.96' space='preserve')
use(xlink:href='#icon-download-2')
//- span {{$t('core.aside.download')}}
dd dd
router-link(:active-class="$style.active" to="setting") {{$t('core.aside.setting')}} router-link(:active-class="$style.active" to="setting" :title="$t('core.aside.setting')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 854.85 775.41' space='preserve')
use(xlink:href='#icon-setting')
//- span {{$t('core.aside.setting')}}
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
// import { getRandom } from '../../utils' // import { getRandom } from '../../utils'
export default { export default {
props: {
list: {
type: Array,
default() {
return []
},
},
},
data() { data() {
return { return {
active: 'search', active: 'search',
@ -59,7 +71,8 @@ export default {
} }
}, },
computed: { computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']), ...mapGetters(['setting']),
...mapGetters('list', ['defaultList']),
}, },
// mounted() { // mounted() {
// this.logoAnimate = this.animates[getRandom(0, this.animates.length)] // this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
@ -96,27 +109,35 @@ export default {
} }
.logo { .logo {
box-sizing: border-box; box-sizing: border-box;
padding: 12% 13%; padding: 0 13%;
// height: 120px; height: 50px;
color: @color-theme-font; color: @color-theme-font;
flex: none; flex: none;
text-align: center;
line-height: 50px;
// -webkit-app-region: no-drag; // -webkit-app-region: no-drag;
} }
.menu { .menu {
flex: auto; flex: auto;
padding: 10px; // display: flex;
// flex-flow: column nowrap;
// justify-content: center;
// padding-bottom: 50px;
// padding: 5px;
dl { dl {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
margin-bottom: 15px; // margin-bottom: 15px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
dt { dt {
padding-left: 5px;
font-size: 11px; font-size: 11px;
transition: @transition-theme; transition: @transition-theme;
transition-property: color; transition-property: color;
color: @color-theme-font-label; color: @color-theme-font-label;
.mixin-ellipsis-1;
} }
dd a { dd a {
display: block; display: block;
@ -124,17 +145,19 @@ export default {
text-decoration: none; text-decoration: none;
position: relative; position: relative;
padding: 10px; padding: 18px 3px;
margin: 5px 0; // margin: 5px 0;
// border-left: 5px solid transparent; // border-left: 5px solid transparent;
transition: @transition-theme; transition: @transition-theme;
transition-property: color; transition-property: color;
color: @color-theme-font; color: @color-theme-font;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 11.5px;
text-align: center;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
border-radius: 4px; // border-radius: @radius-border;
.mixin-ellipsis-1;
&.active { &.active {
// border-left-color: @color-theme-active; // border-left-color: @color-theme-active;
@ -151,6 +174,13 @@ export default {
} }
} }
.icon {
// margin-bottom: 5px;
&> svg {
width: 32%;
}
}
each(@themes, { each(@themes, {
:global(#container.@{value}) { :global(#container.@{value}) {

159
src/renderer/components/core/Icons.vue
View File

File diff suppressed because one or more lines are too long

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

@ -2,7 +2,7 @@
div(:class="$style.player") div(:class="$style.player")
div(:class="$style.left" @contextmenu="handleToMusicLocation" @click="showPlayerDetail") div(:class="$style.left" @contextmenu="handleToMusicLocation" @click="showPlayerDetail")
img(v-if="musicInfo.img" :src="musicInfo.img" @error="imgError") img(v-if="musicInfo.img" :src="musicInfo.img" @error="imgError")
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 60 60' space='preserve') svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='102%' width='100%' viewBox='0 0 60 60' space='preserve')
use(:xlink:href='`#${$style.iconPic}`') use(:xlink:href='`#${$style.iconPic}`')
div(:class="$style.right" v-if="!isShowPlayerDetail") div(:class="$style.right" v-if="!isShowPlayerDetail")
div(:class="$style.column1") div(:class="$style.column1")
@ -529,7 +529,7 @@ export default {
this.nowPlayTime = 0 this.nowPlayTime = 0
this.maxPlayTime = 0 this.maxPlayTime = 0
this.lyric.lines = [] this.lyric.lines = []
this.lyric.line = 0 this.lyric.line = -1
this.lyric.text = 0 this.lyric.text = 0
}, },
sendProgressEvent(status, mode) { sendProgressEvent(status, mode) {
@ -690,7 +690,7 @@ export default {
.player { .player {
height: @height-player; height: @height-player;
// background-color: rgb(245, 245, 245); background-color: @color-theme_2;
transition: @transition-theme; transition: @transition-theme;
transition-property: border-color; transition-property: border-color;
border-top: 2px solid @color-theme; border-top: 2px solid @color-theme;
@ -712,6 +712,9 @@ export default {
opacity: 1; opacity: 1;
transition: @transition-theme; transition: @transition-theme;
transition-property: opacity; transition-property: opacity;
display: flex;
justify-content: center;
// align-items: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -726,6 +729,8 @@ export default {
max-height: 100%; max-height: 100%;
transition: @transition-theme; transition: @transition-theme;
transition-property: border-color; transition-property: border-color;
// border-radius: 50%;
border-radius: @radius-border;
// border: 2px solid @color-theme_2-background_1; // border: 2px solid @color-theme_2-background_1;
} }
} }
@ -931,6 +936,7 @@ export default {
each(@themes, { each(@themes, {
:global(#container.@{value}) { :global(#container.@{value}) {
.player { .player {
background-color: ~'@{color-@{value}-theme_2}';
border-top-color: ~'@{color-@{value}-theme}'; border-top-color: ~'@{color-@{value}-theme}';
} }
.left { .left {

46
src/renderer/components/core/PlayerDetail.vue
View File

@ -24,7 +24,7 @@
div(:class="$style.right") div(:class="$style.right")
div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" @mousedown="handleLyricMouseDown" ref="dom_lyric") div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" @mousedown="handleLyricMouseDown" ref="dom_lyric")
div(:class="$style.lyricSpace") div(:class="$style.lyricSpace")
p(v-for="(info, index) in lyric.lines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}} p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
div(:class="$style.lyricSpace") div(:class="$style.lyricSpace")
div(:class="$style.footer") div(:class="$style.footer")
div(:class="$style.left") div(:class="$style.left")
@ -128,16 +128,44 @@ export default {
immediate: true, immediate: true,
}, },
'lyric.lines': { 'lyric.lines': {
handler() { handler(n, o) {
this.$nextTick(() => { this.isSetedLines = true
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p') if (o) {
this.handleScrollLrc() this._lyricLines = n
}) if (n.length) {
this.lyricLines = n
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
this.handleScrollLrc()
})
} else {
if (cancelScrollFn) {
cancelScrollFn()
cancelScrollFn = null
}
cancelScrollFn = scrollTo(this.$refs.dom_lyric, 0, 300, () => {
if (this.lyricLines === this._lyricLines && this._lyricLines.length) return
this.lyricLines = this._lyricLines
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
this.handleScrollLrc()
})
}, 50)
}
} else {
this.lyricLines = n
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
this.handleScrollLrc()
})
}
}, },
immediate: true, immediate: true,
}, },
'lyric.line': { 'lyric.line': {
handler(n) { handler(n) {
if (n < 0) return
if (n == 0 && this.isSetedLines) return this.isSetedLines = false
this.handleScrollLrc() this.handleScrollLrc()
}, },
immediate: true, immediate: true,
@ -167,6 +195,9 @@ export default {
isStopScroll: false, isStopScroll: false,
timeout: null, timeout: null,
}, },
_lyricLines: [],
lyricLines: [],
isSetedLines: false,
} }
}, },
mounted() { mounted() {
@ -298,7 +329,7 @@ export default {
z-index: 10; z-index: 10;
// -webkit-app-region: drag; // -webkit-app-region: drag;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: @radius-border;
color: @color-theme_2-font; color: @color-theme_2-font;
border-left: 12px solid @color-theme; border-left: 12px solid @color-theme;
} }
@ -465,6 +496,7 @@ export default {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
border: 5px solid @color-theme-hover; border: 5px solid @color-theme-hover;
// border-radius: @radius-border;
// border: 5px solid #fff; // border: 5px solid #fff;
} }
} }

316
src/renderer/components/material/AasideList.vue Normal file
View File

@ -0,0 +1,316 @@
<template lang="pug">
div(:class="$style.lists")
h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
ul.scroll(:class="$style.listsContent")
li(:class="$style.listsItem" v-for="item in lists" :key="item.id") {{item.name}}
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(v-show="!list.length" :class="$style.noitem")
p(v-html="noItem")
material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
</template>
<script>
import { mapGetters } from 'vuex'
import { scrollTo, clipboardWriteText, assertApiSupport } from '../../utils'
export default {
name: 'MaterialSongList',
model: {
prop: 'selectdData',
event: 'input',
},
props: {
list: {
type: Array,
default() {
return []
},
},
page: {
type: Number,
required: true,
},
limit: {
type: Number,
required: true,
},
total: {
type: Number,
required: true,
},
selectdData: {
type: Array,
required: true,
},
source: {
type: String,
},
noItem: {
type: String,
default: '列表加载中...',
},
},
computed: {
...mapGetters(['setting']),
},
watch: {
selectdList(n) {
const len = n.length
if (len) {
this.isShowEditBtn = true
} else {
this.isShowEditBtn = false
}
},
selectdData(n) {
const len = n.length
if (len) {
this.isShowEditBtn = true
this.selectdList = [...n]
} else {
this.isShowEditBtn = false
this.removeAllSelect()
}
},
list(n) {
this.removeAllSelect()
if (!this.list.length) return
this.$nextTick(() => scrollTo(this.$refs.dom_scrollContent, 0))
},
},
data() {
return {
clickTime: 0,
clickIndex: -1,
isShowEditBtn: false,
selectdList: [],
keyEvent: {
isShiftDown: false,
isModDown: false,
isADown: false,
aDownTimeout: null,
},
}
},
created() {
this.listenEvent()
},
beforeDestroy() {
this.unlistenEvent()
},
methods: {
listenEvent() {
window.eventHub.$on('key_shift_down', this.handle_key_shift_down)
window.eventHub.$on('key_shift_up', this.handle_key_shift_up)
window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
window.eventHub.$on('key_mod+a_up', this.handle_key_mod_a_up)
},
unlistenEvent() {
window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
window.eventHub.$off('key_shift_up', this.handle_key_shift_up)
window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
window.eventHub.$off('key_mod+a_up', this.handle_key_mod_a_up)
},
handle_key_shift_down() {
if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
},
handle_key_shift_up() {
if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false
},
handle_key_mod_down() {
if (!this.keyEvent.isModDown) this.keyEvent.isModDown = true
},
handle_key_mod_up() {
if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
},
handle_key_mod_a_down() {
if (!this.keyEvent.isADown) {
this.keyEvent.isModDown = false
this.keyEvent.isADown = true
this.handleSelectAllData()
if (this.keyEvent.aDownTimeout) clearTimeout(this.keyEvent.aDownTimeout)
this.keyEvent.aDownTimeout = setTimeout(() => {
this.keyEvent.aDownTimeout = null
this.keyEvent.isADown = false
}, 500)
}
},
handle_key_mod_a_up() {
if (this.keyEvent.isADown) {
if (this.keyEvent.aDownTimeout) {
clearTimeout(this.keyEvent.aDownTimeout)
this.keyEvent.aDownTimeout = null
}
this.keyEvent.isADown = false
}
},
handleDoubleClick(event, index) {
if (event.target.classList.contains('select')) return
this.handleSelectData(event, index)
if (
window.performance.now() - this.clickTime > 400 ||
this.clickIndex !== index
) {
this.clickTime = window.performance.now()
this.clickIndex = index
return
}
this.emitEvent(this.assertApiSupport(this.source) ? 'testPlay' : 'search', index)
this.clickTime = 0
this.clickIndex = -1
},
handleSelectData(event, clickIndex) {
if (this.keyEvent.isShiftDown) {
if (this.selectdList.length) {
let lastSelectIndex = this.list.indexOf(this.selectdList[this.selectdList.length - 1])
this.removeAllSelect()
if (lastSelectIndex != clickIndex) {
let isNeedReverse = false
if (clickIndex < lastSelectIndex) {
let temp = lastSelectIndex
lastSelectIndex = clickIndex
clickIndex = temp
isNeedReverse = true
}
this.selectdList = this.list.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) this.selectdList.reverse()
let nodes = this.$refs.dom_tbody.childNodes
do {
nodes[lastSelectIndex].classList.add('active')
lastSelectIndex++
} while (lastSelectIndex <= clickIndex)
}
} else {
event.currentTarget.classList.add('active')
this.selectdList.push(this.list[clickIndex])
}
} else if (this.keyEvent.isModDown) {
let item = this.list[clickIndex]
let index = this.selectdList.indexOf(item)
if (index < 0) {
this.selectdList.push(item)
event.currentTarget.classList.add('active')
} else {
this.selectdList.splice(index, 1)
event.currentTarget.classList.remove('active')
}
} else if (this.selectdList.length) {
this.removeAllSelect()
} else return
this.$emit('input', [...this.selectdList])
},
removeAllSelect() {
this.selectdList = []
let dom_tbody = this.$refs.dom_tbody
if (!dom_tbody) return
let nodes = dom_tbody.querySelectorAll('.active')
for (const node of nodes) {
if (node.parentNode == dom_tbody) node.classList.remove('active')
}
},
handleListBtnClick(info) {
this.emitEvent('listBtnClick', info)
},
handleSelectAllData() {
this.removeAllSelect()
this.selectdList = [...this.list]
let nodes = this.$refs.dom_tbody.childNodes
for (const node of nodes) {
node.classList.add('active')
}
this.$emit('input', [...this.selectdList])
},
handleTogglePage(page) {
this.emitEvent('togglePage', page)
},
handleFlowBtnClick(action) {
this.emitEvent('flowBtnClick', action)
},
emitEvent(action, data) {
this.$emit('action', { action, data })
},
handleChangeSelect() {
this.$emit('input', [...this.selectdList])
},
handleContextMenu(event) {
if (!event.target.classList.contains('select')) return
let classList = this.$refs.dom_scrollContent.classList
classList.add(this.$style.copying)
window.requestAnimationFrame(() => {
let str = window.getSelection().toString()
classList.remove(this.$style.copying)
str = str.trim()
if (!str.length) return
clipboardWriteText(str)
})
},
assertApiSupport(source) {
return assertApiSupport(source)
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.lists {
flex: none;
width: 15%;
display: flex;
flex-flow: column nowrap;
}
.title {
font-size: 12px;
line-height: 28px;
padding: 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
flex: none;
}
.list {
flex: auto;
min-width: 0;
}
.item {
}
.noitem {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
p {
font-size: 24px;
color: @color-theme_2-font-label;
}
}
each(@themes, {
:global(#container.@{value}) {
.tbody {
td {
&:first-child {
color: ~'@{color-@{value}-theme_2-font-label}';
}
}
}
.noitem {
p {
color: ~'@{color-@{value}-theme_2-font-label}';
}
}
}
})
</style>

2
src/renderer/components/material/DownloadModal.vue
View File

@ -30,7 +30,7 @@ export default {
return this.musicInfo || {} return this.musicInfo || {}
}, },
qualityList() { qualityList() {
return window.globalObj.qualityList[this.musicInfo.source] return window.globalObj.qualityList[this.musicInfo.source] || []
}, },
}, },
methods: { methods: {

7
src/renderer/components/material/FlowBtn.vue
View File

@ -71,10 +71,11 @@ export default {
position: fixed; position: fixed;
bottom: 80px; bottom: 80px;
right: 30px; right: 30px;
background-color: @color-search-form-background; // transform: translateX(-25%);
background-color: @color-theme_2-background_2;
border-radius: 5px; border-radius: 5px;
// padding: 3px 5px; // padding: 3px 5px;
box-shadow: 0 1px 5px 0 rgba(0,0,0,.2); box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
button { button {
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -106,7 +107,7 @@ export default {
each(@themes, { each(@themes, {
:global(#container.@{value}) { :global(#container.@{value}) {
.btns { .btns {
background-color: ~'@{color-@{value}-search-form-background}'; background-color: ~'@{color-@{value}-theme_2-background_2}';
button { button {
color: ~'@{color-@{value}-btn}'; color: ~'@{color-@{value}-btn}';
&:hover { &:hover {

1
src/renderer/components/material/Input.vue
View File

@ -55,6 +55,7 @@ export default {
outline: none; outline: none;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
background-color: @color-btn-background; background-color: @color-btn-background;
font-size: 13.3px;
&[disabled] { &[disabled] {
opacity: .4; opacity: .4;
} }

172
src/renderer/components/material/Menu.vue Normal file
View File

@ -0,0 +1,172 @@
<template lang="pug">
ul(:class="$style.list" :style="listStyles" ref="dom_list")
li(v-for="item in menus" @click="handleClick(item)" :disabled="item.disabled") {{item[itemName]}}
</template>
<script>
export default {
props: {
menus: {
type: Array,
default() {
return []
},
},
itemName: {
type: String,
default: 'name',
},
isShow: {
type: Boolean,
default: false,
},
location: {
type: Object,
default() {
return { x: 0, y: 0 }
},
},
},
watch: {
isShow: {
handler(n) {
n ? this.handleShow() : this.handleHide()
},
immediate: true,
},
location: {
handler(n) {
this.listStyles.left = n.x + 'px'
this.listStyles.top = n.y + 'px'
if (this.show) {
if (this.listStyles.transitionProperty != this.transition2) this.listStyles.transitionProperty = this.transition2
this.listStyles.transform = `scaleY(1) translateY(${this.handleGetOffset(n.y)}px)`
}
},
deep: true,
},
},
data() {
return {
show: false,
listStyles: {
left: 0,
top: 0,
opacity: 0,
transitionProperty: 'transform, opacity',
transform: 'scale(0) translateY(0)',
},
transition1: 'transform, opacity',
transition2: 'transform, opacity, top, left',
transitionProperty: 'transform, opacity',
}
},
mounted() {
document.addEventListener('click', this.handleDocumentClick)
},
beforeDestroy() {
document.removeEventListener('click', this.handleDocumentClick)
},
methods: {
handleShow() {
this.show = true
this.listStyles.opacity = 1
this.listStyles.transform = `scaleY(1) translateY(${this.handleGetOffset(this.location.y)}px)`
},
handleHide(e) {
this.listStyles.opacity = 0
this.listStyles.transform = 'scale(0) translateY(0)'
this.show = false
},
handleGetOffset(top) {
const listHeight = this.$refs.dom_list.clientHeight
const dom_container = this.$refs.dom_list.offsetParent
const containerHeight = dom_container.clientHeight
if (containerHeight < listHeight) return 0
const offsetHeight = containerHeight - top - listHeight
if (offsetHeight > 0) return 0
return offsetHeight - 5
},
handleDocumentClick(event) {
if (!this.show) return
if (event.target == this.$refs.dom_list || this.$refs.dom_list.contains(event.target)) return
if (this.show && this.listStyles.transitionProperty != this.transition1) this.listStyles.transitionProperty = this.transition1
this.handleClick(null)
},
handleClick(item) {
if (item && item.disabled) return
this.$emit('menu-click', item)
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.list {
font-size: 12px;
position: absolute;
opacity: 0;
transform: scale(0);
transform-origin: 0 0 0;
transition: .25s ease;
transition-property: transform, opacity;
border-radius: @radius-border;
background-color: @color-theme_2-background_2;
box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
z-index: 10;
li {
cursor: pointer;
min-width: 80px;
line-height: 34px;
// color: @color-btn;
padding: 0 5px;
text-align: center;
outline: none;
transition: background-color @transition-theme;
box-sizing: border-box;
.mixin-ellipsis-1;
&:hover {
background-color: @color-theme_2-hover;
}
&:active {
background-color: @color-theme_2-active;
}
&[disabled] {
cursor: default;
opacity: .4;
&:hover {
background: none !important;
}
}
}
}
each(@themes, {
:global(#container.@{value}) {
.list {
background-color: ~'@{color-@{value}-theme_2-background_2}';
li {
// color: ~'@{color-@{value}-btn}';
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
}
&:active {
background-color: ~'@{color-@{value}-theme_2-active}';
}
}
}
}
})
</style>

10
src/renderer/components/material/Pagination.vue
View File

@ -118,7 +118,7 @@ export default {
display: inline-block; display: inline-block;
background-color: @color-pagination-background; background-color: @color-pagination-background;
// border-top-left-radius: 8px; // border-top-left-radius: 8px;
border-radius: 4px; border-radius: @radius-border;
ul { ul {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
@ -170,15 +170,15 @@ export default {
} }
&:first-child { &:first-child {
span, button { span, button {
border-top-left-radius: 4px; border-top-left-radius: @radius-border;
border-bottom-left-radius: 4px; border-bottom-left-radius: @radius-border;
} }
// border-right: .0625rem solid @theme_line; // border-right: .0625rem solid @theme_line;
} }
&:last-child { &:last-child {
span, button { span, button {
border-top-right-radius: 4px; border-top-right-radius: @radius-border;
border-bottom-right-radius: 4px; border-bottom-right-radius: @radius-border;
} }
// border-right: .0625rem solid @theme_line; // border-right: .0625rem solid @theme_line;
} }

12
src/renderer/components/material/SearchInput.vue
View File

@ -140,7 +140,7 @@ export default {
transition: box-shadow .4s ease, background-color @transition-theme; transition: box-shadow .4s ease, background-color @transition-theme;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
width: 240px; width: 35%;
background-color: @color-search-form-background; background-color: @color-search-form-background;
&.active { &.active {
@ -148,6 +148,7 @@ export default {
.form { .form {
input { input {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
button { button {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
@ -156,7 +157,7 @@ export default {
} }
.form { .form {
display: flex; display: flex;
height: @height-toolbar / 2; height: @height-toolbar * 0.52;
position: relative; position: relative;
input { input {
flex: auto; flex: auto;
@ -172,6 +173,8 @@ export default {
// height: @height-toolbar * .7; // height: @height-toolbar * .7;
padding: 0 5px; padding: 0 5px;
overflow: hidden; overflow: hidden;
font-size: 13.5px;
line-height: @height-toolbar * 0.52 + 5px;
&::placeholder { &::placeholder {
color: @color-btn; color: @color-btn;
} }
@ -186,7 +189,7 @@ export default {
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;
padding: 5px 7px; padding: 6px 7px;
color: @color-btn; color: @color-btn;
transition: background-color .2s ease; transition: background-color .2s ease;
@ -226,7 +229,8 @@ export default {
} }
.big { .big {
width: 500px; min-width: 500px;
width: 100%;
// input { // input {
// line-height: 30px; // line-height: 30px;
// } // }

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

@ -80,7 +80,7 @@ export default {
border-left: 2px solid @color-tab-border-bottom; border-left: 2px solid @color-tab-border-bottom;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
border-top-left-radius: 4px; border-top-left-radius: @radius-border;
color: @color-btn; color: @color-btn;
cursor: pointer; cursor: pointer;
.mixin-ellipsis-1; .mixin-ellipsis-1;
@ -100,7 +100,7 @@ export default {
left: 0; left: 0;
border-bottom: 2px solid @color-tab-border-bottom; border-bottom: 2px solid @color-tab-border-bottom;
border-left: 2px solid @color-tab-border-bottom; border-left: 2px solid @color-tab-border-bottom;
border-bottom-left-radius: 4px; border-bottom-left-radius: @radius-border;
background-color: @color-theme_2-background_2; background-color: @color-theme_2-background_2;
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);

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

@ -10,8 +10,8 @@ div(:class="$style.songList")
th.nobreak(style="width: 25%;") {{$t('material.song_list.name')}} th.nobreak(style="width: 25%;") {{$t('material.song_list.name')}}
th.nobreak(style="width: 20%;") {{$t('material.song_list.singer')}} th.nobreak(style="width: 20%;") {{$t('material.song_list.singer')}}
th.nobreak(style="width: 20%;") {{$t('material.song_list.album')}} th.nobreak(style="width: 20%;") {{$t('material.song_list.album')}}
th.nobreak(style="width: 20%;") {{$t('material.song_list.action')}}
th.nobreak(style="width: 10%;") {{$t('material.song_list.time')}} th.nobreak(style="width: 10%;") {{$t('material.song_list.time')}}
th.nobreak(style="width: 20%;") {{$t('material.song_list.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="handleContextMenu" ref="dom_tbody")
@ -25,8 +25,10 @@ div(:class="$style.songList")
span.select {{item.singer}} span.select {{item.singer}}
td.break(style="width: 20%;") td.break(style="width: 20%;")
span.select {{item.albumName}} span.select {{item.albumName}}
td(style="width: 10%;")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
td(style="width: 20%; padding-left: 0; padding-right: 0;") td(style="width: 20%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :search-btn="true" material-list-buttons(:index="index" :search-btn="true" :class="$style.btns"
:remove-btn="false" @btn-click="handleListBtnClick" :remove-btn="false" @btn-click="handleListBtnClick"
:listAdd-btn="assertApiSupport(item.source)" :listAdd-btn="assertApiSupport(item.source)"
:play-btn="assertApiSupport(item.source)" :play-btn="assertApiSupport(item.source)"
@ -34,8 +36,6 @@ div(:class="$style.songList")
//- 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)') 试听
//- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋ //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
td(style="width: 10%;")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
div(:class="$style.pagination") div(:class="$style.pagination")
material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage") material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
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")
@ -158,6 +158,8 @@ export default {
if (this.keyEvent.isModDown) this.keyEvent.isModDown = false if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
}, },
handle_key_mod_a_down({ event }) { handle_key_mod_a_down({ event }) {
if (event.target.tagName == 'INPUT') return
event.preventDefault()
if (event.repeat) return if (event.repeat) return
this.keyEvent.isModDown = false this.keyEvent.isModDown = false
this.handleSelectAllData() this.handleSelectAllData()

6
src/renderer/components/material/Tab.vue
View File

@ -98,15 +98,15 @@ export default {
margin-left: 0; margin-left: 0;
button { button {
border-top-left-radius: 3px; border-top-left-radius: 3px;
// border-bottom-left-radius: 4px; // border-bottom-left-radius: @radius-border;
} }
} }
&:last-child { &:last-child {
border-right: 2px solid @color-tab-border-top; border-right: 2px solid @color-tab-border-top;
border-top-right-radius: 4px; border-top-right-radius: @radius-border;
button { button {
border-top-right-radius: 3px; border-top-right-radius: 3px;
// border-bottom-right-radius: 4px; // border-bottom-right-radius: @radius-border;
} }
} }
button { button {

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

@ -5,7 +5,13 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
| {{$t('material.list_add_modal.title_first')}}&nbsp; | {{$t('material.list_add_modal.title_first')}}&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')}}
material-btn(:class="$style.btn" :title="$t('material.list_add_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}} div.scroll(:class="$style.btnContent")
material-btn(:class="$style.btn" :title="$t('material.list_add_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')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo')
input.key-bind(:class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('view.list.lists_new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)")
span(:class="$style.btn" v-for="i in spaceNum")
</template> </template>
<script> <script>
@ -29,6 +35,16 @@ export default {
return [] return []
}, },
}, },
listName: {
type: String,
default: '',
},
},
data() {
return {
isEditing: false,
newListName: '',
}
}, },
computed: { computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']), ...mapGetters('list', ['defaultList', 'loveList', 'userList']),
@ -37,11 +53,14 @@ export default {
this.defaultList, this.defaultList,
this.loveList, this.loveList,
...this.userList, ...this.userList,
].filter(l => !this.excludeListId.includes(l.id)) ].filter(l => l.id != this.excludeListId)
},
spaceNum() {
return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)
}, },
}, },
methods: { methods: {
...mapMutations('list', ['listAdd']), ...mapMutations('list', ['listAdd', 'createUserList']),
handleClick(index) { handleClick(index) {
this.listAdd({ id: this.lists[index].id, musicInfo: this.musicInfo }) this.listAdd({ id: this.lists[index].id, musicInfo: this.musicInfo })
this.$nextTick(() => { this.$nextTick(() => {
@ -51,6 +70,19 @@ export default {
handleClose() { handleClose() {
this.$emit('close') this.$emit('close')
}, },
handleEditing(event) {
if (this.isEditing) return
if (!this.newListName) this.newListName = this.listName
this.isEditing = true
this.$nextTick(() => event.currentTarget.querySelector('.' + this.$style.newListInput).focus())
},
handleSaveList(event) {
let name = event.target.value
this.newListName = event.target.value = ''
this.isEditing = false
if (!name) return
this.createUserList(name)
},
}, },
} }
</script> </script>
@ -60,18 +92,21 @@ export default {
@import '../../assets/styles/layout.less'; @import '../../assets/styles/layout.less';
.main { .main {
padding: 15px; // padding: 15px 0;
max-width: 300px; max-width: 530px;
min-width: 200px; min-width: 200px;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: center; justify-content: center;
min-height: 0;
// max-height: 100%;
// overflow: hidden;
h2 { h2 {
font-size: 13px; font-size: 13px;
color: @color-theme_2-font; color: @color-theme_2-font;
line-height: 1.3; line-height: 1.3;
text-align: center; text-align: center;
margin-bottom: 15px; padding: 15px;
} }
} }
@ -79,12 +114,60 @@ export default {
color: @color-theme; color: @color-theme;
} }
.btn-content {
flex: auto;
max-height: 100%;
padding-right: 15px;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.btn { .btn {
display: block; box-sizing: border-box;
margin-left: 15px;
margin-bottom: 15px; margin-bottom: 15px;
&:last-child { height: 36px;
margin-bottom: 0; line-height: 36px;
padding: 0 10px;
width: 150px;
.mixin-ellipsis-1;
}
.newList {
border: 1px dashed @color-theme-hover;
background-color: @color-theme_2-background_2;
color: @color-theme-hover;
opacity: .7;
svg {
height: 18px;
margin-top: 9px;
} }
&.editing {
opacity: 1;
svg {
display: none;
}
.newListInput {
display: block;
}
}
}
.newListInput {
width: 100%;
height: 34px;
border: none;
padding: 0;
line-height: 34px;
background: none;
outline: none;
font-size: 14px;
text-align: center;
font-family: inherit;
display: none;
} }
each(@themes, { each(@themes, {
@ -97,6 +180,11 @@ each(@themes, {
.name { .name {
color: ~'@{color-@{value}-theme}'; color: ~'@{color-@{value}-theme}';
} }
.newList {
border-color: ~'@{color-@{value}-theme-hover}';
color: ~'@{color-@{value}-theme-hover}';
background-color: ~'@{color-@{value}-theme_2-background_2}';
}
} }
}) })

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

@ -2,7 +2,13 @@
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.title', { num: musicList.length })}}
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}} 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, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :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' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo')
input.key-bind(:class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('view.list.lists_new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)")
span(:class="$style.btn" v-for="i in spaceNum")
</template> </template>
<script> <script>
@ -29,6 +35,16 @@ export default {
return [] return []
}, },
}, },
listName: {
type: String,
default: '',
},
},
data() {
return {
isEditing: false,
newListName: '',
}
}, },
computed: { computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']), ...mapGetters('list', ['defaultList', 'loveList', 'userList']),
@ -38,11 +54,14 @@ export default {
this.defaultList, this.defaultList,
this.loveList, this.loveList,
...this.userList, ...this.userList,
].filter(l => !this.excludeListId.includes(l.id)) ].filter(l => l.id != this.excludeListId)
},
spaceNum() {
return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)
}, },
}, },
methods: { methods: {
...mapMutations('list', ['listAddMultiple']), ...mapMutations('list', ['listAddMultiple', 'createUserList']),
handleClick(index) { handleClick(index) {
this.listAddMultiple({ id: this.lists[index].id, list: this.musicList }) this.listAddMultiple({ id: this.lists[index].id, list: this.musicList })
this.$nextTick(() => { this.$nextTick(() => {
@ -52,6 +71,19 @@ export default {
handleClose(isSelect = false) { handleClose(isSelect = false) {
this.$emit('close', isSelect) this.$emit('close', isSelect)
}, },
handleEditing(event) {
if (this.isEditing) return
if (!this.newListName) this.newListName = this.listName
this.isEditing = true
this.$nextTick(() => event.currentTarget.querySelector('.' + this.$style.newListInput).focus())
},
handleSaveList(event) {
let name = event.target.value
this.newListName = event.target.value = ''
this.isEditing = false
if (!name) return
this.createUserList(name)
},
}, },
} }
</script> </script>
@ -61,27 +93,78 @@ export default {
@import '../../assets/styles/layout.less'; @import '../../assets/styles/layout.less';
.main { .main {
padding: 15px; // padding: 15px 0;
max-width: 300px; max-width: 530px;
min-width: 200px; min-width: 200px;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: center; justify-content: center;
min-height: 0;
// max-height: 100%;
// overflow: hidden;
h2 { h2 {
font-size: 13px; font-size: 13px;
color: @color-theme_2-font; color: @color-theme_2-font;
line-height: 1.3; line-height: 1.3;
text-align: center; text-align: center;
margin-bottom: 15px; padding: 15px;
} }
} }
.btn-content {
flex: auto;
max-height: 100%;
padding-right: 15px;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.btn { .btn {
display: block; box-sizing: border-box;
margin-left: 15px;
margin-bottom: 15px; margin-bottom: 15px;
&:last-child { height: 36px;
margin-bottom: 0; line-height: 36px;
padding: 0 10px;
width: 150px;
.mixin-ellipsis-1;
}
.newList {
border: 1px dashed @color-theme-hover;
background-color: @color-theme_2-background_2;
color: @color-theme-hover;
opacity: .7;
svg {
height: 18px;
margin-top: 9px;
} }
&.editing {
opacity: 1;
svg {
display: none;
}
.newListInput {
display: block;
}
}
}
.newListInput {
width: 100%;
height: 34px;
border: none;
padding: 0;
line-height: 34px;
background: none;
outline: none;
font-size: 14px;
text-align: center;
font-family: inherit;
display: none;
} }
each(@themes, { each(@themes, {
@ -91,6 +174,11 @@ each(@themes, {
color: ~'@{color-@{value}-theme_2-font}'; color: ~'@{color-@{value}-theme_2-font}';
} }
} }
.newList {
border-color: ~'@{color-@{value}-theme-hover}';
color: ~'@{color-@{value}-theme-hover}';
background-color: ~'@{color-@{value}-theme_2-background_2}';
}
} }
}) })

8
src/renderer/config/index.js
View File

@ -2,7 +2,7 @@ import path from 'path'
import os from 'os' import os from 'os'
const defaultSetting = { const defaultSetting = {
version: '1.0.24', version: '1.0.26',
player: { player: {
togglePlayMethod: 'listLoop', togglePlayMethod: 'listLoop',
highQuality: false, highQuality: false,
@ -14,10 +14,8 @@ const defaultSetting = {
list: { list: {
isShowAlbumName: true, isShowAlbumName: true,
isShowSource: true, isShowSource: true,
scroll: { prevSelectListId: 'default',
enable: true, isSaveScrollLocation: true,
locations: {},
},
}, },
download: { download: {
savePath: path.join(os.homedir(), 'Desktop'), savePath: path.join(os.homedir(), 'Desktop'),

8
src/renderer/lang/cns/core/aside.json
View File

@ -1,12 +1,8 @@
{ {
"online_music": "在线音乐",
"search": "搜索", "search": "搜索",
"song_list": "歌单", "song_list": "歌单",
"leaderboard": "排行榜", "leaderboard": "排行榜",
"my_music": "我的音乐", "my_list": "我的列表",
"default_list": "试听列表", "download": "下载",
"love_list": "收藏列表",
"other": "其他",
"download": "下载管理",
"setting": "设置" "setting": "设置"
} }

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

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

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

@ -1,6 +1,12 @@
{ {
"select_all": "全选", "lists_new_list_btn": "新建列表",
"unselect_all": "全不选", "lists_new_list_input": "新列表...",
"lists_rename": "重命名",
"lists_moveup": "上移",
"lists_movedown": "下移",
"lists_remove": "删除",
"default_list": "试听列表",
"love_list": "收藏",
"name": "歌曲名", "name": "歌曲名",
"singer": "歌手", "singer": "歌手",
"album": "专辑", "album": "专辑",

6
src/renderer/lang/cnt/core/aside.json
View File

@ -1,12 +1,8 @@
{ {
"online_music": "在線音樂",
"search": "搜索", "search": "搜索",
"song_list": "歌單", "song_list": "歌單",
"leaderboard": "排行榜", "leaderboard": "排行榜",
"my_music": "我的音樂", "my_list": "我的列表",
"default_list": "試聽列表",
"love_list": "收藏列表",
"other": "其他",
"download": "下載管理", "download": "下載管理",
"setting": "設置" "setting": "設置"
} }

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

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

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

@ -1,6 +1,12 @@
{ {
"select_all": "全選", "lists_new_list_btn": "新建列表",
"unselect_all": "全不選", "lists_new_list_input": "新列表...",
"lists_rename": "重命名",
"lists_moveup": "上移",
"lists_movedown": "下移",
"lists_remove": "刪除",
"default_list": "試聽列表",
"love_list": "收藏列表",
"name": "歌曲名", "name": "歌曲名",
"singer": "歌手", "singer": "歌手",
"album": "專輯", "album": "專輯",

6
src/renderer/lang/en/core/aside.json
View File

@ -1,12 +1,8 @@
{ {
"online_music": "Online music",
"search": "Search", "search": "Search",
"song_list": "Playlists", "song_list": "Playlists",
"leaderboard": "Charts", "leaderboard": "Charts",
"my_music": "Your Library", "my_list": "Your Library",
"default_list": "Recently Played",
"love_list": "Favorites",
"other": "Extras",
"download": "Downloads", "download": "Downloads",
"setting": "Settings" "setting": "Settings"
} }

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

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

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

@ -1,6 +1,12 @@
{ {
"select_all": "Select all", "lists_new_list_btn": "Create list",
"unselect_all": "Unselect all", "lists_new_list_input": "New list...",
"lists_rename": "Rename",
"lists_moveup": "Move Up",
"lists_movedown": "Move Down",
"lists_remove": "Remove",
"default_list": "Recently Played",
"love_list": "Favorites",
"name": "Name", "name": "Name",
"singer": "Artist", "singer": "Artist",
"album": "Album", "album": "Album",

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

@ -1,23 +1,43 @@
let allList = {}
window.allList = allList
const allListInit = (defaultList, loveList, userList) => {
allList[defaultList.id] = defaultList
allList[loveList.id] = loveList
for (const list of userList) allList[list.id] = list
}
const allListUpdate = list => {
allList[list.id] = list
}
const allListRemove = list => {
delete allList[list.id]
}
// state // state
const state = { const state = {
isInitedList: false,
defaultList: { defaultList: {
id: 'default', id: 'default',
name: '试听列表', name: '试听列表',
list: [], list: [],
location: 0,
}, },
loveList: { loveList: {
id: 'love', id: 'love',
name: '我的收藏', name: '我的收藏',
list: [], list: [],
location: 0,
}, },
userList: [], userList: [],
} }
// getters // getters
const getters = { const getters = {
isInitedList: state => state.isInitedList,
defaultList: state => state.defaultList || {}, defaultList: state => state.defaultList || {},
loveList: state => state.loveList || {}, loveList: state => state.loveList || {},
userList: state => state.userList, userList: state => state.userList,
allList: () => allList,
} }
// actions // actions
@ -25,73 +45,118 @@ const actions = {
} }
const getList = (state, id) => {
let targetList
switch (id) {
case 'default':
targetList = state.defaultList
break
case 'love':
targetList = state.loveList
break
default:
targetList = state.userList.find(l => l.id === id)
break
}
return targetList
}
// mitations // mitations
const mutations = { const mutations = {
initList(state, { defaultList, loveList }) { initList(state, { defaultList, loveList, userList }) {
if (defaultList !== undefined) state.defaultList.list = defaultList.list if (defaultList != null) state.defaultList.list = defaultList.list
if (loveList !== undefined) state.loveList.list = loveList.list if (loveList != null) state.loveList.list = loveList.list
if (userList != null) state.userList = userList
allListInit(state.defaultList, state.loveList, state.userList)
state.isInitedList = true
}, },
setList(state, { id, list }) { setList(state, { id, list, name, location }) {
const targetList = getList(state, id) const targetList = allList[id]
if (!targetList) return if (targetList) {
targetList.list = list if (name && targetList.name === name) {
targetList.list.splice(0, targetList.list.length, ...list)
targetList.location = location
return
}
id += '_' + Math.random()
}
let newList = {
name,
id,
list,
location,
}
state.userList.push(newList)
allListUpdate(newList)
}, },
listAdd(state, { id, musicInfo }) { listAdd(state, { id, musicInfo }) {
const targetList = getList(state, id) const targetList = allList[id]
if (!targetList) return if (!targetList) return
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)
}, },
listAddMultiple(state, { id, list }) { listAddMultiple(state, { id, list }) {
let targetList = getList(state, id) let targetList = allList[id]
if (!targetList) return if (!targetList) return
targetList = targetList.list let newList = [...targetList.list, ...list]
list.forEach(musicInfo => { let map = {}
if (targetList.some(s => s.songmid === musicInfo.songmid)) return let ids = []
targetList.push(musicInfo) for (const item of newList) {
}) if (map[item.songmid]) continue
ids.push(item.songmid)
map[item.songmid] = item
}
targetList.list.splice(0, targetList.list.length, ...ids.map(id => map[id]))
}, },
listRemove(state, { id, index }) { listRemove(state, { id, index }) {
let targetList = getList(state, id) let targetList = allList[id]
if (!targetList) return if (!targetList) return
targetList.list.splice(index, 1) targetList.list.splice(index, 1)
}, },
listRemoveMultiple(state, { id, list }) { listRemoveMultiple(state, { id, list }) {
let targetList = getList(state, id) let targetList = allList[id]
if (!targetList) return if (!targetList) return
targetList = targetList.list let map = {}
list.forEach(musicInfo => { let ids = []
let index = targetList.indexOf(musicInfo) for (const item of targetList.list) {
if (index < 0) return ids.push(item.songmid)
targetList.splice(index, 1) map[item.songmid] = item
}) }
for (const item of list) {
if (map[item.songmid]) delete map[item.songmid]
}
let newList = []
for (const id of ids) if (map[id]) newList.push(map[id])
targetList.list.splice(0, targetList.list.length, ...newList)
}, },
listClear(state, id) { listClear(state, id) {
let targetList = getList(state, id) let targetList = allList[id]
if (!targetList) return if (!targetList) return
targetList.list.length = [] targetList.list.splice(0, targetList.list.length)
}, },
updateMusicInfo(state, { id, index, data }) { updateMusicInfo(state, { id, index, data }) {
let targetList = getList(state, id) let targetList = allList[id]
if (!targetList) return if (!targetList) return
Object.assign(targetList.list[index], data) Object.assign(targetList.list[index], data)
}, },
createUserList(state, name) {
let newList = {
name,
id: `userlist_${Date.now()}`,
list: [],
location: 0,
}
state.userList.push(newList)
allListUpdate(newList)
},
removeUserList(state, index) {
let list = state.userList.splice(index, 1)[0]
allListRemove(list)
},
setUserListName(state, { index, name }) {
let list = state.userList[index]
if (!list) return
list.name = name
},
moveupUserList(state, index) {
let targetList = state.userList[index]
state.userList.splice(index, 1)
state.userList.splice(index - 1, 0, targetList)
},
movedownUserList(state, index) {
let targetList = state.userList[index]
state.userList.splice(index, 1)
state.userList.splice(index + 1, 0, targetList)
},
setListScroll(state, { id, location }) {
if (allList[id]) allList[id].location = location
},
} }
export default { export default {

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

@ -2,8 +2,10 @@ import music from '../../utils/music'
// state // state
const state = { const state = {
list: [], listInfo: {
listId: null, list: [],
id: null,
},
playIndex: -1, playIndex: -1,
changePlay: false, changePlay: false,
isShowPlayerDetail: false, isShowPlayerDetail: false,
@ -15,8 +17,8 @@ let lrcRequest
// getters // getters
const getters = { const getters = {
list: state => state.list || [], list: state => state.listInfo.list,
listId: state => state.listId, listId: state => state.listInfo.id,
changePlay: satte => satte.changePlay, changePlay: satte => satte.changePlay,
playIndex: state => state.playIndex, playIndex: state => state.playIndex,
isShowPlayerDetail: state => state.isShowPlayerDetail, isShowPlayerDetail: state => state.isShowPlayerDetail,
@ -78,9 +80,8 @@ const mutations = {
setLrc(state, datas) { setLrc(state, datas) {
datas.musicInfo.lrc = datas.lrc datas.musicInfo.lrc = datas.lrc
}, },
setList(state, { list, listId, index }) { setList(state, { list, index }) {
state.list = list state.listInfo = list
state.listId = listId
state.playIndex = index state.playIndex = index
state.changePlay = true state.changePlay = true
}, },

6
src/renderer/store/mutations.js
View File

@ -24,9 +24,6 @@ export default {
if (sortId != null) state.setting.songList.sortId = sortId if (sortId != null) state.setting.songList.sortId = sortId
if (source != null) state.setting.songList.source = source if (source != null) state.setting.songList.source = source
}, },
setListScroll(state, { id, location }) {
state.setting.list.scroll.locations[id] = location
},
setNewVersion(state, val) { setNewVersion(state, val) {
state.version.newVersion = val state.version.newVersion = val
}, },
@ -51,4 +48,7 @@ export default {
setMediaDeviceId(state, val) { setMediaDeviceId(state, val) {
state.setting.player.mediaDeviceId = val state.setting.player.mediaDeviceId = val
}, },
setPrevSelectListId(state, val) {
state.setting.list.prevSelectListId = val
},
} }

20
src/renderer/store/state.js
View File

@ -10,7 +10,8 @@ const electronStore_list = window.electronStore_list = new Store({
const electronStore_config = window.electronStore_config = new Store({ const electronStore_config = window.electronStore_config = new Store({
name: 'config', name: 'config',
}) })
if (!electronStore_config.get('version') && electronStore_config.get('setting')) { // 迁移配置 let setting = electronStore_config.get('setting')
if (!electronStore_config.get('version') && setting) { // 迁移配置
electronStore_config.set('version', electronStore_config.get('setting.version')) electronStore_config.set('version', electronStore_config.get('setting.version'))
electronStore_config.delete('setting.version') electronStore_config.delete('setting.version')
const list = electronStore_config.get('list') const list = electronStore_config.get('list')
@ -25,7 +26,20 @@ if (!electronStore_config.get('version') && electronStore_config.get('setting'))
electronStore_config.delete('download') electronStore_config.delete('download')
} }
} }
const { version: settingVersion, setting } = updateSetting(electronStore_config.get('setting'), electronStore_config.get('version'))
// 迁移列表滚动位置设置 ^0.18.3
if (setting && setting.list.scroll) {
let scroll = setting.list.scroll
const electronStore_list = window.electronStore_list = new Store({
name: 'playList',
})
electronStore_list.set('defaultList.location', scroll.locations.defaultList || 0)
electronStore_list.set('loveList.location', scroll.locations.loveList || 0)
electronStore_config.delete('setting.list.scroll')
electronStore_config.set('setting.list.isSaveScrollLocation', scroll.enable)
}
const { version: settingVersion, setting: newSetting } = updateSetting(setting, electronStore_config.get('version'))
electronStore_config.set('version', settingVersion) electronStore_config.set('version', settingVersion)
electronStore_config.set('setting', setting) electronStore_config.set('setting', setting)
process.versions.app = version process.versions.app = version
@ -108,7 +122,7 @@ export default {
downloadProgress: null, downloadProgress: null,
}, },
userInfo: null, userInfo: null,
setting, setting: newSetting,
settingVersion, settingVersion,
windowSizeList, windowSizeList,

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

@ -55,15 +55,8 @@ const easeInOutQuad = (t, b, c, d) => {
t-- t--
return (-c / 2) * (t * (t - 2) - 1) + b return (-c / 2) * (t * (t - 2) - 1) + b
} }
/** const handleScroll = (element, to, duration = 300, fn = () => {}) => {
* 设置滚动条位置 if (!element) return fn()
* @param {*} element 要设置滚动的容器 dom
* @param {*} to 滚动的目标位置
* @param {*} duration 滚动完成时间 ms
* @param {*} fn 滚动完成后的回调
*/
export const scrollTo = (element, to, duration = 300, fn = () => {}) => {
if (!element) return
const start = element.scrollTop || element.scrollY || 0 const start = element.scrollTop || element.scrollY || 0
let cancel = false let cancel = false
if (to > start) { if (to > start) {
@ -99,6 +92,31 @@ export const scrollTo = (element, to, duration = 300, fn = () => {}) => {
cancel = true cancel = true
} }
} }
/**
* 设置滚动条位置
* @param {*} element 要设置滚动的容器 dom
* @param {*} to 滚动的目标位置
* @param {*} duration 滚动完成时间 ms
* @param {*} fn 滚动完成后的回调
* @param {*} delay 延迟执行时间
*/
export const scrollTo = (element, to, duration = 300, fn = () => {}, delay) => {
let cancelFn
let timeout
if (delay) {
let scrollCancelFn
cancelFn = () => {
timeout == null ? scrollCancelFn && scrollCancelFn() : clearTimeout(timeout)
}
timeout = setTimeout(() => {
timeout = null
scrollCancelFn = handleScroll(element, to, duration, fn, delay)
}, delay)
} else {
cancelFn = handleScroll(element, to, duration, fn, delay)
}
return cancelFn
}
/** /**
* 检查路径是否存在 * 检查路径是否存在

4
src/renderer/utils/keyBind.js
View File

@ -52,7 +52,7 @@ const assertStopCallback = element => {
const handleKeyDown = event => { const handleKeyDown = event => {
if (assertStopCallback(event.target)) return if (assertStopCallback(event.target)) return
event.preventDefault() // event.preventDefault()
let keys = eventModifiers(event) let keys = eventModifiers(event)
switch (event.key) { switch (event.key) {
case 'Control': case 'Control':
@ -61,7 +61,7 @@ const handleKeyDown = event => {
case 'Shift': case 'Shift':
break break
default: default:
keys.push(event.key) keys.push(event.key.toLowerCase())
break break
} }
handleEvent('down', event, keys) handleEvent('down', event, keys)

3
src/renderer/utils/request.js
View File

@ -109,7 +109,8 @@ export const httpFetch = (url, options = { method: 'get' }) => {
export const cancelHttp = requestObj => { export const cancelHttp = requestObj => {
// console.log(requestObj) // console.log(requestObj)
if (!requestObj) return if (!requestObj) return
console.log('cancel:', requestObj.href) console.log('cancel:', requestObj)
if (!requestObj.abort) return
requestObj.abort() requestObj.abort()
} }

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

@ -154,6 +154,8 @@ export default {
if (this.keyEvent.isModDown) this.keyEvent.isModDown = false if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
}, },
handle_key_mod_a_down({ event }) { handle_key_mod_a_down({ event }) {
if (event.target.tagName == 'INPUT') return
event.preventDefault()
if (event.repeat) return if (event.repeat) return
this.keyEvent.isModDown = false this.keyEvent.isModDown = false
this.handleSelectAllData() this.handleSelectAllData()
@ -236,7 +238,7 @@ export default {
async handlePlay(index) { async handlePlay(index) {
const targetSong = this.list[index] 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: this.list, listId: '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]
@ -364,7 +366,7 @@ export default {
} }
tr { tr {
&.active { &.active {
color: @color-theme; color: @color-btn;
} }
} }
} }
@ -374,7 +376,7 @@ each(@themes, {
.tbody { .tbody {
tr { tr {
&.active { &.active {
color: ~'@{color-@{value}-theme}'; color: ~'@{color-@{value}-btn}';
} }
} }
td { td {

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

@ -96,8 +96,7 @@ export default {
) )
if (targetIndex > -1) { if (targetIndex > -1) {
this.setList({ this.setList({
list: this.defaultList.list, list: this.defaultList,
listId: this.defaultList.id,
index: targetIndex, index: targetIndex,
}) })
} }

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

@ -1,7 +1,24 @@
<template lang="pug"> <template lang="pug">
div(:class="$style.list") div(:class="$style.container" @click="handleContainerClick($event)")
//- transition div(:class="$style.lists" ref="dom_lists")
div(v-if="delayShow && list.length" :class="$style.content") div(:class="$style.listHeader")
h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
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, defaultList.id == listId ? $style.active : null]" :title="defaultList.name" @click="handleListToggle(defaultList.id)")
span(:class="$style.listsLabel") {{defaultList.name}}
li(:class="[$style.listsItem, loveList.id == listId ? $style.active : null]" :title="loveList.name" @click="handleListToggle(loveList.id)")
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")
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")
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")
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')")
div(:class="$style.list")
//- transition
div(:class="$style.thead") div(:class="$style.thead")
table table
thead thead
@ -10,41 +27,43 @@
th.nobreak(style="width: 25%;") {{$t('view.list.name')}} th.nobreak(style="width: 25%;") {{$t('view.list.name')}}
th.nobreak(style="width: 20%;") {{$t('view.list.singer')}} th.nobreak(style="width: 20%;") {{$t('view.list.singer')}}
th.nobreak(style="width: 20%;") {{$t('view.list.album')}} th.nobreak(style="width: 20%;") {{$t('view.list.album')}}
th.nobreak(style="width: 20%;") {{$t('view.list.action')}} th.nobreak(style="width: 9%;") {{$t('view.list.time')}}
th.nobreak(style="width: 10%;") {{$t('view.list.time')}} th.nobreak(style="width: 21%;") {{$t('view.list.action')}}
div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent") div(v-if="delayShow && list.length" :class="$style.content")
table div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
tbody(@contextmenu="handleContextMenu" ref="dom_tbody") table
tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid" tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
@click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]") tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}} @click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
td.break(style="width: 25%;") td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
span.select {{item.name}} td.break(style="width: 25%;")
span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}} span.select {{item.name}}
//- span.badge.badge-light(v-if="item._types['128k']") 128K span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
//- span.badge.badge-light(v-if="item._types['192k']") 192K //- span.badge.badge-light(v-if="item._types['128k']") 128K
//- span.badge.badge-secondary(v-if="item._types['320k']") 320K //- span.badge.badge-light(v-if="item._types['192k']") 192K
//- span.badge.badge-theme-info(v-if="item._types.ape") APE //- span.badge.badge-secondary(v-if="item._types['320k']") 320K
//- span.badge.badge-theme-success(v-if="item._types.flac") FLAC //- span.badge.badge-theme-info(v-if="item._types.ape") APE
td.break(style="width: 20%;") //- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
span.select {{item.singer}} td.break(style="width: 20%;")
td.break(style="width: 20%;") span.select {{item.singer}}
span.select {{item.albumName}} td.break(style="width: 20%;")
td(style="width: 20%; padding-left: 0; padding-right: 0;") span.select {{item.albumName}}
material-list-buttons(:index="index" @btn-click="handleListBtnClick") td(style="width: 9%;")
//- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载 span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
//- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听 td(style="width: 21%; padding-left: 0; padding-right: 0;")
//- button.btn-secondary(type='button' @click.stop='handleRemove(index)') 删除 material-list-buttons(:index="index" @btn-click="handleListBtnClick")
//- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋ //- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
td(style="width: 10%;") //- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}} //- button.btn-secondary(type='button' @click.stop='handleRemove(index)') 删除
div(:class="$style.noItem" v-else) //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')") div(:class="$style.noItem" v-else)
p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')")
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false") 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="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" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="isShowListAdd = false")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" :exclude-list-id="excludeListId" @close="handleListAddModalClose") material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdListDetailData" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
material-menu(:menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick")
</template> </template>
<script> <script>
@ -59,7 +78,8 @@ export default {
clickIndex: -1, clickIndex: -1,
isShowDownload: false, isShowDownload: false,
musicInfo: null, musicInfo: null,
selectdData: [], selectdListDetailData: [],
selectdListData: [],
isShowEditBtn: false, isShowEditBtn: false,
isShowDownloadMultiple: false, isShowDownloadMultiple: false,
delayShow: false, delayShow: false,
@ -68,15 +88,32 @@ export default {
isShowListAddMultiple: false, isShowListAddMultiple: false,
delayTimeout: null, delayTimeout: null,
isToggleList: true, isToggleList: true,
focusTarget: 'listDetail',
keyEvent: { keyEvent: {
isShiftDown: false, isShiftDown: false,
isModDown: false, isModDown: false,
}, },
listsData: {
isShowItemMenu: false,
itemMenuControl: {
rename: true,
moveup: true,
movedown: true,
remove: true,
},
rightClickItemIndex: -1,
menuLocation: {
x: 0,
y: 0,
},
isShowNewList: false,
isNewLeave: false,
},
} }
}, },
computed: { computed: {
...mapGetters(['userInfo', 'setting']), ...mapGetters(['userInfo', 'setting']),
...mapGetters('list', ['defaultList', 'loveList', 'userList']), ...mapGetters('list', ['isInitedList', 'defaultList', 'loveList', 'userList']),
...mapGetters('player', { ...mapGetters('player', {
playerListId: 'listId', playerListId: 'listId',
playIndex: 'playIndex', playIndex: 'playIndex',
@ -101,17 +138,46 @@ export default {
targetList = this.userList.find(l => l.id === this.listId) targetList = this.userList.find(l => l.id === this.listId)
break break
} }
return targetList if (targetList) return targetList
this.handleListToggle(this.defaultList.id)
return this.defaultList
}, },
excludeListId() { excludeListId() {
return [this.listId] return [this.listId]
}, },
lists() {
return [this.defaultList, this.loveList, ...this.userList]
},
isShowSource() { isShowSource() {
return this.setting.list.isShowSource return this.setting.list.isShowSource
}, },
listsItemMenu() {
return [
{
name: this.$t('view.list.lists_rename'),
action: 'rename',
disabled: !this.listsData.itemMenuControl.rename,
},
{
name: this.$t('view.list.lists_moveup'),
action: 'moveup',
disabled: !this.listsData.itemMenuControl.moveup,
},
{
name: this.$t('view.list.lists_movedown'),
action: 'movedown',
disabled: !this.listsData.itemMenuControl.movedown,
},
{
name: this.$t('view.list.lists_remove'),
action: 'remove',
disabled: !this.listsData.itemMenuControl.remove,
},
]
},
}, },
watch: { watch: {
selectdData(n) { selectdListDetailData(n) {
const len = n.length const len = n.length
if (len) { if (len) {
this.isShowEditBtn = true this.isShowEditBtn = true
@ -119,8 +185,9 @@ export default {
this.isShowEditBtn = false this.isShowEditBtn = false
} }
}, },
list() { 'listData.list'(n, o) {
this.removeAllSelect() if (n === o && n.length === o.length) return
this.removeAllSelectListDetail()
}, },
'$route.query.scrollIndex'(n) { '$route.query.scrollIndex'(n) {
if (n == null || this.isToggleList) return if (n == null || this.isToggleList) return
@ -129,6 +196,7 @@ export default {
}, },
}, },
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
this.setPrevSelectListId(to.query.id)
if (to.query.id == null) return if (to.query.id == null) return
else if (to.query.id == this.listId) { else if (to.query.id == this.listId) {
if (to.query.scrollIndex != null) this.isToggleList = false if (to.query.scrollIndex != null) this.isToggleList = false
@ -163,7 +231,8 @@ export default {
next() next()
}, },
created() { created() {
this.listId = this.$route.query.id this.listId = this.$route.query.id || this.defaultList.id
this.setPrevSelectListId(this.listId)
this.handleScroll = throttle(e => { this.handleScroll = throttle(e => {
if (this.routeLeaveLocation) { if (this.routeLeaveLocation) {
this.setListScroll({ id: this.listId, location: this.routeLeaveLocation }) this.setListScroll({ id: this.listId, location: this.routeLeaveLocation })
@ -175,13 +244,14 @@ export default {
}, },
mounted() { mounted() {
this.handleDelayShow() this.handleDelayShow()
this.setListsScroll()
}, },
beforeDestroy() { beforeDestroy() {
this.unlistenEvent() this.unlistenEvent()
}, },
methods: { methods: {
...mapMutations(['setListScroll']), ...mapMutations(['setPrevSelectListId']),
...mapMutations('list', ['listRemove', 'listRemoveMultiple']), ...mapMutations('list', ['listRemove', 'listRemoveMultiple', 'setUserListName', 'createUserList', 'moveupUserList', 'movedownUserList', 'removeUserList', 'setListScroll']),
...mapActions('download', ['createDownload', 'createDownloadMultiple']), ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
...mapMutations('player', { ...mapMutations('player', {
setPlayList: 'setList', setPlayList: 'setList',
@ -213,6 +283,8 @@ export default {
if (this.keyEvent.isModDown) this.keyEvent.isModDown = false if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
}, },
handle_key_mod_a_down({ event }) { handle_key_mod_a_down({ event }) {
if (event.target.tagName == 'INPUT') return
event.preventDefault()
if (event.repeat) return if (event.repeat) return
this.keyEvent.isModDown = false this.keyEvent.isModDown = false
this.handleSelectAllData() this.handleSelectAllData()
@ -239,8 +311,8 @@ export default {
restoreScroll(isAnimation) { restoreScroll(isAnimation) {
if (!this.list.length) return if (!this.list.length) return
if (this.$route.query.scrollIndex == null) { if (this.$route.query.scrollIndex == null) {
let location = this.setting.list.scroll.locations[this.listId] let location = this.listData.location || 0
if (this.setting.list.scroll.enable && location) { if (this.setting.list.isSaveScrollLocation && location) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.dom_scrollContent.scrollTo(0, location) this.$refs.dom_scrollContent.scrollTo(0, location)
}) })
@ -263,7 +335,7 @@ export default {
handleDoubleClick(event, index) { handleDoubleClick(event, index) {
if (event.target.classList.contains('select')) return if (event.target.classList.contains('select')) return
this.handleSelectData(event, index) this.handleSelectListDetailData(event, index)
if ( if (
window.performance.now() - this.clickTime > 400 || window.performance.now() - this.clickTime > 400 ||
@ -277,12 +349,14 @@ export default {
this.clickTime = 0 this.clickTime = 0
this.clickIndex = -1 this.clickIndex = -1
}, },
handleSelectData(event, clickIndex) { handleSelectListDetailData(event, clickIndex) {
if (this.focusTarget != 'listDetail' && this.selectdListDetailData.length) this.removeAllSelectListDetail()
if (this.keyEvent.isShiftDown) { if (this.keyEvent.isShiftDown) {
if (this.selectdData.length) { if (this.selectdListDetailData.length) {
let lastSelectIndex = this.list.indexOf(this.selectdData[this.selectdData.length - 1]) let lastSelectIndex = this.list.indexOf(this.selectdListDetailData[this.selectdListDetailData.length - 1])
if (lastSelectIndex == clickIndex) return this.removeAllSelect() if (lastSelectIndex == clickIndex) return this.removeAllSelectListDetail()
this.removeAllSelect() this.removeAllSelectListDetail()
let isNeedReverse = false let isNeedReverse = false
if (clickIndex < lastSelectIndex) { if (clickIndex < lastSelectIndex) {
let temp = lastSelectIndex let temp = lastSelectIndex
@ -290,8 +364,8 @@ export default {
clickIndex = temp clickIndex = temp
isNeedReverse = true isNeedReverse = true
} }
this.selectdData = this.list.slice(lastSelectIndex, clickIndex + 1) this.selectdListDetailData = this.list.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) this.selectdData.reverse() if (isNeedReverse) this.selectdListDetailData.reverse()
let nodes = this.$refs.dom_tbody.childNodes let nodes = this.$refs.dom_tbody.childNodes
do { do {
nodes[lastSelectIndex].classList.add('active') nodes[lastSelectIndex].classList.add('active')
@ -299,22 +373,60 @@ export default {
} while (lastSelectIndex <= clickIndex) } while (lastSelectIndex <= clickIndex)
} else { } else {
event.currentTarget.classList.add('active') event.currentTarget.classList.add('active')
this.selectdData.push(this.list[clickIndex]) this.selectdListDetailData.push(this.list[clickIndex])
} }
} else if (this.keyEvent.isModDown) { } else if (this.keyEvent.isModDown) {
let item = this.list[clickIndex] let item = this.list[clickIndex]
let index = this.selectdData.indexOf(item) let index = this.selectdListDetailData.indexOf(item)
if (index < 0) { if (index < 0) {
this.selectdData.push(item) this.selectdListDetailData.push(item)
event.currentTarget.classList.add('active') event.currentTarget.classList.add('active')
} else { } else {
this.selectdData.splice(index, 1) this.selectdListDetailData.splice(index, 1)
event.currentTarget.classList.remove('active') event.currentTarget.classList.remove('active')
} }
} else if (this.selectdData.length) this.removeAllSelect() } else if (this.selectdListDetailData.length) this.removeAllSelectListDetail()
}, },
removeAllSelect() { handleSelectListData(event, clickIndex) {
this.selectdData = [] if (this.focusTarget != 'list' && this.selectdListData.length) this.removeAllSelectList()
if (this.keyEvent.isShiftDown) {
if (this.selectdListData.length) {
let lastSelectIndex = this.list.indexOf(this.selectdListData[this.selectdListData.length - 1])
if (lastSelectIndex == clickIndex) return this.removeAllSelectList()
this.removeAllSelectList()
let isNeedReverse = false
if (clickIndex < lastSelectIndex) {
let temp = lastSelectIndex
lastSelectIndex = clickIndex
clickIndex = temp
isNeedReverse = true
}
this.selectdListData = this.list.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) this.selectdListData.reverse()
let nodes = this.$refs.dom_tbody.childNodes
do {
nodes[lastSelectIndex].classList.add('active')
lastSelectIndex++
} while (lastSelectIndex <= clickIndex)
} else {
event.currentTarget.classList.add('active')
this.selectdListData.push(this.list[clickIndex])
}
} else if (this.keyEvent.isModDown) {
let item = this.list[clickIndex]
let index = this.selectdListData.indexOf(item)
if (index < 0) {
this.selectdListData.push(item)
event.currentTarget.classList.add('active')
} else {
this.selectdListData.splice(index, 1)
event.currentTarget.classList.remove('active')
}
} else if (this.selectdListData.length) this.removeAllSelectList()
},
removeAllSelectListDetail() {
this.selectdListDetailData = []
let dom_tbody = this.$refs.dom_tbody let dom_tbody = this.$refs.dom_tbody
if (!dom_tbody) return if (!dom_tbody) return
let nodes = dom_tbody.querySelectorAll('.active') let nodes = dom_tbody.querySelectorAll('.active')
@ -322,9 +434,18 @@ export default {
if (node.parentNode == dom_tbody) node.classList.remove('active') if (node.parentNode == dom_tbody) node.classList.remove('active')
} }
}, },
removeAllSelectList() {
this.selectdListData = []
let dom_list = this.$refs.dom_lists_list
if (!dom_list) return
let nodes = dom_list.querySelectorAll('.selected')
for (const node of nodes) {
if (node.parentNode == dom_list) node.classList.remove('selected')
}
},
testPlay(index) { testPlay(index) {
if (!this.assertApiSupport(this.list[index].source)) return if (!this.assertApiSupport(this.list[index].source)) return
this.setPlayList({ list: this.list, listId: this.listId, index }) this.setPlayList({ list: this.listData, index })
}, },
handleRemove(index) { handleRemove(index) {
this.listRemove({ id: this.listId, index }) this.listRemove({ id: this.listId, index })
@ -359,18 +480,18 @@ export default {
this.isShowDownload = false this.isShowDownload = false
}, },
handleSelectAllData() { handleSelectAllData() {
this.removeAllSelect() this.removeAllSelectListDetail()
this.selectdData = [...this.list] this.selectdListDetailData = [...this.list]
let nodes = this.$refs.dom_tbody.childNodes let nodes = this.$refs.dom_tbody.childNodes
for (const node of nodes) { for (const node of nodes) {
node.classList.add('active') node.classList.add('active')
} }
// asyncSetArray(this.selectdData, isSelect ? [...this.list] : []) // asyncSetArray(this.selectdListDetailData, isSelect ? [...this.list] : [])
}, },
handleAddDownloadMultiple(type) { handleAddDownloadMultiple(type) {
const list = this.selectdData.filter(s => this.assertApiSupport(s.source)) const list = this.selectdListDetailData.filter(s => this.assertApiSupport(s.source))
this.createDownloadMultiple({ list, type }) this.createDownloadMultiple({ list, type })
this.removeAllSelect() this.removeAllSelectListDetail()
this.isShowDownloadMultiple = false this.isShowDownloadMultiple = false
}, },
handleFlowBtnClick(action) { handleFlowBtnClick(action) {
@ -379,8 +500,8 @@ export default {
this.isShowDownloadMultiple = true this.isShowDownloadMultiple = true
break break
case 'remove': case 'remove':
this.listRemoveMultiple({ id: this.listId, list: this.selectdData }) this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
this.removeAllSelect() this.removeAllSelectListDetail()
break break
case 'add': case 'add':
this.isShowListAddMultiple = true this.isShowListAddMultiple = true
@ -388,7 +509,7 @@ export default {
} }
}, },
handleListAddModalClose(isClearSelect) { handleListAddModalClose(isClearSelect) {
if (isClearSelect) this.removeAllSelect() if (isClearSelect) this.removeAllSelectListDetail()
this.isShowListAddMultiple = false this.isShowListAddMultiple = false
}, },
getMusicLocation(index) { getMusicLocation(index) {
@ -413,6 +534,91 @@ export default {
assertApiSupport(source) { assertApiSupport(source) {
return assertApiSupport(source) return assertApiSupport(source)
}, },
handleContainerClick(event) {
let isFocusList = event.target == this.$refs.dom_lists || this.$refs.dom_lists.contains(event.target)
this.focusTarget = isFocusList ? 'list' : 'listDetail'
},
handleListsSave(index, event) {
let dom_target = this.$refs.dom_lists_list.querySelector('.' + this.$style.editing)
if (dom_target) dom_target.classList.remove(this.$style.editing)
let name = event.target.value.trim()
if (name.length) return this.setUserListName({ index, name })
event.target.value = this.userList[index].name
},
handleListsCreate(event) {
if (event.target.readonly) return
let name = event.target.value.trim()
event.target.readonly = true
if (name == '') {
this.listsData.isShowNewList = false
return
}
this.listsData.isNewLeave = true
this.$nextTick(() => {
this.listsData.isShowNewList = false
})
this.createUserList(name)
},
handleShowNewList() {
this.listsData.isShowNewList = true
this.$nextTick(() => {
this.$refs.dom_listsNewInput.focus()
})
},
handleListsNewAfterLeave() {
this.listsData.isNewLeave = false
},
setListsScroll() {
let target = this.$refs.dom_lists_list.querySelector('.' + this.$style.active)
if (!target) return
let offsetTop = target.offsetTop
let location = offsetTop - 150
if (location > 0) this.$refs.dom_lists_list.scrollTop = location
},
handleListToggle(id) {
if (id == this.listId) return
this.$router.push({
path: 'list',
query: { id },
}).catch(_ => _)
},
handleListsItemRigthClick(event, index) {
this.listsData.itemMenuControl.moveup = index > 0
this.listsData.itemMenuControl.movedown = index < this.userList.length - 1
this.listsData.rightClickItemIndex = index
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.$nextTick(() => {
this.listsData.isShowItemMenu = true
})
},
handleListsItemMenuClick(action) {
// console.log(action)
this.listsData.isShowItemMenu = false
let dom
switch (action && action.action) {
case 'rename':
dom = this.$refs.dom_lists_list.querySelectorAll('.user-list')[this.listsData.rightClickItemIndex]
this.$nextTick(() => {
dom.classList.add(this.$style.editing)
dom.querySelector('input').focus()
})
break
case 'moveup':
this.moveupUserList(this.listsData.rightClickItemIndex)
break
case 'movedown':
this.movedownUserList(this.listsData.rightClickItemIndex)
break
case 'remove':
this.removeUserList(this.listsData.rightClickItemIndex)
break
}
this.listsData.rightClickItemIndex = -1
},
}, },
} }
</script> </script>
@ -420,15 +626,135 @@ export default {
<style lang="less" module> <style lang="less" module>
@import '../assets/styles/layout.less'; @import '../assets/styles/layout.less';
.container {
overflow: hidden;
height: 100%;
display: flex;
position: relative;
}
.lists {
flex: none;
width: 16%;
display: flex;
flex-flow: column nowrap;
}
.listHeader {
position: relative;
&:hover {
.listsAdd {
opacity: 1;
}
}
}
.listsTitle {
font-size: 12px;
line-height: 38px;
padding: 0 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
flex: none;
}
.listsAdd {
position: absolute;
right: 0;
top: 8px;
background: none;
height: 30px;
border: none;
outline: none;
border-radius: @radius-border;
cursor: pointer;
opacity: 0;
transition: opacity @transition-theme;
color: @color-btn;
svg {
vertical-align: bottom;
}
&:active {
opacity: .7 !important;
}
}
.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;
}
.listsInput {
width: 100%;
height: 36px;
border: none;
padding: 0;
line-height: 36px;
background: none;
outline: none;
font-size: 13px;
display: none;
font-family: inherit;
}
.listsNew {
padding: 0 10px;
background-color: @color-theme_2-hover;
.listsInput {
display: block;
}
}
.newLeave {
margin-top: -36px;
z-index: -1;
}
.list { .list {
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
flex: auto;
display: flex;
flex-flow: column nowrap;
// .noItem { // .noItem {
// } // }
} }
.content { .content {
height: 100%; min-height: 0;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -456,7 +782,7 @@ export default {
tr { tr {
&.active { &.active {
color: @color-theme; color: @color-btn;
} }
} }
td { td {
@ -504,10 +830,33 @@ export default {
each(@themes, { each(@themes, {
:global(#container.@{value}) { :global(#container.@{value}) {
.listsAdd {
color: ~'@{color-@{value}-btn}';
}
.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}';
}
}
.listsNew {
background-color: ~'@{color-@{value}-theme_2-hover}';
}
.tbody { .tbody {
tr { tr {
&.active { &.active {
color: ~'@{color-@{value}-theme}'; color: ~'@{color-@{value}-btn}';
} }
} }
td { td {

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

@ -12,8 +12,8 @@
th.nobreak(style="width: 25%;") {{$t('view.search.name')}} th.nobreak(style="width: 25%;") {{$t('view.search.name')}}
th.nobreak(style="width: 20%;") {{$t('view.search.singer')}} th.nobreak(style="width: 20%;") {{$t('view.search.singer')}}
th.nobreak(style="width: 25%;") {{$t('view.search.album')}} th.nobreak(style="width: 25%;") {{$t('view.search.album')}}
th.nobreak(style="width: 15%;") {{$t('view.search.action')}}
th.nobreak(style="width: 10%;") {{$t('view.search.time')}} th.nobreak(style="width: 10%;") {{$t('view.search.time')}}
th.nobreak(style="width: 15%;") {{$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="handleContextMenu" ref="dom_tbody")
@ -28,13 +28,13 @@
span.select {{item.singer}} span.select {{item.singer}}
td.break(style="width: 25%;") td.break(style="width: 25%;")
span.select {{item.albumName}} span.select {{item.albumName}}
td(style="width: 10%;")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
td(style="width: 15%; padding-left: 0; padding-right: 0;") td(style="width: 15%; 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)"
@btn-click="handleListBtnClick") @btn-click="handleListBtnClick")
td(style="width: 10%;")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
div(:class="$style.pagination") div(:class="$style.pagination")
material-pagination(:count="listInfo.total" :limit="listInfo.limit" :page="page" @btn-click="handleTogglePage") material-pagination(:count="listInfo.total" :limit="listInfo.limit" :page="page" @btn-click="handleTogglePage")
div(v-else :class="$style.noitem") div(v-else :class="$style.noitem")
@ -191,6 +191,8 @@ export default {
if (this.keyEvent.isModDown) this.keyEvent.isModDown = false if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
}, },
handle_key_mod_a_down({ event }) { handle_key_mod_a_down({ event }) {
if (event.target.tagName == 'INPUT') return
event.preventDefault()
if (event.repeat) return if (event.repeat) return
this.keyEvent.isModDown = false this.keyEvent.isModDown = false
this.handleSelectAllData() this.handleSelectAllData()
@ -302,8 +304,7 @@ export default {
) )
if (targetIndex > -1) { if (targetIndex > -1) {
this.setList({ this.setList({
list: this.defaultList.list, list: this.defaultList,
listId: this.defaultList.id,
index: targetIndex, index: targetIndex,
}) })
} }

23
src/renderer/views/Setting.vue
View File

@ -91,7 +91,7 @@ div.scroll(:class="$style.setting")
dd(:title="$t('view.setting.list_scroll_title')") dd(:title="$t('view.setting.list_scroll_title')")
h3 {{$t('view.setting.list_scroll')}} h3 {{$t('view.setting.list_scroll')}}
div div
material-checkbox(id="setting_list_scroll_enable" v-model="current_setting.list.scroll.enable" :label="$t('view.setting.is_enable')") material-checkbox(id="setting_list_scroll_enable" v-model="current_setting.list.isSaveScrollLocation" :label="$t('view.setting.is_enable')")
//- dd(:title="播放列表是否显示专辑栏") //- dd(:title="播放列表是否显示专辑栏")
h3 专辑栏 h3 专辑栏
div div
@ -238,7 +238,7 @@ export default {
name: 'Setting', name: 'Setting',
computed: { computed: {
...mapGetters(['setting', 'settingVersion', 'themes', 'version', 'windowSizeList']), ...mapGetters(['setting', 'settingVersion', 'themes', 'version', 'windowSizeList']),
...mapGetters('list', ['defaultList', 'loveList']), ...mapGetters('list', ['defaultList', 'loveList', 'userList']),
isShowRebootBtn() { isShowRebootBtn() {
return this.current_setting.windowSizeId != window.currentWindowSizeId return this.current_setting.windowSizeId != window.currentWindowSizeId
}, },
@ -317,10 +317,7 @@ export default {
list: { list: {
isShowAlbumName: true, isShowAlbumName: true,
isShowSource: true, isShowSource: true,
scroll: { isSaveScrollLocation: true,
enable: true,
locations: {},
},
}, },
search: { search: {
searchSource: 'kw', searchSource: 'kw',
@ -451,12 +448,13 @@ export default {
console.log(listData.type) console.log(listData.type)
// 兼容0.6.2及以前版本的列表数据 // 兼容0.6.2及以前版本的列表数据
if (listData.type === 'defautlList') return this.setList({ id: 'default', list: listData.data.list }) if (listData.type === 'defautlList') return this.setList({ id: 'default', list: listData.data.list, name: '试听列表', location: 0 })
if (listData.type !== 'playList') return if (listData.type !== 'playList') return
for (const list of listData.data) { for (const list of listData.data) {
this.setList({ id: list.id, list: list.list }) if (list.location == null) list.location = 0
this.setList(list)
} }
}, },
exportPlayList(path) { exportPlayList(path) {
@ -465,6 +463,7 @@ export default {
data: [ data: [
this.defaultList, this.defaultList,
this.loveList, this.loveList,
...this.userList,
], ],
} }
fs.writeFile(path, JSON.stringify(data, null, 2), 'utf8', err => { fs.writeFile(path, JSON.stringify(data, null, 2), 'utf8', err => {
@ -484,10 +483,11 @@ export default {
this.refreshSetting(setting, settingVersion) this.refreshSetting(setting, settingVersion)
// 兼容0.6.2及以前版本的列表数据 // 兼容0.6.2及以前版本的列表数据
if (allData.defaultList) return this.setList({ id: 'default', list: allData.defaultList.list }) if (allData.defaultList) return this.setList({ id: 'default', list: allData.defaultList.list, name: '试听列表', location: 0 })
for (const list of allData.playList) { for (const list of allData.playList) {
this.setList({ id: list.id, list: list.list }) if (list.location == null) list.location = 0
this.setList(list)
} }
}, },
exportAllData(path) { exportAllData(path) {
@ -497,6 +497,7 @@ export default {
playList: [ playList: [
this.defaultList, this.defaultList,
this.loveList, this.loveList,
...this.userList,
], ],
} }
fs.writeFile(path, JSON.stringify(allData, null, 2), 'utf8', err => { fs.writeFile(path, JSON.stringify(allData, null, 2), 'utf8', err => {
@ -734,7 +735,7 @@ export default {
content: ' '; content: ' ';
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 4px; border-radius: @radius-border;
background-position: center; background-position: center;
background-size: auto 100%; background-size: auto 100%;
background-repeat: no-repeat; background-repeat: no-repeat;

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

@ -54,8 +54,8 @@
p {{$t('view.song_list.loding_list')}} p {{$t('view.song_list.loding_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" :list-name="listDetail.info.name")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose") material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose" :list-name="listDetail.info.name")
</template> </template>
<script> <script>
@ -213,8 +213,7 @@ export default {
) )
if (targetIndex > -1) { if (targetIndex > -1) {
this.setList({ this.setList({
list: this.defaultList.list, list: this.defaultList,
listId: this.defaultList.id,
index: targetIndex, index: targetIndex,
}) })
} }