Update

XHXIAIEIN · Jun 5, 2024 · 4b392fd · 4b392fd
1 parent 29faebf
commit 4b392fd
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -54,7 +54,7 @@ <h1>相册截图工具</h1>
                     <input type="number" id="paddingY" value="4" min="0">
                 </label>
                 <label>
-                    超过指定图片数量生成压缩包:
+                    超过图片数量打包下载:
                     <input type="number" id="fileThreshold" value="5" min="1">
                 </label>
                 <label>
@@ -78,28 +78,28 @@ <h1>相册截图工具</h1>
         </details>
     </div>
 
+    <div id="progressContainer">
+        <p id="progressText"></p>
+        <div id="progressBar"></div>
+    </div>
+
     <button id="captureButton">生成截图</button>
 
-    <details id="about" class="centered">
+    <details id="about" class="centered"> 
         <summary>更多信息</summary>
         <div class="content">
            <h3>这个网站是做什么的？</h3>
-           <p>你可以点击页面虚线框的按钮，指定一个本地文件夹，网站会帮助你将文件夹中的图片以网格布局进行排列，这里还提供了一些简单的参数选项，可以调整页面显示图片的列数、每张图片的间距等。然后点击截图按钮，将他们一键进行截图。</p>
+           <p>点击页面虚线框的按钮，指定一个本地文件夹，网站会帮助你将文件夹中的图片以网格布局进行排列显示，还可以点击截图按钮，一键进行截图。这里还提供了一些简单的参数选项，可以调整页面显示图片的列数、每张图片的间距等。</p>
 
            <h3>我的数据是保密的吗？</h3>
-           <p>是的，你操作的文件不会离开你的电脑。这些文件不会被其他任何人访问到，此页面提供的链接也只能在您本地生效，它只为你工作，加载过程中也没有任何东西通过网络进行传输。 </p>
+           <p>是的，你操作的文件不会离开你的电脑。这些文件不会被其他任何人访问到，此页面提供的服务也只能在您本地生效，它只为你工作，加载过程中也没有任何东西通过网络进行传输。 </p>
 
            <h3>这网站是谁做的？</h3>
-           <p>你好，我是 <a href="https://github.com/XHXIAIEIN">XHXIAIEIN</a>， 是一名独立游戏开发者，正在使用  <a href="https://www.construct.net/a/260259?t=construct3">Construct 3</a> 引擎开发游戏。</p>
+           <p>你好，我是 <a href="https://github.com/XHXIAIEIN">XHXIAIEIN</a>，是一名独立游戏开发者，正在使用 <a href="https://www.construct.net/a/260259?t=construct3">Construct 3</a> 引擎开发游戏。</p>
         </div>
 
     </details>
 
-    <div id="progressContainer">
-        <p id="progressText"></p>
-        <div id="progressBar"></div>
-    </div>
-
     <div id="photoWallContainer">
         <div id="photoWall"></div>
     </div>

diff --git a/script.js b/script.js
@@ -1,4 +1,5 @@
 document.addEventListener('DOMContentLoaded', () => {
+
     const UIElements = {
         dropArea: document.getElementById('dropArea'),
         fileInput: document.getElementById('fileInput'),
@@ -72,8 +73,12 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         progressText.innerText = "导入完成";
+        const photosPerCapture = parseInt(UIElements.rowsInput.value) * parseInt(UIElements.columnsInput.value);
+        const totalScreenshots = Math.ceil(fileArray.length / photosPerCapture);
 
-        setTimeout(() => { progressContainer.style.display = 'none'; }, 500);
+        setTimeout(() => { 
+            progressText.innerText = `文件夹包含图片${fileArray.length}件，预计生成截图 ${totalScreenshots} 张`; 
+        }, 600);
 
         if (photoWall.children.length > 0) {
             photoWallContainer.style.display = 'flex';
@@ -156,6 +161,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const imagesPerCapture = rows * columns;
         const fileThreshold = parseInt(fileThresholdInput.value);
 
+        captureButton.style.display = 'none';
         progressContainer.style.display = 'block';
         progressText.innerText = "正在截图...";
 
@@ -179,13 +185,16 @@ document.addEventListener('DOMContentLoaded', () => {
                 progressBar.style.width = `${zipPercentage}%`;
                 progressText.innerText = `正在打包... ${Math.round(zipPercentage)}%`;
             }
+            progressText.innerText = "正在下载...此过程需要更多的时间，请耐心等待。";
             await zip.generateAsync({type: "blob"})
                 .then(content => {
                     saveAs(content, `Screenshots_${formattedDate}.zip`);
                     progressText.innerText = "完成";
+                    captureButton.style.display = 'block';
                 });
         }
-        setTimeout(() => { progressContainer.style.display = 'none'; }, 2000);
+        setTimeout(() => { progressText.innerText = `请查收 Screenshots_${formattedDate}.zip`; }, 1000);
+        setTimeout(() => { progressContainer.style.display = 'none'; }, 5000);
     }
 
     async function captureAndSaveImage(photos, startIndex, count, filename, UIElements) {

diff --git a/style.css b/style.css
@@ -43,16 +43,11 @@ h3 + p {
 }
 
 #progressContainer {
-    height: 14px; 
-    width: 90%; 
-    padding-bottom: 10px;
-    background: #eee; 
+    padding-bottom: 30px;
     display: none;
 }
 
 #progressBar{
-    width: 0%; 
-    height: 100%; 
     background: #007bff;
 }
 
@@ -65,8 +60,9 @@ h3 + p {
 
 #photoWall {
     display: grid;
-    width: 90%;
+    box-sizing: border-box;
     max-width: 1200px;
+    width: 90%;
     gap: 4px;
     background-color: #ffffff;
 }
@@ -129,15 +125,14 @@ summary {
 }
 
 #about {
-    padding: 10px;
+    padding: 20px 0;
 }
 
 .content {
     margin-top: 10px;
-    padding: 10px;
+    padding: 10px 8%;
     background-color: #f1f1f1;
-    border-radius: 5px;
-    text-align: center;
+    text-align: left;
 }
 
 .centered {