doc(FooterCounter): improve performance for ssr mode (#6607)

* style: 调整计时器宽度

* perf: 更改为服务器端与客户端结合减少服务器压力

* refactor: 更改样式

* style: 更新圆角

* style: 调整滚动条位置

* refactor: 精简进度面板代码

Author: ArgoZhang

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

@@ -1,7 +1,9 @@
 @inject ICacheManager Cache
 @inject IConnectionService ConnectionService
+@inherits WebSiteModuleComponentBase
+@attribute [JSModuleAutoLoader("Components/FooterCounter.razor.js")]
 
-<div class="d-none d-sm-block ms-2">Run @Runtime</div>
+<div id="@Id" class="d-none d-sm-block ms-2" style="width: 110px;">Run @Runtime</div>
 @if (_options.Enable)
 {
     <div class="footer-online ms-2">

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

@@ -10,11 +10,11 @@ namespace BootstrapBlazor.Server.Components.Components;
 /// <summary>
 /// FooterCounter 组件
 /// </summary>
-public partial class FooterCounter : IDisposable
+public partial class FooterCounter
 {
     private string? Runtime { get; set; }
 
-    private CancellationTokenSource _disposeTokenSource = new();
+    private readonly CancellationTokenSource _disposeTokenSource = new();
 
     private ConnectionHubOptions _options = default!;
 
@@ -30,7 +30,9 @@ protected override void OnInitialized()
         base.OnInitialized();
 
         _options = BootstrapBlazorOptions.Value.ConnectionHubOptions;
-        UpdateRuntime();
+
+        var ts = DateTimeOffset.Now - Cache.GetStartTime();
+        Runtime = ts.ToString("dd\\.hh\\:mm\\:ss");
     }
 
     /// <summary>
@@ -41,36 +43,44 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
-        try
+        if (firstRender)
         {
-            await Task.Delay(1000, _disposeTokenSource.Token);
-            UpdateRuntime();
-            StateHasChanged();
+            try
+            {
+                while (_disposeTokenSource is { IsCancellationRequested: false })
+                {
+                    await Task.Delay(30000, _disposeTokenSource.Token);
+                    var ts = DateTimeOffset.Now - Cache.GetStartTime();
+                    await InvokeVoidAsync("updateFooterCounter", Id, ts.TotalSeconds);
+                }
+            }
+            catch { }
         }
-        catch { }
     }
 
-    private void UpdateRuntime()
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync()
     {
         var ts = DateTimeOffset.Now - Cache.GetStartTime();
-        Runtime = ts.ToString("dd\\.hh\\:mm\\:ss");
+        return InvokeVoidAsync("init", Id, ts.TotalSeconds);
     }
 
-    private void Dispose(bool disposing)
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="disposing"></param>
+    /// <returns></returns>
+    protected override async ValueTask DisposeAsync(bool disposing)
     {
+        await base.DisposeAsync(true);
+
         if (disposing)
         {
             _disposeTokenSource.Cancel();
             _disposeTokenSource.Dispose();
         }
     }
-
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    public void Dispose()
-    {
-        Dispose(true);
-        GC.SuppressFinalize(this);
-    }
 }

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

@@ -0,0 +1,46 @@
+import Data from "../../_content/BootstrapBlazor/modules/data.js"
+
+export function init(id, totalSeconds) {
+    const el = document.getElementById(id);
+    if (el === null) {
+        return;
+    }
+
+    const tick = () => {
+        const counter = Data.get(id);
+
+        counter.totalSeconds = (counter.totalSeconds || 0) + 1;
+        const now = Math.round(counter.totalSeconds, 0);
+
+        const days = Math.floor(now / (24 * 3600));
+        const hours = Math.floor((now % (24 * 3600)) / 3600);
+        const minutes = Math.floor((now % 3600) / 60);
+        const seconds = now % 60;
+
+        const pad = num => num.toString().padStart(2, '0');
+        el.innerHTML = `Run ${pad(days)}.${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+    }
+
+    const handler = setInterval(tick, 1000);
+    Data.set(id, {
+        el,
+        handler,
+        totalSeconds
+    });
+}
+
+export function updateFooterCounter(id, totalSeconds) {
+    const counter = Data.get(id);
+    if (counter) {
+        counter.totalSeconds = totalSeconds;
+        console.log(`FooterCounter updated: ${id}, totalSeconds: ${totalSeconds}`);
+    }
+}
+
+export function dispose(id) {
+    const counter = Data.get(id);
+    if (counter) {
+        clearInterval(counter.handler);
+        Data.remove(id);
+    }
+}

src/BootstrapBlazor.Server/Components/Components/Video.razor

@@ -3,12 +3,12 @@
 
 <p><b>@Localizer["H1"]</b></p>
 
-@if (VideoUrl.Any())
+@if (VideoUrl.Count > 0)
 {
     foreach (var url in VideoUrl)
     {
         <div class="mb-3">
-            <a class="fa-solid fa-video" href="@url" target="_blank"><span class="ms-2">@Localizer["L1"]</span></a>
+            <a href="@url" target="_blank"><i class="fa-solid fa-video"></i><span class="ms-2">@Localizer["L1"]</span></a>
         </div>
     }
 }

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

@@ -44,6 +44,7 @@
             position: absolute;
             left: var(--bb-btn-space);
             top: var(--bb-btn-space);
+            border-radius: inherit;
         }
 
 .bb-logo:before {

src/BootstrapBlazor.Server/Components/Samples/Tutorials/Dashboard.razor

@@ -129,22 +129,16 @@
         <div class="col-md-6">
             <Card IsShadow="true" HeaderText="分类进度">
                 <BodyTemplate>
-                    <Scroll Height="320px" style="overflow:scroll;">
-                        <div style="margin-right:10px;">
-                            @{
-                                foreach (var item in Data.TestKKSGroupList)
-                                {
-                                    <h4 class="small fw-bold">
-                                        @item.KKS @item.NAM<span class="float-end">
-                                            @(
-                                            item.Percent
-                                                )%
-                                        </span>
-                                    </h4>
-                                    <BootstrapBlazor.Components.Progress Value="@item.Percent" IsAnimated="true" Color="@GetColor(item.Percent)" IsShowValue="true" Round="1"></BootstrapBlazor.Components.Progress>
-                                }
-                            }
-                        </div>
+                    <Scroll Height="320px" style="margin: -1rem; padding: 1rem;">
+                        @foreach (var item in Data.TestKKSGroupList)
+                        {
+                            <div class="progress-item">
+                                <div class="small fw-bold mb-2">
+                                    @item.KKS @item.NAM<span class="float-end">@item.Percent%</span>
+                                </div>
+                                <BootstrapBlazor.Components.Progress Value="@item.Percent" IsAnimated="true" Color="@GetColor(item.Percent)" IsShowValue="true" Round="1"></BootstrapBlazor.Components.Progress>
+                            </div>
+                        }
                     </Scroll>
                 </BodyTemplate>
             </Card>

src/BootstrapBlazor.Server/Components/Samples/Tutorials/Dashboard.razor.css

@@ -20,3 +20,7 @@
     .db-progress ::deep .progress {
         flex: 1;
     }
+
+.progress-item:not(:last-child) {
+    margin-block-end: 1rem;
+}