From e87d5ec9295028c7300daabf72ec528a06653145 Mon Sep 17 00:00:00 2001
From: landaiqing <landaiqing@126.com>
Date: Fri, 25 Apr 2025 18:11:34 +0800
Subject: [PATCH] :art: Refactor code structure

---
 frontend/src/components/toolbar/Toolbar.vue   |  26 ++--
 frontend/src/editor/Editor.vue                |  35 +++--
 frontend/src/editor/extensions/basicSetup.ts  | 130 ++++++++--------
 .../src/editor/extensions/tabExtension.ts     |   2 +-
 .../theme/{base-dark.ts => default-dark.ts}   |   2 +-
 frontend/src/stores/configStore.ts            | 106 +++++++++++++
 frontend/src/stores/editor.ts                 | 143 ------------------
 frontend/src/stores/editorStore.ts            |  53 +++++++
 frontend/src/types/config.d.ts                |  11 ++
 frontend/src/types/{editor.ts => editor.d.ts} |   0
 10 files changed, 271 insertions(+), 237 deletions(-)
 rename frontend/src/editor/theme/{base-dark.ts => default-dark.ts} (99%)
 create mode 100644 frontend/src/stores/configStore.ts
 delete mode 100644 frontend/src/stores/editor.ts
 create mode 100644 frontend/src/stores/editorStore.ts
 create mode 100644 frontend/src/types/config.d.ts
 rename frontend/src/types/{editor.ts => editor.d.ts} (100%)

diff --git a/frontend/src/components/toolbar/Toolbar.vue b/frontend/src/components/toolbar/Toolbar.vue
index 01dbbc7..4b45d09 100644
--- a/frontend/src/components/toolbar/Toolbar.vue
+++ b/frontend/src/components/toolbar/Toolbar.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import {useEditorStore} from '@/stores/editor';
+import {useEditorStore} from '@/stores/editorStore';
+import {useConfigStore} from '@/stores/configStore';
 
 const editorStore = useEditorStore();
+const configStore = useConfigStore();
 </script>
 
 <template>
@@ -18,25 +20,25 @@ const editorStore = useEditorStore();
       </span>
     </div>
     <div class="actions">
-      <span class="font-size" title="字体大小 (Ctrl+滚轮调整)" @click="editorStore.resetFontSize">
-        {{ editorStore.fontSize }}px
+      <span class="font-size" title="字体大小 (Ctrl+滚轮调整)" @click="configStore.resetFontSize">
+        {{ configStore.config.fontSize }}px
       </span>
       <span class="tab-settings">
         <label title="启用Tab键缩进" class="tab-toggle">
-          <input type="checkbox" :checked="editorStore.enableTabIndent" @change="editorStore.toggleTabIndent"/>
+          <input type="checkbox" :checked="configStore.config.enableTabIndent" @change="configStore.toggleTabIndent"/>
           <span>Tab</span>
         </label>
-        <span class="tab-type" title="Tab类型切换" @click="editorStore.toggleTabType">
-          {{ editorStore.tabType === 'spaces' ? '空格' : '制表符' }}
+        <span class="tab-type" title="Tab类型切换" @click="configStore.toggleTabType">
+          {{ configStore.config.tabType === 'spaces' ? '空格' : '制表符' }}
         </span>
-        <span class="tab-size" title="Tab大小" v-if="editorStore.tabType === 'spaces'">
-          <button class="tab-btn" @click="editorStore.decreaseTabSize" :disabled="editorStore.tabSize <= 2">-</button>
-          <span>{{ editorStore.tabSize }}</span>
-          <button class="tab-btn" @click="editorStore.increaseTabSize" :disabled="editorStore.tabSize >= 8">+</button>
+        <span class="tab-size" title="Tab大小" v-if="configStore.config.tabType === 'spaces'">
+          <button class="tab-btn" @click="configStore.decreaseTabSize" :disabled="configStore.config.tabSize <= configStore.MIN_TAB_SIZE">-</button>
+          <span>{{ configStore.config.tabSize }}</span>
+          <button class="tab-btn" @click="configStore.increaseTabSize" :disabled="configStore.config.tabSize >= configStore.MAX_TAB_SIZE">+</button>
         </span>
       </span>
-      <span class="encoding">{{ editorStore.encoding }}</span>
-      <button class="settings-btn" @click="editorStore.openSettings">
+      <span class="encoding">{{ configStore.config.encoding }}</span>
+      <button class="settings-btn" @click="configStore.openSettings">
         <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>
diff --git a/frontend/src/editor/Editor.vue b/frontend/src/editor/Editor.vue
index 2de1852..2e01522 100644
--- a/frontend/src/editor/Editor.vue
+++ b/frontend/src/editor/Editor.vue
@@ -2,7 +2,8 @@
 import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
 import {EditorState, Extension} from '@codemirror/state';
 import {EditorView} from '@codemirror/view';
-import {useEditorStore} from '@/stores/editor';
+import {useEditorStore} from '@/stores/editorStore';
+import {useConfigStore} from '@/stores/configStore';
 import {createBasicSetup} from './extensions/basicSetup';
 import {
   createStatsUpdateExtension,
@@ -14,6 +15,7 @@ import {
 } from './extensions';
 
 const editorStore = useEditorStore();
+const configStore = useConfigStore();
 
 const props = defineProps({
   initialDoc: {
@@ -33,9 +35,9 @@ const createEditor = () => {
   
   // 获取Tab相关扩展
   const tabExtensions = getTabExtensions(
-    editorStore.tabSize,
-    editorStore.enableTabIndent,
-    editorStore.tabType
+    configStore.config.tabSize,
+    configStore.config.enableTabIndent,
+    configStore.config.tabType
   );
   
   // 创建统计信息更新扩展
@@ -66,7 +68,7 @@ const createEditor = () => {
   editorStore.setEditorView(view);
   
   // 应用初始字体大小
-  applyFontSize(view, editorStore.fontSize);
+  applyFontSize(view, configStore.config.fontSize);
   
   // 立即更新统计信息，不等待用户交互
   updateStats(view, editorStore.updateDocumentStats);
@@ -74,8 +76,8 @@ const createEditor = () => {
 
 // 创建滚轮事件处理器
 const handleWheel = createWheelZoomHandler(
-  editorStore.increaseFontSize,
-  editorStore.decreaseFontSize
+  configStore.increaseFontSize,
+  configStore.decreaseFontSize
 );
 
 // 重新配置编辑器（仅在必要时）
@@ -83,16 +85,23 @@ const reconfigureTabSettings = () => {
   if (!editorStore.editorView) return;
   updateTabConfig(
     editorStore.editorView as EditorView,
-    editorStore.tabSize,
-    editorStore.enableTabIndent,
-    editorStore.tabType
+    configStore.config.tabSize,
+    configStore.config.enableTabIndent,
+    configStore.config.tabType
   );
 };
 
 // 监听Tab设置变化
-watch(() => editorStore.tabSize, reconfigureTabSettings);
-watch(() => editorStore.enableTabIndent, reconfigureTabSettings);
-watch(() => editorStore.tabType, reconfigureTabSettings);
+watch(() => configStore.config.tabSize, reconfigureTabSettings);
+watch(() => configStore.config.enableTabIndent, reconfigureTabSettings);
+watch(() => configStore.config.tabType, reconfigureTabSettings);
+
+// 监听字体大小变化
+watch(() => configStore.config.fontSize, () => {
+  if (editorStore.editorView) {
+    applyFontSize(editorStore.editorView as EditorView, configStore.config.fontSize);
+  }
+});
 
 onMounted(() => {
   // 创建编辑器
diff --git a/frontend/src/editor/extensions/basicSetup.ts b/frontend/src/editor/extensions/basicSetup.ts
index 0cd1c1e..a23a76c 100644
--- a/frontend/src/editor/extensions/basicSetup.ts
+++ b/frontend/src/editor/extensions/basicSetup.ts
@@ -1,79 +1,75 @@
 import {Extension} from '@codemirror/state';
 import {
-  crosshairCursor,
-  drawSelection,
-  dropCursor,
-  EditorView,
-  highlightActiveLine,
-  highlightActiveLineGutter,
-  highlightSpecialChars,
-  keymap,
-  lineNumbers,
-  rectangularSelection,
+    crosshairCursor,
+    drawSelection,
+    dropCursor,
+    EditorView,
+    highlightActiveLine,
+    highlightActiveLineGutter,
+    highlightSpecialChars,
+    keymap,
+    lineNumbers,
+    rectangularSelection,
 } from '@codemirror/view';
 import {
-  bracketMatching,
-  defaultHighlightStyle,
-  foldGutter,
-  foldKeymap,
-  indentOnInput,
-  syntaxHighlighting,
+    bracketMatching,
+    defaultHighlightStyle,
+    foldGutter,
+    foldKeymap,
+    indentOnInput,
+    syntaxHighlighting,
 } from '@codemirror/language';
-import {
-  defaultKeymap,
-  history,
-  historyKeymap,
-} from '@codemirror/commands';
+import {defaultKeymap, history, historyKeymap,} from '@codemirror/commands';
 import {highlightSelectionMatches, searchKeymap} from '@codemirror/search';
 import {autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap} from '@codemirror/autocomplete';
 import {lintKeymap} from '@codemirror/lint';
-import {baseDark, customHighlightActiveLine} from '@/editor/theme/base-dark';
+import {customHighlightActiveLine, defaultDark} from '@/editor/theme/default-dark';
 
 // 基本编辑器设置，包含常用扩展
 export const createBasicSetup = (): Extension[] => {
-  return [
-    // 主题相关
-    baseDark,
-    
-    // 基础UI
-    lineNumbers(),
-    highlightActiveLineGutter(),
-    highlightSpecialChars(),
-    dropCursor(),
-    EditorView.lineWrapping,
-    
-    // 历史记录
-    history(),
-    
-    // 代码折叠
-    foldGutter(),
-    
-    // 选择与高亮
-    drawSelection(),
-    customHighlightActiveLine,
-    highlightActiveLine(),
-    highlightSelectionMatches(),
-    rectangularSelection(),
-    crosshairCursor(),
-    
-    // 缩进和编辑辅助
-    indentOnInput(),
-    syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
-    bracketMatching(),
-    closeBrackets(),
-    
-    // 自动完成
-    autocompletion(),
-    
-    // 键盘映射
-    keymap.of([
-      ...closeBracketsKeymap,
-      ...defaultKeymap,
-      ...searchKeymap,
-      ...historyKeymap,
-      ...foldKeymap,
-      ...completionKeymap,
-      ...lintKeymap
-    ]),
-  ];
+    return [
+        // 主题相关
+        defaultDark,
+
+        // 基础UI
+        lineNumbers(),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        dropCursor(),
+        EditorView.lineWrapping,
+
+        // 历史记录
+        history(),
+
+        // 代码折叠
+        foldGutter(),
+
+        // 选择与高亮
+        drawSelection(),
+        customHighlightActiveLine,
+        highlightActiveLine(),
+        highlightSelectionMatches(),
+        rectangularSelection(),
+        crosshairCursor(),
+
+        // 缩进和编辑辅助
+        indentOnInput(),
+        syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
+        bracketMatching(),
+        closeBrackets(),
+
+        // 自动完成
+        autocompletion(),
+
+        // 键盘映射
+        keymap.of([
+            ...closeBracketsKeymap,
+            ...defaultKeymap,
+            ...searchKeymap,
+            ...historyKeymap,
+            ...foldKeymap,
+            ...completionKeymap,
+            ...lintKeymap
+        ]),
+    ];
 }; 
\ No newline at end of file
diff --git a/frontend/src/editor/extensions/tabExtension.ts b/frontend/src/editor/extensions/tabExtension.ts
index 8a01317..3fdde16 100644
--- a/frontend/src/editor/extensions/tabExtension.ts
+++ b/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 '@/stores/editor';
+import {TabType} from "@/types/config";
 
 // Tab设置相关的compartment
 export const tabSizeCompartment = new Compartment();
diff --git a/frontend/src/editor/theme/base-dark.ts b/frontend/src/editor/theme/default-dark.ts
similarity index 99%
rename from frontend/src/editor/theme/base-dark.ts
rename to frontend/src/editor/theme/default-dark.ts
index c211e0c..82d4f7e 100644
--- a/frontend/src/editor/theme/base-dark.ts
+++ b/frontend/src/editor/theme/default-dark.ts
@@ -137,7 +137,7 @@ export const customHighlightActiveLine = EditorView.theme({
   }
 })
 
-export const baseDark: Extension = [
+export const defaultDark: Extension = [
     draculaTheme,
     syntaxHighlighting(draculaHighlightStyle),
 ]
diff --git a/frontend/src/stores/configStore.ts b/frontend/src/stores/configStore.ts
new file mode 100644
index 0000000..ef7a766
--- /dev/null
+++ b/frontend/src/stores/configStore.ts
@@ -0,0 +1,106 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { EditorConfig, TabType } from '@/types/config';
+
+// 字体大小范围
+const MIN_FONT_SIZE = 12;
+const MAX_FONT_SIZE = 28;
+const DEFAULT_FONT_SIZE = 13;
+
+// Tab设置
+const DEFAULT_TAB_SIZE = 4;
+const MIN_TAB_SIZE = 2;
+const MAX_TAB_SIZE = 8;
+
+export const useConfigStore = defineStore('config', () => {
+  // 配置状态
+  const config = ref<EditorConfig>({
+    fontSize: DEFAULT_FONT_SIZE,
+    encoding: 'UTF-8',
+    enableTabIndent: true,
+    tabSize: DEFAULT_TAB_SIZE,
+    tabType: 'spaces'
+  });
+
+  // 字体缩放
+  function increaseFontSize() {
+    if (config.value.fontSize < MAX_FONT_SIZE) {
+      config.value.fontSize += 1;
+    }
+  }
+
+  // 字体缩小
+  function decreaseFontSize() {
+    if (config.value.fontSize > MIN_FONT_SIZE) {
+      config.value.fontSize -= 1;
+    }
+  }
+
+  // 重置字体大小
+  function resetFontSize() {
+    config.value.fontSize = DEFAULT_FONT_SIZE;
+  }
+
+  // 设置编码
+  function setEncoding(newEncoding: string) {
+    config.value.encoding = newEncoding;
+  }
+
+  // Tab相关方法
+  function toggleTabIndent() {
+    config.value.enableTabIndent = !config.value.enableTabIndent;
+  }
+
+  // 增加Tab大小
+  function increaseTabSize() {
+    if (config.value.tabSize < MAX_TAB_SIZE) {
+      config.value.tabSize += 1;
+    }
+  }
+
+  // 减少Tab大小
+  function decreaseTabSize() {
+    if (config.value.tabSize > MIN_TAB_SIZE) {
+      config.value.tabSize -= 1;
+    }
+  }
+  
+  // 切换Tab类型（空格或制表符）
+  function toggleTabType() {
+    config.value.tabType = config.value.tabType === 'spaces' ? 'tab' : 'spaces';
+  }
+
+  // 设置按钮操作
+  function openSettings() {
+    console.log('打开设置面板');
+    // 此处可以实现设置面板的逻辑
+  }
+
+  return {
+    // 状态
+    config,
+    
+    // 常量
+    MIN_FONT_SIZE,
+    MAX_FONT_SIZE,
+    DEFAULT_FONT_SIZE,
+    MIN_TAB_SIZE,
+    MAX_TAB_SIZE,
+    
+    // 方法
+    setEncoding,
+    openSettings,
+    increaseFontSize,
+    decreaseFontSize,
+    resetFontSize,
+    toggleTabIndent,
+    increaseTabSize,
+    decreaseTabSize,
+    toggleTabType
+  };
+}, {
+  persist: {
+    key: 'editor-config',
+    storage: localStorage
+  }
+}); 
\ No newline at end of file
diff --git a/frontend/src/stores/editor.ts b/frontend/src/stores/editor.ts
deleted file mode 100644
index b6a1784..0000000
--- a/frontend/src/stores/editor.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import {defineStore} from 'pinia';
-import {ref} from 'vue';
-import {DocumentStats} from '@/types/editor';
-import {EditorView} from '@codemirror/view';
-
-// 字体大小范围
-const MIN_FONT_SIZE = 12;
-const MAX_FONT_SIZE = 28;
-const DEFAULT_FONT_SIZE = 13;
-
-// Tab设置
-const DEFAULT_TAB_SIZE = 4;
-const MIN_TAB_SIZE = 2;
-const MAX_TAB_SIZE = 8;
-
-// Tab类型
-export type TabType = 'spaces' | 'tab';
-
-export const useEditorStore = defineStore('editor', () => {
-    // 状态
-    const documentStats = ref<DocumentStats>({
-        lines: 0,
-        characters: 0,
-        selectedCharacters: 0
-    });
-    // 编码
-    const encoding = ref('UTF-8');
-    // 编辑器视图
-    const editorView = ref<EditorView | null>(null);
-    // 字体大小
-    const fontSize = ref(DEFAULT_FONT_SIZE);
-    // Tab键设置
-    const enableTabIndent = ref(true);
-    // Tab键大小
-    const tabSize = ref(DEFAULT_TAB_SIZE);
-    // Tab类型：空格或制表符
-    const tabType = ref<TabType>('spaces');
-
-    // 方法
-    function setEditorView(view: EditorView | null) {
-        editorView.value = view;
-    }
-
-    // 更新文档统计信息
-    function updateDocumentStats(stats: DocumentStats) {
-        documentStats.value = stats;
-    }
-
-    // 设置编码
-    function setEncoding(newEncoding: string) {
-        encoding.value = newEncoding;
-    }
-
-    // 字体缩放
-    function increaseFontSize() {
-        if (fontSize.value < MAX_FONT_SIZE) {
-            fontSize.value += 1;
-            applyFontSize();
-        }
-    }
-
-    // 字体缩放
-    function decreaseFontSize() {
-        if (fontSize.value > MIN_FONT_SIZE) {
-            fontSize.value -= 1;
-            applyFontSize();
-        }
-    }
-
-    // 重置字体大小
-    function resetFontSize() {
-        fontSize.value = DEFAULT_FONT_SIZE;
-        applyFontSize();
-    }
-
-    // 应用字体大小
-    function applyFontSize() {
-        if (!editorView.value) return;
-        // 更新编辑器的字体大小
-        const editorDOM = editorView.value.dom;
-        if (editorDOM) {
-            editorDOM.style.fontSize = `${fontSize.value}px`;
-        }
-    }
-
-    // Tab相关方法
-    function toggleTabIndent() {
-        enableTabIndent.value = !enableTabIndent.value;
-    }
-    // 增加Tab大小
-    function increaseTabSize() {
-        if (tabSize.value < MAX_TAB_SIZE) {
-            tabSize.value += 1;
-        }
-    }
-    // 减少Tab大小
-    function decreaseTabSize() {
-        if (tabSize.value > MIN_TAB_SIZE) {
-            tabSize.value -= 1;
-        }
-    }
-    
-    // 切换Tab类型（空格或制表符）
-    function toggleTabType() {
-        tabType.value = tabType.value === 'spaces' ? 'tab' : 'spaces';
-    }
-
-    // 设置按钮操作
-    function openSettings() {
-        console.log('打开设置面板');
-        // 此处可以实现设置面板的逻辑
-    }
-
-    return {
-        // 状态
-        documentStats,
-        encoding,
-        editorView,
-        fontSize,
-        enableTabIndent,
-        tabSize,
-        tabType,
-
-        // 方法
-        setEditorView,
-        updateDocumentStats,
-        setEncoding,
-        openSettings,
-        increaseFontSize,
-        decreaseFontSize,
-        resetFontSize,
-        toggleTabIndent,
-        increaseTabSize,
-        decreaseTabSize,
-        toggleTabType
-    };
-}, {
-    persist: {
-        key: 'editor',
-        storage: localStorage,
-        pick: ['fontSize', 'encoding', 'enableTabIndent', 'tabSize', 'tabType']
-    }
-});
\ No newline at end of file
diff --git a/frontend/src/stores/editorStore.ts b/frontend/src/stores/editorStore.ts
new file mode 100644
index 0000000..aaca98d
--- /dev/null
+++ b/frontend/src/stores/editorStore.ts
@@ -0,0 +1,53 @@
+import {defineStore} from 'pinia';
+import {ref} from 'vue';
+import {DocumentStats} from '@/types/editor';
+import {EditorView} from '@codemirror/view';
+import {useConfigStore} from './configStore';
+
+export const useEditorStore = defineStore('editor', () => {
+    // 引用配置store
+    const configStore = useConfigStore();
+
+    // 状态
+    const documentStats = ref<DocumentStats>({
+        lines: 0,
+        characters: 0,
+        selectedCharacters: 0
+    });
+    // 编辑器视图
+    const editorView = ref<EditorView | null>(null);
+
+    // 方法
+    function setEditorView(view: EditorView | null) {
+        editorView.value = view;
+    }
+
+    // 更新文档统计信息
+    function updateDocumentStats(stats: DocumentStats) {
+        documentStats.value = stats;
+    }
+
+    // 应用字体大小
+    function applyFontSize() {
+        if (!editorView.value) return;
+        // 更新编辑器的字体大小
+        const editorDOM = editorView.value.dom;
+        if (editorDOM) {
+            editorDOM.style.fontSize = `${configStore.config.fontSize}px`;
+        }
+    }
+
+    return {
+        // 状态
+        documentStats,
+        editorView,
+
+        // 配置引用
+        config: configStore.config,
+
+        // 方法
+        setEditorView,
+        updateDocumentStats,
+        applyFontSize
+    };
+});
\ No newline at end of file
diff --git a/frontend/src/types/config.d.ts b/frontend/src/types/config.d.ts
new file mode 100644
index 0000000..bc99c6c
--- /dev/null
+++ b/frontend/src/types/config.d.ts
@@ -0,0 +1,11 @@
+// Tab类型
+export type TabType = 'spaces' | 'tab';
+
+// 编辑器配置接口
+export interface EditorConfig {
+  fontSize: number;
+  encoding: string;
+  enableTabIndent: boolean;
+  tabSize: number;
+  tabType: TabType;
+} 
\ No newline at end of file
diff --git a/frontend/src/types/editor.ts b/frontend/src/types/editor.d.ts
similarity index 100%
rename from frontend/src/types/editor.ts
rename to frontend/src/types/editor.d.ts