diff --git a/package-lock.json b/package-lock.json index db1f2eb1..ccd06ef8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "lx-music-desktop", - "version": "1.16.0-beta9", + "version": "1.16.0-beta10", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "lx-music-desktop", - "version": "1.16.0-beta9", + "version": "1.16.0-beta10", "license": "Apache-2.0", "dependencies": { "bufferutil": "^4.0.5", @@ -25,6 +25,7 @@ "node-id3": "^0.2.3", "request": "^2.88.2", "socket.io": "^4.4.0", + "sortablejs": "^1.14.0", "utf-8-validate": "^5.0.7", "vue": "^3.2.23", "vue-i18n": "^9.2.0-beta.22", @@ -17261,6 +17262,11 @@ "ms": "^2.1.1" } }, + "node_modules/sortablejs": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz", + "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==" + }, "node_modules/source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -33557,6 +33563,11 @@ } } }, + "sortablejs": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz", + "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==" + }, "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", diff --git a/package.json b/package.json index a1f6e5a4..a72b8ca6 100644 --- a/package.json +++ b/package.json @@ -245,6 +245,7 @@ "node-id3": "^0.2.3", "request": "^2.88.2", "socket.io": "^4.4.0", + "sortablejs": "^1.14.0", "utf-8-validate": "^5.0.7", "vue": "^3.2.23", "vue-i18n": "^9.2.0-beta.22", diff --git a/publish/changeLog.md b/publish/changeLog.md index 9cecb92f..55dc0548 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -7,6 +7,7 @@ - 新增将播放与下载的歌词转换为繁体中文选项，默认关闭，可在设置-播放设置中开启 - 现在已允许进入临时播放列表，即：使用歌单详情页、排行榜名称右键菜单的“播放”按钮播放歌曲时，可右击播放封面进入此临时列表 - 播放详情页新增音频可视化功能（实验性） +- 我的列表新增拖动调整位置功能，按住Ctrl键（Mac上对应Command键）的时候将进入“拖动模式”，此时可以拖动列表的位置来调整顺序 ### 优化 @@ -24,6 +25,10 @@ - 现在使用繁体中文语言时将不再自动转换歌词，转换行为将由上面新增的转换开关控制 +### 移除 + +- 移除我的列表右键菜单的“上移、下移列表”功能，调整改用新增的拖动功能去点赞位置 + ### 其他 - 升级vue到 3.x diff --git a/src/lang/en-us.json b/src/lang/en-us.json index dfaacac5..e70b3934 100644 --- a/src/lang/en-us.json +++ b/src/lang/en-us.json @@ -110,15 +110,13 @@ "lists__import_part_button_confirm": "Overwrite", "lists__import_part_confirm": "The imported list ({importName}) has the same ID as the local list ({localName}). Do you overwrite the local list?", "lists__import_part_desc": "Select list file", - "lists__movedown": "Move Down", - "lists__moveup": "Move Up", "lists__new_list_btn": "Create list", "lists__new_list_input": "New list...", "lists__remove": "Remove", "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__sort_list": "Sort songs", "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", diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json index d1677d19..a466434e 100644 --- a/src/lang/zh-cn.json +++ b/src/lang/zh-cn.json @@ -110,15 +110,13 @@ "lists__import_part_button_confirm": "覆盖掉", "lists__import_part_confirm": "导入的列表（{importName}）与本地列表（{localName}）的ID相同，是否覆盖本地列表？", "lists__import_part_desc": "选择列表文件", - "lists__movedown": "下移", - "lists__moveup": "上移", "lists__new_list_btn": "新建列表", "lists__new_list_input": "新列表...", "lists__remove": "删除", "lists__remove_tip": "你真的想要移除 {name} 吗？", "lists__remove_tip_button": "是的 没错", "lists__rename": "重命名", - "lists__sort_list": "排序", + "lists__sort_list": "排序歌曲", "lists__sync": "更新", "load_list_file_error_detail": "我们已经帮你把旧的列表文件备份到{path}\n它以 JSON 格式存储，你可以尝试手动修复并恢复它\n\n错误详情：{detail}", "load_list_file_error_title": "播放列表数据加载错误（建议到GitHub或加群反馈）", diff --git a/src/lang/zh-tw.json b/src/lang/zh-tw.json index 04f3e7d8..f1ef4321 100644 --- a/src/lang/zh-tw.json +++ b/src/lang/zh-tw.json @@ -110,15 +110,13 @@ "lists__import_part_button_confirm": "覆蓋掉", "lists__import_part_confirm": "導入的列表（{importName}）與本地列表（{localName}）的ID相同，是否覆蓋本地列表？", "lists__import_part_desc": "選擇列表文件", - "lists__movedown": "下移", - "lists__moveup": "上移", "lists__new_list_btn": "新建列表", "lists__new_list_input": "新列表...", "lists__remove": "刪除", "lists__remove_tip": "你真的想要移除 {name} 嗎？", "lists__remove_tip_button": "是的 沒錯", "lists__rename": "重命名", - "lists__sort_list": "排序", + "lists__sort_list": "排序歌曲", "lists__sync": "更新", "load_list_file_error_detail": "我們已經幫你把舊的列表文件備份到{path}\n它以 JSON 格式存儲，你可以嘗試手動修復並恢復它\n\n錯誤詳情：{detail}", "load_list_file_error_title": "播放列表數據加載錯誤", diff --git a/src/renderer/event/index.js b/src/renderer/event/index.js index 83ded121..c1df665c 100644 --- a/src/renderer/event/index.js +++ b/src/renderer/event/index.js @@ -50,10 +50,14 @@ const registerMin = () => rendererSend(NAMES.mainWindow.min) const registerMinToggle = () => rendererSend(NAMES.mainWindow.min_toggle) const registerHideToggle = () => rendererSend(NAMES.mainWindow.hide_toggle) +const setClearDownKeys = () => keyBind.clearDownKeys() + eventHub.on(baseName.min, registerMin) eventHub.on(baseName.max, () => rendererSend(NAMES.mainWindow.max)) eventHub.on(baseName.close, () => rendererSend(NAMES.mainWindow.close)) +eventHub.on(baseName.setClearDownKeys, setClearDownKeys) + const registerCommonEvents = () => { eventHub.on(hotKeyNamesCommon.close.action, registerQuit) eventHub.on(hotKeyNamesCommon.min.action, registerMin) diff --git a/src/renderer/event/names.js b/src/renderer/event/names.js index e36f5e85..2216018d 100644 --- a/src/renderer/event/names.js +++ b/src/renderer/event/names.js @@ -3,6 +3,9 @@ const names = { key_down: 'key_down', bindKey: 'bindKey', unbindKey: 'unbindKey', + dragStart: 'dragStart', + dragEnd: 'dragEnd', + setClearDownKeys: 'setClearDownKeys', focus: 'focus', min: 'min', max: 'max', diff --git a/src/renderer/plugins/Tips/index.js b/src/renderer/plugins/Tips/index.js index de7fea2b..41e1d010 100644 --- a/src/renderer/plugins/Tips/index.js +++ b/src/renderer/plugins/Tips/index.js @@ -1,10 +1,12 @@ import tips from './Tips' import { debounce } from '../../utils' +import { base as eventBaseName } from '@renderer/event/names' let instance let prevTips let prevX = 0 let prevY = 0 +let isDraging = false const getTips = el => el @@ -16,6 +18,7 @@ const getTips = el => : null const showTips = debounce(event => { + if (isDraging) return let msg = getTips(event.target) if (!msg) return prevTips = msg @@ -46,6 +49,7 @@ const setTips = tips => { } const updateTips = event => { + if (isDraging) return if (!instance) return showTips(event) setTimeout(() => { let msg = getTips(event.target) @@ -56,7 +60,7 @@ const updateTips = event => { } document.body.addEventListener('mousemove', event => { - if (event.x == prevX && event.y == prevY) return + if ((event.x == prevX && event.y == prevY) || isDraging) return prevX = event.x prevY = event.y hideTips() @@ -66,3 +70,12 @@ document.body.addEventListener('mousemove', event => { document.body.addEventListener('click', updateTips) document.body.addEventListener('contextmenu', updateTips) + +window.eventHub.on(eventBaseName.dragStart, () => { + isDraging = true + hideTips() +}) + +window.eventHub.on(eventBaseName.dragEnd, () => { + isDraging = false +}) diff --git a/src/renderer/store/modules/list.js b/src/renderer/store/modules/list.js index 9b713245..c18fb63a 100644 --- a/src/renderer/store/modules/list.js +++ b/src/renderer/store/modules/list.js @@ -352,16 +352,6 @@ const mutations = { list.name = name window.eventHub.emit(eventListNames.listChange, [id]) }, - moveupUserList(state, { id, isSync }) { - const index = userLists.findIndex(l => l.id == id) - if (index < 0) return - this.commit('list/setUserListPosition', { id, position: index - 1 }) - }, - movedownUserList(state, { id, isSync }) { - const index = userLists.findIndex(l => l.id == id) - if (index < 0) return - this.commit('list/setUserListPosition', { id, position: index + 1 }) - }, setUserListPosition(state, { id, position, isSync }) { if (!isSync) { window.eventHub.emit(eventSyncName.send_action_list, { diff --git a/src/renderer/utils/compositions/useDrag.js b/src/renderer/utils/compositions/useDrag.js new file mode 100644 index 00000000..c8bde380 --- /dev/null +++ b/src/renderer/utils/compositions/useDrag.js @@ -0,0 +1,48 @@ +import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm' +import { onMounted } from '@renderer/utils/vueTools' +import { base as eventBaseName } from '@renderer/event/names' + +Sortable.mount(new AutoScroll()) + +const noop = () => {} + +export default ({ dom_list, dragingItemClassName, filter, onUpdate, onStart = noop, onEnd = noop }) => { + let sortable + + onMounted(() => { + sortable = Sortable.create(dom_list.value, { + animation: 150, + disabled: true, + forceFallback: false, + filter: filter ? '.' + filter : null, + ghostClass: dragingItemClassName, + onUpdate(event) { + onUpdate(event.newIndex, event.oldIndex) + }, + onMove(event) { + return filter ? !event.related.classList.contains(filter) : true + }, + onChoose() { + onStart() + }, + onUnchoose() { + onEnd() + // 处于拖动状态期间，键盘事件无法监听，拖动结束手动清理按下的键 + window.eventHub.emit(eventBaseName.setClearDownKeys) + }, + onStart(event) { + window.eventHub.emit(eventBaseName.dragStart) + }, + onEnd(event) { + window.eventHub.emit(eventBaseName.dragEnd) + }, + }) + }) + + return { + setDisabled(enable) { + if (!sortable) return + sortable.option('disabled', enable) + }, + } +} diff --git a/src/renderer/views/list/components/MyLists.vue b/src/renderer/views/list/components/MyLists.vue index 11747dab..abd01f0c 100644 --- a/src/renderer/views/list/components/MyLists.vue +++ b/src/renderer/views/list/components/MyLists.vue @@ -8,18 +8,18 @@ -