4 changed files with 43 additions and 37 deletions
@ -1,8 +1,8 @@ |
|||||
# 应用标题 |
# 应用标题 |
||||
VITE_APP_TITLE=Vben Admin Antd |
VITE_APP_TITLE=Vben Admin Tdesign |
||||
|
|
||||
# 应用命名空间,用于缓存、store等功能的前缀,确保隔离 |
# 应用命名空间,用于缓存、store等功能的前缀,确保隔离 |
||||
VITE_APP_NAMESPACE=vben-web-antd |
VITE_APP_NAMESPACE=vben-web-tdesign |
||||
|
|
||||
# 对store进行加密的密钥,在将store持久化到localStorage时会使用该密钥进行加密 |
# 对store进行加密的密钥,在将store持久化到localStorage时会使用该密钥进行加密 |
||||
VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key |
VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key |
||||
|
|||||
@ -1,39 +1,32 @@ |
|||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { computed } from 'vue'; |
import { onMounted } from "vue"; |
||||
|
|
||||
import { useAntdDesignTokens } from '@vben/hooks'; |
import { usePreferences } from "@vben/preferences"; |
||||
import { preferences, usePreferences } from '@vben/preferences'; |
import { merge } from "@vben/utils"; |
||||
|
|
||||
import { App, ConfigProvider, theme } from 'ant-design-vue'; |
import { ConfigProvider } from "tdesign-vue-next"; |
||||
|
import zhConfig from "tdesign-vue-next/es/locale/zh_CN"; |
||||
import { antdLocale } from '#/locales'; |
|
||||
|
|
||||
defineOptions({ name: 'App' }); |
defineOptions({ name: 'App' }); |
||||
|
|
||||
const { isDark } = usePreferences(); |
const { isDark } = usePreferences(); |
||||
const { tokens } = useAntdDesignTokens(); |
|
||||
|
|
||||
const tokenTheme = computed(() => { |
onMounted(() => { |
||||
const algorithm = isDark.value |
document.documentElement.setAttribute( |
||||
? [theme.darkAlgorithm] |
'theme-mode', |
||||
: [theme.defaultAlgorithm]; |
isDark.value ? 'dark' : '', |
||||
|
); |
||||
// antd 紧凑模式算法 |
}); |
||||
if (preferences.app.compact) { |
|
||||
algorithm.push(theme.compactAlgorithm); |
|
||||
} |
|
||||
|
|
||||
return { |
const globalConfig = merge(zhConfig, { |
||||
algorithm, |
// 可以在此处定义更多自定义配置,具体可配置内容参看 API 文档 |
||||
token: tokens, |
calendar: {}, |
||||
}; |
table: {}, |
||||
|
pagination: {}, |
||||
}); |
}); |
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<ConfigProvider :locale="antdLocale" :theme="tokenTheme"> |
<ConfigProvider :global-config="globalConfig"> |
||||
<App> |
|
||||
<RouterView /> |
<RouterView /> |
||||
</App> |
|
||||
</ConfigProvider> |
</ConfigProvider> |
||||
</template> |
</template> |
||||
|
|||||
Loading…
Reference in new issue