From ab0255a775ba7d48fa7ecdea7a0e23669b9493c0 Mon Sep 17 00:00:00 2001
From: landaiqing <landaiqing@126.com>
Date: Thu, 24 Apr 2025 18:53:08 +0800
Subject: [PATCH] :sparkles: Added function of scrolling wheel to scale font
 size

---
 frontend/src/components/toolbar/index.vue | 41 ++++++++++++++-------
 frontend/src/editor/font/font.ts          |  2 +-
 frontend/src/editor/index.vue             | 29 +++++++++++++++
 frontend/src/stores/editor.ts             | 43 ++++++++++++++++++++++-
 4 files changed, 100 insertions(+), 15 deletions(-)

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 @@
 <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>
@@ -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<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);
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<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
   };
 }); 
\ No newline at end of file