From edb44d16c473073025893841c733b735cc7a813e Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 20:12:30 +0800
Subject: [PATCH 01/20] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=20NetworkM?=
 =?UTF-8?q?onitor=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NetworkMonitor/NetworkMonitor.cs          | 62 +++++++++++++++++++
 .../NetworkMonitor/NetworkMonitorState.cs     | 41 ++++++++++++
 src/BootstrapBlazor/wwwroot/modules/net.js    | 38 ++++++++++++
 3 files changed, 141 insertions(+)
 create mode 100644 src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitor.cs
 create mode 100644 src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorState.cs
 create mode 100644 src/BootstrapBlazor/wwwroot/modules/net.js

diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitor.cs b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitor.cs
new file mode 100644
index 00000000000..1aed6eaa4b7
--- /dev/null
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitor.cs
@@ -0,0 +1,62 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 客户端链接组件
+/// </summary>
+[BootstrapModuleAutoLoader(ModuleName = "net", JSObjectReference = true)]
+public class NetworkMonitor : BootstrapModuleComponentBase
+{
+    /// <summary>
+    /// Gets or sets the callback function that is invoked when the network state changes.
+    /// </summary>
+    [Parameter]
+    public Func<NetworkMonitorState, Task>? OnNetworkStateChanged { get; set; }
+
+    private NetworkMonitorState _state = new();
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, new
+    {
+        Invoke = Interop,
+        OnlineStateChangedCallback = nameof(TriggerOnlineStateChanged),
+        OnNetworkStateChangedCallback = nameof(TriggerNetworkStateChanged)
+    });
+
+    /// <summary>
+    /// JSInvoke 回调方法
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerOnlineStateChanged(bool online)
+    {
+        _state.IsOnline = online;
+        if (OnNetworkStateChanged != null)
+        {
+            await OnNetworkStateChanged(_state);
+        }
+    }
+
+    /// <summary>
+    /// JSInvoke 回调方法
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerNetworkStateChanged(NetworkMonitorState state)
+    {
+        // 网络状态变化回调方法
+        _state = state;
+        _state.IsOnline = true;
+        if (OnNetworkStateChanged != null)
+        {
+            await OnNetworkStateChanged(_state);
+        }
+    }
+}
diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorState.cs b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorState.cs
new file mode 100644
index 00000000000..9bf577a0049
--- /dev/null
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorState.cs
@@ -0,0 +1,41 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 网络状态信息类
+/// </summary>
+public class NetworkMonitorState
+{
+    /// <summary>
+    /// Gets or sets a value indicating whether the network is online
+    /// </summary>
+    public bool IsOnline { get; set; }
+
+    /// <summary>
+    /// Gets or sets the current network type
+    /// </summary>
+    public string? NetworkType { get; set; }
+
+    /// <summary>
+    /// Gets or sets the downlink speed in megabits per second (Mbps).
+    /// </summary>
+    public double? Downlink { get; set; }
+
+    /// <summary>
+    /// Gets or sets the round-trip time (RTT) in milliseconds.
+    /// </summary>
+    public int RTT { get; set; }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    public override string ToString()
+    {
+        return $"IsOnline: {IsOnline} NetworkType: {NetworkType} Downlink: {Downlink} RTT: {RTT}";
+    }
+}
diff --git a/src/BootstrapBlazor/wwwroot/modules/net.js b/src/BootstrapBlazor/wwwroot/modules/net.js
new file mode 100644
index 00000000000..49705b9e316
--- /dev/null
+++ b/src/BootstrapBlazor/wwwroot/modules/net.js
@@ -0,0 +1,38 @@
+import Data from "./data.js"
+import EventHandler from "./event-handler.js";
+
+export function init(id, options) {
+    const { invoke, onlineStateChangedCallback, onNetworkStateChangedCallback } = options;
+    navigator.connection.onchange = e => {
+        const nt = e.target;
+        const { downlink, effectiveType, rtt } = nt;
+        invoke.invokeMethodAsync(onNetworkStateChangedCallback, {
+            downlink, networkType: effectiveType, rTT: rtt
+        });
+    }
+
+    const onlineStateChanged = () => {
+        invoke.invokeMethodAsync(onlineStateChangedCallback, true);
+    }
+    const offlineStateChanged = () => {
+        invoke.invokeMethodAsync(onlineStateChangedCallback, false);
+    }
+    EventHandler.on(window, 'online', onlineStateChanged);
+    EventHandler.on(window, 'offline', offlineStateChanged);
+
+    Data.set(id, {
+        onlineStateChanged,
+        offlineStateChanged
+    })
+}
+
+export async function dispose(id) {
+    var nt = Data.get(id);
+    Data.remove(id);
+
+    if (nt) {
+        const { onlineStateChanged, offlineStateChanged } = nt;
+        EventHandler.off(window, 'online', onlineStateChanged);
+        EventHandler.off(window, 'offline', offlineStateChanged);
+    }
+}

From c16bbe3e8a2eec81fe6ca106c34a9b45ef9891cb Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 20:12:58 +0800
Subject: [PATCH 02/20] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Layout/BaseLayout.razor                      | 2 ++
 .../Components/Layout/BaseLayout.razor.cs                   | 6 ++++++
 2 files changed, 8 insertions(+)

diff --git a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor
index 2c3286201cf..cdfd232b3ed 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor
+++ b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor
@@ -7,6 +7,8 @@
     </main>
 </BootstrapBlazorRoot>
 
+<NetworkMonitor OnNetworkStateChanged="OnNetworkStateChanged"></NetworkMonitor>
+
 <div id="blazor-error-ui">
     An unhandled error has occurred.
     <a href="" class="reload">Reload</a>
diff --git a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.cs
index 324edf5136a..6cafba57a97 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.cs
@@ -95,6 +95,12 @@ private async Task NotifyReboot(DispatchEntry<bool> payload)
         }
     }
 
+    private static Task OnNetworkStateChanged(NetworkMonitorState state)
+    {
+        System.Console.WriteLine(state.ToString());
+        return Task.CompletedTask;
+    }
+
     /// <summary>
     /// 释放资源
     /// </summary>

From c4f879345378497ce9aa195686751a033197e0fa Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 21:12:37 +0800
Subject: [PATCH 03/20] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20Indicator=20?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NetworkMonitor/NetworkMonitor.cs          |  9 ++++++-
 src/BootstrapBlazor/wwwroot/modules/net.js    | 27 +++++++++++++++++--
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitor.cs b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitor.cs
index 1aed6eaa4b7..5150d24aa88 100644
--- a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitor.cs
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitor.cs
@@ -17,6 +17,12 @@ public class NetworkMonitor : BootstrapModuleComponentBase
     [Parameter]
     public Func<NetworkMonitorState, Task>? OnNetworkStateChanged { get; set; }
 
+    /// <summary>
+    /// Gets or sets the list of indicators used for display info.
+    /// </summary>
+    [Parameter]
+    public List<string>? Indicators { get; set; }
+
     private NetworkMonitorState _state = new();
 
     /// <summary>
@@ -27,7 +33,8 @@ public class NetworkMonitor : BootstrapModuleComponentBase
     {
         Invoke = Interop,
         OnlineStateChangedCallback = nameof(TriggerOnlineStateChanged),
-        OnNetworkStateChangedCallback = nameof(TriggerNetworkStateChanged)
+        OnNetworkStateChangedCallback = nameof(TriggerNetworkStateChanged),
+        Indicators
     });
 
     /// <summary>
diff --git a/src/BootstrapBlazor/wwwroot/modules/net.js b/src/BootstrapBlazor/wwwroot/modules/net.js
index 49705b9e316..c2ce159f23d 100644
--- a/src/BootstrapBlazor/wwwroot/modules/net.js
+++ b/src/BootstrapBlazor/wwwroot/modules/net.js
@@ -2,7 +2,7 @@
 import EventHandler from "./event-handler.js";
 
 export function init(id, options) {
-    const { invoke, onlineStateChangedCallback, onNetworkStateChangedCallback } = options;
+    const { invoke, onlineStateChangedCallback, onNetworkStateChangedCallback, indicators } = options;
     navigator.connection.onchange = e => {
         const nt = e.target;
         const { downlink, effectiveType, rtt } = nt;
@@ -12,9 +12,27 @@ export function init(id, options) {
     }
 
     const onlineStateChanged = () => {
+        if (Array.isArray(indicators)) {
+            indicators.forEach(indicator => {
+                const el = document.getElementById(indicator);
+                if (el) {
+                    el.classList.remove('offline');
+                    el.classList.add('online');
+                }
+            });
+        }
         invoke.invokeMethodAsync(onlineStateChangedCallback, true);
     }
     const offlineStateChanged = () => {
+        if (Array.isArray(indicators)) {
+            indicators.forEach(indicator => {
+                const el = document.getElementById(indicator);
+                if (el) {
+                    el.classList.remove('online');
+                    el.classList.add('offline');
+                }
+            });
+        }
         invoke.invokeMethodAsync(onlineStateChangedCallback, false);
     }
     EventHandler.on(window, 'online', onlineStateChanged);
@@ -23,7 +41,12 @@ export function init(id, options) {
     Data.set(id, {
         onlineStateChanged,
         offlineStateChanged
-    })
+    });
+
+    const { downlink, effectiveType, rtt } = navigator.connection;
+    invoke.invokeMethodAsync(onNetworkStateChangedCallback, {
+        downlink, networkType: effectiveType, rTT: rtt
+    });
 }
 
 export async function dispose(id) {

From 742e74a6a7f120cf06fae2372ec113202ecf43eb Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 21:12:46 +0800
Subject: [PATCH 04/20] =?UTF-8?q?style:=20=E5=A2=9E=E5=8A=A0=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NetworkMonitorIndicator.razor.scss        | 44 +++++++++++++++++++
 .../wwwroot/scss/components.scss              |  1 +
 2 files changed, 45 insertions(+)
 create mode 100644 src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss

diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss
new file mode 100644
index 00000000000..8ad5b2edd27
--- /dev/null
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss
@@ -0,0 +1,44 @@
+.bb-nt-indicator {
+    --bb-nt-indicator-width: .5rem;
+    --bb-nt-indicator-border-radius: 50%;
+    --bb-nt-indicator-bg: var(--bs-secondary);
+    background: var(--bb-nt-indicator-bg);
+    cursor: pointer;
+    width: var(--bb-nt-indicator-width);
+    height: var(--bb-nt-indicator-width);
+    border-radius: var(--bb-nt-indicator-border-radius);
+    display: inline-block;
+
+    &.bb-nt-indicator-4g {
+        background-color: var(--bs-success);
+    }
+
+    &.bb-nt-indicator-3g {
+        background-color: var(--bs-warning);
+    }
+
+    &.bb-nt-indicator-2g {
+        background-color: var(--bs-danger);
+    }
+}
+
+.bb-nt-main {
+    .bb-nt-item {
+        display: flex;
+        align-items: center;
+
+        > span {
+            width: 120px;
+        }
+
+        > div {
+            flex: 1;
+            min-width: 0;
+            width: 1%;
+        }
+
+        &:not(:last-child) {
+            margin-bottom: .5rem;
+        }
+    }
+}
diff --git a/src/BootstrapBlazor/wwwroot/scss/components.scss b/src/BootstrapBlazor/wwwroot/scss/components.scss
index da15073286f..bcbd0818c41 100644
--- a/src/BootstrapBlazor/wwwroot/scss/components.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/components.scss
@@ -69,6 +69,7 @@
 @import "../../Components/Menu/Menu.razor.scss";
 @import "../../Components/Message/Message.razor.scss";
 @import "../../Components/Modal/Modal.razor.scss";
+@import "../../Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss";
 @import "../../Components/Pagination/Pagination.razor.scss";
 @import "../../Components/Popover/Popover.razor.scss";
 @import "../../Components/QueryBuilder/QueryBuilder.razor.scss";

From af6bbb28d21c857c8121c2e7cb0fc9496a551011 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 21:13:09 +0800
Subject: [PATCH 05/20] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=BD=91?=
 =?UTF-8?q?=E7=BB=9C=E7=8A=B6=E6=80=81=E6=8C=87=E7=A4=BA=E5=99=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NetworkMonitorIndicator.razor             | 26 +++++++
 .../NetworkMonitorIndicator.razor.cs          | 72 +++++++++++++++++++
 2 files changed, 98 insertions(+)
 create mode 100644 src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor
 create mode 100644 src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs

diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor
new file mode 100644
index 00000000000..212989a9922
--- /dev/null
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor
@@ -0,0 +1,26 @@
+@namespace BootstrapBlazor.Components
+@inherits IdComponentBase
+
+<Popover Title="@Title" Trigger="@Trigger" Placement="@PopoverPlacement">
+    <ChildContent>
+        <span id="@Id" @attributes="@AdditionalAttributes" tabindex="0" class="@ClassString"></span>
+    </ChildContent>
+    <Template>
+        <div class="bb-nt-main">
+            <div class="bb-nt-item">
+                <span>NetworkType：</span>
+                <div>@_state.NetworkType</div>
+            </div>
+            <div class="bb-nt-item">
+                <span>Downlink：</span>
+                <div>@_state.Downlink</div>
+            </div>
+            <div class="bb-nt-item">
+                <span>RTT：</span>
+                <div>@_state.RTT</div>
+            </div>
+        </div>
+    </Template>
+</Popover>
+
+<NetworkMonitor OnNetworkStateChanged="OnNetworkStateChanged" Indicators="@_indicators"></NetworkMonitor>
diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs
new file mode 100644
index 00000000000..dfc58b4e3be
--- /dev/null
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs
@@ -0,0 +1,72 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Represents a network monitor indicator with customizable tooltip settings.
+/// </summary>
+/// <remarks>This component allows you to configure the text, placement, and trigger behavior of a tooltip that
+/// appears when interacting with the network monitor indicator. The tooltip can be customized to provide additional
+/// information to users.</remarks>
+public partial class NetworkMonitorIndicator
+{
+    /// <summary>
+    /// 获得/设置 Popover 弹窗标题 默认为 null
+    /// </summary>
+    [Parameter]
+    public string? Title { get; set; }
+
+    /// <summary>
+    /// 获得/设置 Popover 显示位置 默认为 Top
+    /// </summary>
+    [Parameter]
+    public Placement PopoverPlacement { get; set; } = Placement.Top;
+
+    /// <summary>
+    /// 获得/设置 Popover 触发方式 默认为 hover focus
+    /// </summary>
+    [Parameter]
+    [NotNull]
+    public string? Trigger { get; set; }
+
+    private NetworkMonitorState _state = new();
+    private List<string> _indicators = [];
+
+    private string? ClassString => CssBuilder.Default("bb-nt-indicator")
+        .AddClass("bb-nt-indicator-4g", _state.NetworkType == "4g")
+        .AddClass("bb-nt-indicator-3g", _state.NetworkType == "3g")
+        .AddClass("bb-nt-indicator-2g", _state.NetworkType == "2g")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _indicators.Add(Id);
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        Trigger ??= "hover focus";
+        Title ??= "网络状态";
+    }
+
+    private Task OnNetworkStateChanged(NetworkMonitorState state)
+    {
+        _state = state;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+}

From 6dc42892874d954167164fc50a167576baa49afe Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 21:16:46 +0800
Subject: [PATCH 06/20] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=A6=BB?=
 =?UTF-8?q?=E7=BA=BF=E7=8A=B6=E6=80=81=E6=8C=87=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NetworkMonitor/NetworkMonitorIndicator.razor.scss         | 4 ++++
 src/BootstrapBlazor/wwwroot/modules/net.js                    | 2 --
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss
index 8ad5b2edd27..5cd04b00856 100644
--- a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss
@@ -20,6 +20,10 @@
     &.bb-nt-indicator-2g {
         background-color: var(--bs-danger);
     }
+
+    &.offline {
+        background-color: var(--bs-secondary) !important;
+    }
 }
 
 .bb-nt-main {
diff --git a/src/BootstrapBlazor/wwwroot/modules/net.js b/src/BootstrapBlazor/wwwroot/modules/net.js
index c2ce159f23d..2a8d33dcee1 100644
--- a/src/BootstrapBlazor/wwwroot/modules/net.js
+++ b/src/BootstrapBlazor/wwwroot/modules/net.js
@@ -17,7 +17,6 @@ export function init(id, options) {
                 const el = document.getElementById(indicator);
                 if (el) {
                     el.classList.remove('offline');
-                    el.classList.add('online');
                 }
             });
         }
@@ -28,7 +27,6 @@ export function init(id, options) {
             indicators.forEach(indicator => {
                 const el = document.getElementById(indicator);
                 if (el) {
-                    el.classList.remove('online');
                     el.classList.add('offline');
                 }
             });

From 2ce3876488a33ecdd7cd1ebfed91194b999ee440 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 21:18:49 +0800
Subject: [PATCH 07/20] =?UTF-8?q?refactor:=20=E6=92=A4=E9=94=80=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Layout/BaseLayout.razor                      | 2 --
 .../Components/Layout/BaseLayout.razor.cs                   | 6 ------
 2 files changed, 8 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor
index cdfd232b3ed..2c3286201cf 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor
+++ b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor
@@ -7,8 +7,6 @@
     </main>
 </BootstrapBlazorRoot>
 
-<NetworkMonitor OnNetworkStateChanged="OnNetworkStateChanged"></NetworkMonitor>
-
 <div id="blazor-error-ui">
     An unhandled error has occurred.
     <a href="" class="reload">Reload</a>
diff --git a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.cs
index 6cafba57a97..324edf5136a 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.cs
@@ -95,12 +95,6 @@ private async Task NotifyReboot(DispatchEntry<bool> payload)
         }
     }
 
-    private static Task OnNetworkStateChanged(NetworkMonitorState state)
-    {
-        System.Console.WriteLine(state.ToString());
-        return Task.CompletedTask;
-    }
-
     /// <summary>
     /// 释放资源
     /// </summary>

From b6971fda3f877ecda8f387ee5878112a51c15da6 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 21:27:21 +0800
Subject: [PATCH 08/20] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor | 3 +++
 .../Components/NetworkMonitor/NetworkMonitorIndicator.razor   | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor
index d38bedbe44c..6a0f9ad7627 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor
+++ b/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor
@@ -64,6 +64,9 @@
             <div class="ms-1">BB @VersionService.Version</div>
             <FooterCounter></FooterCounter>
             <CacheCounter></CacheCounter>
+            <div class="ms-2">
+                <NetworkMonitorIndicator PopoverPlacement="Placement.Bottom"></NetworkMonitorIndicator>
+            </div>
         </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>
diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor
index 212989a9922..7352bd21edd 100644
--- a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor
@@ -13,11 +13,11 @@
             </div>
             <div class="bb-nt-item">
                 <span>Downlink：</span>
-                <div>@_state.Downlink</div>
+                <div>@_state.Downlink M/s</div>
             </div>
             <div class="bb-nt-item">
                 <span>RTT：</span>
-                <div>@_state.RTT</div>
+                <div>@_state.RTT ms</div>
             </div>
         </div>
     </Template>

From 1b0dbaa0ca701cd1edeefc3679735962f719f480 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 21:33:21 +0800
Subject: [PATCH 09/20] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=81=A2?=
 =?UTF-8?q?=E5=A4=8D=20Online=20=E7=8A=B6=E6=80=81=E5=90=8E=E9=87=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=95=B0=E6=8D=AE=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor/wwwroot/modules/net.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/BootstrapBlazor/wwwroot/modules/net.js b/src/BootstrapBlazor/wwwroot/modules/net.js
index 2a8d33dcee1..365dcc61360 100644
--- a/src/BootstrapBlazor/wwwroot/modules/net.js
+++ b/src/BootstrapBlazor/wwwroot/modules/net.js
@@ -11,12 +11,20 @@ export function init(id, options) {
         });
     }
 
+    const resetState = () => {
+        const { downlink, effectiveType, rtt } = navigator.connection;
+        invoke.invokeMethodAsync(onNetworkStateChangedCallback, {
+            downlink, networkType: effectiveType, rTT: rtt
+        });
+    }
+
     const onlineStateChanged = () => {
         if (Array.isArray(indicators)) {
             indicators.forEach(indicator => {
                 const el = document.getElementById(indicator);
                 if (el) {
                     el.classList.remove('offline');
+                    resetState();
                 }
             });
         }
@@ -40,11 +48,7 @@ export function init(id, options) {
         onlineStateChanged,
         offlineStateChanged
     });
-
-    const { downlink, effectiveType, rtt } = navigator.connection;
-    invoke.invokeMethodAsync(onNetworkStateChangedCallback, {
-        downlink, networkType: effectiveType, rTT: rtt
-    });
+    resetState();
 }
 
 export async function dispose(id) {

From 626398639257b1bae8b5c886f6c220ab487577ed Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 21:34:37 +0800
Subject: [PATCH 10/20] =?UTF-8?q?refactor:=20=E5=87=8F=E5=B0=91=E4=B8=80?=
 =?UTF-8?q?=E6=AC=A1=E7=BD=91=E7=BB=9C=E8=AF=B7=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor/wwwroot/modules/net.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/BootstrapBlazor/wwwroot/modules/net.js b/src/BootstrapBlazor/wwwroot/modules/net.js
index 365dcc61360..092bf433faa 100644
--- a/src/BootstrapBlazor/wwwroot/modules/net.js
+++ b/src/BootstrapBlazor/wwwroot/modules/net.js
@@ -24,7 +24,6 @@ export function init(id, options) {
                 const el = document.getElementById(indicator);
                 if (el) {
                     el.classList.remove('offline');
-                    resetState();
                 }
             });
         }

From 413ba2b051d12ec3d56a54aa89f876ed5ec3cf6e Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 23:47:51 +0800
Subject: [PATCH 11/20] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NetworkMonitor/NetworkMonitorIndicator.razor.scss       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss
index 5cd04b00856..9d6546064c8 100644
--- a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss
@@ -22,10 +22,14 @@
     }
 
     &.offline {
-        background-color: var(--bs-secondary) !important;
+        background-color: var(--bs-secondary);
     }
 }
 
+[data-bs-toggle="popover"]:has(.offline) {
+    pointer-events: none;
+}
+
 .bb-nt-main {
     .bb-nt-item {
         display: flex;

From 266e61e7bc8f41b1e0ea37c15e999e5f61df8f30 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 23:48:02 +0800
Subject: [PATCH 12/20] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E9=A1=BA=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/NetworkMonitor/NetworkMonitorIndicator.razor     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor
index 7352bd21edd..5bb15876ddf 100644
--- a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor
@@ -3,7 +3,7 @@
 
 <Popover Title="@Title" Trigger="@Trigger" Placement="@PopoverPlacement">
     <ChildContent>
-        <span id="@Id" @attributes="@AdditionalAttributes" tabindex="0" class="@ClassString"></span>
+        <span @attributes="@AdditionalAttributes" id="@Id" tabindex="0" class="@ClassString"></span>
     </ChildContent>
     <Template>
         <div class="bb-nt-main">

From d74f79de13930855cd41dbb70bf00a8d2c538daf Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 23:48:10 +0800
Subject: [PATCH 13/20] =?UTF-8?q?refactor:=20=E5=A4=8D=E7=94=A8=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor/wwwroot/modules/net.js | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/BootstrapBlazor/wwwroot/modules/net.js b/src/BootstrapBlazor/wwwroot/modules/net.js
index 092bf433faa..95bac4d78c6 100644
--- a/src/BootstrapBlazor/wwwroot/modules/net.js
+++ b/src/BootstrapBlazor/wwwroot/modules/net.js
@@ -3,19 +3,14 @@ import EventHandler from "./event-handler.js";
 
 export function init(id, options) {
     const { invoke, onlineStateChangedCallback, onNetworkStateChangedCallback, indicators } = options;
-    navigator.connection.onchange = e => {
-        const nt = e.target;
+    const updateState = nt => {
         const { downlink, effectiveType, rtt } = nt;
         invoke.invokeMethodAsync(onNetworkStateChangedCallback, {
             downlink, networkType: effectiveType, rTT: rtt
         });
     }
-
-    const resetState = () => {
-        const { downlink, effectiveType, rtt } = navigator.connection;
-        invoke.invokeMethodAsync(onNetworkStateChangedCallback, {
-            downlink, networkType: effectiveType, rTT: rtt
-        });
+    navigator.connection.onchange = e => {
+        updateState(e.target);
     }
 
     const onlineStateChanged = () => {
@@ -47,7 +42,8 @@ export function init(id, options) {
         onlineStateChanged,
         offlineStateChanged
     });
-    resetState();
+
+    updateState(navigator.connection);
 }
 
 export async function dispose(id) {

From 60af62d1fb4a6b6b5dfdacff3cc48adbc4d48e65 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 23:59:34 +0800
Subject: [PATCH 14/20] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NetworkMonitor/NetworkMonitorIndicator.razor.cs      | 9 +++++++--
 src/BootstrapBlazor/Locales/en.json                      | 3 +++
 src/BootstrapBlazor/Locales/zh.json                      | 3 +++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs
index dfc58b4e3be..bc4d1d4a5c0 100644
--- a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs
@@ -3,6 +3,8 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
 
+using Microsoft.Extensions.Localization;
+
 namespace BootstrapBlazor.Components;
 
 /// <summary>
@@ -32,8 +34,11 @@ public partial class NetworkMonitorIndicator
     [NotNull]
     public string? Trigger { get; set; }
 
+    [Inject, NotNull]
+    private IStringLocalizer<NetworkMonitorIndicator>? Localizer { get; set; }
+
     private NetworkMonitorState _state = new();
-    private List<string> _indicators = [];
+    private readonly List<string> _indicators = [];
 
     private string? ClassString => CssBuilder.Default("bb-nt-indicator")
         .AddClass("bb-nt-indicator-4g", _state.NetworkType == "4g")
@@ -60,7 +65,7 @@ protected override void OnParametersSet()
         base.OnParametersSet();
 
         Trigger ??= "hover focus";
-        Title ??= "网络状态";
+        Title ??= Localizer["NetworkMonitorIndicatorTitle"];
     }
 
     private Task OnNetworkStateChanged(NetworkMonitorState state)
diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json
index bab4144d7ae..8e1f27bd055 100644
--- a/src/BootstrapBlazor/Locales/en.json
+++ b/src/BootstrapBlazor/Locales/en.json
@@ -389,5 +389,8 @@
   },
   "BootstrapBlazor.Components.ValidateBase": {
     "DefaultRequiredErrorMessage": "{0} is required."
+  },
+  "BootstrapBlazor.Components.NetworkMonitorIndicator": {
+    "NetworkMonitorIndicatorTitle": "Network"
   }
 }
diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json
index 043e283ba57..bef88984a28 100644
--- a/src/BootstrapBlazor/Locales/zh.json
+++ b/src/BootstrapBlazor/Locales/zh.json
@@ -389,5 +389,8 @@
   },
   "BootstrapBlazor.Components.ValidateBase": {
     "DefaultRequiredErrorMessage": "{0}是必填项"
+  },
+  "BootstrapBlazor.Components.NetworkMonitorIndicator": {
+    "NetworkMonitorIndicatorTitle": "网络状态"
   }
 }

From bc40ecd4f285fcc38bb3260cb93da4759f082533 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 12 Jul 2025 23:59:40 +0800
Subject: [PATCH 15/20] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=E5=8D=95?=
 =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/NetworkMonitorIndicatorTest.cs | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 test/UnitTest/Components/NetworkMonitorIndicatorTest.cs

diff --git a/test/UnitTest/Components/NetworkMonitorIndicatorTest.cs b/test/UnitTest/Components/NetworkMonitorIndicatorTest.cs
new file mode 100644
index 00000000000..0ba9a5bd3d9
--- /dev/null
+++ b/test/UnitTest/Components/NetworkMonitorIndicatorTest.cs
@@ -0,0 +1,31 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace UnitTest.Components;
+
+public class NetworkMonitorIndicatorTest : BootstrapBlazorTestBase
+{
+    [Fact]
+    public async Task NetworkMonitorIndicator_Ok()
+    {
+        var cut = Context.RenderComponent<NetworkMonitorIndicator>(pb =>
+        {
+            pb.Add(a => a.PopoverPlacement, Placement.Top);
+        });
+
+        var com = cut.FindComponent<NetworkMonitor>();
+        await cut.InvokeAsync(() => com.Instance.TriggerNetworkStateChanged(new NetworkMonitorState
+        {
+            IsOnline = true,
+            NetworkType = "4g",
+            Downlink = 10.0,
+            RTT = 50
+        }));
+        Assert.DoesNotContain("offline", cut.Markup);
+
+        await cut.InvokeAsync(() => com.Instance.TriggerOnlineStateChanged(false));
+        Assert.DoesNotContain("offline", cut.Markup);
+    }
+}

From 292e6a0272dd5e73fc637b547b54f5d34dd17d3b Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sun, 13 Jul 2025 00:01:28 +0800
Subject: [PATCH 16/20] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0=E5=8D=95?=
 =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/UnitTest/Components/DisplayTest.cs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/UnitTest/Components/DisplayTest.cs b/test/UnitTest/Components/DisplayTest.cs
index 35dd8e71166..6504484b12c 100644
--- a/test/UnitTest/Components/DisplayTest.cs
+++ b/test/UnitTest/Components/DisplayTest.cs
@@ -56,7 +56,7 @@ public async Task LookupService_Ok()
         {
             pb.Add(a => a.LookupService, new MockLookupService());
         });
-        await Task.Delay(50);
+        await Task.Delay(100);
         Assert.Contains("Test1,Test2", cut.Markup);
 
         cut.SetParametersAndRender(pb =>
@@ -64,7 +64,7 @@ public async Task LookupService_Ok()
             pb.Add(a => a.LookupServiceKey, null);
             pb.Add(a => a.Lookup, new List<SelectedItem> { new("v1", "Test3"), new("v2", "Test4") });
         });
-        await Task.Delay(50);
+        await Task.Delay(100);
         Assert.Contains("Test3,Test4", cut.Markup);
     }
 

From bfa0d8cfd830342d89b53ee71cc015fe2252425f Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sun, 13 Jul 2025 00:05:16 +0800
Subject: [PATCH 17/20] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NetworkMonitor/NetworkMonitorIndicator.razor.cs       | 8 +++++++-
 src/BootstrapBlazor/Locales/en.json                       | 5 ++++-
 src/BootstrapBlazor/Locales/zh.json                       | 5 ++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs
index bc4d1d4a5c0..5020815fbc8 100644
--- a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs
@@ -39,6 +39,9 @@ public partial class NetworkMonitorIndicator
 
     private NetworkMonitorState _state = new();
     private readonly List<string> _indicators = [];
+    private string _networkTypeString = "";
+    private string _downlinkString = "";
+    private string _rttString = "";
 
     private string? ClassString => CssBuilder.Default("bb-nt-indicator")
         .AddClass("bb-nt-indicator-4g", _state.NetworkType == "4g")
@@ -65,7 +68,10 @@ protected override void OnParametersSet()
         base.OnParametersSet();
 
         Trigger ??= "hover focus";
-        Title ??= Localizer["NetworkMonitorIndicatorTitle"];
+        Title ??= Localizer["Title"];
+        _networkTypeString = Localizer["NetworkType"];
+        _downlinkString = Localizer["Downlink"];
+        _rttString = Localizer["RTT"];
     }
 
     private Task OnNetworkStateChanged(NetworkMonitorState state)
diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json
index 8e1f27bd055..f68bd3852cb 100644
--- a/src/BootstrapBlazor/Locales/en.json
+++ b/src/BootstrapBlazor/Locales/en.json
@@ -391,6 +391,9 @@
     "DefaultRequiredErrorMessage": "{0} is required."
   },
   "BootstrapBlazor.Components.NetworkMonitorIndicator": {
-    "NetworkMonitorIndicatorTitle": "Network"
+    "NTitle": "Network",
+    "NetworkType": "NetworkType",
+    "Downlink": "Downlink",
+    "RTT": "RTT"
   }
 }
diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json
index bef88984a28..88d10375a7a 100644
--- a/src/BootstrapBlazor/Locales/zh.json
+++ b/src/BootstrapBlazor/Locales/zh.json
@@ -391,6 +391,9 @@
     "DefaultRequiredErrorMessage": "{0}是必填项"
   },
   "BootstrapBlazor.Components.NetworkMonitorIndicator": {
-    "NetworkMonitorIndicatorTitle": "网络状态"
+    "Title": "网络状态",
+    "NetworkType": "网络类型",
+    "Downlink": "下载速度",
+    "RTT": "响应时间"
   }
 }

From 87fa1c06940519c54d06c83cc8b5bb4fd9cbd010 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sun, 13 Jul 2025 00:10:09 +0800
Subject: [PATCH 18/20] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=E5=8D=95?=
 =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NetworkMonitor/NetworkMonitorState.cs     |  9 --------
 .../Components/NetworkMonitorIndicatorTest.cs | 22 +++++++++++++++++--
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorState.cs b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorState.cs
index 9bf577a0049..f6c4afdcbf9 100644
--- a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorState.cs
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorState.cs
@@ -29,13 +29,4 @@ public class NetworkMonitorState
     /// Gets or sets the round-trip time (RTT) in milliseconds.
     /// </summary>
     public int RTT { get; set; }
-
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    /// <returns></returns>
-    public override string ToString()
-    {
-        return $"IsOnline: {IsOnline} NetworkType: {NetworkType} Downlink: {Downlink} RTT: {RTT}";
-    }
 }
diff --git a/test/UnitTest/Components/NetworkMonitorIndicatorTest.cs b/test/UnitTest/Components/NetworkMonitorIndicatorTest.cs
index 0ba9a5bd3d9..ece9ca562eb 100644
--- a/test/UnitTest/Components/NetworkMonitorIndicatorTest.cs
+++ b/test/UnitTest/Components/NetworkMonitorIndicatorTest.cs
@@ -18,14 +18,32 @@ public async Task NetworkMonitorIndicator_Ok()
         var com = cut.FindComponent<NetworkMonitor>();
         await cut.InvokeAsync(() => com.Instance.TriggerNetworkStateChanged(new NetworkMonitorState
         {
-            IsOnline = true,
+            IsOnline = false,
             NetworkType = "4g",
             Downlink = 10.0,
             RTT = 50
         }));
         Assert.DoesNotContain("offline", cut.Markup);
 
-        await cut.InvokeAsync(() => com.Instance.TriggerOnlineStateChanged(false));
+        await cut.InvokeAsync(() => com.Instance.TriggerOnlineStateChanged(true));
         Assert.DoesNotContain("offline", cut.Markup);
     }
+
+    [Fact]
+    public async Task NetworkMonitor_Ok()
+    {
+        NetworkMonitorState? state = null;
+        var cut = Context.RenderComponent<NetworkMonitor>(pb =>
+        {
+            pb.Add(a => a.OnNetworkStateChanged, v =>
+            {
+                state = v;
+                return Task.CompletedTask;
+            });
+        });
+
+        await cut.InvokeAsync(() => cut.Instance.TriggerOnlineStateChanged(false));
+        Assert.NotNull(state);
+        Assert.False(state.IsOnline);
+    }
 }

From f569fe4e5c522272575ff309bd35663e254e011e Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sun, 13 Jul 2025 09:24:24 +0800
Subject: [PATCH 19/20] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor
index 6a0f9ad7627..139cca04eb4 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor
+++ b/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor
@@ -65,7 +65,7 @@
             <FooterCounter></FooterCounter>
             <CacheCounter></CacheCounter>
             <div class="ms-2">
-                <NetworkMonitorIndicator PopoverPlacement="Placement.Bottom"></NetworkMonitorIndicator>
+                <NetworkMonitorIndicator></NetworkMonitorIndicator>
             </div>
         </div>
         <div class="d-flex flex-fill align-items-center justify-content-center">

From 127de2b2e60e0d8fee8e1c24b175f48c5cd66975 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sun, 13 Jul 2025 09:31:00 +0800
Subject: [PATCH 20/20] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/NetworkMonitor/NetworkMonitorIndicator.razor     | 2 +-
 src/BootstrapBlazor/wwwroot/modules/net.js                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor
index 5bb15876ddf..0cf96a79e14 100644
--- a/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor
+++ b/src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor
@@ -13,7 +13,7 @@
             </div>
             <div class="bb-nt-item">
                 <span>Downlink：</span>
-                <div>@_state.Downlink M/s</div>
+                <div>@_state.Downlink Mbps</div>
             </div>
             <div class="bb-nt-item">
                 <span>RTT：</span>
diff --git a/src/BootstrapBlazor/wwwroot/modules/net.js b/src/BootstrapBlazor/wwwroot/modules/net.js
index 95bac4d78c6..a7748f7c1ae 100644
--- a/src/BootstrapBlazor/wwwroot/modules/net.js
+++ b/src/BootstrapBlazor/wwwroot/modules/net.js
@@ -47,7 +47,7 @@ export function init(id, options) {
 }
 
 export async function dispose(id) {
-    var nt = Data.get(id);
+    const nt = Data.get(id);
     Data.remove(id);
 
     if (nt) {