feat: 抽离输入框配置并添加拖拽位置提示

js/script.js

@@ -44,6 +44,7 @@
     const guideV = document.getElementById('guideV');
     const gridLines = document.getElementById('gridLines');
 
+    let inputsConfig = null;
     let currentImage = null;
     let bgImageScale = 1;
     let bgImageOpacity = 1;
@@ -263,6 +264,19 @@
         
         updateUndoRedoButtons();
 
+        // 从配置文件应用输入框初始参数
+        if (typeof INPUTS_CONFIG !== 'undefined' && INPUTS_CONFIG && INPUTS_CONFIG.inputs) {
+            INPUTS_CONFIG.inputs.forEach(function(cfg) {
+                var el = document.getElementById(cfg.id);
+                if (el) {
+                    el.style.left = cfg.left + 'px';
+                    el.style.top = cfg.top + 'px';
+                    if (cfg.fontWeight) el.style.fontWeight = cfg.fontWeight;
+                    if (cfg.placeholder) el.dataset.placeholder = cfg.placeholder;
+                }
+            });
+        }
+
         // 初始化输入框
         initInput(input1);
         initInput(input2);
@@ -393,6 +407,7 @@
                 if (selectedInput) {
                     selectedInput.classList.remove('selected');
                     selectedInput = null;
+                    hidePositionInfo();
                 }
                 // 取消层叠图选中状态
                 if (selectedOverlay) {
@@ -1192,6 +1207,7 @@
         if (selectedInput) {
             selectedInput.classList.remove('selected');
             selectedInput = null;
+            hidePositionInfo();
         }
         if (editingInput) {
             endEdit(editingInput);
@@ -1504,6 +1520,53 @@
             isInteractingWithBgImage = false;
         }
     }
+    
+    // ==================== 输入框位置信息显示 ====================
+    var positionInfoEl = null;
+    
+    // 创建位置信息提示元素
+    function ensurePositionInfo() {
+        if (!positionInfoEl) {
+            positionInfoEl = document.createElement('div');
+            positionInfoEl.className = 'input-position-info';
+            positionInfoEl.style.cssText = 'display:none;position:fixed;padding:3px 8px;background:rgba(0,0,0,0.75);color:#fff;font-size:12px;border-radius:4px;pointer-events:none;z-index:10000;white-space:nowrap;font-family:monospace;';
+            document.body.appendChild(positionInfoEl);
+        }
+        return positionInfoEl;
+    }
+    
+    // 显示并更新位置信息
+    function showPositionInfo(element) {
+        var info = ensurePositionInfo();
+        var left = parseFloat(element.style.left) || 0;
+        var top = parseFloat(element.style.top) || 0;
+        info.textContent = 'left: ' + left.toFixed(1) + 'px  top: ' + top.toFixed(1) + 'px';
+        
+        // 将 info 定位在输入框上方
+        var rect = element.getBoundingClientRect();
+        info.style.left = (rect.left + rect.width / 2 - info.offsetWidth / 2) + 'px';
+        info.style.top = (rect.top - 30) + 'px';
+        info.style.display = 'block';
+    }
+    
+    // 更新位置信息（拖拽中实时调用）
+    function updatePositionInfo(element, left, top) {
+        var info = ensurePositionInfo();
+        info.textContent = 'left: ' + left.toFixed(1) + 'px  top: ' + top.toFixed(1) + 'px';
+        info.style.left = (parseFloat(info.style.left)) + 'px';
+        
+        // 重新定位到输入框上方
+        var rect = element.getBoundingClientRect();
+        info.style.left = (rect.left + rect.width / 2 - info.offsetWidth / 2) + 'px';
+        info.style.top = (rect.top - 30) + 'px';
+    }
+    
+    // 隐藏位置信息
+    function hidePositionInfo() {
+        if (positionInfoEl) {
+            positionInfoEl.style.display = 'none';
+        }
+    }
 
     // 初始化输入框 - 每个输入框独立管理自己的拖拽状态
     function initInput(element) {
@@ -1633,6 +1696,9 @@
                 element.style.left = snapped.left + 'px';
                 element.style.top = snapped.top + 'px';
                 
+                // 实时更新位置信息显示
+                updatePositionInfo(element, snapped.left, snapped.top);
+                
                 // 显示对齐辅助线
                 showAlignmentGuides(element);
             }
@@ -1728,6 +1794,9 @@
 
         // 更新工具栏状态
         updateToolbarState(element);
+        
+        // 显示位置信息
+        showPositionInfo(element);
     }
 
     // 开始编辑
@@ -2272,6 +2341,7 @@
         if (selectedInput) {
             selectedInput.classList.remove('selected');
             selectedInput = null;
+            hidePositionInfo();
         }
         // 隐藏编辑器工具栏
         editorToolbar.classList.remove('active');