diff --git a/package.json b/package.json index 06e706947..183e7ca04 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "node": ">=20.10.0", "pnpm": ">=9.12.0" }, - "packageManager": "pnpm@10.14.0", + "packageManager": "pnpm@10.21.0", "pnpm": { "peerDependencyRules": { "allowedVersions": { diff --git a/packages/@core/base/design/src/css/global.css b/packages/@core/base/design/src/css/global.css index d19990985..dc154fc72 100644 --- a/packages/@core/base/design/src/css/global.css +++ b/packages/@core/base/design/src/css/global.css @@ -14,8 +14,9 @@ } html { - @apply text-foreground bg-background font-sans text-[100%]; + @apply text-foreground bg-background font-sans; + font-size: var(--font-size-base, 16px); font-variation-settings: normal; line-height: 1.15; text-size-adjust: 100%; diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts index 5b8d72363..d9977b1ef 100644 --- a/packages/@core/preferences/src/config.ts +++ b/packages/@core/preferences/src/config.ts @@ -116,6 +116,7 @@ const defaultPreferences: Preferences = { colorWarning: 'hsl(42 84% 61%)', mode: 'dark', radius: '0.5', + fontSize: 16, semiDarkHeader: false, semiDarkSidebar: false, }, diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts index 9a4d94bdf..685ffa2ef 100644 --- a/packages/@core/preferences/src/types.ts +++ b/packages/@core/preferences/src/types.ts @@ -243,6 +243,8 @@ interface ThemePreferences { mode: ThemeModeType; /** 圆角 */ radius: string; + /** 字体大小(单位:px) */ + fontSize: number; /** 是否开启半深色header(只在theme='light'时生效) */ semiDarkHeader: boolean; /** 是否开启半深色菜单(只在theme='light'时生效) */ diff --git a/packages/@core/preferences/src/update-css-variables.ts b/packages/@core/preferences/src/update-css-variables.ts index 0d3466a01..b00be7825 100644 --- a/packages/@core/preferences/src/update-css-variables.ts +++ b/packages/@core/preferences/src/update-css-variables.ts @@ -66,6 +66,14 @@ function updateCSSVariables(preferences: Preferences) { if (Reflect.has(theme, 'radius')) { document.documentElement.style.setProperty('--radius', `${radius}rem`); } + + // 更新字体大小 + if (Reflect.has(theme, 'fontSize')) { + document.documentElement.style.setProperty( + '--font-size-base', + `${theme.fontSize}px`, + ); + } } /** 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 887604567..624be2910 100644 --- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue +++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue @@ -444,7 +444,7 @@ $namespace: vben; .#{$namespace}-menu__popup-container, .#{$namespace}-menu { --menu-title-width: 140px; - --menu-item-icon-size: 16px; + --menu-item-icon-size: var(--font-size-base, 16px); --menu-item-height: 38px; --menu-item-padding-y: 21px; --menu-item-padding-x: 12px; @@ -458,7 +458,7 @@ $namespace: vben; --menu-item-collapse-margin-x: 0px; --menu-item-radius: 0px; --menu-item-indent: 16px; - --menu-font-size: 14px; + --menu-font-size: calc(var(--font-size-base, 16px) * 0.875); &.is-dark { --menu-background-color: hsl(var(--menu)); @@ -752,7 +752,7 @@ $namespace: vben; } .#{$namespace}-menu__icon { display: block; - font-size: 20px !important; + font-size: calc(var(--font-size-base, 16px) * 1.25) !important; transition: all 0.25s ease; } @@ -760,7 +760,7 @@ $namespace: vben; display: inline-flex; margin-top: 8px; margin-bottom: 0; - font-size: 12px; + font-size: calc(var(--font-size-base, 16px) * 0.75); font-weight: 400; line-height: normal; transition: all 0.25s ease; diff --git a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue index 7cb29e512..0c4142d22 100644 --- a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue +++ b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue @@ -102,7 +102,7 @@ $namespace: vben; } .#{$namespace}-normal-menu__icon { - font-size: 20px; + font-size: calc(var(--font-size-base, 16px) * 1.25); } } @@ -146,14 +146,14 @@ $namespace: vben; &__icon { max-height: 20px; - font-size: 20px; + font-size: calc(var(--font-size-base, 16px) * 1.25); transition: all 0.25s ease; } &__name { margin-top: 8px; margin-bottom: 0; - font-size: 12px; + font-size: calc(var(--font-size-base, 16px) * 0.75); font-weight: 400; transition: all 0.25s ease; } diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/index.ts b/packages/effects/layouts/src/widgets/preferences/blocks/index.ts index 59595dc48..cdd6bb1db 100644 --- a/packages/effects/layouts/src/widgets/preferences/blocks/index.ts +++ b/packages/effects/layouts/src/widgets/preferences/blocks/index.ts @@ -15,5 +15,6 @@ export { default as GlobalShortcutKeys } from './shortcut-keys/global.vue'; export { default as SwitchItem } from './switch-item.vue'; export { default as BuiltinTheme } from './theme/builtin.vue'; export { default as ColorMode } from './theme/color-mode.vue'; +export { default as FontSize } from './theme/font-size.vue'; export { default as Radius } from './theme/radius.vue'; export { default as Theme } from './theme/theme.vue'; diff --git a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue index 301004d6e..a90c27dc0 100644 --- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue +++ b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue @@ -44,6 +44,7 @@ import { Content, Copyright, Footer, + FontSize, General, GlobalShortcutKeys, Header, @@ -85,6 +86,7 @@ const themeColorPrimary = defineModel('themeColorPrimary'); const themeBuiltinType = defineModel('themeBuiltinType'); const themeMode = defineModel('themeMode'); const themeRadius = defineModel('themeRadius'); +const themeFontSize = defineModel('themeFontSize'); const themeSemiDarkSidebar = defineModel('themeSemiDarkSidebar'); const themeSemiDarkHeader = defineModel('themeSemiDarkHeader'); @@ -328,6 +330,9 @@ async function handleReset() { + + +