u

code/file-preview/test.html

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Download Progress UI Comparison</title>
+
+  <style>
+    /* =========================
+   Base Layout
+========================= */
+    body {
+      margin: 0;
+      font-family: Arial;
+      background: #f5f5f5;
+    }
+
+    .page {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .header,
+    .footer {
+      padding: 12px;
+      background: #fff;
+      border-bottom: 1px solid #eee;
+    }
+
+    .footer {
+      border-top: 1px solid #eee;
+      margin-top: auto;
+    }
+
+    .content {
+      flex: 1;
+      padding: 16px;
+    }
+
+    /* =========================
+   🔴 方案 A：嵌入式进度条
+========================= */
+    .embedded-bar {
+      background: #fff7e6;
+      border: 1px solid #ffe58f;
+      padding: 10px;
+      border-radius: 6px;
+      margin-bottom: 12px;
+    }
+
+    .embedded-bar .row {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      font-size: 13px;
+    }
+
+    .embedded-bar .actions {
+      margin-top: 8px;
+      display: flex;
+      gap: 8px;
+    }
+
+    .embedded-bar button {
+      border: 1px solid #ddd;
+      background: #fff;
+      padding: 4px 8px;
+      cursor: pointer;
+    }
+
+    /* =========================
+   🟢 方案 B：浮层 Dock（推荐）
+========================= */
+    .download-dock {
+      position: fixed;
+      right: 20px;
+      bottom: 20px;
+      width: 320px;
+
+      background: #fff;
+      border-radius: 10px;
+      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+
+      overflow: hidden;
+      z-index: 9999;
+    }
+
+    .dock-header {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 12px;
+      background: #f6f6f6;
+      border-bottom: 1px solid #eee;
+      font-size: 14px;
+    }
+
+    .dock-actions button {
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      font-size: 16px;
+    }
+
+    .dock-body {
+      padding: 12px;
+    }
+
+    .progress-line {
+      display: flex;
+      justify-content: space-between;
+      font-size: 13px;
+      margin-bottom: 8px;
+    }
+
+    .current-file {
+      font-size: 12px;
+      color: #666;
+      margin-bottom: 10px;
+    }
+
+    .bar {
+      height: 6px;
+      background: #eee;
+      border-radius: 3px;
+      overflow: hidden;
+    }
+
+    .bar-inner {
+      width: 45%;
+      height: 100%;
+      background: #faad14;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="page">
+
+    <div class="header">File Manager Header</div>
+
+    <div class="content">
+
+      <!-- =========================
+         🔴 方案 A：嵌入式
+    ========================== -->
+      <div class="embedded-bar">
+        <div class="row">
+          <span>Downloading</span>
+          <span>3 / 10</span>
+          <span>report.pdf</span>
+        </div>
+
+        <div class="actions">
+          <button>Hide</button>
+          <button>Cancel</button>
+        </div>
+      </div>
+
+      <div>
+        <p>File list area...</p>
+        <p>Scroll content...</p>
+        <p>Scroll content...</p>
+        <p>Scroll content...</p>
+      </div>
+
+    </div>
+
+    <div class="footer">Footer</div>
+
+  </div>
+
+  <!-- =========================
+     🟢 方案 B：浮层 Dock
+========================= -->
+  <div class="download-dock">
+    <div class="dock-header">
+      <span>Downloading</span>
+
+      <div class="dock-actions">
+        <button title="minimize">−</button>
+        <button title="close">×</button>
+      </div>
+    </div>
+
+    <div class="dock-body">
+      <div class="progress-line">
+        <span>3 / 10</span>
+        <span>30%</span>
+      </div>
+
+      <div class="current-file">
+        report.pdf
+      </div>
+
+      <div class="bar">
+        <div class="bar-inner"></div>
+      </div>
+    </div>
+  </div>
+
+</body>
+
+</html>