diff --git a/apps/web-ele/src/preferences.ts b/apps/web-ele/src/preferences.ts index 4c16899..326b8f6 100644 --- a/apps/web-ele/src/preferences.ts +++ b/apps/web-ele/src/preferences.ts @@ -22,6 +22,8 @@ export const overridesPreferences = defineOverridesPreferences({ }, theme: { mode: 'light', + size: 130, + menuSize: 22, }, sidebar: { diff --git a/packages/@core/base/design/src/css/global.css b/packages/@core/base/design/src/css/global.css index 9b96a78..4ceb794 100644 --- a/packages/@core/base/design/src/css/global.css +++ b/packages/@core/base/design/src/css/global.css @@ -14,7 +14,7 @@ } html { - @apply text-foreground bg-background font-sans text-[100%]; + @apply text-foreground bg-background font-sans; font-variation-settings: normal; line-height: 1.15; @@ -23,7 +23,7 @@ scroll-behavior: smooth; text-rendering: optimizelegibility; -webkit-tap-highlight-color: transparent; - + font-size: var(--global-size); /* -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; */ } diff --git a/packages/@core/base/design/src/design-tokens/default.css b/packages/@core/base/design/src/design-tokens/default.css index b999e12..e185749 100644 --- a/packages/@core/base/design/src/design-tokens/default.css +++ b/packages/@core/base/design/src/design-tokens/default.css @@ -88,7 +88,10 @@ /* 基本文字大小 */ --font-size-base: 16px; - + /* size */ + --global-size: 100%; + /* menu文字大小 */ + --contr-font-size: 14px; /* =============component & UI============= */ /* menu */ diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts index 2b536b8..7647d08 100644 --- a/packages/@core/preferences/src/types.ts +++ b/packages/@core/preferences/src/types.ts @@ -186,6 +186,8 @@ interface ThemePreferences { colorSuccess: string; /** 警告色 */ colorWarning: string; + /** 菜单字体大小 */ + menuSize?: number; /** 当前主题 */ mode: ThemeModeType; /** 圆角 */ @@ -194,6 +196,8 @@ interface ThemePreferences { semiDarkHeader: boolean; /** 是否开启半深色菜单(只在theme='light'时生效) */ semiDarkSidebar: boolean; + /** 组件大小 */ + size?: number; } interface TransitionPreferences { diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/packages/@core/ui-kit/menu-ui/src/components/menu.vue index ea7a14c..cf290ed 100644 --- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue +++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue @@ -440,7 +440,7 @@ $namespace: vben; --menu-item-collapse-margin-x: 0px; --menu-item-radius: 0px; --menu-item-indent: 16px; - --menu-font-size: 14px; + --menu-font-size: var(--contr-font-size); &.is-dark { --menu-background-color: hsl(var(--menu)); diff --git a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue index 77bf4d7..334e770 100644 --- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue +++ b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue @@ -52,6 +52,7 @@ import { Theme, Widget, } from './blocks'; +import NumberFieldItem from './blocks/number-field-item.vue'; const emit = defineEmits<{ clearPreferencesAndLogout: [] }>(); @@ -78,6 +79,28 @@ const themeColorPrimary = defineModel('themeColorPrimary'); const themeBuiltinType = defineModel('themeBuiltinType'); const themeMode = defineModel('themeMode'); const themeRadius = defineModel('themeRadius'); +const themeSize = defineModel('themeSize'); +const fontSize = computed({ + get() { + return themeSize.value; + }, + set(newValue: number) { + themeSize.value = newValue; + const root = document.documentElement; + root.style.setProperty('--global-size', `${newValue}%`); + }, +}); +const themeMenuSize = defineModel('themeMenuSize', { default: 14 }); +const menuSize = computed({ + get() { + return themeMenuSize.value; + }, + set(newValue: number) { + themeMenuSize.value = newValue; + const root = document.documentElement; + root.style.setProperty('--contr-font-size', `${newValue}px`); + }, +}); const themeSemiDarkSidebar = defineModel('themeSemiDarkSidebar'); const themeSemiDarkHeader = defineModel('themeSemiDarkHeader'); @@ -281,6 +304,19 @@ async function handleReset() { + + + {{ $t('preferences.theme.fontsize') }} + + + {{ $t('preferences.theme.menusize') }} + +