You've already forked iFlow-Settings-Editor-GUI
修复 主题配置键名冲突:将theme改为uiTheme避免与iFlow内部配置冲突
This commit is contained in:
12
src/App.vue
12
src/App.vue
@@ -62,7 +62,7 @@ const { locale, t } = useI18n()
|
|||||||
|
|
||||||
const settings = ref({
|
const settings = ref({
|
||||||
language: 'zh-CN',
|
language: 'zh-CN',
|
||||||
theme: 'Xcode',
|
uiTheme: 'Light',
|
||||||
bootAnimationShown: true,
|
bootAnimationShown: true,
|
||||||
checkpointing: { enabled: true },
|
checkpointing: { enabled: true },
|
||||||
mcpServers: {},
|
mcpServers: {},
|
||||||
@@ -263,7 +263,7 @@ const loadSettings = async () => {
|
|||||||
if (!data.checkpointing) data.checkpointing = { enabled: true }
|
if (!data.checkpointing) data.checkpointing = { enabled: true }
|
||||||
if (!data.mcpServers) data.mcpServers = {}
|
if (!data.mcpServers) data.mcpServers = {}
|
||||||
if (data.language === undefined) data.language = 'zh-CN'
|
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.bootAnimationShown === undefined) data.bootAnimationShown = true
|
||||||
if (!data.selectedAuthType) data.selectedAuthType = 'openai-compatible'
|
if (!data.selectedAuthType) data.selectedAuthType = 'openai-compatible'
|
||||||
if (data.apiKey === undefined) data.apiKey = ''
|
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 serverCount = computed(() => (settings.value.mcpServers ? Object.keys(settings.value.mcpServers).length : 0))
|
||||||
|
|
||||||
const themeClass = computed(() => {
|
const themeClass = computed(() => {
|
||||||
const theme = settings.value.theme
|
const theme = settings.value.uiTheme
|
||||||
if (theme === 'Dark') return 'dark'
|
if (theme === 'Dark') return 'dark'
|
||||||
if (theme === 'Solarized Dark') return 'solarized-dark'
|
if (theme === 'Solarized Dark') return 'solarized-dark'
|
||||||
return ''
|
return ''
|
||||||
@@ -318,7 +318,7 @@ const acrylicStyle = computed(() => {
|
|||||||
const intensity = settings.value.acrylicIntensity
|
const intensity = settings.value.acrylicIntensity
|
||||||
if (intensity === undefined || intensity === null) return {}
|
if (intensity === undefined || intensity === null) return {}
|
||||||
const opacity = 1 - intensity / 100
|
const opacity = 1 - intensity / 100
|
||||||
const isDark = settings.value.theme === 'Dark'
|
const isDark = settings.value.uiTheme === 'Dark'
|
||||||
|
|
||||||
if (isDark) {
|
if (isDark) {
|
||||||
return {
|
return {
|
||||||
@@ -471,7 +471,7 @@ const closeMessageDialog = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => settings.value.theme,
|
() => settings.value.uiTheme,
|
||||||
theme => {
|
theme => {
|
||||||
const cls = themeClass.value
|
const cls = themeClass.value
|
||||||
if (cls) {
|
if (cls) {
|
||||||
@@ -496,7 +496,7 @@ const applyAcrylicStyle = () => {
|
|||||||
const intensity = settings.value.acrylicIntensity
|
const intensity = settings.value.acrylicIntensity
|
||||||
if (intensity === undefined || intensity === null) return
|
if (intensity === undefined || intensity === null) return
|
||||||
const opacity = 1 - intensity / 100
|
const opacity = 1 - intensity / 100
|
||||||
const isDark = settings.value.theme === 'Dark'
|
const isDark = settings.value.uiTheme === 'Dark'
|
||||||
const root = document.documentElement
|
const root = document.documentElement
|
||||||
|
|
||||||
if (isDark) {
|
if (isDark) {
|
||||||
|
|||||||
@@ -6,9 +6,10 @@ import GeneralSettings from './GeneralSettings.vue';
|
|||||||
describe('GeneralSettings.vue', () => {
|
describe('GeneralSettings.vue', () => {
|
||||||
const mockSettings = {
|
const mockSettings = {
|
||||||
language: 'zh-CN',
|
language: 'zh-CN',
|
||||||
theme: 'Xcode',
|
uiTheme: 'Light',
|
||||||
bootAnimationShown: true,
|
bootAnimationShown: true,
|
||||||
checkpointing: { enabled: true },
|
checkpointing: { enabled: true },
|
||||||
|
acrylicIntensity: 50,
|
||||||
};
|
};
|
||||||
|
|
||||||
it('renders correctly with props', () => {
|
it('renders correctly with props', () => {
|
||||||
@@ -60,11 +61,9 @@ describe('GeneralSettings.vue', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const themeOptions = wrapper.findAll('.form-select')[1].findAll('option');
|
const themeOptions = wrapper.findAll('.form-select')[1].findAll('option');
|
||||||
expect(themeOptions.length).toBe(4);
|
expect(themeOptions.length).toBe(2);
|
||||||
expect(themeOptions[0].attributes('value')).toBe('Xcode');
|
expect(themeOptions[0].attributes('value')).toBe('Light');
|
||||||
expect(themeOptions[1].attributes('value')).toBe('Dark');
|
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 () => {
|
it('reflects current settings in form controls', async () => {
|
||||||
@@ -82,7 +81,7 @@ describe('GeneralSettings.vue', () => {
|
|||||||
await nextTick();
|
await nextTick();
|
||||||
const selectElements = wrapper.findAll('.form-select');
|
const selectElements = wrapper.findAll('.form-select');
|
||||||
expect(selectElements[0].element.value).toBe('zh-CN');
|
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[2].element.value).toBe('true');
|
||||||
expect(selectElements[3].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-row').length).toBe(3);
|
||||||
expect(wrapper.findAll('.form-group').length).toBe(4);
|
expect(wrapper.findAll('.form-group').length).toBe(5);
|
||||||
expect(wrapper.findAll('.form-label').length).toBe(4);
|
expect(wrapper.findAll('.form-label').length).toBe(5);
|
||||||
expect(wrapper.findAll('.form-select').length).toBe(4);
|
expect(wrapper.findAll('.form-select').length).toBe(4);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="form-label">{{ $t('general.theme') }}</label>
|
<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="Light">{{ $t('theme.light') }}</option>
|
||||||
<option value="Dark">{{ $t('theme.dark') }}</option>
|
<option value="Dark">{{ $t('theme.dark') }}</option>
|
||||||
</select>
|
</select>
|
||||||
@@ -89,7 +89,7 @@ const localSettings = computed({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const supportsAcrylic = 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)
|
const sliderRef = ref(null)
|
||||||
@@ -109,7 +109,7 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.settings.theme,
|
() => props.settings.uiTheme,
|
||||||
() => {
|
() => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
if (sliderRef.value && supportsAcrylic.value) {
|
if (sliderRef.value && supportsAcrylic.value) {
|
||||||
|
|||||||
Reference in New Issue
Block a user