升级到 vue3
This commit is contained in:
lyswhut
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<div id="my-list" :class="$style.container" @click="handleContainerClick" v-if="isInitedList">
|
||||
<Lists :list-id="listId" @show-menu="$refs.musicList.hideMenu()" ref="lists" />
|
||||
<MusicList :list-id="listId" @show-menu="$refs.lists.hideListsMenu()" ref="musicList" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getListPrevSelectId } from '@renderer/utils/data'
|
||||
import { isInitedList } from '@renderer/core/share/list'
|
||||
import { getList } from '@renderer/core/share/utils'
|
||||
|
||||
import Lists from './components/Lists'
|
||||
import MusicList from './components/MusicList'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
components: {
|
||||
Lists,
|
||||
MusicList,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
isInitedList,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listId: null,
|
||||
focusTarget: 'listDetail',
|
||||
}
|
||||
},
|
||||
beforeRouteUpdate(to, from) {
|
||||
// console.log(to, from)
|
||||
let id = to.query.id
|
||||
if (id == null) return
|
||||
if (!getList(id)) {
|
||||
id = this.$store.state.list.defaultList.id
|
||||
this.handleListToggle(id)
|
||||
}
|
||||
this.listId = id
|
||||
const scrollIndex = to.query.scrollIndex
|
||||
if (from.query.id == to.query.id) {
|
||||
if (!scrollIndex) return
|
||||
this.$nextTick(() => {
|
||||
this.$refs.musicList.restoreScroll(scrollIndex, true)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$router.replace({
|
||||
path: 'list',
|
||||
query: {
|
||||
id,
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeRouteLeave(to, from) {
|
||||
this.$refs.musicList.saveListPosition()
|
||||
},
|
||||
created() {
|
||||
let id = this.$route.query.id
|
||||
if (!id) {
|
||||
id = getListPrevSelectId() || this.$store.state.list.defaultList.id
|
||||
this.handleListToggle(id)
|
||||
}
|
||||
this.listId = id
|
||||
},
|
||||
methods: {
|
||||
handleListToggle(id) {
|
||||
if (id == this.listId) return
|
||||
this.$router.replace({
|
||||
path: 'list',
|
||||
query: { id },
|
||||
}).catch(_ => _)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
|
||||
.container {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@lists-item-height: 36px;
|
||||
.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, opacity;
|
||||
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;
|
||||
}
|
||||
&.fetching {
|
||||
opacity: .5;
|
||||
}
|
||||
&.editing {
|
||||
padding: 0 10px;
|
||||
background-color: @color-theme_2-hover;
|
||||
.listsLabel {
|
||||
display: none;
|
||||
}
|
||||
.listsInput {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listsLabel {
|
||||
display: block;
|
||||
height: @lists-item-height;
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
line-height: @lists-item-height;
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
.listsInput {
|
||||
width: 100%;
|
||||
height: @lists-item-height;
|
||||
border: none;
|
||||
padding: 0;
|
||||
// padding-bottom: 1px;
|
||||
line-height: @lists-item-height;
|
||||
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: -@lists-item-height;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.list {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
flex: auto;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
// .noItem {
|
||||
|
||||
// }
|
||||
}
|
||||
.content {
|
||||
min-height: 0;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
// table {
|
||||
// position: relative;
|
||||
// thead {
|
||||
// position: fixed;
|
||||
// width: 100%;
|
||||
// th {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
&.copying {
|
||||
.no-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.thead {
|
||||
flex: none;
|
||||
tr > th:first-child {
|
||||
color: @color-theme_2-font-label;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
}
|
||||
:global(.list) {
|
||||
flex: auto;
|
||||
:global(.list-item) {
|
||||
&.active {
|
||||
color: @color-btn;
|
||||
}
|
||||
}
|
||||
:global(.list-item-cell) {
|
||||
font-size: 12px !important;
|
||||
|
||||
&:first-child {
|
||||
// padding-left: 10px;
|
||||
font-size: 11px !important;
|
||||
color: @color-theme_2-font-label !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.labelSource {
|
||||
color: @color-theme;
|
||||
padding: 5px;
|
||||
font-size: .8em;
|
||||
line-height: 1;
|
||||
opacity: .75;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.no-item {
|
||||
position: relative;
|
||||
height: 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(#root.@{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}';
|
||||
}
|
||||
:global(.list) {
|
||||
:global(.list-item) {
|
||||
&.active {
|
||||
color: ~'@{color-@{value}-btn}';
|
||||
}
|
||||
}
|
||||
:global(.list-item-cell) {
|
||||
&:first-child {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}' !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.labelSource {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
.no-item {
|
||||
p {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<material-modal :show="visible" @close="$emit('update:visible', false)" bg-close="bg-close">
|
||||
<div :class="$style.header">
|
||||
<h2>{{listInfo.name}}</h2>
|
||||
</div>
|
||||
<main class="scroll" :class="$style.main">
|
||||
<ul ref="dom_list" v-if="duplicateList.length" :class="$style.list">
|
||||
<li v-for="(item, index) in duplicateList" :key="item.songmid" :class="$style.listItem">
|
||||
<div :class="$style.num">{{item.index + 1}}</div>
|
||||
<div :class="$style.text">
|
||||
<h3 :class="$style.text">{{item.musicInfo.name}} - {{item.musicInfo.singer}}</h3>
|
||||
<h3 v-if="item.musicInfo.albumName" :class="[$style.text, $style.albumName]">{{item.musicInfo.albumName}}</h3>
|
||||
</div>
|
||||
<div :class="$style.label">{{item.musicInfo.source}}</div>
|
||||
<div :class="$style.label">{{item.musicInfo.interval}}</div>
|
||||
<div :class="$style.btns">
|
||||
<button type="button" @click="handlePlay(index)" :class="$style.btn">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="50%" viewBox="0 0 287.386 287.386" space="preserve" v-once>
|
||||
<use xlink:href="#icon-testPlay"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" @click="handleRemove(index)" :class="$style.btn">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="50%" viewBox="0 0 212.982 212.982" space="preserve" v-once>
|
||||
<use xlink:href="#icon-delete"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div :class="$style.noItem" v-else>
|
||||
<p v-text="$t('no_item')"></p>
|
||||
</div>
|
||||
</main>
|
||||
</material-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
listInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
visible(n) {
|
||||
if (n) this.handleFilterList()
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duplicateList: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.listInfo.list) this.handleFilterList()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('list', [
|
||||
'listRemove',
|
||||
]),
|
||||
...mapMutations('player', {
|
||||
setPlayList: 'setList',
|
||||
}),
|
||||
handleFilterList() {
|
||||
const listMap = new Map()
|
||||
const duplicateList = []
|
||||
this.listInfo.list.forEach((musicInfo, index) => {
|
||||
const musicInfoName = musicInfo.name.toLowerCase().trim()
|
||||
if (listMap.has(musicInfoName)) {
|
||||
const targetMusicInfo = listMap.get(musicInfoName)
|
||||
duplicateList.push({
|
||||
index: this.listInfo.list.indexOf(targetMusicInfo),
|
||||
musicInfo: targetMusicInfo,
|
||||
}, {
|
||||
index,
|
||||
musicInfo,
|
||||
})
|
||||
} else {
|
||||
listMap.set(musicInfoName, musicInfo)
|
||||
}
|
||||
})
|
||||
|
||||
this.duplicateList = duplicateList
|
||||
},
|
||||
handleRemove(index) {
|
||||
const { musicInfo: targetMusicInfo } = this.duplicateList.splice(index, 1)[0]
|
||||
// let duplicates = []
|
||||
// for (let index = 0; index < this.duplicateList.length; index++) {
|
||||
// const { musicInfo } = this.duplicateList[index]
|
||||
// if (musicInfo.name == targetMusicInfo.name) {
|
||||
// duplicates.push(index)
|
||||
// if (duplicates.length > 1) break
|
||||
// }
|
||||
// }
|
||||
// console.log(duplicates)
|
||||
// if (duplicates.length < 2) this.duplicateList.splice(duplicates[0], 1)
|
||||
|
||||
this.listRemove({ listId: this.listInfo.id, id: targetMusicInfo.songmid })
|
||||
|
||||
this.handleFilterList()
|
||||
},
|
||||
handlePlay(index) {
|
||||
const { index: musicInfoIndex } = this.duplicateList[index]
|
||||
this.setPlayList({ listId: this.listInfo.id, index: musicInfoIndex })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
|
||||
.header {
|
||||
flex: none;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.main {
|
||||
min-height: 200px;
|
||||
width: 460px;
|
||||
}
|
||||
|
||||
.list {
|
||||
// background-color: @color-search-form-background;
|
||||
font-size: 13px;
|
||||
transition-property: height;
|
||||
position: relative;
|
||||
.listItem {
|
||||
position: relative;
|
||||
padding: 8px 5px;
|
||||
transition: background-color .2s ease;
|
||||
line-height: 1.3;
|
||||
// overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: @color-theme_2-hover;
|
||||
}
|
||||
// border-radius: 4px;
|
||||
// &:last-child {
|
||||
// border-bottom-left-radius: 4px;
|
||||
// border-bottom-right-radius: 4px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
flex: none;
|
||||
font-size: 12px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: auto;
|
||||
padding-left: 5px;
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
.albumName {
|
||||
font-size: 12px;
|
||||
opacity: 0.6;
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
.label {
|
||||
flex: none;
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// transform: rotate(45deg);
|
||||
// background-color:
|
||||
}
|
||||
.btns {
|
||||
flex: none;
|
||||
font-size: 12px;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: @form-radius;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
padding: 4px 7px;
|
||||
color: @color-btn;
|
||||
outline: none;
|
||||
transition: background-color 0.2s ease;
|
||||
line-height: 0;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @color-theme_2-hover;
|
||||
}
|
||||
&:active {
|
||||
background-color: @color-theme_2-active;
|
||||
}
|
||||
}
|
||||
|
||||
.no-item {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
:global(#root.@{value}) {
|
||||
.listItem {
|
||||
&:hover {
|
||||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||||
}
|
||||
}
|
||||
.num {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
.btn {
|
||||
color: ~'@{color-@{value}-btn}';
|
||||
&:hover {
|
||||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||||
}
|
||||
&:active {
|
||||
background-color: ~'@{color-@{value}-theme_2-active}';
|
||||
}
|
||||
}
|
||||
.no-item {
|
||||
p {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<material-modal :show="show" @close="handleClose" @after-enter="$refs.input.focus()">
|
||||
<main :class="$style.main">
|
||||
<h2>{{selectedNum > 0 ? $t('music_sort__title_multiple', { num: selectedNum }) : $t('music_sort__title', { name: musicInfo ? musicInfo.name : '' })}}</h2>
|
||||
<base-input :class="$style.input"
|
||||
type="number"
|
||||
v-model="sortNum"
|
||||
ref="input"
|
||||
@submit="handleSubmit"
|
||||
@blur="verify" :placeholder="$t('music_sort__input_tip')" />
|
||||
<div :class="$style.footer">
|
||||
<base-btn :class="$style.btn" @click="handleSubmit">{{$t('music_sort__btn_confirm')}}</base-btn>
|
||||
</div>
|
||||
</main>
|
||||
</material-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
musicInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
selectedNum: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
emits: ['update:show', 'confirm'],
|
||||
data() {
|
||||
return {
|
||||
sortNum: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(n) {
|
||||
if (n) {
|
||||
this.sortNum = ''
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.$emit('update:show', false)
|
||||
},
|
||||
verify() {
|
||||
let num = /^[1-9]\d*/.exec(this.sortNum)
|
||||
num = num ? parseInt(num[0]) : ''
|
||||
this.sortNum = num.toString()
|
||||
return num
|
||||
},
|
||||
handleSubmit() {
|
||||
console.log('object')
|
||||
let num = this.verify()
|
||||
if (this.sortNum == '') return
|
||||
this.handleClose()
|
||||
this.$emit('confirm', num)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
|
||||
.main {
|
||||
padding: 0 15px;
|
||||
max-width: 530px;
|
||||
min-width: 280px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
min-height: 0;
|
||||
// max-height: 100%;
|
||||
// overflow: hidden;
|
||||
h2 {
|
||||
font-size: 13px;
|
||||
color: @color-theme_2-font;
|
||||
line-height: 1.3;
|
||||
word-break: break-all;
|
||||
// text-align: center;
|
||||
padding: 15px 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
// width: 100%;
|
||||
// height: 26px;
|
||||
padding: 8px 8px;
|
||||
}
|
||||
.footer {
|
||||
margin: 20px 0 15px auto;
|
||||
}
|
||||
.btn {
|
||||
// box-sizing: border-box;
|
||||
// margin-left: 15px;
|
||||
// margin-bottom: 15px;
|
||||
// height: 36px;
|
||||
// line-height: 36px;
|
||||
// padding: 0 10px !important;
|
||||
min-width: 70px;
|
||||
// .mixin-ellipsis-1;
|
||||
|
||||
+.btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
:global(#root.@{value}) {
|
||||
.main {
|
||||
h2 {
|
||||
color: ~'@{color-@{value}-theme_2-font}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,553 @@
|
||||
<template>
|
||||
<div :class="$style.lists" ref="dom_lists">
|
||||
<div :class="$style.listHeader">
|
||||
<h2 :class="$style.listsTitle">{{$t('my_list')}}</h2>
|
||||
<button :class="$style.listsAdd" @click="handleShowNewList" :tips="$t('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"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<ul class="scroll" :class="$style.listsContent" ref="dom_lists_list">
|
||||
<li :class="[$style.listsItem, {[$style.active]: defaultList.id == listId}]" :tips="defaultList.name"
|
||||
@contextmenu="handleListsItemRigthClick($event, -2)" @click="handleListToggle(defaultList.id)"
|
||||
>
|
||||
<span :class="$style.listsLabel">{{defaultList.name}}</span>
|
||||
</li>
|
||||
<li :class="[$style.listsItem, {[$style.active]: loveList.id == listId}]" :tips="loveList.name"
|
||||
@contextmenu="handleListsItemRigthClick($event, -1)" @click="handleListToggle(loveList.id)">
|
||||
<span :class="$style.listsLabel">{{loveList.name}}</span>
|
||||
</li>
|
||||
<li class="user-list"
|
||||
:class="[$style.listsItem, {[$style.active]:item.id == listId}, {[$style.clicked]: listsData.rightClickItemIndex == index}, {[$style.fetching]: fetchingListStatus[item.id]}]"
|
||||
@contextmenu="handleListsItemRigthClick($event, index)" :tips="item.name" v-for="(item, index) in userLists" :key="item.id"
|
||||
>
|
||||
<span :class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)">{{item.name}}</span>
|
||||
<input class="key-bind" :class="$style.listsInput" @contextmenu.stop type="text"
|
||||
@keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name"/>
|
||||
</li>
|
||||
<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 class="key-bind" :class="$style.listsInput" @contextmenu.stop ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate"
|
||||
@blur="handleListsCreate" :placeholder="$t('lists__new_list_input')"/>
|
||||
</li>
|
||||
</transition>
|
||||
</ul>
|
||||
<base-menu :menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick" />
|
||||
<DuplicateMusicModal v-model:visible="isShowDuplicateMusicModal" :list-info="selectedListInfo" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapActions } from 'vuex'
|
||||
import { openSaveDir, saveLxConfigFile, selectDir, readLxConfigFile, filterFileName } from '@renderer/utils'
|
||||
import musicSdk from '@renderer/utils/music'
|
||||
import DuplicateMusicModal from './DuplicateMusicModal'
|
||||
import { defaultList, loveList, userLists } from '@renderer/core/share/list'
|
||||
import { computed } from '@renderer/utils/vueTools'
|
||||
import { getList } from '@renderer/core/share/utils'
|
||||
|
||||
export default {
|
||||
name: 'ListLists',
|
||||
props: {
|
||||
listId: {
|
||||
type: [String, Number],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
DuplicateMusicModal,
|
||||
},
|
||||
setup() {
|
||||
const lists = computed(() => [defaultList, loveList, ...userLists])
|
||||
return {
|
||||
defaultList,
|
||||
loveList,
|
||||
userLists,
|
||||
lists,
|
||||
}
|
||||
},
|
||||
emits: ['show-menu'],
|
||||
data() {
|
||||
return {
|
||||
isShowListSortModal: false,
|
||||
isShowDuplicateMusicModal: false,
|
||||
listsData: {
|
||||
isShowItemMenu: false,
|
||||
itemMenuControl: {
|
||||
rename: true,
|
||||
duplicate: true,
|
||||
import: true,
|
||||
export: true,
|
||||
sync: false,
|
||||
moveup: true,
|
||||
movedown: true,
|
||||
remove: true,
|
||||
},
|
||||
rightClickItemIndex: -1,
|
||||
menuLocation: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
isShowNewList: false,
|
||||
isNewLeave: false,
|
||||
},
|
||||
fetchingListStatus: {},
|
||||
selectedListInfo: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
listsItemMenu() {
|
||||
return [
|
||||
{
|
||||
name: this.$t('lists__rename'),
|
||||
action: 'rename',
|
||||
disabled: !this.listsData.itemMenuControl.rename,
|
||||
},
|
||||
{
|
||||
name: this.$t('lists__sync'),
|
||||
action: 'sync',
|
||||
disabled: !this.listsData.itemMenuControl.sync,
|
||||
},
|
||||
{
|
||||
name: this.$t('lists__duplicate'),
|
||||
action: 'duplicate',
|
||||
disabled: !this.listsData.itemMenuControl.duplicate,
|
||||
},
|
||||
{
|
||||
name: this.$t('lists__import'),
|
||||
action: 'import',
|
||||
disabled: !this.listsData.itemMenuControl.export,
|
||||
},
|
||||
{
|
||||
name: this.$t('lists__export'),
|
||||
action: 'export',
|
||||
disabled: !this.listsData.itemMenuControl.export,
|
||||
},
|
||||
{
|
||||
name: this.$t('lists__moveup'),
|
||||
action: 'moveup',
|
||||
disabled: !this.listsData.itemMenuControl.moveup,
|
||||
},
|
||||
{
|
||||
name: this.$t('lists__movedown'),
|
||||
action: 'movedown',
|
||||
disabled: !this.listsData.itemMenuControl.movedown,
|
||||
},
|
||||
{
|
||||
name: this.$t('lists__remove'),
|
||||
action: 'remove',
|
||||
disabled: !this.listsData.itemMenuControl.remove,
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
listId(id) {
|
||||
this.setPrevSelectListId(id)
|
||||
this.isShowListSortModal = false
|
||||
},
|
||||
lists(lists) {
|
||||
if (lists.some(l => l.id == this.listId)) return
|
||||
this.$router.replace({
|
||||
path: 'list',
|
||||
query: {
|
||||
id: this.defaultList.id,
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setPrevSelectListId(this.listId)
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('list', [
|
||||
'setUserListName',
|
||||
'createUserList',
|
||||
'moveupUserList',
|
||||
'movedownUserList',
|
||||
'removeUserList',
|
||||
'setPrevSelectListId',
|
||||
'setList',
|
||||
]),
|
||||
...mapActions('songList', ['getListDetailAll']),
|
||||
...mapActions('leaderboard', {
|
||||
getBoardListAll: 'getListAll',
|
||||
}),
|
||||
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()
|
||||
const targetList = userLists[index]
|
||||
if (name.length) return this.setUserListName({ id: targetList.id, name })
|
||||
event.target.value = targetList.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
|
||||
},
|
||||
handleListToggle(id) {
|
||||
if (id == this.listId) return
|
||||
this.$router.replace({
|
||||
path: 'list',
|
||||
query: { id },
|
||||
}).catch(_ => _)
|
||||
},
|
||||
handleListsItemRigthClick(event, index) {
|
||||
let source
|
||||
switch (index) {
|
||||
case -1:
|
||||
case -2:
|
||||
this.listsData.itemMenuControl.rename = false
|
||||
this.listsData.itemMenuControl.remove = false
|
||||
this.listsData.itemMenuControl.sync = false
|
||||
this.listsData.itemMenuControl.moveup = false
|
||||
this.listsData.itemMenuControl.movedown = false
|
||||
break
|
||||
default:
|
||||
this.listsData.itemMenuControl.rename = true
|
||||
this.listsData.itemMenuControl.remove = true
|
||||
source = userLists[index].source
|
||||
this.listsData.itemMenuControl.sync = !!source && !!musicSdk[source]?.songList
|
||||
this.listsData.itemMenuControl.moveup = index > 0
|
||||
this.listsData.itemMenuControl.movedown = index < userLists.length - 1
|
||||
break
|
||||
}
|
||||
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.$emit('show-menu')
|
||||
this.$nextTick(() => {
|
||||
this.listsData.isShowItemMenu = true
|
||||
})
|
||||
},
|
||||
hideListsMenu() {
|
||||
this.listsData.isShowItemMenu = false
|
||||
this.listsData.rightClickItemIndex = -1
|
||||
},
|
||||
handleListsItemMenuClick(action) {
|
||||
// console.log(action)
|
||||
let index = this.listsData.rightClickItemIndex
|
||||
this.hideListsMenu()
|
||||
this.listsData.isShowItemMenu = false
|
||||
let dom
|
||||
switch (action && action.action) {
|
||||
case 'rename':
|
||||
dom = this.$refs.dom_lists_list.querySelectorAll('.user-list')[index]
|
||||
this.$nextTick(() => {
|
||||
dom.classList.add(this.$style.editing)
|
||||
dom.querySelector('input').focus()
|
||||
})
|
||||
break
|
||||
case 'duplicate':
|
||||
this.selectedListInfo = this.getTargetListInfo(index)
|
||||
this.isShowDuplicateMusicModal = true
|
||||
break
|
||||
case 'import':
|
||||
this.handleImportList(index)
|
||||
break
|
||||
case 'export':
|
||||
this.handleExportList(index)
|
||||
break
|
||||
case 'sync':
|
||||
this.handleSyncSourceList(index)
|
||||
break
|
||||
case 'moveup':
|
||||
this.moveupUserList({ id: userLists[index].id })
|
||||
break
|
||||
case 'movedown':
|
||||
this.movedownUserList({ id: userLists[index].id })
|
||||
break
|
||||
case 'remove':
|
||||
this.$dialog.confirm({
|
||||
message: this.$t('lists__remove_tip', { name: userLists[index].name }),
|
||||
confirmButtonText: this.$t('lists__remove_tip_button'),
|
||||
}).then(isRemove => {
|
||||
if (!isRemove) return
|
||||
this.removeUserList({ id: userLists[index].id })
|
||||
})
|
||||
break
|
||||
}
|
||||
},
|
||||
fetchList(id, source, sourceListId) {
|
||||
this.fetchingListStatus[id] = true
|
||||
|
||||
let promise
|
||||
if (/board__/.test(sourceListId)) {
|
||||
const id = sourceListId.replace(/board__/, '')
|
||||
promise = this.getBoardListAll(id)
|
||||
} else {
|
||||
promise = this.getListDetailAll({ source, id: sourceListId })
|
||||
}
|
||||
return promise.finally(() => {
|
||||
this.fetchingListStatus[id] = false
|
||||
})
|
||||
},
|
||||
async handleSyncSourceList(index) {
|
||||
const targetListInfo = userLists[index]
|
||||
const list = await this.fetchList(targetListInfo.id, targetListInfo.source, targetListInfo.sourceListId)
|
||||
// console.log(targetListInfo.list.length, list.length)
|
||||
this.setList({
|
||||
...targetListInfo,
|
||||
list,
|
||||
})
|
||||
},
|
||||
getTargetListInfo(index) {
|
||||
let list
|
||||
switch (index) {
|
||||
case -2:
|
||||
list = { ...defaultList, list: getList(defaultList.id) }
|
||||
break
|
||||
case -1:
|
||||
list = { ...loveList, list: getList(loveList.id) }
|
||||
break
|
||||
default:
|
||||
list = userLists[index]
|
||||
if (!list) return null
|
||||
list = { ...list, list: getList(list.id) }
|
||||
break
|
||||
}
|
||||
return list
|
||||
},
|
||||
handleExportList(index) {
|
||||
const list = this.getTargetListInfo(index)
|
||||
if (!list) return
|
||||
openSaveDir({
|
||||
title: this.$t('lists__export_part_desc'),
|
||||
defaultPath: `lx_list_part_${filterFileName(list.name)}.lxmc`,
|
||||
}).then(async result => {
|
||||
if (result.canceled) return
|
||||
const data = JSON.parse(JSON.stringify({
|
||||
type: 'playListPart',
|
||||
data: list,
|
||||
}))
|
||||
for await (const item of data.data.list) {
|
||||
if (item.otherSource) delete item.otherSource
|
||||
if (item.lrc) delete item.lrc
|
||||
}
|
||||
saveLxConfigFile(result.filePath, data)
|
||||
})
|
||||
},
|
||||
handleImportList(index) {
|
||||
const list = this.getTargetListInfo(index)
|
||||
|
||||
selectDir({
|
||||
title: this.$t('lists__import_part_desc'),
|
||||
properties: ['openFile'],
|
||||
filters: [
|
||||
{ name: 'Play List Part', extensions: ['json', 'lxmc'] },
|
||||
{ name: 'All Files', extensions: ['*'] },
|
||||
],
|
||||
}).then(async result => {
|
||||
if (result.canceled) return
|
||||
let listData
|
||||
try {
|
||||
listData = await readLxConfigFile(result.filePaths[0])
|
||||
} catch (error) {
|
||||
return
|
||||
}
|
||||
if (listData.type !== 'playListPart') return
|
||||
const targetList = this.lists.find(l => l.id == listData.data.id)
|
||||
if (targetList) {
|
||||
const confirm = await this.$dialog.confirm({
|
||||
message: this.$t('lists__import_part_confirm', { importName: listData.data.name, localName: targetList.name }),
|
||||
cancelButtonText: this.$t('lists__import_part_button_cancel'),
|
||||
confirmButtonText: this.$t('lists__import_part_button_confirm'),
|
||||
})
|
||||
if (confirm) {
|
||||
listData.data.name = list.name
|
||||
this.setList({
|
||||
name: listData.data.name,
|
||||
id: listData.data.id,
|
||||
list: listData.data.list,
|
||||
source: listData.data.source,
|
||||
sourceListId: listData.data.sourceListId,
|
||||
})
|
||||
return
|
||||
}
|
||||
listData.data.id += `__${Date.now()}`
|
||||
}
|
||||
this.createUserList({
|
||||
name: listData.data.name,
|
||||
id: listData.data.id,
|
||||
list: listData.data.list,
|
||||
source: listData.data.source,
|
||||
sourceListId: listData.data.sourceListId,
|
||||
position: Math.max(index, -1),
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
|
||||
@lists-item-height: 36px;
|
||||
.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, opacity;
|
||||
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;
|
||||
}
|
||||
&.fetching {
|
||||
opacity: .5;
|
||||
}
|
||||
&.editing {
|
||||
padding: 0 10px;
|
||||
background-color: @color-theme_2-hover;
|
||||
.listsLabel {
|
||||
display: none;
|
||||
}
|
||||
.listsInput {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listsLabel {
|
||||
display: block;
|
||||
height: @lists-item-height;
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
line-height: @lists-item-height;
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
.listsInput {
|
||||
width: 100%;
|
||||
height: @lists-item-height;
|
||||
border: none;
|
||||
padding: 0;
|
||||
// padding-bottom: 1px;
|
||||
line-height: @lists-item-height;
|
||||
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: -@lists-item-height;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
:global(#root.@{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}';
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,370 @@
|
||||
<template lang="pug">
|
||||
div(:class="$style.list")
|
||||
//- transition
|
||||
div.thead(:class="$style.thead")
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.nobreak.center(:class="$style.th" style="width: 5%;") #
|
||||
th.nobreak(:class="$style.th") {{$t('music_name')}}
|
||||
th.nobreak(:class="$style.th" style="width: 22%;") {{$t('music_singer')}}
|
||||
th.nobreak(:class="$style.th" style="width: 22%;") {{$t('music_album')}}
|
||||
th.nobreak(:class="$style.th" style="width: 9%;") {{$t('music_time')}}
|
||||
th.nobreak(:class="$style.th" style="width: 15%;") {{$t('action')}}
|
||||
div(v-show="list.length" :class="$style.content" ref="dom_listContent")
|
||||
base-virtualized-list(:list="list" key-name="songmid" ref="listRef" #default="{ item, index }" :item-height="listItemHeight"
|
||||
@scroll="saveListPosition" containerClass="scroll" contentClass="list" @contextmenu.capture="handleListRightClick")
|
||||
div.list-item(@click="handleListItemClick($event, index)"
|
||||
:class="[{ [$style.active]: playerInfo.isPlayList && playerInfo.playIndex === index }, { selected: selectedIndex == index || rightClickSelectedIndex == index }, { active: selectedList.includes(item) }, { [$style.disabled]: !assertApiSupport(item.source) }]"
|
||||
@contextmenu="handleListItemRightClick($event, index)")
|
||||
div.list-item-cell.nobreak.center(style="flex: 0 0 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
|
||||
div.list-item-cell.auto(:tips="item.name")
|
||||
span.select {{item.name}}
|
||||
span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
|
||||
div.list-item-cell(style="flex: 0 0 22%;" :tips="item.singer")
|
||||
span.select {{item.singer}}
|
||||
div.list-item-cell(style="flex: 0 0 22%;" :tips="item.albumName")
|
||||
span.select {{item.albumName}}
|
||||
div.list-item-cell(style="flex: 0 0 9%;")
|
||||
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
||||
div.list-item-cell(style="flex: 0 0 15%; padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" @btn-click="handleListBtnClick" :download-btn="assertApiSupport(item.source)")
|
||||
div(:class="$style.noItem" v-show="!list.length")
|
||||
p(v-text="$t('no_item')")
|
||||
//- material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
|
||||
teleport(to="#view")
|
||||
common-download-modal(v-model:show="isShowDownload" :musicInfo="selectedDownloadMusicInfo")
|
||||
common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedList" @confirm="removeAllSelect")
|
||||
common-list-add-modal(v-model:show="isShowListAdd" :is-move="isMove" :musicInfo="selectedAddMusicInfo" :exclude-list-id="excludeListIds")
|
||||
common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :is-move="isMoveMultiple" :musicList="selectedList" @confirm="removeAllSelect" :exclude-list-id="excludeListIds")
|
||||
search-list(:list="list" @action="handleMusicSearchAction" :visible="isShowSearchBar")
|
||||
list-sort-modal(v-model:show="isShowListSortModal" :music-info="selectedSortMusicInfo" :selected-num="selectedNum" @confirm="sortMusic")
|
||||
base-menu(:menus="menus" :location="menuLocation" item-name="name" :isShow="isShowItemMenu" @menu-click="handleMenuClick")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { clipboardWriteText, assertApiSupport } from '@renderer/utils'
|
||||
import { useCssModule } from '@renderer/utils/vueTools'
|
||||
import SearchList from '../SearchList'
|
||||
import ListSortModal from '../ListSortModal'
|
||||
import useListInfo from './useListInfo'
|
||||
import useList from './useList'
|
||||
import useMenu from './useMenu'
|
||||
import usePlay from './usePlay'
|
||||
import useMusicDownload from './useMusicDownload'
|
||||
import useMusicAdd from './useMusicAdd'
|
||||
import useSort from './useSort'
|
||||
import useMusicActions from './useMusicActions'
|
||||
import useSearch from './useSearch'
|
||||
import useListScroll from './useListScroll'
|
||||
export default {
|
||||
name: 'MusicList',
|
||||
props: {
|
||||
listId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['show-menu'],
|
||||
components: {
|
||||
SearchList,
|
||||
ListSortModal,
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const styles = useCssModule()
|
||||
|
||||
const {
|
||||
rightClickSelectedIndex,
|
||||
selectedIndex,
|
||||
dom_listContent,
|
||||
listRef,
|
||||
list,
|
||||
playerInfo,
|
||||
setSelectedIndex,
|
||||
isShowSource,
|
||||
setting,
|
||||
excludeListIds,
|
||||
} = useListInfo({ props })
|
||||
|
||||
const {
|
||||
selectedList,
|
||||
listItemHeight,
|
||||
handleSelectData,
|
||||
removeAllSelect,
|
||||
} = useList({ list, setting, emit })
|
||||
|
||||
const {
|
||||
handlePlayMusic,
|
||||
handlePlayMusicLater,
|
||||
doubleClickPlay,
|
||||
} = usePlay({ props, selectedList, list, removeAllSelect })
|
||||
|
||||
const {
|
||||
isShowListAdd,
|
||||
isMove,
|
||||
isShowListAddMultiple,
|
||||
isMoveMultiple,
|
||||
selectedAddMusicInfo,
|
||||
handleShowMusicAddModal,
|
||||
handleShowMusicMoveModal,
|
||||
} = useMusicAdd({ selectedList, list })
|
||||
|
||||
const {
|
||||
isShowDownload,
|
||||
isShowDownloadMultiple,
|
||||
selectedDownloadMusicInfo,
|
||||
handleShowDownloadModal,
|
||||
} = useMusicDownload({ selectedList, list })
|
||||
|
||||
const {
|
||||
isShowListSortModal,
|
||||
selectedNum,
|
||||
selectedSortMusicInfo,
|
||||
handleShowSortModal,
|
||||
sortMusic,
|
||||
} = useSort({ props, list, selectedList, removeAllSelect })
|
||||
|
||||
const {
|
||||
handleSearch,
|
||||
handleOpenMusicDetail,
|
||||
handleCopyName,
|
||||
handleRemoveMusic,
|
||||
} = useMusicActions({ props, list, setting, removeAllSelect, selectedList })
|
||||
|
||||
const {
|
||||
menus,
|
||||
menuLocation,
|
||||
isShowItemMenu,
|
||||
showMenu,
|
||||
hideMenu,
|
||||
menuClick,
|
||||
} = useMenu({
|
||||
listRef,
|
||||
assertApiSupport,
|
||||
emit,
|
||||
|
||||
handleShowDownloadModal,
|
||||
handlePlayMusic,
|
||||
handlePlayMusicLater,
|
||||
handleSearch,
|
||||
handleShowMusicAddModal,
|
||||
handleShowMusicMoveModal,
|
||||
handleShowSortModal,
|
||||
handleOpenMusicDetail,
|
||||
handleCopyName,
|
||||
handleRemoveMusic,
|
||||
})
|
||||
|
||||
const {
|
||||
isShowSearchBar,
|
||||
searchList,
|
||||
handleMusicSearchAction,
|
||||
} = useSearch({
|
||||
setSelectedIndex,
|
||||
handlePlayMusic,
|
||||
listRef,
|
||||
})
|
||||
|
||||
const { saveListPosition, restoreScroll } = useListScroll({ props, listRef, list, setting })
|
||||
|
||||
const handleListItemClick = (event, index) => {
|
||||
if (rightClickSelectedIndex.value > -1) return
|
||||
handleSelectData(index)
|
||||
doubleClickPlay(index)
|
||||
}
|
||||
const handleListItemRightClick = (event, index) => {
|
||||
rightClickSelectedIndex.value = index
|
||||
showMenu(event, list.value[index], index)
|
||||
}
|
||||
const handleMenuClick = (action) => {
|
||||
let index = rightClickSelectedIndex.value
|
||||
rightClickSelectedIndex.value = -1
|
||||
menuClick(action, index)
|
||||
}
|
||||
const handleListRightClick = (event) => {
|
||||
if (!event.target.classList.contains('select')) return
|
||||
event.stopImmediatePropagation()
|
||||
let classList = dom_listContent.value.classList
|
||||
classList.add(styles.copying)
|
||||
window.requestAnimationFrame(() => {
|
||||
let str = window.getSelection().toString()
|
||||
classList.remove(styles.copying)
|
||||
str = str.split(/\n\n/).map(s => s.replace(/\n/g, ' ')).join('\n').trim()
|
||||
if (!str.length) return
|
||||
clipboardWriteText(str)
|
||||
})
|
||||
}
|
||||
const handleListBtnClick = ({ action, index }) => {
|
||||
switch (action) {
|
||||
case 'download':
|
||||
handleShowDownloadModal(index, true)
|
||||
break
|
||||
case 'play':
|
||||
handlePlayMusic(index, true)
|
||||
break
|
||||
case 'search':
|
||||
handleSearch(index)
|
||||
break
|
||||
case 'listAdd':
|
||||
handleShowMusicAddModal(index, true)
|
||||
break
|
||||
}
|
||||
}
|
||||
const scrollToTop = () => {
|
||||
listRef.value.scrollTo(0, true)
|
||||
}
|
||||
|
||||
return {
|
||||
listItemHeight,
|
||||
handleListItemClick,
|
||||
selectedList,
|
||||
handleListItemRightClick,
|
||||
removeAllSelect,
|
||||
handleListBtnClick,
|
||||
rightClickSelectedIndex,
|
||||
selectedIndex,
|
||||
dom_listContent,
|
||||
listRef,
|
||||
excludeListIds,
|
||||
|
||||
menus,
|
||||
isShowItemMenu,
|
||||
menuLocation,
|
||||
handleMenuClick,
|
||||
hideMenu,
|
||||
|
||||
handleListRightClick,
|
||||
assertApiSupport,
|
||||
|
||||
isShowListAdd,
|
||||
isMove,
|
||||
isShowListAddMultiple,
|
||||
isMoveMultiple,
|
||||
selectedAddMusicInfo,
|
||||
|
||||
isShowListSortModal,
|
||||
selectedNum,
|
||||
selectedSortMusicInfo,
|
||||
sortMusic,
|
||||
|
||||
isShowDownload,
|
||||
isShowDownloadMultiple,
|
||||
selectedDownloadMusicInfo,
|
||||
|
||||
scrollToTop,
|
||||
|
||||
isShowSearchBar,
|
||||
searchList,
|
||||
handleMusicSearchAction,
|
||||
|
||||
list,
|
||||
playerInfo,
|
||||
|
||||
saveListPosition,
|
||||
restoreScroll,
|
||||
isShowSource,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
|
||||
.list {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
flex: auto;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
.content {
|
||||
min-height: 0;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
&.copying {
|
||||
.no-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thead {
|
||||
flex: none;
|
||||
}
|
||||
.th:first-child {
|
||||
color: @color-theme_2-font-label;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
|
||||
:global(.list) {
|
||||
flex: auto;
|
||||
:global(.list-item) {
|
||||
&.active {
|
||||
color: @color-btn;
|
||||
}
|
||||
}
|
||||
:global(.list-item-cell) {
|
||||
font-size: 12px !important;
|
||||
|
||||
&:first-child {
|
||||
// padding-left: 10px;
|
||||
font-size: 11px !important;
|
||||
color: @color-theme_2-font-label !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.labelSource {
|
||||
color: @color-theme;
|
||||
padding: 5px;
|
||||
font-size: .8em;
|
||||
line-height: 1;
|
||||
opacity: .75;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.no-item {
|
||||
position: relative;
|
||||
height: 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(#root.@{value}) {
|
||||
.th:first-child {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}' !important;
|
||||
}
|
||||
:global(.list) {
|
||||
:global(.list-item) {
|
||||
&.active {
|
||||
color: ~'@{color-@{value}-btn}';
|
||||
}
|
||||
}
|
||||
}
|
||||
.labelSource {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
.no-item {
|
||||
p {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
import { computed, watch, ref, onBeforeUnmount } from '@renderer/utils/vueTools'
|
||||
import { windowSizeList } from '@renderer/core/share'
|
||||
|
||||
const useKeyEvent = ({ handleSelectAllData }) => {
|
||||
const keyEvent = {
|
||||
isShiftDown: false,
|
||||
isModDown: false,
|
||||
}
|
||||
|
||||
const handle_key_shift_down = () => {
|
||||
if (!keyEvent.isShiftDown) keyEvent.isShiftDown = true
|
||||
}
|
||||
const handle_key_shift_up = () => {
|
||||
if (keyEvent.isShiftDown) keyEvent.isShiftDown = false
|
||||
}
|
||||
const handle_key_mod_down = () => {
|
||||
if (!keyEvent.isModDown) keyEvent.isModDown = true
|
||||
}
|
||||
const handle_key_mod_up = () => {
|
||||
if (keyEvent.isModDown) keyEvent.isModDown = false
|
||||
}
|
||||
const handle_key_mod_a_down = ({ event }) => {
|
||||
if (event.target.tagName == 'INPUT') return
|
||||
event.preventDefault()
|
||||
if (event.repeat) return
|
||||
keyEvent.isModDown = false
|
||||
handleSelectAllData()
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.eventHub.off('key_shift_down', handle_key_shift_down)
|
||||
window.eventHub.off('key_shift_up', handle_key_shift_up)
|
||||
window.eventHub.off('key_mod_down', handle_key_mod_down)
|
||||
window.eventHub.off('key_mod_up', handle_key_mod_up)
|
||||
window.eventHub.off('key_mod+a_down', handle_key_mod_a_down)
|
||||
})
|
||||
window.eventHub.on('key_shift_down', handle_key_shift_down)
|
||||
window.eventHub.on('key_shift_up', handle_key_shift_up)
|
||||
window.eventHub.on('key_mod_down', handle_key_mod_down)
|
||||
window.eventHub.on('key_mod_up', handle_key_mod_up)
|
||||
window.eventHub.on('key_mod+a_down', handle_key_mod_a_down)
|
||||
|
||||
return keyEvent
|
||||
}
|
||||
|
||||
export default ({ list, setting }) => {
|
||||
const selectedList = ref([])
|
||||
|
||||
let lastSelectIndex = -1
|
||||
const listItemHeight = computed(() => {
|
||||
return parseInt(windowSizeList.find(item => item.id == setting.value.windowSizeId).fontSize) / 16 * 37
|
||||
})
|
||||
|
||||
const removeAllSelect = () => {
|
||||
selectedList.value = []
|
||||
}
|
||||
const handleSelectAllData = () => {
|
||||
removeAllSelect()
|
||||
selectedList.value = [...list.value]
|
||||
}
|
||||
const keyEvent = useKeyEvent({ handleSelectAllData })
|
||||
|
||||
const handleSelectData = clickIndex => {
|
||||
if (keyEvent.isShiftDown) {
|
||||
if (selectedList.value.length) {
|
||||
removeAllSelect()
|
||||
if (lastSelectIndex != clickIndex) {
|
||||
let isNeedReverse = false
|
||||
if (clickIndex < lastSelectIndex) {
|
||||
let temp = lastSelectIndex
|
||||
lastSelectIndex = clickIndex
|
||||
clickIndex = temp
|
||||
isNeedReverse = true
|
||||
}
|
||||
selectedList.value = list.value.slice(lastSelectIndex, clickIndex + 1)
|
||||
if (isNeedReverse) selectedList.value.reverse()
|
||||
}
|
||||
} else {
|
||||
selectedList.value.push(list.value[clickIndex])
|
||||
lastSelectIndex = clickIndex
|
||||
}
|
||||
} else if (keyEvent.isModDown) {
|
||||
lastSelectIndex = clickIndex
|
||||
let item = list.value[clickIndex]
|
||||
let index = selectedList.value.indexOf(item)
|
||||
if (index < 0) {
|
||||
selectedList.value.push(item)
|
||||
} else {
|
||||
selectedList.value.splice(index, 1)
|
||||
}
|
||||
} else if (selectedList.value.length) {
|
||||
removeAllSelect()
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => list, removeAllSelect)
|
||||
|
||||
return {
|
||||
selectedList,
|
||||
listItemHeight,
|
||||
removeAllSelect,
|
||||
handleSelectData,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { ref, watch, useRefGetter, computed } from '@renderer/utils/vueTools'
|
||||
import { playMusicInfo, playInfo } from '@renderer/core/share/player'
|
||||
import { getList } from '@renderer/core/share/utils'
|
||||
|
||||
|
||||
export default ({ props }) => {
|
||||
const setting = useRefGetter('setting')
|
||||
|
||||
const rightClickSelectedIndex = ref(-1)
|
||||
const selectedIndex = ref(-1)
|
||||
const dom_listContent = ref(null)
|
||||
const listRef = ref(null)
|
||||
|
||||
const excludeListIds = computed(() => ([props.listId]))
|
||||
|
||||
|
||||
const list = ref(getList(props.listId))
|
||||
watch(() => props.listId, id => {
|
||||
list.value = getList(id)
|
||||
})
|
||||
|
||||
const playerInfo = computed(() => ({
|
||||
isPlayList: playMusicInfo.listId == props.listId,
|
||||
playIndex: playInfo.playIndex,
|
||||
}))
|
||||
|
||||
const setSelectedIndex = index => {
|
||||
selectedIndex.value = index
|
||||
}
|
||||
|
||||
const isShowSource = computed(() => setting.value.list.isShowSource)
|
||||
|
||||
return {
|
||||
rightClickSelectedIndex,
|
||||
selectedIndex,
|
||||
dom_listContent,
|
||||
listRef,
|
||||
list,
|
||||
playerInfo,
|
||||
setSelectedIndex,
|
||||
setting,
|
||||
isShowSource,
|
||||
excludeListIds,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { useRoute, useRouter, onMounted, onBeforeUnmount, nextTick, watch } from '@renderer/utils/vueTools'
|
||||
import { setListPosition, getListPosition } from '@renderer/utils/data'
|
||||
|
||||
export default ({ props, listRef, list, setting }) => {
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const saveListPosition = () => {
|
||||
setListPosition(props.listId, listRef.value?.getScrollTop() || 0)
|
||||
}
|
||||
|
||||
const handleScrollList = (index, isAnimation, callback = () => {}) => {
|
||||
listRef.value.scrollToIndex(index, -150, isAnimation).then(callback)
|
||||
}
|
||||
|
||||
const restoreScroll = (index, isAnimation) => {
|
||||
// console.log(index, isAnimation)
|
||||
if (!list.value.length) return
|
||||
if (index == null) {
|
||||
let location = getListPosition(props.listId) || 0
|
||||
if (setting.value.list.isSaveScrollLocation && location != null) {
|
||||
listRef.value.scrollTo(location)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
handleScrollList(index, isAnimation)
|
||||
}
|
||||
|
||||
watch(() => route.query.id, (id, oId) => {
|
||||
if (!oId || route.path != '/list') return
|
||||
const scrollIndex = route.query.scrollIndex
|
||||
nextTick(() => {
|
||||
restoreScroll(scrollIndex, false)
|
||||
if (scrollIndex != null) {
|
||||
router.replace({
|
||||
path: 'list',
|
||||
query: {
|
||||
id: props.listId,
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
onMounted(() => {
|
||||
restoreScroll(route.query.scrollIndex, false)
|
||||
if (route.query.scrollIndex != null) {
|
||||
router.replace({
|
||||
path: 'list',
|
||||
query: {
|
||||
id: props.listId,
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
saveListPosition()
|
||||
})
|
||||
|
||||
return {
|
||||
saveListPosition,
|
||||
restoreScroll,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
import { computed, ref, reactive, useI18n, nextTick } from '@renderer/utils/vueTools'
|
||||
import musicSdk from '@renderer/utils/music'
|
||||
|
||||
export default ({
|
||||
listRef,
|
||||
assertApiSupport,
|
||||
emit,
|
||||
|
||||
handleShowDownloadModal,
|
||||
handlePlayMusic,
|
||||
handlePlayMusicLater,
|
||||
handleSearch,
|
||||
handleShowMusicAddModal,
|
||||
handleShowMusicMoveModal,
|
||||
handleShowSortModal,
|
||||
handleOpenMusicDetail,
|
||||
handleCopyName,
|
||||
handleRemoveMusic,
|
||||
}) => {
|
||||
const itemMenuControl = reactive({
|
||||
play: true,
|
||||
playLater: true,
|
||||
copyName: true,
|
||||
addTo: true,
|
||||
moveTo: true,
|
||||
sort: true,
|
||||
download: true,
|
||||
search: true,
|
||||
remove: true,
|
||||
sourceDetail: true,
|
||||
})
|
||||
const { t } = useI18n()
|
||||
const menuLocation = ref({ x: 0, y: 0 })
|
||||
const isShowItemMenu = ref(false)
|
||||
|
||||
const menus = computed(() => {
|
||||
return [
|
||||
{
|
||||
name: t('list__play'),
|
||||
action: 'play',
|
||||
disabled: !itemMenuControl.play,
|
||||
},
|
||||
{
|
||||
name: t('list__download'),
|
||||
action: 'download',
|
||||
disabled: !itemMenuControl.download,
|
||||
},
|
||||
{
|
||||
name: t('list__play_later'),
|
||||
action: 'playLater',
|
||||
disabled: !itemMenuControl.playLater,
|
||||
},
|
||||
{
|
||||
name: t('list__add_to'),
|
||||
action: 'addTo',
|
||||
disabled: !itemMenuControl.addTo,
|
||||
},
|
||||
{
|
||||
name: t('list__move_to'),
|
||||
action: 'moveTo',
|
||||
disabled: !itemMenuControl.moveTo,
|
||||
},
|
||||
{
|
||||
name: t('list__sort'),
|
||||
action: 'sort',
|
||||
disabled: !itemMenuControl.sort,
|
||||
},
|
||||
{
|
||||
name: t('list__copy_name'),
|
||||
action: 'copyName',
|
||||
disabled: !itemMenuControl.copyName,
|
||||
},
|
||||
{
|
||||
name: t('list__source_detail'),
|
||||
action: 'sourceDetail',
|
||||
disabled: !itemMenuControl.sourceDetail,
|
||||
},
|
||||
{
|
||||
name: t('list__search'),
|
||||
action: 'search',
|
||||
disabled: !itemMenuControl.search,
|
||||
},
|
||||
{
|
||||
name: t('list__remove'),
|
||||
action: 'remove',
|
||||
disabled: !itemMenuControl.remove,
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const showMenu = (event, musicInfo) => {
|
||||
itemMenuControl.sourceDetail = !!musicSdk[musicInfo.source].getMusicDetailPageUrl
|
||||
// itemMenuControl.play =
|
||||
// itemMenuControl.playLater =
|
||||
itemMenuControl.download = assertApiSupport(musicInfo.source)
|
||||
|
||||
let dom_container = event.target.closest('#my-list')
|
||||
const getOffsetValue = (target, x = 0, y = 0) => {
|
||||
if (target === dom_container) return { x, y }
|
||||
if (!target) return { x: 0, y: 0 }
|
||||
x += target.offsetLeft
|
||||
y += target.offsetTop
|
||||
return getOffsetValue(target.offsetParent, x, y)
|
||||
}
|
||||
let { x, y } = getOffsetValue(event.target)
|
||||
menuLocation.value.x = x + event.offsetX
|
||||
menuLocation.value.y = y + event.offsetY - listRef.value.getScrollTop()
|
||||
emit('show-menu')
|
||||
nextTick(() => {
|
||||
isShowItemMenu.value = true
|
||||
})
|
||||
}
|
||||
|
||||
const hideMenu = () => {
|
||||
isShowItemMenu.value = false
|
||||
}
|
||||
|
||||
const menuClick = (action, index) => {
|
||||
// console.log(action)
|
||||
hideMenu()
|
||||
if (!action) return
|
||||
switch (action.action) {
|
||||
case 'play':
|
||||
handlePlayMusic(index)
|
||||
break
|
||||
case 'playLater':
|
||||
handlePlayMusicLater(index)
|
||||
break
|
||||
case 'copyName':
|
||||
handleCopyName(index)
|
||||
break
|
||||
case 'addTo':
|
||||
handleShowMusicAddModal(index)
|
||||
break
|
||||
case 'moveTo':
|
||||
handleShowMusicMoveModal(index)
|
||||
break
|
||||
case 'sort':
|
||||
handleShowSortModal(index)
|
||||
break
|
||||
case 'download':
|
||||
handleShowDownloadModal(index)
|
||||
break
|
||||
case 'search':
|
||||
handleSearch(index)
|
||||
break
|
||||
case 'remove':
|
||||
handleRemoveMusic(index)
|
||||
break
|
||||
case 'sourceDetail':
|
||||
handleOpenMusicDetail(index)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
menus,
|
||||
menuLocation,
|
||||
isShowItemMenu,
|
||||
showMenu,
|
||||
menuClick,
|
||||
hideMenu,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { useCommit, useRouter } from '@renderer/utils/vueTools'
|
||||
import musicSdk from '@renderer/utils/music'
|
||||
import { openUrl, clipboardWriteText } from '@renderer/utils'
|
||||
|
||||
|
||||
export default ({ props, list, setting, selectedList, removeAllSelect }) => {
|
||||
const router = useRouter()
|
||||
|
||||
const listRemove = useCommit('list', 'listRemove')
|
||||
const listRemoveMultiple = useCommit('list', 'listRemoveMultiple')
|
||||
|
||||
const handleSearch = index => {
|
||||
const info = list.value[index]
|
||||
router.push({
|
||||
path: 'search',
|
||||
query: {
|
||||
text: `${info.name} ${info.singer}`,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const handleOpenMusicDetail = index => {
|
||||
const minfo = list.value[index]
|
||||
const url = musicSdk[minfo.source].getMusicDetailPageUrl(minfo)
|
||||
if (!url) return
|
||||
openUrl(url)
|
||||
}
|
||||
|
||||
const handleCopyName = index => {
|
||||
const minfo = list.value[index]
|
||||
clipboardWriteText(setting.value.download.fileName.replace('歌名', minfo.name).replace('歌手', minfo.singer))
|
||||
}
|
||||
|
||||
const handleRemoveMusic = (index, single) => {
|
||||
if (selectedList.value.length && !single) {
|
||||
listRemoveMultiple({ listId: props.listId, ids: selectedList.value.map(m => m.songmid) })
|
||||
removeAllSelect()
|
||||
} else {
|
||||
listRemove({ listId: props.listId, id: list.value[index].songmid })
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
handleSearch,
|
||||
handleOpenMusicDetail,
|
||||
handleCopyName,
|
||||
handleRemoveMusic,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { ref, nextTick } from '@renderer/utils/vueTools'
|
||||
|
||||
export default ({ selectedList, list }) => {
|
||||
const isShowListAdd = ref(false)
|
||||
const isMove = ref(false)
|
||||
const isMoveMultiple = ref(false)
|
||||
const isShowListAddMultiple = ref(false)
|
||||
const selectedAddMusicInfo = ref(null)
|
||||
|
||||
const handleShowMusicAddModal = (index, single) => {
|
||||
if (selectedList.value.length && !single) {
|
||||
isMoveMultiple.value = false
|
||||
isShowListAddMultiple.value = true
|
||||
} else {
|
||||
isMove.value = false
|
||||
selectedAddMusicInfo.value = list.value[index]
|
||||
nextTick(() => {
|
||||
isShowListAdd.value = true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleShowMusicMoveModal = (index, single) => {
|
||||
if (selectedList.value.length && !single) {
|
||||
isMoveMultiple.value = true
|
||||
isShowListAddMultiple.value = true
|
||||
} else {
|
||||
isMove.value = true
|
||||
selectedAddMusicInfo.value = list.value[index]
|
||||
nextTick(() => {
|
||||
isShowListAdd.value = true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isShowListAdd,
|
||||
isMove,
|
||||
isMoveMultiple,
|
||||
isShowListAddMultiple,
|
||||
selectedAddMusicInfo,
|
||||
handleShowMusicAddModal,
|
||||
handleShowMusicMoveModal,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ref, nextTick } from '@renderer/utils/vueTools'
|
||||
|
||||
export default ({ selectedList, list }) => {
|
||||
const isShowDownload = ref(false)
|
||||
const isShowDownloadMultiple = ref(false)
|
||||
const musicInfo = ref(null)
|
||||
|
||||
const handleShowDownloadModal = (index, single) => {
|
||||
if (selectedList.value.length && !single) {
|
||||
isShowDownloadMultiple.value = true
|
||||
} else {
|
||||
musicInfo.value = list.value[index]
|
||||
nextTick(() => {
|
||||
isShowDownload.value = true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isShowDownload,
|
||||
isShowDownloadMultiple,
|
||||
selectedDownloadMusicInfo: musicInfo,
|
||||
handleShowDownloadModal,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { useCommit } from '@renderer/utils/vueTools'
|
||||
|
||||
export default ({ props, selectedList, list, removeAllSelect }) => {
|
||||
let clickTime = 0
|
||||
let clickIndex = -1
|
||||
|
||||
const setList = useCommit('player', 'setList')
|
||||
const setTempPlayList = useCommit('player', 'setTempPlayList')
|
||||
|
||||
const handlePlayMusic = (index) => {
|
||||
setList({
|
||||
listId: props.listId,
|
||||
index,
|
||||
})
|
||||
}
|
||||
|
||||
const handlePlayMusicLater = (index, single) => {
|
||||
if (selectedList.length && !single) {
|
||||
setTempPlayList(selectedList.value.map(s => ({ listId: props.listId, musicInfo: s })))
|
||||
removeAllSelect()
|
||||
} else {
|
||||
setTempPlayList([{ listId: props.listId, musicInfo: list.value[index] }])
|
||||
}
|
||||
}
|
||||
|
||||
const doubleClickPlay = index => {
|
||||
if (
|
||||
window.performance.now() - clickTime > 400 ||
|
||||
clickIndex !== index
|
||||
) {
|
||||
clickTime = window.performance.now()
|
||||
clickIndex = index
|
||||
return
|
||||
}
|
||||
handlePlayMusic(index, true)
|
||||
clickTime = 0
|
||||
clickIndex = -1
|
||||
}
|
||||
|
||||
return {
|
||||
handlePlayMusic,
|
||||
handlePlayMusicLater,
|
||||
doubleClickPlay,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { ref, onBeforeUnmount } from '@renderer/utils/vueTools'
|
||||
|
||||
export default ({ setSelectedIndex, handlePlayMusic, listRef }) => {
|
||||
const isShowSearchBar = ref(false)
|
||||
const searchList = ref([])
|
||||
|
||||
const handleShowSearchBar = () => {
|
||||
isShowSearchBar.value = true
|
||||
}
|
||||
|
||||
const handleMusicSearchAction = ({ action, data: { index, isPlay } = {} }) => {
|
||||
isShowSearchBar.value = false
|
||||
switch (action) {
|
||||
case 'listClick':
|
||||
if (index < 0) return
|
||||
listRef.value.scrollToIndex(index, -150, true).then(() => {
|
||||
setSelectedIndex(index)
|
||||
setTimeout(() => {
|
||||
setSelectedIndex(-1)
|
||||
if (isPlay) handlePlayMusic(index)
|
||||
}, 600)
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
window.eventHub.on('key_mod+f_down', handleShowSearchBar)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.eventHub.off('key_mod+f_down', handleShowSearchBar)
|
||||
})
|
||||
|
||||
return {
|
||||
isShowSearchBar,
|
||||
searchList,
|
||||
handleMusicSearchAction,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { ref, nextTick, useCommit } from '@renderer/utils/vueTools'
|
||||
|
||||
export default ({ props, list, selectedList, removeAllSelect }) => {
|
||||
const isShowListSortModal = ref(false)
|
||||
const selectedNum = ref(0)
|
||||
const musicInfo = ref(null)
|
||||
|
||||
const setMusicPosition = useCommit('list', 'setMusicPosition')
|
||||
|
||||
const handleShowSortModal = (index, single) => {
|
||||
if (selectedList.value.length && !single) {
|
||||
selectedNum.value = selectedList.value.length
|
||||
} else {
|
||||
selectedNum.value = 0
|
||||
musicInfo.value = list.value[index]
|
||||
nextTick(() => {
|
||||
isShowListSortModal.value = true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const sortMusic = num => {
|
||||
num = Math.min(num, list.value.length)
|
||||
setMusicPosition({
|
||||
id: props.listId,
|
||||
position: num,
|
||||
list: selectedNum.value ? [...selectedList.value] : [musicInfo.value],
|
||||
})
|
||||
removeAllSelect()
|
||||
isShowListSortModal.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
isShowListSortModal,
|
||||
selectedNum,
|
||||
selectedSortMusicInfo: musicInfo,
|
||||
handleShowSortModal,
|
||||
sortMusic,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,426 @@
|
||||
<template lang="pug">
|
||||
div(:class="$style.container" ref="dom_container" v-show="isShow")
|
||||
transition(enter-active-class="animated-fast zoomIn" leave-active-class="animated zoomOut" @after-leave="handleAnimated")
|
||||
div(:class="$style.search" v-show="visible")
|
||||
div(:class="$style.form")
|
||||
input.key-bind.ignore-esc(:placeholder="placeholder" v-model.trim="text" ref="dom_input"
|
||||
@input="handleDelaySearch"
|
||||
@keyup.enter="handleTemplistClick(selectIndex)"
|
||||
@keyup.40.prevent="handleKeyDown"
|
||||
@keyup.38.prevent="handleKeyUp"
|
||||
@keyup.27.prevent="handleKeyEsc"
|
||||
@contextmenu="handleContextMenu")
|
||||
button(type="button" @click="handleHide")
|
||||
slot
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
|
||||
use(xlink:href='#icon-delete')
|
||||
div.scroll(v-if="resultList" :class="$style.list" :style="listStyle" ref="dom_scrollContainer")
|
||||
ul(ref="dom_list")
|
||||
li(v-for="(item, index) in resultList" :key="item.songmid" :class="selectIndex === index ? $style.select : null" @mouseenter="selectIndex = index" @click="handleTemplistClick(index)")
|
||||
div(:class="$style.img")
|
||||
div(:class="$style.text")
|
||||
h3(:class="$style.text") {{item.name}} - {{item.singer}}
|
||||
h3(v-if="item.albumName" :class="[$style.text, $style.albumName]") {{item.albumName}}
|
||||
div(:class="$style.source") {{item.source}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { clipboardReadText, debounce, scrollTo } from '@renderer/utils'
|
||||
let canceleFn
|
||||
|
||||
|
||||
// https://blog.csdn.net/xcxy2015/article/details/77164126#comments
|
||||
const similar = (a, b) => {
|
||||
if (!a || !b) return 0
|
||||
if (a.length > b.length) { // 保证 a <= b
|
||||
let t = b
|
||||
b = a
|
||||
a = t
|
||||
}
|
||||
let al = a.length
|
||||
let bl = b.length
|
||||
let mp = [] // 一个表
|
||||
let i, j, ai, lt, tmp // ai：字符串a的第i个字符。 lt：左上角的值。 tmp：暂存新的值。
|
||||
for (i = 0; i <= bl; i++) mp[i] = i
|
||||
for (i = 1; i <= al; i++) {
|
||||
ai = a.charAt(i - 1)
|
||||
lt = mp[0]
|
||||
mp[0] = mp[0] + 1
|
||||
for (j = 1; j <= bl; j++) {
|
||||
tmp = Math.min(mp[j] + 1, mp[j - 1] + 1, lt + (ai == b.charAt(j - 1) ? 0 : 1))
|
||||
lt = mp[j]
|
||||
mp[j] = tmp
|
||||
}
|
||||
}
|
||||
return 1 - (mp[bl] / bl)
|
||||
}
|
||||
|
||||
const sortInsert = (arr, data) => {
|
||||
let key = data.num
|
||||
let left = 0
|
||||
let right = arr.length - 1
|
||||
|
||||
while (left <= right) {
|
||||
let middle = parseInt((left + right) / 2)
|
||||
if (key == arr[middle]) {
|
||||
left = middle
|
||||
break
|
||||
} else if (key < arr[middle].num) {
|
||||
right = middle - 1
|
||||
} else {
|
||||
left = middle + 1
|
||||
}
|
||||
}
|
||||
while (left > 0) {
|
||||
if (arr[left - 1].num != key) break
|
||||
left--
|
||||
}
|
||||
|
||||
arr.splice(left, 0, data)
|
||||
}
|
||||
|
||||
const handleSortList = (list, keyword) => {
|
||||
let arr = []
|
||||
for (const item of list) {
|
||||
sortInsert(arr, {
|
||||
num: similar(keyword, `${item.name} ${item.singer} ${item.albumName || ''}`),
|
||||
data: item,
|
||||
})
|
||||
}
|
||||
return arr.map(item => item.data).reverse()
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Find for something...',
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
},
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: '',
|
||||
selectIndex: -1,
|
||||
listStyle: {
|
||||
height: 0,
|
||||
maxHeight: 0,
|
||||
},
|
||||
maxHeight: 0,
|
||||
resultList: [],
|
||||
isModDown: false,
|
||||
isShow: false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
resultList(n) {
|
||||
if (this.selectIndex > -1) this.selectIndex = -1
|
||||
this.$nextTick(() => {
|
||||
this.listStyle.height = Math.min(this.$refs.dom_list.scrollHeight, this.maxHeight) + 'px'
|
||||
})
|
||||
},
|
||||
list(n) {
|
||||
if (!this.visible) return
|
||||
this.handleDelaySearch()
|
||||
},
|
||||
visible(n) {
|
||||
if (!n) return
|
||||
this.isShow = true
|
||||
this.init()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.handleDelaySearch = debounce(() => {
|
||||
this.handleSearch()
|
||||
})
|
||||
if (this.visible) this.isShow = true
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
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+f_down', this.handle_key_mod_f_down)
|
||||
},
|
||||
beforeUnmount() {
|
||||
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+f_down', this.handle_key_mod_f_down)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.visible) return
|
||||
this.handleSearch()
|
||||
this.$nextTick(() => {
|
||||
if (!this.listStyle.maxHeight) {
|
||||
this.maxHeight = this.$refs.dom_container.offsetParent.clientHeight - this.$refs.dom_list.offsetTop - 70
|
||||
this.listStyle.maxHeight = this.maxHeight + 'px'
|
||||
}
|
||||
this.$refs.dom_input.focus()
|
||||
})
|
||||
},
|
||||
handleKeyEsc() {
|
||||
if (this.text.length > 0) {
|
||||
this.text = ''
|
||||
this.resultList = []
|
||||
} else {
|
||||
this.handleHide()
|
||||
}
|
||||
},
|
||||
handle_key_mod_down() {
|
||||
this.isModDown = true
|
||||
},
|
||||
handle_key_mod_up() {
|
||||
setTimeout(() => {
|
||||
this.isModDown = false
|
||||
}, 100)
|
||||
},
|
||||
handle_key_mod_f_down() {
|
||||
if (this.visible) this.$refs.dom_input.focus()
|
||||
},
|
||||
handleAnimated() {
|
||||
if (this.visible) return
|
||||
this.isShow = false
|
||||
},
|
||||
handleTemplistClick(index) {
|
||||
if (index < 0) return
|
||||
this.sendEvent('listClick', {
|
||||
index: this.list.indexOf(this.resultList[index]),
|
||||
isPlay: this.isModDown,
|
||||
})
|
||||
},
|
||||
handleHide() {
|
||||
this.sendEvent('hide')
|
||||
},
|
||||
sendEvent(action, data) {
|
||||
this.$emit('action', {
|
||||
action,
|
||||
data,
|
||||
})
|
||||
},
|
||||
handleKeyDown() {
|
||||
if (!this.resultList.length) return
|
||||
this.selectIndex = this.selectIndex + 1 < this.resultList.length ? this.selectIndex + 1 : 0
|
||||
this.handleScrollList()
|
||||
},
|
||||
handleKeyUp() {
|
||||
if (!this.resultList.length) return
|
||||
this.selectIndex = this.selectIndex - 1 < -1 ? this.resultList.length - 1 : this.selectIndex - 1
|
||||
this.handleScrollList()
|
||||
},
|
||||
handleScrollList() {
|
||||
if (this.selectIndex < 0) return
|
||||
let dom = this.$refs.dom_list.children[this.selectIndex]
|
||||
let offsetTop = dom.offsetTop
|
||||
let scrollTop = this.$refs.dom_scrollContainer.scrollTop
|
||||
if (offsetTop < scrollTop) {
|
||||
if (canceleFn) canceleFn()
|
||||
canceleFn = scrollTo(this.$refs.dom_scrollContainer, offsetTop, 200, () => canceleFn = null)
|
||||
} else if (offsetTop + dom.clientHeight > this.$refs.dom_scrollContainer.clientHeight + scrollTop) {
|
||||
if (canceleFn) canceleFn()
|
||||
canceleFn = scrollTo(this.$refs.dom_scrollContainer, offsetTop + dom.clientHeight - this.$refs.dom_scrollContainer.clientHeight, 200, () => canceleFn = null)
|
||||
}
|
||||
},
|
||||
handleContextMenu() {
|
||||
let str = clipboardReadText()
|
||||
str = str.replace(/\t|\r\n|\n|\r/g, ' ')
|
||||
str = str.replace(/\s+/g, ' ')
|
||||
let dom_input = this.$refs.dom_input
|
||||
this.text = `${this.text.substring(0, dom_input.selectionStart)}${str}${this.text.substring(dom_input.selectionEnd, this.text.length)}`
|
||||
},
|
||||
handleSearch() {
|
||||
if (!this.text.length) return this.resultList = []
|
||||
let list = []
|
||||
let rxp = new RegExp(this.text.split('').map(s => s.replace(/[.*+?^${}()|[\]\\]/, '\\$&')).join('.*') + '.*', 'i')
|
||||
for (const item of this.list) {
|
||||
if (rxp.test(`${item.name}${item.singer}${item.albumName ? item.albumName : ''}`)) list.push(item)
|
||||
}
|
||||
this.resultList = handleSortList(list, this.text)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 20px;
|
||||
width: 45%;
|
||||
height: @height-toolbar * 0.52;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.search {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
transition: box-shadow .4s ease, background-color @transition-theme;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
background-color: @color-search-form-background;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.07),
|
||||
0 2px 4px rgba(0,0,0,0.07),
|
||||
0 4px 8px rgba(0,0,0,0.07),
|
||||
0 8px 16px rgba(0,0,0,0.07),
|
||||
0 16px 32px rgba(0,0,0,0.07),
|
||||
0 32px 64px rgba(0,0,0,0.07);
|
||||
|
||||
&.active {
|
||||
.form {
|
||||
input {
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
}
|
||||
button {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
height: @height-toolbar * 0.52;
|
||||
position: relative;
|
||||
input {
|
||||
flex: auto;
|
||||
// border: 1px solid;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
// border-bottom: 2px solid @color-theme;
|
||||
// border-color: @color-theme;
|
||||
border: none;
|
||||
|
||||
outline: none;
|
||||
// height: @height-toolbar * .7;
|
||||
padding: 0 5px;
|
||||
overflow: hidden;
|
||||
font-size: 13.5px;
|
||||
line-height: @height-toolbar * 0.52 + 5px;
|
||||
&::placeholder {
|
||||
color: @color-btn;
|
||||
}
|
||||
}
|
||||
button {
|
||||
flex: none;
|
||||
border: none;
|
||||
// background-color: @color-search-form-background;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
padding: 6px 7px;
|
||||
color: @color-btn;
|
||||
transition: background-color .2s ease;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
background-color: @color-theme-hover;
|
||||
}
|
||||
&:active {
|
||||
background-color: @color-theme-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
// background-color: @color-search-form-background;
|
||||
font-size: 13px;
|
||||
transition: .3s ease;
|
||||
height: 0;
|
||||
transition-property: height;
|
||||
position: relative;
|
||||
li {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 8px 5px;
|
||||
transition: background-color .2s ease;
|
||||
line-height: 1.3;
|
||||
// overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
||||
&.select {
|
||||
background-color: @color-search-list-hover;
|
||||
}
|
||||
border-radius: 4px;
|
||||
// &:last-child {
|
||||
// border-bottom-left-radius: 4px;
|
||||
// border-bottom-right-radius: 4px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
flex: none;
|
||||
}
|
||||
.text {
|
||||
flex: auto;
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
.albumName {
|
||||
font-size: 12px;
|
||||
opacity: 0.6;
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
.source {
|
||||
flex: none;
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// transform: rotate(45deg);
|
||||
// background-color:
|
||||
}
|
||||
|
||||
|
||||
each(@themes, {
|
||||
:global(#root.@{value}) {
|
||||
|
||||
.search {
|
||||
background-color: ~'@{color-@{value}-search-form-background}';
|
||||
|
||||
.form {
|
||||
input {
|
||||
&::placeholder {
|
||||
color: ~'@{color-@{value}-btn}';
|
||||
}
|
||||
}
|
||||
button {
|
||||
color: ~'@{color-@{value}-btn}';
|
||||
|
||||
&:hover {
|
||||
background-color: ~'@{color-@{value}-theme-hover}';
|
||||
}
|
||||
&:active {
|
||||
background-color: ~'@{color-@{value}-theme-active}';
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
li {
|
||||
&.select {
|
||||
background-color: ~'@{color-@{value}-search-list-hover}';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user