♻️ Refactor code

frontend/src/views/editor/extensions/autoSaveExtension.ts

@@ -0,0 +1,99 @@
+import { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
+import { DocumentService } from '../../../../bindings/voidraft/internal/services';
+import { useDebounceFn } from '@vueuse/core';
+
+// 定义自动保存配置选项
+export interface AutoSaveOptions {
+  // 保存回调
+  onSave?: (success: boolean) => void;
+  // 内容变更延迟传递（毫秒）- 输入时不会立即发送，有一个小延迟，避免频繁调用后端
+  debounceDelay?: number;
+}
+
+/**
+ * 创建自动保存插件
+ * @param options 配置选项
+ * @returns EditorView.Plugin
+ */
+export function createAutoSavePlugin(options: AutoSaveOptions = {}) {
+  const { 
+    onSave = () => {},
+    debounceDelay = 1000  // 默认1000ms延迟，原为300ms
+  } = options;
+
+  return ViewPlugin.fromClass(
+    class {
+      private isActive: boolean = true;
+      private isSaving: boolean = false;
+      private readonly contentUpdateFn: (view: EditorView) => void;
+
+      constructor(private view: EditorView) {
+        // 创建内容更新函数，简单传递内容给后端
+        this.contentUpdateFn = this.createDebouncedUpdateFn(debounceDelay);
+      }
+
+      /**
+       * 创建防抖的内容更新函数
+       */
+      private createDebouncedUpdateFn(delay: number): (view: EditorView) => void {
+        // 使用VueUse的防抖函数创建一个新函数
+        return useDebounceFn(async (view: EditorView) => {
+          // 如果插件已不活跃或正在保存中，不发送
+          if (!this.isActive || this.isSaving) return;
+          
+          this.isSaving = true;
+          const content = view.state.doc.toString();
+          
+          try {
+            // 简单将内容传递给后端，让后端处理保存策略
+            await DocumentService.UpdateActiveDocumentContent(content);
+            onSave(true);
+          } catch (err) {
+            console.error('Failed to update document content:', err);
+            onSave(false);
+          } finally {
+            this.isSaving = false;
+          }
+        }, delay);
+      }
+
+      update(update: ViewUpdate) {
+        // 如果内容没有变化，直接返回
+        if (!update.docChanged) return;
+
+        // 调用防抖函数
+        this.contentUpdateFn(this.view);
+      }
+
+      destroy() {
+        // 标记插件不再活跃
+        this.isActive = false;
+        
+        // 直接发送最终内容
+        const content = this.view.state.doc.toString();
+        DocumentService.UpdateActiveDocumentContent(content)
+          .then(() => console.log('Successfully sent final content on destroy'))
+          .catch(err => console.error('Failed to send content on destroy:', err));
+      }
+    }
+  );
+}
+
+/**
+ * 创建处理保存快捷键的插件
+ * @param onSave 保存回调
+ * @returns EditorView.Plugin
+ */
+export function createSaveShortcutPlugin(onSave: () => void) {
+  return EditorView.domEventHandlers({
+    keydown: (event) => {
+      // Ctrl+S / Cmd+S
+      if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+        event.preventDefault();
+        onSave();
+        return true;
+      }
+      return false;
+    }
+  });
+}

frontend/src/views/editor/extensions/basicSetup.ts

@@ -0,0 +1,75 @@
+import {Extension} from '@codemirror/state';
+import {
+    crosshairCursor,
+    drawSelection,
+    dropCursor,
+    EditorView,
+    highlightActiveLine,
+    highlightActiveLineGutter,
+    highlightSpecialChars,
+    keymap,
+    lineNumbers,
+    rectangularSelection,
+} from '@codemirror/view';
+import {
+    bracketMatching,
+    defaultHighlightStyle,
+    foldGutter,
+    foldKeymap,
+    indentOnInput,
+    syntaxHighlighting,
+} from '@codemirror/language';
+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 {customHighlightActiveLine, defaultDark} from '@/views/editor/theme/default-dark';
+
+// 基本编辑器设置，包含常用扩展
+export const createBasicSetup = (): Extension[] => {
+    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
+        ]),
+    ];
+}; 

frontend/src/views/editor/extensions/fontExtension.ts

@@ -0,0 +1,111 @@
+import { EditorView } from '@codemirror/view';
+import { Extension, Compartment } from '@codemirror/state';
+
+// 字体配置接口
+export interface FontConfig {
+  fontFamily: string;
+  fontSize?: number;
+  lineHeight?: number;
+  fontWeight?: string;
+}
+
+// 创建字体配置compartment
+export const fontCompartment = new Compartment();
+
+// 默认字体配置
+export const DEFAULT_FONT_CONFIG: FontConfig = {
+  fontFamily: '"HarmonyOS Sans SC", "HarmonyOS Sans", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif',
+  fontSize: 14,
+  lineHeight: 1.5,
+  fontWeight: 'normal'
+};
+
+// 从后端配置创建字体配置
+export function createFontConfigFromBackend(backendConfig: {
+  fontFamily?: string;
+  fontSize?: number;
+  lineHeight?: number;
+  fontWeight?: string;
+}): FontConfig {
+  return {
+    fontFamily: backendConfig.fontFamily || DEFAULT_FONT_CONFIG.fontFamily,
+    fontSize: backendConfig.fontSize || DEFAULT_FONT_CONFIG.fontSize,
+    lineHeight: backendConfig.lineHeight || DEFAULT_FONT_CONFIG.lineHeight,
+    fontWeight: backendConfig.fontWeight || DEFAULT_FONT_CONFIG.fontWeight,
+  };
+}
+
+// 创建字体样式扩展
+export function createFontExtension(config: Partial<FontConfig> = {}): Extension {
+  const fontConfig = { ...DEFAULT_FONT_CONFIG, ...config };
+  
+  const styles: Record<string, any> = {
+    '&': {
+      fontFamily: fontConfig.fontFamily,
+      ...(fontConfig.fontSize && { fontSize: `${fontConfig.fontSize}px` }),
+      ...(fontConfig.lineHeight && { lineHeight: fontConfig.lineHeight.toString() }),
+      ...(fontConfig.fontWeight && { fontWeight: fontConfig.fontWeight }),
+    },
+    '.cm-content': {
+      fontFamily: fontConfig.fontFamily,
+      ...(fontConfig.fontSize && { fontSize: `${fontConfig.fontSize}px` }),
+      ...(fontConfig.lineHeight && { lineHeight: fontConfig.lineHeight.toString() }),
+      ...(fontConfig.fontWeight && { fontWeight: fontConfig.fontWeight }),
+    },
+    '.cm-editor': {
+      fontFamily: fontConfig.fontFamily,
+    },
+    '.cm-scroller': {
+      fontFamily: fontConfig.fontFamily,
+    },
+    '.cm-gutters': {
+      fontFamily: fontConfig.fontFamily,
+      ...(fontConfig.fontSize && { fontSize: `${fontConfig.fontSize}px` }),
+    },
+    '.cm-lineNumbers': {
+      fontFamily: fontConfig.fontFamily,
+      ...(fontConfig.fontSize && { fontSize: `${Math.max(10, fontConfig.fontSize - 1)}px` }),
+    },
+    '.cm-tooltip': {
+      fontFamily: fontConfig.fontFamily,
+      ...(fontConfig.fontSize && { fontSize: `${Math.max(12, fontConfig.fontSize - 1)}px` }),
+    },
+    '.cm-completionLabel': {
+      fontFamily: fontConfig.fontFamily,
+    },
+    '.cm-completionDetail': {
+      fontFamily: fontConfig.fontFamily,
+    }
+  };
+  
+  return EditorView.theme(styles);
+}
+
+// 创建响应式字体大小扩展
+export function createResponsiveFontExtension(baseFontSize: number = 14): Extension {
+  return fontCompartment.of(createFontExtension({
+    fontSize: baseFontSize,
+    lineHeight: 1.5
+  }));
+}
+
+// 从后端配置创建字体扩展
+export function createFontExtensionFromBackend(backendConfig: {
+  fontFamily?: string;
+  fontSize?: number;
+  lineHeight?: number;
+  fontWeight?: string;
+}): Extension {
+  const fontConfig = createFontConfigFromBackend(backendConfig);
+  return fontCompartment.of(createFontExtension(fontConfig));
+}
+
+// 动态更新字体配置
+export function updateFontConfig(view: EditorView, config: Partial<FontConfig>): void {
+  const newFontExtension = createFontExtension(config);
+  
+  // 使用compartment重新配置字体扩展
+  view.dispatch({
+    effects: fontCompartment.reconfigure(newFontExtension)
+  });
+} 

frontend/src/views/editor/extensions/index.ts

@@ -0,0 +1,6 @@
+// 统一导出所有扩展
+export * from './tabExtension';
+export * from './wheelZoomExtension';
+export * from './statsExtension'; 
+export * from './autoSaveExtension'; 
+export * from './fontExtension'; 

frontend/src/views/editor/extensions/statsExtension.ts

@@ -0,0 +1,42 @@
+import {Extension} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {DocumentStats} from '@/types/editor';
+
+// 更新编辑器文档统计信息
+export const updateStats = (
+  view: EditorView, 
+  updateDocumentStats: (stats: DocumentStats) => void
+) => {
+  if (!view) return;
+  
+  const state = view.state;
+  const doc = state.doc;
+  const text = doc.toString();
+  
+  // 计算选中的字符数
+  let selectedChars = 0;
+  const selections = state.selection;
+  if (selections) {
+    for (let i = 0; i < selections.ranges.length; i++) {
+      const range = selections.ranges[i];
+      selectedChars += range.to - range.from;
+    }
+  }
+  
+  updateDocumentStats({
+    lines: doc.lines,
+    characters: text.length,
+    selectedCharacters: selectedChars
+  });
+};
+
+// 创建统计信息更新监听器扩展
+export const createStatsUpdateExtension = (
+  updateDocumentStats: (stats: DocumentStats) => void
+): Extension => {
+  return EditorView.updateListener.of(update => {
+    if (update.docChanged || update.selectionSet) {
+      updateStats(update.view, updateDocumentStats);
+    }
+  });
+}; 

frontend/src/views/editor/extensions/tabExtension.ts

@@ -0,0 +1,78 @@
+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 '../../../../bindings/voidraft/internal/models/models';
+
+// Tab设置相关的compartment
+export const tabSizeCompartment = new Compartment();
+export const tabKeyCompartment = new Compartment();
+
+// 自定义Tab键处理函数
+export const tabHandler = (view: EditorView, tabSize: number, tabType: TabType): boolean => {
+  // 如果有选中文本，使用indentSelection
+  if (!view.state.selection.main.empty) {
+    return indentSelection(view);
+  }
+  
+  // 根据tabType创建缩进字符
+  const indent = tabType === 'spaces' ? ' '.repeat(tabSize) : '\t';
+  
+  // 在光标位置插入缩进字符
+  const {state, dispatch} = view;
+  dispatch(state.update(state.replaceSelection(indent), {scrollIntoView: true}));
+  return true;
+};
+
+// 获取Tab相关的扩展
+export const getTabExtensions = (tabSize: number, enableTabIndent: boolean, tabType: TabType): Extension[] => {
+  const extensions: Extension[] = [];
+  
+  // 根据tabType设置缩进单位
+  const indentStr = tabType === 'spaces' ? ' '.repeat(tabSize) : '\t';
+  extensions.push(tabSizeCompartment.of(indentUnit.of(indentStr)));
+  
+  // 如果启用了Tab缩进，添加自定义Tab键映射
+  if (enableTabIndent) {
+    extensions.push(
+      tabKeyCompartment.of(
+        keymap.of([{
+          key: "Tab",
+          run: (view) => tabHandler(view, tabSize, tabType)
+        }])
+      )
+    );
+  } else {
+    extensions.push(tabKeyCompartment.of([]));
+  }
+  
+  return extensions;
+};
+
+// 更新Tab配置
+export const updateTabConfig = (
+  view: EditorView | null,
+  tabSize: number, 
+  enableTabIndent: boolean,
+  tabType: TabType
+) => {
+  if (!view) return;
+  
+  // 根据tabType更新indentUnit配置
+  const indentStr = tabType === 'spaces' ? ' '.repeat(tabSize) : '\t';
+  view.dispatch({
+    effects: tabSizeCompartment.reconfigure(indentUnit.of(indentStr))
+  });
+  
+  // 更新Tab键映射
+  const tabKeymap = enableTabIndent
+    ? keymap.of([{
+        key: "Tab", 
+        run: (view) => tabHandler(view, tabSize, tabType)
+      }])
+    : [];
+  
+  view.dispatch({
+    effects: tabKeyCompartment.reconfigure(tabKeymap)
+  });
+}; 

frontend/src/views/editor/extensions/wheelZoomExtension.ts

@@ -0,0 +1,22 @@
+// 处理滚轮缩放字体的事件处理函数
+export const createWheelZoomHandler = (
+  increaseFontSize: () => void,
+  decreaseFontSize: () => void
+) => {
+  return (event: WheelEvent) => {
+    // 检查是否按住了Ctrl键
+    if (event.ctrlKey) {
+      // 阻止默认行为（防止页面缩放）
+      event.preventDefault();
+      
+      // 根据滚轮方向增大或减小字体
+      if (event.deltaY < 0) {
+        // 向上滚动，增大字体
+        increaseFontSize();
+      } else {
+        // 向下滚动，减小字体
+        decreaseFontSize();
+      }
+    }
+  };
+};