Merge pull request eee555#36 from putianyi889/debug-3

实装本地化

front_end/package.json

@@ -28,7 +28,7 @@
     "ms-toollib": "1.4.6-alpha",
     "pinia": "^2.1.7",
     "uuid": "^9.0.0",
-    "vue": "^3.2.13",
+    "vue": "^3.4.0",
     "vue-echarts": "^6.7.1",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.0.3",

front_end/src/App.vue

@@ -9,23 +9,24 @@
             </div>
         </el-menu-item>
         <el-menu-item index="/ranking">
-            <div class="header">排行榜</div>
+            <div class="header">{{ $t('menu.ranking') }}</div>
         </el-menu-item>
         <el-menu-item index="/video">
-            <div class="header">录像</div>
+            <div class="header">{{ $t('menu.video') }}</div>
         </el-menu-item>
         <el-menu-item index="/world">
-            <div class="header">统计</div>
+            <div class="header">{{ $t('menu.world') }}</div>
         </el-menu-item>
         <el-menu-item index="/guide">
-            <div class="header">教程</div>
+            <div class="header">{{ $t('menu.guide') }}</div>
         </el-menu-item>
         <el-menu-item index="/score">
-            <div class="header">积分</div>
+            <div class="header">{{ $t('menu.score') }}</div>
         </el-menu-item>
         <el-menu-item :index="player_url" :disabled="store.user.id == 0" @click="store.player = store.user;">
-            <div class="header">我的地盘</div>
+            <div class="header">{{ $t('menu.profile') }}</div>
         </el-menu-item>
+        <LanguagePicker/>
         <div
             style="margin-left: auto;margin-right: 16px;display: inline-flex;justify-content: center;align-items: center;">
             <Menu @login="user_login" @logout="user_logout"></Menu>
@@ -69,11 +70,15 @@
 <script setup lang='ts'>
 import { ref, reactive, onMounted, computed } from 'vue'
 import Menu from "./components/Menu.vue";
+import LanguagePicker from './components/LanguagePicker.vue';
 // import { LoginStatus } from "@/utils/common/structInterface"
 import useCurrentInstance from "@/utils/common/useCurrentInstance";
 import { useUserStore } from './store'
 const store = useUserStore()
 
+import { useI18n } from 'vue-i18n';
+const t = useI18n();
+
 const { proxy } = useCurrentInstance();
 const logo_1 = ref(require('@/assets/logo.png'))
 const logo_2 = ref(require('@/assets/logo2.png'))

front_end/src/components/LanguagePicker.vue

@@ -0,0 +1,20 @@
+<template>
+    <el-select v-model="i18n.global.locale.value" style="width: 100px">
+        <el-option v-for="item in options" :key="item.lang" :label="item.text" :value="item.lang" />
+    </el-select>
+</template>
+
+<script lang="ts" setup name="LanguagePicker">
+
+import i18n from '@/i18n';
+import { useI18n } from 'vue-i18n';
+const t = useI18n();
+
+const options = [
+    { lang: 'dev', text: 'dev' },
+    { lang: 'zh-cn', text: '简体中文' },
+    { lang: 'de', text: 'name'},
+    { lang: 'en', text: 'English'}
+]
+
+</script>

front_end/src/components/Login.vue

@@ -2,90 +2,90 @@
     <div>
         <span class="text-button" v-show="store.login_status != LoginStatus.IsLogin"
             @click="init_refvalues(); store.login_status = LoginStatus.Login; login_visible = true; register_visible = false">
-            登录
+            {{ $t('menu.login') }}
         </span>
         <div style="display:inline-block" v-show="store.login_status == LoginStatus.IsLogin">
-            欢迎您，{{ user_name_show }}！
+            {{ $t('menu.welcome', [user_name_show]) }}
         </div>
         <span style="width:12px; display:inline-block">
         </span>|<span style="width:12px; display:inline-block">
         </span>
         <span class="text-button" v-show="store.login_status != LoginStatus.IsLogin"
             @click="init_refvalues(); store.login_status = LoginStatus.Register; register_visible = true; login_visible = false">
-            注册
+            {{ $t('menu.register') }}
         </span>
         <span class="text-button" v-show="store.login_status == LoginStatus.IsLogin" @click="logout();">
-            退出
+            {{ $t('menu.logout') }}
         </span>
     </div>
-    <el-dialog v-model="login_visible" title="欢迎登录" width="30%" align-center draggable :lock-scroll="false"
+    <el-dialog v-model="login_visible" :title="$t('login.title')" width="30%" align-center draggable :lock-scroll="false"
         @close='() => { if (store.login_status !== LoginStatus.IsLogin) { store.login_status = LoginStatus.NotLogin; } }'>
         <el-form size="default">
             <el-form-item>
-                <el-input v-model="user_name" placeholder="用户名" prefix-icon="User" maxlength="20"></el-input>
+                <el-input v-model="user_name" :placeholder="$t('login.username')" prefix-icon="User" maxlength="20"></el-input>
             </el-form-item>
             <el-form-item>
-                <el-input v-model="user_password" placeholder="密码" maxlength="20" show-password
+                <el-input v-model="user_password" :placeholder="$t('login.password')" maxlength="20" show-password
                     prefix-icon="Lock"></el-input>
             </el-form-item>
             <el-form-item>
                 <div style="display: flex;">
-                    <el-input v-model.trim="valid_code" placeholder="验证码" prefix-icon="Key" class="code"></el-input>
+                    <el-input v-model.trim="valid_code" :placeholder="$t('login.captcha')" prefix-icon="Key" class="code"></el-input>
                     &nbsp;
                     <ValidCode ref="refValidCode" :identifyCode="identifyCodeLog" />
                 </div>
             </el-form-item>
             <el-form-item>
-                <el-checkbox label="记住我" class="rememberMe" v-model="remember_me"></el-checkbox>
+                <el-checkbox :label="$t('login.keepMeLoggedIn')" class="rememberMe" v-model="remember_me"></el-checkbox>
             </el-form-item>
             <el-form-item>
                 <div style="color: red;">{{ hint_message }}</div>
             </el-form-item>
             <el-form-item>
                 <el-button :disabled="(user_name && user_password && valid_code).length == 0" type="primary"
-                    @click="login();">登录</el-button>
+                    @click="login();">{{ $t('login.confirm') }}</el-button>
             </el-form-item>
             <div @click="login_visible = false; retrieve_visible = true; store.login_status = LoginStatus.IsRetrieve;"
-                style="cursor: pointer;color: blue;">（找回密码）</div>
+                style="cursor: pointer;color: blue;">{{ $t('login.forgetPassword') }}</div>
         </el-form>
     </el-dialog>
-    <el-dialog v-model="register_visible" title="用户注册" width="30%" align-center draggable :lock-scroll="false"
+    <el-dialog v-model="register_visible" :title="$t('register.title')" width="30%" align-center draggable :lock-scroll="false"
         @close='() => { if (store.login_status !== LoginStatus.IsLogin) { store.login_status = LoginStatus.NotLogin; } }'>
         <el-form size="default">
             <el-form-item>
-                <el-input v-model.trim="user_name_reg" placeholder="请输入用户昵称（唯一、登录凭证、无法修改）" prefix-icon="User"
+                <el-input v-model.trim="user_name_reg" :placeholder="$t('register.username')" prefix-icon="User"
                     maxlength="20" show-word-limit id="register_user_name_form"></el-input>
             </el-form-item>
             <el-form-item>
-                <el-input v-model="user_email_reg" placeholder="请输入邮箱（唯一）" prefix-icon="Message" type="email"
+                <el-input v-model="user_email_reg" :placeholder="$t('register.email')" prefix-icon="Message" type="email"
                     id="register_email_form"></el-input>
             </el-form-item>
             <el-form-item>
                 <div style="display: flex">
-                    <el-input v-model.trim="valid_code_reg" placeholder="验证码" prefix-icon="Key" class="code"
+                    <el-input v-model.trim="valid_code_reg" :placeholder="$t('register.captcha')" prefix-icon="Key" class="code"
                         maxlength="4"></el-input>
                     &nbsp;
                     <!-- <ValidCode2 :identifyCode="identifyCodeReg" ref="refValidCode2" /> -->
                     <ValidCode :identifyCode="identifyCodeReg" ref="refValidCode2" />
                     &nbsp;
                     <el-button link type="primary" @click="get_email_captcha('register')"
-                        :disabled="valid_code_reg.length < 4">获取邮箱验证码</el-button>
+                        :disabled="valid_code_reg.length < 4">{{ $t('register.getEmailCode') }}</el-button>
                 </div>
             </el-form-item>
             <el-form-item>
-                <el-input v-model.trim="user_email_valid_code_reg" placeholder="请输入邮箱验证码" prefix-icon="Key"
+                <el-input v-model.trim="user_email_valid_code_reg" :placeholder="$t('register.emailCode')" prefix-icon="Key"
                     maxlength="6" :disabled="valid_code_reg.length < 4" id="register_email_valid_code_form"></el-input>
             </el-form-item>
             <el-form-item>
-                <el-input v-model="user_password_reg" placeholder="请输入6-20位密码" show-password prefix-icon="Lock"
+                <el-input v-model="user_password_reg" :placeholder="$t('register.password')" show-password prefix-icon="Lock"
                     minlength="6" maxlength="20" id="register_user_password_form"></el-input>
             </el-form-item>
             <el-form-item>
-                <el-input v-model="user_password2_reg" placeholder="请输入确认密码" show-password prefix-icon="Lock"
+                <el-input v-model="user_password2_reg" :placeholder="$t('register.confirmPassword')" show-password prefix-icon="Lock"
                     minlength="6" maxlength="20"></el-input>
             </el-form-item>
-            <el-checkbox v-model="checkout_user_agreement" name="checkoutSecret">已阅读并同意
-                <a target="_blank" :href="AXIOS_BASE_URL + '/agreement.html'">新扫雷网用户协议</a>
+            <el-checkbox v-model="checkout_user_agreement" name="checkoutSecret">{{ $t('register.agreeTo') }}
+                <a target="_blank" :href="AXIOS_BASE_URL + '/agreement.html'">{{ $t('register.termsAndConditions') }}</a>
             </el-checkbox>
 
             <el-form-item>
@@ -94,38 +94,38 @@
             <el-form-item>
                 <el-button
                     :disabled="(user_email_valid_code_reg && user_password_reg && user_password2_reg).length == 0"
-                    type="primary" @click="register()">注册</el-button>
+                    type="primary" @click="register()">{{ $t('register.confirm') }}</el-button>
             </el-form-item>
         </el-form>
     </el-dialog>
-    <el-dialog v-model="retrieve_visible" title="找回密码" width="30%" align-center draggable :lock-scroll="false"
+    <el-dialog v-model="retrieve_visible" :title="$t('forgetPassword.title')" width="30%" align-center draggable :lock-scroll="false"
         @close='() => { if (store.login_status !== LoginStatus.IsLogin) { store.login_status = LoginStatus.NotLogin; } }'>
         <el-form size="default">
             <el-form-item>
-                <el-input v-model="user_email_reg" placeholder="请输入邮箱" prefix-icon="Message" type="email"></el-input>
+                <el-input v-model="user_email_reg" :placeholder="$t('forgetPassword.email')" prefix-icon="Message" type="email"></el-input>
             </el-form-item>
             <el-form-item>
                 <div style="display: flex">
-                    <el-input v-model="valid_code_reg" placeholder="验证码" prefix-icon="Key" class="code"
+                    <el-input v-model="valid_code_reg" :placeholder="$t('forgetPassword.captcha')" prefix-icon="Key" class="code"
                         maxlength="4"></el-input>
                     &nbsp;
                     <!-- <ValidCode2 :identifyCode="identifyCodeReg" ref="refValidCode2" /> -->
                     <ValidCode :identifyCode="identifyCodeReg" ref="refValidCode2" />
                     &nbsp;
                     <el-button link type="primary" @click="get_email_captcha('retrieve')"
-                        :disabled="valid_code_reg.length < 4">获取验证码</el-button>
+                        :disabled="valid_code_reg.length < 4">{{ $t('forgetPassword.getEmailCode') }}</el-button>
                 </div>
             </el-form-item>
             <el-form-item>
-                <el-input v-model="user_email_valid_code_reg" placeholder="请输入邮箱验证码" prefix-icon="Key"
+                <el-input v-model="user_email_valid_code_reg" :placeholder="$t('forgetPassword.emailCode')" prefix-icon="Key"
                     :disabled="valid_code_reg.length < 4" maxlength="6"></el-input>
             </el-form-item>
             <el-form-item>
-                <el-input v-model="user_password_reg" placeholder="请输入新的6-20位密码" show-password prefix-icon="Lock"
+                <el-input v-model="user_password_reg" :placeholder="$t('forgetPassword.password')" show-password prefix-icon="Lock"
                     minlength="6" maxlength="20"></el-input>
             </el-form-item>
             <el-form-item>
-                <el-input v-model="user_password2_reg" placeholder="请输入确认密码" show-password prefix-icon="Lock"
+                <el-input v-model="user_password2_reg" :placeholder="$t('forgetPassword.confirmPassword')" show-password prefix-icon="Lock"
                     minlength="6" maxlength="20"></el-input>
             </el-form-item>
             <el-form-item>
@@ -134,7 +134,7 @@
             <el-form-item>
                 <el-button
                     :disabled="(user_email_valid_code_reg && user_password_reg && user_password2_reg).length == 0"
-                    type="primary" @click="retrieve()">确认修改密码</el-button>
+                    type="primary" @click="retrieve()">{{ $t('forgetPassword.confirm') }}</el-button>
             </el-form-item>
         </el-form>
     </el-dialog>
@@ -151,6 +151,9 @@ import { genFileId, ElMessage } from 'element-plus'
 import { useUserStore } from '../store'
 const store = useUserStore()
 
+import { useI18n } from 'vue-i18n';
+const t = useI18n();
+
 const AXIOS_BASE_URL = process.env.VUE_APP_BASE_API;
 
 let refValidCode = ref<any>(null)

front_end/src/components/Menu.vue

@@ -28,7 +28,6 @@ import { genFileId, ElMessage } from 'element-plus'
 // import { AXIOS_BASE_URL } from '../config';
 import Login from "./Login.vue";
 
-
 const login_status = ref(LoginStatus.NotLogin);
 
 

front_end/src/components/dialogs/Downloads.vue

@@ -1,5 +1,5 @@
 <template>
-    <span class="text-button" @click="centerDialogVisible = true;">软件下载</span>
+    <span class="text-button" @click="centerDialogVisible = true;">{{ $t('menu.downloads') }}</span>
     <el-dialog v-model="centerDialogVisible" title="软件下载" width="50%" align-center draggable :lock-scroll="false">
         <ul>
             <li><a style="color: blue;" target="_blank" href="https://eee555.lanzn.com/iQ4C11p34mqh">元扫雷3.1.7</a>
@@ -25,6 +25,8 @@
 // 注册、登录的弹框及右上方按钮
 import { onMounted, ref, Ref } from 'vue'
 
+import { useI18n } from 'vue-i18n';
+const t = useI18n();
 
 const centerDialogVisible = ref(false);
 

front_end/src/components/dialogs/FriendlyLinks.vue

@@ -1,5 +1,5 @@
 <template>
-    <span class="text-button" @click="centerDialogVisible = true;">友链</span>
+    <span class="text-button" @click="centerDialogVisible = true;">{{ $t('menu.links') }}</span>
     <el-dialog v-model="centerDialogVisible" title="友链" width="50%" align-center draggable :lock-scroll="false">
         <ul>
             <li><a target="_blank" href="https://gitee.com/ee55/saolei_website/issues">本站码云主页</a>
@@ -30,6 +30,8 @@
 // 注册、登录的弹框及右上方按钮
 import { onMounted, ref, Ref } from 'vue'
 
+import { useI18n } from 'vue-i18n';
+const t = useI18n();
 
 const centerDialogVisible = ref(false);
 

front_end/src/components/dialogs/Thanks.vue

@@ -1,5 +1,5 @@
 <template>
-    <span class="text-button" @click="centerDialogVisible = true;">团队</span>
+    <span class="text-button" @click="centerDialogVisible = true;">{{ $t('menu.team') }}</span>
     <el-dialog v-model="centerDialogVisible" title="团队" width="50%" align-center draggable :lock-scroll="false">
         <h2>站长</h2>
         <span>eee555</span>
@@ -35,6 +35,8 @@
 // 注册、登录的弹框及右上方按钮
 import { onMounted, ref, Ref } from 'vue'
 
+import { useI18n } from 'vue-i18n';
+const t = useI18n();
 
 const centerDialogVisible = ref(false);