✨ Add configuration information file storage

frontend/src/App.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import {onMounted} from 'vue';
 import Editor from '@/editor/Editor.vue';
 import Toolbar from '@/components/toolbar/Toolbar.vue';
+import {useConfigStore} from "@/stores/configStore";
+
+const configStore = useConfigStore();
+onMounted(async () => {
+  await configStore.loadConfigFromBackend();
+})
 </script>
 
 <template>
   <div class="app-container">
     <div class="editor-wrapper">
-      <Editor />
+      <Editor/>
     </div>
-    <Toolbar />
+    <Toolbar/>
   </div>
 </template>
 
@@ -20,7 +27,7 @@ import Toolbar from '@/components/toolbar/Toolbar.vue';
   padding: 0;
   display: flex;
   flex-direction: column;
-  
+
   .editor-wrapper {
     flex: 1;
     overflow: hidden;

frontend/src/components/toolbar/Toolbar.vue

@@ -38,7 +38,7 @@ const configStore = useConfigStore();
         </span>
       </span>
       <span class="encoding">{{ configStore.config.encoding }}</span>
-      <button class="settings-btn" @click="configStore.openSettings">
+      <button class="settings-btn">
         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <circle cx="12" cy="12" r="3"></circle>

frontend/src/editor/Editor.vue

@@ -7,10 +7,10 @@ import {useConfigStore} from '@/stores/configStore';
 import {createBasicSetup} from './extensions/basicSetup';
 import {
   createStatsUpdateExtension,
-  getTabExtensions,
-  updateTabConfig,
   createWheelZoomHandler,
-  updateStats
+  getTabExtensions,
+  updateStats,
+  updateTabConfig
 } from './extensions';
 
 const editorStore = useEditorStore();
@@ -19,7 +19,7 @@ const configStore = useConfigStore();
 const props = defineProps({
   initialDoc: {
     type: String,
-    default: '// 在此处编写代码'
+    default: '// 在此处编写文本...'
   }
 });
 
@@ -31,17 +31,17 @@ const createEditor = () => {
 
   // 获取基本扩展
   const basicExtensions = createBasicSetup();
-  
+
   // 获取Tab相关扩展
   const tabExtensions = getTabExtensions(
-    configStore.config.tabSize,
-    configStore.config.enableTabIndent,
-    configStore.config.tabType
+      configStore.config.tabSize,
+      configStore.config.enableTabIndent,
+      configStore.config.tabType
   );
-  
+
   // 创建统计信息更新扩展
   const statsExtension = createStatsUpdateExtension(
-    editorStore.updateDocumentStats
+      editorStore.updateDocumentStats
   );
 
   // 组合所有扩展
@@ -62,31 +62,31 @@ const createEditor = () => {
     state,
     parent: editorElement.value
   });
-  
+
   // 将编辑器实例保存到store
   editorStore.setEditorView(view);
-  
+
   // 应用初始字体大小
   editorStore.applyFontSize();
-  
+
   // 立即更新统计信息，不等待用户交互
   updateStats(view, editorStore.updateDocumentStats);
 };
 
 // 创建滚轮事件处理器
 const handleWheel = createWheelZoomHandler(
-  configStore.increaseFontSize,
-  configStore.decreaseFontSize
+    configStore.increaseFontSize,
+    configStore.decreaseFontSize
 );
 
 // 重新配置编辑器（仅在必要时）
 const reconfigureTabSettings = () => {
   if (!editorStore.editorView) return;
   updateTabConfig(
-    editorStore.editorView as EditorView,
-    configStore.config.tabSize,
-    configStore.config.enableTabIndent,
-    configStore.config.tabType
+      editorStore.editorView as EditorView,
+      configStore.config.tabSize,
+      configStore.config.enableTabIndent,
+      configStore.config.tabType
   );
 };
 
@@ -103,12 +103,12 @@ watch(() => configStore.config.fontSize, () => {
 onMounted(() => {
   // 创建编辑器
   createEditor();
-  
+
   // 添加滚轮事件监听
   if (editorElement.value) {
     editorElement.value.addEventListener('wheel', handleWheel, {passive: false});
   }
-  
+
   // 确保统计信息已更新
   if (editorStore.editorView) {
     setTimeout(() => {
@@ -122,7 +122,7 @@ onBeforeUnmount(() => {
   if (editorElement.value) {
     editorElement.value.removeEventListener('wheel', handleWheel);
   }
-  
+
   // 销毁编辑器
   if (editorStore.editorView) {
     editorStore.editorView.destroy();

frontend/src/editor/extensions/tabExtension.ts

@@ -2,7 +2,7 @@ import {Compartment, Extension} from '@codemirror/state';
 import {EditorView, keymap} from '@codemirror/view';
 import {indentSelection} from '@codemirror/commands';
 import {indentUnit} from '@codemirror/language';
-import {TabType} from "@/types/config";
+import {TabType} from '@/../bindings/voidraft/internal/models/models';
 
 // Tab设置相关的compartment
 export const tabSizeCompartment = new Compartment();

frontend/src/stores/configStore.ts

@@ -1,6 +1,12 @@
 import {defineStore} from 'pinia';
-import {ref} from 'vue';
-import {EditorConfig} from '@/types/config';
+import {ref, watch} from 'vue';
+import {useDebounceFn} from '@vueuse/core';
+import {
+    GetEditorConfig,
+    ResetToDefault,
+    UpdateEditorConfig
+} from '@/../bindings/voidraft/internal/services/configservice';
+import {EditorConfig, TabType} from '@/../bindings/voidraft/internal/models/models';
 
 // 字体大小范围
 const MIN_FONT_SIZE = 12;
@@ -14,13 +20,43 @@ const MAX_TAB_SIZE = 8;
 
 export const useConfigStore = defineStore('config', () => {
     // 配置状态
-    const config = ref<EditorConfig>({
+    const config = ref<EditorConfig>(new EditorConfig({
         fontSize: DEFAULT_FONT_SIZE,
         encoding: 'UTF-8',
         enableTabIndent: true,
         tabSize: DEFAULT_TAB_SIZE,
-        tabType: 'spaces'
-    });
+        tabType: TabType.TabTypeSpaces
+    }));
+
+    // 配置是否已从后端加载
+    const configLoaded = ref(false);
+
+    // 从后端加载配置
+    async function loadConfigFromBackend() {
+        try {
+            const editorConfig = await GetEditorConfig();
+            config.value = editorConfig;
+            configLoaded.value = true;
+        } catch (error) {
+            console.error('Failed to load configuration:', error);
+        }
+    }
+
+    // 使用防抖保存配置到后端
+    const saveConfigToBackend = useDebounceFn(async () => {
+        try {
+            await UpdateEditorConfig(config.value);
+        } catch (error) {
+            console.error('Failed to save configuration:', error);
+        }
+    }, 500); // 500ms防抖
+
+    // 监听配置变化，自动保存到后端
+    watch(() => config.value, async () => {
+        if (configLoaded.value) {
+            await saveConfigToBackend();
+        }
+    }, {deep: true});
 
     // 字体缩放
     function increaseFontSize() {
@@ -67,18 +103,20 @@ export const useConfigStore = defineStore('config', () => {
 
     // 切换Tab类型（空格或制表符）
     function toggleTabType() {
-        config.value.tabType = config.value.tabType === 'spaces' ? 'tab' : 'spaces';
+        config.value.tabType = config.value.tabType === TabType.TabTypeSpaces
+            ? TabType.TabTypeTab
+            : TabType.TabTypeSpaces;
     }
 
-    // 设置按钮操作
-    function openSettings() {
-        console.log('打开设置面板');
-        // 此处可以实现设置面板的逻辑
+    // 重置为默认配置
+    async function resetToDefaults() {
+        await ResetToDefault();
+        await loadConfigFromBackend();
     }
-
     return {
         // 状态
         config,
+        configLoaded,
 
         // 常量
         MIN_FONT_SIZE,
@@ -88,19 +126,16 @@ export const useConfigStore = defineStore('config', () => {
         MAX_TAB_SIZE,
 
         // 方法
+        loadConfigFromBackend,
+        saveConfigToBackend,
         setEncoding,
-        openSettings,
         increaseFontSize,
         decreaseFontSize,
         resetFontSize,
         toggleTabIndent,
         increaseTabSize,
         decreaseTabSize,
-        toggleTabType
+        toggleTabType,
+        resetToDefaults
     };
-}, {
-    persist: {
-        key: 'editor-config',
-        storage: localStorage
-    }
 }); 

frontend/src/types/config.d.ts

@@ -1,11 +0,0 @@
-// Tab类型
-export type TabType = 'spaces' | 'tab';
-
-// 编辑器配置接口
-export interface EditorConfig {
-  fontSize: number;
-  encoding: string;
-  enableTabIndent: boolean;
-  tabSize: number;
-  tabType: TabType;
-}