Merge branch 'main' of https://github.com/dotnetcore/BootstrapBlazor

Author: actions-user

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></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>

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

@@ -6,13 +6,14 @@
 <h4>@Localizer["SubTitle"]</h4>
 
 <DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
-    <p>@Localizer["BasicUsageP1"]</p>
-    <div class="mb-3">
+    <section ignore>
+        <p>@Localizer["BasicUsageP1"]</p>
         <p class="code-label">@((MarkupString)Localizer["BasicUsageP2"].Value)</p>
         <Pre>public void Configure(IApplicationBuilder app)
 {
     // ...
     // 增加下面这一行
+    // add this line
     app.UseBootstrapBlazor();
     app.UseEndpoints(endpoints =>
     {
@@ -21,13 +22,11 @@
         endpoints.MapFallbackToPage("/_Host");
     });
 }</Pre>
-    </div>
 
-    <Tips>
-        <p>@((MarkupString)Localizer["BasicUsageTips"].Value)</p>
-    </Tips>
+        <Tips>
+            <p>@((MarkupString)Localizer["BasicUsageTips"].Value)</p>
+        </Tips>
 
-    <div class="mb-3">
         <p class="code-label">@((MarkupString)Localizer["BasicUsageP3"].Value)</p>
         <Pre>[Inject]
 [NotNull]
@@ -44,9 +43,29 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         ClientInfo = await ClientService.GetClientInfo();
         StateHasChanged();
     }
-}
-</Pre>
-    </div>
+}</Pre>
+
+        <p class="code-label">@((MarkupString)Localizer["BasicUsageP4"].Value)</p>
+        <p>@((MarkupString)Localizer["LocatorsProviderOptions"].Value)</p>
+        <p>@((MarkupString)Localizer["LocatorsProviderDesc1"].Value)</p>
+        <Pre>{
+    "BootstrapBlazorOptions": {
+        "WebClientOptions": {
+            "EnableIpLocator": true
+    }
+}</Pre>
+        <p>@((MarkupString)Localizer["LocatorsProviderDesc2"].Value)</p>
+        <Pre>services.AddBootstrapBlazor(op =>
+{
+    op.WebClientOptions.EnableIpLocator = true;
+});</Pre>
+        <p>@((MarkupString)Localizer["LocatorsProviderDesc3"].Value)</p>
+        <Pre>services.Configure&lt;BootstrapBlazorOptions&gt;(op =>
+{
+    op.WebClientOptions.EnableIpLocator = true;
+});</Pre>
+
+    </section>
     <GroupBox Title="@Localizer["GroupBoxTitle"]">
         <p class="code-label">@Localizer["IpLocatorFactoryDesc"] <a href="locator" target="_blank">IpLocatorFactory</a></p>
 

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

@@ -17,6 +17,7 @@ private IIpLocatorFactory? IpLocatorFactory { get; set; }
 </Tips>
 <Pre>Encoding.RegisterProvider(CodePagesEncodingProvider.Instance)</Pre>
 <p><b>@Localizer["LocatorsNormalExtendDescription"]</b></p>
+
 <p><b>@Localizer["LocatorsNormalExtend1"]</b></p>
 <Pre>private class CustomerLocatorProvider : DefaultIpLocatorProvider
 {
@@ -25,34 +26,22 @@ private IIpLocatorFactory? IpLocatorFactory { get; set; }
         throw new NotImplementedException();
     }
 }</Pre>
+
 <p><b>@Localizer["LocatorsNormalExtend2"]</b></p>
 <Pre>services.AddSingleton&lt;IIpLocatorProvider, CustomerLocatorProvider&gt;();</Pre>
 <p>@((MarkupString)Localizer["LocatorsNormalCustomerLocator"].Value)</p>
+
+<p><b>@Localizer["LocatorsNormalExtend3"]</b></p>
+<Pre>var provider = IpLocatorFactory.Create(ProviderName);
+Location = await provider.Locate(Ip);</Pre>
+
 <p>@Localizer["LocatorsNormalIpTitle"]</p>
 <p><code>112.224.74.239</code> @Localizer["LocatorsNormalTips3"]</p>
 <p><code>183.160.236.53</code> @Localizer["LocatorsNormalTips4"]</p>
 
 <DemoBlock Title="@Localizer["LocatorsNormalTitle"]" Introduction="@Localizer["LocatorsNormalIntro"]" Name="Normal">
     <section ignore>
         @((MarkupString)Localizer["LocatorsProviderDesc"].Value)
-        <Tips>
-            <p>@((MarkupString)Localizer["LocatorsProviderOptions"].Value)</p>
-        </Tips>
-        <Pre>{
-    "BootstrapBlazorOptions": {
-        "WebClientOptions": {
-            "EnableIpLocator": true
-        }
-    }
-}</Pre>
-  <Pre>services.AddBootstrapBlazor(op =>
-{
-    op.WebClientOptions.EnableIpLocator = true;
-});</Pre>
-    <Pre>services.Configure&lt;BootstrapBlazorOptions&gt;(op =>
-{
-    op.WebClientOptions.EnableIpLocator = true;
-});</Pre>
     </section>
     <div class="row g-3 form-inline">
         <div class="col-12 col-sm-6">

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

@@ -3809,6 +3809,11 @@
     "BasicUsageP2": "1. The <code>UseBootstrapBlazor</code> middleware in the <b>Startup.cs</b> file that client information collection is performed.",
     "BasicUsageTips": "<code>app.UseBootstrapBlazor</code> Middleware is located assembly <code>BootstrapBlazor.Middleware</code>, please refer to this package yourself for proper use",
     "BasicUsageP3": "2. The component uses the injection service <code>WebClientService</code> to call the <code>GetClientInfo</code> method.",
+    "BasicUsageP4": "3. Turn on IP geolocation",
+    "LocatorsProviderOptions": "<code>BootstrapBlazorOptions</code> section <code>WebClientOptions</code> By default it is <code>false</code>, which means the IP address location function is not enabled. Please change it to <code>true</code> in the configuration file or code.",
+    "LocatorsProviderDesc1": "Update the <code>appsetting.json</code> project configuration file",
+    "LocatorsProviderDesc2": "Or use the code to open",
+    "LocatorsProviderDesc3": "Or enable this function through configuration",
     "GroupBoxTitle": "Connection information",
     "IpLocatorFactoryDesc": "This service has built-in IP geolocation function. For detailed configuration and documentation, please refer to",
     "Id": "Connection ID",
@@ -4095,15 +4100,15 @@
     "LocatorsNormalExtendDescription": "Extend the custom geo-location query interface",
     "LocatorsNormalExtend1": "1. Implement a custom locator",
     "LocatorsNormalExtend2": "2. Configure a custom locator",
+    "LocatorsNormalExtend3": "3. Use locator",
     "LocatorsNormalCustomerLocator": "Add <code>CustomerLocatorProvider</code> to the service container using the <code>AddSingleton</code> method",
     "LocatorsNormalIpTitle": "IP test data",
     "LocatorsNormalTips3": "Shandong, China Unicom",
     "LocatorsNormalTips4": "Shushan District Hefei, Anhui China Telecom",
     "LocatorsNormalInputText": "IpAddress",
     "LocatorsNormalDisplayText": "Geographical location",
     "LocatorsNormalButtonText": "Locating",
-    "LocatorsProviderDesc": "<p>The component library has two built-in free online geolocation locators, <code>BaiduIpLocatorProvider</code> <code>BaiduIpLocatorProviderV2</code><p><p>The component library has a built-in paid online geolocation locator <code>BootstrapBlazor.JuHeIpLocatorProvider</code> <a href=\"https://www.nuget.org/packages/BootstrapBlazor.JuHeIpLocatorProvider\" target=\"_blank\">Nuget package</a> <a href=\"https://juhe.cn\" target=\"_blank\">Official website address</a></p><p>The component library has a built-in free offline geolocation locator <code>BootstrapBlazor.IP2Region</code> <a href=\"https://www.nuget.org/packages/BootstrapBlazor.IP2Region\" target=\"_blank\">Nuget package</a></p>",
-    "LocatorsProviderOptions": "<code>BootstrapBlazorOptions</code> section <code>WebClientOptions</code> By default it is <code>false</code>, which means the IP address location function is not enabled. Please change it to <code>true</code> in the configuration file or code."
+    "LocatorsProviderDesc": "<p>The component library has two built-in free online geolocation locators, <code>BaiduIpLocatorProvider</code> <code>BaiduIpLocatorProviderV2</code><p><p>The component library has a built-in paid online geolocation locator <code>BootstrapBlazor.JuHeIpLocatorProvider</code> <a href=\"https://www.nuget.org/packages/BootstrapBlazor.JuHeIpLocatorProvider\" target=\"_blank\">Nuget package</a> <a href=\"https://juhe.cn\" target=\"_blank\">Official website address</a></p><p>The component library has a built-in free offline geolocation locator <code>BootstrapBlazor.IP2Region</code> <a href=\"https://www.nuget.org/packages/BootstrapBlazor.IP2Region\" target=\"_blank\">Nuget package</a></p>"
   },
   "BootstrapBlazor.Server.Components.Samples.Print": {
     "PrintsTitle": "Print",

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

@@ -3809,6 +3809,11 @@
     "BasicUsageP2": "1. <b>Startup.cs</b> 文件中使用 <code>UseBootstrapBlazor</code> 中间件进行客户端信息收集",
     "BasicUsageTips": "<code>app.UseBootstrapBlazor</code> 中间件位于程序集 <code>BootstrapBlazor.Middleware</code>，请自行引用此包才能正常使用",
     "BasicUsageP3": "2. 组件中使用注入服务 <code>WebClientService</code> 调用 <code>GetClientInfo</code> 方法",
+    "BasicUsageP4": "3. 开启 IP 地理位置定位功能",
+    "LocatorsProviderOptions": "全局配置定位器选项 <code>WebClientOptions</code> 默认 <code>false</code> 没有启用 IP 地址定位功能，请在配置文件中或者代码中更改为 <code>true</code>",
+    "LocatorsProviderDesc1": "更新 <code>appsetting.json</code> 项目配置文件",
+    "LocatorsProviderDesc2": "或者使用代码开启",
+    "LocatorsProviderDesc3": "或者通过配置开启本功能",
     "GroupBoxTitle": "您的连接信息",
     "IpLocatorFactoryDesc": "本服务已内置 IP 地理位置定位功能，详细配置与文档请参考",
     "Id": "连接 ID",
@@ -4095,15 +4100,15 @@
     "LocatorsNormalExtendDescription": "扩展自定义地理位置查询接口",
     "LocatorsNormalExtend1": "1. 实现自定义定位器",
     "LocatorsNormalExtend2": "2. 配置自定义定位器",
+    "LocatorsNormalExtend3": "3. 通过定位器定位",
     "LocatorsNormalCustomerLocator": "通过 <code>AddSingleton</code> 方法将自定义定位器 <code>CustomerLocatorProvider</code> 添加到服务容器中",
     "LocatorsNormalIpTitle": "IP 测试数据",
     "LocatorsNormalTips3": "山东省 中国联通",
     "LocatorsNormalTips4": "安徽省合肥市蜀山区 中国电信",
     "LocatorsNormalInputText": "Ip 地址",
     "LocatorsNormalDisplayText": "地理位置",
     "LocatorsNormalButtonText": "定位",
-    "LocatorsProviderDesc": "<p>组件库内置两个免费在线地理位置定位器分别为 <code>BaiduIpLocatorProvider</code> <code>BaiduIpLocatorProviderV2</code><p><p>组件库内置一个收费在线地理位置定位器 <code>BootstrapBlazor.JuHeIpLocatorProvider</code> <a href=\"https://www.nuget.org/packages/BootstrapBlazor.JuHeIpLocatorProvider\" target=\"_blank\">Nuget 包</a> <a href=\"https://juhe.cn\" target=\"_blank\">官网地址</a></p><p>组件库内置一个免费离线地理位置定位器 <code>BootstrapBlazor.IP2Region</code> <a href=\"https://www.nuget.org/packages/BootstrapBlazor.IP2Region\" target=\"_blank\">Nuget 包</a></p>",
-    "LocatorsProviderOptions": "全局配置定位器选项 <code>WebClientOptions</code> 默认 <code>false</code> 没有启用 IP 地址定位功能，请在配置文件中或者代码中更改为 <code>true</code>"
+    "LocatorsProviderDesc": "<p>组件库内置两个免费在线地理位置定位器分别为 <code>BaiduIpLocatorProvider</code> <code>BaiduIpLocatorProviderV2</code><p><p>组件库内置一个收费在线地理位置定位器 <code>BootstrapBlazor.JuHeIpLocatorProvider</code> <a href=\"https://www.nuget.org/packages/BootstrapBlazor.JuHeIpLocatorProvider\" target=\"_blank\">Nuget 包</a> <a href=\"https://juhe.cn\" target=\"_blank\">官网地址</a></p><p>组件库内置一个免费离线地理位置定位器 <code>BootstrapBlazor.IP2Region</code> <a href=\"https://www.nuget.org/packages/BootstrapBlazor.IP2Region\" target=\"_blank\">Nuget 包</a></p>"
   },
   "BootstrapBlazor.Server.Components.Samples.Print": {
     "PrintsTitle": "Print 打印按钮",

src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitor.cs

@@ -0,0 +1,69 @@
+// 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
+
+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; }
+
+    /// <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>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, new
+    {
+        Invoke = Interop,
+        OnlineStateChangedCallback = nameof(TriggerOnlineStateChanged),
+        OnNetworkStateChangedCallback = nameof(TriggerNetworkStateChanged),
+        Indicators
+    });
+
+    /// <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);
+        }
+    }
+}

src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor

@@ -0,0 +1,26 @@
+@namespace BootstrapBlazor.Components
+@inherits IdComponentBase
+
+<Popover Title="@Title" Trigger="@Trigger" Placement="@PopoverPlacement">
+    <ChildContent>
+        <span @attributes="@AdditionalAttributes" id="@Id" 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 Mbps</div>
+            </div>
+            <div class="bb-nt-item">
+                <span>RTT：</span>
+                <div>@_state.RTT ms</div>
+            </div>
+        </div>
+    </Template>
+</Popover>
+
+<NetworkMonitor OnNetworkStateChanged="OnNetworkStateChanged" Indicators="@_indicators"></NetworkMonitor>

src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs

@@ -0,0 +1,83 @@
+// 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.Localization;
+
+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; }
+
+    [Inject, NotNull]
+    private IStringLocalizer<NetworkMonitorIndicator>? Localizer { get; set; }
+
+    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")
+        .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 ??= Localizer["Title"];
+        _networkTypeString = Localizer["NetworkType"];
+        _downlinkString = Localizer["Downlink"];
+        _rttString = Localizer["RTT"];
+    }
+
+    private Task OnNetworkStateChanged(NetworkMonitorState state)
+    {
+        _state = state;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+}