doc: 更新示例

Author: ArgoZhang

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

@@ -8,15 +8,6 @@
 <DemoBlock Title="@Localizer["NormalTitle"]"
            Introduction="@Localizer["NormalIntro"]"
            Name="Normal">
-    <NetworkMonitor OnNetworkStateChanged="OnNetworkStateChanged"></NetworkMonitor>
-    <section ignore>
-        <ConsoleLogger @ref="_logger"></ConsoleLogger>
-    </section>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["IndicatorTitle"]"
-           Introduction="@Localizer["IndicatorIntro"]"
-           Name="Indicator">
     <section ignore>
         <ul class="ul-demo">
             <li>@Localizer["IndicatorLi1"]</li>
@@ -26,4 +17,7 @@
         </ul>
     </section>
     <NetworkMonitorIndicator></NetworkMonitorIndicator>
+    <section ignore>
+        <ConsoleLogger @ref="_logger"></ConsoleLogger>
+    </section>
 </DemoBlock>

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

@@ -8,13 +8,43 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// <summary>
 /// NetworkMonitor Sample code
 /// </summary>
-public partial class NetworkMonitors
+public partial class NetworkMonitors : IDisposable
 {
+    [Inject, NotNull]
+    private INetworkMonitorService? NetworkMonitorService { get; set; }
+
     private ConsoleLogger _logger = null!;
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        await NetworkMonitorService.RegisterStateChangedCallback(this, OnNetworkStateChanged);
+    }
+
     private Task OnNetworkStateChanged(NetworkMonitorState state)
     {
-        _logger.Log($"Online: {state.IsOnline} NetworkType: {state.NetworkType} Downlink: {state.Downlink} RTT: {state.RTT}");
+        _logger.Log($"Online: NetworkType: {state.NetworkType} Downlink: {state.Downlink} RTT: {state.RTT}");
         return Task.CompletedTask;
     }
+
+    private void Dispose(bool disposing)
+    {
+        if (disposing)
+        {
+            NetworkMonitorService.UnregisterStateChangedCallback(this);
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public void Dispose()
+    {
+        Dispose(true);
+        GC.SuppressFinalize(this);
+    }
 }

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -7123,14 +7123,12 @@
   },
   "BootstrapBlazor.Server.Components.Samples.NetworkMonitors": {
     "NetworkMonitorTitle": "NetworkMonitor",
-    "NetworkMonitorDescription": "链路断开后自动重连示例",
-    "NormalTitle": "基本用法",
-    "NormalIntro": "通过设置 <code>IsAutoReconnect</code> 开启自动重连机制",
-    "IndicatorTitle": "网络状态指示灯",
-    "IndicatorIntro": "使用组件 <code>NetworkMonitorIndicator</code> 当网络状态变化时，显示不同颜色的指示灯，鼠标移动到上面时显示网络状态明细",
-    "IndicatorLi1": "绿色：网络非常好 (4G)",
-    "IndicatorLi2": "黄色：网络一般 (3G)",
-    "IndicatorLi3": "红色：网络差 (2G)",
-    "IndicatorLi4": "灰色：离线状态"
+    "NetworkMonitorDescription": "Use the browser native API <code>navigator.connection</code> to display the current network status in real time",
+    "NormalTitle": "Basic usage",
+    "NormalIntro": "Use the component <code>NetworkMonitorIndicator</code> to display indicator lights of different colors when the network status changes, and display the network status details when the mouse moves over it",
+    "IndicatorLi1": "Green: Very good network (4G)",
+    "IndicatorLi2": "Yellow: Average network (3G)",
+    "IndicatorLi3": "Red: Poor network (2G)",
+    "IndicatorLi4": "Gray: Offline"
   }
 }

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -7125,9 +7125,7 @@
     "NetworkMonitorTitle": "NetworkMonitor 网络状态",
     "NetworkMonitorDescription": "使用浏览器原生 api <code>navigator.connection</code> 实时显示当前网络状态",
     "NormalTitle": "基本用法",
-    "NormalIntro": "网络变化时，通过 <code>OnNetworkStateChanged</code> 回调获得当前网络状态信息",
-    "IndicatorTitle": "网络状态指示灯",
-    "IndicatorIntro": "使用组件 <code>NetworkMonitorIndicator</code> 当网络状态变化时，显示不同颜色的指示灯，鼠标移动到上面时显示网络状态明细",
+    "NormalIntro": "使用组件 <code>NetworkMonitorIndicator</code> 当网络状态变化时，显示不同颜色的指示灯，鼠标移动到上面时显示网络状态明细",
     "IndicatorLi1": "绿色：网络非常好 (4G)",
     "IndicatorLi2": "黄色：网络一般 (3G)",
     "IndicatorLi3": "红色：网络差 (2G)",