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({
|
||||
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) {
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user