feat: 缩略图增加页码

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css

@@ -186,8 +186,19 @@
         cursor: pointer;
         border: 2px solid #28292a;
         transform: rotate(var(--thumb-rotate));
+        margin: 0 auto;
     }
 
+    ::deep .bb-view-thumbnail-item .bb-view-thumbnail-group {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+        ::deep .bb-view-thumbnail-item .bb-view-thumbnail-group label {
+            color: #fff;
+        }
+
 .bb-view-content {
     position: relative;
     flex: 1 1 auto;

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js

@@ -210,9 +210,17 @@ const resetThumbnailsView = (el, pdfViewer) => {
 
         const page = await pdfViewer.pdfDocument.getPage(i + 1);
         const canvas = await makeThumb(page);
+        const group = document.createElement("div");
+        group.classList.add("bb-view-thumbnail-group");
         const img = document.createElement("img");
         img.src = canvas.toDataURL();
-        item.appendChild(img);
+        group.appendChild(img);
+
+        const label = document.createElement("label");
+        label.innerHTML = `${i + 1}`;
+        group.appendChild(label);
+
+        item.appendChild(group);
     });
 
     EventHandler.on(thumbnailsContainer, "click", ".bb-view-thumbnail-item", e => {