feat: 完善 MVP-2 演示和进度体验

2026-07-03 16:57:39 +08:00
parent 867fd39419
commit 9935f67080
20 changed files with 1252 additions and 33 deletions
@@ -1,7 +1,101 @@
 body {
-  background: #f8f9fa;
+  background: #f5f7fb;
+  color: #172033;
 }

 .card {
  border-radius: 8px;
+  border: 1px solid #dfe5ef;
+  box-shadow: 0 10px 28px rgba(31, 42, 68, 0.06);
+}
+
+.navbar {
+  background: #fff !important;
+}
+
+.hero-band {
+  align-items: flex-end;
+  background:
+    linear-gradient(135deg, rgba(12, 22, 40, 0.92), rgba(29, 80, 108, 0.78)),
+    url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1600&q=80");
+  background-position: center;
+  background-size: cover;
+  border-radius: 8px;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  min-height: 300px;
+  padding: 42px;
+}
+
+.hero-copy {
+  max-width: 680px;
+}
+
+.hero-copy h1 {
+  font-size: 48px;
+  font-weight: 700;
+  letter-spacing: 0;
+  margin-bottom: 14px;
+}
+
+.hero-copy p:not(.eyebrow) {
+  color: rgba(255, 255, 255, 0.84);
+  font-size: 18px;
+  line-height: 1.7;
+  margin: 0;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.eyebrow {
+  color: #71d4c7;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.metric-box {
+  background: #f8fafc;
+  border: 1px solid #e3e9f2;
+  border-radius: 8px;
+  height: 100%;
+  padding: 14px;
+}
+
+.status-panel {
+  background: #fff;
+  border: 1px solid #dfe5ef;
+  border-radius: 8px;
+  padding: 32px;
+}
+
+.status-panel-danger {
+  border-color: #f1b8b8;
+}
+
+.task-progress {
+  height: 10px;
+}
+
+.report-progress {
+  height: 10px;
+}
+
+@media (max-width: 768px) {
+  .hero-band {
+    align-items: flex-start;
+    flex-direction: column;
+    min-height: 360px;
+    padding: 28px;
+  }
+
+  .hero-copy h1 {
+    font-size: 36px;
+  }
 }
@@ -114,21 +114,43 @@ function pollTaskListStatus() {

 async function downloadExport(url, defaultFilename, event) {
  if (event) event.preventDefault();
-  const resp = await fetch(url);
-  if (!resp.ok) {
-    alert("导出失败，请稍后重试。");
-    return;
+  const button = event ? event.currentTarget : null;
+  const originalText = button ? button.textContent : "";
+  if (button) {
+    button.disabled = true;
+    button.textContent = "下载中...";
+  }
+  try {
+    const resp = await fetch(url, { cache: "no-store" });
+    if (!resp.ok) {
+      let message = "导出失败，请稍后重试。";
+      try {
+        const data = await resp.json();
+        if (data.detail) message = data.detail;
+      } catch (_error) {
+        message = resp.status === 503 ? "数据库暂时不可用，请稍后重试。" : message;
+      }
+      alert(message);
+      return;
+    }
+    const blob = await resp.blob();
+    const disposition = resp.headers.get("Content-Disposition") || "";
+    const match = disposition.match(/filename\*=UTF-8''([^;]+)/);
+    const filename = match ? decodeURIComponent(match[1]) : defaultFilename;
+    const blobUrl = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(blobUrl);
+  } catch (_error) {
+    alert("网络异常，导出未完成。");
+  } finally {
+    if (button) {
+      button.disabled = false;
+      button.textContent = originalText;
+    }
  }
-  const blob = await resp.blob();
-  const disposition = resp.headers.get("Content-Disposition") || "";
-  const match = disposition.match(/filename\*=UTF-8''([^;]+)/);
-  const filename = match ? decodeURIComponent(match[1]) : defaultFilename;
-  const blobUrl = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = blobUrl;
-  link.download = filename;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-  URL.revokeObjectURL(blobUrl);
 }