From 9091e99a57c3f2325ed587b390afc9d50d3a872a Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Tue, 21 Apr 2026 10:34:49 +0800
Subject: [PATCH] feat(editor): add text locking support and mobile toolbar
 scroll

---
 css/style.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 index.html    |  2 ++
 js/script.js  | 28 ++++++++++++++++++++++++++++
 3 files changed, 77 insertions(+)

diff --git a/css/style.css b/css/style.css
index 121d0b9..bcb50d3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -113,6 +113,40 @@ html, body {
     z-index: 10000;
 }
 
+/* 移动端：允许横向滚动 */
+@media (max-width: 768px) {
+    .editor-toolbar {
+        justify-content: flex-start;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        padding: 8px;
+    }
+    .editor-toolbar::-webkit-scrollbar {
+        display: none;
+    }
+    .toolbar-group {
+        gap: 2px;
+        flex-shrink: 0;
+    }
+    .toolbar-btn {
+        width: 32px;
+        height: 32px;
+        font-size: 14px;
+    }
+    .toolbar-label {
+        font-size: 11px;
+    }
+    .toolbar-label span {
+        display: none;
+    }
+    .roller-picker {
+        min-width: 50px;
+        height: 32px;
+        padding: 2px 4px;
+    }
+}
+
 .editor-toolbar.active {
     visibility: visible;
     opacity: 1;
@@ -412,6 +446,19 @@ html, body {
     cursor: grab;
 }
 
+/* 锁定状态 */
+.text-input.locked {
+    cursor: default !important;
+}
+
+.text-input.locked.selected {
+    outline: 2px dashed rgba(255, 193, 7, 0.8);
+}
+
+.text-input.locked .text-delete-btn {
+    display: none !important;
+}
+
 /* 空输入框显示 placeholder */
 .text-input.show-placeholder::before {
     content: attr(data-placeholder);
diff --git a/index.html b/index.html
index a8c1d23..2d7cf28 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
         <div class="editor-toolbar" id="editorToolbar">
             <!-- 文本编辑工具 -->
             <div class="toolbar-group text-tools" id="textTools">
+                <button class="toolbar-btn" id="lockBtn" title="锁定位置">🔒</button>
+                <div class="toolbar-divider"></div>
                 <button class="toolbar-btn" id="boldBtn" title="加粗">B</button>
                 <button class="toolbar-btn italic" id="italicBtn" title="斜体">I</button>
                 <div class="toolbar-divider"></div>
diff --git a/js/script.js b/js/script.js
index 0729ec0..42b119f 100644
--- a/js/script.js
+++ b/js/script.js
@@ -27,6 +27,7 @@
     const bgOpacityValue = document.getElementById('bgOpacityValue');
     const boldBtn = document.getElementById('boldBtn');
     const italicBtn = document.getElementById('italicBtn');
+    const lockBtn = document.getElementById('lockBtn');
     const colorPicker = document.getElementById('colorPicker');
     const fontPicker = document.getElementById('fontPicker');
     const fontSizePicker = document.getElementById('fontSizePicker');
@@ -971,6 +972,11 @@
                 return;
             }
 
+            // 如果已锁定，禁止拖拽
+            if (element.classList.contains('locked')) {
+                return;
+            }
+
             if (!isMouseDown) return;
             if (!selectedInput) return;
 
@@ -1216,6 +1222,9 @@
             fontPicker.value = fontPicker.options[0].value;
         }
 
+        // 更新锁定按钮状态
+        lockBtn.classList.toggle('active', element.classList.contains('locked'));
+
         // 更新字号选择器
         const fontSizeValueEl = fontSizePicker.querySelector('.roller-value');
         if (fontSizeValueEl) {
@@ -1723,6 +1732,20 @@
             }
         });
 
+        // 锁定按钮
+        lockBtn.addEventListener('click', () => {
+            const targetInput = editingInput || selectedInput;
+            if (!targetInput) return;
+            
+            const isLocked = targetInput.classList.contains('locked');
+            if (isLocked) {
+                targetInput.classList.remove('locked');
+            } else {
+                targetInput.classList.add('locked');
+            }
+            lockBtn.classList.toggle('active', !isLocked);
+        });
+
         // 颜色选择器
         colorPicker.addEventListener('input', () => {
             const targetInput = editingInput || selectedInput;
@@ -1800,6 +1823,11 @@
             const targetEl = selectedInput || selectedOverlay;
             if (!targetEl) return;
 
+            // 如果已锁定，禁止键盘微调
+            if (targetEl.classList.contains('locked')) {
+                return;
+            }
+
             // 防止默认行为（页面滚动）
             if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
                 e.preventDefault();