下载列表菜单新增歌曲添加弹窗（#2537）

Author: lyswhut

publish/changeLog.md

@@ -1,12 +1,16 @@
+我们很高兴地宣布新项目 Any Listen 的桌面版已发布，目前已支持列表跟随本地文件自动更新、加载并播放WebDAV上的歌曲等功能，更多功能仍在积极开发中，桌面版与Web版将同步更新。
+对于有播放本地音乐或播放服务器上音乐需求的人可以试试，若遇到任何问题可以发 issue 反馈。
+
 ### 新增
 
 - 新增「设置 → 其他设置 → 主窗口使用软件内置的圆角及阴影」选项（#2360）
   *默认启用，关闭后将使用系统原生的窗口样式，该选项重启软件后生效*
 - 开放 API 新增播放器声音大小、静音、播放进度控制、完整歌词获取，详情看接入文档（#2386）
 - 新增「设置 → 播放设置 → 调换歌词翻译与歌词罗马音位置」选项，默认关闭（#2451）
 - 新增启动参数 `-hidden`，在启动时将软件最小化到系统托盘（#2459）
-- 新增 Any Listen 歌词标签数据读取与播放（#2485）
+- 新增 Any Listen 歌词（用于支持已下载歌曲的歌词逐字播放）标签数据读取与播放（#2485）
 - 新增 Any Listen 歌词（包含逐字歌词、翻译、罗马音歌词，如果有）嵌入与下载，默认启用
+- 下载列表菜单新增歌曲添加弹窗，允许将所选歌曲的在线版本添加到收藏列表（#2537）
 
 ### 修复
 
@@ -20,4 +24,4 @@
 
 ### 其他
 
-- 更新 Electron 到 37.4.0
+- 更新 Electron 到 37.6.0

src/renderer/views/Download/index.vue

@@ -62,6 +62,8 @@
       <base-menu v-model="isShowItemMenu" :menus="menus" :xy="menuLocation" item-name="name" @menu-click="handleMenuClick" />
       <!-- <base-menu :menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :is-show="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick" /> -->
     </div>
+    <common-list-add-modal v-model:show="isShowListAdd" :music-info="selectedAddMusicInfo" teleport="#view" />
+    <common-list-add-multiple-modal v-model:show="isShowListAddMultiple" :music-list="selectedList" teleport="#view" @confirm="removeAllSelect" />
   </div>
 </template>
 
@@ -75,6 +77,7 @@ import useTab from './useTab'
 import useMenu from './useMenu'
 import usePlay from './usePlay'
 import useTaskActions from './useTaskActions'
+import useMusicAdd from './useMusicAdd'
 import { downloadStatus } from '@renderer/store/download/state'
 import { appSetting } from '@renderer/store/setting'
 
@@ -113,6 +116,13 @@ export default {
       handleOpenFile,
     } = useTaskActions({ list, removeAllSelect, selectedList })
 
+    const {
+      isShowListAdd,
+      isShowListAddMultiple,
+      selectedAddMusicInfo,
+      handleShowMusicAddModal,
+    } = useMusicAdd({ selectedList, list })
+
     const {
       menus,
       menuLocation,
@@ -126,6 +136,7 @@ export default {
       handleOpenFile,
       handlePlayMusic,
       handlePlayMusicLater,
+      handleShowMusicAddModal,
       handleSearch,
       handleOpenMusicDetail,
     })
@@ -209,6 +220,12 @@ export default {
       listItemHeight,
       playTaskId,
 
+      isShowListAdd,
+      isShowListAddMultiple,
+      selectedAddMusicInfo,
+
+      removeAllSelect,
+
       menus,
       menuLocation,
       isShowItemMenu,

src/renderer/views/Download/useMenu.js

@@ -10,6 +10,7 @@ export default ({
   handleOpenFile,
   handlePlayMusic,
   handlePlayMusicLater,
+  handleShowMusicAddModal,
   handleSearch,
   handleOpenMusicDetail,
 }) => {
@@ -22,6 +23,7 @@ export default ({
     sourceDetail: true,
     search: true,
     remove: true,
+    addTo: true,
   })
   const t = useI18n()
   const menuLocation = shallowReactive({ x: 0, y: 0 })
@@ -54,6 +56,11 @@ export default ({
         action: 'file',
         hide: !itemMenuControl.file,
       },
+      {
+        name: t('list__add_to'),
+        action: 'addTo',
+        disabled: !itemMenuControl.addTo,
+      },
       {
         name: t('list__source_detail'),
         action: 'sourceDetail',
@@ -129,6 +136,9 @@ export default ({
       case 'playLater':
         handlePlayMusicLater(index)
         break
+      case 'addTo':
+        handleShowMusicAddModal(index)
+        break
       case 'search':
         handleSearch(index)
         break

src/renderer/views/Download/useMusicAdd.js

@@ -0,0 +1,25 @@
+import { ref, shallowRef, nextTick, markRaw } from '@common/utils/vueTools'
+
+export default ({ selectedList, list }) => {
+  const isShowListAdd = ref(false)
+  const isShowListAddMultiple = ref(false)
+  const selectedAddMusicInfo = shallowRef(null)
+
+  const handleShowMusicAddModal = (index, single) => {
+    if (selectedList.value.length && !single) {
+      isShowListAddMultiple.value = true
+    } else {
+      selectedAddMusicInfo.value = markRaw(list.value[index].metadata.musicInfo)
+      nextTick(() => {
+        isShowListAdd.value = true
+      })
+    }
+  }
+
+  return {
+    isShowListAdd,
+    isShowListAddMultiple,
+    selectedAddMusicInfo,
+    handleShowMusicAddModal,
+  }
+}