修复 主题配置键名冲突:将theme改为uiTheme避免与iFlow内部配置冲突

This commit is contained in:
2026-04-18 21:58:16 +08:00
parent ac87c18e59
commit 231a9a686f
3 changed files with 17 additions and 18 deletions

View File

@@ -62,7 +62,7 @@ const { locale, t } = useI18n()
const settings = ref({
language: 'zh-CN',
theme: 'Xcode',
uiTheme: 'Light',
bootAnimationShown: true,
checkpointing: { enabled: true },
mcpServers: {},
@@ -263,7 +263,7 @@ const loadSettings = async () => {
if (!data.checkpointing) data.checkpointing = { enabled: true }
if (!data.mcpServers) data.mcpServers = {}
if (data.language === undefined) data.language = 'zh-CN'
if (data.theme === undefined) data.theme = 'Xcode'
if (data.uiTheme === undefined) data.uiTheme = 'Light'
if (data.bootAnimationShown === undefined) data.bootAnimationShown = true
if (!data.selectedAuthType) data.selectedAuthType = 'openai-compatible'
if (data.apiKey === undefined) data.apiKey = ''
@@ -308,7 +308,7 @@ const showSection = section => {
const serverCount = computed(() => (settings.value.mcpServers ? Object.keys(settings.value.mcpServers).length : 0))
const themeClass = computed(() => {
const theme = settings.value.theme
const theme = settings.value.uiTheme
if (theme === 'Dark') return 'dark'
if (theme === 'Solarized Dark') return 'solarized-dark'
return ''
@@ -318,7 +318,7 @@ const acrylicStyle = computed(() => {
const intensity = settings.value.acrylicIntensity
if (intensity === undefined || intensity === null) return {}
const opacity = 1 - intensity / 100
const isDark = settings.value.theme === 'Dark'
const isDark = settings.value.uiTheme === 'Dark'
if (isDark) {
return {
@@ -471,7 +471,7 @@ const closeMessageDialog = () => {
}
watch(
() => settings.value.theme,
() => settings.value.uiTheme,
theme => {
const cls = themeClass.value
if (cls) {
@@ -496,7 +496,7 @@ const applyAcrylicStyle = () => {
const intensity = settings.value.acrylicIntensity
if (intensity === undefined || intensity === null) return
const opacity = 1 - intensity / 100
const isDark = settings.value.theme === 'Dark'
const isDark = settings.value.uiTheme === 'Dark'
const root = document.documentElement
if (isDark) {

View File

@@ -6,9 +6,10 @@ import GeneralSettings from './GeneralSettings.vue';
describe('GeneralSettings.vue', () => {
const mockSettings = {
language: 'zh-CN',
theme: 'Xcode',
uiTheme: 'Light',
bootAnimationShown: true,
checkpointing: { enabled: true },
acrylicIntensity: 50,
};
it('renders correctly with props', () => {
@@ -60,11 +61,9 @@ describe('GeneralSettings.vue', () => {
});
const themeOptions = wrapper.findAll('.form-select')[1].findAll('option');
expect(themeOptions.length).toBe(4);
expect(themeOptions[0].attributes('value')).toBe('Xcode');
expect(themeOptions.length).toBe(2);
expect(themeOptions[0].attributes('value')).toBe('Light');
expect(themeOptions[1].attributes('value')).toBe('Dark');
expect(themeOptions[2].attributes('value')).toBe('Light');
expect(themeOptions[3].attributes('value')).toBe('Solarized Dark');
});
it('reflects current settings in form controls', async () => {
@@ -82,7 +81,7 @@ describe('GeneralSettings.vue', () => {
await nextTick();
const selectElements = wrapper.findAll('.form-select');
expect(selectElements[0].element.value).toBe('zh-CN');
expect(selectElements[1].element.value).toBe('Xcode');
expect(selectElements[1].element.value).toBe('Light');
expect(selectElements[2].element.value).toBe('true');
expect(selectElements[3].element.value).toBe('true');
});
@@ -149,9 +148,9 @@ describe('GeneralSettings.vue', () => {
},
});
expect(wrapper.findAll('.form-row').length).toBe(2);
expect(wrapper.findAll('.form-group').length).toBe(4);
expect(wrapper.findAll('.form-label').length).toBe(4);
expect(wrapper.findAll('.form-row').length).toBe(3);
expect(wrapper.findAll('.form-group').length).toBe(5);
expect(wrapper.findAll('.form-label').length).toBe(5);
expect(wrapper.findAll('.form-select').length).toBe(4);
});
});

View File

@@ -20,7 +20,7 @@
</div>
<div class="form-group">
<label class="form-label">{{ $t('general.theme') }}</label>
<select class="form-select" v-model="localSettings.theme">
<select class="form-select" v-model="localSettings.uiTheme">
<option value="Light">{{ $t('theme.light') }}</option>
<option value="Dark">{{ $t('theme.dark') }}</option>
</select>
@@ -89,7 +89,7 @@ const localSettings = computed({
})
const supportsAcrylic = computed(() => {
return typeof document !== 'undefined' && 'backdropFilter' in document.documentElement.style && props.settings.theme !== 'Dark'
return typeof document !== 'undefined' && 'backdropFilter' in document.documentElement.style && props.settings.uiTheme !== 'Dark'
})
const sliderRef = ref(null)
@@ -109,7 +109,7 @@ onMounted(() => {
})
watch(
() => props.settings.theme,
() => props.settings.uiTheme,
() => {
nextTick(() => {
if (sliderRef.value && supportsAcrylic.value) {