From f41a13c217a847cea3374e8f90d89bdd4f05fa08 Mon Sep 17 00:00:00 2001
From: landaiqing <landaiqing@126.com>
Date: Thu, 24 Apr 2025 21:43:07 +0800
Subject: [PATCH] :sparkles: Added tab indentation

---
 frontend/src/components/toolbar/index.vue |  52 +++++
 frontend/src/editor/index.vue             | 222 ++++++++++++++++------
 frontend/src/stores/editor.ts             | 205 ++++++++++++--------
 3 files changed, 337 insertions(+), 142 deletions(-)

diff --git a/frontend/src/components/toolbar/index.vue b/frontend/src/components/toolbar/index.vue
index 857ed7d..7253fbc 100644
--- a/frontend/src/components/toolbar/index.vue
+++ b/frontend/src/components/toolbar/index.vue
@@ -21,6 +21,17 @@ const editorStore = useEditorStore();
       <span class="font-size" title="字体大小 (Ctrl+滚轮调整)">
         {{ editorStore.fontSize }}px
       </span>
+      <span class="tab-settings">
+        <label title="启用Tab键缩进" class="tab-toggle">
+          <input type="checkbox" :checked="editorStore.enableTabIndent" @change="editorStore.toggleTabIndent"/>
+          <span>Tab</span>
+        </label>
+        <span class="tab-size" title="Tab大小">
+          <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>
+      </span>
       <span class="encoding">{{ editorStore.encoding }}</span>
       <button class="settings-btn" @click="editorStore.openSettings">
         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
@@ -70,6 +81,47 @@ const editorStore = useEditorStore();
       cursor: help;
     }
 
+    .tab-settings {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--text-muted);
+      font-size: 11px;
+
+      .tab-toggle {
+        display: flex;
+        align-items: center;
+        gap: 3px;
+        cursor: pointer;
+
+        input {
+          cursor: pointer;
+        }
+      }
+
+      .tab-size {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+
+        .tab-btn {
+          background: none;
+          border: none;
+          color: var(--text-primary);
+          cursor: pointer;
+          padding: 0 3px;
+          font-size: 12px;
+          line-height: 1;
+
+          &:disabled {
+            color: var(--text-muted);
+            opacity: 0.5;
+            cursor: not-allowed;
+          }
+        }
+      }
+    }
+
     .encoding {
       color: var(--text-muted);
       font-size: 11px;
diff --git a/frontend/src/editor/index.vue b/frontend/src/editor/index.vue
index d9df6cc..92aa93a 100644
--- a/frontend/src/editor/index.vue
+++ b/frontend/src/editor/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {onBeforeUnmount, onMounted, ref} from 'vue';
+import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
 import {
   crosshairCursor,
   drawSelection,
@@ -11,7 +11,7 @@ import {
   lineNumbers,
   rectangularSelection,
 } from '@codemirror/view';
-import {EditorState} from '@codemirror/state';
+import {Compartment, EditorState, Extension} from '@codemirror/state';
 import {baseDark} from "@/editor/theme/base-dark";
 import {
   bracketMatching,
@@ -19,16 +19,21 @@ import {
   foldGutter,
   foldKeymap,
   indentOnInput,
-  syntaxHighlighting
+  syntaxHighlighting,
+  indentUnit
 } from '@codemirror/language';
-import {defaultKeymap, history, historyKeymap} from '@codemirror/commands';
+import {
+  defaultKeymap, 
+  history, 
+  historyKeymap, 
+  indentSelection,
+} from '@codemirror/commands';
 import {highlightSelectionMatches, searchKeymap} from '@codemirror/search';
 import {autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap} from '@codemirror/autocomplete';
 import {lintKeymap} from '@codemirror/lint';
 import {fontTheme} from "@/editor/font/font";
-import { useEditorStore } from '@/stores/editor';
+import {useEditorStore} from '@/stores/editor';
 
-// 使用Pinia store
 const editorStore = useEditorStore();
 
 const props = defineProps({
@@ -38,6 +43,10 @@ const props = defineProps({
   }
 });
 
+// 使用Compartment可以动态更新特定的配置而不重建整个编辑器
+const tabSizeCompartment = new Compartment();
+const tabKeyCompartment = new Compartment();
+
 const editorElement = ref<HTMLElement | null>(null);
 
 // 处理滚轮缩放字体
@@ -58,6 +67,106 @@ const handleWheel = (event: WheelEvent) => {
   }
 };
 
+// 自定义Tab键处理函数
+const tabHandler = (view: EditorView): boolean => {
+  // 如果有选中文本，使用indentSelection
+  if (!view.state.selection.main.empty) {
+    return indentSelection(view);
+  }
+  
+  // 获取当前的tabSize值
+  const currentTabSize = editorStore.tabSize;
+  // 创建相应数量的空格
+  const spaces = ' '.repeat(currentTabSize);
+  
+  // 在光标位置插入空格
+  const { state, dispatch } = view;
+  dispatch(state.update(state.replaceSelection(spaces), { scrollIntoView: true }));
+  return true;
+};
+
+// 获取Tab相关的扩展
+const getTabExtensions = (): Extension[] => {
+  const extensions: Extension[] = [];
+  
+  // 设置缩进单位
+  const tabSize = editorStore.tabSize;
+  extensions.push(tabSizeCompartment.of(indentUnit.of(' '.repeat(tabSize))));
+  
+  // 如果启用了Tab缩进，添加自定义Tab键映射
+  if (editorStore.enableTabIndent) {
+    extensions.push(tabKeyCompartment.of(keymap.of([{
+      key: "Tab",
+      run: tabHandler
+    }])));
+  } else {
+    extensions.push(tabKeyCompartment.of([]));
+  }
+  
+  return extensions;
+};
+
+// 创建编辑器
+const createEditor = () => {
+  if (!editorElement.value) return;
+
+  const extensions = [
+    baseDark,
+    fontTheme,
+    lineNumbers(),
+    highlightActiveLineGutter(),
+    highlightSpecialChars(),
+    history(),
+    foldGutter(),
+    drawSelection(),
+    dropCursor(),
+    EditorView.lineWrapping,
+    EditorState.allowMultipleSelections.of(true),
+    indentOnInput(),
+    syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
+    bracketMatching(),
+    closeBrackets(),
+    autocompletion(),
+    rectangularSelection(),
+    crosshairCursor(),
+    highlightSelectionMatches(),
+    keymap.of([
+      ...closeBracketsKeymap,
+      ...defaultKeymap,
+      ...searchKeymap,
+      ...historyKeymap,
+      ...foldKeymap,
+      ...completionKeymap,
+      ...lintKeymap
+    ]),
+    EditorView.updateListener.of(update => {
+      if (update.docChanged || update.selectionSet) {
+        updateStats();
+      }
+    }),
+    ...getTabExtensions()
+  ];
+
+  const state = EditorState.create({
+    doc: props.initialDoc,
+    extensions
+  });
+
+  const view = new EditorView({
+    state,
+    parent: editorElement.value
+  });
+  
+  // 将编辑器实例保存到store
+  editorStore.setEditorView(view);
+  
+  // 初始化统计
+  updateStats();
+  
+  // 应用初始字体大小
+  editorStore.applyFontSize();
+};
+
 // 更新统计信息
 const updateStats = () => {
   if (!editorStore.editorView) return;
@@ -84,64 +193,55 @@ const updateStats = () => {
   });
 };
 
+// 动态更新Tab配置，不需要重建编辑器
+const updateTabConfig = () => {
+  if (!editorStore.editorView) return;
+  
+  // 更新Tab大小配置
+  const tabSize = editorStore.tabSize;
+  
+  const view = editorStore.editorView;
+  
+  // 更新indentUnit配置
+  view.dispatch({
+    effects: tabSizeCompartment.reconfigure(indentUnit.of(' '.repeat(tabSize)))
+  });
+  
+  // 更新Tab键映射
+  const tabKeymap = editorStore.enableTabIndent 
+    ? keymap.of([{ key: "Tab", run: tabHandler }])
+    : [];
+    
+  view.dispatch({
+    effects: tabKeyCompartment.reconfigure(tabKeymap)
+  });
+};
+
+// 重新配置编辑器（仅在必要时完全重建）
+const reconfigureEditor = () => {
+  if (!editorStore.editorView) return;
+  
+  // 尝试动态更新配置
+  updateTabConfig();
+};
+
+// 监听Tab设置变化
+watch(() => editorStore.tabSize, () => {
+  reconfigureEditor();
+});
+// 监听Tab缩进设置变化
+watch(() => editorStore.enableTabIndent, () => {
+  reconfigureEditor();
+});
+
 onMounted(() => {
-  if (!editorElement.value) return;
-
-  const state = EditorState.create({
-    doc: props.initialDoc,
-    extensions: [
-      baseDark,
-      fontTheme,
-      lineNumbers(),
-      highlightActiveLineGutter(),
-      highlightSpecialChars(),
-      history(),
-      foldGutter(),
-      drawSelection(),
-      dropCursor(),
-      EditorView.lineWrapping,
-      EditorState.allowMultipleSelections.of(true),
-      indentOnInput(),
-      syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
-      bracketMatching(),
-      closeBrackets(),
-      autocompletion(),
-      rectangularSelection(),
-      crosshairCursor(),
-      highlightSelectionMatches(),
-      keymap.of([
-        ...closeBracketsKeymap,
-        ...defaultKeymap,
-        ...searchKeymap,
-        ...historyKeymap,
-        ...foldKeymap,
-        ...completionKeymap,
-        ...lintKeymap
-      ]),
-      EditorView.updateListener.of(update => {
-        if (update.docChanged || update.selectionSet) {
-          updateStats();
-        }
-      })
-    ]
-  });
-
-  const view = new EditorView({
-    state,
-    parent: editorElement.value
-  });
-  
-  // 将编辑器实例保存到store
-  editorStore.setEditorView(view);
-  
-  // 初始化统计
-  updateStats();
-  
-  // 应用初始字体大小
-  editorStore.applyFontSize();
+  // 创建编辑器
+  createEditor();
   
   // 添加滚轮事件监听
-  editorElement.value.addEventListener('wheel', handleWheel, { passive: false });
+  if (editorElement.value) {
+    editorElement.value.addEventListener('wheel', handleWheel, { passive: false });
+  }
 });
 
 onBeforeUnmount(() => {
diff --git a/frontend/src/stores/editor.ts b/frontend/src/stores/editor.ts
index d6978b4..b4c3ad5 100644
--- a/frontend/src/stores/editor.ts
+++ b/frontend/src/stores/editor.ts
@@ -1,89 +1,132 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-import { DocumentStats } from '@/types/editor';
-import { EditorView } from '@codemirror/view';
+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 = 12;
+const DEFAULT_FONT_SIZE = 13;
+
+// Tab设置
+const DEFAULT_TAB_SIZE = 4;
+const MIN_TAB_SIZE = 2;
+const MAX_TAB_SIZE = 8;
 
 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);
-  
-  // 方法
-  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`;
-    }
-  }
-  
-  // 设置按钮操作
-  function openSettings() {
-    console.log('打开设置面板');
-    // 此处可以实现设置面板的逻辑
-  }
-  
-  return {
     // 状态
-    documentStats,
-    encoding,
-    editorView,
-    fontSize,
-    
+    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);
+
     // 方法
-    setEditorView,
-    updateDocumentStats,
-    setEncoding,
-    openSettings,
-    increaseFontSize,
-    decreaseFontSize,
-    resetFontSize,
-    applyFontSize
-  };
-}); 
\ No newline at end of file
+    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;
+        }
+    }
+
+    // 设置按钮操作
+    function openSettings() {
+        console.log('打开设置面板');
+        // 此处可以实现设置面板的逻辑
+    }
+
+    return {
+        // 状态
+        documentStats,
+        encoding,
+        editorView,
+        fontSize,
+        enableTabIndent,
+        tabSize,
+
+        // 方法
+        setEditorView,
+        updateDocumentStats,
+        setEncoding,
+        openSettings,
+        increaseFontSize,
+        decreaseFontSize,
+        resetFontSize,
+        applyFontSize,
+        toggleTabIndent,
+        increaseTabSize,
+        decreaseTabSize
+    };
+}, {
+    persist: {
+        key: 'editor',
+        storage: localStorage,
+        pick: ['fontSize', 'encoding', 'enableTabIndent', 'tabSize']
+    }
+});
\ No newline at end of file