From c1446c024fb6983b0dff4fba08d17c1a7f77ede1 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Thu, 8 Jun 2023 23:19:32 +0800
Subject: [PATCH] time format, optimize i18n

---
 src/language/i18n.ts                          |  9 +++----
 src/utils/formatTime.ts                       | 25 +++++++++++++------
 src/utils/localStorageLang.ts                 |  5 ++++
 .../content/article/components/TopicPart.vue  |  5 +++-
 4 files changed, 30 insertions(+), 14 deletions(-)
 create mode 100644 src/utils/localStorageLang.ts

diff --git a/src/language/i18n.ts b/src/language/i18n.ts
index e5e454f7..c8393bef 100644
--- a/src/language/i18n.ts
+++ b/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
diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
index 75a5d0a0..0e597fc9 100644
--- a/src/utils/formatTime.ts
+++ b/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}天前`
-  } else {
+    return language ? `${diffInDays}day ago` : `${diffInDays}天前`
+  } 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}年前`
   }
 }
diff --git a/src/utils/localStorageLang.ts b/src/utils/localStorageLang.ts
new file mode 100644
index 00000000..f2f3f7e6
--- /dev/null
+++ b/src/utils/localStorageLang.ts
@@ -0,0 +1,5 @@
+// 读取本地存储中的语言配置
+const localStorageString = localStorage.getItem('KUNGalgame-settings')
+export const lang = localStorageString
+  ? JSON.parse(localStorageString).showKUNGalgameLanguage
+  : 'en'
diff --git a/src/views/Home/content/article/components/TopicPart.vue b/src/views/Home/content/article/components/TopicPart.vue
index da5945e9..535d28a3 100644
--- a/src/views/Home/content/article/components/TopicPart.vue
+++ b/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>
     <!-- 帖子的预览介绍 -->