feat: i18n use timeAgo

Author: enpitsuLin

src/components/DataTable.vue

@@ -56,7 +56,7 @@
               <td
                 class="whitespace-nowrap text-ellipsis break-all overflow-hidden px-3 py-2 text-xs text-$ud-text-secondary"
               >
-                {{ formatTimeAgo(new Date(item.code_updated_at)) }}
+                {{ formatTimeAgoWithI18n(new Date(item.code_updated_at)) }}
               </td>
               <td
                 class="relative whitespace-nowrap py-2 pl-3 pr-4 text-right text-xs font-medium"
@@ -119,7 +119,7 @@
 </template>
 
 <script setup lang="ts">
-  import { formatTimeAgo } from '@vueuse/core';
+  import { formatTimeAgo, UseTimeAgoUnitNamesDefault } from '@vueuse/core';
   import { GreasyforkScript } from '../composables/data';
 
   const props = defineProps<{ data: GreasyforkScript[] }>();
@@ -135,4 +135,42 @@
   };
 
   const { t } = useI18n();
+
+  const formatTimeAgoWithI18n = (from: Date) => {
+    return formatTimeAgo<UseTimeAgoUnitNamesDefault>(from, {
+      messages: {
+        justNow: t('time-ago.just-now'),
+        past: (n) => (n.match(/\d/) ? t('time-ago.past', { n }) : n),
+        future: (n) => (n.match(/\d/) ? t('time-ago.future', { n }) : n),
+        month: (n, past) =>
+          n === 1
+            ? past
+              ? t('time-ago.month.past')
+              : t('time-ago.month.future')
+            : t('time-ago.month.n', { n }),
+        year: (n, past) =>
+          n === 1
+            ? past
+              ? t('time-ago.year.past')
+              : t('time-ago.year.future')
+            : t('time-ago.year.n', { n }),
+        day: (n, past) =>
+          n === 1
+            ? past
+              ? t('time-ago.day.past')
+              : t('time-ago.day.future')
+            : t('time-ago.day.n', { n }),
+        week: (n, past) =>
+          n === 1
+            ? past
+              ? t('time-ago.week.past')
+              : t('time-ago.week.future')
+            : t('time-ago.week.n', { n }),
+        hour: (n) => t('time-ago.hour', { n }),
+        minute: (n) => t('time-ago.minute', { n }),
+        second: (n) => t('time-ago.second', { n }),
+        invalid: 'invalid'
+      }
+    });
+  };
 </script>

src/locales/cn.json

@@ -17,5 +17,34 @@
   "language": "语言",
   "language-desc": "切换用户语言设置",
   "enable": "本页启用",
-  "enable-desc": "控制本页面是否启用功能(会话)"
+  "enable-desc": "控制本页面是否启用功能(会话)",
+  "time-ago": {
+    "just-now": "就在刚刚",
+    "past": "{n}前",
+    "future": "{n}后",
+    "month": {
+      "past": "上个月",
+      "future": "下个月",
+      "n": "{n}个月"
+    },
+    "year": {
+      "past": "去年",
+      "future": "明年",
+      "n": "{n}年"
+    },
+    "day": {
+      "past": "昨天",
+      "future": "明天",
+      "n": "{n}天"
+    },
+    "week": {
+      "past": "上周",
+      "future": "下周",
+      "n": "{n}周"
+    },
+    "hour": "{n}小时",
+    "minute": "{n}分钟",
+    "second": "{n}秒",
+    "invalid": "无效"
+  }
 }

src/locales/en.json

@@ -17,5 +17,34 @@
   "language": "Language",
   "language-desc": "Switch language",
   "enable": "Enable on this page",
-  "enable-desc": "To enable this plugin on this page or not (Session)"
+  "enable-desc": "To enable this plugin on this page or not (Session)",
+  "time-ago": {
+    "just-now": "just now",
+    "past": "{n} ago",
+    "future": "in {n}",
+    "month": {
+      "past": "last month",
+      "future": "next month",
+      "n": "{n} month | {n} months"
+    },
+    "year": {
+      "past": "last year",
+      "future": "next year",
+      "n": "{n} year | {n} years"
+    },
+    "day": {
+      "past": "yesterday",
+      "future": "tomorrow",
+      "n": "{n} day | {n} days"
+    },
+    "week": {
+      "past": "last week",
+      "future": "next week",
+      "n": "{n} week | {n} weeks"
+    },
+    "hour": "{n} hour |{n} hours",
+    "minute": "{n} minute |{n} minutes",
+    "second": "{n} second |{n} seconds",
+    "invalid": ""
+  }
 }