feat: Support copy artist and album URL (#708)

src/locale/index.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import VueClipboard from 'vue-clipboard2';
 import VueI18n from 'vue-i18n';
 import store from '@/store';
 
@@ -6,6 +7,7 @@ import en from './lang/en.js';
 import zhCN from './lang/zh-CN.js';
 import tr from './lang/tr.js';
 
+Vue.use(VueClipboard);
 Vue.use(VueI18n);
 
 const i18n = new VueI18n({

src/locale/lang/en.js

@@ -133,7 +133,7 @@ export default {
       text: 'Lyric Font Size',
       small: 'Small',
       medium: 'Medium',
-      large: 'Large(Default)',
+      large: 'Large (Default)',
       xlarge: 'X-Large',
     },
     deviceSelector: 'Audio Output Device',
@@ -157,7 +157,7 @@ export default {
       text: 'Show Lyrics Background',
       off: 'Off',
       on: 'On',
-      dynamic: 'Dynamic(High GPU usage)',
+      dynamic: 'Dynamic (High GPU usage)',
     },
   },
   contextMenu: {
@@ -165,9 +165,15 @@ export default {
     addToQueue: 'Add to queue',
     saveToMyLikedSongs: 'Save to my Liked Songs',
     removeFromMyLikedSongs: 'Remove from my Liked Songs',
+    saveToLibrary: 'Save to library',
+    removeFromLibrary: 'Remove from library',
+    addToPlaylist: 'Add to playlist',
+    copyUrl: 'Copy URL',
   },
   toast: {
     savedToMyLikedSongs: 'Saved to my Liked Songs',
     removedFromMyLikedSongs: 'Removed from my Liked Songs',
+    copied: 'Copied',
+    copyFailed: 'Copy failed: ',
   },
 };

src/locale/lang/zh-CN.js

@@ -40,11 +40,11 @@ export default {
     popularSongs: '热门歌曲',
     showMore: '显示更多',
     showLess: '收起',
-    EPsSingles: 'EP和单曲',
+    EPsSingles: 'EP 和单曲',
     albums: '专辑',
     withAlbums: '张专辑',
     artist: '艺人',
-    videos: '个MV',
+    videos: '个 MV',
     following: '正在关注',
     follow: '关注',
   },
@@ -134,7 +134,7 @@ export default {
       text: '歌词字体大小',
       small: '小',
       medium: '中',
-      large: '大(默认)',
+      large: '大（默认）',
       xlarge: '超大',
     },
     deviceSelector: '音频输出设备',
@@ -158,7 +158,7 @@ export default {
       text: '显示歌词背景',
       off: '关闭',
       on: '打开',
-      dynamic: '动态（GPU占用较高）',
+      dynamic: '动态（GPU 占用较高）',
     },
   },
   contextMenu: {
@@ -166,9 +166,15 @@ export default {
     addToQueue: '添加到队列',
     saveToMyLikedSongs: '添加到我喜欢的音乐',
     removeFromMyLikedSongs: '从喜欢的音乐中删除',
+    saveToLibrary: '保存到音乐库',
+    removeFromLibrary: '从音乐库删除',
+    addToPlaylist: '添加到歌单',
+    copyUrl: '复制链接',
   },
   toast: {
     savedToMyLikedSongs: '已添加到我喜欢的音乐',
     removedFromMyLikedSongs: '已从喜欢的音乐中删除',
+    copied: '已复制',
+    copyFailed: '复制失败：',
   },
 };

src/views/album.vue

@@ -116,9 +116,14 @@
     <ContextMenu ref="albumMenu">
       <!-- <div class="item">{{ $t('contextMenu.addToQueue') }}</div> -->
       <div class="item" @click="likeAlbum(true)">{{
-        dynamicDetail.isSub ? '从音乐库删除' : '保存到音乐库'
+        dynamicDetail.isSub
+          ? $t('contextMenu.removeFromLibrary')
+          : $t('contextMenu.saveToLibrary')
+      }}</div>
+      <div class="item">{{ $t('contextMenu.addToPlaylist') }}</div>
+      <div class="item" @click="copyUrl(album.id)">{{
+        $t('contextMenu.copyUrl')
       }}</div>
-      <div class="item">添加到歌单</div>
     </ContextMenu>
   </div>
 </template>
@@ -128,6 +133,7 @@ import { mapMutations, mapActions, mapState } from 'vuex';
 import { getArtistAlbum } from '@/api/artist';
 import { getTrackDetail } from '@/api/track';
 import { getAlbum, albumDynamicDetail, likeAAlbum } from '@/api/album';
+import locale from '@/locale';
 import { splitSoundtrackAlbumTitle, splitAlbumTitle } from '@/utils/common';
 import NProgress from 'nprogress';
 import { isAccountLoggedIn } from '@/utils/auth';
@@ -267,9 +273,6 @@ export default {
         this.dynamicDetail = data;
       });
     },
-    openMenu(e) {
-      this.$refs.albumMenu.openMenu(e);
-    },
     toggleFullDescription() {
       this.showFullDescription = !this.showFullDescription;
       if (this.showFullDescription) {
@@ -278,6 +281,19 @@ export default {
         enableScrolling();
       }
     },
+    openMenu(e) {
+      this.$refs.albumMenu.openMenu(e);
+    },
+    copyUrl(id) {
+      let showToast = this.showToast;
+      this.$copyText('https://music.163.com/#/album?id=' + id)
+        .then(function () {
+          showToast(locale.t('toast.copied'));
+        })
+        .catch(error => {
+          showToast(`${locale.t('toast.copyFailed')}${error}`);
+        });
+    },
   },
 };
 </script>

src/views/artist.vue

@@ -31,6 +31,14 @@
             <span v-if="artist.followed">{{ $t('artist.following') }}</span>
             <span v-else>{{ $t('artist.follow') }}</span>
           </ButtonTwoTone>
+          <ButtonTwoTone
+            icon-class="more"
+            :icon-button="true"
+            :horizontal-padding="0"
+            color="grey"
+            @click.native="openMenu"
+          >
+          </ButtonTwoTone>
         </div>
       </div>
     </div>
@@ -156,6 +164,12 @@
         {{ artist.briefDesc }}
       </p>
     </Modal>
+
+    <ContextMenu ref="artistMenu">
+      <div class="item" @click="copyUrl(artist.id)">{{
+        $t('contextMenu.copyUrl')
+      }}</div>
+    </ContextMenu>
   </div>
 </template>
 
@@ -168,11 +182,13 @@ import {
   followAArtist,
   similarArtists,
 } from '@/api/artist';
+import locale from '@/locale';
 import { isAccountLoggedIn } from '@/utils/auth';
 import { disableScrolling, enableScrolling } from '@/utils/ui';
 import NProgress from 'nprogress';
 
 import ButtonTwoTone from '@/components/ButtonTwoTone.vue';
+import ContextMenu from '@/components/ContextMenu.vue';
 import TrackList from '@/components/TrackList.vue';
 import CoverRow from '@/components/CoverRow.vue';
 import Cover from '@/components/Cover.vue';
@@ -181,7 +197,15 @@ import Modal from '@/components/Modal.vue';
 
 export default {
   name: 'Artist',
-  components: { Cover, ButtonTwoTone, TrackList, CoverRow, MvRow, Modal },
+  components: {
+    Cover,
+    ButtonTwoTone,
+    TrackList,
+    CoverRow,
+    MvRow,
+    Modal,
+    ContextMenu,
+  },
   beforeRouteUpdate(to, from, next) {
     NProgress.start();
     this.artist.img1v1Url =
@@ -247,7 +271,7 @@ export default {
   },
   methods: {
     ...mapMutations(['appendTrackToPlayerList']),
-    ...mapActions(['playFirstTrackOnList', 'playTrackOnListByID']),
+    ...mapActions(['playFirstTrackOnList', 'playTrackOnListByID', 'showToast']),
     loadData(id, next = undefined) {
       getArtist(id).then(data => {
         this.artist = data.artist;
@@ -312,6 +336,19 @@ export default {
         enableScrolling();
       }
     },
+    openMenu(e) {
+      this.$refs.artistMenu.openMenu(e);
+    },
+    copyUrl(id) {
+      let showToast = this.showToast;
+      this.$copyText('https://music.163.com/#/artist?id=' + id)
+        .then(function () {
+          showToast(locale.t('toast.copied'));
+        })
+        .catch(error => {
+          showToast(`${locale.t('toast.copyFailed')}${error}`);
+        });
+    },
   },
 };
 </script>