time format, optimize i18n

src/language/i18n.ts

@@ -1,14 +1,11 @@
 import { createI18n } from 'vue-i18n'
+// 读取本地存储中的语言配置
+import { lang } from '@/utils/localStorageLang'
+
 // 引入语言文件
 import zh from './zh'
 import en from './en'
 
-// 读取本地存储中的语言配置
-const localStorageString = localStorage.getItem('KUNGalgame-settings')
-const lang = localStorageString
-  ? JSON.parse(localStorageString).showKUNGalgameLanguage
-  : 'en'
-
 const i18n = createI18n({
   locale: lang,
   // 支持 Vue3 composition API

src/utils/formatTime.ts

@@ -1,23 +1,34 @@
 import dayjs from 'dayjs'
 
-export const formatPublishTime = (time: number) => {
+// 读取本地存储中的语言配置
+import { lang } from '@/utils/localStorageLang'
+
+const language = lang === 'en' ? true : false
+
+/* 这里老问题不可以用 vue-i18n 的 t 函数，因为不在 setup 里面
+    mins, years 之类的就不用了，有点丑 */
+
+export const formatTime = (time: number) => {
   const publishTime = dayjs(time)
   const now = dayjs()
   const diffInSeconds = now.diff(publishTime, 'second')
 
   if (diffInSeconds < 60) {
-    return `${diffInSeconds}秒前`
+    return language ? `${diffInSeconds}s ago` : `${diffInSeconds}秒前`
   } else if (diffInSeconds < 3600) {
     const diffInMinutes = Math.floor(diffInSeconds / 60)
-    return `${diffInMinutes}分钟前`
+    return language ? `${diffInMinutes}min ago` : `${diffInMinutes}分钟前`
   } else if (diffInSeconds < 86400) {
     const diffInHours = Math.floor(diffInSeconds / 3600)
-    return `${diffInHours}小时前`
+    return language ? `${diffInHours}h ago` : `${diffInHours}时前`
   } else if (diffInSeconds < 2592000) {
     const diffInDays = Math.floor(diffInSeconds / 86400)
-    return `${diffInDays}天前`
+    return language ? `${diffInDays}day ago` : `${diffInDays}天前`
-  } else {
+  } else if (diffInSeconds < 31536000) {
     const diffInMonths = Math.floor(diffInSeconds / 2592000)
-    return `${diffInMonths}月前`
+    return language ? `${diffInMonths}month ago` : `${diffInMonths}月前`
+  } else {
+    const diffInMonths = Math.floor(diffInSeconds / 31536000)
+    return language ? `${diffInMonths}year ago` : `${diffInMonths}年前`
   }
 }

src/utils/localStorageLang.ts

@@ -0,0 +1,5 @@
+// 读取本地存储中的语言配置
+const localStorageString = localStorage.getItem('KUNGalgame-settings')
+export const lang = localStorageString
+  ? JSON.parse(localStorageString).showKUNGalgameLanguage
+  : 'en'

src/views/Home/content/article/components/TopicPart.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 
+// 导入 i18n 格式化时间的函数
+import { formatTime } from '@/utils/formatTime'
+
 defineProps(['data'])
 </script>
 <template>
@@ -34,7 +37,7 @@ defineProps(['data'])
       </div>
       <!-- 帖子的状态，点赞数等 -->
       <div class="topic-post-date">
-        <span>10小时前</span>
+        <span>{{ formatTime($props.data.topicPublishTime) }}</span>
       </div>
     </div>
     <!-- 帖子的预览介绍 -->