fix (core): 修复编辑器修改后配置未更新

Author: qianmoQ

src/App.vue

@@ -21,7 +21,7 @@
           </div>
         </div>
         <div class="flex-1 overflow-hidden">
-          <CodeEditor v-model="code" class="h-full" :language="currentLanguage"/>
+          <CodeEditor v-model="code" class="h-full" :language="currentLanguage" :editor-config="editorConfig" :key="editorConfigKey"/>
         </div>
       </div>
 
@@ -44,7 +44,7 @@
     <About v-if="showAbout" @close="closeAbout"/>
 
     <!-- 设置组件 -->
-    <Settings v-if="showSettings" @close="closeSettings"/>
+    <Settings v-if="showSettings" @close="closeSettings" @settings-changed="handleSettingsChanged"/>
 
     <!-- 更新组件 -->
     <Update v-if="showUpdate" @close="closeUpdate"/>
@@ -55,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 import AppHeader from './components/AppHeader.vue'
 import CodeEditor from './components/CodeEditor.vue'
 import OutputPanel from './components/OutputPanel.vue'
@@ -70,6 +70,7 @@ import { useCodeExecution } from './composables/useCodeExecution'
 import { useLanguageManager } from './composables/useLanguageManager'
 import { useEventManager } from './composables/useEventManager'
 import { useAppState } from './composables/useAppState'
+import { useEditorConfig } from './composables/useEditorConfig'
 import Update from './components/Update.vue'
 
 const toast = useToast()
@@ -109,6 +110,34 @@ const {
   closeUpdate
 } = useAppState()
 
+// 编辑器配置管理
+const {
+  editorConfig,
+  loadConfig: loadEditorConfig
+} = useEditorConfig()
+
+// 强制刷新 CodeEditor 组件的 key
+const editorConfigKey = ref(0)
+
+// 处理设置变更
+const handleSettingsChanged = (config: any) => {
+  console.log('主组件接收到设置变更:', config)
+  // 延迟一点点再刷新，减少闪烁
+  setTimeout(() => {
+    editorConfigKey.value++
+  }, 50)
+}
+
+// 监听编辑器配置变化
+watch(editorConfig, (newConfig) => {
+  if (newConfig) {
+    console.log('编辑器配置更新，刷新编辑器组件')
+    setTimeout(() => {
+      editorConfigKey.value++
+    }, 50)
+  }
+}, { deep: true })
+
 const { initializeEventListeners, cleanupEventListeners } = useEventManager({
   showAbout,
   showSettings,
@@ -131,6 +160,7 @@ window.addEventListener('contextmenu', (e) => e.preventDefault(), false)
 
 onMounted(async () => {
   await initialize()
+  await loadEditorConfig()
   await initializeEventListeners()
 
   // 触发 app-ready 事件，通知主进程

src/components/Settings.vue

@@ -13,7 +13,7 @@
 
       <!-- 编辑器配置 -->
       <template #editor>
-        <Editor v-if="activeTab === 'editor'"/>
+        <Editor v-if="activeTab === 'editor'" @settings-changed="handleEditorSettingsChanged" @error="handleEditorError"/>
       </template>
 
       <!-- 语言配置 -->
@@ -43,8 +43,21 @@ const tabsData = [
 
 const emit = defineEmits<{
   close: []
+  'settings-changed': [config: any]
 }>()
 
+// 处理编辑器设置变更
+const handleEditorSettingsChanged = (config: any) => {
+  console.log('设置模态框接收到编辑器配置变更:', config)
+  // 向上传递事件到主组件
+  emit('settings-changed', config)
+}
+
+// 处理编辑器错误
+const handleEditorError = (message: string) => {
+  console.error('编辑器设置错误:', message)
+}
+
 const closeSettings = () => {
   isVisible.value = false
   setTimeout(() => {

src/components/setting/Editor.vue

@@ -7,8 +7,7 @@
       <div class="flex gap-2">
         <input v-model="editorConfig.indent_with_tab"
                type="checkbox"
-               placeholder="超时时间(秒)，默认 30 秒"
-               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm"/>
+               class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm"/>
       </div>
     </div>
 
@@ -17,12 +16,12 @@
         缩进空格数
       </label>
       <div class="flex gap-2">
-        <input v-model="editorConfig.tab_size"
+        <input v-model.number="editorConfig.tab_size"
                type="number"
-               :disabled="!editorConfig.indent_with_tab"
-               placeholder="缩进空格数，默认 2 秒"
-               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm"
-               :class="[!editorConfig.indent_with_tab ? 'opacity-50 cursor-not-allowed' : '']"/>
+               min="1"
+               max="8"
+               placeholder="缩进空格数，默认 2"
+               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm"/>
       </div>
     </div>
 
@@ -31,10 +30,7 @@
         编辑器主题
       </label>
       <div class="flex gap-2">
-        <Select v-model="editorConfig.theme"
-                class="w-1/4"
-                placeholder="选择编辑器主题"
-                :options="themeOptions"/>
+        <Select v-model="editorConfig.theme" class="w-1/4" placeholder="选择编辑器主题" :options="themeOptions"/>
       </div>
     </div>
   </div>