[Page] [Layout] Add monent i18n

src/main.ts

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from '@/router'
 import i18n from '@/i18n'
 import moment from 'moment'
+import momentCN from './moment/zhCn'
 import './style.css'
 import './assets/index.css'
 
@@ -13,5 +14,8 @@ const app = createApp(App)
 app.use(router)
 app.use(i18n)
 app.provide('$t', i18n.global.t)
+// Setting moment
+moment.locale('zh-cn', momentCN as any)
 app.config.globalProperties.$dt = moment
+app.provide('$dt', moment)
 app.mount('#app')

src/moment/zhCn.ts

@@ -0,0 +1,101 @@
+const momentCN = {
+    months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
+    monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
+    weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
+    weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
+    weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
+    longDateFormat: {
+        LT: 'HH:mm',
+        LTS: 'HH:mm:ss',
+        L: 'YYYY-MM-DD',
+        LL: 'YYYY年MM月DD日',
+        LLL: 'YYYY年MM月DD日Ah点mm分',
+        LLLL: 'YYYY年MM月DD日ddddAh点mm分',
+        l: 'YYYY-M-D',
+        ll: 'YYYY年M月D日',
+        lll: 'YYYY年M月D日 HH:mm',
+        llll: 'YYYY年M月D日dddd HH:mm'
+    },
+    meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
+    meridiemHour: function (hour: number, meridiem: string) {
+        if (hour === 12) {
+            hour = 0;
+        }
+        if (meridiem === '凌晨' || meridiem === '早上' ||
+            meridiem === '上午') {
+            return hour;
+        }
+        else if (meridiem === '下午' || meridiem === '晚上') {
+            return hour + 12;
+        }
+        else {
+            return hour >= 11 ? hour : hour + 12;
+        }
+    },
+    meridiem: function (hour: number, minute: number) {
+        const hm = hour * 100 + minute;
+        if (hm < 600) {
+            return '凌晨';
+        }
+        else if (hm < 900) {
+            return '早上';
+        }
+        else if (hm < 1130) {
+            return '上午';
+        }
+        else if (hm < 1230) {
+            return '中午';
+        }
+        else if (hm < 1800) {
+            return '下午';
+        }
+        else {
+            return '晚上';
+        }
+    },
+    calendar: {
+        sameDay: '[今天]LT',
+        nextDay: '[明天]LT',
+        nextWeek: '[下]ddddLT',
+        lastDay: '[昨天]LT',
+        lastWeek: '[上]ddddLT',
+        sameElse: 'L'
+    },
+    dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
+    ordinal: function (number: number, period: string) {
+        switch (period) {
+            case 'd':
+            case 'D':
+            case 'DDD':
+                return number + '日';
+            case 'M':
+                return number + '月';
+            case 'w':
+            case 'W':
+                return number + '周';
+            default:
+                return number;
+        }
+    },
+    relativeTime: {
+        future: '%s内',
+        past: '%s前',
+        s: '几秒',
+        ss: '%d秒',
+        m: '1分钟',
+        mm: '%d分钟',
+        h: '1小时',
+        hh: '%d小时',
+        d: '1天',
+        dd: '%d天',
+        M: '1个月',
+        MM: '%d个月',
+        y: '1年',
+        yy: '%d年'
+    },
+    week: {
+        dow: 1, // Monday is the first day of the week.
+        doy: 4 // The week that contains Jan 4th is the first week of the year.
+    }
+}
+export default momentCN

src/views/layouts/base/components/components/NotificationNavigation.vue

@@ -26,7 +26,7 @@
               <div class="space-y-1">
                 <p class="text-sm font-medium leading-none">{{ notification.title }}</p>
                 <p class="text-sm text-muted-foreground">{{ notification.description }}</p>
-                <p class="text-sm text-muted-foreground">{{ $dt(notification.createTime).fromNow() }}</p>
+                <p class="text-sm text-muted-foreground">{{ formatDate(notification.createTime) }}</p>
               </div>
             </div>
           </div>
@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, inject } from 'vue'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { BellIcon, BellRing, CheckIcon } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
@@ -63,10 +63,17 @@ export default defineComponent({
   },
   setup()
   {
+    const $dt = inject('$dt')
     const notifications = NotificationService.getNotifications()
 
+    const formatDate = (value: any) => {
+      // @ts-ignore
+      return $dt(value).fromNow()
+    }
+
     return {
       cn,
+      formatDate,
       notifications
     }
   }