|
1 | 1 | <script lang="ts" setup> |
2 | | -import { computed } from 'vue'; |
| 2 | +import { onMounted } from "vue"; |
3 | 3 |
|
4 | | -import { useAntdDesignTokens } from '@vben/hooks'; |
5 | | -import { preferences, usePreferences } from '@vben/preferences'; |
| 4 | +import { usePreferences } from "@vben/preferences"; |
| 5 | +import { merge } from "@vben/utils"; |
6 | 6 |
|
7 | | -import { App, ConfigProvider, theme } from 'ant-design-vue'; |
8 | | -
|
9 | | -import { antdLocale } from '#/locales'; |
| 7 | +import { ConfigProvider } from "tdesign-vue-next"; |
| 8 | +import zhConfig from "tdesign-vue-next/es/locale/zh_CN"; |
10 | 9 |
|
11 | 10 | defineOptions({ name: 'App' }); |
12 | | -
|
13 | 11 | const { isDark } = usePreferences(); |
14 | | -const { tokens } = useAntdDesignTokens(); |
15 | 12 |
|
16 | | -const tokenTheme = computed(() => { |
17 | | - const algorithm = isDark.value |
18 | | - ? [theme.darkAlgorithm] |
19 | | - : [theme.defaultAlgorithm]; |
20 | | -
|
21 | | - // antd 紧凑模式算法 |
22 | | - if (preferences.app.compact) { |
23 | | - algorithm.push(theme.compactAlgorithm); |
24 | | - } |
| 13 | +onMounted(() => { |
| 14 | + document.documentElement.setAttribute( |
| 15 | + 'theme-mode', |
| 16 | + isDark.value ? 'dark' : '', |
| 17 | + ); |
| 18 | +}); |
25 | 19 |
|
26 | | - return { |
27 | | - algorithm, |
28 | | - token: tokens, |
29 | | - }; |
| 20 | +const globalConfig = merge(zhConfig, { |
| 21 | + // 可以在此处定义更多自定义配置,具体可配置内容参看 API 文档 |
| 22 | + calendar: {}, |
| 23 | + table: {}, |
| 24 | + pagination: {}, |
30 | 25 | }); |
31 | 26 | </script> |
32 | 27 |
|
33 | 28 | <template> |
34 | | - <ConfigProvider :locale="antdLocale" :theme="tokenTheme"> |
35 | | - <App> |
| 29 | + <ConfigProvider :global-config="globalConfig"> |
36 | 30 | <RouterView /> |
37 | | - </App> |
38 | 31 | </ConfigProvider> |
39 | 32 | </template> |
0 commit comments