complete aside, header and settings panel i18n

src/components/KUNGalgameTopBar.vue

@@ -33,11 +33,11 @@ interface topBar {
 
 // 顶部导航栏的项目
 const topBarItem: topBar[] = [
-  { index: 1, name: '所有帖子', router: '/pool' },
+  { index: 1, name: 'pool', router: '/pool' },
-  { index: 2, name: '发布帖子', router: 'edit' },
+  { index: 2, name: 'create', router: 'edit' },
-  { index: 3, name: '技术交流', router: 'technology' },
+  { index: 3, name: 'technique', router: 'technology' },
-  { index: 4, name: '关于我们', router: 'kungalgame' },
+  { index: 4, name: 'about', router: 'kungalgame' },
-  { index: 5, name: '返回主页', router: '/' },
+  { index: 5, name: 'return', router: '/' },
 ]
 
 // 初始进入页面 header 没有附加样式
@@ -90,7 +90,9 @@ onBeforeMount(() => {})
         <ul>
           <!-- 顶部单个板块 -->
           <li v-for="kun in topBarItem" :key="kun.index">
-            <router-link :to="{ path: kun.router }">{{ kun.name }}</router-link>
+            <router-link :to="{ path: kun.router }">{{
+              $t(`header['${kun.name}']`)
+            }}</router-link>
           </li>
           <!-- 顶部板块下部的 hover 效果 -->
           <div class="top-bar-box"></div>

src/components/setting-panel/KUNGalgameSettingPanel.vue

@@ -55,12 +55,12 @@ const handleClose = () => {
   <div class="root">
     <div class="container">
       <div class="title">
-        <span>设置面板</span>
+        <span>{{ $t('header.settings.name') }}</span>
         <span><Icon class="settings-icon" icon="uiw:setting-o" /></span>
       </div>
       <div class="mode">
         <!-- 白天 / 黑夜模式切换 -->
-        <span>模式切换</span>
+        <span>{{ $t('header.settings.mode') }}</span>
         <div class="mode-container">
           <li>
             <Icon
@@ -77,7 +77,7 @@ const handleClose = () => {
         </div>
       </div>
       <div class="set-lang">
-        <span>网站语言设置</span>
+        <span>{{ $t('header.settings.language') }}</span>
         <select class="select" v-model="locale" @change="changeLanguage">
           <option value="en">English</option>
           <option value="zh">中文</option>
@@ -86,7 +86,7 @@ const handleClose = () => {
       <div>
         <!-- 设置主页的宽度 -->
         <div class="width-container">
-          <span>主页页面宽度设置</span>
+          <span>{{ $t('header.settings.width') }}</span>
           <span>{{ showMainPageWidth }}%</span>
         </div>
         <div class="page-width">
@@ -104,7 +104,9 @@ const handleClose = () => {
       <!-- 背景设置组件 -->
       <Background />
 
-      <div><button class="reset">恢复所有设置为默认</button></div>
+      <div>
+        <button class="reset">{{ $t('header.settings.recover') }}</button>
+      </div>
     </div>
 
     <!-- 看板娘组件 -->

src/components/setting-panel/components/Background.vue

@@ -4,10 +4,10 @@ import { useSettingsPanelStore } from '@/store/modules/settings'
 
 <template>
   <div class="kungalgame-background">
-    <div class="bg-settings">背景设置</div>
+    <div class="bg-settings">{{ $t('header.settings.background') }}</div>
     <ul class="kungalgame-background-container">
       <li>
-        <span>点击使用我们的预设的背景</span>
+        <span>{{ $t('header.settings.preset') }}</span>
         <!-- 预设背景集 -->
         <ul class="kungalgame-reset-bg">
           <li><img src="@/assets/images/bg/bg1-m.png" /></li>
@@ -23,15 +23,15 @@ import { useSettingsPanelStore } from '@/store/modules/settings'
       </li>
       <!-- 用户自定义背景 -->
       <li>
-        <span>自定义背景</span>
+        <span>{{ $t('header.settings.custom') }}</span>
         <div class="kungalgamer-bg">
-          <span>请在这里粘贴图片url</span>
+          <span>{{ $t('header.settings.url') }}</span>
           <div class="bg-url-input">
             <input type="text" required />
-            <button>确定</button>
+            <button>{{ $t('header.settings.confirm') }}</button>
           </div>
         </div>
-        <button class="reset-bg">恢复空白背景</button>
+        <button class="reset-bg">{{ $t('header.settings.restore') }}</button>
       </li>
     </ul>
   </div>

src/language/en.ts

@@ -1,13 +1,35 @@
 export default {
   header: {
-    name: 'KUNGalgame',
+    name: 'KUN Visual Novel',
-    allTopic: 'All TOPIC',
+    pool: 'POOL',
-    createTopic: 'CREATE TOPIC',
+    create: 'CREATE',
-    technology: 'TECHNOLOGY',
+    technique: 'TECHNIQUE',
-    aboutUs: 'ABOUT US',
+    about: 'ABOUT',
+    return: 'HOME',
+    settings: {
+      name: 'Settings',
+      mode: 'Mode',
+      language: 'Language',
+      width: 'Main Page Width',
+      background: 'Background Setting',
+      preset: 'Use our preset background',
+      custom: 'Custom Background',
+      url: 'Paste the picture url here',
+      confirm: 'confirm',
+      restore: 'Restore blank background',
+      recover: 'Recover all settings to default',
+    },
   },
   mainPage: {
     asideActive: {
+      fold: 'Fold Aside',
+      create: 'CREATE NEW!',
+      update: 'Update Log',
+      balance: 'F.S.',
+      ranking: 'Ranking',
+      regulations: 'Regulations',
+      contacts: 'Join Us',
+      antiMoe: 'Anti-moe',
       hot: `Today's Hot Topic`,
       new: `Today's New Topic`,
     },

src/language/zh.ts

@@ -1,17 +1,32 @@
 export default {
   header: {
     name: '鲲Galgame',
-    allTopic: '所有帖子',
+    pool: '所有帖子',
-    createTopic: '发布帖子',
+    create: '发布帖子',
-    technology: '技术交流',
+    technique: '技术交流',
-    aboutUs: '关于我们',
+    about: '关于我们',
+    return: '返回主页',
+    settings: {
+      name: '设置面板',
+      mode: '模式切换',
+      language: '网站语言设置',
+      width: '主页页面宽度设置',
+      background: '背景设置',
+      preset: '点击使用我们预设的背景',
+      custom: '自定义背景',
+      url: '请在这里粘贴图片的URL',
+      confirm: '确定',
+      restore: '恢复空白背景',
+      recover: '恢复所有设置为默认',
+    },
   },
   mainPage: {
     asideActive: {
       fold: '折叠左侧区域',
+      create: '发布帖子',
       update: '更新日志',
       balance: '收支公示',
-      rank: '排行榜单',
+      ranking: '排行榜单',
       regulations: '执行条例',
       contacts: '加入我们',
       antiMoe: '不萌记录',

src/router/index.ts

@@ -157,9 +157,9 @@ export const constantRoutes: RouteRecordRaw[] = [
   },
   // KUNGalgame 排行榜
   {
-    name: 'Rank',
+    name: 'Ranking',
-    path: '/rank',
+    path: '/ranking',
-    component: () => import('@/views/rank/Rank.vue'),
+    component: () => import('@/views/ranking/Ranking.vue'),
     meta: {
       title: '排行榜',
       transition: 'animate__backInUp',

src/views/Home/content/article/content/topic/components/UserPart.vue

@@ -11,7 +11,7 @@
       <a href="#"><span>鲲最可爱！</span></a>
     </div>
     <!-- 发布者相关信息 -->
-    <!--                   <div class="kungalgamer-rank"></div> -->
+    <!--                   <div class="kungalgamer-ranking"></div> -->
   </div>
 </template>
 <style lang="scss" scoped>

src/views/Home/content/aside/MainPageAside.vue

@@ -46,7 +46,7 @@ watch(
         style="font-size: 17px"
         v-if="!isActive"
       />
-      <span v-if="isActive">折叠左侧区域</span>
+      <span v-if="isActive">{{ $t('mainPage.asideActive.fold') }}</span>
     </div>
     <div class="item-active" v-if="isActive">
       <AsideActive :isActive="isActive" />

src/views/Home/content/aside/aside-item.ts

@@ -9,12 +9,12 @@ interface aside {
 
 // 顶部导航栏的项目 TODO:（i18n）
 const asideItem: aside[] = [
-  { index: 1, name: '更新日志', router: '/update-log' },
+  { index: 1, name: 'update', router: '/update-log' },
-  { index: 2, name: '收支公示', router: '/balance' },
+  { index: 2, name: 'balance', router: '/balance' },
-  { index: 3, name: '排行榜单', router: '/rank' },
+  { index: 3, name: 'ranking', router: '/ranking' },
-  { index: 4, name: '执行条例', router: '/regulations' },
+  { index: 4, name: 'regulations', router: '/regulations' },
-  { index: 5, name: '加入我们', router: '/contacts' },
+  { index: 5, name: 'contacts', router: '/contacts' },
-  { index: 6, name: '不萌记录', router: '/anti-moe' },
+  { index: 6, name: 'antiMoe', router: '/anti-moe' },
 ]
 
 export default asideItem

src/views/Home/content/aside/components/Aside.vue

@@ -7,7 +7,9 @@ import asideItem from '../aside-item'
   <div class="aside">
     <!-- 顶部单个板块 -->
     <span v-for="kun in asideItem" :key="kun.index">
-      <router-link :to="{ path: kun.router }">{{ kun.name }}</router-link>
+      <router-link :to="{ path: kun.router }">{{
+        $t(`mainPage.asideActive['${kun.name}']`)
+      }}</router-link>
     </span>
   </div>
 </template>

src/views/Home/content/aside/components/AsideActive.vue

@@ -15,13 +15,17 @@ const isActive = toRefs(props.isActive)
     <!-- 发布新文章 -->
     <div class="new-article">
       <!-- 发布新文章的按钮 -->
-      <button class="btn-new-article">发布帖子</button>
+      <button class="btn-new-article">
+        {{ $t('mainPage.asideActive.create') }}
+      </button>
     </div>
     <!-- 功能盒子容器 -->
     <div class="item-box-container">
       <!-- 侧边栏单个项目 -->
       <span v-for="kun in asideItem" :key="kun.index">
-        <router-link :to="{ path: kun.router }">{{ kun.name }}</router-link>
+        <router-link :to="{ path: kun.router }">{{
+          $t(`mainPage.asideActive['${kun.name}']`)
+        }}</router-link>
       </span>
     </div>
   </div>

src/views/kungalgamer/KUNGalgamer.vue

@@ -11,7 +11,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
       <div class="header">
         <!-- 用户头像 -->
         <div class="kungalgamer-avatar">
-          <img src="../img/KUN.jpg" alt="KUN" />
+          <img src="@/assets/images/KUN.jpg" alt="KUN" />
         </div>
         <!-- 用户名 -->
         <div class="kungalgamer-name">
@@ -57,7 +57,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
   min-height: 800px;
   display: flex;
   flex-direction: column;
-  background-image: url('$/assets/images/bg/bg3.png');
+  background-image: url('@/assets/images/bg/bg3.png');
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
@@ -83,7 +83,6 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
   flex-direction: column;
   /* 用户页面的所有字体颜色 */
   color: $kungalgame-font-color-3;
-  overflow: hidden;
 }
 /* 页面的头部 */
 .header {

src/views/ranking/Ranking.vue

@@ -10,7 +10,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
     <!-- 内容区 -->
     <div class="article">
       <!-- 用户排行 -->
-      <div class="kungalgamer-rank">
+      <div class="kungalgamer-ranking">
         <!-- 用户排行标题 -->
         <div class="kungalgamer-title">最萌的萝莉</div>
         <!-- 用户排行的交互 -->
@@ -371,7 +371,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
         </div>
       </div>
       <!-- 帖子排行 -->
-      <div class="topic-rank">
+      <div class="topic-ranking">
         <!-- 帖子排行标题 -->
         <div class="topic-title">最萌的帖子</div>
         <!-- 帖子排行的交互 -->
@@ -975,7 +975,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
   color: $kungalgame-font-color-3;
 }
 /* 用户排行 */
-.kungalgamer-rank {
+.kungalgamer-ranking {
   width: 50%;
   border-right: 1px solid $kungalgame-blue-4;
   box-sizing: border-box;
@@ -1074,7 +1074,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
 
 */
 /* 帖子排行 */
-.topic-rank {
+.topic-ranking {
   width: 50%;
 }
 /* 帖子排行标题 */

src/views/topic/content/master/TopicMaster.vue

@@ -51,7 +51,7 @@
               <!-- 楼主的头像图片 -->
               <img src="../img/KUN.jpg" alt="KUN" />
               <!-- 楼主的等级 -->
-              <div class="master-rank">站长</div>
+              <div class="master-ranking">站长</div>
             </div>
             <!-- 楼主的名字 -->
             <div class="master-name">啊这可海星啊这</div>
@@ -355,7 +355,7 @@
   margin-top: 17px;
 }
 /* 楼主的等级 */
-.master-rank {
+.master-ranking {
   font-size: 10px;
   position: absolute;
   margin-left: 90px;

src/views/topic/content/others/single/SingleTopic.vue

@@ -26,7 +26,7 @@ import Comments from './comments/Comments.vue'
               <!-- 其他人的头像图片 -->
               <img src="../img/KUN.jpg" alt="KUN" />
               <!-- 其他人的等级 -->
-              <div class="other-rank">萌葱</div>
+              <div class="other-ranking">萌葱</div>
             </div>
             <!-- 其他人的名字 -->
             <div class="other-name">啊这可海星啊这</div>
@@ -220,7 +220,7 @@ import Comments from './comments/Comments.vue'
   width: 100px;
 }
 /* 其他人的等级 */
-.other-rank {
+.other-ranking {
   font-size: 10px;
   position: absolute;
   margin-left: 90px;

src/views/update-log/UpdateLog.vue

@@ -45,7 +45,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
               <li>
                 <!-- 更新内容 -->
                 <div class="performance">
-                  <p>1. 添加新页面 rank page</p>
+                  <p>1. 添加新页面 ranking page</p>
                   <p>2. 修复关于我们页面缩放 BUG</p>
                   <p>3. 页面颜色调整</p>
                 </div>
@@ -57,7 +57,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
               <li>
                 <!-- 更新内容 -->
                 <div class="performance">
-                  <p>1. 添加新页面 rank page</p>
+                  <p>1. 添加新页面 ranking page</p>
                   <p>2. 修复关于我们页面缩放 BUG</p>
                   <p>3. 页面颜色调整</p>
                 </div>
@@ -69,7 +69,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
               <li>
                 <!-- 更新内容 -->
                 <div class="performance">
-                  <p>1. 添加新页面 rank page</p>
+                  <p>1. 添加新页面 ranking page</p>
                   <p>2. 修复关于我们页面缩放 BUG</p>
                   <p>3. 页面颜色调整</p>
                 </div>
@@ -81,7 +81,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
               <li>
                 <!-- 更新内容 -->
                 <div class="performance">
-                  <p>1. 添加新页面 rank page</p>
+                  <p>1. 添加新页面 ranking page</p>
                   <p>2. 修复关于我们页面缩放 BUG</p>
                   <p>3. 页面颜色调整</p>
                 </div>
@@ -93,7 +93,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
               <li>
                 <!-- 更新内容 -->
                 <div class="performance">
-                  <p>1. 添加新页面 rank page</p>
+                  <p>1. 添加新页面 ranking page</p>
                   <p>2. 修复关于我们页面缩放 BUG</p>
                   <p>3. 页面颜色调整</p>
                 </div>
@@ -105,7 +105,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
               <li>
                 <!-- 更新内容 -->
                 <div class="performance">
-                  <p>1. 添加新页面 rank page</p>
+                  <p>1. 添加新页面 ranking page</p>
                   <p>2. 修复关于我们页面缩放 BUG</p>
                   <p>3. 页面颜色调整</p>
                 </div>
@@ -117,7 +117,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
               <li>
                 <!-- 更新内容 -->
                 <div class="performance">
-                  <p>1. 添加新页面 rank page</p>
+                  <p>1. 添加新页面 ranking page</p>
                   <p>2. 修复关于我们页面缩放 BUG</p>
                   <p>3. 页面颜色调整</p>
                 </div>
@@ -129,7 +129,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
               <li>
                 <!-- 更新内容 -->
                 <div class="performance">
-                  <p>1. 添加新页面 rank page</p>
+                  <p>1. 添加新页面 ranking page</p>
                   <p>2. 修复关于我们页面缩放 BUG</p>
                   <p>3. 页面颜色调整</p>
                 </div>
@@ -141,7 +141,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
               <li>
                 <!-- 更新内容 -->
                 <div class="performance">
-                  <p>1. 添加新页面 rank page</p>
+                  <p>1. 添加新页面 ranking page</p>
                   <p>2. 修复关于我们页面缩放 BUG</p>
                   <p>3. 页面颜色调整</p>
                 </div>