landaiqing/voidraft
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

🎨 Refactor code structure

Browse Source
This commit is contained in:
landaiqing
2025-04-25 18:11:34 +08:00
parent b3ecc08468
commit e87d5ec929
10 changed files with 271 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/toolbar/Toolbar.vue
View File

@@ -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>

35
frontend/src/editor/Editor.vue
View File

@@ -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(() => {
// 创建编辑器

130
frontend/src/editor/extensions/basicSetup.ts
View File

@@ -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
]),
];
};

2
frontend/src/editor/extensions/tabExtension.ts
View File

@@ -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();

2
frontend/src/editor/theme/base-dark.ts → frontend/src/editor/theme/default-dark.ts
View File

@@ -137,7 +137,7 @@ export const customHighlightActiveLine = EditorView.theme({
}
})
export const baseDark: Extension = [
export const defaultDark: Extension = [
draculaTheme,
syntaxHighlighting(draculaHighlightStyle),
]

106
frontend/src/stores/configStore.ts Normal file
View File

@@ -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
}
});

143
frontend/src/stores/editor.ts
View File

@@ -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']
}
});

53
frontend/src/stores/editorStore.ts Normal file
View File

@@ -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
};
});

11
frontend/src/types/config.d.ts vendored Normal file
View File

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

0
frontend/src/types/editor.ts → frontend/src/types/editor.d.ts vendored
View File