feat: add font size adj

apps/web-ele/src/preferences.ts

@@ -22,6 +22,8 @@ export const overridesPreferences = defineOverridesPreferences({
   },
   theme: {
     mode: 'light',
+    size: 130,
+    menuSize: 22,
   },
 
   sidebar: {

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; */
   }

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 */

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 {

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));

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<string>('themeColorPrimary');
 const themeBuiltinType = defineModel<BuiltinThemeType>('themeBuiltinType');
 const themeMode = defineModel<ThemeModeType>('themeMode');
 const themeRadius = defineModel<string>('themeRadius');
+const themeSize = defineModel<number>('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<number>('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<boolean>('themeSemiDarkSidebar');
 const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
 
@@ -281,6 +304,19 @@ async function handleReset() {
             <Block :title="$t('preferences.theme.radius')">
               <Radius v-model="themeRadius" />
             </Block>
+            <Block :title="$t('preferences.theme.font')">
+              <NumberFieldItem
+                v-model="fontSize"
+                :max="200"
+                :min="100"
+                :step="10"
+              >
+                {{ $t('preferences.theme.fontsize') }}
+              </NumberFieldItem>
+              <NumberFieldItem v-model="menuSize" :max="32" :min="14" :step="2">
+                {{ $t('preferences.theme.menusize') }}
+              </NumberFieldItem>
+            </Block>
             <Block :title="$t('preferences.other')">
               <ColorMode
                 v-model:app-color-gray-mode="appColorGrayMode"

packages/locales/src/langs/en-US/preferences.json

@@ -107,6 +107,8 @@
     "darkHeader": "Semi Dark Header",
     "weakMode": "Weak Mode",
     "grayMode": "Gray Mode",
+    "size": "Font Size",
+
     "builtin": {
       "title": "Built-in",
       "default": "Default",

packages/locales/src/langs/zh-CN/preferences.json

@@ -24,6 +24,7 @@
   "normal": "常规",
   "plain": "朴素",
   "rounded": "圆润",
+
   "copyPreferences": "复制偏好设置",
   "copyPreferencesSuccessTitle": "复制成功",
   "copyPreferencesSuccess": "复制成功，请在 app 下的 `src/preferences.ts`内进行覆盖",
@@ -102,6 +103,9 @@
     "title": "主题",
     "radius": "圆角",
     "light": "浅色",
+    "fontsize": "通用",
+    "menusize": "菜单",
+    "font": "字体大小",
     "dark": "深色",
     "darkSidebar": "深色侧边栏",
     "darkHeader": "深色顶栏",