feat(projects): antd locale, dayjs locale

package.json

@@ -32,6 +32,7 @@
     "@vueuse/core": "10.6.1",
     "ant-design-vue": "4.0.7",
     "clipboard": "2.0.11",
+    "dayjs": "^1.11.10",
     "lodash-es": "4.17.21",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",

src/App.vue

@@ -1,16 +1,24 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { ConfigProvider } from 'ant-design-vue';
+import { useAppStore } from './store/modules/app';
 import { useThemeStore } from './store/modules/theme';
+import { antdLocales } from './locales/antd';
 
 defineOptions({
   name: 'App'
 });
 
+const appStore = useAppStore();
 const themeStore = useThemeStore();
+
+const antdLocale = computed(() => {
+  return antdLocales[appStore.locale];
+});
 </script>
 
 <template>
-  <ConfigProvider :theme="themeStore.antdTheme">
+  <ConfigProvider :theme="themeStore.antdTheme" :locale="antdLocale">
     <AppProvider>
       <RouterView class="bg-layout" />
     </AppProvider>

src/locales/antd.ts

@@ -0,0 +1,8 @@
+import type { Locale } from 'ant-design-vue/es/locale';
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
+import enUS from 'ant-design-vue/es/locale/en_US';
+
+export const antdLocales: Record<App.I18n.LangType, Locale> = {
+  'zh-CN': zhCN,
+  'en-US': enUS
+};

src/locales/dayjs.ts

@@ -0,0 +1,19 @@
+import { locale } from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import { localStg } from '@/utils/storage';
+
+/**
+ * set dayjs locale
+ * @param lang
+ */
+export function setDayjsLocale(lang: App.I18n.LangType = 'zh-CN') {
+  const localMap = {
+    'zh-CN': 'zh-cn',
+    'en-US': 'en'
+  } satisfies Record<App.I18n.LangType, string>;
+
+  const l = lang || localStg.get('lang') || 'zh-CN';
+
+  locale(localMap[l]);
+}

src/locales/locale.ts

@@ -1,9 +1,9 @@
 import zhCN from './lang/zh-CN';
-import en from './lang/en';
+import enUS from './lang/en-us';
 
 const locales: Record<App.I18n.LangType, App.I18n.Schema> = {
   'zh-CN': zhCN,
-  en
+  'en-US': enUS
 };
 
 export default locales;

src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue';
 import './plugins/assets';
-import { setupNProgress, setupIconifyOffline } from './plugins';
+import { setupNProgress, setupIconifyOffline, setupDayjs } from './plugins';
 import { setupStore } from './store';
 import { setupRouter } from './router';
 import { setupI18n } from './locales';
@@ -11,6 +11,8 @@ async function setupApp() {
 
   setupIconifyOffline();
 
+  setupDayjs();
+
   const app = createApp(App);
 
   setupStore(app);

src/plugins/dayjs.ts

@@ -0,0 +1,9 @@
+import { extend } from 'dayjs';
+import localeData from 'dayjs/plugin/localeData';
+import { setDayjsLocale } from '../locales/dayjs';
+
+export function setupDayjs() {
+  extend(localeData);
+
+  setDayjsLocale();
+}

src/plugins/index.ts

@@ -1,2 +1,3 @@
 export * from './nprogress';
 export * from './iconify';
+export * from './dayjs';

src/store/modules/app/index.ts

@@ -5,6 +5,7 @@ import { useBoolean } from '@sa/hooks';
 import { SetupStoreId } from '@/enum';
 import { router } from '@/router';
 import { $t, setLocale } from '@/locales';
+import { setDayjsLocale } from '@/locales/dayjs';
 import { localStg } from '@/utils/storage';
 import { useRouteStore } from '../route';
 import { useTabStore } from '../tab';
@@ -53,7 +54,7 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
     },
     {
       label: 'English',
-      key: 'en'
+      key: 'en-US'
     }
   ];
 
@@ -74,6 +75,10 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
     useTitle(documentTitle);
   }
 
+  function init() {
+    setDayjsLocale(locale.value);
+  }
+
   // watch store
   scope.run(() => {
     // watch isMobile, if is mobile, collapse sider
@@ -91,9 +96,17 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
 
     // watch locale
     watch(locale, () => {
+      // update document title by locale
       updateDocumentTitleByLocale();
+
+      // update global menus by locale
       routeStore.updateGlobalMenusByLocale();
+
+      // update tabs by locale
       tabStore.updateTabsByLocale();
+
+      // sey dayjs locale
+      setDayjsLocale(locale.value);
     });
   });
 
@@ -104,6 +117,9 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
     scope.stop();
   });
 
+  // init
+  init();
+
   return {
     isMobile,
     reloadFlag,

src/typings/app.d.ts

@@ -336,11 +336,11 @@ declare namespace App {
   namespace I18n {
     type RouteKey = import('@elegant-router/types').RouteKey;
 
-    type LangType = 'en' | 'zh-CN';
+    type LangType = 'en-US' | 'zh-CN';
 
     type LangOption = {
       label: string;
-      key: App.I18n.LangType;
+      key: LangType;
     };
 
     type I18nRouteKey = Exclude<RouteKey, 'root' | 'not-found'>;

src/typings/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
     AButton: typeof import('ant-design-vue/es')['Button']
+    ACalendar: typeof import('ant-design-vue/es')['Calendar']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ADivider: typeof import('ant-design-vue/es')['Divider']

src/views/home/index.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts"></script>
 
 <template>
-  <LookForward />
+  <div>
+    <ACalendar :fullscreen="false" />
+  </div>
 </template>
 
 <style scoped></style>