doc: 更新示例

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Authenticators.razor

@@ -11,6 +11,15 @@
             max-width: 500px;
             margin: 0 auto;
         }
+
+        .opt-progress-label {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 0.75rem;
+            color: var(--bs-body-color);
+        }
     </style>
 </HeadContent>
 
@@ -21,7 +30,10 @@
 <PackageTips Name="BootstrapBlazor.Authenticator"></PackageTips>
 
 <DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["IntroText1"]" Name="Normal">
-    <QRCode Content="@_content" Width="256" class="mb-3"></QRCode>
+    <QRCode Content="@_content" Width="190" class="mb-3"></QRCode>
     <OtpInput Value="@_code" class="text-center mb-3"></OtpInput>
-    <BootstrapBlazor.Components.Progress Value="@_remain" IsShowValue="false"></BootstrapBlazor.Components.Progress>
+    <div class="position-relative">
+        <BootstrapBlazor.Components.Progress Value="@_progress" IsShowValue="false"></BootstrapBlazor.Components.Progress>
+        <span class="opt-progress-label">@_remain</span>
+    </div>
 </DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/Authenticators.razor.cs

@@ -23,9 +23,9 @@ public partial class Authenticators
 
     private string? _code;
 
-    private double _remain = 0;
+    private double _progress = 0;
 
-    private int _time = 0;
+    private int _remain = 0;
 
     /// <summary>
     /// <inheritdoc/>
@@ -49,8 +49,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         await Task.Delay(1000);
         _code = TotpService.Compute("OMM2LVLFX6QJHMYI");
-        _time = TotpService.Instance.GetRemainingSeconds();
-        _remain = (30d - _time) * 100 / 30d;
+        _remain = TotpService.Instance.GetRemainingSeconds();
+        _progress = (30d - _remain) * 100 / 30d;
         StateHasChanged();
     }
 }