mirror of
https://gitee.com/yudaocode/yudao-ui-admin-vben.git
synced 2025-12-30 10:32:25 +00:00
feat: add global font size adjustment
This commit is contained in:
@@ -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'时生效) */
|
||||
|
||||
@@ -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>
|
||||
@@ -43,8 +43,8 @@ import {
|
||||
ColorMode,
|
||||
Content,
|
||||
Copyright,
|
||||
Footer,
|
||||
FontSize,
|
||||
Footer,
|
||||
General,
|
||||
GlobalShortcutKeys,
|
||||
Header,
|
||||
|
||||
Reference in New Issue
Block a user