增加手机上传图片的功能

web/templates/index.html

@@ -37,7 +37,7 @@ body { background: #f5f7fa; }
 
   <!-- 上传区域 -->
   <div class="row g-3 mb-4">
-    <div class="col-md-6">
+    <div class="col-md-4">
       <div class="section-title">📄 发票 PDF <span class="text-muted fw-normal" style="font-size:12px">（多选）</span></div>
       <div class="upload-zone" id="pdf-zone" onclick="document.getElementById('pdf-input').click()">
         <div class="icon">📁</div>
@@ -46,7 +46,7 @@ body { background: #f5f7fa; }
       </div>
       <input type="file" id="pdf-input" accept=".pdf" multiple hidden onchange="handleFiles(this, 'pdf')">
     </div>
-    <div class="col-md-6">
+    <div class="col-md-4">
       <div class="section-title">🖼️ 支付截图 <span class="text-muted fw-normal" style="font-size:12px">（多选）</span></div>
       <div class="upload-zone" id="img-zone" onclick="document.getElementById('img-input').click()">
         <div class="icon">🖼️</div>
@@ -55,6 +55,11 @@ body { background: #f5f7fa; }
       </div>
       <input type="file" id="img-input" accept="image/*" multiple hidden onchange="handleFiles(this, 'img')">
     </div>
+    <div class="col-md-4 text-center">
+      <div class="section-title">📱 手机扫码上传</div>
+      <div id="qrcode" style="display:inline-block"></div>
+      <p class="text-muted mt-2 mb-0" style="font-size:12px">扫码即可拍照上传</p>
+    </div>
   </div>
 
   <!-- CSV 快捷上传 -->
@@ -126,6 +131,7 @@ body { background: #f5f7fa; }
 
 </div>
 
+<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
 <script>
 let sessionId = null;
 const pdfFiles = [], imgFiles = [];
@@ -357,6 +363,76 @@ function showResult(r) {
     ${mdLink}
   `;
 }
+
+// ---- 二维码 / 手机扫码上传 ----
+let qrGenerated = false;
+let syncTimer = null;
+
+async function generateQr() {
+  await ensureSession();
+  const mobileUrl = window.location.origin + '/mobile/' + sessionId;
+  const box = document.getElementById('qrcode');
+  box.innerHTML = '';
+  new QRCode(box, {
+    text: mobileUrl,
+    width: 120,
+    height: 120,
+    colorDark: '#333',
+    colorLight: '#fff',
+  });
+  qrGenerated = true;
+}
+
+// ---- 实时同步：轮询服务器文件列表，检测手机端上传的新图片 ----
+async function startSync() {
+  if (syncTimer) return;
+  await syncFiles(); // 立即执行一次
+  syncTimer = setInterval(syncFiles, 3000);
+}
+
+function stopSync() {
+  if (syncTimer) { clearInterval(syncTimer); syncTimer = null; }
+}
+
+async function syncFiles() {
+  if (!sessionId) return;
+  try {
+    const r = await fetch(`/api/files/${sessionId}`);
+    const d = await r.json();
+    const serverNames = new Set(d.images || []);
+    const localNames = new Set(imgFiles.map(f => f.name));
+
+    // 检测服务器上有但本地没有的图片（手机端上传的）
+    for (const name of serverNames) {
+      if (!localNames.has(name)) {
+        // 从服务器下载图片并加入本地列表
+        const resp = await fetch(`/api/download/${sessionId}/${encodeURIComponent(name)}`);
+        const blob = await resp.blob();
+        const file = new File([blob], name, { type: blob.type });
+        imgFiles.push(file);
+      }
+    }
+
+    // 检测本地有但服务器没有的图片（被手机端删除了）
+    for (const f of [...imgFiles]) {
+      if (!serverNames.has(f.name)) {
+        const idx = imgFiles.indexOf(f);
+        if (idx > -1) imgFiles.splice(idx, 1);
+      }
+    }
+
+    renderFileList('img');
+    if (imgFiles.length) {
+      document.getElementById('img-zone').classList.add('active');
+    } else {
+      document.getElementById('img-zone').classList.remove('active');
+    }
+  } catch (e) { /* ignore */ }
+}
+
+// ---- 页面加载时自动生成二维码并启动同步 ----
+generateQr();
+startSync();
 </script>
 </body>
 </html>