From ecee495a181348a6f230d37b6f1fab8a586ba605 Mon Sep 17 00:00:00 2001 From: Hawtim Zhang Date: Mon, 19 Oct 2020 23:14:26 +0800 Subject: [PATCH] feat: use vue-i18n for language switch (#23) * feat: add config to resolve path alias. * feat: use vue-i18n for language switch * feat: add .editorconfig for ide * fix: add no-referrer to avoid CROB * fix: setCookie and fix typo * feat: integrate vue-i18n --- package.json | 1 + src/assets/icons/translation.svg | 3 + src/components/Footer.vue | 2 +- src/components/Navbar.vue | 32 +++++-- src/locale/index.js | 12 +++ src/locale/messages.js | 144 +++++++++++++++++++++++++++++++ src/main.js | 2 + src/views/album.vue | 7 +- src/views/artist.vue | 14 +-- src/views/explore.vue | 4 +- src/views/home.vue | 25 ++---- src/views/library.vue | 6 +- src/views/login.vue | 10 ++- src/views/loginAccount.vue | 18 ++-- src/views/loginUsername.vue | 10 +-- src/views/mv.vue | 2 +- src/views/newAlbum.vue | 2 +- src/views/next.vue | 4 +- src/views/playlist.vue | 6 +- src/views/search.vue | 2 +- yarn.lock | 5 ++ 21 files changed, 246 insertions(+), 65 deletions(-) create mode 100644 src/assets/icons/translation.svg create mode 100644 src/locale/index.js create mode 100644 src/locale/messages.js diff --git a/package.json b/package.json index 95f6177..ddb5346 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "vue": "^2.6.11", "vue-analytics": "^5.22.1", "vue-global-events": "^1.2.1", + "vue-i18n": "^8.22.0", "vue-router": "^3.4.3", "vue-slider-component": "^3.2.5", "vuex": "^3.4.0" diff --git a/src/assets/icons/translation.svg b/src/assets/icons/translation.svg new file mode 100644 index 0000000..9cbd770 --- /dev/null +++ b/src/assets/icons/translation.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Footer.vue b/src/components/Footer.vue index 8df7833..b639e81 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -1,7 +1,7 @@ diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 7c32e19..4c176b5 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -10,17 +10,17 @@
Home{{ $t('nav.home') }} Explore{{ $t('nav.explore') }} Library{{ $t('nav.library') }}
@@ -32,7 +32,7 @@
+
+ +
@@ -57,6 +61,7 @@ export default { return { inputFocus: false, keywords: "", + langs: ['zh-CN', 'en'] }; }, methods: { @@ -70,6 +75,12 @@ export default { query: { keywords: this.keywords }, }); }, + changeLang() { + if (this.$i18n.locale === "zh-CN") { + return this.$i18n.locale = "en"; + } + this.$i18n.locale = "zh-CN"; + } }, }; @@ -91,7 +102,6 @@ nav { backdrop-filter: saturate(180%) blur(30px); background-color: rgba(255, 255, 255, 0.86); z-index: 100; - // border-bottom: 1px solid rgba(0, 0, 0, 0.02); } .navigation-buttons { @@ -133,6 +143,7 @@ nav { color: #335eea; } } + .search { .svg-icon { height: 18px; @@ -193,4 +204,15 @@ nav { width: 24px; } } + +.locale-changer { + position: relative; + .translation { + margin-left: 16px; + height: 48px; + width: 48px; + } +} + + diff --git a/src/locale/index.js b/src/locale/index.js new file mode 100644 index 0000000..5005c24 --- /dev/null +++ b/src/locale/index.js @@ -0,0 +1,12 @@ +import Vue from 'vue'; +import VueI18n from 'vue-i18n' +import messages from './messages'; + +Vue.use(VueI18n) + +const i18n = new VueI18n({ + locale: 'zh-CN', + messages +}); + +export default i18n; \ No newline at end of file diff --git a/src/locale/messages.js b/src/locale/messages.js new file mode 100644 index 0000000..aec835c --- /dev/null +++ b/src/locale/messages.js @@ -0,0 +1,144 @@ +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 YesPlayMusic's GitHub repository to build and use the self-hosted NetEase Cloud API.` + }, + mv: { + moreVideo: 'More Videos' + }, + next: { + nowPlaying: 'Now Playing', + 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 承诺不会保存你的任何账号信息到云端。
+ 你的密码会在本地进行 MD5 加密后再传输到网易云 API。
+ YesPlayMusic 并非网易云官方网站，输入账号信息前请慎重考虑。 你也可以前往 + YesPlayMusic 的 GitHub 源代码仓库 + 自行构建并使用自托管的网易云 API。` + }, + mv: { + moreVideo: '更多视频' + }, + next: { + nowPlaying: '正在播放', + nextUp: '即将播放' + }, + playlist: "播放列表", + play: "播放", + likedSong: "我喜欢的音乐", + shortIs: "", + is: "的", + updatedAt: "更新于" + } +}; \ No newline at end of file diff --git a/src/main.js b/src/main.js index 11017bf..dd8958d 100644 --- a/src/main.js +++ b/src/main.js @@ -3,6 +3,7 @@ import VueAnalytics from "vue-analytics"; import App from "./App.vue"; import router from "./router"; import store from "./store"; +import i18n from '@/locale'; import "@/assets/icons"; import "@/utils/filters"; import { initMediaSession } from "@/utils/mediaSession"; @@ -18,6 +19,7 @@ Vue.config.productionTip = false; initMediaSession(); new Vue({ + i18n, store, router, render: (h) => h(App), diff --git a/src/views/album.vue b/src/views/album.vue index d24563b..a0d21dd 100644 --- a/src/views/album.vue +++ b/src/views/album.vue @@ -38,24 +38,21 @@ @click.native="playAlbumByID(album.id)" :iconClass="`play`" > - PLAY + {{ $t('play') }} - -
- Released {{ album.publishTime | formatDate("MMMM D, YYYY") }} + {{ $t("album.released") }} {{ album.publishTime | formatDate("MMMM D, YYYY") }}
© {{ album.company }}
-
- PLAY + {{ $t('play') }}
-
Latest Release
+
{{ $t('artist.latestRelease') }}
-
Popular Songs
+
{{ $t('artist.popularSongs') }}
-
Albums
+
{{ $t('artist.album') }}
-
EPs & Singles
+
{{ $t('artist.EPSingle') }}
-

Explore

+

{{ $t('explore.explore') }}

Load More{{ $t('explore.loadMore') }}
diff --git a/src/views/home.vue b/src/views/home.vue index 78fe867..71d3695 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -11,11 +11,10 @@ :imageSize="1024" />
-
- {{ recommendPlaylist.name }} - SEE MORE + {{ $t("home.recommendPlaylist") }} + {{ $t("home.seeMore") }}
-
-
{{ recommendArtists.name }}
+
{{ $t("home.recommendArtist") }}
-
- {{ newReleasesAlbum.name }} - SEE MORE + {{ $t("home.newAlbum") }} + {{ $t("home.seeMore") }}
-
- {{ topList.name }} - SEE MORE + {{ $t("home.leaderboard") }} + {{ $t("home.seeMore") }}
{{ user.profile.nickname - }}'s Library + }}{{ $t("is") }} {{ $t("library") }}
@@ -19,7 +19,7 @@
-
Liked Songs
+
{{ $t("likedSong") }}
{{ likedSongsPlaylist.trackCount }} songs
@@ -41,7 +41,7 @@
-
Playlists
+
{{ $t("playlist") }}
-
登录网易云账号
-
可访问全部数据
+
{{ $t('login.loginText') }}
+
{{ $t('login.accessToAll') }}
@@ -28,8 +28,8 @@ >
-
搜索网易云账号
-
只能读取账号公开数据
+
{{ $t('login.search') }}
+
{{ $t('login.readonly') }}
@@ -105,6 +105,8 @@ export default { height: 128px; width: 300px; transition: all 0.3s; + padding-left: 22px; + box-sizing: border-box; .active { .title-info { diff --git a/src/views/loginAccount.vue b/src/views/loginAccount.vue index 8edfd64..b6cc11a 100644 --- a/src/views/loginAccount.vue +++ b/src/views/loginAccount.vue @@ -3,7 +3,7 @@
-
登录网易云账号
+
{{ $t("login.loginText") }}
@@ -11,14 +11,14 @@
- +
YesPlayMusic 承诺不会保存你的任何账号信息到云端。
@@ -112,7 +112,7 @@ export default { methods: { ...mapMutations(["updateUser", "updateUserInfo"]), afterLogin() { - Cookies.set("MUSIC_U", true, { expires: 3650 }); + // Cookies.set("MUSIC_U", true, { expires: 3650 }); Cookies.set("loginMode", "account", { expires: 3650 }); userPlaylist({ uid: this.$store.state.settings.user.userId, diff --git a/src/views/loginUsername.vue b/src/views/loginUsername.vue index 4683b77..3b4f809 100644 --- a/src/views/loginUsername.vue +++ b/src/views/loginUsername.vue @@ -1,14 +1,14 @@