index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>财务自动化归档系统</title>
    <style>
      :root {
        --primary: #3370ff;
        --primary-hover: #4c83ff;
        --primary-active: #245bdb;
        --bg: #f5f6f7;
        --card-bg: #fff;
        --text-main: #1f2329;
        --text-sub: #646a73;
        --text-muted: #8f959e;
        --border: #dee0e3;
        --danger: #f54a45;
        --success: #00b666;
      }
      body {
        margin: 0;
        padding: 48px 16px;
        background: var(--bg);
        color: var(--text-main);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
        display: flex;
        justify-content: center;
      }
      .container {
        width: 100%;
        max-width: 760px;
        background: var(--card-bg);
        border-radius: 12px;
        padding: 28px;
        box-sizing: border-box;
        box-shadow: 0 8px 24px rgba(31, 35, 41, 0.08);
      }
      h1 {
        margin: 0 0 20px;
        font-size: 24px;
      }
      .upload-area {
        border: 1px dashed var(--border);
        border-radius: 10px;
        padding: 28px;
        text-align: center;
        cursor: pointer;
        transition: 0.2s ease;
      }
      .upload-area:hover,
      .upload-area.dragover {
        border-color: var(--primary);
        background: #f0f4ff;
      }
      .file-list {
        margin-top: 20px;
        border: 1px solid var(--border);
        border-radius: 10px;
        min-height: 120px;
      }
      .file-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
      }
      .file-item:last-child {
        border-bottom: none;
      }
      .btn-run {
        width: 100%;
        margin-top: 18px;
        border: none;
        border-radius: 10px;
        background: var(--primary);
        color: #fff;
        height: 44px;
        font-size: 15px;
        cursor: pointer;
      }
      .btn-run:hover {
        background: var(--primary-hover);
      }
      .btn-run:active {
        background: var(--primary-active);
      }
      .btn-del {
        border: none;
        background: transparent;
        color: var(--danger);
        cursor: pointer;
      }
      .log-box {
        margin-top: 16px;
        white-space: pre-wrap;
        background: #1f2329;
        color: #dbe0e8;
        border-radius: 10px;
        min-height: 80px;
        padding: 12px;
        font-family: ui-monospace, Menlo, Consolas, monospace;
      }
      .empty {
        color: var(--text-muted);
        text-align: center;
        padding: 24px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>财务自动化归档系统</h1>
      <div class="upload-area" id="dropZone" onclick="document.getElementById('fileInput').click()">
        点击或拖拽上传文件（支持 PDF 发票与订单截图）
        <input type="file" id="fileInput" multiple style="display: none" onchange="handleUpload(this.files)" />
      </div>
      <div class="file-list" id="fileList"></div>
      <button class="btn-run" onclick="runProcess()">开始自动匹配与归档</button>
      <div class="log-box" id="logs">等待操作...</div>
    </div>

    <script>
      const API = "";
      const dropZone = document.getElementById("dropZone");
      const fileList = document.getElementById("fileList");
      const logs = document.getElementById("logs");

      dropZone.addEventListener("dragover", (e) => {
        e.preventDefault();
        dropZone.classList.add("dragover");
      });
      dropZone.addEventListener("dragleave", () => dropZone.classList.remove("dragover"));
      dropZone.addEventListener("drop", (e) => {
        e.preventDefault();
        dropZone.classList.remove("dragover");
        if (e.dataTransfer.files?.length) handleUpload(e.dataTransfer.files);
      });

      async function loadFiles() {
        try {
          const res = await fetch(`${API}/files`);
          if (!res.ok) throw new Error(`HTTP ${res.status}`);
          const data = await res.json();
          const files = Array.isArray(data.files) ? data.files : [];
          if (!files.length) {
            fileList.innerHTML = '<div class="empty">暂无待处理文件</div>';
            return;
          }
          fileList.innerHTML = files
            .map(
              (f) => `<div class="file-item"><span>${escapeHtml(f)}</span><button class="btn-del" onclick="deleteFile('${encodeURIComponent(f)}')">移除</button></div>`
            )
            .join("");
        } catch (err) {
          logs.innerText = `加载文件失败: ${String(err)}`;
        }
      }

      async function handleUpload(files) {
        if (!files?.length) return;
        const fd = new FormData();
        for (const f of files) fd.append("files", f);
        const res = await fetch(`${API}/upload`, { method: "POST", body: fd });
        if (!res.ok) {
          logs.innerText = `上传失败: HTTP ${res.status}`;
          return;
        }
        document.getElementById("fileInput").value = "";
        await loadFiles();
      }

      async function deleteFile(encodedName) {
        const name = decodeURIComponent(encodedName);
        const res = await fetch(`${API}/files/${encodeURIComponent(name)}`, { method: "DELETE" });
        if (!res.ok) {
          logs.innerText = `删除失败: HTTP ${res.status}`;
          return;
        }
        await loadFiles();
      }

      async function runProcess() {
        const btn = document.querySelector(".btn-run");
        btn.disabled = true;
        btn.textContent = "处理中...";
        logs.innerText = "正在分析并匹配...";
        try {
          const res = await fetch(`${API}/run`, { method: "POST" });
          const data = await res.json();
          const rows = Array.isArray(data.logs) ? data.logs : ["处理完成，但无日志返回"];
          logs.innerText = rows.join("\n");
        } catch (err) {
          logs.innerText = `处理失败: ${String(err)}`;
        } finally {
          btn.disabled = false;
          btn.textContent = "开始自动匹配与归档";
          await loadFiles();
        }
      }

      function escapeHtml(input) {
        return String(input)
          .replaceAll("&", "&amp;")
          .replaceAll("<", "&lt;")
          .replaceAll(">", "&gt;")
          .replaceAll('"', "&quot;")
          .replaceAll("'", "&#39;");
      }

      loadFiles();
    </script>
  </body>
</html>