Merge branch 'master' of github.com:qier222/YesPlayMusic

.env.example

@@ -0,0 +1 @@
+VUE_APP_NETEASE_API_URL=http://localhost:3000

.gitignore

@@ -4,6 +4,7 @@ node_modules
 
 
 # local env files
+.env
 .env.local
 .env.*.local
 

README.md

@@ -44,16 +44,16 @@ git clone https://github.com/qier222/YesPlayMusic.git
 npm install
 ```
 
-4. 替换 `/src/config/request.js` 里面 `baseURL` 的值为网易云 API 地址
+4. 复制 `/.env.example` 文件为 `/.env`，修改里面 `VUE_APP_NETEASE_API_URL` 的值为网易云 API 地址。本地开发的话可以填写 API 地址为 `http://localhost:3000`，YesPlayMusic 地址为 `http://localhost:8080`
 
-```JS
+```
-baseURL: "http://example.com",
+VUE_APP_NETEASE_API_URL=http://localhost:3000
 ```
 
 5. 编译打包
 
 ```sh
-npm build
+npm run build
 ```
 
 6. 将 `/dist` 目录下的文件上传到你的 Web 服务器
@@ -62,6 +62,7 @@ npm build
 
 - 中文支持
 - Dark Mode
+- 歌词
 - 私人 FM
 - 播放记录
 - 无限播放模式（播放完列表后自动播放相似歌曲）

src/components/CoverRow.vue

@@ -33,6 +33,12 @@
             v-if="type === 'album' && item.mark === 1056768"
             ><ExplicitSymbol
           /></span>
+          <span
+            class="lock-icon"
+            v-if="type === 'playlist' && item.privacy !== 0"
+          >
+            <svg-icon icon-class="lock"
+          /></span>
           <router-link
             :to="`/${type === 'chart' ? 'playlist' : type}/${item.id}`"
             >{{ item.name }}</router-link
@@ -54,27 +60,27 @@ export default {
   name: "CoverRow",
   components: {
     Cover,
-    ExplicitSymbol,
+    ExplicitSymbol
   },
   props: {
     items: Array,
     type: String,
     subText: {
       type: String,
-      default: "none",
+      default: "none"
     },
     imageSize: {
       type: Number,
-      default: 512,
+      default: 512
     },
     showPlayButton: {
       type: Boolean,
-      default: false,
+      default: false
     },
     showPlayCount: {
       type: Boolean,
-      default: false,
+      default: false
-    },
+    }
   },
   methods: {
     getUrl(item) {
@@ -96,8 +102,8 @@ export default {
           item.publishTime
         ).getFullYear()}`;
       if (this.subText === "appleMusic") return "by Apple Music";
-    },
+    }
-  },
+  }
 };
 </script>
 
@@ -164,6 +170,16 @@ export default {
   }
 }
 
+.lock-icon {
+  color: rgba(0, 0, 0, 0.28);
+  margin-right: 4px;
+  // float: right;
+  .svg-icon {
+    height: 12px;
+    width: 12px;
+  }
+}
+
 .play-count {
   font-weight: 600;
   color: rgba(0, 0, 0, 0.58);

src/components/Player.vue

@@ -37,7 +37,10 @@
           </div>
         </div>
         <div class="like-button" v-show="isLoggedIn">
-          <button-icon @click.native="likeCurrentSong" :title="$t('player.like')">
+          <button-icon
+            @click.native="likeCurrentSong"
+            :title="$t('player.like')"
+          >
             <svg-icon
               icon-class="heart"
               v-show="!liked.songs.includes(currentTrack.id)"
@@ -56,7 +59,7 @@
         <button-icon
           class="play"
           @click.native="play"
-          :title="playing ? $t('player.pause') : $t('player.play')"
+          :title="$t(playing ? 'player.pause' : 'player.play')"
         >
           <svg-icon :iconClass="playing ? 'pause' : 'play'"
         /></button-icon>

src/config/request.js

@@ -1,6 +0,0 @@
-/**
- * The base url of your API.
- * 
- * The API can be found at https://github.com/Binaryify/NeteaseCloudMusicApi
- */
-export const baseURL = "";

src/locale/index.js

@@ -1,12 +1,17 @@
-import Vue from 'vue';
+import Vue from "vue";
-import VueI18n from 'vue-i18n'
+import VueI18n from "vue-i18n";
-import messages from './messages';
 
-Vue.use(VueI18n)
+import en from "./lang/en.js";
+import zhCN from "./lang/zh-CN.js";
+
+Vue.use(VueI18n);
 
 const i18n = new VueI18n({
-  locale: 'zh-CN',
+  locale: "en",
-  messages
+  messages: {
+    en,
+    "zh-CN": zhCN
+  }
 });
 
-export default i18n;
+export default i18n;

src/locale/lang/en.js

@@ -0,0 +1,83 @@
+export default {
+  play: "PLAY",
+  nav: {
+    home: "Home",
+    explore: "Explore",
+    library: "Library",
+    search: "Search"
+  },
+  footer: {
+    settings: "Settings"
+  },
+  home: {
+    recommendPlaylist: "Recommended Playlists",
+    recommendArtist: "Recommended Artists",
+    newAlbum: "Latest Albums",
+    seeMore: "SEE MORE",
+    charts: "Charts"
+  },
+  library: {
+    sLibrary: "'s Library",
+    likedSongs: "Liked Songs",
+    sLikedSongs: "'s LikedSongs"
+  },
+  explore: {
+    explore: "Explore",
+    loadMore: "Load More"
+  },
+  artist: {
+    latestRelease: "Latest Releases",
+    popularSongs: "Popular Songs",
+    showMore: "SHOW MORE",
+    showLess: "SHOW LESS",
+    EPSingle: "EPs & Singles",
+    albums: "Albums"
+  },
+  album: {
+    released: "Released"
+  },
+  playlist: {
+    playlist: "Playlists",
+    updatedAt: "Updated at"
+  },
+  login: {
+    accessToAll: "Access to all data",
+    loginText: "Login in Netease",
+    search: "Search account",
+    readonly: "Only access to public data",
+    usernameLogin: "Username Login",
+    searchHolder: "Your account username",
+    enterTip: "Press 'enter' to search",
+    choose: "Choose your account",
+    confirm: "Confirm",
+    countryCode: "Country code",
+    phone: "Phone",
+    email: "Email address",
+    password: "Password",
+    login: "Login",
+    loginWithEmail: "Login with Email",
+    loginWithPhone: "Login with Phone",
+    // TODO
+    agreement: `YesPlayMusic promises not to save any of your account information to the cloud.
+      Your password will be MD5 encrypted locally and then transmitted to NetEase Cloud API.
+      YesPlayMusic is not the official website of NetEase Cloud Music, please consider carefully before entering account information. You can also go to <a href="https://github.com/qier222/YesPlayMusic">YesPlayMusic's GitHub repository</a> to build and use the self-hosted NetEase Cloud Music API.`
+  },
+  mv: {
+    moreVideo: "More Videos"
+  },
+  next: {
+    nowPlaying: "Now Playing",
+    nextUp: "Next Up"
+  },
+  player: {
+    like: "Like",
+    previous: "Previous Song",
+    next: "Next Song",
+    repeat: "Repeat",
+    shuffle: "Shuffle",
+    play: "Play",
+    pause: "Pause",
+    mute: "Mute",
+    nextUp: "Next Up"
+  }
+};

src/locale/lang/zh-CN.js

@@ -0,0 +1,87 @@
+export default {
+  play: "播放",
+  nav: {
+    home: "首页",
+    explore: "发现",
+    library: "资料库",
+    search: "搜索"
+  },
+  footer: {
+    settings: "设置"
+  },
+  home: {
+    recommendPlaylist: "推荐歌单",
+    recommendArtist: "推荐歌手",
+    newAlbum: "新专速递",
+    seeMore: "更多",
+    charts: "排行榜"
+  },
+  library: {
+    sLibrary: "的资料库",
+    likedSongs: "我喜欢的歌",
+    sLikedSongs: "喜欢的歌"
+  },
+  explore: {
+    explore: "发现",
+    loadMore: "加载更多"
+  },
+  artist: {
+    latestRelease: "最新发布",
+    popularSongs: "热门歌曲",
+    showMore: "显示更多",
+    showLess: "收起",
+    EPSingle: "EP和单曲",
+    albums: "专辑"
+  },
+  album: {
+    released: "发行于"
+  },
+  playlist: {
+    playlist: "歌单",
+    updatedAt: "最后更新于"
+  },
+  login: {
+    accessToAll: "可访问全部数据",
+    loginText: "登录网易云账号",
+    search: "搜索网易云账号",
+    readonly: "只能读取账号公开数据",
+    usernameLogin: "用户名登录",
+    searchHolder: "请输入你的网易云用户名",
+    enterTip: "按 Enter 搜索",
+    choose: "在列表中选中你的账号",
+    confirm: "确认",
+    countryCode: "国际区号",
+    phone: "手机号",
+    email: "邮箱",
+    password: "密码",
+    login: "登录",
+    usingEmail: "使用邮箱登录",
+    usingPhone: "使用手机号登录",
+    // TODO
+    agreement: `YesPlayMusic 承诺不会保存你的任何账号信息到云端。<br />
+      你的密码会在本地进行 MD5 加密后再传输到网易云 API。<br />
+      YesPlayMusic 并非网易云官方网站，输入账号信息前请慎重考虑。 你也可以前往
+      <a href="https://github.com/qier222/YesPlayMusic"
+        >YesPlayMusic 的 GitHub 源代码仓库</a
+      >
+      自行构建并使用自托管的网易云 API。`
+  },
+  mv: {
+    moreVideo: "更多视频"
+  },
+  next: {
+    nowPlaying: "正在播放",
+    nextUp: "即将播放"
+  },
+  player: {
+    like: "喜欢",
+    previous: "上一首",
+    next: "下一首",
+    repeat: "单曲循环",
+    shuffle: "随机播放",
+    play: "播放",
+    pause: "暂停",
+    mute: "静音",
+    nextUp: "播放列表"
+  }
+};

src/locale/messages.js

@@ -1,166 +0,0 @@
-export default {
-  en: {
-    nav: {
-      home: "Home",
-      explore: "Explore",
-      library: "Library",
-      search: "Search"
-    },
-    footer: {
-      settings: 'Settings',
-    },
-    home: {
-      recommendPlaylist: "Recommended Playlist",
-      recommendArtist: "Recommended Artist",
-      newAlbum: "Lastest Album",
-      leaderboard: "Leaderboard",
-      seeMore: "SEE MORE",
-    },
-    library: "Library",
-    explore: {
-      explore: "Explore",
-      loadMore: "Load More",
-    },
-    artist: {
-      latestRelease: "Latest Release",
-      popularSongs: "Popular Songs",
-      showMore: "SHOW MORE",
-      showLess: "SHOW LESS",
-      EPSingle: "EPs & Singles",
-      albums: "Albums"
-    },
-    album: {
-      released: "Released",
-    },
-    login: {
-      accessToAll: "Access to all data",
-      loginText: "Login in Netease",
-      search: "Search account",
-      readonly: "Only access to public data",
-      usernameLogin: "Username Login",
-      searchHolder: "Your account username",
-      enterTip: "Press 'enter' to search",
-      choose: "Choose your account",
-      confirm: "confirm",
-      countrycode: 'countrycode',
-      phone: 'phone',
-      email: 'email',
-      password: 'password',
-      login: 'Login',
-      usingEmail: 'Using email',
-      usingPhone: 'Using phone',
-      // TODO
-      agreement: `YesPlayMusic promises not to save any of your account information to the cloud.
-      Your password will be MD5 encrypted locally and then transmitted to NetEase Cloud API.
-      YesPlayMusic is not the official website of NetEase Cloud, please consider carefully before entering account information. You can also go to <a href="https://github.com/qier222/YesPlayMusic">YesPlayMusic's GitHub repository</a> to build and use the self-hosted NetEase Cloud API.`
-    },
-    mv: {
-      moreVideo: 'More Videos'
-    },
-    next: {
-      nowPlaying: 'Now Playing',
-      nextUp: 'Next Up'
-    },
-    player: {
-      like: 'Like',
-      previous: 'Previous Song',
-      next: 'Next Song',
-      repeat: 'Repeat',
-      shuffle: 'Shuffle',
-      play: 'Play',
-      pause: 'Pause',
-      mute: 'Mute',
-      nextUp: 'Next Up'
-    },
-    playlist: "Playlists",
-    play: "PLAY",
-    likedSong: "Liked Songs",
-    shortIs: "'s",
-    is: "'s",
-    updatedAt: "Updated at",
-  },
-  "zh-CN": {
-    nav: {
-      home: "首页",
-      explore: "发现",
-      library: "歌单",
-      search: "搜索"
-    },
-    footer: {
-      settings: '设置',
-    },
-    home: {
-      recommendPlaylist: "推荐歌单",
-      recommendArtist: "推荐歌手",
-      newAlbum: "新专速递",
-      leaderboard: "排行榜",
-      seeMore: "更多",
-    },
-    library: "歌单",
-    explore: {
-      explore: "发现",
-      loadMore: "加载更多",
-    },
-    artist: {
-      latestRelease: "最新发布",
-      popularSongs: "热门歌曲",
-      showMore: "显示更多",
-      showLess: "收起",
-      EPSingle: "专辑及单曲",
-      albums: "专辑"
-    },
-    album: {
-      released: "发布于",
-    },
-    login: {
-      accessToAll: "可访问全部数据",
-      loginText: "登录网易云账号",
-      search: "搜索网易云账号",
-      readonly: "只能读取账号公开数据",
-      usernameLogin: '用户名登录',
-      searchHolder: "请输入你的网易云用户名",
-      enterTip: "按 Enter 搜索",
-      choose: "在列表中选中你的账号",
-      confirm: "确认",
-      countrycode: '国际区号',
-      phone: '手机号',
-      email: '邮箱',
-      password: '密码',
-      login: '登录',
-      usingEmail: '使用邮箱登录',
-      usingPhone: '使用手机号登录',
-      // TODO
-      agreement: `YesPlayMusic 承诺不会保存你的任何账号信息到云端。<br />
-      你的密码会在本地进行 MD5 加密后再传输到网易云 API。<br />
-      YesPlayMusic 并非网易云官方网站，输入账号信息前请慎重考虑。 你也可以前往
-      <a href="https://github.com/qier222/YesPlayMusic"
-        >YesPlayMusic 的 GitHub 源代码仓库</a
-      >
-      自行构建并使用自托管的网易云 API。`
-    },
-    mv: {
-      moreVideo: '更多视频'
-    },
-    next: {
-      nowPlaying: '正在播放',
-      nextUp: '即将播放'
-    },
-    player: {
-      like: '喜欢',
-      previous: '上一首',
-      next: '下一首',
-      repeat: '单曲循环',
-      shuffle: '随机播放',
-      play: '播放',
-      pause: '暂停',
-      mute: '静音',
-      nextUp: '播放列表'
-    },
-    playlist: "播放列表",
-    play: "播放",
-    likedSong: "我喜欢的音乐",
-    shortIs: "",
-    is: "的",
-    updatedAt: "更新于"
-  }
-};

src/utils/filters.js

@@ -2,6 +2,7 @@ import Vue from "vue";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import relativeTime from "dayjs/plugin/relativeTime";
+import locale from "@/locale";
 
 Vue.filter("formatTime", (Milliseconds, format = "HH:MM:SS") => {
   if (!Milliseconds) return "";
@@ -27,6 +28,7 @@ Vue.filter("formatTime", (Milliseconds, format = "HH:MM:SS") => {
 
 Vue.filter("formatDate", (timestamp, format = "MMM D, YYYY") => {
   if (!timestamp) return "";
+  if (locale.locale === "zh-CN") format = "YYYY年MM月DD日";
   return dayjs(timestamp).format(format);
 });
 
@@ -52,26 +54,34 @@ Vue.filter("resizeImage", (imgUrl, size = 512) => {
   return `${httpsImgUrl}?param=${size}y${size}`;
 });
 
-Vue.filter("formatPlayCount", (count) => {
+Vue.filter("formatPlayCount", count => {
   if (!count) return "";
-  if (count > 100000000) {
+  if (locale.locale === "zh-CN") {
-    return `${~~(count / 100000000)}亿`;
+    if (count > 100000000) {
+      return `${Math.floor((count / 100000000) * 100) / 100}亿`; // 2.32 亿
+    }
+    if (count > 100000) {
+      return `${Math.floor((count / 10000) * 10) / 10}万`; // 232.1 万
+    }
+    if (count > 10000) {
+      return `${Math.floor((count / 10000) * 100) / 100}万`; // 2.3 万
+    }
+    return count;
+  } else {
+    if (count > 10000000) {
+      return `${Math.floor((count / 1000000) * 10) / 10}M`; // 233.2M
+    }
+    if (count > 1000000) {
+      return `${Math.floor((count / 1000000) * 100) / 100}M`; // 2.3M
+    }
+    if (count > 1000) {
+      return `${Math.floor((count / 1000) * 100) / 100}K`; // 233.23K
+    }
+    return count;
   }
-  if (count > 10000) {
-    return `${~~(count / 10000)}万`;
-  }
-  return count;
-
-  // if (count > 1000000) {
-  //   return `${Math.floor((count / 1000000) * 100) / 100}M`;
-  // }
-  // if (count > 1000) {
-  //   return `${~~(count / 1000)}K`;
-  // }
-  // return count;
 });
 
-Vue.filter("toHttps", (url) => {
+Vue.filter("toHttps", url => {
   if (!url) return "";
   return url.replace(/^http:/, "https:");
 });

src/utils/request.js

@@ -1,37 +1,36 @@
 import axios from "axios";
-import { baseURL } from "@/config/request";
 
 const service = axios.create({
-  baseURL: baseURL,
+  baseURL: process.env.VUE_APP_NETEASE_API_URL,
   withCredentials: true,
-  timeout: 15000,
+  timeout: 15000
 });
 
 const errors = new Map([
-  [401, 'The token you are using has expired.'],
+  [401, "The token you are using has expired."],
   [502, null],
-  [301, 'You must login to use this feature.'],
+  [301, "You must login to use this feature."],
-  [-1, 'An unexpected error has occurred: '],
+  [-1, "An unexpected error has occurred: "]
 ]);
 
 service.interceptors.response.use(
-  (response) => {
+  response => {
     const res = response.data;
 
     if (res.code !== 200) {
       alert(
         errors.has(res.code)
-          ? errors.get(res.code)
+          ? errors.get(res.code) ||
-            // null = `The server returned ${res.msg}`
+              // null = `The server returned ${res.msg}`
-            || `The server returned ${res.msg}`
+              `The server returned ${res.msg}`
-          // -1 = default expection message
+          : // -1 = default expection message
-          : errors.get(-1) + res.code
+            errors.get(-1) + res.code
       );
     } else {
       return res;
     }
   },
-  (error) => {
+  error => {
     const errMsg = `error: ${error}`;
     console.log(errMsg);
 

src/views/album.vue

@@ -38,7 +38,7 @@
             @click.native="playAlbumByID(album.id)"
             :iconClass="`play`"
           >
-            {{ $t('play') }}
+            {{ $t("play") }}
           </ButtonTwoTone>
         </div>
       </div>
@@ -47,7 +47,8 @@
     <div class="extra-info">
       <div class="album-time"></div>
       <div class="release-date">
-        {{ $t("album.released") }} {{ album.publishTime | formatDate("MMMM D, YYYY") }}
+        {{ $t("album.released") }}
+        {{ album.publishTime | formatDate("MMMM D, YYYY") }}
       </div>
       <div class="copyright" v-if="album.company !== null">
         © {{ album.company }}
@@ -86,7 +87,7 @@ export default {
     Cover,
     ButtonTwoTone,
     TrackList,
-    ExplicitSymbol,
+    ExplicitSymbol
   },
   data() {
     return {
@@ -94,27 +95,27 @@ export default {
         id: 0,
         picUrl: "",
         artist: {
-          id: 0,
+          id: 0
-        },
+        }
       },
       tracks: [],
       showFullDescription: false,
-      show: false,
+      show: false
     };
   },
   created() {
     getAlbum(this.$route.params.id)
-      .then((data) => {
+      .then(data => {
         this.album = data.album;
         this.tracks = data.songs;
         NProgress.done();
         this.show = true;
         return this.tracks;
       })
-      .then((tracks) => {
+      .then(tracks => {
         // to get explicit mark
-        let trackIDs = tracks.map((t) => t.id);
+        let trackIDs = tracks.map(t => t.id);
-        getTrackDetail(trackIDs.join(",")).then((data) => {
+        getTrackDetail(trackIDs.join(",")).then(data => {
           this.tracks = data.songs;
         });
       });
@@ -123,20 +124,20 @@ export default {
     ...mapState(["player"]),
     albumTime() {
       let time = 0;
-      this.tracks.map((t) => (time = time + t.dt));
+      this.tracks.map(t => (time = time + t.dt));
       return time;
-    },
+    }
   },
   methods: {
     ...mapMutations(["appendTrackToPlayerList"]),
     ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
     playAlbumByID(id, trackID = "first") {
-      if (this.tracks.find((t) => t.playable !== false) === undefined) {
+      if (this.tracks.find(t => t.playable !== false) === undefined) {
         return;
       }
       playAlbumByID(id, trackID);
-    },
+    }
-  },
+  }
 };
 </script>
 

src/views/home.vue

@@ -14,7 +14,9 @@
     <div class="index-row">
       <div class="title">
         {{ $t("home.recommendPlaylist") }}
-        <router-link to="/explore?category=推荐歌单">{{ $t("home.seeMore") }}</router-link>
+        <router-link to="/explore?category=推荐歌单">{{
+          $t("home.seeMore")
+        }}</router-link>
       </div>
       <CoverRow
         :type="'playlist'"
@@ -35,8 +37,10 @@
     </div>
     <div class="index-row">
       <div class="title">
-        {{ $t("home.leaderboard") }}
+        {{ $t("home.charts") }}
-        <router-link to="/explore?category=排行榜">{{ $t("home.seeMore") }}</router-link>
+        <router-link to="/explore?category=排行榜">{{
+          $t("home.seeMore")
+        }}</router-link>
       </div>
       <CoverRow
         :type="'chart'"
@@ -66,36 +70,36 @@ export default {
       newReleasesAlbum: { items: [] },
       topList: {
         items: [],
-        ids: [19723756, 180106, 60198, 3812895, 60131],
+        ids: [19723756, 180106, 60198, 3812895, 60131]
       },
       recommendArtists: {
         items: [],
-        indexs: [],
+        indexs: []
-      },
+      }
     };
   },
   computed: {
     byAppleMusic() {
       return byAppleMusic;
-    },
+    }
   },
   methods: {
     loadData() {
       if (!this.show) NProgress.start();
       recommendPlaylist({
-        limit: 10,
+        limit: 10
-      }).then((data) => {
+      }).then(data => {
         this.recommendPlaylist.items = data.result;
         NProgress.done();
         this.show = true;
       });
       newAlbums({
         area: "EA",
-        limit: 10,
+        limit: 10
-      }).then((data) => {
+      }).then(data => {
         this.newReleasesAlbum.items = data.albums;
       });
-      toplistOfArtists(2).then((data) => {
+      toplistOfArtists(2).then(data => {
         let indexs = [];
         while (indexs.length < 5) {
           let tmp = ~~(Math.random() * 100);
@@ -106,16 +110,16 @@ export default {
           indexs.includes(index)
         );
       });
-      toplists().then((data) => {
+      toplists().then(data => {
-        this.topList.items = data.list.filter((l) =>
+        this.topList.items = data.list.filter(l =>
           this.topList.ids.includes(l.id)
         );
       });
-    },
+    }
   },
   activated() {
     this.loadData();
-  },
+  }
 };
 </script>
 

src/views/library.vue

@@ -3,7 +3,7 @@
     <h1>
       <img class="head" :src="user.profile.avatarUrl | resizeImage" />{{
         user.profile.nickname
-      }}{{ $t("is") }} {{ $t("library") }}
+      }}{{ $t("library.sLibrary") }}
     </h1>
     <div class="section-one">
       <div class="liked-songs" @click="goToLikedSongsList">
@@ -19,7 +19,7 @@
         </div>
         <div class="bottom">
           <div class="titles">
-            <div class="title">{{ $t("likedSong") }}</div>
+            <div class="title">{{ $t("library.likedSongs") }}</div>
             <div class="sub-title">
               {{ likedSongsPlaylist.trackCount }} songs
             </div>
@@ -41,7 +41,7 @@
     </div>
 
     <div class="playlists" v-if="playlists.length > 1">
-      <div class="title">{{ $t("playlist") }}</div>
+      <div class="title">{{ $t("playlist.playlist") }}</div>
       <div>
         <CoverRow
           :items="playlists.slice(1)"
@@ -76,23 +76,23 @@ export default {
       user: {
         profile: {
           avatarUrl: "",
-          nickname: "",
+          nickname: ""
-        },
+        }
       },
       playlists: [],
       hasMorePlaylists: true,
       likedSongsPlaylist: {
         id: 0,
-        trackCount: 0,
+        trackCount: 0
       },
       likedSongs: [],
       likedSongIDs: [],
-      lyric: undefined,
+      lyric: undefined
     };
   },
   created() {
     NProgress.start();
-    userDetail(this.settings.user.userId).then((data) => {
+    userDetail(this.settings.user.userId).then(data => {
       this.user = data;
     });
   },
@@ -107,7 +107,7 @@ export default {
     pickedLyric() {
       if (this.lyric === undefined) return "";
       let lyric = this.lyric.split("\n");
-      lyric = lyric.filter((l) => {
+      lyric = lyric.filter(l => {
         if (l.includes("作词") || l.includes("作曲")) {
           return false;
         }
@@ -120,9 +120,9 @@ export default {
       return [
         lyric[lineIndex].split("]")[1],
         lyric[lineIndex + 1].split("]")[1],
-        lyric[lineIndex + 2].split("]")[1],
+        lyric[lineIndex + 2].split("]")[1]
       ];
-    },
+    }
   },
   methods: {
     playLikedSongs() {
@@ -133,24 +133,31 @@ export default {
     },
     loadData() {
       if (this.hasMorePlaylists) {
-        userPlaylist({
+        this.getUserPlaylists();
-          uid: this.settings.user.userId,
-          offset: this.playlists.length,
-          timestamp: new Date().getTime(),
-        }).then((data) => {
-          this.playlists.push(...data.playlist);
-          this.hasMorePlaylists = data.more;
-          this.likedSongsPlaylist = data.playlist[0];
-        });
       }
       this.getLikedSongs();
     },
+    getUserPlaylists(replace = false) {
+      userPlaylist({
+        uid: this.settings.user.userId,
+        offset: this.playlists.length === 0 ? 0 : this.playlists.length - 1,
+        timestamp: new Date().getTime()
+      }).then(data => {
+        if (replace) {
+          this.playlists = data.playlist;
+        } else {
+          this.playlists.push(...data.playlist);
+        }
+        this.hasMorePlaylists = data.more;
+        this.likedSongsPlaylist = data.playlist[0];
+      });
+    },
     getLikedSongs(getLyric = true) {
       getPlaylistDetail(this.settings.user.likedSongPlaylistID, true).then(
-        (data) => {
+        data => {
-          let TrackIDs = data.playlist.trackIds.slice(0, 20).map((t) => t.id);
+          let TrackIDs = data.playlist.trackIds.slice(0, 20).map(t => t.id);
           this.likedSongIDs = TrackIDs;
-          getTrackDetail(this.likedSongIDs.join(",")).then((data) => {
+          getTrackDetail(this.likedSongIDs.join(",")).then(data => {
             this.likedSongs = data.songs;
             this.likedSongs = mapTrackPlayableStatus(this.likedSongs);
             NProgress.done();
@@ -163,16 +170,16 @@ export default {
     getRandomLyric() {
       getLyric(
         this.likedSongIDs[randomNum(0, this.likedSongIDs.length - 1)]
-      ).then((data) => {
+      ).then(data => {
         if (data.lrc !== undefined) this.lyric = data.lrc.lyric;
       });
-    },
+    }
   },
   watch: {
     likedSongsInState() {
       this.getLikedSongs(false);
-    },
+    }
-  },
+  }
 };
 </script>
 

src/views/playlist.vue

@@ -20,7 +20,7 @@
                 5277965913,
                 5277969451,
                 5277778542,
-                5278068783,
+                5278068783
               ].includes(playlist.id)
             "
             >Apple Music</span
@@ -35,7 +35,8 @@
           >
         </div>
         <div class="date-and-count">
-          {{ $t("updatedAt") }} {{ playlist.updateTime | formatDate }} ·
+          {{ $t("playlist.updatedAt") }}
+          {{ playlist.updateTime | formatDate }} ·
           {{ playlist.trackCount }} Songs
         </div>
         <div class="description" @click="showFullDescription = true">
@@ -64,7 +65,7 @@
       <h1>
         <img class="avatar" :src="settings.user.avatarUrl | resizeImage" />{{
           settings.user.nickname
-        }}{{ $t("is") }} {{ $t("likedSong") }}
+        }}{{ $t("library.sLikedSongs") }}
       </h1>
     </div>
 
@@ -103,7 +104,7 @@ export default {
   components: {
     Cover,
     ButtonTwoTone,
-    TrackList,
+    TrackList
   },
   data() {
     return {
@@ -111,14 +112,14 @@ export default {
       playlist: {
         coverImgUrl: "",
         creator: {
-          userId: "",
+          userId: ""
         },
-        trackIds: [],
+        trackIds: []
       },
       showFullDescription: false,
       tracks: [],
       loadingMore: false,
-      lastLoadedTrackIndex: 9,
+      lastLoadedTrackIndex: 9
     };
   },
   created() {
@@ -138,23 +139,23 @@ export default {
     },
     isLikeSongsPage() {
       return this.$route.name === "likedSongs";
-    },
+    }
   },
   methods: {
     ...mapMutations(["appendTrackToPlayerList"]),
     ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
     playPlaylistByID(trackID = "first") {
-      let trackIDs = this.playlist.trackIds.map((t) => t.id);
+      let trackIDs = this.playlist.trackIds.map(t => t.id);
       playAList(trackIDs, this.playlist.id, "playlist", trackID);
     },
     likePlaylist() {
       subscribePlaylist({
         id: this.playlist.id,
-        t: this.playlist.subscribed ? 2 : 1,
+        t: this.playlist.subscribed ? 2 : 1
-      }).then((data) => {
+      }).then(data => {
         if (data.code === 200)
           this.playlist.subscribed = !this.playlist.subscribed;
-        getPlaylistDetail(this.id, true).then((data) => {
+        getPlaylistDetail(this.id, true).then(data => {
           this.playlist = data.playlist;
         });
       });
@@ -162,7 +163,7 @@ export default {
     loadData(id, next = undefined) {
       this.id = id;
       getPlaylistDetail(this.id, true)
-        .then((data) => {
+        .then(data => {
           this.playlist = data.playlist;
           this.tracks = data.playlist.tracks;
           this.tracks = mapTrackPlayableStatus(this.tracks);
@@ -190,8 +191,8 @@ export default {
         )
           return t;
       });
-      trackIDs = trackIDs.map((t) => t.id);
+      trackIDs = trackIDs.map(t => t.id);
-      getTrackDetail(trackIDs.join(",")).then((data) => {
+      getTrackDetail(trackIDs.join(",")).then(data => {
         this.tracks.push(...data.songs);
         this.tracks = mapTrackPlayableStatus(this.tracks);
         this.lastLoadedTrackIndex += trackIDs.length;
@@ -213,8 +214,8 @@ export default {
         this.loadingMore = true;
         this.loadMore();
       }
-    },
+    }
-  },
+  }
 };
 </script>
 

src/views/search.vue

@@ -79,7 +79,7 @@
       </div>
 
       <div class="playlists" v-if="result.hasOwnProperty('playList')">
-        <div class="section-title">{{ $t("playlist") }}</div>
+        <div class="section-title">{{ $t("playlist.playlist") }}</div>
         <div class="albums-list">
           <div
             class="album"
@@ -130,7 +130,7 @@ export default {
   components: {
     Cover,
     TrackList,
-    MvRow,
+    MvRow
   },
   data() {
     return {
@@ -139,7 +139,7 @@ export default {
       mvs: [],
       type: 1,
       limit: 30,
-      offset: 0,
+      offset: 0
     };
   },
   computed: {
@@ -150,26 +150,26 @@ export default {
     tracks() {
       let tracks = this.result.song.songs.slice(0, 12);
       return tracks;
-    },
+    }
   },
   methods: {
     goToAlbum(id) {
       this.$router.push({ name: "album", params: { id } });
     },
     playTrackInSearchResult(id) {
-      let track = this.tracks.find((t) => t.id === id);
+      let track = this.tracks.find(t => t.id === id);
       appendTrackToPlayerList(track, true);
     },
     getData(keywords) {
-      search({ keywords: keywords, type: 1018 }).then((data) => {
+      search({ keywords: keywords, type: 1018 }).then(data => {
         this.result = data.result;
         NProgress.done();
         this.show = true;
       });
-      search({ keywords: keywords, type: 1004 }).then((data) => {
+      search({ keywords: keywords, type: 1004 }).then(data => {
         this.mvs = data.result.mvs;
       });
-    },
+    }
   },
   created() {
     this.getData(this.$route.query.keywords);
@@ -179,7 +179,7 @@ export default {
     next();
     NProgress.start();
     this.getData(to.query.keywords);
-  },
+  }
 };
 </script>