From ab4b26c89421da1019c575857b77f9b41d950846 Mon Sep 17 00:00:00 2001
From: sroxck <642261686@qq.com>
Date: Fri, 8 Nov 2024 10:17:36 +0800
Subject: [PATCH] feat: add font size adj

---
 apps/web-ele/src/preferences.ts               |  2 ++
 packages/@core/base/design/src/css/global.css |  4 +--
 .../base/design/src/design-tokens/default.css |  5 ++-
 packages/@core/preferences/src/types.ts       |  4 +++
 .../ui-kit/menu-ui/src/components/menu.vue    |  2 +-
 .../preferences/preferences-drawer.vue        | 36 +++++++++++++++++++
 .../locales/src/langs/en-US/preferences.json  |  2 ++
 .../locales/src/langs/zh-CN/preferences.json  |  4 +++
 8 files changed, 55 insertions(+), 4 deletions(-)

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<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"
diff --git a/packages/locales/src/langs/en-US/preferences.json b/packages/locales/src/langs/en-US/preferences.json
index 8ba3cce..9b93f8e 100644
--- a/packages/locales/src/langs/en-US/preferences.json
+++ b/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",
diff --git a/packages/locales/src/langs/zh-CN/preferences.json b/packages/locales/src/langs/zh-CN/preferences.json
index 8f5038e..757ac9d 100644
--- a/packages/locales/src/langs/zh-CN/preferences.json
+++ b/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": "深色顶栏",