diff --git a/src/components/ThemeCustomizer.vue b/src/components/ThemeCustomizer.vue index 6dcb7f6e..381634b8 100644 --- a/src/components/ThemeCustomizer.vue +++ b/src/components/ThemeCustomizer.vue @@ -3,6 +3,7 @@ import { themeCustomizerPrimaryColors, useThemeCustomizer, type ThemeCustomizerLayout, + type ThemeCustomizerShadow, type ThemeCustomizerSkin, type ThemeCustomizerTheme, } from '@/composables/useThemeCustomizer' @@ -27,8 +28,17 @@ const emit = defineEmits<{ const customColorInput = ref(null) -const { isCustomized, resetSettings, setLayout, setPrimaryColor, setSemiDarkMenu, setSkin, setTheme, settings } = - useThemeCustomizer() +const { + isCustomized, + resetSettings, + setLayout, + setPrimaryColor, + setSemiDarkMenu, + setShadow, + setSkin, + setTheme, + settings, +} = useThemeCustomizer() const { appMode } = usePWA() const { t } = useI18n() const { global: globalTheme } = useTheme() @@ -98,6 +108,30 @@ const skinOptions = computed +>(() => [ + { + title: t('theme.customizer.shadowNone'), + value: 'none', + }, + { + title: t('theme.customizer.shadowLow'), + value: 'low', + }, + { + title: t('theme.customizer.shadowMedium'), + value: 'medium', + }, + { + title: t('theme.customizer.shadowHigh'), + value: 'high', + }, +]) + const layoutOptions = computed>(() => [ { title: t('theme.customizer.layoutVertical'), value: 'vertical', icon: 'mdi-dock-left' }, { title: t('theme.customizer.layoutCollapsed'), value: 'collapsed', icon: 'mdi-dock-window' }, @@ -109,6 +143,7 @@ const showLayoutSection = computed(() => !appMode.value) const hasAppModeCustomization = computed(() => { return ( settings.value.primaryColor !== defaultPrimaryColor || + settings.value.shadow !== 'none' || settings.value.skin !== 'default' || settings.value.theme !== 'auto' ) @@ -150,6 +185,7 @@ async function handleResetSettings() { // App 模式共享定制器,但保留桌面导航相关偏好,只重置 App 侧可调整的外观设置。 await setPrimaryColor(defaultPrimaryColor) + await setShadow('none') await setSkin('default') await setTheme('auto') } @@ -262,6 +298,35 @@ async function handleResetSettings() { + + +

{{ t('theme.customizer.shadow') }}

+
+
+ + + + + + + + + + + + + {{ shadow.title }} +
+
+
{{ t('theme.customizer.semiDarkMenu') }}