dotnetcore · ArgoZhang · Feb 28, 2025 · Feb 28, 2025 · Feb 28, 2025 · Feb 28, 2025
diff --git a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css
@@ -59,8 +59,6 @@
     --bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
     --bs-btn-active-bg: var(--bb-layout-button-active-bg);
     box-shadow: var(--bb-layout-button-shadow);
-    right: 1rem;
-    bottom: 9rem;
 }
 
     ::deep .btn-theme img {

diff --git a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css
@@ -1,60 +1,4 @@
-::deep .btn-fade {
-    opacity: 0.7;
-    box-shadow: var(--bb-layout-button-shadow);
-    transition: opacity .3s linear;
-    position: fixed;
-    z-index: 1001;
-}
-
-    ::deep .btn-fade:hover {
-        opacity: 1;
-    }
-
-::deep .btn-update {
-    --bs-btn-bg: var(--bb-layout-button-update-bg);
-    --bs-btn-hover-bg: var(--bs-btn-bg);
-    --bs-btn-active-bg: var(--bs-btn-bg);
-    bottom: 5rem;
-    right: 1rem;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-    ::deep .btn-update img {
-        width: 55%;
-        margin-inline-start: 2px;
-    }
-
-::deep .btn-chat {
-    --bs-btn-bg: var(--bb-layout-button-bg);
-    --bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
-    --bs-btn-active-bg: var(--bb-layout-button-active-bg);
-    box-shadow: var(--bb-layout-button-shadow);
-    right: 1rem;
-    bottom: 13rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--bb-button-chat-color);
-}
-
-::deep .btn-theme-mode {
-    --bs-btn-bg: var(--bb-layout-button-bg);
-    --bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
-    --bs-btn-active-bg: var(--bb-layout-button-active-bg);
-    box-shadow: var(--bb-layout-button-shadow);
-    bottom: 17rem;
-    right: 1rem;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--bb-button-chat-color);
-}
-
-::deep pre {
+::deep pre {
     color: #e83e8c;
     margin-bottom: 0;
     max-height: 260px;

diff --git a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor
@@ -18,11 +18,25 @@
         @Body
     </section>
 
-    <ThemeMode />
-
-    <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@ChatTooltip" class="btn-fade btn-chat" Url="./ai-chat" Icon="fa-solid fa-comments"></LinkButton>
-
-    <ThemeChooser></ThemeChooser>
-
-    <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@Title" class="btn-fade btn-update" Url="@WebsiteOption.CurrentValue.WikiUrl" Target="_blank" ImageUrl="@WebsiteOption.CurrentValue.GetAssetUrl("images/log.svg")"></LinkButton>
+    <DialButton DialMode="DialMode.Radial" Icon="fa-solid fa-gear" Radius="100" Placement="Placement.BottomEnd" IsAutoClose="false">
+        <ButtonTemplate>
+            <div class="btn-circle btn-fade dial-button-gear">
+                <img src="./images/logo.png" />
+            </div>
+        </ButtonTemplate>
+        <ChildContent>
+            <DialButtonItem>
+                <ThemeMode></ThemeMode>
+            </DialButtonItem>
+            <DialButtonItem>
+                <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@ChatTooltip" class="btn-fade btn-chat" Url="./ai-chat" Icon="fa-solid fa-comments"></LinkButton>
+            </DialButtonItem>
+            @* <DialButtonItem>
+                <ThemeChooser></ThemeChooser>
+            </DialButtonItem> *@
+            <DialButtonItem>
+                <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@Title" class="btn-fade btn-update" Url="@WebsiteOption.CurrentValue.WikiUrl" Target="_blank" ImageUrl="@WebsiteOption.CurrentValue.GetAssetUrl("images/log.svg")"></LinkButton>
+            </DialButtonItem>
+        </ChildContent>
+    </DialButton>
 </section>
diff --git a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css
@@ -72,6 +72,70 @@
             background-color: var(--bb-sidebar-body-drag-hover-bg);
         }
 
+::deep .dial-button {
+    display: none;
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+}
+
+::deep .btn-fade {
+    opacity: 0.7;
+    box-shadow: var(--bb-layout-button-shadow);
+    transition: opacity .3s linear;
+}
+
+    ::deep .btn-fade:hover {
+        opacity: 1;
+    }
+
+::deep .btn-update {
+    --bs-btn-bg: var(--bb-layout-button-update-bg);
+    --bs-btn-hover-bg: var(--bs-btn-bg);
+    --bs-btn-active-bg: var(--bs-btn-bg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+    ::deep .btn-update img {
+        width: 55%;
+        margin-inline-start: 2px;
+    }
+
+::deep .btn-chat {
+    --bs-btn-bg: var(--bb-layout-button-bg);
+    --bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
+    --bs-btn-active-bg: var(--bb-layout-button-active-bg);
+    box-shadow: var(--bb-layout-button-shadow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--bb-button-chat-color);
+}
+
+::deep .btn-theme-mode {
+    --bs-btn-bg: var(--bb-layout-button-bg);
+    --bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
+    --bs-btn-active-bg: var(--bb-layout-button-active-bg);
+    box-shadow: var(--bb-layout-button-shadow);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--bb-button-chat-color);
+}
+
+.dial-button-gear {
+    background-color: var(--bb-primary-color);
+    border-radius: 50%;
+    padding: 4px;
+    cursor: pointer;
+}
+
+    .dial-button-gear img {
+        width: 100%;
+    }
+
 @media (min-width: 768px) {
     .section {
         --bb-layout-sidebar-width: 300px;
@@ -102,4 +166,8 @@
     .sidebar-bar {
         display: block;
     }
+
+    ::deep .dial-button {
+        display: block;
+    }
 }
diff --git a/src/BootstrapBlazor/Components/Button/DialButton.razor b/src/BootstrapBlazor/Components/Button/DialButton.razor
@@ -29,7 +29,14 @@
                     <div @key="@item" class="dial-item" role="menuitem" @onclick="@(e => OnClickItem(item))">
                         @if (ItemTemplate == null)
                         {
-                            <i class="@item.Icon"></i>
+                            if(item.ChildContent != null)
+                            {
+                                @item.ChildContent
+                            }
+                            else
+                            {
+                                <i class="@item.Icon"></i>
+                            }
                         }
                         else
                         {

diff --git a/src/BootstrapBlazor/Components/Button/DialButtonItem.cs b/src/BootstrapBlazor/Components/Button/DialButtonItem.cs
@@ -11,25 +11,25 @@ namespace BootstrapBlazor.Components;
 public class DialButtonItem : ComponentBase, IDisposable
 {
     /// <summary>
-    /// 显示图标
+    /// 获得/设置 显示图标
     /// </summary>
     [Parameter]
     [NotNull]
-#if NET6_0_OR_GREATER
-    [EditorRequired]
-#endif
     public string? Icon { get; set; }
 
     /// <summary>
-    /// 选项值
+    /// 获得/设置 选项值
     /// </summary>
     [Parameter]
     [NotNull]
-#if NET6_0_OR_GREATER
-    [EditorRequired]
-#endif
     public string? Value { get; set; }
 
+    /// <summary>
+    /// 获得/设置 组件内容
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
     [CascadingParameter]
     private List<DialButtonItem>? Items { get; set; }
 

diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -60,7 +60,7 @@ $bb-button-circle-height: 45px;
 
 // Button DialogButton
 $bb-dial-list-zindex: 5;
-$bb-dial-item-padding: 0.25rem 1rem;
+$bb-dial-item-padding: 0;
 $bb-dial-item-hover-bg: #e9ecef;
 $bb-dial-item-margin: 6px;
 $bb-dial-item-width: 40px;

diff --git a/test/UnitTest/Components/DialButtonTest.cs b/test/UnitTest/Components/DialButtonTest.cs
@@ -222,6 +222,24 @@ public void ItemTemplate_Ok()
         cut.Contains("test-fa-solid fa-cut-cut");
     }
 
+    [Fact]
+    public void Item_ChildContent_Ok()
+    {
+        var cut = Context.RenderComponent<DialButton>(pb =>
+        {
+            pb.Add(i => i.ChildContent, new RenderFragment(pb =>
+            {
+                pb.OpenComponent<DialButtonItem>(0);
+                pb.AddAttribute(1, "ChildContent", new RenderFragment(pb =>
+                {
+                    pb.AddContent(0, "test-ChildContent");
+                }));
+                pb.CloseComponent();
+            }));
+        });
+        cut.Contains("test-ChildContent");
+    }
+
     [Fact]
     public void DialButtonItem_Ok()
     {