feat: add global font size adjustment

This commit is contained in:
米山
2025-11-12 17:39:07 +08:00
parent 24b6e7a835
commit 0bc7169698
3 changed files with 65 additions and 3 deletions

View File

@@ -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'时生效) */

View File

@@ -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>

View File

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