feat: 适配网站子目录部署，项目路由静态资源路径改为 /tool/invitation-maker/

README.md

@@ -61,7 +61,7 @@
 21. 调整图文工具栏布局，解决顶部遮挡问题，图片透明度滑块添加百分比
 22. 给背景图添加编辑器，与层叠图编辑器文本编辑器通用一个工具栏，背景图工具栏功能为：背景图可以放大缩小，可以调节透明度，其余功能不受影响，点击层叠图只显示当前编辑器工具栏
 23. 校准画布编辑与图片导出文字垂直位置偏移问题，修改屏幕尺寸为960x1361像素
-
+24. 添加新输入框，HTML文件里三个文本输入框改为随着添加背景图片后显示，三个输入框的位置分别为left：98px, top: 232.945px；left：98px, top: 275.555px；left：98px, top: 317.548px；
 
 
 

css/style.css

@@ -414,6 +414,11 @@ html, body {
     cursor: grabbing;
 }
 
+/* 隐藏元素 */
+.hidden {
+    display: none !important;
+}
+
 /* 隐藏空提示 */
 .empty-tip.hidden {
     display: none;

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>极简邀请函制作</title>
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="./css/style.css">
 </head>
 <body>
     <div class="app">
@@ -84,13 +84,13 @@
                 <div class="guide-line guide-horizontal" id="guideH"></div>
                 <div class="guide-line guide-vertical" id="guideV"></div>
                 <!-- 输入框图层 -->
-                <div class="preview-input-layer">
+                <div class="preview-input-layer" id="previewInputLayer">
                     <!-- 文字输入框1 - 企业 -->
-                    <div class="text-input" id="input1" contenteditable="false" style="left: 98px; top: 232.945px;">企业：</div>
+                    <div class="text-input hidden" id="input1" contenteditable="false" style="left: 98px; top: 232.945px;">企业：</div>
                     <!-- 文字输入框2 - 姓名 -->
-                    <div class="text-input" id="input2" contenteditable="false" style="left: 98px; top: 275.555px;">姓名：</div>
+                    <div class="text-input hidden" id="input2" contenteditable="false" style="left: 98px; top: 275.555px;">姓名：</div>
                     <!-- 文字输入框3 - 编号 -->
-                    <div class="text-input" id="input3" contenteditable="false" style="left: 98px; top: 317.548px;">编号：</div>
+                    <div class="text-input hidden" id="input3" contenteditable="false" style="left: 98px; top: 317.548px;">编号：</div>
                 </div>
                 <!-- 提示文字（最上层，层叠图之下） -->
                 <div class="empty-tip" id="emptyTip">请点击上方「添加图片」按钮上传背景图</div>
@@ -104,6 +104,6 @@
     <input type="file" id="fileInput" accept="image/*" hidden>
     <canvas id="exportCanvas" hidden></canvas>
 
-    <script src="js/script.js"></script>
+    <script src="./js/script.js"></script>
 </body>
 </html>

js/script.js

@@ -239,11 +239,23 @@
                 bgOpacitySlider.value = 100;
                 bgOpacityValue.textContent = '100%';
                 updateBgImage();
+                
+                // 显示预设的文本输入框
+                showPresetTextInputs();
             };
             img.src = e.target.result;
         };
         reader.readAsDataURL(file);
     }
+    
+    // 显示预设的文本输入框
+    function showPresetTextInputs() {
+        [input1, input2, input3].forEach(inputEl => {
+            if (inputEl) {
+                inputEl.classList.remove('hidden');
+            }
+        });
+    }
 
     // 添加文本输入框
     function addTextInput() {