From 946075f25d88ab687a0d1ccd50c0a2af1acc318a Mon Sep 17 00:00:00 2001 From: landaiqing Date: Fri, 25 Apr 2025 18:34:22 +0800 Subject: [PATCH] :art: Refactor code structure --- frontend/src/editor/Editor.vue | 7 +- .../editor/extensions/wheelZoomExtension.ts | 13 -- frontend/src/stores/configStore.ts | 164 +++++++++--------- frontend/src/stores/editorStore.ts | 1 + 4 files changed, 85 insertions(+), 100 deletions(-) diff --git a/frontend/src/editor/Editor.vue b/frontend/src/editor/Editor.vue index 2e01522..9c8fcee 100644 --- a/frontend/src/editor/Editor.vue +++ b/frontend/src/editor/Editor.vue @@ -10,7 +10,6 @@ import { getTabExtensions, updateTabConfig, createWheelZoomHandler, - applyFontSize, updateStats } from './extensions'; @@ -68,7 +67,7 @@ const createEditor = () => { editorStore.setEditorView(view); // 应用初始字体大小 - applyFontSize(view, configStore.config.fontSize); + editorStore.applyFontSize(); // 立即更新统计信息，不等待用户交互 updateStats(view, editorStore.updateDocumentStats); @@ -98,9 +97,7 @@ watch(() => configStore.config.tabType, reconfigureTabSettings); // 监听字体大小变化 watch(() => configStore.config.fontSize, () => { - if (editorStore.editorView) { - applyFontSize(editorStore.editorView as EditorView, configStore.config.fontSize); - } + editorStore.applyFontSize(); }); onMounted(() => { diff --git a/frontend/src/editor/extensions/wheelZoomExtension.ts b/frontend/src/editor/extensions/wheelZoomExtension.ts index 92b674c..2e3765f 100644 --- a/frontend/src/editor/extensions/wheelZoomExtension.ts +++ b/frontend/src/editor/extensions/wheelZoomExtension.ts @@ -1,5 +1,3 @@ -import {EditorView} from '@codemirror/view'; - // 处理滚轮缩放字体的事件处理函数 export const createWheelZoomHandler = ( increaseFontSize: () => void, @@ -21,15 +19,4 @@ export const createWheelZoomHandler = ( } } }; -}; - -// 应用字体大小到编辑器 -export const applyFontSize = (view: EditorView, fontSize: number) => { - if (!view) return; - - // 更新编辑器的字体大小 - const editorDOM = view.dom; - if (editorDOM) { - editorDOM.style.fontSize = `${fontSize}px`; - } }; \ No newline at end of file diff --git a/frontend/src/stores/configStore.ts b/frontend/src/stores/configStore.ts index ef7a766..4c61ef3 100644 --- a/frontend/src/stores/configStore.ts +++ b/frontend/src/stores/configStore.ts @@ -1,6 +1,6 @@ -import { defineStore } from 'pinia'; -import { ref } from 'vue'; -import { EditorConfig, TabType } from '@/types/config'; +import {defineStore} from 'pinia'; +import {ref} from 'vue'; +import {EditorConfig} from '@/types/config'; // 字体大小范围 const MIN_FONT_SIZE = 12; @@ -13,94 +13,94 @@ const MIN_TAB_SIZE = 2; const MAX_TAB_SIZE = 8; export const useConfigStore = defineStore('config', () => { - // 配置状态 - const config = ref({ - fontSize: DEFAULT_FONT_SIZE, - encoding: 'UTF-8', - enableTabIndent: true, - tabSize: DEFAULT_TAB_SIZE, - tabType: 'spaces' - }); + // 配置状态 + const config = ref({ + 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 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 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; + // 重置字体大小 + function resetFontSize() { + config.value.fontSize = DEFAULT_FONT_SIZE; } - } - // 减少Tab大小 - function decreaseTabSize() { - if (config.value.tabSize > MIN_TAB_SIZE) { - config.value.tabSize -= 1; + // 设置编码 + function setEncoding(newEncoding: string) { + config.value.encoding = newEncoding; } - } - - // 切换Tab类型（空格或制表符） - function toggleTabType() { - config.value.tabType = config.value.tabType === 'spaces' ? 'tab' : 'spaces'; - } - // 设置按钮操作 - function openSettings() { - console.log('打开设置面板'); - // 此处可以实现设置面板的逻辑 - } + // Tab相关方法 + function toggleTabIndent() { + config.value.enableTabIndent = !config.value.enableTabIndent; + } - 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 - }; + // 增加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 - } + persist: { + key: 'editor-config', + storage: localStorage + } }); \ No newline at end of file diff --git a/frontend/src/stores/editorStore.ts b/frontend/src/stores/editorStore.ts index aaca98d..e1daad4 100644 --- a/frontend/src/stores/editorStore.ts +++ b/frontend/src/stores/editorStore.ts @@ -34,6 +34,7 @@ export const useEditorStore = defineStore('editor', () => { const editorDOM = editorView.value.dom; if (editorDOM) { editorDOM.style.fontSize = `${configStore.config.fontSize}px`; + editorView.value?.requestMeasure(); } }