Merge branch 'main' into feat-toolbar

ArgoZhang · ArgoZhang · commit 4bb21df4c20e · 2025-08-05T10:47:23.000+08:00
diff --git a/src/BootstrapBlazor.Server/Components/Pages/Index.razor b/src/BootstrapBlazor.Server/Components/Pages/Index.razor
@@ -7,22 +7,20 @@
 <section class="bd-masthead">
     <div class="container-xxl bd-gutter">
         <div class="col-md-8 mx-auto text-center">
-            <a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://github.com/dotnetcore/BootstrapBlazor?wt.mc_id=DT-MVP-5004174" rel="noopener" target="_blank">
-                <span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 mb-lg-0 rounded-5 masthead-notice">
+            <a class="d-inline-flex text-dark text-decoration-none" href="https://github.com/dotnetcore/BootstrapBlazor?wt.mc_id=DT-MVP-5004174" rel="noopener" target="_blank">
+                <span class="py-2 px-3 rounded-5 masthead-notice">
                     @Localizer["Support"]
                 </span>
             </a>
-            <img src="./favicon.png" alt="bootstrap-blazor" class="bb-logo d-none d-sm-block mx-auto my-5">
+            <img src="./favicon.png" alt="bootstrap-blazor" class="bb-logo d-sm-block mx-auto my-5">
             <h1 class="mb-3 fw-semibold">@Localizer["Title"]</h1>
             <p class="lead mb-4">
                 @Localizer["SubTitle"]
             </p>
-            <div class="d-flex flex-column flex-lg-row align-items-md-stretch justify-content-md-center gap-3 mb-4">
-                <a href="introduction/" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold">
-                    <i class="fa-solid fa-book-open"></i>
-                    <span class="ms-2">@Localizer["Docs"]</span>
-                </a>
-            </div>
+            <a href="introduction" class="btn btn-lg bd-btn-lg btn-bd-primary mb-4 d-inline-flex align-items-center justify-content-center fw-semibold">
+                <i class="fa-solid fa-book-open"></i>
+                <span class="ms-2">@Localizer["Docs"]</span>
+            </a>
             <p class="text-body-secondary mb-0">
                 Currently <strong>@_versionString</strong>
                 <span class="px-1">·</span>
diff --git a/src/BootstrapBlazor.Server/Components/Pages/Index.razor.css b/src/BootstrapBlazor.Server/Components/Pages/Index.razor.css
@@ -4,7 +4,7 @@
     --bd-pink-rgb: 214, 51, 132;
     --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
     --bd-accent-rgb: 255, 228, 132;
-    padding-top: calc(3rem + var(--bs-header-height));
+    padding-top: 3rem;
     background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.01), rgba(var(--bs-body-bg-rgb), 1) 85%), radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.5), transparent 50%), radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), 0.5), transparent 50%), radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), 0.5), transparent 50%), radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), 0.5), transparent 50%);
     margin-top: calc(0px - var(--bs-header-height));
 }
@@ -88,10 +88,14 @@
     }
 
 @media (min-width: 768px) {
-    .bd-masthead .lead {
-        font-size: calc(1.275rem + .3vw);
+    .bd-masthead {
+        padding-top: calc(3rem + var(--bs-header-height));
     }
 
+        .bd-masthead .lead {
+            font-size: calc(1.275rem + .3vw);
+        }
+
     .welcome-header {
         margin-top: 0;
         margin-bottom: 0;
diff --git a/src/BootstrapBlazor.Server/Components/Samples/BrowserFingers.razor b/src/BootstrapBlazor.Server/Components/Samples/BrowserFingers.razor
@@ -12,7 +12,12 @@ private async Task GetFingerCodeAsync()
 }</Pre>
     <BootstrapInputGroup>
         <BootstrapInputGroupLabel DisplayText="Browser-Finger"></BootstrapInputGroupLabel>
-        <BootstrapInput @bind-Value="@_code" />
+        <BootstrapInput Value="@_code" Readonly="true" />
+    </BootstrapInputGroup>
+
+    <BootstrapInputGroup class="mt-3">
+        <BootstrapInputGroupLabel DisplayText="ClientHubId"></BootstrapInputGroupLabel>
+        <BootstrapInput Value="@_clientHubId" Readonly="true" />
     </BootstrapInputGroup>
 </DemoBlock>
 
diff --git a/src/BootstrapBlazor.Server/Components/Samples/BrowserFingers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/BrowserFingers.razor.cs
@@ -15,6 +15,7 @@ public partial class BrowserFingers
     private IBrowserFingerService? BrowserFingerService { get; set; }
 
     private string? _code;
+    private string? _clientHubId;
 
     /// <summary>
     /// <inheritdoc/>
@@ -25,10 +26,13 @@ protected override async Task OnInitializedAsync()
         await base.OnInitializedAsync();
 
         _code = await GetFingerCodeAsync();
+        _clientHubId = await GetClientHubIdAsync();
     }
 
     private Task<string?> GetFingerCodeAsync() => BrowserFingerService.GetFingerCodeAsync();
 
+    private Task<string?> GetClientHubIdAsync() => BrowserFingerService.GetClientHubIdAsync();
+
     private MethodItem[] GetMethods() =>
     [
         new()
@@ -37,6 +41,13 @@ private MethodItem[] GetMethods() =>
             Description = Localizer["GetFingerCodeAsync"],
             Parameters = " — ",
             ReturnValue = "Task<string?>"
+        },
+        new()
+        {
+            Name = "GetClientHubIdAsync",
+            Description = Localizer["GetClientHubIdAsync"],
+            Parameters = " — ",
+            ReturnValue = "Task<string?>"
         }
     ];
 }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/OtpInputs.razor b/src/BootstrapBlazor.Server/Components/Samples/OtpInputs.razor
@@ -11,10 +11,12 @@
             text-align: center;
         }
 
+        @@media(max-width: 768px) {
             .otp-input-demo .bb-otp-input {
                 --bb-otp-item-width: 32px;
                 --bb-otp-font-size: 1.2em;
             }
+        }
     </style>
 </HeadContent>
 
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -6688,7 +6688,8 @@
   "BootstrapBlazor.Server.Components.Samples.BrowserFingers": {
     "BrowserFingerTitle": "Browser fingerprint",
     "BrowserFingerIntro": "Obtain the client browser fingerprint by calling the <code>IBrowserFingerService</code> service instance method <code>GetFingerCodeAsync</code>. The fingerprint is consistent in privacy mode",
-    "GetFingerCodeAsync": "Method for obtaining fingerprints"
+    "GetFingerCodeAsync": "Method for obtaining fingerprints",
+    "GetClientHubIdAsync": "Method for obtaining client hub Id"
   },
   "BootstrapBlazor.Server.Components.Samples.SvgEditors": {
     "SvgEditorTitle": "SvgEditor",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -6688,7 +6688,8 @@
   "BootstrapBlazor.Server.Components.Samples.BrowserFingers": {
     "BrowserFingerTitle": "浏览器指纹",
     "BrowserFingerIntro": "通过调用 <code>IBrowserFingerService</code> 服务实例方法 <code>GetFingerCodeAsync</code> 获得客户端浏览器指纹，隐私模式下指纹是一致的",
-    "GetFingerCodeAsync": "获得指纹方法"
+    "GetFingerCodeAsync": "获得指纹方法",
+    "GetClientHubIdAsync": "获得客户端连接 Id 方法"
   },
   "BootstrapBlazor.Server.Components.Samples.SvgEditors": {
     "SvgEditorTitle": "Svg 编辑器",
diff --git a/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs b/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs
@@ -93,7 +93,7 @@ public partial class BootstrapInputNumber<TValue>
 
     [Inject]
     [NotNull]
-    private IOptions<BootstrapBlazorOptions>? StepOption { get; set; }
+    private IOptionsMonitor<BootstrapBlazorOptions>? StepOption { get; set; }
 
     private string? _lastInputValueString;
 
@@ -123,7 +123,7 @@ protected override void OnParametersSet()
         MinusIcon ??= IconTheme.GetIconByKey(ComponentIcons.InputNumberMinusIcon);
         PlusIcon ??= IconTheme.GetIconByKey(ComponentIcons.InputNumberPlusIcon);
 
-        StepString = Step ?? StepOption.Value.GetStep<TValue>() ?? "any";
+        StepString = Step ?? StepOption.CurrentValue.GetStep<TValue>() ?? "any";
 
         if (Value is null)
         {
diff --git a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs
@@ -96,7 +96,7 @@ public partial class ValidateForm
 
     [Inject]
     [NotNull]
-    private IOptions<JsonLocalizationOptions>? Options { get; set; }
+    private IOptionsMonitor<JsonLocalizationOptions>? Options { get; set; }
 
     [Inject]
     [NotNull]
@@ -388,7 +388,7 @@ private void ValidateDataAnnotations(object? value, ValidationContext context, L
                 var find = false;
                 if (!string.IsNullOrEmpty(rule.ErrorMessage))
                 {
-                    var resourceType = Options.Value.ResourceManagerStringLocalizerType;
+                    var resourceType = Options.CurrentValue.ResourceManagerStringLocalizerType;
                     if (resourceType != null && LocalizerFactory.Create(resourceType).TryGetLocalizerString(rule.ErrorMessage, out var text))
                     {
                         rule.ErrorMessage = text;
diff --git a/src/BootstrapBlazor/Services/DefaultBrowserFingerService.cs b/src/BootstrapBlazor/Services/DefaultBrowserFingerService.cs
@@ -13,12 +13,15 @@ class DefaultBrowserFingerService(IJSRuntime jSRuntime) : IBrowserFingerService
     [NotNull]
     private JSModule? _module = null;
 
-    /// <summary>
-    /// 获取剪切板数据方法
-    /// </summary>
     public async Task<string?> GetFingerCodeAsync(CancellationToken token = default)
     {
         _module ??= await jSRuntime.LoadUtility();
         return await _module.InvokeAsync<string?>("getFingerCode", token);
     }
+
+    public async Task<string?> GetClientHubIdAsync(CancellationToken token = default)
+    {
+        _module ??= await jSRuntime.LoadUtility();
+        return await _module.InvokeAsync<string?>("getClientHubId", token);
+    }
 }
diff --git a/src/BootstrapBlazor/Services/IBrowserFingerService.cs b/src/BootstrapBlazor/Services/IBrowserFingerService.cs
@@ -15,4 +15,11 @@ public interface IBrowserFingerService
     /// </summary>
     /// <returns></returns>
     Task<string?> GetFingerCodeAsync(CancellationToken token = default);
+
+    /// <summary>
+    /// 获得当前连接的客户端 ID 由 BootstrapBlazor 组件框架提供
+    /// </summary>
+    /// <param name="token"></param>
+    /// <returns></returns>
+    Task<string?> GetClientHubIdAsync(CancellationToken token = default);
 }
diff --git a/src/BootstrapBlazor/wwwroot/modules/client.js b/src/BootstrapBlazor/wwwroot/modules/client.js
@@ -24,6 +24,6 @@ export async function getClientInfo(url) {
     if (result) {
         data.ip = result.Ip;
     }
-    data.id = localStorage.getItem('bb_hub_connection_id') ?? result.Id;
+    data.id = localStorage.getItem('bb_hub_connection_id') || result.Id;
     return data;
 }
diff --git a/src/BootstrapBlazor/wwwroot/modules/net.js b/src/BootstrapBlazor/wwwroot/modules/net.js
@@ -9,9 +9,6 @@ export function init(options) {
             downlink, networkType: effectiveType, rTT: rtt
         });
     }
-    navigator.connection.onchange = e => {
-        updateState(e.target);
-    }
 
     const onlineStateChanged = () => {
         const indicators = [...document.querySelectorAll('.bb-nt-indicator')];
@@ -31,5 +28,13 @@ export function init(options) {
         EventHandler.on(window, 'offline', offlineStateChanged);
     });
 
-    updateState(navigator.connection);
+    if (navigator.connection) {
+        navigator.connection.onchange = e => {
+            updateState(e.target);
+        }
+        updateState(navigator.connection);
+    }
+    else {
+        console.warn('navigator.connection not supported in browser');
+    }
 }
diff --git a/src/BootstrapBlazor/wwwroot/modules/utility.js b/src/BootstrapBlazor/wwwroot/modules/utility.js
@@ -919,6 +919,10 @@ export function getNetworkInfo() {
     return null;
 }
 
+export function getClientHubId() {
+    return localStorage.getItem('bb_hub_connection_id');
+}
+
 export {
     autoAdd,
     autoRemove,
diff --git a/test/UnitTest/Services/BrowserFingerServiceTest.cs b/test/UnitTest/Services/BrowserFingerServiceTest.cs
@@ -15,4 +15,13 @@ public async Task GetFingerCodeAsync_Ok()
         var code = await service.GetFingerCodeAsync();
         Assert.Equal("9527", code);
     }
+
+    [Fact]
+    public async Task GetClientHubIdAsync_Ok()
+    {
+        Context.JSInterop.Setup<string?>("getClientHubId").SetResult("9528");
+        var service = Context.Services.GetRequiredService<IBrowserFingerService>();
+        var code = await service.GetClientHubIdAsync();
+        Assert.Equal("9528", code);
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -11,10 +11,12 @@`
`11`	`11`	`text-align: center;`
`12`	`12`	`}`
`13`	`13`
	`14`	`+ @@media(max-width: 768px) {`
`14`	`15`	`.otp-input-demo .bb-otp-input {`
`15`	`16`	`--bb-otp-item-width: 32px;`
`16`	`17`	`--bb-otp-font-size: 1.2em;`
`17`	`18`	`}`
	`19`	`+ }`
`18`	`20`	`</style>`
`19`	`21`	`</HeadContent>`
`20`	`22`
Original file line number	Diff line number	Diff line change
`@@ -13,12 +13,15 @@ class DefaultBrowserFingerService(IJSRuntime jSRuntime) : IBrowserFingerService`
`13`	`13`	`[NotNull]`
`14`	`14`	`private JSModule? _module = null;`
`15`	`15`
`16`		`- /// <summary>`
`17`		`- /// 获取剪切板数据方法`
`18`		`- /// </summary>`
`19`	`16`	`public async Task<string?> GetFingerCodeAsync(CancellationToken token = default)`
`20`	`17`	`{`
`21`	`18`	`_module ??= await jSRuntime.LoadUtility();`
`22`	`19`	`return await _module.InvokeAsync<string?>("getFingerCode", token);`
`23`	`20`	`}`
	`21`	`+`
	`22`	`+ public async Task<string?> GetClientHubIdAsync(CancellationToken token = default)`
	`23`	`+ {`
	`24`	`+ _module ??= await jSRuntime.LoadUtility();`
	`25`	`+ return await _module.InvokeAsync<string?>("getClientHubId", token);`
	`26`	`+ }`
`24`	`27`	`}`