doc: 更新工具栏图标

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -4,21 +4,27 @@
 <div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
     <div class="bb-view-toolbar">
         <div class="bb-view-title">
-            <div class="bb-view-bar"><i class="fa-solid fa-bars"></i></div>
+            <div class="bb-view-icon bb-view-bar"><i class="fa-solid fa-bars"></i></div>
             <span class="bb-view-subject">@_docTitle</span>
         </div>
-        <div class="bb-view-pages">
-            <div>-</div>
-            <input type="text" class="bb-view-num" /><span class="bb-view-slash">/</span><div>14</div>
-            <div>+</div>
+        <div class="bb-view-body">
+            <input type="text" class="bb-view-num" value="1" /><span class="bb-view-slash">/</span><div>14</div>
             <div class="bb-view-divider"></div>
-            <div class="bb-view-fit-page"></div>
-            <div class="bb-view-fit-width"></div>
-            <div class="bb-view-fit-rotate"></div>
+            <div class="bb-view-icon"><i class="fa-solid fa-minus"></i></div>
+            <input type="text" class="bb-view-scale" value="100%" />
+            <div class="bb-view-icon"><i class="fa-solid fa-plus"></i></div>
             <div class="bb-view-divider"></div>
-            <div class="bb-view-draw"></div>
+            <div class="bb-view-icon bb-view-fit-page"><i class="fa-solid fa-arrows-left-right-to-line"></i></div>
+            <div class="bb-view-icon bb-view-fit-width"><i class="fa-solid fa-arrows-left-right"></i></div>
+            <div class="bb-view-icon bb-view-fit-rotate"><i class="fa-solid fa-rotate-left"></i></div>
+            <div class="bb-view-divider"></div>
+            <div class="bb-view-icon bb-view-draw"><i class="fa-solid fa-pen-to-square"></i></div>
+        </div>
+        <div class="bb-view-controls">
+            <div class="bb-view-icon bb-view-download"><i class="fa-solid fa-arrow-right-to-bracket fa-rotate-90"></i></div>
+            <div class="bb-view-icon bb-view-print"><i class="fa-solid fa-print"></i></div>
+            <div class="bb-view-icon bb-view-home"><i class="fa-solid fa-flag"></i></div>
         </div>
-        <div class="bb-view-controls"></div>
     </div>
     <div class="bb-view-container">
         <div class="pdfViewer"></div>

src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf.css

@@ -23,6 +23,12 @@
     padding: 0 1rem;
 }
 
+.bb-view-icon {
+    margin: 0 .5rem;
+    padding: .5rem;
+    cursor: pointer;
+}
+
 .bb-view-bar {
     margin-inline-end: 2rem;
 }
@@ -35,7 +41,7 @@
     max-width: 300px;
 }
 
-.bb-view-pages {
+.bb-view-body {
     flex: 1;
     min-width: 0;
     width: 1%;
@@ -44,11 +50,16 @@
     justify-content: center;
 }
 
-.bb-view-num {
+.bb-view-num, .bb-view-scale {
     width: 36px;
     text-align: center;
     background-color: #000;
     border: none;
+    color: #fff;
+}
+
+.bb-view-scale {
+    width: 40px;
 }
 
 .bb-view-slash {
@@ -59,7 +70,14 @@
     width: .6px;
     height: calc(var(--bb-pdf-toolbar-height) / 3);
     background-color: #777;
-    margin: 0 .5rem;
+    margin: 0 1rem;
+}
+
+.bb-view-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1rem;
 }
 
 .bb-view-container {