feat(Layout): add ShowTabContextMenu parameter (#5733)

ArgoZhang · web-flow · commit 32eb2b1bbee2 · 2025-03-27T19:25:30.000+08:00
* chore: 更新 header 描述信息

* refactor: Layout 组件增加 Tab 右键菜单

* refactor: 增加图标主题

* test: 更新单元测试
diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor b/src/BootstrapBlazor/Components/Layout/Layout.razor
@@ -116,23 +116,50 @@
     @<main class="layout-main">
         @if (UseTabSet)
         {
-            <Tab ClickTabToNavigation="ClickTabToNavigation" AdditionalAssemblies="@AdditionalAssemblies"
-                 ShowExtendButtons="ShowTabExtendButtons" ShowClose="ShowTabItemClose" AllowDrag="AllowDragTab"        
-                 DefaultUrl="@TabDefaultUrl" ExcludeUrls="@ExcludeUrls" IsOnlyRenderActiveTab="IsOnlyRenderActiveTab"
-                 TabStyle="TabStyle" ShowToolbar="@ShowToolbar" ToolbarTemplate="@ToolbarTemplate"
-                 ShowRefreshToolbarButton="ShowRefreshToolbarButton" ShowFullscreenToolbarButton="ShowFullscreenToolbarButton"
-                 RefreshToolbarButtonIcon="@RefreshToolbarButtonIcon" FullscreenToolbarButtonIcon="@FullscreenToolbarButtonIcon"
-                 RefreshToolbarTooltipText="@RefreshToolbarTooltipText" FullscreenToolbarTooltipText="@FullscreenToolbarTooltipText"
-                 OnToolbarRefreshCallback="OnToolbarRefreshCallback"
-                 Body="@Main" NotAuthorized="NotAuthorized!" NotFound="NotFound!" NotFoundTabText="@NotFoundTabText">
-            </Tab>
+            @if (ShowTabContextMenu)
+            {
+                <ContextMenuZone>
+                    @RenderTab
+                    <ContextMenu>
+                        @if (BeforeTabContextMenuTemplate != null)
+                        {
+                            @BeforeTabContextMenuTemplate(_tab)
+                        }
+                        <ContextMenuItem Icon="@TabContextMenuRefreshIcon" Text="@Localizer["ContextRefresh"]" OnClick="OnRefrsh"></ContextMenuItem>
+                        <ContextMenuDivider></ContextMenuDivider>
+                        <ContextMenuItem Icon="@TabContextMenuCloseIcon" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
+                        <ContextMenuItem Icon="@TabContextMenuCloseOtherIcon" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
+                        <ContextMenuItem Icon="@TabContextMenuCloseAllIcon" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
+                        @if (TabContextMenuTemplate != null)
+                        {
+                            @TabContextMenuTemplate(_tab)
+                        }
+                    </ContextMenu>
+                </ContextMenuZone>
+            }
+            else
+            {
+                @RenderTab
+            }
         }
         else
         {
             @HandlerMain()
         }
     </main>;
 
+    RenderFragment RenderTab =>
+    @<Tab ClickTabToNavigation="ClickTabToNavigation" AdditionalAssemblies="@AdditionalAssemblies" @ref="_tab"
+          ShowExtendButtons="ShowTabExtendButtons" ShowClose="ShowTabItemClose" AllowDrag="AllowDragTab"        
+          DefaultUrl="@TabDefaultUrl" ExcludeUrls="@ExcludeUrls" IsOnlyRenderActiveTab="IsOnlyRenderActiveTab"
+          TabStyle="TabStyle" ShowToolbar="@ShowToolbar" ToolbarTemplate="@ToolbarTemplate"
+          ShowRefreshToolbarButton="ShowRefreshToolbarButton" ShowFullscreenToolbarButton="ShowFullscreenToolbarButton"
+          RefreshToolbarButtonIcon="@RefreshToolbarButtonIcon" FullscreenToolbarButtonIcon="@FullscreenToolbarButtonIcon"
+          RefreshToolbarTooltipText="@RefreshToolbarTooltipText" FullscreenToolbarTooltipText="@FullscreenToolbarTooltipText"
+          OnToolbarRefreshCallback="OnToolbarRefreshCallback"
+          Body="@Main" NotAuthorized="NotAuthorized!" NotFound="NotFound!" NotFoundTabText="@NotFoundTabText">
+    </Tab>;
+
     RenderFragment RenderFooter =>
     @<footer class="@FooterClassString">
         @Footer
diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.cs b/src/BootstrapBlazor/Components/Layout/Layout.razor.cs
@@ -297,6 +297,48 @@ public partial class Layout : IHandlerException
     [Parameter]
     public string NotAuthorizeUrl { get; set; } = "/Account/Login";
 
+    /// <summary>
+    /// Gets or sets whether enable tab context menu. Default is false.
+    /// </summary>
+    [Parameter]
+    public bool ShowTabContextMenu { get; set; }
+
+    /// <summary>
+    /// Gets or sets the template of before tab context menu. Default is null.
+    /// </summary>
+    [Parameter]
+    public RenderFragment<Tab>? BeforeTabContextMenuTemplate { get; set; }
+
+    /// <summary>
+    /// Gets or sets the template of tab context menu. Default is null.
+    /// </summary>
+    [Parameter]
+    public RenderFragment<Tab>? TabContextMenuTemplate { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon of tab item context menu refresh button. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? TabContextMenuRefreshIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon of tab item context menu close button. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? TabContextMenuCloseIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon of tab item context menu close other button. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? TabContextMenuCloseOtherIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon of tab item context menu close all button. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? TabContextMenuCloseAllIcon { get; set; }
+
     [Inject]
     [NotNull]
     private NavigationManager? Navigation { get; set; }
@@ -404,7 +446,8 @@ public partial class Layout : IHandlerException
     [NotNull]
     private IStringLocalizer<Layout>? Localizer { get; set; }
 
-    private bool _init { get; set; }
+    private bool _init;
+    private Tab _tab = default!;
 
     /// <summary>
     /// <inheritdoc/>
@@ -466,6 +509,10 @@ protected override void OnParametersSet()
 
         TooltipText ??= Localizer[nameof(TooltipText)];
         MenuBarIcon ??= IconTheme.GetIconByKey(ComponentIcons.LayoutMenuBarIcon);
+        TabContextMenuRefreshIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuRefreshIcon);
+        TabContextMenuCloseIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseIcon);
+        TabContextMenuCloseOtherIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseOtherIcon);
+        TabContextMenuCloseAllIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseAllIcon);
     }
 
     /// <summary>
@@ -580,6 +627,38 @@ public virtual Task HandlerException(Exception ex, RenderFragment<Exception> err
 
     private string? GetTargetString() => IsFixedTabHeader ? ".tabs-body" : null;
 
+    private async Task OnRefrsh(ContextMenuItem item, object? context)
+    {
+        if (context is TabItem tabItem)
+        {
+            await _tab.Refresh(tabItem);
+        }
+    }
+
+    private async Task OnClose(ContextMenuItem item, object? context)
+    {
+        if (context is TabItem tabItem)
+        {
+            await _tab.RemoveTab(tabItem);
+        }
+    }
+
+    private Task OnCloseOther(ContextMenuItem item, object? context)
+    {
+        if (context is TabItem tabItem)
+        {
+            _tab.ActiveTab(tabItem);
+        }
+        _tab.CloseOtherTabs();
+        return Task.CompletedTask;
+    }
+
+    private Task OnCloseAll(ContextMenuItem item, object? context)
+    {
+        _tab.CloseAllTabs();
+        return Task.CompletedTask;
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
diff --git a/src/BootstrapBlazor/Enums/ComponentIcons.cs b/src/BootstrapBlazor/Enums/ComponentIcons.cs
@@ -710,6 +710,26 @@ public enum ComponentIcons
     /// </summary>
     TabRefreshButtonIcon,
 
+    /// <summary>
+    /// Tab 组件 TabContextMenuRefreshIcon 属性图标
+    /// </summary>
+    TabContextMenuRefreshIcon,
+
+    /// <summary>
+    /// Tab 组件 TabContextMenuCloseIcon 属性图标
+    /// </summary>
+    TabContextMenuCloseIcon,
+
+    /// <summary>
+    /// Tab 组件 TabContextMenuCloseOtherIcon 属性图标
+    /// </summary>
+    TabContextMenuCloseOtherIcon,
+
+    /// <summary>
+    /// Tab 组件 TabContextMenuCloseAllIcon 属性图标
+    /// </summary>
+    TabContextMenuCloseAllIcon,
+
     /// <summary>
     /// Timer 组件 Icon 属性图标
     /// </summary>
diff --git a/src/BootstrapBlazor/Icons/BootstrapIcons.cs b/src/BootstrapBlazor/Icons/BootstrapIcons.cs
@@ -1,17 +1,15 @@
-﻿// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
-// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
-// Website: https://www.blazor.zone or https://argozhang.github.io/
+﻿// 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(argo@live.ca) Website: https://www.blazor.zone
 
 namespace BootstrapBlazor.Components;
 
 internal static class BootstrapIcons
 {
     public static Dictionary<ComponentIcons, string> Icons => new()
     {
-        // AnchorLink 组件
         { ComponentIcons.AnchorLinkIcon, "bi bi-link-45deg" },
-
-        // Avatar 组件
         { ComponentIcons.AvatarIcon, "bi bi-person-fill" },
         { ComponentIcons.AutoFillIcon, "bi bi-chevron-up" },
         { ComponentIcons.AutoCompleteIcon, "bi bi-chevron-up" },
@@ -23,23 +21,23 @@ internal static class BootstrapIcons
         { ComponentIcons.CameraPlayIcon, "bi bi-circle-play" },
         { ComponentIcons.CameraStopIcon, "bi bi-circle-stop" },
         { ComponentIcons.CameraPhotoIcon, "bi bi-camera" },
+
         { ComponentIcons.CardCollapseIcon, "bi bi-arrow-right-circle-fill" },
         { ComponentIcons.CarouselPreviousIcon, "bi bi-chevron-left" },
         { ComponentIcons.CarouselNextIcon, "bi bi-chevron-right" },
         { ComponentIcons.CascaderIcon, "bi bi-chevron-up" },
         { ComponentIcons.CascaderSubMenuIcon, "bi bi-chevron-down" },
         { ComponentIcons.ConsoleClearButtonIcon, "bi bi-x" },
 
-        // DateTimePicker 组件
         { ComponentIcons.DatePickBodyPreviousYearIcon, "bi bi-chevron-double-left" },
         { ComponentIcons.DatePickBodyPreviousMonthIcon, "bi bi-chevron-left" },
         { ComponentIcons.DatePickBodyNextMonthIcon, "bi bi-chevron-right" },
         { ComponentIcons.DatePickBodyNextYearIcon, "bi bi-chevron-double-right" },
         { ComponentIcons.DateTimePickerIcon, "bi bi-calendar" },
+
         { ComponentIcons.TimePickerCellUpIcon, "bi bi-chevron-up" },
         { ComponentIcons.TimePickerCellDownIcon, "bi bi-chevron-down" },
 
-        // DateTimeRange 组件
         { ComponentIcons.DateTimeRangeIcon, "bi bi-calendar-range" },
         { ComponentIcons.DateTimeRangeClearIcon, "bi bi-x-circle" },
 
@@ -88,6 +86,11 @@ internal static class BootstrapIcons
         { ComponentIcons.InputNumberPlusIcon, "bi bi-plus-circle" },
 
         { ComponentIcons.LayoutMenuBarIcon, "bi bi-list" },
+        { ComponentIcons.TabContextMenuRefreshIcon, "bi bi-arrow-clockwise" },
+        { ComponentIcons.TabContextMenuCloseIcon, "bi bi-x" },
+        { ComponentIcons.TabContextMenuCloseOtherIcon, "bi bi-arrow" },
+        { ComponentIcons.TabContextMenuCloseAllIcon, "bi bi-arrow-left-right" },
+
         { ComponentIcons.LogoutLinkIcon, "bi bi-box-arrow-right" },
 
         { ComponentIcons.LoadingIcon, "bi bi-arrow-clockwise bi-spin" },
diff --git a/src/BootstrapBlazor/Icons/FontAwesomeIcons.cs b/src/BootstrapBlazor/Icons/FontAwesomeIcons.cs
@@ -21,6 +21,7 @@ internal static class FontAwesomeIcons
         { ComponentIcons.CameraPlayIcon, "fa-solid fa-circle-play" },
         { ComponentIcons.CameraStopIcon, "fa-solid fa-circle-stop" },
         { ComponentIcons.CameraPhotoIcon, "fa-solid fa-camera-retro" },
+
         { ComponentIcons.CardCollapseIcon, "fa-solid fa-circle-chevron-right" },
         { ComponentIcons.CarouselPreviousIcon, "fa-solid fa-angle-left" },
         { ComponentIcons.CarouselNextIcon, "fa-solid fa-angle-right" },
@@ -32,7 +33,6 @@ internal static class FontAwesomeIcons
         { ComponentIcons.DatePickBodyPreviousMonthIcon, "fa-solid fa-angle-left" },
         { ComponentIcons.DatePickBodyNextMonthIcon, "fa-solid fa-angle-right" },
         { ComponentIcons.DatePickBodyNextYearIcon, "fa-solid fa-angles-right" },
-
         { ComponentIcons.DateTimePickerIcon, "fa-regular fa-calendar-days" },
 
         { ComponentIcons.TimePickerCellUpIcon, "fa-solid fa-angle-up" },
@@ -86,6 +86,11 @@ internal static class FontAwesomeIcons
         { ComponentIcons.InputNumberPlusIcon, "fa-solid fa-circle-plus" },
 
         { ComponentIcons.LayoutMenuBarIcon, "fa-solid fa-bars" },
+        { ComponentIcons.TabContextMenuRefreshIcon, "fa-fw fa-solid fa-rotate-right" },
+        { ComponentIcons.TabContextMenuCloseIcon, "fa-fw fa-solid fa-xmark" },
+        { ComponentIcons.TabContextMenuCloseOtherIcon, "fa-fw fa-solid fa-left-right" },
+        { ComponentIcons.TabContextMenuCloseAllIcon, "fa-fw fa-solid fa-arrows-left-right-to-line" },
+
         { ComponentIcons.LogoutLinkIcon, "fa-solid fa-key" },
 
         { ComponentIcons.LoadingIcon, "fa-solid fa-fw fa-spin fa-spinner" },
diff --git a/src/BootstrapBlazor/Icons/MaterialDesignIcons.cs b/src/BootstrapBlazor/Icons/MaterialDesignIcons.cs
@@ -1,17 +1,15 @@
-﻿// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
-// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
-// Website: https://www.blazor.zone or https://argozhang.github.io/
+﻿// 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(argo@live.ca) Website: https://www.blazor.zone
 
 namespace BootstrapBlazor.Components;
 
 internal static class MaterialDesignIcons
 {
     public static Dictionary<ComponentIcons, string> Icons => new()
     {
-        // AnchorLink 组件
         { ComponentIcons.AnchorLinkIcon, "mdi mdi-link-variant" },
-
-        // Avatar 组件
         { ComponentIcons.AvatarIcon, "mdi mdi-account" },
         { ComponentIcons.AutoFillIcon, "mdi mdi-chevron-up" },
         { ComponentIcons.AutoCompleteIcon, "mdi mdi-chevron-up" },
@@ -23,23 +21,23 @@ internal static class MaterialDesignIcons
         { ComponentIcons.CameraPlayIcon, "mdi mdi-play-circle-outline" },
         { ComponentIcons.CameraStopIcon, "mdi mdi-stop-circle-outline" },
         { ComponentIcons.CameraPhotoIcon, "mdi mdi-camera-outline" },
+
         { ComponentIcons.CardCollapseIcon, "mdi mdi-chevron-right-circle" },
         { ComponentIcons.CarouselPreviousIcon, "mdi mdi-chevron-left" },
         { ComponentIcons.CarouselNextIcon, "mdi mdi-chevron-right" },
         { ComponentIcons.CascaderIcon, "mdi mdi-chevron-up" },
         { ComponentIcons.CascaderSubMenuIcon, "mdi mdi-chevron-down" },
         { ComponentIcons.ConsoleClearButtonIcon, "mdi mdi-close" },
 
-        // DateTimePicker 组件
         { ComponentIcons.DatePickBodyPreviousYearIcon, "mdi mdi-chevron-double-left" },
         { ComponentIcons.DatePickBodyPreviousMonthIcon, "mdi mdi-chevron-left" },
         { ComponentIcons.DatePickBodyNextMonthIcon, "mdi mdi-chevron-right" },
         { ComponentIcons.DatePickBodyNextYearIcon, "mdi mdi-chevron-double-right" },
         { ComponentIcons.DateTimePickerIcon, "mdi mdi-calendar-outline" },
+
         { ComponentIcons.TimePickerCellUpIcon, "mdi mdi-chevron-up" },
         { ComponentIcons.TimePickerCellDownIcon, "mdi mdi-chevron-down" },
 
-        // DateTimeRange 组件
         { ComponentIcons.DateTimeRangeIcon, "mdi mdi-calendar-range-outline" },
         { ComponentIcons.DateTimeRangeClearIcon, "mdi mdi-close-circle-outline" },
 
@@ -88,6 +86,11 @@ internal static class MaterialDesignIcons
         { ComponentIcons.InputNumberPlusIcon, "mdi mdi-plus-circle-outline" },
 
         { ComponentIcons.LayoutMenuBarIcon, "mdi mdi-menu" },
+        { ComponentIcons.TabContextMenuRefreshIcon, "mdi mdi-refresh" },
+        { ComponentIcons.TabContextMenuCloseIcon, "mdi mdi-close" },
+        { ComponentIcons.TabContextMenuCloseOtherIcon, "mdi mdi-menu" },
+        { ComponentIcons.TabContextMenuCloseAllIcon, "mdi mdi-arrow-left-right-bold" },
+
         { ComponentIcons.LogoutLinkIcon, "mdi mdi-logout" },
 
         { ComponentIcons.LoadingIcon, "mdi mdi-loading mdi-spin" },
diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json
@@ -105,7 +105,11 @@
     "TooltipText": "Go top"
   },
   "BootstrapBlazor.Components.Layout": {
-    "TooltipText": "Click to Expand/Collapse sidebar"
+    "TooltipText": "Click to Expand/Collapse sidebar",
+    "ContextRefresh": "Refresh",
+    "ContextClose": "Close",
+    "ContextCloseOther": "Close Other Tabs",
+    "ContextCloseAll": "Close All Tabs"
   },
   "BootstrapBlazor.Components.Logout": {
     "PrefixDisplayNameText": "Welcome",
diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json
@@ -105,7 +105,11 @@
     "TooltipText": "返回顶端"
   },
   "BootstrapBlazor.Components.Layout": {
-    "TooltipText": "点击展开收缩左侧菜单"
+    "TooltipText": "点击展开收缩左侧菜单",
+    "ContextRefresh": "刷新",
+    "ContextClose": "关闭",
+    "ContextCloseOther": "关闭其他",
+    "ContextCloseAll": "关闭全部"
   },
   "BootstrapBlazor.Components.Logout": {
     "PrefixDisplayNameText": "欢迎",
diff --git a/src/BootstrapBlazor/Services/Bluetooth/BluetoothDeviceInfo.cs b/src/BootstrapBlazor/Services/Bluetooth/BluetoothDeviceInfo.cs
@@ -1,6 +1,7 @@
-﻿// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
-// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
-// Website: https://www.blazor.zone or https://argozhang.github.io/
+﻿// 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(argo@live.ca) Website: https://www.blazor.zone
 
 namespace BootstrapBlazor.Components;
 
diff --git a/test/UnitTest/Components/LayoutTest.cs b/test/UnitTest/Components/LayoutTest.cs
