From 9c2a1dcfd333174f3b3fdc76d84cc2b978c2fcdf Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Fri, 13 Oct 2023 22:03:26 +0800
Subject: [PATCH] feat: user page i18n

---
 src/language/en.ts                            | 58 +++++++++++++++++++
 src/language/zh.ts                            | 57 ++++++++++++++++++
 .../components/header/ArticleHeader.vue       |  2 +-
 src/views/kungalgamer/KUNGalgamer.vue         |  2 +
 src/views/kungalgamer/components/Avatar.vue   | 29 +++++++---
 src/views/kungalgamer/components/NavBar.vue   |  2 +-
 src/views/kungalgamer/components/routeName.ts | 16 ++---
 src/views/kungalgamer/content/Info.vue        | 56 +++++++++++++-----
 src/views/kungalgamer/content/Password.vue    | 41 ++++++++-----
 src/views/kungalgamer/content/Settings.vue    | 12 ++--
 10 files changed, 225 insertions(+), 50 deletions(-)

diff --git a/src/language/en.ts b/src/language/en.ts
index cf841c9b..6cc94f4d 100644
--- a/src/language/en.ts
+++ b/src/language/en.ts
@@ -208,6 +208,64 @@ export default {
       privacy: 'Privacy Policy',
     },
   },
+  user: {
+    user: 'User',
+    admin: 'Administrator',
+    SU: 'Super Admin',
+    normal: 'Normal',
+    banned: 'Banned',
+    nav: {
+      profile: 'Profile',
+      settings: 'Settings',
+      email: 'Email',
+      published: 'Published',
+      liked: 'Liked',
+      upvote: 'Upvote',
+      reply: 'Reply',
+      comment: 'Comment',
+    },
+    profile: {
+      name: 'Name',
+      moemoepoint: 'MoeMoePoint',
+      register: 'Registration Number',
+      roles: 'Roles',
+      status: 'Status',
+      upvote: 'Number of Upvotes',
+      like: 'Number of Likes',
+      dislike: 'Number of Dislikes',
+      today: 'Published Today',
+      topic: 'Number of Topics',
+      reply: 'Number of Replies',
+      comment: 'Number of Comments',
+      time: 'Registration Date',
+      bio: 'Bio',
+      null: `Please fill this loli in because she hasn't left anything`,
+    },
+    settings: {
+      avatar: 'Change Avatar',
+      drag: 'Drag and drop an image into the box OR',
+      click: 'Click to upload',
+      supportImage: 'Supports images up to 1007KB',
+      supportFormat: 'Supports jpg and png formats',
+      confirm: 'Confirm',
+      bio: 'Change Bio',
+      hint: 'Please enter your new signature, up to 107 characters',
+      count: 'Character count',
+    },
+    email: {
+      email: 'Change Email',
+      current: 'Your current email is',
+      newEmail: 'Please enter your new email',
+      code: 'Please enter the verification code',
+      send: 'Send Code',
+      confirmEmail: 'Confirm Change',
+      pwd: 'Change Password',
+      oldPwd: 'Please enter your old password',
+      newPwd: 'Please enter your new password',
+      rePwd: 'Please enter your new password again',
+      confirmPwd: 'Confirm Password Change',
+    },
+  },
   // 非页面组件这里统一用大驼峰
   ComponentAlert: {
     confirm: 'OK',
diff --git a/src/language/zh.ts b/src/language/zh.ts
index 64fe5252..370fb5d5 100644
--- a/src/language/zh.ts
+++ b/src/language/zh.ts
@@ -207,6 +207,63 @@ export default {
       privacy: '隐私政策',
     },
   },
+  user: {
+    user: '用户',
+    admin: '管理员',
+    SU: '超级管理员',
+    normal: '正常',
+    banned: '封禁',
+    nav: {
+      profile: '个人信息',
+      settings: '信息设置',
+      email: '邮箱密码',
+      published: '发的话题',
+      liked: '赞的话题',
+      upvote: '推的话题',
+      reply: '发的回复',
+      comment: '发的评论',
+    },
+    profile: {
+      name: '用户名',
+      moemoepoint: '萌萌点',
+      register: '注册序号',
+      roles: '角色',
+      status: '状态',
+      upvote: '被推数',
+      like: '被赞数',
+      dislike: '被踩数',
+      today: '今日发表',
+      topic: '话题数',
+      reply: '回复数',
+      comment: '评论数',
+      time: '注册时间',
+      bio: '签名',
+      null: `请填满这只萝莉吧，因为她什么都没留下`,
+    },
+    settings: {
+      avatar: '更改头像',
+      drag: '拖拽图片到方框内或点击方框上传',
+      supportImage: '支持 1007KB 以内的图片',
+      supportFormat: '支持 jpg 和 png 格式',
+      confirm: '确定更改',
+      bio: '更改签名',
+      hint: '输入您的新签名，最大 107 个字符',
+      count: '字数',
+    },
+    email: {
+      email: '更改邮箱',
+      current: '您当前的邮箱是',
+      newEmail: '请输入您的新邮箱',
+      code: '请输入您的验证码',
+      send: '发送验证码',
+      confirmEmail: '确定更改邮箱',
+      pwd: '更改密码',
+      oldPwd: '请输入您的旧密码',
+      newPwd: '请输入您的新密码',
+      rePwd: '请再次输入新密码',
+      confirmPwd: '确定更改密码',
+    },
+  },
   // 非页面组件这里统一用大驼峰
   ComponentAlert: {
     confirm: '确定',
diff --git a/src/views/Home/content/article/components/header/ArticleHeader.vue b/src/views/Home/content/article/components/header/ArticleHeader.vue
index 0bcc28bb..93f6da76 100644
--- a/src/views/Home/content/article/components/header/ArticleHeader.vue
+++ b/src/views/Home/content/article/components/header/ArticleHeader.vue
@@ -16,7 +16,7 @@ const category = ['Galgame']
     <!-- 搜索框，主页只有 Galgame -->
     <KUNGalgameSearchBox :category="category" style="border: none" />
     <!-- 交互区域进入全部话题 -->
-    <RouterLink to="/pool/index" class="more">
+    <RouterLink to="/pool" class="more">
       <span>{{ $tm('mainPage.header.all') }}</span>
       <Icon class="all-topic" icon="line-md:chevron-triple-right" />
     </RouterLink>
diff --git a/src/views/kungalgamer/KUNGalgamer.vue b/src/views/kungalgamer/KUNGalgamer.vue
index 6bb9de92..ec36f8ed 100644
--- a/src/views/kungalgamer/KUNGalgamer.vue
+++ b/src/views/kungalgamer/KUNGalgamer.vue
@@ -53,6 +53,7 @@ onMounted(async () => {
 <style lang="scss" scoped>
 .root {
   height: 100vh;
+  min-height: 800px;
   width: 100vw;
   display: flex;
   flex-direction: column;
@@ -62,6 +63,7 @@ onMounted(async () => {
   /* 内容区占整个页面的比例 */
   width: 60%;
   height: 70%;
+  min-height: 700px;
   /* 内容区的最大宽度和高度 */
   max-width: 1350px;
   max-width: 1200px;
diff --git a/src/views/kungalgamer/components/Avatar.vue b/src/views/kungalgamer/components/Avatar.vue
index ceee44c3..1d41b344 100644
--- a/src/views/kungalgamer/components/Avatar.vue
+++ b/src/views/kungalgamer/components/Avatar.vue
@@ -68,7 +68,7 @@ const handleChangeAvatar = () => {
 
 <template>
   <div class="avatar">
-    <div class="title">更改头像</div>
+    <div class="title">{{ $tm('user.settings.avatar') }}</div>
 
     <div class="container">
       <div
@@ -98,13 +98,18 @@ const handleChangeAvatar = () => {
 
       <!-- 帮助区域 -->
       <div class="help">
-        <p class="hint">拖拽图片到方框内或点击方框上传</p>
-        <div class="support">
-          <span>支持 1007KB 以内的图片</span>
-          <br />
-          <span>支持 jpg 和 png 格式</span>
+        <div class="hint">
+          <span>{{ $tm('user.settings.drag') }}</span>
+          <span>{{ $tm('user.settings.click') }}</span>
         </div>
-        <button @click="handleChangeAvatar">确定更改</button>
+        <div class="support">
+          <span>{{ $tm('user.settings.supportImage') }}</span>
+          <br />
+          <span>{{ $tm('user.settings.supportFormat') }}</span>
+        </div>
+        <button @click="handleChangeAvatar">
+          {{ $tm('user.settings.confirm') }}
+        </button>
       </div>
     </div>
   </div>
@@ -206,9 +211,19 @@ const handleChangeAvatar = () => {
     }
   }
 }
+
+.hint {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 .support {
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 @media (max-width: 700px) {
diff --git a/src/views/kungalgamer/components/NavBar.vue b/src/views/kungalgamer/components/NavBar.vue
index e04bf553..48b26082 100644
--- a/src/views/kungalgamer/components/NavBar.vue
+++ b/src/views/kungalgamer/components/NavBar.vue
@@ -40,7 +40,7 @@ onMounted(() => {
       v-show="isShowNavItem(kun.permission)"
     >
       <RouterLink :to="`/kungalgamer/${currentPageUid}/${kun.router}`">
-        <span>{{ kun.name }}</span>
+        <span>{{ $tm(`user.nav.${kun.name}`) }}</span>
       </RouterLink>
     </div>
   </div>
diff --git a/src/views/kungalgamer/components/routeName.ts b/src/views/kungalgamer/components/routeName.ts
index 502fc5de..41320f8d 100644
--- a/src/views/kungalgamer/components/routeName.ts
+++ b/src/views/kungalgamer/components/routeName.ts
@@ -8,49 +8,49 @@ interface nav {
 export const navBarRoute: nav[] = [
   {
     index: 1,
-    name: '个人信息',
+    name: 'profile',
     router: 'info',
     permission: [1, 2, 3, 4],
   },
   {
     index: 2,
-    name: '信息设置',
+    name: 'settings',
     router: 'settings',
     permission: [4],
   },
   {
     index: 3,
-    name: '邮箱密码',
+    name: 'email',
     router: 'password',
     permission: [4],
   },
   {
     index: 4,
-    name: '发的话题',
+    name: 'published',
     router: 'published-topic',
     permission: [1, 2, 3, 4],
   },
   {
     index: 5,
-    name: '赞的话题',
+    name: 'liked',
     router: 'liked-topic',
     permission: [2, 3, 4],
   },
   {
     index: 6,
-    name: '推的话题',
+    name: 'upvote',
     router: 'upvote-topic',
     permission: [2, 3, 4],
   },
   {
     index: 7,
-    name: '发的回复',
+    name: 'reply',
     router: 'reply',
     permission: [1, 2, 3, 4],
   },
   {
     index: 8,
-    name: '发的评论',
+    name: 'comment',
     router: 'comment',
     permission: [1, 2, 3, 4],
   },
diff --git a/src/views/kungalgamer/content/Info.vue b/src/views/kungalgamer/content/Info.vue
index df45662f..47931b74 100644
--- a/src/views/kungalgamer/content/Info.vue
+++ b/src/views/kungalgamer/content/Info.vue
@@ -46,29 +46,47 @@ const statusName = () => {
       <!-- 用户基本信息 -->
       <div class="basic">
         <!-- 用户名 -->
-        <span>用户名: {{ user.name }}</span>
+        <span>{{ $tm('user.profile.name') }}: {{ user.name }}</span>
         <!-- 萌萌点 -->
-        <span>萌萌点: {{ user.moemoepoint }}</span>
+        <span>
+          {{ $tm('user.profile.moemoepoint') }}: {{ user.moemoepoint }}
+        </span>
         <!-- 注册序号 -->
-        <span>注册序号: {{ user.uid }}</span>
-        <span>角色: {{ rolesName() }}</span>
-        <span>状态: {{ statusName() }}</span>
-        <span>被推数: {{ user.upvote }}</span>
-        <span>被赞数: {{ user.like }}</span>
-        <span>被踩数: {{ user.dislike }}</span>
-        <span>今日发表: {{ user.daily_topic_count }}</span>
-
-        <span>话题数: {{ user.topic.length }}</span>
-        <span>回复数: {{ user.reply.length }}</span>
-        <span>评论数: {{ user.comment.length }}</span>
+        <span>{{ $tm('user.profile.register') }}: {{ user.uid }}</span>
+        <!-- 角色 -->
+        <span>{{ $tm('user.profile.roles') }}: {{ rolesName() }}</span>
+        <!-- 状态 -->
+        <span>{{ $tm('user.profile.status') }}: {{ statusName() }}</span>
+        <!-- 被推数 -->
+        <span>{{ $tm('user.profile.upvote') }}: {{ user.upvote }}</span>
+        <!-- 被赞数 -->
+        <span>{{ $tm('user.profile.like') }}: {{ user.like }}</span>
+        <!-- 被踩数 -->
+        <span>{{ $tm('user.profile.dislike') }}: {{ user.dislike }}</span>
+        <!-- 今日发布话题数 -->
+        <span>
+          {{ $tm('user.profile.today') }}: {{ user.daily_topic_count }}
+        </span>
+        <!-- 发布话题数 -->
+        <span>{{ $tm('user.profile.topic') }}: {{ user.topic.length }}</span>
+        <!-- 发布回复数 -->
+        <span>{{ $tm('user.profile.reply') }}: {{ user.reply.length }}</span>
+        <!-- 发布评论数 -->
+        <span>
+          {{ $tm('user.profile.comment') }}: {{ user.comment.length }}
+        </span>
 
         <!-- 注册时间 -->
-        <span>注册时间: {{ dayjs(user.time).format('YYYY/MM/DD') }}</span>
+        <span>
+          {{ $tm('user.profile.time') }}:
+          {{ dayjs(user.time).format('YYYY/MM/DD') }}
+        </span>
       </div>
       <!-- 用户签名 -->
       <div class="bio">
-        <div>签名:</div>
-        <div>{{ user.bio ? user.bio : 'NULL' }}</div>
+        <div>{{ $tm('user.profile.bio') }}:</div>
+        <div v-if="user.bio">{{ user.bio }}</div>
+        <div v-if="!user.bio" class="null">{{ $tm('user.profile.null') }}</div>
       </div>
     </div>
   </div>
@@ -114,4 +132,10 @@ const statusName = () => {
     }
   }
 }
+
+/* 签名为空 */
+.null {
+  color: var(--kungalgame-blue-2);
+  font-style: oblique;
+}
 </style>
diff --git a/src/views/kungalgamer/content/Password.vue b/src/views/kungalgamer/content/Password.vue
index e39682df..1feeb500 100644
--- a/src/views/kungalgamer/content/Password.vue
+++ b/src/views/kungalgamer/content/Password.vue
@@ -144,43 +144,56 @@ const handleClickForgotPassword = () => {
   <div class="article">
     <!-- 更改邮箱 -->
     <div class="email">
-      <div class="title">更改邮箱:</div>
-      <div class="current-email">您当前的邮箱是: {{ email }}</div>
+      <div class="title">{{ $tm('user.email.email') }}:</div>
+      <!-- 当前的邮箱 -->
+      <div class="current-email">
+        {{ $tm('user.email.current') }}: {{ email }}
+      </div>
+      <!-- 新邮箱 -->
       <div class="input">
-        <span>请输入您的新邮箱: </span>
+        <span>{{ $tm('user.email.newEmail') }}: </span>
         <input v-model="input.newEmail" type="text" />
       </div>
+      <!-- 邮箱验证码 -->
       <div class="input">
-        <span>请输入您的验证码: </span>
+        <span>{{ $tm('user.email.code') }}: </span>
         <input v-model="input.code" type="text" />
       </div>
-
+      <!-- 发送验证码 -->
       <div class="btn">
         <button @click="handleSendCode" v-if="!hasSentCodeEmail">
-          发送验证码
+          {{ $tm('user.email.send') }}
+        </button>
+        <!-- 确定更改 -->
+        <button @click="handleResetEmail">
+          {{ $tm('user.email.confirmEmail') }}
         </button>
-        <button @click="handleResetEmail">确定更改邮箱</button>
       </div>
     </div>
 
     <!-- 用户更改密码 -->
     <div class="password">
-      <div class="title">更改密码:</div>
+      <div class="title">{{ $tm('user.email.pwd') }}:</div>
+      <!-- 旧密码 -->
       <div class="input">
-        <span>请输入您的旧密码: </span>
+        <span>{{ $tm('user.email.oldPwd') }}: </span>
         <input v-model="input.oldPassword" type="password" />
       </div>
+      <!-- 新密码 -->
       <div class="input">
-        <span>请输入您的新密码: </span>
+        <span>{{ $tm('user.email.newPwd') }}: </span>
         <input v-model="input.newPassword" type="password" />
       </div>
+      <!-- 确认密码 -->
       <div class="input">
-        <span>请再次输入新密码: </span>
+        <span>{{ $tm('user.email.rePwd') }}: </span>
         <input v-model="input.repeatPassword" type="password" />
       </div>
 
       <div class="btn">
-        <button @click="handleChangePassword">确定更改密码</button>
+        <button @click="handleChangePassword">
+          {{ $tm('user.email.confirmPwd') }}
+        </button>
       </div>
     </div>
 
@@ -219,7 +232,8 @@ const handleClickForgotPassword = () => {
 .input {
   margin: 10px 0;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
+  padding: 0 30px;
   input {
     height: 25px;
     padding-left: 5px;
@@ -274,6 +288,7 @@ const handleClickForgotPassword = () => {
     font-size: medium;
   }
   .input {
+    padding: 0;
     span {
       margin-right: 5px;
     }
diff --git a/src/views/kungalgamer/content/Settings.vue b/src/views/kungalgamer/content/Settings.vue
index 0dfd6151..e4cffd1a 100644
--- a/src/views/kungalgamer/content/Settings.vue
+++ b/src/views/kungalgamer/content/Settings.vue
@@ -42,18 +42,22 @@ const handleChangeBio = async () => {
 
     <!-- 更改 bio -->
     <div class="bio">
-      <div class="title">更改签名</div>
+      <div class="title">{{ $tm('user.settings.bio') }}</div>
       <textarea
         name="bio"
-        placeholder="请输入您的新签名，最大 107 个字符"
+        :placeholder="`${$tm('user.settings.hint')}`"
         rows="5"
         v-model="bioValue"
       >
       </textarea>
 
       <div class="help">
-        <span class="bioCount">字数：{{ bioValue.length }}</span>
-        <button @click="handleChangeBio">确定更改</button>
+        <span class="bioCount">
+          {{ $tm('user.settings.count') }}: {{ bioValue.length }}
+        </span>
+        <button @click="handleChangeBio">
+          {{ $tm('user.settings.confirm') }}
+        </button>
       </div>
     </div>
   </div>