fix: 修复字号调整逻辑，实现每个输入框独立按自身当前字号增减

README.md

@@ -51,7 +51,7 @@
 11. 添加图片尺寸不一致时可以左右滑动图片调整位置，并且图片反转拖拽
 12. 电脑端右键保存/复制/预览图片，手机端长按屏幕弹窗保存/复制/预览图片，可预览
 13. 顶部工具栏下方16px的位置，固定放置文本编辑器工具栏，加粗，斜体，字体颜色，字体，字号，可编辑文字样式
-14. 双击输入框进入编辑状态后，电脑端可左键滑动选的中字体，手机端可双击第二下不松滑动选的中字体
+14.
 
 
 

css/style.css

@@ -118,8 +118,37 @@ html, body {
     cursor: pointer;
 }
 
-#fontSizePicker {
+/* 字号滚轮选择器 */
-    min-width: 60px;
+.roller-picker {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    min-width: 65px;
+    height: 36px;
+}
+
+.roller-arrow {
+    font-size: 10px;
+    color: #666;
+    cursor: pointer;
+    padding: 2px 4px;
+    user-select: none;
+    transition: color 0.2s;
+}
+
+.roller-arrow:hover {
+    color: #4a90e2;
+}
+
+.roller-value {
+    font-size: 14px;
+    min-width: 24px;
+    text-align: center;
+    color: #333;
 }
 
 #fontPicker {

index.html

@@ -36,16 +36,11 @@
             <div class="toolbar-divider"></div>
             <label class="toolbar-label">
                 <span>字号</span>
-                <select id="fontSizePicker">
+                <div class="roller-picker" id="fontSizePicker">
-                    <option value="12">12px</option>
+                    <div class="roller-arrow roller-up">▲</div>
-                    <option value="14">14px</option>
+                    <div class="roller-value">16</div>
-                    <option value="16" selected>16px</option>
+                    <div class="roller-arrow roller-down">▼</div>
-                    <option value="18">18px</option>
+                </div>
-                    <option value="20">20px</option>
-                    <option value="24">24px</option>
-                    <option value="28">28px</option>
-                    <option value="32">32px</option>
-                </select>
             </label>
         </div>
 

js/script.js

@@ -425,6 +425,9 @@
         element.classList.add('selected');
         element.classList.remove('editing');
         element.contentEditable = 'false';
+
+        // 更新工具栏状态
+        updateToolbarState(element);
     }
 
     // 开始编辑
@@ -496,7 +499,12 @@
         }
 
         // 更新字号选择器
-        fontSizePicker.value = fontSize.toString();
+        const fontSizeValueEl = fontSizePicker.querySelector('.roller-value');
+        if (fontSizeValueEl) {
+            const displaySize = isNaN(fontSize) ? 16 : fontSize;
+            fontSizeValueEl.textContent = displaySize.toString();
+            fontSizeValue = displaySize;
+        }
     }
 
     // RGB转十六进制
@@ -622,11 +630,52 @@
             editingInput.style.fontFamily = fontPicker.value + ', sans-serif';
         });
 
-        // 字号选择器
+        // 字号选择器 - 密码锁式滚轮
-        fontSizePicker.addEventListener('change', () => {
+        let fontSizeValue = 16;
-            if (!editingInput) return;
+        const fontSizeRoller = document.getElementById('fontSizePicker');
-            editingInput.style.fontSize = fontSizePicker.value + 'px';
+        const fontSizeValueEl = fontSizeRoller.querySelector('.roller-value');
+        const fontSizeUpBtn = fontSizeRoller.querySelector('.roller-up');
+        const fontSizeDownBtn = fontSizeRoller.querySelector('.roller-down');
+
+        function updateFontSize(newSize, forceUpdate = false) {
+            newSize = Math.max(10, Math.min(42, newSize));
+            const targetInput = editingInput || selectedInput;
+            
+            if (forceUpdate || targetInput) {
+                targetInput.style.fontSize = newSize + 'px';
+                fontSizeValue = newSize;
+                fontSizeValueEl.textContent = newSize;
+            } else {
+                fontSizeValue = newSize;
+                fontSizeValueEl.textContent = newSize;
+            }
+        }
+
+        fontSizeUpBtn.addEventListener('click', () => {
+            const targetInput = editingInput || selectedInput;
+            if (targetInput) {
+                const currentSize = parseInt(window.getComputedStyle(targetInput).fontSize) || fontSizeValue;
+                updateFontSize(currentSize + 1, true);
+            }
         });
+
+        fontSizeDownBtn.addEventListener('click', () => {
+            const targetInput = editingInput || selectedInput;
+            if (targetInput) {
+                const currentSize = parseInt(window.getComputedStyle(targetInput).fontSize) || fontSizeValue;
+                updateFontSize(currentSize - 1, true);
+            }
+        });
+
+        fontSizeRoller.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            const targetInput = editingInput || selectedInput;
+            if (targetInput) {
+                const currentSize = parseInt(window.getComputedStyle(targetInput).fontSize) || fontSizeValue;
+                const delta = e.deltaY > 0 ? -1 : 1;
+                updateFontSize(currentSize + delta, true);
+            }
+        }, { passive: false });
     }
 
     // 显示右键菜单