feat: integrate dayjs

auto-imports.d.ts

@@ -9,6 +9,7 @@ declare global {
   const addThemeCssVariousToHtml: typeof import('./src/utils/colord')['addThemeCssVariousToHtml']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const changeDayjsLocales: typeof import('./src/utils/dayjs')['changeDayjsLocales']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
@@ -25,6 +26,7 @@ declare global {
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
+  const dayjs: typeof import('./src/utils/dayjs')['default']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
@@ -323,6 +325,7 @@ declare module 'vue' {
     readonly addThemeCssVariousToHtml: UnwrapRef<typeof import('./src/utils/colord')['addThemeCssVariousToHtml']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
+    readonly changeDayjsLocales: UnwrapRef<typeof import('./src/utils/dayjs')['changeDayjsLocales']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
@@ -339,6 +342,7 @@ declare module 'vue' {
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly dayjs: UnwrapRef<typeof import('./src/utils/dayjs')['default']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>

package.json

@@ -21,6 +21,7 @@
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.4.0",
     "colord": "^2.9.3",
+    "dayjs": "^1.11.8",
     "driver.js": "^0.9.8",
     "echarts": "^5.4.2",
     "fuse.js": "^6.6.2",

src/composables/useApp/index.ts

@@ -1,5 +1,5 @@
 import { useGetLocalKey } from '@flypeng/tool/browser'
-import { internationalReg } from '~/utils'
+import { internationalReg, changeDayjsLocales } from '~/utils'
 import { THEME_MODE_KEY } from '~/vadmire.config'
 
 // To do things when init application
@@ -35,4 +35,7 @@ export function useApp() {
   }
   watch(defaultLocales, setHtmlTitle)
   watch(() => route.name, setHtmlTitle)
+
+  // init dayjs locales
+  changeDayjsLocales(defaultLocales.value)
 }

src/layout/components/layout/BaseSwitchLocale.vue

@@ -31,6 +31,8 @@ const clickSwitchLocale = (key: Locales) => {
   locale.value = key
   vadmireConfigStore.defaultLocales = key
 
+  changeDayjsLocales(key)
+
   localVAdmireConfig.defaultLocales = key
   useSetLocalKey(LOCAL_SYSTEM_KEY, JSON.stringify(localVAdmireConfig))
 }

src/utils/dayjs.ts

@@ -0,0 +1,29 @@
+import dayjs from 'dayjs'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import isToday from 'dayjs/plugin/isToday'
+import isYesterday from 'dayjs/plugin/isYesterday'
+import isTomorrow from 'dayjs/plugin/isTomorrow'
+import localeData from 'dayjs/plugin/localeData'
+
+import 'dayjs/locale/zh-cn'
+import 'dayjs/locale/en'
+import 'dayjs/locale/ko'
+
+import type { Locales } from '~/vadmire.config'
+
+dayjs.extend(isSameOrAfter)
+dayjs.extend(isSameOrBefore)
+dayjs.extend(isToday)
+dayjs.extend(isYesterday)
+dayjs.extend(isTomorrow)
+dayjs.extend(localeData)
+
+export const changeDayjsLocales = (locales: Locales) => {
+  if (locales === 'zh_CN') dayjs.locale('zh-cn')
+  else if (locales === 'en_US') dayjs.locale('en')
+  else if (locales === 'ko_KR') dayjs.locale('ko')
+  else dayjs.locale('zh-cn')
+}
+
+export default dayjs

src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './colord'
 export * from './echarts'
 export * from './i18n'
+export * from './dayjs'

src/views/SystemAbout.vue

@@ -34,7 +34,6 @@ Object.keys(devDependencies).forEach((key) => {
   devDependenciesItem.version = devDependencies[key]
   devDependenciesList.push(devDependenciesItem)
 })
-
 </script>
 
 <template>