Przeglądaj źródła

chore(config): 配置 antdv 主题色和国际化

wangcong 3 miesięcy temu
rodzic
commit
864b0e2ae3
5 zmienionych plików z 38 dodań i 4 usunięć
  1. 1 1
      eslint.config.js
  2. 1 0
      package.json
  3. 3 0
      pnpm-lock.yaml
  4. 3 3
      src/App.vue
  5. 30 0
      src/components/AntdConfig.vue

+ 1 - 1
eslint.config.js

@@ -90,7 +90,7 @@ export default tseslint.config(
       'import/no-unassigned-import': [
         'error',
         {
-          allow: ['**/*.{css,scss}', '**/styles', 'element-plus/**/style/css'],
+          allow: ['**/*.{css,scss}', '**/styles', 'element-plus/**/style/css', 'dayjs/locale/*'],
         },
       ],
     },

+ 1 - 0
package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "ant-design-vue": "^4.2.6",
+    "dayjs": "^1.11.13",
     "element-plus": "^2.9.3",
     "pinia": "^2.3.0",
     "vue": "^3.5.13",

+ 3 - 0
pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       ant-design-vue:
         specifier: ^4.2.6
         version: 4.2.6(vue@3.5.13(typescript@5.6.3))
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
       element-plus:
         specifier: ^2.9.3
         version: 2.9.3(vue@3.5.13(typescript@5.6.3))

+ 3 - 3
src/App.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router';
 
-import ElementConfig from './components/ElementConfig.vue';
+import AntdConfig from './components/AntdConfig.vue';
 </script>
 
 <template>
-  <ElementConfig>
+  <AntdConfig>
     <header>
       <nav>
         <RouterLink to="/">Home</RouterLink> |
@@ -13,7 +13,7 @@ import ElementConfig from './components/ElementConfig.vue';
       </nav>
     </header>
     <RouterView />
-  </ElementConfig>
+  </AntdConfig>
 </template>
 
 <style lang="scss">

+ 30 - 0
src/components/AntdConfig.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import enUS from 'ant-design-vue/es/locale/en_US';
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
+
+import { LanguageType } from '@/constants';
+
+import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
+
+import 'dayjs/locale/zh-cn';
+
+const { locale: language } = useI18n();
+
+const theme: ThemeConfig = {
+  token: {
+    colorPrimary: '#32BAC0',
+  },
+};
+
+const locale = computed(() => {
+  return language.value === LanguageType.ZH ? zhCN : enUS;
+});
+</script>
+
+<template>
+  <AConfigProvider :theme="theme" :locale="locale">
+    <slot></slot>
+  </AConfigProvider>
+</template>