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

✨ Added function of scrolling wheel to scale font size

Browse Source
This commit is contained in:
landaiqing
2025-04-24 18:53:08 +08:00
parent 72c2666932
commit ab0255a775
4 changed files with 100 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/toolbar/index.vue
View File

@@ -7,18 +7,27 @@ const editorStore = useEditorStore();
<template>
<div class="toolbar-container">
<div class="statistics">
<span class="stat-item">Ln: <span class="stat-value">{{ editorStore.documentStats.lines }}</span></span>
<span class="stat-item">Ch: <span class="stat-value">{{ editorStore.documentStats.characters }}</span></span>
<span class="stat-item" v-if="editorStore.documentStats.selectedCharacters > 0">
<span class="stat-item" title="行数">Ln: <span class="stat-value">{{
editorStore.documentStats.lines
}}</span></span>
<span class="stat-item" title="字符数">Ch: <span class="stat-value">{{
editorStore.documentStats.characters
}}</span></span>
<span class="stat-item" title="选中字符数" v-if="editorStore.documentStats.selectedCharacters > 0">
Sel: <span class="stat-value">{{ editorStore.documentStats.selectedCharacters }}</span>
</span>
</div>
<div class="actions">
<span class="font-size" title="字体大小 (Ctrl+滚轮调整)">
{{ editorStore.fontSize }}px
</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" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<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>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
</button>
</div>
@@ -55,6 +64,12 @@ const editorStore = useEditorStore();
align-items: center;
gap: 12px;
.font-size {
color: var(--text-muted);
font-size: 11px;
cursor: help;
}
.encoding {
color: var(--text-muted);
font-size: 11px;

2
frontend/src/editor/font/font.ts
View File

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

29
frontend/src/editor/index.vue
View File

@@ -40,6 +40,24 @@ const props = defineProps({
const editorElement = ref<HTMLElement | null>(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);

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

@@ -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<DocumentStats>({
@@ -13,6 +18,7 @@ export const useEditorStore = defineStore('editor', () => {
const encoding = ref('UTF-8');
const editorView = ref<EditorView | null>(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
};
});