feat(Logout): add AvatarRadius parameter (#5969)

* feat: 增加 AvatarRadius 参数

* test: 增加单元测试

* chore: bump version 9.6.1-beta02

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.6.1-beta03</Version>
+    <Version>9.6.1-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Logout/Logout.razor

@@ -21,7 +21,7 @@
             @if (HeaderTemplate == null)
             {
                 <div class="d-flex flex-fill align-items-center">
-                    <img alt="avatar" src="@ImageUrl">
+                    <img alt="avatar" src="@ImageUrl" style="@AvatarStyleString">
                     <div class="flex-fill">
                         <div class="logout-dn">@PrefixDisplayNameText @DisplayName</div>
                         <div class="logout-un">@PrefixUserNameText @UserName</div>

src/BootstrapBlazor/Components/Logout/Logout.razor.cs

@@ -12,9 +12,9 @@ namespace BootstrapBlazor.Components;
 /// </summary>
 public partial class Logout
 {
-    private string? LogoutClassString => CssBuilder.Default("dropdown dropdown-logout")
-        .AddClassFromAttributes(AdditionalAttributes)
-        .Build();
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Logout>? Localizer { get; set; }
 
     /// <summary>
     /// 获得/设置 组件当前用户头像
@@ -70,9 +70,19 @@ public partial class Logout
     [Parameter]
     public RenderFragment? LinkTemplate { get; set; }
 
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<Logout>? Localizer { get; set; }
+    /// <summary>
+    /// Gets or sets the avatar border radius. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? AvatarRadius { get; set; }
+
+    private string? LogoutClassString => CssBuilder.Default("dropdown dropdown-logout")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    private string? AvatarStyleString => CssBuilder.Default()
+        .AddStyle("--bb-logout-user-avatar-border-radius", AvatarRadius, !string.IsNullOrEmpty(AvatarRadius))
+        .Build();
 
     /// <summary>
     /// OnInitialized 方法

src/BootstrapBlazor/Components/Logout/Logout.razor.scss

@@ -70,6 +70,7 @@
     width: var(--bb-logout-user-avatar-width);
     height: var(--bb-logout-user-avatar-height);
     margin-inline-end: var(--bb-logout-user-avatar-margin-right);
+    border-radius: var(--bb-logout-user-avatar-border-radius, 0);
 }
 
 .dropdown-logout .logout-un {

test/UnitTest/Components/LogoutTest.cs

@@ -96,4 +96,15 @@ public void LinkTemplate_Ok()
         });
         Assert.Contains("link_template", cut.Markup);
     }
+
+    [Fact]
+    public void AvatarRadius_Ok()
+    {
+        // 未设置 Items
+        var cut = Context.RenderComponent<Logout>(pb =>
+        {
+            pb.Add(a => a.AvatarRadius, "50%");
+        });
+        Assert.Contains("--bb-logout-user-avatar-border-radius: 50%;", cut.Markup);
+    }
 }