feat: 增加联动功能

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -28,12 +28,14 @@
                 <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>
                 <Dropdown TValue="string" Color="Color.None" SkipValidate="true" ShowLabel="false"
-                          IsPopover="true" Icon="@MoreButtonIcon">
+                          IsPopover="false" MenuAlignment="Alignment.Right" Icon="@MoreButtonIcon">
                     <ItemsTemplate>
-                        @if (Options.ShowTowPagesOnViewButton)
+                        @if (Options.ShowTwoPagesOnViewButton)
                         {
-                            <div class="dropdown-item dropdown-item-pages">Two pages on view</div>
+                            <div class="dropdown-item dropdown-item-pages" @onclick="OnToggleTwoPagesOneView"><i class="@_twoPagesOneViewIcon"></i><span>Two pages on view</span></div>
+                            <Divider></Divider>
                         }
+                        <div class="dropdown-item"><i class="fa-solid fa-fw"></i><span>Document properties</span></div>
                     </ItemsTemplate>
                 </Dropdown>
             </div>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs

@@ -44,7 +44,8 @@ public partial class PdfReader
     private uint _currentPage;
     private string? _url;
     private string? _currentScale;
-    private bool _enableTwoPagesOnView;
+    private bool _enableTwoPagesOneView;
+    private string? _twoPagesOneViewIcon;
 
     private readonly HashSet<string> AllowedScaleValues = ["page-actual", "page-width", "page-height", "page-fit", "auto"];
 
@@ -89,6 +90,14 @@ private void SetCurrentScale(string value)
         }
     }
 
+    private void OnToggleTwoPagesOneView()
+    {
+        _enableTwoPagesOneView = !_enableTwoPagesOneView;
+        Options.EnableTwoPagesOnView = _enableTwoPagesOneView;
+
+        _twoPagesOneViewIcon = _enableTwoPagesOneView ? "fa-solid fa-fw fa-check" : "fa-solid fa-fw";
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -105,6 +114,7 @@ protected override void OnParametersSet()
         _docTitle = Path.GetFileName(Options.Url);
 
         MoreButtonIcon ??= "fa-solid fa-ellipsis-vertical";
+        _twoPagesOneViewIcon ??= "fa-solid fa-fw";
     }
 
     /// <summary>
@@ -122,7 +132,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _currentPage = Options.CurrentPage;
             _url = Options.Url;
             _currentScale = Options.CurrentScale;
-            _enableTwoPagesOnView = Options.EnableTwoPagesOnView;
+            _enableTwoPagesOneView = Options.EnableTwoPagesOnView;
         }
 
         if (_url != Options.Url)
@@ -146,10 +156,10 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _currentScale = Options.CurrentScale;
             await InvokeVoidAsync("scale", Id, _currentScale);
         }
-        if (_enableTwoPagesOnView != Options.EnableTwoPagesOnView)
+        if (_enableTwoPagesOneView != Options.EnableTwoPagesOnView)
         {
             _currentScale = Options.CurrentScale;
-            await InvokeVoidAsync("setPages", Id, _enableTwoPagesOnView);
+            await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView);
         }
     }
 

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

@@ -105,7 +105,12 @@ export function scale(id, scale) {
 export function setPages(id, enableTowPagesOnView) {
     const { el, pdfViewer } = Data.get(id);
     if (pdfViewer) {
-        pdfViewer.spreadMode = 1;
+        if (enableTowPagesOnView) {
+            pdfViewer.spreadMode = 1;
+        }
+        else {
+            pdfViewer.spreadMode = 0;
+        }
     }
 }
 

src/components/BootstrapBlazor.PdfReader/PdfReaderOptions.cs

@@ -42,7 +42,7 @@ public class PdfReaderOptions
     /// <summary>
     /// 获得/设置 是否显示双页单视图按钮 默认 true 显示
     /// </summary>
-    public bool ShowTowPagesOnViewButton { get; set; } = true;
+    public bool ShowTwoPagesOnViewButton { get; set; } = true;
 
     /// <summary>
     /// 获得/设置 是否启用双页单视图模式 默认 false