diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
new file mode 100644
index 0000000..cc7c82f
--- /dev/null
+++ b/frontend/src/lang/en.js
@@ -0,0 +1,109 @@
+export default {
+  sidebar: {
+    home: 'Home',
+    stylegen: 'Style generator',
+    projectAddress: 'Project address'
+  },
+  home: {
+    roomIdEmpty: "Room ID can't be empty",
+    roomIdInteger: 'Room ID must be positive integer',
+
+    general: 'General',
+    roomId: 'Room ID',
+    showDanmaku: 'Show messages',
+    showGift: 'Show Super Chats',
+    mergeSimilarDanmaku: 'Merge similar messages',
+    minGiftPrice: 'Min price of Super Chats to show (CNY)',
+    maxSpeed: 'Max speed of messages (/second, 0 for unlimited)',
+
+    block: 'Block',
+    giftDanmaku: 'System messages (gift effect)',
+    blockLevel: 'User level lower than',
+    informalUser: 'Informal users',
+    unverifiedUser: 'Unverified users',
+    blockKeywords: 'Block keywords',
+    onePerLine: 'One per line',
+    blockUsers: 'Block users',
+    blockMedalLevel: 'Medal level lower than',
+
+    style: 'Style',
+
+    roomUrl: 'Room URL',
+    copy: 'Copy',
+    saveConfig: 'Save config',
+    enterRoom: 'Enter room',
+    exportConfig: 'Export config',
+    importConfig: 'Import config',
+
+    failedToSave: 'Failed to save: ',
+    successfullySaved: 'Successfully saved',
+    failedToParseConfig: 'Failed to parse config: '
+  },
+  stylegen: {
+    outlines: 'Outlines',
+    showOutlines: 'Show outlines',
+    outlineSize: 'Outline size',
+    outlineColor: 'Outline color',
+
+    avatars: 'Avatars',
+    showAvatars: 'Show avatars',
+    avatarSize: 'Avatar size',
+
+    userNames: 'User names',
+    font: 'Font',
+    fontSize: 'Font size',
+    lineHeight: 'Line height (0 for default)',
+    normalColor: 'Normal color',
+    ownerColor: 'Owner color',
+    moderatorColor: 'Moderator color',
+    memberColor: 'Member color',
+    showBadges: 'Show badges',
+    showColon: 'Show colon after name',
+
+    messages: 'Messages',
+    color: 'Color',
+    onNewLine: 'On new line',
+
+    time: 'Timestamps',
+    showTime: 'Show timestamps',
+
+    backgrounds: 'Backgrounds',
+    bgColor: 'Background color',
+    useBarsInsteadOfBg: 'Use bars instead of backgrounds',
+    messageBgColor: 'Message background color',
+    ownerMessageBgColor: 'Owner background color',
+    moderatorMessageBgColor: 'Moderator background color',
+    memberMessageBgColor: 'Member background color',
+
+    scAndNewMember: 'Super Chat / New member',
+    firstLineFont: 'First line font',
+    firstLineFontSize: 'First line font size',
+    firstLineLineHeight: 'First line line height (0 for default)',
+    firstLineColor: 'First line color',
+    secondLineFont: 'Second line font',
+    secondLineFontSize: 'Second line font size',
+    secondLineLineHeight: 'Second line line height (0 for default)',
+    secondLineColor: 'Second line color',
+    scContentLineFont: 'Super Chat content font',
+    scContentLineFontSize: 'Super Chat content font size',
+    scContentLineLineHeight: 'Super Chat content line height (0 for default)',
+    scContentLineColor: 'Super Chat content color',
+    showNewMemberBg: 'Show new member background',
+    showScTicker: 'Show Super Chat ticker',
+    showOtherThings: 'Show everything other than Super Chat ticker',
+
+    animation: 'Animation',
+    animateIn: 'Animate in',
+    fadeInTime: 'Fade in time (miliseconds)',
+    animateOut: 'Animate out (remove old messages)',
+    animateOutWaitTime: 'Wait time (seconds)',
+    fadeOutTime: 'Fade out time (miliseconds)',
+    slide: 'Slide',
+    reverseSlide: 'Reverse slide',
+    playAnimation: 'Play animation',
+
+    result: 'Result',
+    copy: 'Copy',
+    resetConfig: 'Reset config'
+  }
+}
diff --git a/frontend/src/lang/ja.js b/frontend/src/lang/ja.js
new file mode 100644
index 0000000..f123fa3
--- /dev/null
+++ b/frontend/src/lang/ja.js
@@ -0,0 +1,109 @@
+export default {
+  sidebar: {
+    home: 'トップページ',
+    stylegen: 'スタイルジェネレータ',
+    projectAddress: 'プロジェクトアドレス'
+  },
+  home: {
+    roomIdEmpty: 'ルームのIDを空白にすることはできません',
+    roomIdInteger: 'ルームは正の整数でなければなりません',
+
+    general: '常規',
+    roomId: 'ルームID',
+    showDanmaku: 'コメントを表示する',
+    showGift: 'スーパーチャットと新メンバーを表示する',
+    mergeSimilarDanmaku: '同じコメントを合併する',
+    minGiftPrice: '最低表示スーパーチャット価格（CNY）',
+    maxSpeed: 'コメントの最大速度（バー/秒、0は無制限）',
+
+    block: 'ブロック',
+    giftDanmaku: 'システムコメント（プレゼント効果）',
+    blockLevel: 'ユーザーレベルがx未満',
+    informalUser: '非公式ユーザー',
+    unverifiedUser: '認証されていないユーザー',
+    blockKeywords: 'キーワード',
+    onePerLine: '1行に1つずつ',
+    blockUsers: 'ユーザー',
+    blockMedalLevel: '勲章等級がx未満',
+
+    style: 'スタイル',
+
+    roomUrl: 'ルームのURL',
+    copy: 'コピー',
+    saveConfig: 'コンフィグを保存する',
+    enterRoom: 'ルームに入る',
+    exportConfig: 'コンフィグの導出',
+    importConfig: 'コンフィグの導入',
+
+    failedToSave: '保存に失敗しました：',
+    successfullySaved: '保存に成功しました',
+    failedToParseConfig: 'コンフィグ解析に失敗しました'
+  },
+  stylegen: {
+    outlines: 'アウトライン',
+    showOutlines: 'アウトラインを表示する',
+    outlineSize: 'アウトラインのサイズ',
+    outlineColor: 'アウトラインの色',
+
+    avatars: 'アイコン',
+    showAvatars: 'アイコンを表示する',
+    avatarSize: 'アイコンのサイズ',
+
+    userNames: 'ユーザー名',
+    font: 'フォント',
+    fontSize: 'フォントサイズ',
+    lineHeight: '行の高さ（0はデフォルト）',
+    normalColor: 'ノーマルの色',
+    ownerColor: 'オーナーの色',
+    moderatorColor: '管理者の色',
+    memberColor: 'メンバーの色',
+    showBadges: '勲章を見せる',
+    showColon: 'ユーザー名の後にコロンが表示されます',
+
+    messages: 'コメント',
+    color: '色',
+    onNewLine: '新しい行に表示する',
+
+    time: '時間',
+    showTime: '時間を表示する',
+
+    backgrounds: '背景',
+    bgColor: '背景色',
+    useBarsInsteadOfBg: '背景に代わります',
+    messageBgColor: 'コメント背景色',
+    ownerMessageBgColor: 'オーナーコメント背景色',
+    moderatorMessageBgColor: '管理者コメント背景色',
+    memberMessageBgColor: 'メンバーコメント背景色',
+
+    scAndNewMember: 'スーパーチャット、新メンバー',
+    firstLineFont: '1行目のフォント',
+    firstLineFontSize: '1行目のフォントサイズ',
+    firstLineLineHeight: '1行目の高さ（0はデフォルト）',
+    firstLineColor: '1行目の色',
+    secondLineFont: '2行目のフォント',
+    secondLineFontSize: '2行目のフォントサイズ',
+    secondLineLineHeight: '2行目の高さ（0はデフォルト）',
+    secondLineColor: '2行目の色',
+    scContentLineFont: 'スーパーチャットのコンテンツフォント',
+    scContentLineFontSize: 'スーパーチャットコンテンツフォントサイズ',
+    scContentLineLineHeight: 'スーパーチャットコンテンツライン高さ（0がデフォルト）',
+    scContentLineColor: 'スーパーチャットコンテンツライン色',
+    showNewMemberBg: '新メンバーの背景を表示する',
+    showScTicker: 'スーパーチャットチカーの表示',
+    showOtherThings: 'スーパーチャットチカー以外のコンテンツを表示します',
+
+    animation: 'アニメーション',
+    animateIn: '入場アニメーション',
+    fadeInTime: 'フェードイン時間（ミリ秒）',
+    animateOut: '古いコメントを除去する',
+    animateOutWaitTime: '待ち時間（秒）',
+    fadeOutTime: 'フェードアウト時間（ミリ秒）',
+    slide: '滑る',
+    reverseSlide: '逆の滑る',
+    playAnimation: 'アニメーションを再生する',
+
+    result: '結果',
+    copy: 'コピー',
+    resetConfig: 'デフォルトに戻す'
+  }
+}
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
new file mode 100644
index 0000000..d3d5a33
--- /dev/null
+++ b/frontend/src/lang/zh.js
@@ -0,0 +1,109 @@
+export default {
+  sidebar: {
+    home: '首页',
+    stylegen: '样式生成器',
+    projectAddress: '项目地址'
+  },
+  home: {
+    roomIdEmpty: '房间ID不能为空',
+    roomIdInteger: '房间ID必须为正整数',
+
+    general: '常规',
+    roomId: '房间ID',
+    showDanmaku: '显示弹幕',
+    showGift: '显示礼物和新舰长',
+    mergeSimilarDanmaku: '合并相似弹幕',
+    minGiftPrice: '最低显示礼物价格（元）',
+    maxSpeed: '弹幕最大速度（条/秒，0为无限制）',
+
+    block: '屏蔽',
+    giftDanmaku: '礼物弹幕',
+    blockLevel: '用户等级低于',
+    informalUser: '非正式会员',
+    unverifiedUser: '未绑定手机用户',
+    blockKeywords: '屏蔽关键词',
+    onePerLine: '一行一个',
+    blockUsers: '屏蔽用户',
+    blockMedalLevel: '当前直播间勋章等级低于',
+
+    style: '样式',
+
+    roomUrl: '房间URL',
+    copy: '复制',
+    saveConfig: '保存配置',
+    enterRoom: '进入房间',
+    exportConfig: '导出配置',
+    importConfig: '导入配置',
+
+    failedToSave: '保存失败：',
+    successfullySaved: '保存成功',
+    failedToParseConfig: '配置解析失败：'
+  },
+  stylegen: {
+    outlines: '描边',
+    showOutlines: '显示描边',
+    outlineSize: '描边尺寸',
+    outlineColor: '描边颜色',
+
+    avatars: '头像',
+    showAvatars: '显示头像',
+    avatarSize: '头像尺寸',
+
+    userNames: '用户名',
+    font: '字体',
+    fontSize: '字体尺寸',
+    lineHeight: '行高（0为默认）',
+    normalColor: '普通颜色',
+    ownerColor: '主播颜色',
+    moderatorColor: '房管颜色',
+    memberColor: '舰长颜色',
+    showBadges: '显示勋章',
+    showColon: '用户名后显示冒号',
+
+    messages: '消息',
+    color: '颜色',
+    onNewLine: '在新行显示',
+
+    time: '时间',
+    showTime: '显示时间',
+
+    backgrounds: '背景',
+    bgColor: '背景色',
+    useBarsInsteadOfBg: '用条代替背景',
+    messageBgColor: '消息背景色',
+    ownerMessageBgColor: '主播消息背景色',
+    moderatorMessageBgColor: '房管消息背景色',
+    memberMessageBgColor: '舰长消息背景色',
+
+    scAndNewMember: '礼物、舰长',
+    firstLineFont: '第一行字体',
+    firstLineFontSize: '第一行字体尺寸',
+    firstLineLineHeight: '第一行行高（0为默认）',
+    firstLineColor: '第一行颜色',
+    secondLineFont: '第二行字体',
+    secondLineFontSize: '第二行字体尺寸',
+    secondLineLineHeight: '第二行行高（0为默认）',
+    secondLineColor: '第二行颜色',
+    scContentLineFont: 'Super Chat内容字体',
+    scContentLineFontSize: 'Super Chat内容字体尺寸',
+    scContentLineLineHeight: 'Super Chat内容行高（0为默认）',
+    scContentLineColor: 'Super Chat内容颜色',
+    showNewMemberBg: '显示新舰长背景',
+    showScTicker: '显示Super Chat贴纸',
+    showOtherThings: '显示Super Chat贴纸之外的内容',
+
+    animation: '动画',
+    animateIn: '进入动画',
+    fadeInTime: '淡入时间（毫秒）',
+    animateOut: '移除旧消息',
+    animateOutWaitTime: '等待时间（秒）',
+    fadeOutTime: '淡出时间（毫秒）',
+    slide: '滑动',
+    reverseSlide: '反向滑动',
+    playAnimation: '播放动画',
+
+    result: '结果',
+    copy: '复制',
+    resetConfig: '恢复默认设置'
+  }
+}
diff --git a/frontend/src/layout/Sidebar.vue b/frontend/src/layout/Sidebar.vue
index c5eefd0..de61bb0 100644
--- a/frontend/src/layout/Sidebar.vue
+++ b/frontend/src/layout/Sidebar.vue
@@ -8,23 +8,41 @@
       :default-active="$route.path"
     >
       <el-menu-item index="/">
-        <i class="el-icon-s-home"></i>首页
+        <i class="el-icon-s-home"></i>{{$t('sidebar.home')}}
       </el-menu-item>
       <el-menu-item :index="$router.resolve({name: 'stylegen'}).href">
-        <i class="el-icon-brush"></i>样式生成器
+        <i class="el-icon-brush"></i>{{$t('sidebar.stylegen')}}
       </el-menu-item>
       <a href="https://github.com/xfgryujk/blivechat" target="_blank">
         <el-menu-item>
-          <i class="el-icon-share"></i>项目地址
+          <i class="el-icon-share"></i>{{$t('sidebar.projectAddress')}}
         </el-menu-item>
       </a>
+      <el-submenu index="null">
+        <template slot="title">
+          <i class="el-icon-chat-line-square"></i>Language
+        </template>
+        <el-menu-item v-for="{locale, name} in [
+            {locale: 'zh', name: '中文'},
+            {locale: 'ja', name: '日本語'},
+            {locale: 'en', name: 'English'}
+          ]" :key="locale"
+          :class="{'is-active': locale === $i18n.locale}"
+          @click="onSelectLanguage(locale)"
+        >{{name}}</el-menu-item>
+      </el-submenu>
     </el-menu>
   </el-scrollbar>
 </template>
 
 <script>
 export default {
-  name: 'Sidebar'
+  name: 'Sidebar',
+  methods: {
+    onSelectLanguage(locale) {
+      window.localStorage.lang = this.$i18n.locale = locale
+    }
+  }
 }
 </script>
 
diff --git a/frontend/src/main.js b/frontend/src/main.js
index a7473ea..c4b86f9 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import VueI18n from 'vue-i18n'
 import axios from 'axios'
 
 import App from './App.vue'
@@ -11,6 +12,10 @@ import StyleGenerator from './views/StyleGenerator'
 import Room from './views/Room.vue'
 import NotFound from './views/NotFound.vue'
 
+import zh from './lang/zh'
+import ja from './lang/ja'
+import en from './lang/en'
+
 if (process.env.NODE_ENV === 'development') {
   // 开发时使用localhost:80
   axios.defaults.baseURL = 'http://localhost'
@@ -18,6 +23,7 @@ if (process.env.NODE_ENV === 'development') {
 
 Vue.use(VueRouter)
 Vue.use(ElementUI)
+Vue.use(VueI18n)
 
 Vue.config.ignoredElements = [
   /^yt-/
@@ -39,7 +45,27 @@ const router = new VueRouter({
   ]
 })
 
+let locale = window.localStorage.lang
+if (!locale) {
+  let lang = navigator.language
+  if (lang.startsWith('zh')) {
+    locale = 'zh'
+  } else if (lang.startsWith('ja')) {
+    locale = 'ja'
+  } else {
+    locale = 'en'
+  }
+}
+const i18n = new VueI18n({
+  locale,
+  fallbackLocale: 'en',
+  messages: {
+    zh, ja, en
+  }
+})
+
 new Vue({
   render: h => h(App),
-  router
+  router,
+  i18n
 }).$mount('#app')
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index fa11db2..4dbe426 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,57 +1,57 @@
 <template>
   <el-form :model="form" ref="form" label-width="150px" :rules="{
     roomId: [
-      {required: true, message: '房间ID不能为空', trigger: 'blur'},
-      {type: 'integer', min: 1, message: '房间ID必须为正整数', trigger: 'blur'}
+      {required: true, message: $t('home.roomIdEmpty'), trigger: 'blur'},
+      {type: 'integer', min: 1, message: $t('home.roomIdInteger'), trigger: 'blur'}
     ]
   }">
     <el-tabs>
-      <el-tab-pane label="常规">
-        <el-form-item label="房间ID" required prop="roomId">
+      <el-tab-pane :label="$t('home.general')">
+        <el-form-item :label="$t('home.roomId')" required prop="roomId">
           <el-input v-model.number="form.roomId" type="number" min="1"></el-input>
         </el-form-item>
-        <el-form-item label="显示弹幕">
+        <el-form-item :label="$t('home.showDanmaku')">
           <el-switch v-model="form.showDanmaku"></el-switch>
         </el-form-item>
-        <el-form-item label="显示礼物和新舰长">
+        <el-form-item :label="$t('home.showGift')">
           <el-switch v-model="form.showGift"></el-switch>
         </el-form-item>
-        <el-form-item label="合并相似弹幕">
+        <el-form-item :label="$t('home.mergeSimilarDanmaku')">
           <el-switch v-model="form.mergeSimilarDanmaku"></el-switch>
         </el-form-item>
-        <el-form-item label="最低显示礼物价格（元）">
+        <el-form-item :label="$t('home.minGiftPrice')">
           <el-input v-model.number="form.minGiftPrice" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="弹幕最大速度（条/秒，0为无限制）">
+        <el-form-item :label="$t('home.maxSpeed')">
           <el-input v-model.number="form.maxSpeed" type="number" min="0"></el-input>
         </el-form-item>
       </el-tab-pane>
 
-      <el-tab-pane label="屏蔽">
-        <el-form-item label="礼物弹幕">
+      <el-tab-pane :label="$t('home.block')">
+        <el-form-item :label="$t('home.giftDanmaku')">
           <el-switch v-model="form.blockGiftDanmaku"></el-switch>
         </el-form-item>
-        <el-form-item label="用户等级低于">
+        <el-form-item :label="$t('home.blockLevel')">
           <el-slider v-model="form.blockLevel" show-input :min="0" :max="60"></el-slider>
         </el-form-item>
-        <el-form-item label="非正式会员">
+        <el-form-item :label="$t('home.informalUser')">
           <el-switch v-model="form.blockNewbie"></el-switch>
         </el-form-item>
-        <el-form-item label="未绑定手机用户">
+        <el-form-item :label="$t('home.unverifiedUser')">
           <el-switch v-model="form.blockNotMobileVerified"></el-switch>
         </el-form-item>
-        <el-form-item label="屏蔽关键词">
-          <el-input v-model="form.blockKeywords" type="textarea" :rows="5" placeholder="一行一个"></el-input>
+        <el-form-item :label="$t('home.blockKeywords')">
+          <el-input v-model="form.blockKeywords" type="textarea" :rows="5" :placeholder="$t('home.onePerLine')"></el-input>
         </el-form-item>
-        <el-form-item label="屏蔽用户">
-          <el-input v-model="form.blockUsers" type="textarea" :rows="5" placeholder="一行一个"></el-input>
+        <el-form-item :label="$t('home.blockUsers')">
+          <el-input v-model="form.blockUsers" type="textarea" :rows="5" :placeholder="$t('home.onePerLine')"></el-input>
         </el-form-item>
-        <el-form-item label="当前直播间勋章等级低于">
+        <el-form-item :label="$t('home.blockMedalLevel')">
           <el-slider v-model="form.blockMedalLevel" show-input :min="0" :max="20"></el-slider>
         </el-form-item>
       </el-tab-pane>
 
-      <el-tab-pane label="样式">
+      <el-tab-pane :label="$t('home.style')">
         <el-form-item label="CSS">
           <el-input v-model="form.css" type="textarea" :rows="20"></el-input>
         </el-form-item>
@@ -59,15 +59,15 @@
     </el-tabs>
     
     <el-divider></el-divider>
-    <el-form-item label="房间URL" v-show="roomUrl">
+    <el-form-item :label="$t('home.roomUrl')" v-show="roomUrl">
       <el-input ref="roomUrlInput" readonly :value="roomUrl" style="width: calc(100% - 6em); margin-right: 1em;"></el-input>
-      <el-button type="primary" @click="copyUrl">复制</el-button>
+      <el-button type="primary" @click="copyUrl">{{$t('home.copy')}}</el-button>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="saveConfig">保存配置</el-button>
-      <el-button type="primary" :disabled="!roomUrl" @click="enterRoom">进入房间</el-button>
-      <el-button type="primary" @click="exportConfig">导出配置</el-button>
-      <el-button type="primary" @click="importConfig">导入配置</el-button>
+      <el-button type="primary" @click="saveConfig">{{$t('home.saveConfig')}}</el-button>
+      <el-button type="primary" :disabled="!roomUrl" @click="enterRoom">{{$t('home.enterRoom')}}</el-button>
+      <el-button type="primary" @click="exportConfig">{{$t('home.exportConfig')}}</el-button>
+      <el-button type="primary" @click="importConfig">{{$t('home.importConfig')}}</el-button>
     </el-form-item>
   </el-form>
 </template>
@@ -109,10 +109,10 @@ export default {
             window.localStorage.configId = (await config.createRemoteConfig(this.form)).id
           }
         } catch (e) {
-          this.$message.error('保存失败：' + e)
+          this.$message.error(this.$t('home.failedToSave') + e)
           return
         }
-        this.$message({message: '保存成功', type: 'success'})
+        this.$message({message: this.$t('home.successfullySaved'), type: 'success'})
 
         let resolved = this.$router.resolve({name: 'room', params: {roomId: this.form.roomId},
           query: {config_id: window.localStorage.configId}})
@@ -141,7 +141,7 @@ export default {
           try {
             cfg = JSON.parse(reader.result)
           } catch (e) {
-            this.$message.error('配置解析失败：' + e)
+            this.$message.error(this.$t('home.failedToParseConfig') + e)
             return
           }
           cfg = mergeConfig(cfg, config.DEFAULT_CONFIG)
diff --git a/frontend/src/views/StyleGenerator/index.vue b/frontend/src/views/StyleGenerator/index.vue
index ea07a52..cde2846 100644
--- a/frontend/src/views/StyleGenerator/index.vue
+++ b/frontend/src/views/StyleGenerator/index.vue
@@ -2,188 +2,188 @@
   <el-row :gutter="20">
     <el-col :span="12">
       <el-form label-width="150px" size="mini">
-        <h3>描边</h3>
-        <el-form-item label="显示描边">
+        <h3>{{$t('stylegen.outlines')}}</h3>
+        <el-form-item :label="$t('stylegen.showOutlines')">
           <el-switch v-model="form.showOutlines"></el-switch>
         </el-form-item>
-        <el-form-item label="描边尺寸">
+        <el-form-item :label="$t('stylegen.outlineSize')">
           <el-input v-model.number="form.outlineSize" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="描边颜色">
+        <el-form-item :label="$t('stylegen.outlineColor')">
           <el-color-picker v-model="form.outlineColor"></el-color-picker>
         </el-form-item>
 
-        <h3>头像</h3>
-        <el-form-item label="显示头像">
+        <h3>{{$t('stylegen.avatars')}}</h3>
+        <el-form-item :label="$t('stylegen.showAvatars')">
           <el-switch v-model="form.showAvatars"></el-switch>
         </el-form-item>
-        <el-form-item label="头像尺寸">
+        <el-form-item :label="$t('stylegen.avatarSize')">
           <el-input v-model.number="form.avatarSize" type="number" min="0"></el-input>
         </el-form-item>
 
-        <h3>用户名</h3>
-        <el-form-item label="字体">
+        <h3>{{$t('stylegen.userNames')}}</h3>
+        <el-form-item :label="$t('stylegen.font')">
           <el-autocomplete v-model="form.userNameFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
         </el-form-item>
-        <el-form-item label="字体尺寸">
+        <el-form-item :label="$t('stylegen.fontSize')">
           <el-input v-model.number="form.userNameFontSize" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="行高（0为默认）">
+        <el-form-item :label="$t('stylegen.lineHeight')">
           <el-input v-model.number="form.userNameLineHeight" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="普通颜色">
+        <el-form-item :label="$t('stylegen.normalColor')">
           <el-color-picker v-model="form.userNameColor"></el-color-picker>
         </el-form-item>
-        <el-form-item label="主播颜色">
+        <el-form-item :label="$t('stylegen.ownerColor')">
           <el-color-picker v-model="form.ownerUserNameColor"></el-color-picker>
         </el-form-item>
-        <el-form-item label="房管颜色">
+        <el-form-item :label="$t('stylegen.moderatorColor')">
           <el-color-picker v-model="form.moderatorUserNameColor"></el-color-picker>
         </el-form-item>
-        <el-form-item label="舰长颜色">
+        <el-form-item :label="$t('stylegen.memberColor')">
           <el-color-picker v-model="form.memberUserNameColor"></el-color-picker>
         </el-form-item>
-        <el-form-item label="显示勋章">
+        <el-form-item :label="$t('stylegen.showBadges')">
           <el-switch v-model="form.showBadges"></el-switch>
         </el-form-item>
-        <el-form-item label="用户名后显示冒号">
+        <el-form-item :label="$t('stylegen.showColon')">
           <el-switch v-model="form.showColon"></el-switch>
         </el-form-item>
 
-        <h3>消息</h3>
-        <el-form-item label="字体">
+        <h3>{{$t('stylegen.messages')}}</h3>
+        <el-form-item :label="$t('stylegen.font')">
           <el-autocomplete v-model="form.messageFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
         </el-form-item>
-        <el-form-item label="字体尺寸">
+        <el-form-item :label="$t('stylegen.fontSize')">
           <el-input v-model.number="form.messageFontSize" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="行高（0为默认）">
+        <el-form-item :label="$t('stylegen.lineHeight')">
           <el-input v-model.number="form.messageLineHeight" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="颜色">
+        <el-form-item :label="$t('stylegen.color')">
           <el-color-picker v-model="form.messageColor"></el-color-picker>
         </el-form-item>
-        <el-form-item label="在新行显示">
+        <el-form-item :label="$t('stylegen.onNewLine')">
           <el-switch v-model="form.messageOnNewLine"></el-switch>
         </el-form-item>
 
-        <h3>时间</h3>
-        <el-form-item label="显示时间">
+        <h3>{{$t('stylegen.time')}}</h3>
+        <el-form-item :label="$t('stylegen.showTime')">
           <el-switch v-model="form.showTime"></el-switch>
         </el-form-item>
-        <el-form-item label="字体">
+        <el-form-item :label="$t('stylegen.font')">
           <el-autocomplete v-model="form.timeFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
         </el-form-item>
-        <el-form-item label="字体尺寸">
+        <el-form-item :label="$t('stylegen.fontSize')">
           <el-input v-model.number="form.timeFontSize" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="行高（0为默认）">
+        <el-form-item :label="$t('stylegen.lineHeight')">
           <el-input v-model.number="form.timeLineHeight" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="颜色">
+        <el-form-item :label="$t('stylegen.color')">
           <el-color-picker v-model="form.timeColor"></el-color-picker>
         </el-form-item>
 
-        <h3>背景</h3>
-        <el-form-item label="背景色">
+        <h3>{{$t('stylegen.backgrounds')}}</h3>
+        <el-form-item :label="$t('stylegen.bgColor')">
           <el-color-picker v-model="form.bgColor" show-alpha></el-color-picker>
         </el-form-item>
-        <el-form-item label="用条代替背景">
+        <el-form-item :label="$t('stylegen.useBarsInsteadOfBg')">
           <el-switch v-model="form.useBarsInsteadOfBg"></el-switch>
         </el-form-item>
-        <el-form-item label="消息背景色">
+        <el-form-item :label="$t('stylegen.messageBgColor')">
           <el-color-picker v-model="form.messageBgColor" show-alpha></el-color-picker>
         </el-form-item>
-        <el-form-item label="主播消息背景色">
+        <el-form-item :label="$t('stylegen.ownerMessageBgColor')">
           <el-color-picker v-model="form.ownerMessageBgColor" show-alpha></el-color-picker>
         </el-form-item>
-        <el-form-item label="房管消息背景色">
+        <el-form-item :label="$t('stylegen.moderatorMessageBgColor')">
           <el-color-picker v-model="form.moderatorMessageBgColor" show-alpha></el-color-picker>
         </el-form-item>
-        <el-form-item label="舰长消息背景色">
+        <el-form-item :label="$t('stylegen.memberMessageBgColor')">
           <el-color-picker v-model="form.memberMessageBgColor" show-alpha></el-color-picker>
         </el-form-item>
 
-        <h3>礼物、舰长</h3>
-        <el-form-item label="第一行字体">
+        <h3>{{$t('stylegen.scAndNewMember')}}</h3>
+        <el-form-item :label="$t('stylegen.firstLineFont')">
           <el-autocomplete v-model="form.firstLineFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
         </el-form-item>
-        <el-form-item label="第一行字体尺寸">
+        <el-form-item :label="$t('stylegen.firstLineFontSize')">
           <el-input v-model.number="form.firstLineFontSize" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="第一行行高（0为默认）">
+        <el-form-item :label="$t('stylegen.firstLineLineHeight')">
           <el-input v-model.number="form.firstLineLineHeight" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="第一行颜色">
+        <el-form-item :label="$t('stylegen.firstLineColor')">
           <el-color-picker v-model="form.firstLineColor"></el-color-picker>
         </el-form-item>
-        <el-form-item label="第二行字体">
+        <el-form-item :label="$t('stylegen.secondLineFont')">
           <el-autocomplete v-model="form.secondLineFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
         </el-form-item>
-        <el-form-item label="第二行字体尺寸">
+        <el-form-item :label="$t('stylegen.secondLineFontSize')">
           <el-input v-model.number="form.secondLineFontSize" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="第二行行高（0为默认）">
+        <el-form-item :label="$t('stylegen.secondLineLineHeight')">
           <el-input v-model.number="form.secondLineLineHeight" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="第二行颜色">
+        <el-form-item :label="$t('stylegen.secondLineColor')">
           <el-color-picker v-model="form.secondLineColor"></el-color-picker>
         </el-form-item>
-        <el-form-item label="SuperChat内容字体">
+        <el-form-item :label="$t('stylegen.scContentLineFont')">
           <el-autocomplete v-model="form.scContentFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
         </el-form-item>
-        <el-form-item label="SuperChat内容字体尺寸">
+        <el-form-item :label="$t('stylegen.scContentLineFontSize')">
           <el-input v-model.number="form.scContentFontSize" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="SuperChat内容行高（0为默认）">
+        <el-form-item :label="$t('stylegen.scContentLineLineHeight')">
           <el-input v-model.number="form.scContentLineHeight" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="SuperChat内容颜色">
+        <el-form-item :label="$t('stylegen.scContentLineColor')">
           <el-color-picker v-model="form.scContentColor"></el-color-picker>
         </el-form-item>
-        <el-form-item label="显示新舰长背景">
+        <el-form-item :label="$t('stylegen.showNewMemberBg')">
           <el-switch v-model="form.showNewMemberBg"></el-switch>
         </el-form-item>
-        <el-form-item label="显示SuperChat贴纸">
+        <el-form-item :label="$t('stylegen.showScTicker')">
           <el-switch v-model="form.showScTicker"></el-switch>
         </el-form-item>
-        <el-form-item label="显示SuperChat贴纸之外的内容">
+        <el-form-item :label="$t('stylegen.showOtherThings')">
           <el-switch v-model="form.showOtherThings"></el-switch>
         </el-form-item>
 
-        <h3>动画</h3>
-        <el-form-item label="进入动画">
+        <h3>{{$t('stylegen.animation')}}</h3>
+        <el-form-item :label="$t('stylegen.animateIn')">
           <el-switch v-model="form.animateIn"></el-switch>
         </el-form-item>
-        <el-form-item label="淡入时间（毫秒）">
+        <el-form-item :label="$t('stylegen.fadeInTime')">
           <el-input v-model.number="form.fadeInTime" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="移除旧消息">
+        <el-form-item :label="$t('stylegen.animateOut')">
           <el-switch v-model="form.animateOut"></el-switch>
         </el-form-item>
-        <el-form-item label="等待时间（秒）">
+        <el-form-item :label="$t('stylegen.animateOutWaitTime')">
           <el-input v-model.number="form.animateOutWaitTime" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="淡出时间（毫秒）">
+        <el-form-item :label="$t('stylegen.fadeOutTime')">
           <el-input v-model.number="form.fadeOutTime" type="number" min="0"></el-input>
         </el-form-item>
-        <el-form-item label="滑动">
+        <el-form-item :label="$t('stylegen.slide')">
           <el-switch v-model="form.slide"></el-switch>
         </el-form-item>
-        <el-form-item label="反向滑动">
+        <el-form-item :label="$t('stylegen.reverseSlide')">
           <el-switch v-model="form.reverseSlide"></el-switch>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="playAnimation">播放动画</el-button>
+          <el-button type="primary" @click="playAnimation">{{$t('stylegen.playAnimation')}}</el-button>
         </el-form-item>
 
-        <h3>结果</h3>
+        <h3>{{$t('stylegen.result')}}</h3>
         <el-form-item label="CSS">
           <el-input v-model="result" ref="result" type="textarea" :rows="20"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="copyResult">复制</el-button>
-          <el-button @click="resetConfig">恢复默认设置</el-button>
+          <el-button type="primary" @click="copyResult">{{$t('stylegen.copy')}}</el-button>
+          <el-button @click="resetConfig">{{$t('stylegen.resetConfig')}}</el-button>
         </el-form-item>
       </el-form>
     </el-col>