fix: recent comment relative time use round to floor instead

virtualansh · Aug 4, 2023 · b5f4ae4 · b5f4ae4
1 parent 03e0ac0
commit b5f4ae4
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 30 deletions.
diff --git a/src/components/Sidebar/src/RecentComment.vue b/src/components/Sidebar/src/RecentComment.vue
@@ -4,7 +4,7 @@
     <ul>
       <template v-if="isLoading === false">
         <li
-          class="bg-ob-deep-900 px-2 py-3 mb-1.5 rounded-lg flex flex-row justify-items-center items-stretch shadow-sm hover:shadow-ob transition-shadow"
+          class="bg-ob-deep-900 px-2 py-2 mb-1.5 rounded-lg flex flex-row justify-items-center items-stretch shadow-sm hover:shadow-ob transition-shadow"
           v-if="comments.length > 0"
           v-for="comment in comments"
           :key="comment.id"
@@ -19,7 +19,7 @@
             />
           </div>
           <div class="flex-1 text-xs">
-            <div class="text-xs">
+            <div class="text-xs mb-2 pt-1">
               <span class="text-ob pr-2">
                 {{ comment.user.login }}
                 <b
@@ -31,7 +31,7 @@
               </span>
               <p class="text-gray-500">{{ comment.created_at }}</p>
             </div>
-            <div class="text-xs text-ob-bright">
+            <div class="text-xs text-ob-bright pb-1">
               {{ comment.body }}
             </div>
           </div>
@@ -44,7 +44,7 @@
           <SvgIcon
             class="mr-2"
             icon-class="warning"
-            svgType="stroke"
+            :svgType="SvgTypes.stroke"
             stroke="var(--text-dim)"
           />
           {{ t('settings.empty-recent-comments') }}
@@ -105,6 +105,7 @@ import { useAppStore } from '@/stores/app'
 import { useI18n } from 'vue-i18n'
 import { TwikooComments } from '@/utils/comments/twikoo-api'
 import { WalineComments } from '@/utils/comments/waline-api'
+import { SvgTypes } from '@/components/SvgIcon/index.vue'
 
 export default defineComponent({
   name: 'ObRecentComment',
@@ -228,6 +229,7 @@ export default defineComponent({
     )
 
     return {
+      SvgTypes,
       isLoading: computed(() => loading.value),
       comments: computed(() => {
         return recentComments.value

diff --git a/src/utils/comments/twikoo-api.ts b/src/utils/comments/twikoo-api.ts
@@ -1,4 +1,4 @@
-import { RecentComment, formatCommentRelativeTime } from '..'
+import { RecentComment, formatTime } from '..'
 import { getGravatar, getGravatarUrl } from './gravatar'
 
 declare const twikoo: any
@@ -74,9 +74,9 @@ export class TwikooComments {
   }
 
   mapComment(comment: TwikooComment, gravatarUrl: string): RecentComment {
-    const createdAt = formatCommentRelativeTime(
-      new Date(Number(comment.created) - 8 * 1000 * 60 * 60).toISOString(),
-      this.configs.lang === 'cn' ? 'cn' : 'en'
+    const timezoneDiff = this.configs.lang === 'cn' ? 8 * 1000 * 60 * 60 : 0
+    const createdAt = formatTime(
+      new Date(Number(comment.created) - timezoneDiff).toISOString()
     )
     return {
       id: Number(comment.id),

diff --git a/src/utils/comments/waline-api.ts b/src/utils/comments/waline-api.ts
@@ -5,7 +5,7 @@ import {
   RecentComments
   // @ts-expect-error
 } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs'
-import { filterHTMLContent, formatCommentRelativeTime } from '..'
+import { filterHTMLContent, formatTime } from '..'
 import { PluginsData } from '@/models/ThemeConfig.class'
 
 type WalinePlugin = PluginsData['waline']
@@ -94,10 +94,7 @@ export class WalineComments {
   }
 
   mapComment(comment: WalineComment): RecentComments {
-    const createdAt = formatCommentRelativeTime(
-      this.convertDateFormat(comment.insertedAt),
-      this.configs.lang === 'cn' ? 'cn' : 'en'
-    )
+    const createdAt = formatTime(this.convertDateFormat(comment.insertedAt))
     return {
       id: comment.objectId,
       body: filterHTMLContent(comment.comment),

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -18,18 +18,6 @@ export interface RecentComment {
   cache_flag?: boolean
 }
 
-export function formatCommentRelativeTime(
-  time: number | string,
-  lang: 'en' | 'cn'
-) {
-  const templates = {
-    en: 'commented [TIME]',
-    cn: '[TIME]评论了'
-  }
-
-  return formatTime(time, { template: templates[lang], lang: lang })
-}
-
 /**
  * Formatting ISO time into readable times.
  */
@@ -88,22 +76,22 @@ export function formatTime(
   } else if (diff < 3600) {
     // Within 1 hour
     formattedTime =
-      String(Math.ceil(diff / 60)) + languages[configs.lang].minutes
+      String(Math.floor(diff / 60)) + languages[configs.lang].minutes
   } else if (diff < 3600 * 24) {
     // Within 1 day
     formattedTime =
-      String(Math.ceil(diff / 3600)) + languages[configs.lang].hours
+      String(Math.floor(diff / 3600)) + languages[configs.lang].hours
   } else if (diff < 3600 * 24 * 30) {
     // Within 1 month
     formattedTime =
-      String(Math.ceil(diff / 3600 / 24)) + languages[configs.lang].days
+      String(Math.floor(diff / 3600 / 24)) + languages[configs.lang].days
   } else if (diff < 3600 * 24 * 365) {
     // Within 1 year
     formattedTime =
-      String(Math.ceil(diff / 3600 / 24 / 30)) + languages[configs.lang].months
+      String(Math.floor(diff / 3600 / 24 / 30)) + languages[configs.lang].months
   } else {
     formattedTime =
-      String(Math.ceil(diff / 3600 / 24 / 365)) + languages[configs.lang].years
+      String(Math.floor(diff / 3600 / 24 / 365)) + languages[configs.lang].years
   }
 
   return configs.template.replace('[TIME]', formattedTime)