✨ Added function of scrolling wheel to scale font size

2025-04-24 18:53:08 +08:00
parent 72c2666932
commit ab0255a775
4 changed files with 100 additions and 15 deletions
--- a/frontend/src/components/toolbar/index.vue
+++ b/frontend/src/components/toolbar/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useEditorStore } from '@/stores/editor';
+import {useEditorStore} from '@/stores/editor';

 const editorStore = useEditorStore();
 </script>
@@ -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;
--- 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'
    }
 })
--- a/frontend/src/editor/index.vue
+++ b/frontend/src/editor/index.vue
@@ -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);
--- 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<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
  };
 });