Browse Source

feat: add global font size adjustment

米山 7 months ago
parent
commit
0bc7169698

+ 2 - 2
packages/@core/preferences/src/types.ts

@@ -239,12 +239,12 @@ interface ThemePreferences {
   colorSuccess: string;
   /** 警告色 */
   colorWarning: string;
+  /** 字体大小(单位:px) */
+  fontSize: number;
   /** 当前主题 */
   mode: ThemeModeType;
   /** 圆角 */
   radius: string;
-  /** 字体大小(单位:px) */
-  fontSize: number;
   /** 是否开启半深色header(只在theme='light'时生效) */
   semiDarkHeader: boolean;
   /** 是否开启半深色菜单(只在theme='light'时生效) */

+ 62 - 0
packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import {
+  NumberField,
+  NumberFieldContent,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceFontSize',
+});
+
+const modelValue = defineModel<number>({
+  default: 16,
+});
+
+const min = 15;
+const max = 22;
+const step = 1;
+
+// 限制输入值在 min 和 max 之间
+watch(
+  modelValue,
+  (newValue) => {
+    if (newValue < min) {
+      modelValue.value = min;
+    } else if (newValue > max) {
+      modelValue.value = max;
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-4">
+    <div class="flex items-center gap-2">
+      <NumberField
+        v-model="modelValue"
+        :max="max"
+        :min="min"
+        :step="step"
+        class="w-full"
+      >
+        <NumberFieldContent>
+          <NumberFieldDecrement />
+          <NumberFieldInput />
+          <NumberFieldIncrement />
+        </NumberFieldContent>
+      </NumberField>
+      <span class="text-muted-foreground whitespace-nowrap text-xs">px</span>
+    </div>
+    <div class="text-muted-foreground text-xs">
+      {{ $t('preferences.theme.fontSizeTip') }}
+    </div>
+  </div>
+</template>

+ 1 - 1
packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue

@@ -43,8 +43,8 @@ import {
   ColorMode,
   Content,
   Copyright,
-  Footer,
   FontSize,
+  Footer,
   General,
   GlobalShortcutKeys,
   Header,