From 33383cd3bde94108a569e8e93d3d07dd25408f67 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Sat, 2 May 2020 18:21:20 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/config.js | 2 +- src/renderer/App.vue | 28 ++-- src/renderer/assets/styles/variables.less | 6 +- src/renderer/components/core/Aside.vue | 64 ++++++-- src/renderer/components/core/Icons.vue | 149 +++++++++++------- src/renderer/components/core/Player.vue | 14 +- src/renderer/components/material/Input.vue | 1 + .../components/material/SearchInput.vue | 10 +- src/renderer/lang/cns/core/aside.json | 4 +- 9 files changed, 182 insertions(+), 96 deletions(-) diff --git a/src/common/config.js b/src/common/config.js index a04e49b6..451cc76e 100644 --- a/src/common/config.js +++ b/src/common/config.js @@ -33,7 +33,7 @@ module.exports = { name: 'larger', width: 1198, height: 766, - fontSize: '18px', + fontSize: '17px', }, { id: 5, diff --git a/src/renderer/App.vue b/src/renderer/App.vue index ea1117a2..b1dc61e9 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -1,20 +1,22 @@ + + + diff --git a/src/renderer/components/material/FlowBtn.vue b/src/renderer/components/material/FlowBtn.vue index be316b65..15647151 100644 --- a/src/renderer/components/material/FlowBtn.vue +++ b/src/renderer/components/material/FlowBtn.vue @@ -71,10 +71,11 @@ export default { position: fixed; bottom: 80px; right: 30px; - background-color: @color-search-form-background; + // transform: translateX(-25%); + background-color: @color-theme_2-background_2; border-radius: 5px; // padding: 3px 5px; - box-shadow: 0 1px 5px 0 rgba(0,0,0,.2); + box-shadow: 0 1px 8px 0 rgba(0,0,0,.2); button { background-color: transparent; border: none; @@ -106,7 +107,7 @@ export default { each(@themes, { :global(#container.@{value}) { .btns { - background-color: ~'@{color-@{value}-search-form-background}'; + background-color: ~'@{color-@{value}-theme_2-background_2}'; button { color: ~'@{color-@{value}-btn}'; &:hover { diff --git a/src/renderer/components/material/Menu.vue b/src/renderer/components/material/Menu.vue new file mode 100644 index 00000000..aacaec91 --- /dev/null +++ b/src/renderer/components/material/Menu.vue @@ -0,0 +1,172 @@ + + + + + + diff --git a/src/renderer/components/material/Pagination.vue b/src/renderer/components/material/Pagination.vue index 82c51726..53ca3bf3 100644 --- a/src/renderer/components/material/Pagination.vue +++ b/src/renderer/components/material/Pagination.vue @@ -118,7 +118,7 @@ export default { display: inline-block; background-color: @color-pagination-background; // border-top-left-radius: 8px; - border-radius: 4px; + border-radius: @radius-border; ul { display: flex; flex-flow: row nowrap; @@ -170,15 +170,15 @@ export default { } &:first-child { span, button { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + border-top-left-radius: @radius-border; + border-bottom-left-radius: @radius-border; } // border-right: .0625rem solid @theme_line; } &:last-child { span, button { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + border-top-right-radius: @radius-border; + border-bottom-right-radius: @radius-border; } // border-right: .0625rem solid @theme_line; } diff --git a/src/renderer/components/material/Select.vue b/src/renderer/components/material/Select.vue index ffccc0d7..37cf2cda 100644 --- a/src/renderer/components/material/Select.vue +++ b/src/renderer/components/material/Select.vue @@ -80,7 +80,7 @@ export default { border-left: 2px solid @color-tab-border-bottom; box-sizing: border-box; text-align: center; - border-top-left-radius: 4px; + border-top-left-radius: @radius-border; color: @color-btn; cursor: pointer; .mixin-ellipsis-1; @@ -100,7 +100,7 @@ export default { left: 0; border-bottom: 2px solid @color-tab-border-bottom; border-left: 2px solid @color-tab-border-bottom; - border-bottom-left-radius: 4px; + border-bottom-left-radius: @radius-border; background-color: @color-theme_2-background_2; opacity: 0; transform: scaleY(0); diff --git a/src/renderer/components/material/SongList.vue b/src/renderer/components/material/SongList.vue index 036bf8e6..6343670c 100644 --- a/src/renderer/components/material/SongList.vue +++ b/src/renderer/components/material/SongList.vue @@ -158,6 +158,8 @@ export default { if (this.keyEvent.isModDown) this.keyEvent.isModDown = false }, handle_key_mod_a_down({ event }) { + if (event.target.tagName == 'INPUT') return + event.preventDefault() if (event.repeat) return this.keyEvent.isModDown = false this.handleSelectAllData() diff --git a/src/renderer/components/material/Tab.vue b/src/renderer/components/material/Tab.vue index f17267c2..d0f1115b 100644 --- a/src/renderer/components/material/Tab.vue +++ b/src/renderer/components/material/Tab.vue @@ -98,15 +98,15 @@ export default { margin-left: 0; button { border-top-left-radius: 3px; - // border-bottom-left-radius: 4px; + // border-bottom-left-radius: @radius-border; } } &:last-child { border-right: 2px solid @color-tab-border-top; - border-top-right-radius: 4px; + border-top-right-radius: @radius-border; button { border-top-right-radius: 3px; - // border-bottom-right-radius: 4px; + // border-bottom-right-radius: @radius-border; } } button { diff --git a/src/renderer/components/material/listAddModal.vue b/src/renderer/components/material/listAddModal.vue index 9a61f670..cc1fef04 100644 --- a/src/renderer/components/material/listAddModal.vue +++ b/src/renderer/components/material/listAddModal.vue @@ -5,7 +5,13 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose") | {{$t('material.list_add_modal.title_first')}}  span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}} |  {{$t('material.list_add_modal.title_last')}} - material-btn(:class="$style.btn" :title="$t('material.list_add_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}} + div.scroll(:class="$style.btnContent") + material-btn(:class="$style.btn" :title="$t('material.list_add_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}} + material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :title="$t('view.list.lists_new_list_btn')") + svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 42 42' space='preserve') + use(xlink:href='#icon-addTo') + input.key-bind(:class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('view.list.lists_new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)") + span(:class="$style.btn" v-for="i in spaceNum") @@ -60,18 +92,21 @@ export default { @import '../../assets/styles/layout.less'; .main { - padding: 15px; - max-width: 300px; + // padding: 15px 0; + max-width: 530px; min-width: 200px; display: flex; flex-flow: column nowrap; justify-content: center; + min-height: 0; + // max-height: 100%; + // overflow: hidden; h2 { font-size: 13px; color: @color-theme_2-font; line-height: 1.3; text-align: center; - margin-bottom: 15px; + padding: 15px; } } @@ -79,12 +114,60 @@ export default { color: @color-theme; } +.btn-content { + flex: auto; + max-height: 100%; + padding-right: 15px; + display: flex; + flex-flow: row wrap; + justify-content: space-evenly; +} + .btn { - display: block; + box-sizing: border-box; + margin-left: 15px; margin-bottom: 15px; - &:last-child { - margin-bottom: 0; + height: 36px; + line-height: 36px; + padding: 0 10px; + width: 150px; + .mixin-ellipsis-1; +} + +.newList { + border: 1px dashed @color-theme-hover; + background-color: @color-theme_2-background_2; + color: @color-theme-hover; + opacity: .7; + + svg { + height: 18px; + margin-top: 9px; } + + &.editing { + opacity: 1; + + svg { + display: none; + } + .newListInput { + display: block; + } + } +} +.newListInput { + width: 100%; + height: 34px; + border: none; + padding: 0; + line-height: 34px; + background: none; + outline: none; + font-size: 14px; + text-align: center; + font-family: inherit; + display: none; } each(@themes, { @@ -97,6 +180,11 @@ each(@themes, { .name { color: ~'@{color-@{value}-theme}'; } + .newList { + border-color: ~'@{color-@{value}-theme-hover}'; + color: ~'@{color-@{value}-theme-hover}'; + background-color: ~'@{color-@{value}-theme_2-background_2}'; + } } }) diff --git a/src/renderer/components/material/listAddMultipleModal.vue b/src/renderer/components/material/listAddMultipleModal.vue index e1408330..7ab72f7b 100644 --- a/src/renderer/components/material/listAddMultipleModal.vue +++ b/src/renderer/components/material/listAddMultipleModal.vue @@ -2,7 +2,13 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose") main(:class="$style.main") h2 {{$t('material.list_add_multiple_modal.title', { num: musicList.length })}} - material-btn(:class="$style.btn" :title="$t('material.list_add_multiple_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}} + div.scroll(:class="$style.btnContent") + material-btn(:class="$style.btn" :title="$t('material.list_add_multiple_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}} + material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :title="$t('view.list.lists_new_list_btn')") + svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 42 42' space='preserve') + use(xlink:href='#icon-addTo') + input.key-bind(:class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('view.list.lists_new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)") + span(:class="$style.btn" v-for="i in spaceNum") @@ -61,27 +93,78 @@ export default { @import '../../assets/styles/layout.less'; .main { - padding: 15px; - max-width: 300px; + // padding: 15px 0; + max-width: 530px; min-width: 200px; display: flex; flex-flow: column nowrap; justify-content: center; + min-height: 0; + // max-height: 100%; + // overflow: hidden; h2 { font-size: 13px; color: @color-theme_2-font; line-height: 1.3; text-align: center; - margin-bottom: 15px; + padding: 15px; } } +.btn-content { + flex: auto; + max-height: 100%; + padding-right: 15px; + display: flex; + flex-flow: row wrap; + justify-content: space-evenly; +} + .btn { - display: block; + box-sizing: border-box; + margin-left: 15px; margin-bottom: 15px; - &:last-child { - margin-bottom: 0; + height: 36px; + line-height: 36px; + padding: 0 10px; + width: 150px; + .mixin-ellipsis-1; +} + +.newList { + border: 1px dashed @color-theme-hover; + background-color: @color-theme_2-background_2; + color: @color-theme-hover; + opacity: .7; + + svg { + height: 18px; + margin-top: 9px; } + + &.editing { + opacity: 1; + + svg { + display: none; + } + .newListInput { + display: block; + } + } +} +.newListInput { + width: 100%; + height: 34px; + border: none; + padding: 0; + line-height: 34px; + background: none; + outline: none; + font-size: 14px; + text-align: center; + font-family: inherit; + display: none; } each(@themes, { @@ -91,6 +174,11 @@ each(@themes, { color: ~'@{color-@{value}-theme_2-font}'; } } + .newList { + border-color: ~'@{color-@{value}-theme-hover}'; + color: ~'@{color-@{value}-theme-hover}'; + background-color: ~'@{color-@{value}-theme_2-background_2}'; + } } }) diff --git a/src/renderer/lang/cns/core/aside.json b/src/renderer/lang/cns/core/aside.json index 19a4e34c..32b709b7 100644 --- a/src/renderer/lang/cns/core/aside.json +++ b/src/renderer/lang/cns/core/aside.json @@ -1,12 +1,8 @@ { - "online_music": "在线音乐", "search": "搜索", "song_list": "歌单", "leaderboard": "排行榜", - "my_music": "我的音乐", - "default_list": "试听列表", - "love_list": "收藏", - "other": "其他", + "my_list": "我的列表", "download": "下载", "setting": "设置" } diff --git a/src/renderer/lang/cns/material/list_add_multiple_modal.json b/src/renderer/lang/cns/material/list_add_multiple_modal.json index a85a7544..97130881 100644 --- a/src/renderer/lang/cns/material/list_add_multiple_modal.json +++ b/src/renderer/lang/cns/material/list_add_multiple_modal.json @@ -1,4 +1,4 @@ { "title": "添加已选的 {num} 首歌曲到...", - "btn_title": "把该歌曲添加到 {name}" + "btn_title": "把这些歌曲添加到 {name}" } diff --git a/src/renderer/lang/cns/view/list.json b/src/renderer/lang/cns/view/list.json index 0738c013..72671d86 100644 --- a/src/renderer/lang/cns/view/list.json +++ b/src/renderer/lang/cns/view/list.json @@ -1,6 +1,12 @@ { - "select_all": "全选", - "unselect_all": "全不选", + "lists_new_list_btn": "新建列表", + "lists_new_list_input": "新列表...", + "lists_rename": "重命名", + "lists_moveup": "上移", + "lists_movedown": "下移", + "lists_remove": "删除", + "default_list": "试听列表", + "love_list": "收藏", "name": "歌曲名", "singer": "歌手", "album": "专辑", diff --git a/src/renderer/lang/cnt/core/aside.json b/src/renderer/lang/cnt/core/aside.json index 8d3981e8..23f3fce6 100644 --- a/src/renderer/lang/cnt/core/aside.json +++ b/src/renderer/lang/cnt/core/aside.json @@ -1,12 +1,8 @@ { - "online_music": "在線音樂", "search": "搜索", "song_list": "歌單", "leaderboard": "排行榜", - "my_music": "我的音樂", - "default_list": "試聽列表", - "love_list": "收藏列表", - "other": "其他", + "my_list": "我的列表", "download": "下載管理", "setting": "設置" } diff --git a/src/renderer/lang/cnt/material/list_add_multiple_modal.json b/src/renderer/lang/cnt/material/list_add_multiple_modal.json index 2e3bf68e..a69200f2 100644 --- a/src/renderer/lang/cnt/material/list_add_multiple_modal.json +++ b/src/renderer/lang/cnt/material/list_add_multiple_modal.json @@ -1,4 +1,4 @@ { "title": "添加已選的 {num} 首歌曲到...", - "btn_title": "把該歌曲添加到 {name}" + "btn_title": "把這些歌曲添加到 {name}" } diff --git a/src/renderer/lang/cnt/view/list.json b/src/renderer/lang/cnt/view/list.json index 8e76c91c..7fca1675 100644 --- a/src/renderer/lang/cnt/view/list.json +++ b/src/renderer/lang/cnt/view/list.json @@ -1,6 +1,12 @@ { - "select_all": "全選", - "unselect_all": "全不選", + "lists_new_list_btn": "新建列表", + "lists_new_list_input": "新列表...", + "lists_rename": "重命名", + "lists_moveup": "上移", + "lists_movedown": "下移", + "lists_remove": "刪除", + "default_list": "試聽列表", + "love_list": "收藏列表", "name": "歌曲名", "singer": "歌手", "album": "專輯", diff --git a/src/renderer/lang/en/core/aside.json b/src/renderer/lang/en/core/aside.json index 311828d6..30d86e45 100644 --- a/src/renderer/lang/en/core/aside.json +++ b/src/renderer/lang/en/core/aside.json @@ -1,12 +1,8 @@ { - "online_music": "Online music", "search": "Search", "song_list": "Playlists", "leaderboard": "Charts", - "my_music": "Your Library", - "default_list": "Recently Played", - "love_list": "Favorites", - "other": "Extras", + "my_list": "Your Library", "download": "Downloads", "setting": "Settings" } diff --git a/src/renderer/lang/en/material/list_add_multiple_modal.json b/src/renderer/lang/en/material/list_add_multiple_modal.json index b440e03d..a83dad04 100644 --- a/src/renderer/lang/en/material/list_add_multiple_modal.json +++ b/src/renderer/lang/en/material/list_add_multiple_modal.json @@ -1,4 +1,4 @@ { "title": "Add the selected {num} song(s) to ...", - "btn_title": "Add the song(s) to {name}" + "btn_title": "Add these song(s) to {name}" } diff --git a/src/renderer/lang/en/view/list.json b/src/renderer/lang/en/view/list.json index baa08b6b..c6e2fab3 100644 --- a/src/renderer/lang/en/view/list.json +++ b/src/renderer/lang/en/view/list.json @@ -1,6 +1,12 @@ { - "select_all": "Select all", - "unselect_all": "Unselect all", + "lists_new_list_btn": "Create list", + "lists_new_list_input": "New list...", + "lists_rename": "Rename", + "lists_moveup": "Move Up", + "lists_movedown": "Move Down", + "lists_remove": "Remove", + "default_list": "Recently Played", + "love_list": "Favorites", "name": "Name", "singer": "Artist", "album": "Album", diff --git a/src/renderer/store/modules/list.js b/src/renderer/store/modules/list.js index e22c0d63..4cda1b3e 100644 --- a/src/renderer/store/modules/list.js +++ b/src/renderer/store/modules/list.js @@ -1,23 +1,43 @@ +let allList = {} +window.allList = allList + +const allListInit = (defaultList, loveList, userList) => { + allList[defaultList.id] = defaultList + allList[loveList.id] = loveList + for (const list of userList) allList[list.id] = list +} +const allListUpdate = list => { + allList[list.id] = list +} +const allListRemove = list => { + delete allList[list.id] +} + // state const state = { + isInitedList: false, defaultList: { id: 'default', name: '试听列表', list: [], + location: 0, }, loveList: { id: 'love', name: '我的收藏', list: [], + location: 0, }, userList: [], } // getters const getters = { + isInitedList: state => state.isInitedList, defaultList: state => state.defaultList || {}, loveList: state => state.loveList || {}, userList: state => state.userList, + allList: () => allList, } // actions @@ -25,73 +45,118 @@ const actions = { } -const getList = (state, id) => { - let targetList - switch (id) { - case 'default': - targetList = state.defaultList - break - case 'love': - targetList = state.loveList - break - default: - targetList = state.userList.find(l => l.id === id) - break - } - return targetList -} - // mitations const mutations = { - initList(state, { defaultList, loveList }) { - if (defaultList !== undefined) state.defaultList.list = defaultList.list - if (loveList !== undefined) state.loveList.list = loveList.list + initList(state, { defaultList, loveList, userList }) { + if (defaultList != null) state.defaultList.list = defaultList.list + if (loveList != null) state.loveList.list = loveList.list + if (userList != null) state.userList = userList + allListInit(state.defaultList, state.loveList, state.userList) + state.isInitedList = true }, - setList(state, { id, list }) { - const targetList = getList(state, id) - if (!targetList) return - targetList.list = list + setList(state, { id, list, name, location }) { + const targetList = allList[id] + if (targetList) { + if (name && targetList.name === name) { + targetList.list.splice(0, targetList.list.length, ...list) + targetList.location = location + return + } + + id += '_' + Math.random() + } + let newList = { + name, + id, + list, + location, + } + state.userList.push(newList) + allListUpdate(newList) }, listAdd(state, { id, musicInfo }) { - const targetList = getList(state, id) + const targetList = allList[id] if (!targetList) return if (targetList.list.some(s => s.songmid === musicInfo.songmid)) return targetList.list.push(musicInfo) }, listAddMultiple(state, { id, list }) { - let targetList = getList(state, id) + let targetList = allList[id] if (!targetList) return - targetList = targetList.list - list.forEach(musicInfo => { - if (targetList.some(s => s.songmid === musicInfo.songmid)) return - targetList.push(musicInfo) - }) + let newList = [...targetList.list, ...list] + let map = {} + let ids = [] + for (const item of newList) { + if (map[item.songmid]) continue + ids.push(item.songmid) + map[item.songmid] = item + } + targetList.list.splice(0, targetList.list.length, ...ids.map(id => map[id])) }, listRemove(state, { id, index }) { - let targetList = getList(state, id) + let targetList = allList[id] if (!targetList) return targetList.list.splice(index, 1) }, listRemoveMultiple(state, { id, list }) { - let targetList = getList(state, id) + let targetList = allList[id] if (!targetList) return - targetList = targetList.list - list.forEach(musicInfo => { - let index = targetList.indexOf(musicInfo) - if (index < 0) return - targetList.splice(index, 1) - }) + let map = {} + let ids = [] + for (const item of targetList.list) { + ids.push(item.songmid) + map[item.songmid] = item + } + for (const item of list) { + if (map[item.songmid]) delete map[item.songmid] + } + let newList = [] + for (const id of ids) if (map[id]) newList.push(map[id]) + + targetList.list.splice(0, targetList.list.length, ...newList) }, listClear(state, id) { - let targetList = getList(state, id) + let targetList = allList[id] if (!targetList) return - targetList.list.length = [] + targetList.list.splice(0, targetList.list.length) }, updateMusicInfo(state, { id, index, data }) { - let targetList = getList(state, id) + let targetList = allList[id] if (!targetList) return Object.assign(targetList.list[index], data) }, + createUserList(state, name) { + let newList = { + name, + id: `userlist_${Date.now()}`, + list: [], + location: 0, + } + state.userList.push(newList) + allListUpdate(newList) + }, + removeUserList(state, index) { + let list = state.userList.splice(index, 1)[0] + allListRemove(list) + }, + setUserListName(state, { index, name }) { + let list = state.userList[index] + if (!list) return + list.name = name + }, + moveupUserList(state, index) { + let targetList = state.userList[index] + state.userList.splice(index, 1) + state.userList.splice(index - 1, 0, targetList) + }, + movedownUserList(state, index) { + let targetList = state.userList[index] + state.userList.splice(index, 1) + state.userList.splice(index + 1, 0, targetList) + }, + setListScroll(state, { id, location }) { + if (allList[id]) allList[id].location = location + }, } export default { diff --git a/src/renderer/store/modules/player.js b/src/renderer/store/modules/player.js index 37d8616e..e61ee64f 100644 --- a/src/renderer/store/modules/player.js +++ b/src/renderer/store/modules/player.js @@ -2,8 +2,10 @@ import music from '../../utils/music' // state const state = { - list: [], - listId: null, + listInfo: { + list: [], + id: null, + }, playIndex: -1, changePlay: false, isShowPlayerDetail: false, @@ -15,8 +17,8 @@ let lrcRequest // getters const getters = { - list: state => state.list || [], - listId: state => state.listId, + list: state => state.listInfo.list, + listId: state => state.listInfo.id, changePlay: satte => satte.changePlay, playIndex: state => state.playIndex, isShowPlayerDetail: state => state.isShowPlayerDetail, @@ -78,9 +80,8 @@ const mutations = { setLrc(state, datas) { datas.musicInfo.lrc = datas.lrc }, - setList(state, { list, listId, index }) { - state.list = list - state.listId = listId + setList(state, { list, index }) { + state.listInfo = list state.playIndex = index state.changePlay = true }, diff --git a/src/renderer/store/mutations.js b/src/renderer/store/mutations.js index 8aade6cc..43e2064a 100644 --- a/src/renderer/store/mutations.js +++ b/src/renderer/store/mutations.js @@ -24,9 +24,6 @@ export default { if (sortId != null) state.setting.songList.sortId = sortId if (source != null) state.setting.songList.source = source }, - setListScroll(state, { id, location }) { - state.setting.list.scroll.locations[id] = location - }, setNewVersion(state, val) { state.version.newVersion = val }, @@ -51,4 +48,7 @@ export default { setMediaDeviceId(state, val) { state.setting.player.mediaDeviceId = val }, + setPrevSelectListId(state, val) { + state.setting.list.prevSelectListId = val + }, } diff --git a/src/renderer/store/state.js b/src/renderer/store/state.js index 8c1cffae..f7ef094e 100644 --- a/src/renderer/store/state.js +++ b/src/renderer/store/state.js @@ -10,7 +10,8 @@ const electronStore_list = window.electronStore_list = new Store({ const electronStore_config = window.electronStore_config = new Store({ name: 'config', }) -if (!electronStore_config.get('version') && electronStore_config.get('setting')) { // 迁移配置 +let setting = electronStore_config.get('setting') +if (!electronStore_config.get('version') && setting) { // 迁移配置 electronStore_config.set('version', electronStore_config.get('setting.version')) electronStore_config.delete('setting.version') const list = electronStore_config.get('list') @@ -25,7 +26,20 @@ if (!electronStore_config.get('version') && electronStore_config.get('setting')) electronStore_config.delete('download') } } -const { version: settingVersion, setting } = updateSetting(electronStore_config.get('setting'), electronStore_config.get('version')) + +// 迁移列表滚动位置设置 ^0.18.3 +if (setting && setting.list.scroll) { + let scroll = setting.list.scroll + const electronStore_list = window.electronStore_list = new Store({ + name: 'playList', + }) + electronStore_list.set('defaultList.location', scroll.locations.defaultList || 0) + electronStore_list.set('loveList.location', scroll.locations.loveList || 0) + electronStore_config.delete('setting.list.scroll') + electronStore_config.set('setting.list.isSaveScrollLocation', scroll.enable) +} + +const { version: settingVersion, setting: newSetting } = updateSetting(setting, electronStore_config.get('version')) electronStore_config.set('version', settingVersion) electronStore_config.set('setting', setting) process.versions.app = version @@ -108,7 +122,7 @@ export default { downloadProgress: null, }, userInfo: null, - setting, + setting: newSetting, settingVersion, windowSizeList, diff --git a/src/renderer/utils/index.js b/src/renderer/utils/index.js index 6e9b7a2a..5435a881 100644 --- a/src/renderer/utils/index.js +++ b/src/renderer/utils/index.js @@ -55,15 +55,8 @@ const easeInOutQuad = (t, b, c, d) => { t-- return (-c / 2) * (t * (t - 2) - 1) + b } -/** - * 设置滚动条位置 - * @param {*} element 要设置滚动的容器 dom - * @param {*} to 滚动的目标位置 - * @param {*} duration 滚动完成时间 ms - * @param {*} fn 滚动完成后的回调 - */ -export const scrollTo = (element, to, duration = 300, fn = () => {}) => { - if (!element) return +const handleScroll = (element, to, duration = 300, fn = () => {}) => { + if (!element) return fn() const start = element.scrollTop || element.scrollY || 0 let cancel = false if (to > start) { @@ -99,6 +92,31 @@ export const scrollTo = (element, to, duration = 300, fn = () => {}) => { cancel = true } } +/** + * 设置滚动条位置 + * @param {*} element 要设置滚动的容器 dom + * @param {*} to 滚动的目标位置 + * @param {*} duration 滚动完成时间 ms + * @param {*} fn 滚动完成后的回调 + * @param {*} delay 延迟执行时间 + */ +export const scrollTo = (element, to, duration = 300, fn = () => {}, delay) => { + let cancelFn + let timeout + if (delay) { + let scrollCancelFn + cancelFn = () => { + timeout == null ? scrollCancelFn && scrollCancelFn() : clearTimeout(timeout) + } + timeout = setTimeout(() => { + timeout = null + scrollCancelFn = handleScroll(element, to, duration, fn, delay) + }, delay) + } else { + cancelFn = handleScroll(element, to, duration, fn, delay) + } + return cancelFn +} /** * 检查路径是否存在 @@ -184,7 +202,7 @@ export const objectDeepMerge = (target, source) => { * @param {*} setting */ export const updateSetting = (setting, version) => { - const defaultVersion = '1.0.24' + const defaultVersion = '1.0.26' if (!version) { if (setting) { version = setting.version @@ -203,10 +221,8 @@ export const updateSetting = (setting, version) => { list: { isShowAlbumName: true, isShowSource: true, - scroll: { - enable: true, - locations: {}, - }, + prevSelectListId: 'default', + isSaveScrollLocation: true, }, download: { savePath: path.join(os.homedir(), 'Desktop'), diff --git a/src/renderer/utils/keyBind.js b/src/renderer/utils/keyBind.js index 6b6156e8..9b33b112 100644 --- a/src/renderer/utils/keyBind.js +++ b/src/renderer/utils/keyBind.js @@ -52,7 +52,7 @@ const assertStopCallback = element => { const handleKeyDown = event => { if (assertStopCallback(event.target)) return - event.preventDefault() + // event.preventDefault() let keys = eventModifiers(event) switch (event.key) { case 'Control': @@ -61,7 +61,7 @@ const handleKeyDown = event => { case 'Shift': break default: - keys.push(event.key) + keys.push(event.key.toLowerCase()) break } handleEvent('down', event, keys) diff --git a/src/renderer/utils/request.js b/src/renderer/utils/request.js index b0bb47db..1a402690 100644 --- a/src/renderer/utils/request.js +++ b/src/renderer/utils/request.js @@ -109,7 +109,8 @@ export const httpFetch = (url, options = { method: 'get' }) => { export const cancelHttp = requestObj => { // console.log(requestObj) if (!requestObj) return - console.log('cancel:', requestObj.href) + console.log('cancel:', requestObj) + if (!requestObj.abort) return requestObj.abort() } diff --git a/src/renderer/views/Download.vue b/src/renderer/views/Download.vue index a6723d36..c741c5dc 100644 --- a/src/renderer/views/Download.vue +++ b/src/renderer/views/Download.vue @@ -154,6 +154,8 @@ export default { if (this.keyEvent.isModDown) this.keyEvent.isModDown = false }, handle_key_mod_a_down({ event }) { + if (event.target.tagName == 'INPUT') return + event.preventDefault() if (event.repeat) return this.keyEvent.isModDown = false this.handleSelectAllData() @@ -236,7 +238,7 @@ export default { async handlePlay(index) { const targetSong = this.list[index] if (!await checkPath(path.join(this.setting.download.savePath, targetSong.fileName))) return - this.setList({ list: this.list, listId: 'download', index: this.list.findIndex(i => i.key === targetSong.key) }) + this.setList({ list: { list: this.list, id: 'download' }, index: this.list.findIndex(i => i.key === targetSong.key) }) }, handleListBtnClick(info) { let item = this.showList[info.index] @@ -364,7 +366,7 @@ export default { } tr { &.active { - color: @color-theme; + color: @color-btn; } } } @@ -374,7 +376,7 @@ each(@themes, { .tbody { tr { &.active { - color: ~'@{color-@{value}-theme}'; + color: ~'@{color-@{value}-btn}'; } } td { diff --git a/src/renderer/views/Leaderboard.vue b/src/renderer/views/Leaderboard.vue index 3185f3dd..fe0a75af 100644 --- a/src/renderer/views/Leaderboard.vue +++ b/src/renderer/views/Leaderboard.vue @@ -96,8 +96,7 @@ export default { ) if (targetIndex > -1) { this.setList({ - list: this.defaultList.list, - listId: this.defaultList.id, + list: this.defaultList, index: targetIndex, }) } diff --git a/src/renderer/views/List.vue b/src/renderer/views/List.vue index 144b5b2d..96e44118 100644 --- a/src/renderer/views/List.vue +++ b/src/renderer/views/List.vue @@ -1,7 +1,24 @@ @@ -420,15 +626,135 @@ export default {