feat: i18n

package.json

@@ -12,6 +12,7 @@
     "axios": "^0.19.1",
     "core-js": "^3.4.4",
     "vue": "^2.6.10",
+    "vue-i18n": "^8.16.0",
     "vue-router": "^3.1.3",
     "vuetify": "^2.2.3",
     "vuetify-loader": "^1.4.3"

src/App.vue

@@ -4,11 +4,27 @@
             <v-app-bar app clipped-left color="transparent" v-if="this.$route.name !== 'Login'">
                 <v-toolbar-title>{{ base.Title }}</v-toolbar-title>
                 <v-toolbar-items class="ml-5">
-                    <v-btn text to="/">靶机状态</v-btn>
-                    <v-btn text to="/rank">排名</v-btn>
-                    <v-btn text to="/bulletin">公告</v-btn>
-                    <v-btn text @click="onLogout">登出</v-btn>
+                    <v-btn text to="/">{{$t('header.status')}}</v-btn>
+                    <v-btn text to="/rank">{{$t('header.rank')}}</v-btn>
+                    <v-btn text to="/bulletin">{{$t('header.bulletin')}}</v-btn>
+                    <v-btn text @click="onLogout">{{$t('header.logout')}}</v-btn>
+
                 </v-toolbar-items>
+                <v-spacer></v-spacer>
+                <!-- switch language -->
+                <v-menu bottom left>
+                    <template v-slot:activator="{ on }">
+                        <v-btn icon v-on="on">
+                            <v-icon>mdi-translate</v-icon>
+                        </v-btn>
+                    </template>
+                    <v-list>
+                        <v-list-item v-for="(lang, index) in $i18n.availableLocales"
+                                     v-bind:key="index"
+                                     @click="$i18n.locale = lang"
+                        >{{lang}}</v-list-item>
+                    </v-list>
+                </v-menu>
             </v-app-bar>
 
             <v-content>

src/assets/languages/en-US.json

@@ -0,0 +1,44 @@
+{
+  "general": {
+    "score": "",
+    "close": "Close",
+    "minute": "Minute",
+    "second": "Second"
+  },
+  "login": {
+    "title": "Login",
+    "account": "Account",
+    "password": "Password",
+    "login": "Login",
+    "reset": "Reset",
+    "loading": "Loading...",
+    "account_empty": "Please input your account",
+    "password_empty": "Please input your password"
+  },
+  "gamebox": {
+    "empty": "No Challenge for Now"
+  },
+  "flag": {
+    "submit": "Submit Flag"
+  },
+  "timer": {
+    "not_begin": "The Game is not ready",
+    "pause": "The Game is pause",
+    "end": "The Game is over",
+    "til_round_end": "To Round {round}:"
+  },
+  "bulletin": {
+    "empty": "No Bulletin"
+  },
+  "rank": {
+    "rank": "#",
+    "team": "Team",
+    "score": "Score"
+  },
+  "header": {
+    "status": "Gamebox Status",
+    "rank": "Rank",
+    "bulletin": "Bulletin",
+    "logout": "Logout"
+  }
+}

src/assets/languages/zh-CN.json

@@ -0,0 +1,44 @@
+{
+  "general": {
+    "score": "分",
+    "close": "关闭",
+    "minute": "分",
+    "second": "秒"
+  },
+  "login": {
+    "title": "登录",
+    "account": "账号",
+    "password": "密码",
+    "login": "登录",
+    "reset": "重置",
+    "loading": "登录中...",
+    "account_empty": "请输入账号",
+    "password_empty": "请输入密码"
+  },
+  "gamebox": {
+    "empty": "暂时还没有题目哟~"
+  },
+  "flag": {
+    "submit": "提交 Flag"
+  },
+  "timer": {
+    "not_begin": "比赛未开始",
+    "pause": "比赛已暂停",
+    "end": "比赛已结束",
+    "til_round_end": "距离第 {round} 轮结束还有"
+  },
+  "bulletin": {
+    "empty": "暂无公告"
+  },
+  "rank": {
+    "rank": "排名",
+    "team": "队伍",
+    "score": "分数"
+  },
+  "header": {
+    "status": "靶机状态",
+    "rank": "排名",
+    "bulletin": "公告",
+    "logout": "登出"
+  }
+}

src/components/GameBox.vue

@@ -7,7 +7,7 @@
                 <v-list-item-content>
                     <v-list-item-title v-text="gameBox.Title"/>
                     <v-list-item-subtitle>{{gameBox.IP}}:{{gameBox.Port}}</v-list-item-subtitle>
-                    <v-list-item-subtitle>{{utils.FormatFloat(gameBox.Score)}} 分</v-list-item-subtitle>
+                    <v-list-item-subtitle>{{utils.FormatFloat(gameBox.Score)}} {{$t('general.score')}}</v-list-item-subtitle>
                 </v-list-item-content>
 
                 <v-list-item-action>
@@ -24,7 +24,7 @@
             </v-list-item>
         </div>
         <v-list-item v-if="gameBoxes === null || gameBoxes.length === 0">
-            <p>暂时还没有题目哟~</p>
+            <p>{{$t('gamebox.empty')}}</p>
         </v-list-item>
 
         <!-- 靶机详细信息 -->
@@ -41,7 +41,7 @@
                 <v-divider/>
                 <v-card-actions>
                     <v-spacer/>
-                    <v-btn color="primary" text @click="showDetail = false">关闭</v-btn>
+                    <v-btn color="primary" text @click="showDetail = false">{{$t('general.close')}}</v-btn>
                 </v-card-actions>
             </v-card>
         </v-dialog>

src/components/Info.vue

@@ -18,7 +18,7 @@
         <v-divider/>
         <v-card-actions>
             <v-list-item>
-                #{{ info.Rank }} / {{ utils.FormatFloat(info.Score) }} 分
+                #{{ info.Rank }} / {{ utils.FormatFloat(info.Score) }} {{$t('general.score')}}
             </v-list-item>
             <v-btn text/>
         </v-card-actions>

src/components/SubmitFlag.vue

@@ -1,6 +1,6 @@
 <template>
     <v-card class="mx-auto" v-if="info !== null">
-        <v-card-title>提交 Flag</v-card-title>
+        <v-card-title>{{$t('flag.submit')}}</v-card-title>
         <v-card-text>
             <h2>POST <code style="background-color: #1c1c1c">/flag</code></h2><br>
             <p>Content-Type: application/json</p>

src/components/Timer.vue

@@ -1,24 +1,24 @@
 <template>
     <v-card-text class="text-center" v-if="time !== null">
         <div v-if="time.Status === 'on'">
-            <div>距离第 {{time.NowRound}} 轮结束还有</div>
+            <div>{{$t('timer.til_round_end',{round: time.NowRound})}}</div>
             <p class="display-1 text--primary">
-                {{minute}} 分 {{second}} 秒
+                {{minute}} {{$t('general.minute')}} {{second}} {{$t('general.second')}}
             </p>
         </div>
         <div v-else-if="time.Status === 'wait'">
             <p class="display-1 text--primary">
-                比赛未开始
+                {{$t('timer.not_begin')}}
             </p>
         </div>
         <div v-else-if="time.Status === 'pause'">
             <p class="display-1 text--primary">
-                比赛已暂停
+                {{$t('timer.pause')}}
             </p>
         </div>
         <div v-else-if="time.Status === 'end'">
             <p class="display-1 text--primary">
-                比赛已结束
+                {{$t('timer.end')}}
             </p>
         </div>
     </v-card-text>

src/main.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import VueI18n from 'vue-i18n'
 import App from './App.vue'
 import router from './router'
 import vuetify from '@/plugins/vuetify'
@@ -7,8 +8,19 @@ import utils from './utils'
 Vue.config.productionTip = false
 Vue.prototype.utils = utils
 
+Vue.use(VueI18n)
+
+const i18n = new VueI18n({
+    locale: 'zh-CN',
+    messages: {
+        'zh-CN': require('@/assets/languages/zh-CN.json'),
+        'en-US': require('@/assets/languages/en-US.json')
+    }
+});
+
 new Vue({
-  render: h => h(App),
-  router: router,
-  vuetify,
+    render: h => h(App),
+    router: router,
+    i18n,
+    vuetify,
 }).$mount('#app')

src/views/Bulletin.vue

@@ -3,7 +3,7 @@
         <v-container>
             <div>
                 <h2 v-if="bulletinList !== null && bulletinList.length === 0" class="text-center font-weight-thin mt-5">
-                    暂无公告
+                    {{$t('bulletin.empty')}}
                 </h2>
                 <v-timeline align-top dense v-else>
                     <v-timeline-item v-for="(item, index) in bulletinList" :key="index" color="dark" icon="mdi-bullhorn" fill-dot>

src/views/Login.vue

@@ -7,20 +7,20 @@
         </v-row>
         <br>
         <v-card class="mx-auto" max-width="400">
-            <v-card-title>登录</v-card-title>
+            <v-card-title>{{$t('login.title')}}</v-card-title>
             <v-card-text>
                 <v-form ref="form">
                     <v-text-field
                             v-model="inputForm.Name"
                             :rules="nameRules"
-                            label="账号"
+                            :label="$t('login.account')"
                             required
                             autocomplete="off"
                     />
                     <v-text-field
                             v-model="inputForm.Password"
                             :rules="passwordRules"
-                            label="密码"
+                            :label="$t('login.password')"
                             type="password"
                             required
                             autocomplete="off"
@@ -29,8 +29,8 @@
             </v-card-text>
 
             <v-card-actions>
-                <v-btn text color="primary" @click="onLogin">登录</v-btn>
-                <v-btn text @click="onReset">重置</v-btn>
+                <v-btn text color="primary" @click="onLogin">{{$t('login.login')}}</v-btn>
+                <v-btn text @click="onReset">{{$t('login.reset')}}</v-btn>
             </v-card-actions>
         </v-card>
         <div class="mt-8 text-center">Copyright © 2020 Cardinal</div>
@@ -39,7 +39,7 @@
         <v-dialog v-model="isLoading" hide-overlay persistent width="300">
             <v-card dark>
                 <v-card-text>
-                    <p>登录中.....</p>
+                    <p>{{$t('login.loading')}}</p>
                     <v-progress-linear indeterminate color="white" class="mb-0"/>
                 </v-card-text>
             </v-card>
@@ -60,10 +60,10 @@
                 message: '',
 
                 nameRules: [
-                    v => !!v || '请输入账号'
+                    v => !!v || this.$i18n.t('login.account_empty')
                 ],
                 passwordRules: [
-                    v => !!v || '请输入密码'
+                    v => !!v || this.$i18n.t('login.password_empty')
                 ],
                 inputForm: {
                     Name: '',
@@ -74,7 +74,7 @@
 
         methods: {
             onLogin() {
-                if(!this.$refs.form.validate()){
+                if (!this.$refs.form.validate()) {
                     return
                 }
                 this.utils.POST("/login", this.inputForm, false).then(res => {

src/views/Rank.vue

@@ -3,9 +3,9 @@
         <v-simple-table dark v-if="rankList !== null">
             <thead>
             <tr>
-                <th class="text-center">排名</th>
-                <th class="text-center">队伍</th>
-                <th class="text-center">分数</th>
+                <th class="text-center">{{$t('rank.rank')}}</th>
+                <th class="text-center">{{$t('rank.team')}}</th>
+                <th class="text-center">{{$t('rank.score')}}</th>
                 <th class="text-center" v-bind:key="index" v-for="(header,index) in this.rankHeader">
                     {{header}}
                 </th>

yarn.lock

@@ -7923,6 +7923,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz?cache=0&sync_timestamp=1568190386192&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-hot-reload-api%2Fdownload%2Fvue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=
 
+vue-i18n@^8.16.0:
+  version "8.16.0"
+  resolved "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.16.0.tgz#f84188a36a4cc3c876427b869c7c5a82d6696080"
+  integrity sha512-cp9JOsx4ETzlCsnD22FE8ZhAmD8kcyNLRKV0DPsS7bBNTCdIlOKuyTGonWKYcGCUtNMtwemDWRBevRm8eevBVg==
+
 vue-loader@^15.7.2:
   version "15.8.3"
   resolved "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.8.3.tgz#857cb9e30eb5fc25e66db48dce7e4f768602a23c"