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

新增根据歌曲名、歌手名等字段对列表自动排序的功能

pull/733/head
lyswhut 2021-12-06 15:33:36 +08:00
parent a96eea5e44
commit ec3a0e08c3
28 changed files with 464 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
publish/changeLog.md
View File

@ -3,6 +3,7 @@
- 播放详情页新增音量控制条
- 播放详情页新增桌面歌词切换按钮
- 新增将我的列表保存为TXT、CSV格式，可以去设置-备份与恢复中使用（注意：此类格式的备份目前不支持恢复到LX Music中）
- 新增根据歌曲名、歌手名等字段对列表自动排序的功能，可以在我的列表右击列表名弹出的菜单中使用
### 优化

14
src/lang/en-us.json
View File

@ -14,7 +14,7 @@
"comment__refresh": "Refresh comments",
"comment__show": "Song comments",
"comment__title": "{name} comment",
"confirm_button_text": "OK",
"confirm_button_text": "Yes",
"copy_tip": " (Click to copy)",
"date_format_hour": "{num} hours ago",
"date_format_minute": "{num} minutes ago",
@ -91,6 +91,16 @@
"list_add__title_first_add": "Add",
"list_add__title_first_move": "Move",
"list_add__title_last": "to...",
"list_sort_modal_by_album": "Album name",
"list_sort_modal_by_down": "Descending",
"list_sort_modal_by_field": "Sort field",
"list_sort_modal_by_name": "Song name",
"list_sort_modal_by_singer": "Singer name",
"list_sort_modal_by_source": "Song source",
"list_sort_modal_by_time": "Duration",
"list_sort_modal_by_type": "Sort categories",
"list_sort_modal_by_up": "Ascending",
"list_sort_modal_tip_confirm": "Are you sure you want to do this?",
"lists__duplicate": "Duplicate song",
"lists__export": "Export",
"lists__export_part_desc": "Choose where to save the list file",
@ -107,6 +117,7 @@
"lists__remove_tip": "Do you really want to remove {name}?",
"lists__remove_tip_button": "Yes, that's right",
"lists__rename": "Rename",
"lists__sort_list": "Sort",
"lists__sync": "Update",
"load_list_file_error_detail": "We have helped you back up the old list file to {path}\nIt is stored in JSON format, you can try to repair and restore it manually\n\nError details: {detail}",
"load_list_file_error_title": "Error loading playlist data",
@ -119,6 +130,7 @@
"music_duplicate": "Duplicate song",
"music_name": "Name",
"music_singer": "Artist",
"music_sort__btn_cancel": "Cancel",
"music_sort__btn_confirm": "Confirm",
"music_sort__input_tip": "Please input which position you want to adjust to",
"music_sort__title": "Adjust the position of {name} to:",

14
src/lang/zh-cn.json
View File

@ -14,7 +14,7 @@
"comment__refresh": "刷新评论",
"comment__show": "歌曲评论",
"comment__title": "{name} 的评论",
"confirm_button_text": "好的",
"confirm_button_text": "是的",
"copy_tip": "（点击复制）",
"date_format_hour": "{num}小时前",
"date_format_minute": "{num}分钟前",
@ -91,6 +91,16 @@
"list_add__title_first_add": "添加",
"list_add__title_first_move": "移动",
"list_add__title_last": "到...",
"list_sort_modal_by_album": "专辑名",
"list_sort_modal_by_down": "降序",
"list_sort_modal_by_field": "排序字段",
"list_sort_modal_by_name": "歌曲名",
"list_sort_modal_by_singer": "歌手名",
"list_sort_modal_by_source": "歌曲源",
"list_sort_modal_by_time": "时长",
"list_sort_modal_by_type": "排序类别",
"list_sort_modal_by_up": "升序",
"list_sort_modal_tip_confirm": "你确定要这么做吗？",
"lists__duplicate": "重复歌曲",
"lists__export": "导出",
"lists__export_part_desc": "选择列表文件保存位置",
@ -107,6 +117,7 @@
"lists__remove_tip": "你真的想要移除 {name} 吗？",
"lists__remove_tip_button": "是的 没错",
"lists__rename": "重命名",
"lists__sort_list": "排序",
"lists__sync": "更新",
"load_list_file_error_detail": "我们已经帮你把旧的列表文件备份到{path}\n它以 JSON 格式存储，你可以尝试手动修复并恢复它\n\n错误详情：{detail}",
"load_list_file_error_title": "播放列表数据加载错误（建议到GitHub或加群反馈）",
@ -119,6 +130,7 @@
"music_duplicate": "重复歌曲",
"music_name": "歌曲名",
"music_singer": "歌手",
"music_sort__btn_cancel": "取消",
"music_sort__btn_confirm": "确定",
"music_sort__input_tip": "请输入要调整到第几个位置",
"music_sort__title": "将 {name} 的位置调整到：",

14
src/lang/zh-tw.json
View File

@ -14,7 +14,7 @@
"comment__refresh": "刷新評論",
"comment__show": "歌曲評論",
"comment__title": "{name} 的評論",
"confirm_button_text": "好的",
"confirm_button_text": "是的",
"copy_tip": "（點擊複製）",
"date_format_hour": "{num}小時前",
"date_format_minute": "{num}分鐘前",
@ -91,6 +91,16 @@
"list_add__title_first_add": "添加",
"list_add__title_first_move": "移動",
"list_add__title_last": "到...",
"list_sort_modal_by_album": "專輯名",
"list_sort_modal_by_down": "降序",
"list_sort_modal_by_field": "排序字段",
"list_sort_modal_by_name": "歌曲名",
"list_sort_modal_by_singer": "歌手名",
"list_sort_modal_by_source": "歌曲源",
"list_sort_modal_by_time": "時長",
"list_sort_modal_by_type": "排序類別",
"list_sort_modal_by_up": "升序",
"list_sort_modal_tip_confirm": "你確定要這麼做嗎？",
"lists__duplicate": "重複歌曲",
"lists__export": "導出",
"lists__export_part_desc": "選擇列表文件保存位置",
@ -107,6 +117,7 @@
"lists__remove_tip": "你真的想要移除 {name} 嗎？",
"lists__remove_tip_button": "是的 沒錯",
"lists__rename": "重命名",
"lists__sort_list": "排序",
"lists__sync": "更新",
"load_list_file_error_detail": "我們已經幫你把舊的列表文件備份到{path}\n它以 JSON 格式存儲，你可以嘗試手動修復並恢復它\n\n錯誤詳情：{detail}",
"load_list_file_error_title": "播放列表數據加載錯誤",
@ -119,6 +130,7 @@
"music_duplicate": "重複歌曲",
"music_name": "歌曲名",
"music_singer": "歌手",
"music_sort__btn_cancel": "取消",
"music_sort__btn_confirm": "確定",
"music_sort__input_tip": "請輸入要調整到第幾個位置",
"music_sort__title": "將 {name} 的位置調整到：",

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

@ -232,6 +232,22 @@ input, textarea {
transition: all 0.4s ease;
}
}
.gap-left {
+ .gap-left {
margin-left: 20px;
}
}
.gap-top {
&.top {
margin-top: 25px;
}
+ .gap-top {
margin-top: 10px;
}
}
/*
#waiting-mask {
position: absolute;

3
src/renderer/components/common/DownloadModal.vue
View File

@ -1,5 +1,5 @@
<template>
<material-modal :show="show" :bg-close="bgClose" @close="handleClose">
<material-modal :show="show" :bg-close="bgClose" @close="handleClose" :teleport="teleport">
<main :class="$style.main">
<h2>{{ info.name }}<br/>{{ info.singer }}</h2>
<base-btn :class="$style.btn" :key="type.type" @click="handleClick(type.type)" v-for="type in types"
@ -25,6 +25,7 @@ export default {
type: Boolean,
default: true,
},
teleport: String,
},
emits: ['update:show'],
setup() {

3
src/renderer/components/common/DownloadMultipleModal.vue
View File

@ -1,5 +1,5 @@
<template>
<material-modal :show="show" :bg-close="bgClose" @close="handleClose">
<material-modal :show="show" :bg-close="bgClose" @close="handleClose" :teleport="teleport">
<main :class="$style.main">
<h2>{{$t('download__multiple_tip', { len: list.length })}}<br/>{{$t('download__multiple_tip2')}}</h2>
<base-btn :class="$style.btn" @click="handleClick('128k')">{{$t('download__normal')}} - 128K</base-btn>
@ -28,6 +28,7 @@ export default {
return []
},
},
teleport: String,
},
emits: ['update:show', 'confirm'],
methods: {

3
src/renderer/components/common/ListAddModal.vue
View File

@ -1,5 +1,5 @@
<template>
<material-modal :show="show" :bg-close="bgClose" @close="handleClose">
<material-modal :show="show" :bg-close="bgClose" @close="handleClose" :teleport="teleport">
<main :class="$style.main">
<h2>{{$t('list_add__' + (isMove ? 'title_first_move' : 'title_first_add'))}}&nbsp;<span :class="$style.name">{{this.musicInfo && `${musicInfo.name}`}}</span>&nbsp;{{$t('list_add__title_last')}}</h2>
<div class="scroll" :class="$style.btnContent">
@ -53,6 +53,7 @@ export default {
type: Boolean,
default: false,
},
teleport: String,
},
emits: ['update:show'],
setup(props) {

1
src/renderer/components/common/ListAddMultipleModal.vue
View File

@ -55,6 +55,7 @@ export default {
type: Boolean,
default: false,
},
teleport: String,
},
emits: ['update:show', 'confirm'],
setup(props) {

2
src/renderer/components/core/PlayBar/ControlBtns.vue
View File

@ -31,9 +31,7 @@
<use xlink:href="#icon-add-2"></use>
</svg>
</div>
<teleport to="#root">
<common-list-add-modal :show="isShowAddMusicTo" :musicInfo="musicInfoItem" @close="isShowAddMusicTo = false" />
</teleport>
</div>
</template>

1
src/renderer/components/core/PlayDetail/components/ControlBtns.vue
View File

@ -26,7 +26,6 @@ div(:class="$style.footerLeftControlBtns")
div(:class="$style.footerLeftControlBtn" @click="isShowAddMusicTo = true" :tips="$t('player__add_music_to')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-add-2')
teleport(to="#root")
common-list-add-modal(:show="isShowAddMusicTo" :musicInfo="musicInfoItem" @close="isShowAddMusicTo = false")
</template>

5
src/renderer/components/material/Modal.vue
View File

@ -1,4 +1,5 @@
<template lang="pug">
teleport(:to="teleport")
div(:class="$style.container" v-if="showModal")
transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
div(:class="$style.modal" v-show="showContent" @click="bgClose && close()")
@ -29,6 +30,10 @@ export default {
type: Boolean,
default: false,
},
teleport: {
type: String,
default: '#root',
},
},
emits: ['after-enter', 'after-leave', 'close'],
data() {

9
src/renderer/components/material/OnlineList/index.vue
View File

@ -41,11 +41,10 @@ div(:class="$style.songList")
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")
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" :musicInfo="selectedAddMusicInfo")
common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :musicList="selectedList" @confirm="removeAllSelect")
common-download-modal(v-model:show="isShowDownload" :musicInfo="selectedDownloadMusicInfo" teleport="#view")
common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedList" @confirm="removeAllSelect" teleport="#view")
common-list-add-modal(v-model:show="isShowListAdd" :musicInfo="selectedAddMusicInfo" teleport="#view")
common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :musicList="selectedList" @confirm="removeAllSelect" teleport="#view")
base-menu(:menus="menus" :location="menuLocation" item-name="name" :isShow="isShowItemMenu" @menu-click="handleMenuClick")
</template>

3
src/renderer/plugins/Dialog/Dialog.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :show="visible" @close="handleCancel" @after-leave="afterLeave" :closeBtn="false">
<Modal :show="visible" @close="handleCancel" @after-leave="afterLeave" :closeBtn="false" :teleport="teleport">
<main :class="$style.main">{{message}}</main>
<footer :class="$style.footer">
<Btn :class="$style.btn" v-if="showCancel" @click="handleCancel">{{cancelBtnText}}</Btn>
@ -29,6 +29,7 @@ export default {
showCancel: false,
cancelButtonText: '',
confirmButtonText: '',
teleport: '#root',
}
},
computed: {

5
src/renderer/plugins/Dialog/index.js
View File

@ -6,13 +6,14 @@ import { createApp } from 'vue'
const defaultOptions = {
message: '',
teleport: '#root',
showCancel: false,
cancelButtonText: '',
confirmButtonText: '',
}
export const dialog = function(options) {
const { message, showCancel, cancelButtonText, confirmButtonText } =
const { message, showCancel, cancelButtonText, confirmButtonText, teleport } =
Object.assign({}, defaultOptions, typeof options == 'string' ? { message: options } : options || {})
return new Promise((resolve, reject) => {
let app = createApp(Dialog, {
@ -30,6 +31,7 @@ export const dialog = function(options) {
instance.showCancel = showCancel
instance.cancelButtonText = cancelButtonText
instance.confirmButtonText = confirmButtonText
instance.teleport = teleport
// 挂载
document.getElementById('container').appendChild(instance.$el)
@ -45,6 +47,7 @@ export const dialog = function(options) {
}
})
}
dialog.confirm = options => dialog(
typeof options == 'string'
? { message: options, showCancel: true }

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

@ -57,11 +57,10 @@ div(:class="$style.search")
div(v-else :class="$style.noitem_list")
p {{$t('search__welcome')}}
//- common-flow-btn(:show="isShowEditBtn && (searchSourceId == 'all' || assertApiSupport(searchSourceId))" :remove-btn="false" @btn-click="handleFlowBtnClick")
teleport(to="#view")
common-download-modal(v-model:show="isShowDownload" :musicInfo="musicInfo")
common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedData" @confirm="removeAllSelect")
common-list-add-modal(v-model:show="isShowListAdd" :musicInfo="musicInfo")
common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :musicList="selectedData" @confirm="removeAllSelect")
common-download-modal(v-model:show="isShowDownload" :musicInfo="musicInfo" teleport="#view")
common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedData" @confirm="removeAllSelect" teleport="#view")
common-list-add-modal(v-model:show="isShowListAdd" :musicInfo="musicInfo" teleport="#view")
common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :musicList="selectedData" @confirm="removeAllSelect" teleport="#view")
base-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
</template>

2
src/renderer/views/list/List.vue
View File

@ -1,6 +1,6 @@
<template>
<div id="my-list" :class="$style.container" @click="handleContainerClick" v-if="isInitedList">
<MyLists :list-id="listId" @show-menu="$refs.musicList.hideMenu()" ref="lists" />
<MyLists :list-id="listId" @show-menu="$refs.musicList.handleMenuClick()" ref="lists" />
<MusicList :list-id="listId" @show-menu="$refs.lists.hideListsMenu()" ref="musicList" />
</div>

5
src/renderer/views/list/components/DuplicateMusicModal.vue
View File

@ -1,5 +1,5 @@
<template>
<material-modal :show="visible" @close="$emit('update:visible', false)" bg-close="bg-close">
<material-modal :show="visible" @close="$emit('update:visible', false)" bg-close teleport="#view">
<div :class="$style.header">
<h2>{{listInfo.name}}</h2>
</div>
@ -121,6 +121,9 @@ export default {
flex: none;
padding: 15px;
text-align: center;
h2 {
word-break: break-all;
}
}
.main {
min-height: 200px;

234
src/renderer/views/list/components/ListSortModal.vue
View File

@ -1,69 +1,167 @@
<template>
<material-modal :show="show" @close="handleClose" @after-enter="$refs.input.focus()">
<material-modal :show="visible" @close="closeModal" teleport="#view" bg-close @after-leave="handleAfterLeave">
<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.header">
<h2>{{listInfo.name}}</h2>
</div>
<section>
<h3 :class="$style.title">{{$t('list_sort_modal_by_field')}}</h3>
<ul :class="$style.list">
<li :class="$style.listItem">
<base-checkbox id="list_sort_modal_field_name" name="list_sort_modal_field" need="need"
v-model="sortField" value="name" :label="$t('list_sort_modal_by_name')" />
</li>
<li :class="$style.listItem">
<base-checkbox id="list_sort_modal_field_singer" name="list_sort_modal_field" need="need"
v-model="sortField" value="singer" :label="$t('list_sort_modal_by_singer')" />
</li>
<li :class="$style.listItem">
<base-checkbox id="list_sort_modal_field_album" name="list_sort_modal_field" need="need"
v-model="sortField" value="album" :label="$t('list_sort_modal_by_album')" />
</li>
<li :class="$style.listItem">
<base-checkbox id="list_sort_modal_field_time" name="list_sort_modal_field" need="need"
v-model="sortField" value="time" :label="$t('list_sort_modal_by_time')" />
</li>
<li :class="$style.listItem">
<base-checkbox id="list_sort_modal_field_source" name="list_sort_modal_field" need="need"
v-model="sortField" value="source" :label="$t('list_sort_modal_by_source')" />
</li>
</ul>
</section>
<section>
<h3 :class="$style.title">{{$t('list_sort_modal_by_type')}}</h3>
<ul :class="$style.list">
<li :class="$style.listItem">
<base-checkbox id="list_sort_modal_type_down" name="list_sort_modal_type" need="need"
v-model="sortType" value="down" :label="$t('list_sort_modal_by_down')" />
</li>
<li :class="$style.listItem">
<base-checkbox id="list_sort_modal_type_up" name="list_sort_modal_type" need="need"
v-model="sortType" value="up" :label="$t('list_sort_modal_by_up')" />
</li>
</ul>
</section>
<div :class="$style.footer">
<base-btn :class="$style.btn" @click="handleSubmit">{{$t('music_sort__btn_confirm')}}</base-btn>
<base-btn :class="$style.btn" @click="closeModal">{{$t('music_sort__btn_cancel')}}</base-btn>
<base-btn :class="$style.btn" @click="handleSort">{{$t('music_sort__btn_confirm')}}</base-btn>
</div>
</main>
</material-modal>
</template>
<script>
import { ref, useCommit } from '@renderer/utils/vueTools'
// import { dialog } from '@renderer/plugins/Dialog'
import { getList } from '@renderer/core/share/utils'
const getIntv = (musicInfo) => {
if (!musicInfo.interval) return 0
if (musicInfo._interval) return musicInfo._interval
let intvArr = musicInfo.interval.split(':')
let intv = 0
let unit = 1
while (intvArr.length) {
intv += (intvArr.pop()) * unit
unit *= 60
}
return parseInt(intv)
}
export default {
props: {
show: {
visible: {
type: Boolean,
default: false,
},
musicInfo: {
listInfo: {
type: Object,
default() {
return {}
required: true,
},
},
selectedNum: {
type: Number,
default: 0,
},
},
emits: ['update:show', 'confirm'],
data() {
emits: ['update:visible'],
setup(props, { emit }) {
// const { t } = useI18n()
const sortField = ref(null)
const sortType = ref(null)
const setList = useCommit('list', 'setList')
const closeModal = () => {
emit('update:visible', false)
}
const handleAfterLeave = () => {
sortField.value = null
sortType.value = null
}
const verify = () => {
return !!sortField.value && !!sortType.value
}
const handleSort = async() => {
if (!verify()) return
// if (!await dialog.confirm({
// message: t('list_sort_modal_tip_confirm'),
// cancelButtonText: t('cancel_button_text'),
// confirmButtonText: t('confirm_button_text'),
// })) return
const list = [...getList(props.listInfo.id)]
let fieldName
switch (sortField.value) {
case 'name':
fieldName = 'name'
break
case 'singer':
fieldName = 'singer'
break
case 'album':
fieldName = 'albumName'
break
case 'time':
fieldName = 'interval'
break
case 'source':
fieldName = 'source'
break
}
console.log(sortType.value, sortField.value)
if (sortType.value == 'down') {
if (fieldName == 'interval') {
list.sort((a, b) => {
if (a.interval == null) {
return b.interval == null ? 0 : 1
} else return b.interval == null ? -1 : getIntv(b) - getIntv(a)
})
} else {
list.sort((a, b) => {
if (a[fieldName] == null) {
return b[fieldName] == null ? 0 : -1
} else return b[fieldName] == null ? 1 : a[fieldName].localeCompare(b[fieldName])
})
}
} else {
if (fieldName == 'interval') {
list.sort((a, b) => {
if (a.interval == null) {
return b.interval == null ? 0 : -1
} else return b.interval == null ? 1 : getIntv(a) - getIntv(b)
})
} else {
list.sort((a, b) => {
if (a[fieldName] == null) {
return b[fieldName] == null ? 0 : 1
} else return b[fieldName] == null ? -1 : b[fieldName].localeCompare(a[fieldName])
})
}
}
closeModal()
setList({ ...props.listInfo, list })
}
return {
sortNum: '',
sortField,
sortType,
closeModal,
handleSort,
handleAfterLeave,
}
},
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>
@ -71,29 +169,40 @@ export default {
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.header {
flex: none;
padding: 15px;
text-align: center;
h2 {
color: @color-theme_2-font;
word-break: break-all;
}
}
.main {
padding: 0 15px;
max-width: 530px;
min-width: 280px;
width: 320px;
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;
}
.title {
font-size: 14px;
color: @color-theme_2-font-label;
padding: 10px 0 8px;
}
.input {
// width: 100%;
// height: 26px;
padding: 8px 8px;
.list {
display: flex;
flex-flow: row wrap;
font-size: 14px;
}
.listItem {
width: (100% / 3);
padding-left: 10px;
margin-bottom: 8px;
box-sizing: border-box;
}
.footer {
margin: 20px 0 15px auto;
@ -115,11 +224,14 @@ export default {
each(@themes, {
:global(#root.@{value}) {
.main {
.header {
h2 {
color: ~'@{color-@{value}-theme_2-font}';
}
}
.title {
color: ~'@{color-@{value}-theme_2-font-label}';
}
}
})

21
src/renderer/views/list/components/MusicList/index.vue
View File

@ -32,13 +32,12 @@ div(:class="$style.list")
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")
common-download-modal(v-model:show="isShowDownload" :musicInfo="selectedDownloadMusicInfo" teleport="#view")
common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedList" @confirm="removeAllSelect" teleport="#view")
common-list-add-modal(v-model:show="isShowListAdd" :is-move="isMove" :musicInfo="selectedAddMusicInfo" :exclude-list-id="excludeListIds" teleport="#view")
common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :is-move="isMoveMultiple" :musicList="selectedList" @confirm="removeAllSelect" :exclude-list-id="excludeListIds" teleport="#view")
search-list(:list="list" @action="handleMusicSearchAction" :visible="isShowSearchBar")
list-sort-modal(v-model:show="isShowListSortModal" :music-info="selectedSortMusicInfo" :selected-num="selectedNum" @confirm="sortMusic")
music-sort-modal(v-model:show="isShowMusicSortModal" :music-info="selectedSortMusicInfo" :selected-num="selectedNum" @confirm="sortMusic")
base-menu(:menus="menus" :location="menuLocation" item-name="name" :isShow="isShowItemMenu" @menu-click="handleMenuClick")
</template>
@ -46,7 +45,7 @@ div(:class="$style.list")
import { clipboardWriteText, assertApiSupport } from '@renderer/utils'
import { useCssModule } from '@renderer/utils/vueTools'
import SearchList from '../SearchList'
import ListSortModal from '../ListSortModal'
import MusicSortModal from '../MusicSortModal'
import useListInfo from './useListInfo'
import useList from './useList'
import useMenu from './useMenu'
@ -68,7 +67,7 @@ export default {
emits: ['show-menu'],
components: {
SearchList,
ListSortModal,
MusicSortModal,
},
setup(props, { emit }) {
const styles = useCssModule()
@ -117,7 +116,7 @@ export default {
} = useMusicDownload({ selectedList, list })
const {
isShowListSortModal,
isShowMusicSortModal,
selectedNum,
selectedSortMusicInfo,
handleShowSortModal,
@ -136,7 +135,6 @@ export default {
menuLocation,
isShowItemMenu,
showMenu,
hideMenu,
menuClick,
} = useMenu({
listRef,
@ -231,7 +229,6 @@ export default {
isShowItemMenu,
menuLocation,
handleMenuClick,
hideMenu,
handleListRightClick,
assertApiSupport,
@ -242,7 +239,7 @@ export default {
isMoveMultiple,
selectedAddMusicInfo,
isShowListSortModal,
isShowMusicSortModal,
selectedNum,
selectedSortMusicInfo,
sortMusic,

1
src/renderer/views/list/components/MusicList/useMenu.js
View File

@ -158,6 +158,5 @@ export default ({
isShowItemMenu,
showMenu,
menuClick,
hideMenu,
}
}

8
src/renderer/views/list/components/MusicList/useSort.js
View File

@ -1,7 +1,7 @@
import { ref, nextTick, useCommit } from '@renderer/utils/vueTools'
export default ({ props, list, selectedList, removeAllSelect }) => {
const isShowListSortModal = ref(false)
const isShowMusicSortModal = ref(false)
const selectedNum = ref(0)
const musicInfo = ref(null)
@ -14,7 +14,7 @@ export default ({ props, list, selectedList, removeAllSelect }) => {
selectedNum.value = 0
musicInfo.value = list.value[index]
nextTick(() => {
isShowListSortModal.value = true
isShowMusicSortModal.value = true
})
}
}
@ -27,11 +27,11 @@ export default ({ props, list, selectedList, removeAllSelect }) => {
list: selectedNum.value ? [...selectedList.value] : [musicInfo.value],
})
removeAllSelect()
isShowListSortModal.value = false
isShowMusicSortModal.value = false
}
return {
isShowListSortModal,
isShowMusicSortModal,
selectedNum,
selectedSortMusicInfo: musicInfo,
handleShowSortModal,

125
src/renderer/views/list/components/MusicSortModal.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<material-modal :show="show" @close="handleClose" @after-enter="$refs.input.focus()" teleport="#view">
<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() {
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>

24
src/renderer/views/list/components/MyLists.vue
View File

@ -34,7 +34,8 @@
</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" />
<DuplicateMusicModal v-model:visible="isShowDuplicateMusicModal" :list-info="selectedDuplicateListInfo" />
<ListSortModal v-model:visible="isShowListSortModal" :list-info="selectedSortListInfo" />
</div>
</template>
@ -43,6 +44,7 @@ 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 ListSortModal from './ListSortModal'
import { defaultList, loveList, userLists } from '@renderer/core/share/list'
import { computed } from '@renderer/utils/vueTools'
import { getList } from '@renderer/core/share/utils'
@ -57,6 +59,7 @@ export default {
},
components: {
DuplicateMusicModal,
ListSortModal,
},
setup() {
const lists = computed(() => [defaultList, loveList, ...userLists])
@ -70,13 +73,14 @@ export default {
emits: ['show-menu'],
data() {
return {
isShowListSortModal: false,
isShowDuplicateMusicModal: false,
isShowListSortModal: false,
listsData: {
isShowItemMenu: false,
itemMenuControl: {
rename: true,
duplicate: true,
sort: true,
import: true,
export: true,
sync: false,
@ -93,7 +97,8 @@ export default {
isNewLeave: false,
},
fetchingListStatus: {},
selectedListInfo: {},
selectedDuplicateListInfo: {},
selectedSortListInfo: {},
}
},
computed: {
@ -114,6 +119,11 @@ export default {
action: 'duplicate',
disabled: !this.listsData.itemMenuControl.duplicate,
},
{
name: this.$t('lists__sort_list'),
action: 'sort',
disabled: !this.listsData.itemMenuControl.sort,
},
{
name: this.$t('lists__import'),
action: 'import',
@ -145,7 +155,6 @@ export default {
watch: {
listId(id) {
this.setPrevSelectListId(id)
this.isShowListSortModal = false
},
lists(lists) {
if (lists.some(l => l.id == this.listId)) return
@ -245,6 +254,7 @@ export default {
this.listsData.itemMenuControl.movedown = index < userLists.length - 1
break
}
this.listsData.itemMenuControl.sort = !!getList(this.getTargetListInfo(index)?.id).length
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
@ -272,9 +282,13 @@ export default {
})
break
case 'duplicate':
this.selectedListInfo = this.getTargetListInfo(index)
this.selectedDuplicateListInfo = this.getTargetListInfo(index)
this.isShowDuplicateMusicModal = true
break
case 'sort':
this.selectedSortListInfo = this.getTargetListInfo(index)
this.isShowListSortModal = true
break
case 'import':
this.handleImportList(index)
break

2
src/renderer/views/list/components/SearchList.vue
View File

@ -1,4 +1,5 @@
<template lang="pug">
teleport(to="#view")
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")
@ -107,6 +108,7 @@ export default {
default: false,
},
},
emits: ['action'],
data() {
return {
text: '',

14
src/renderer/views/setting/Setting.vue
View File

@ -247,20 +247,6 @@ export default {
}
}
}
.gap-left {
+ .gap-left {
margin-left: 20px;
}
}
.gap-top {
&.top {
margin-top: 25px;
}
+ .gap-top {
margin-top: 10px;
}
}
}
}

1
src/renderer/views/setting/components/SettingBasic.vue
View File

@ -48,7 +48,6 @@ dd
div
base-checkbox.gap-left(v-for="item in controlBtnPositionList" :key="item.id" :id="`setting_basic_control_btn_position_${item.id}`"
name="setting_basic_control_btn_position" need v-model="currentStting.controlBtnPosition" :value="item.id" :label="item.name")
teleport(to="#view")
user-api-modal(v-model="isShowUserApiModal")
</template>

2
src/renderer/views/setting/components/UserApiModal.vue
View File

@ -1,5 +1,5 @@
<template lang="pug">
material-modal(:show="modelValue" bg-close @close="handleClose")
material-modal(:show="modelValue" bg-close @close="handleClose" teleport="#view")
main(:class="$style.main")
h2 {{$t('user_api__title')}}
ul.scroll(v-if="apiList.length" :class="$style.content")