feat: add global font size adjustment
This commit is contained in:
@@ -239,12 +239,12 @@ interface ThemePreferences {
|
|||||||
colorSuccess: string;
|
colorSuccess: string;
|
||||||
/** 警告色 */
|
/** 警告色 */
|
||||||
colorWarning: string;
|
colorWarning: string;
|
||||||
|
/** 字体大小(单位:px) */
|
||||||
|
fontSize: number;
|
||||||
/** 当前主题 */
|
/** 当前主题 */
|
||||||
mode: ThemeModeType;
|
mode: ThemeModeType;
|
||||||
/** 圆角 */
|
/** 圆角 */
|
||||||
radius: string;
|
radius: string;
|
||||||
/** 字体大小(单位:px) */
|
|
||||||
fontSize: number;
|
|
||||||
/** 是否开启半深色header(只在theme='light'时生效) */
|
/** 是否开启半深色header(只在theme='light'时生效) */
|
||||||
semiDarkHeader: boolean;
|
semiDarkHeader: boolean;
|
||||||
/** 是否开启半深色菜单(只在theme='light'时生效) */
|
/** 是否开启半深色菜单(只在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,
|
ColorMode,
|
||||||
Content,
|
Content,
|
||||||
Copyright,
|
Copyright,
|
||||||
Footer,
|
|
||||||
FontSize,
|
FontSize,
|
||||||
|
Footer,
|
||||||
General,
|
General,
|
||||||
GlobalShortcutKeys,
|
GlobalShortcutKeys,
|
||||||
Header,
|
Header,
|
||||||
|
|||||||
Reference in New Issue
Block a user