feat: page title i18n

src/language/en.ts

@@ -276,6 +276,29 @@ export default {
     rePwd: 'Confirm Password',
     confirm: 'Confirm',
   },
+  // 路由标题
+  router: {
+    home: 'Home',
+    balance: 'P & L',
+    edit: 'Edit',
+    about: 'About',
+    userInfo: 'Info',
+    userSettings: 'Settings',
+    userPassword: 'Password',
+    userPublished: 'Published Topic',
+    userLiked: 'Liked Topic',
+    userUpvote: 'Upvote Topic',
+    userReply: 'Reply',
+    userComment: 'Comment',
+    nonMoe: 'Non-MoeMoe!',
+    pool: 'Pool',
+    ranking: 'Ranking',
+    regulations: 'Regulations',
+    technique: 'Technique',
+    thanks: 'Thinks List',
+    topics: 'Topics',
+    update: 'Update Log',
+  },
   // 非页面组件这里统一用大驼峰
   ComponentAlert: {
     confirm: 'OK',

src/language/zh.ts

@@ -274,6 +274,29 @@ export default {
     rePwd: '确认密码',
     confirm: '确定更改',
   },
+  // 路由标题
+  router: {
+    home: '主页',
+    balance: '收支公示',
+    edit: '编辑',
+    about: '关于我们',
+    userInfo: '个人信息',
+    userSettings: '信息设置',
+    userPassword: '邮箱密码',
+    userPublished: '发的话题',
+    userLiked: '赞的话题',
+    userUpvote: '推的话题',
+    userReply: '发的回复',
+    userComment: '发的评论',
+    nonMoe: '不萌萌!',
+    pool: '话题池',
+    ranking: '排行榜',
+    regulations: '执行条例',
+    technique: '技术交流',
+    thanks: '感谢名单',
+    topics: '话题',
+    update: '更新日志',
+  },
   // 非页面组件这里统一用大驼峰
   ComponentAlert: {
     confirm: '确定',

src/router/guard/index.ts

@@ -1,9 +1,11 @@
 import { Router } from 'vue-router'
 import { createPermission } from './permission'
+import i18n from '@/language/i18n'
 
 const createPageTitle = (router: Router) => {
   router.beforeEach((to) => {
-    document.title = to.meta.title as string
+    const title = to.meta.title as string
+    document.title = i18n.global.tm(`router.${title}`)
     return true
   })
 }

src/router/modules/balance.ts

@@ -13,7 +13,7 @@ const balance: RouteRecordRaw[] = [
         path: '',
         component: () => import('@/views/balance/Balance.vue'),
         meta: {
-          title: '收支公示',
+          title: 'balance',
         },
       },
     ],

src/router/modules/edit.ts

@@ -13,7 +13,7 @@ const edit: RouteRecordRaw[] = [
         path: '',
         component: () => import('@/views/edit/Edit.vue'),
         meta: {
-          title: '编辑',
+          title: 'edit',
         },
       },
     ],

src/router/modules/home.ts

@@ -14,7 +14,7 @@ const index: RouteRecordRaw[] = [
         path: '',
         component: () => import('@/views/Home/KUNGalgameMainPage.vue'),
         meta: {
-          title: '主页',
+          title: 'home',
         },
       },
     ],

src/router/modules/kungalgame.ts

@@ -13,7 +13,7 @@ const kungalgame: RouteRecordRaw[] = [
         path: '',
         component: () => import('@/views/kungalgame/KUNGalgame.vue'),
         meta: {
-          title: '关于我们',
+          title: 'about',
         },
       },
     ],

src/router/modules/kungalgamer.ts

@@ -23,7 +23,7 @@ const kungalgamer: RouteRecordRaw[] = [
             path: 'info',
             component: () => import('@/views/kungalgamer/content/Info.vue'),
             meta: {
-              title: 'Info',
+              title: 'userInfo',
             },
           },
           {
@@ -31,7 +31,7 @@ const kungalgamer: RouteRecordRaw[] = [
             path: 'settings',
             component: () => import('@/views/kungalgamer/content/Settings.vue'),
             meta: {
-              title: 'Settings',
+              title: 'userSettings',
               permission: [4],
             },
           },
@@ -40,7 +40,7 @@ const kungalgamer: RouteRecordRaw[] = [
             path: 'password',
             component: () => import('@/views/kungalgamer/content/Password.vue'),
             meta: {
-              title: 'Password',
+              title: 'userPassword',
               permission: [4],
             },
           },
@@ -50,7 +50,7 @@ const kungalgamer: RouteRecordRaw[] = [
             path: 'published-topic',
             component: () => import('@/views/kungalgamer/content/Topic.vue'),
             meta: {
-              title: 'PublishedTopic',
+              title: 'userPublished',
             },
           },
           {
@@ -59,7 +59,7 @@ const kungalgamer: RouteRecordRaw[] = [
             path: 'liked-topic',
             component: () => import('@/views/kungalgamer/content/Topic.vue'),
             meta: {
-              title: 'LikedTopic',
+              title: 'userLiked',
               permission: [2, 3, 4],
             },
           },
@@ -69,7 +69,7 @@ const kungalgamer: RouteRecordRaw[] = [
             path: 'upvote-topic',
             component: () => import('@/views/kungalgamer/content/Topic.vue'),
             meta: {
-              title: 'UpvoteTopic',
+              title: 'userUpvote',
               permission: [2, 3, 4],
             },
           },
@@ -79,7 +79,7 @@ const kungalgamer: RouteRecordRaw[] = [
             path: 'reply',
             component: () => import('@/views/kungalgamer/content/Topic.vue'),
             meta: {
-              title: 'Reply',
+              title: 'userReply',
             },
           },
           {
@@ -88,7 +88,7 @@ const kungalgamer: RouteRecordRaw[] = [
             path: 'comment',
             component: () => import('@/views/kungalgamer/content/Topic.vue'),
             meta: {
-              title: 'Comment',
+              title: 'userComment',
             },
           },
         ],

src/router/modules/non-moe.ts

@@ -13,7 +13,7 @@ const nonMoe: RouteRecordRaw[] = [
         path: '',
         component: () => import('@/views/non-moe/NonMoe.vue'),
         meta: {
-          title: '不萌萌',
+          title: 'nonMoe',
         },
       },
     ],

src/router/modules/pool.ts

@@ -13,7 +13,7 @@ const pool: RouteRecordRaw[] = [
         path: '',
         component: () => import('@/views/pool/Pool.vue'),
         meta: {
-          title: '话题池',
+          title: 'pool',
         },
       },
     ],

src/router/modules/ranking.ts

@@ -13,7 +13,7 @@ const ranking: RouteRecordRaw[] = [
         path: '',
         component: () => import('@/views/ranking/Ranking.vue'),
         meta: {
-          title: '排行榜',
+          title: 'ranking',
         },
       },
     ],

src/router/modules/regulations.ts

@@ -13,7 +13,7 @@ const bylaw: RouteRecordRaw[] = [
         path: '',
         component: () => import('@/views/bylaw/Bylaw.vue'),
         meta: {
-          title: '执行条例（试行）',
+          title: 'regulations',
         },
       },
     ],

src/router/modules/technique.ts

@@ -13,7 +13,7 @@ const technique: RouteRecordRaw[] = [
         path: '',
         component: () => import('@/views/technique/Technique.vue'),
         meta: {
-          title: '技术交流',
+          title: 'technique',
         },
       },
     ],

src/router/modules/thanks-list.ts

@@ -13,7 +13,7 @@ const thanksList: RouteRecordRaw[] = [
         path: '',
         component: () => import('@/views/thanks-list/ThanksList.vue'),
         meta: {
-          title: '感谢名单',
+          title: 'thanks',
         },
       },
     ],

src/router/modules/topic.ts

@@ -18,7 +18,7 @@ const topic: RouteRecordRaw[] = [
         props: true,
         meta: {
           transition: 'animate__fadeIn animate__faster',
-          title: '话题',
+          title: 'topics',
         },
       },
     ],

src/router/modules/update-log.ts

@@ -13,7 +13,7 @@ const updateLog: RouteRecordRaw[] = [
         path: '',
         component: () => import('@/views/update-log/UpdateLog.vue'),
         meta: {
-          title: '更新日志',
+          title: 'update',
         },
       },
     ],

src/views/Home/content/article/components/header/SortTopic.vue

@@ -128,10 +128,8 @@ const isSortField = () => {
   font-size: 14px;
   color: var(--kungalgame-font-color-3);
   text-decoration: none;
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  justify-content: space-around;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
-  place-items: center;
 }
 /* 单个二级菜单 hover */
 .sort-item:hover {
@@ -178,4 +176,17 @@ const isSortField = () => {
     color: var(--kungalgame-red-4);
   }
 }
+
+@media (max-width: 700px) {
+  .sort-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    span {
+      &:nth-child(1) {
+        display: none;
+      }
+    }
+  }
+}
 </style>