diff --git a/frontend/src/components/toolbar/index.vue b/frontend/src/components/toolbar/index.vue index 2c9efd8..857ed7d 100644 --- a/frontend/src/components/toolbar/index.vue +++ b/frontend/src/components/toolbar/index.vue @@ -1,5 +1,5 @@ @@ -7,18 +7,27 @@ const editorStore = useEditorStore(); - Ln: {{ editorStore.documentStats.lines }} - Ch: {{ editorStore.documentStats.characters }} - + Ln: {{ + editorStore.documentStats.lines + }} + Ch: {{ + editorStore.documentStats.characters + }} + Sel: {{ editorStore.documentStats.selectedCharacters }} + + {{ editorStore.fontSize }}px + {{ editorStore.encoding }} - + - + @@ -36,30 +45,36 @@ const editorStore = useEditorStore(); height: 28px; font-size: 12px; border-top: 1px solid var(--border-color); - + .statistics { display: flex; gap: 12px; - + .stat-item { color: var(--text-muted); - + .stat-value { color: #e0e0e0; } } } - + .actions { display: flex; align-items: center; gap: 12px; - + + .font-size { + color: var(--text-muted); + font-size: 11px; + cursor: help; + } + .encoding { color: var(--text-muted); font-size: 11px; } - + .settings-btn { background: none; border: none; @@ -69,7 +84,7 @@ const editorStore = useEditorStore(); align-items: center; justify-content: center; padding: 2px; - + &:hover { color: var(--text-primary); } diff --git a/frontend/src/editor/font/font.ts b/frontend/src/editor/font/font.ts index 5049a70..312174b 100644 --- a/frontend/src/editor/font/font.ts +++ b/frontend/src/editor/font/font.ts @@ -3,6 +3,6 @@ import {EditorView} from '@codemirror/view' export const fontTheme = EditorView.theme({ '&': { fontFamily: '"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", Arial, sans-serif', - fontSize: '14px' + fontSize: '12px' } }) \ No newline at end of file diff --git a/frontend/src/editor/index.vue b/frontend/src/editor/index.vue index bed1bad..d9df6cc 100644 --- a/frontend/src/editor/index.vue +++ b/frontend/src/editor/index.vue @@ -40,6 +40,24 @@ const props = defineProps({ const editorElement = ref(null); +// 处理滚轮缩放字体 +const handleWheel = (event: WheelEvent) => { + // 检查是否按住了Ctrl键 + if (event.ctrlKey) { + // 阻止默认行为(防止页面缩放) + event.preventDefault(); + + // 根据滚轮方向增大或减小字体 + if (event.deltaY < 0) { + // 向上滚动,增大字体 + editorStore.increaseFontSize(); + } else { + // 向下滚动,减小字体 + editorStore.decreaseFontSize(); + } + } +}; + // 更新统计信息 const updateStats = () => { if (!editorStore.editorView) return; @@ -118,9 +136,20 @@ onMounted(() => { // 初始化统计 updateStats(); + + // 应用初始字体大小 + editorStore.applyFontSize(); + + // 添加滚轮事件监听 + editorElement.value.addEventListener('wheel', handleWheel, { passive: false }); }); onBeforeUnmount(() => { + // 移除滚轮事件监听 + if (editorElement.value) { + editorElement.value.removeEventListener('wheel', handleWheel); + } + if (editorStore.editorView) { editorStore.editorView.destroy(); editorStore.setEditorView(null); diff --git a/frontend/src/stores/editor.ts b/frontend/src/stores/editor.ts index b7ad19a..d6978b4 100644 --- a/frontend/src/stores/editor.ts +++ b/frontend/src/stores/editor.ts @@ -3,6 +3,11 @@ 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; + export const useEditorStore = defineStore('editor', () => { // 状态 const documentStats = ref({ @@ -13,6 +18,7 @@ export const useEditorStore = defineStore('editor', () => { const encoding = ref('UTF-8'); const editorView = ref(null); + const fontSize = ref(DEFAULT_FONT_SIZE); // 方法 function setEditorView(view: EditorView | null) { @@ -27,6 +33,36 @@ export const useEditorStore = defineStore('editor', () => { 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('打开设置面板'); @@ -38,11 +74,16 @@ export const useEditorStore = defineStore('editor', () => { documentStats, encoding, editorView, + fontSize, // 方法 setEditorView, updateDocumentStats, setEncoding, - openSettings + openSettings, + increaseFontSize, + decreaseFontSize, + resetFontSize, + applyFontSize }; }); \ No newline at end of file