doc(FooterCounter): add FooterCounter componenet improve performance (#5150)

* doc: 增加 FooterCounter 组件提高性能

* doc: 增加图片高度样式防止抖动

Co-Authored-By: Alex chow <[email protected]>
Co-Authored-By: Argo Zhang <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/FooterCounter.razor

@@ -0,0 +1,11 @@
+@inject ICacheManager Cache
+@inject IConnectionService ConnectionService
+
+<div class="d-none d-sm-block ms-2">Run @Runtime</div>
+@if (_options.Enable)
+{
+    <div class="footer-online ms-2">
+        <i class="fa-solid fa-people-group"></i>
+        <a href="./online" target="_blank">@ConnectionService.Count</a>
+    </div>
+}

src/BootstrapBlazor.Server/Components/Components/FooterCounter.razor.cs

@@ -0,0 +1,89 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+using Microsoft.Extensions.Options;
+
+namespace BootstrapBlazor.Server.Components.Components;
+
+/// <summary>
+/// FooterCounter 组件
+/// </summary>
+public partial class FooterCounter : IDisposable
+{
+    private string? Runtime { get; set; }
+
+    private CancellationTokenSource DisposeTokenSource { get; } = new();
+
+    private ConnectionHubOptions _options = default!;
+
+    [Inject]
+    [NotNull]
+    private IOptions<BootstrapBlazorOptions>? BootstrapBlazorOptions { get; set; }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _options = BootstrapBlazorOptions.Value.ConnectionHubOptions;
+        UpdateRuntime();
+    }
+
+    /// <summary>
+    /// <inheritdoc />
+    /// </summary>
+    /// <param name="firstRender"></param>
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _ = Task.Run(async () =>
+            {
+                while (!DisposeTokenSource.IsCancellationRequested)
+                {
+                    try
+                    {
+                        await Task.Delay(1000, DisposeTokenSource.Token);
+                    }
+                    catch (TaskCanceledException)
+                    {
+
+                    }
+                    if (!DisposeTokenSource.IsCancellationRequested)
+                    {
+                        UpdateRuntime();
+                        await InvokeAsync(StateHasChanged);
+                    }
+                }
+            });
+        }
+    }
+
+    private void UpdateRuntime()
+    {
+        var ts = DateTimeOffset.Now - Cache.GetStartTime();
+        Runtime = ts.ToString("dd\\.hh\\:mm\\:ss");
+    }
+
+    private void Dispose(bool disposing)
+    {
+        if (disposing)
+        {
+            DisposeTokenSource.Cancel();
+            DisposeTokenSource.Dispose();
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public void Dispose()
+    {
+        Dispose(true);
+        GC.SuppressFinalize(this);
+    }
+}

src/BootstrapBlazor.Server/Components/Components/FooterCounter.razor.css

@@ -0,0 +1,7 @@
+.footer-online i {
+    color: var(--bs-success)
+}
+
+.footer-online a {
+    color: #ddd;
+}

src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor

@@ -1,12 +1,9 @@
 @inherits LayoutComponentBase
-@implements IDisposable
 @layout BaseLayout
 @inject NavigationManager NavigationManager
 @inject IOptionsMonitor<WebsiteOptions> WebsiteOption
 @inject IStringLocalizer<HomeLayout> Localizer
 @inject PackageVersionService VersionService
-@inject ICacheManager Cache
-@inject IConnectionService ConnectionService
 
 @Body
 
@@ -65,14 +62,7 @@
         <div class="d-flex">
             <div>Powered by .NET @Version on @OS</div>
             <div class="ms-1">BB @VersionService.Version</div>
-            <div class="d-none d-sm-block ms-2">Run @Runtime</div>
-            @if (_options.Enable)
-            {
-                <div class="footer-online ms-2">
-                    <i class="fa-solid fa-people-group"></i>
-                    <a href="./online" target="_blank">@ConnectionService.Count</a>
-                </div>
-            }
+            <FooterCounter></FooterCounter>
         </div>
         <div class="d-flex flex-fill align-items-center justify-content-center">
             <a class="d-none d-md-block me-3" href="@WebsiteOption.CurrentValue.GiteeRepositoryUrl" target="_blank">@Localizer["Footer"]</a>

src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor.cs

@@ -18,18 +18,8 @@ public partial class HomeLayout
     [NotNull]
     private string? OS { get; set; }
 
-    private string? Runtime { get; set; }
-
     private string SelectedCulture { get; set; } = CultureInfo.CurrentUICulture.Name;
 
-    private CancellationTokenSource DisposeTokenSource { get; } = new();
-
-    [Inject]
-    [NotNull]
-    private IOptions<BootstrapBlazorOptions>? BootstrapBlazorOptions { get; set; }
-
-    private ConnectionHubOptions _options = default!;
-
     /// <summary>
     /// <inheritdoc />
     /// </summary>
@@ -51,45 +41,6 @@ protected override void OnInitialized()
         {
             OS = "Unknown";
         }
-
-        _options = BootstrapBlazorOptions.Value.ConnectionHubOptions;
-        UpdateRuntime();
-    }
-
-    /// <summary>
-    /// <inheritdoc />
-    /// </summary>
-    /// <param name="firstRender"></param>
-    protected override void OnAfterRender(bool firstRender)
-    {
-        if (firstRender)
-        {
-            _ = Task.Run(async () =>
-            {
-                while (!DisposeTokenSource.IsCancellationRequested)
-                {
-                    try
-                    {
-                        await Task.Delay(1000, DisposeTokenSource.Token);
-                    }
-                    catch (TaskCanceledException)
-                    {
-
-                    }
-                    if (!DisposeTokenSource.IsCancellationRequested)
-                    {
-                        UpdateRuntime();
-                        await InvokeAsync(StateHasChanged);
-                    }
-                }
-            });
-        }
-    }
-
-    private void UpdateRuntime()
-    {
-        var ts = DateTimeOffset.Now - Cache.GetStartTime();
-        Runtime = ts.ToString("dd\\.hh\\:mm\\:ss");
     }
 
     private Task SetLang(string cultureName)
@@ -106,22 +57,4 @@ private Task SetLang(string cultureName)
 
         return Task.CompletedTask;
     }
-
-    private void Dispose(bool disposing)
-    {
-        if (disposing)
-        {
-            DisposeTokenSource.Cancel();
-            DisposeTokenSource.Dispose();
-        }
-    }
-
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    public void Dispose()
-    {
-        Dispose(true);
-        GC.SuppressFinalize(this);
-    }
 }

src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor.css

@@ -59,10 +59,6 @@
         margin-inline-end: 6px;
     }
 
-    .footer-info .footer-online i {
-        color: var(--bs-success)
-    }
-
 .bb-foundation {
     display: flex;
     align-items: center;

src/BootstrapBlazor.Server/Components/Pages/Index.razor.css

@@ -30,6 +30,7 @@
 
     .bd-masthead .bb-logo {
         width: 200px;
+        height: 200px;
     }
 
 .bd-gutter {
@@ -82,6 +83,7 @@
 
     .donate .barcode {
         width: 280px;
+        height: 178.84px;
     }
 
 @media (min-width: 768px) {
@@ -96,5 +98,6 @@
 
     .donate .barcode {
         width: 480px;
+        height: 306.59px;
     }
 }