房间内也使用i18n

frontend/src/components/ChatRenderer/AuthorBadge.vue

@@ -14,7 +14,8 @@
           </svg>
         </yt-icon>
         <img v-else :src="`/static/img/icons/guard-level-${privilegeType}.png`"
-          class="style-scope yt-live-chat-author-badge-renderer" :alt="readableAuthorTypeText">
+          class="style-scope yt-live-chat-author-badge-renderer" :alt="readableAuthorTypeText"
+        >
       </div>
     </el-tooltip>
   </yt-live-chat-author-badge-renderer>
@@ -38,9 +39,9 @@ export default {
     },
     readableAuthorTypeText() {
       if (this.isAdmin) {
-        return '管理员'
+        return this.$t('chat.moderator')
       }
-      return constants.GUARD_LEVEL_TO_TEXT[this.privilegeType]
+      return constants.getShowGuardLevelText(this.privilegeType)
     }
   }
 }

frontend/src/components/ChatRenderer/Ticker.vue

@@ -158,7 +158,7 @@ export default {
     },
     getText(message) {
       if (message.type === constants.MESSAGE_TYPE_MEMBER) {
-        return 'Member'
+        return this.$t('chat.tickerMembership')
       }
       return `CN¥${formatCurrency(message.price)}`
     },

frontend/src/components/ChatRenderer/constants.js

@@ -1,3 +1,5 @@
+import * as i18n from '@/i18n'
+
 export const AUTHRO_TYPE_NORMAL = 0
 export const AUTHRO_TYPE_MEMBER = 1
 export const AUTHRO_TYPE_ADMIN = 2
@@ -10,13 +12,21 @@ export const AUTHOR_TYPE_TO_TEXT = [
   'owner' // 主播
 ]
 
-export const GUARD_LEVEL_TO_TEXT = [
+const GUARD_LEVEL_TO_TEXT_KEY = [
   '',
-  '总督',
-  '提督',
-  '舰长'
+  'chat.guardLevel1',
+  'chat.guardLevel2',
+  'chat.guardLevel3'
 ]
 
+export function getShowGuardLevelText(guardLevel) {
+  let key = GUARD_LEVEL_TO_TEXT_KEY[guardLevel] || ''
+  if (key === '') {
+    return ''
+  }
+  return i18n.i18n.t(key)
+}
+
 export const MESSAGE_TYPE_TEXT = 0
 export const MESSAGE_TYPE_GIFT = 1
 export const MESSAGE_TYPE_MEMBER = 2
@@ -133,7 +143,7 @@ export function getGiftShowContent(message, showGiftName) {
   if (!showGiftName) {
     return ''
   }
-  return `Sent ${message.giftName}x${message.num}`
+  return i18n.i18n.t('chat.sendGift', { giftName: message.giftName, num: message.num })
 }
 
 export function getShowAuthorName(message) {

frontend/src/i18n.js

@@ -3,16 +3,23 @@ import VueI18n from 'vue-i18n'
 
 import zh from '@/lang/zh'
 
+let lastSetLocale = 'zh'
 let loadedLocales = ['zh']
 
 Vue.use(VueI18n)
 
 export async function setLocale(locale) {
+  lastSetLocale = locale
   if (loadedLocales.indexOf(locale) === -1) {
     // eslint-disable-next-line prefer-template
     let langModule = await import('@/lang/' + locale)
     i18n.setLocaleMessage(locale, langModule.default)
     loadedLocales.push(locale)
+
+    // 加载完成之前又调用了setLocale，这次的不生效
+    if (locale !== lastSetLocale) {
+      return
+    }
   }
   window.localStorage.lang = i18n.locale = locale
 }

frontend/src/lang/en.js

@@ -129,5 +129,14 @@ export default {
     p3: '3. Generate styles with the style generator. Copy the CSS',
     p4: '4. Add browser source in OBS',
     p5: '5. Enter the previously copied room URL at URL, and enter the previously copied CSS at custom CSS'
+  },
+  chat: {
+    moderator: 'moderator',
+    guardLevel1: 'governor',
+    guardLevel2: 'admiral',
+    guardLevel3: 'captain',
+    sendGift: 'Sent {giftName}x{num}',
+    membershipTitle: 'New member',
+    tickerMembership: 'Member'
   }
 }

frontend/src/lang/ja.js

@@ -129,5 +129,14 @@ export default {
     p3: '3. スタイルジェネレータでお好みのコメント様子を選び、出力したCSSをコピーする',
     p4: '4. OBSでブラウザを新規作成する',
     p5: '5. プロパティでこぴーしたURLを入力し、カスタムCSSでスタイルジェネレータのCSSを入力する'
+  },
+  chat: {
+    moderator: 'モデレーター',
+    guardLevel1: '総督',
+    guardLevel2: '提督',
+    guardLevel3: '艦長',
+    sendGift: '{giftName}x{num} を贈りました',
+    membershipTitle: '新規メンバー',
+    tickerMembership: 'メンバー'
   }
 }

frontend/src/lang/zh.js

@@ -129,5 +129,14 @@ export default {
     p3: '3. 使用样式生成器生成样式，复制CSS',
     p4: '4. 在OBS中添加浏览器源',
     p5: '5. URL处输入之前复制的房间URL，自定义CSS处输入之前复制的CSS'
+  },
+  chat: {
+    moderator: '管理员',
+    guardLevel1: '总督',
+    guardLevel2: '提督',
+    guardLevel3: '舰长',
+    sendGift: '赠送 {giftName}x{num}',
+    membershipTitle: '新会员',
+    tickerMembership: '会员'
   }
 }

frontend/src/main.js

@@ -7,7 +7,7 @@ import {
 } from 'element-ui'
 import axios from 'axios'
 
-import { i18n } from './i18n'
+import * as i18n from './i18n'
 import App from './App'
 import Layout from './layout'
 import Home from './views/Home'
@@ -71,7 +71,12 @@ const router = new VueRouter({
         { path: 'help', name: 'help', component: Help }
       ]
     },
-    { path: '/room/test', name: 'test_room', component: Room, props: route => ({ strConfig: route.query }) },
+    {
+      path: '/room/test',
+      name: 'test_room',
+      component: Room,
+      props: route => ({ strConfig: route.query })
+    },
     {
       path: '/room/:roomId',
       name: 'room',
@@ -91,5 +96,5 @@ const router = new VueRouter({
 new Vue({
   render: h => h(App),
   router,
-  i18n
+  i18n: i18n.i18n
 }).$mount('#app')

frontend/src/views/Home.vue

@@ -202,8 +202,13 @@ export default {
       if (isTestRoom && this.form.roomId === '') {
         return ''
       }
-      let query = { ...this.form }
+
+      let query = {
+        ...this.form,
+        lang: this.$i18n.locale
+      }
       delete query.roomId
+
       let resolved
       if (isTestRoom) {
         resolved = this.$router.resolve({ name: 'test_room', query })

frontend/src/views/Room.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import * as i18n from '@/i18n'
 import { mergeConfig, toBool, toInt } from '@/utils'
 import * as pronunciation from '@/utils/pronunciation'
 import * as chatConfig from '@/api/chatConfig'
@@ -63,6 +64,11 @@ export default {
   },
   methods: {
     initConfig() {
+      let locale = this.strConfig.lang
+      if (locale) {
+        i18n.setLocale(locale)
+      }
+
       let cfg = {}
       // 留空的使用默认值
       for (let i in this.strConfig) {
@@ -170,7 +176,7 @@ export default {
         authorName: data.authorName,
         authorNamePronunciation: this.getPronunciation(data.authorName),
         privilegeType: data.privilegeType,
-        title: 'New member'
+        title: this.$t('chat.membershipTitle')
       }
       this.$refs.renderer.addMessage(message)
     },