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

index.html

@@ -121,11 +121,11 @@
                 <!-- 输入框图层 -->
                 <div class="preview-input-layer" id="previewInputLayer">
                     <!-- 文字输入框1 - 企业 -->
-                    <div class="text-input hidden" id="input1" contenteditable="false" data-placeholder="请输入" style="left: 98px; top: 234.445px; font-weight: bold;"></div>
+                    <div class="text-input hidden" id="input1" contenteditable="false"></div>
                     <!-- 文字输入框2 - 姓名 -->
-                    <div class="text-input hidden" id="input2" contenteditable="false" data-placeholder="请输入" style="left: 98px; top: 276.355px; font-weight: bold;"></div>
+                    <div class="text-input hidden" id="input2" contenteditable="false"></div>
                     <!-- 文字输入框3 - 编号 -->
-                    <div class="text-input hidden" id="input3" contenteditable="false" data-placeholder="请输入" style="left: 98px; top: 319.048px; font-weight: bold;"></div>
+                    <div class="text-input hidden" id="input3" contenteditable="false"></div>
                 </div>
                 <!-- 提示文字（最上层，层叠图之下） -->
                 <div class="empty-tip" id="emptyTip">请点击上方「添加图片」按钮上传背景图</div>
@@ -171,6 +171,7 @@
     </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+    <script src="./js/inputs-config.js"></script>
     <script src="./js/script.js"></script>
     <script src="./js/qr.js"></script>
 </body>

js/inputs-config.js

@@ -0,0 +1,30 @@
+// 输入框初始化配置 - 独立于主逻辑的配置文件
+// 如需调整初始化位置或样式，请修改此文件
+var INPUTS_CONFIG = {
+  "inputs": [
+    {
+      "id": "input1",
+      "label": "企业",
+      "left": 100,
+      "top": 218.4,
+      "fontWeight": "bold",
+      "placeholder": "请输入"
+    },
+    {
+      "id": "input2",
+      "label": "嘉宾",
+      "left": 100,
+      "top": 261.4,
+      "fontWeight": "bold",
+      "placeholder": "请输入"
+    },
+    {
+      "id": "input3",
+      "label": "编号",
+      "left": 100,
+      "top": 308.1,
+      "fontWeight": "bold",
+      "placeholder": "请输入"
+    }
+  ]
+};

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');