51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
<script lang="ts" setup>
|
||
import { computed, watch } from 'vue';
|
||
|
||
import { useAntdDesignTokens } from '@vben/hooks';
|
||
import { preferences, usePreferences } from '@vben/preferences';
|
||
|
||
import { App, ConfigProvider, StyleProvider, theme } from 'antdv-next';
|
||
|
||
import { antdLocale } from '#/locales';
|
||
|
||
defineOptions({ name: 'App' });
|
||
|
||
const { isDark } = usePreferences();
|
||
const { tokens } = useAntdDesignTokens();
|
||
|
||
const tokenTheme = computed(() => {
|
||
const algorithm = isDark.value
|
||
? [theme.darkAlgorithm]
|
||
: [theme.defaultAlgorithm];
|
||
|
||
// antd 紧凑模式算法
|
||
if (preferences.app.compact) {
|
||
algorithm.push(theme.compactAlgorithm);
|
||
}
|
||
|
||
return {
|
||
algorithm,
|
||
token: tokens,
|
||
};
|
||
});
|
||
|
||
watch(
|
||
tokenTheme,
|
||
(themeConfig) => {
|
||
ConfigProvider.config({ theme: themeConfig });
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
</script>
|
||
|
||
<template>
|
||
<!-- layer: antd 组件样式注入 @layer antd，让 Tailwind 工具类可以覆盖组件样式 -->
|
||
<StyleProvider layer>
|
||
<ConfigProvider :locale="antdLocale" :theme="tokenTheme">
|
||
<App>
|
||
<RouterView />
|
||
</App>
|
||
</ConfigProvider>
|
||
</StyleProvider>
|
||
</template>
|