feat: 添加主题根据系统切换功能

feat: #387
This commit is contained in:
alger
2025-07-23 22:45:47 +08:00
parent e489ab46b5
commit d5ba218b10
7 changed files with 122 additions and 9 deletions
+23 -4
View File
@@ -25,10 +25,25 @@
<div class="set-item-title">{{ t('settings.basic.themeMode') }}</div>
<div class="set-item-content">{{ t('settings.basic.themeModeDesc') }}</div>
</div>
<n-switch v-model:value="isDarkTheme">
<template #checked><i class="ri-moon-line"></i></template>
<template #unchecked><i class="ri-sun-line"></i></template>
</n-switch>
<div class="flex items-center gap-3">
<div class="flex items-center gap-2">
<n-switch v-model:value="setData.autoTheme" @update:value="handleAutoThemeChange">
<template #checked><i class="ri-smartphone-line"></i></template>
<template #unchecked><i class="ri-settings-line"></i></template>
</n-switch>
<span class="text-sm text-gray-500">
{{ setData.autoTheme ? t('settings.basic.autoTheme') : t('settings.basic.manualTheme') }}
</span>
</div>
<n-switch
v-model:value="isDarkTheme"
:disabled="setData.autoTheme"
:class="{ 'opacity-50': setData.autoTheme }"
>
<template #checked><i class="ri-moon-line"></i></template>
<template #unchecked><i class="ri-sun-line"></i></template>
</n-switch>
</div>
</div>
<!-- 语言设置 -->
@@ -590,6 +605,10 @@ const isDarkTheme = computed({
set: () => settingsStore.toggleTheme()
});
const handleAutoThemeChange = (value: boolean) => {
settingsStore.setAutoTheme(value);
};
const openAuthor = () => {
window.open(setData.value.authorUrl);
};