feat(Console): add IsHtml parameter on ConsoleMessageItem (#3005)

* refactor: 重构代码 * refactor: 精简代码 * doc: 更新示例文档 * doc: 重构代码 * feat: 增加 IsHtml 参数 * refactor: 增加 IsHtml 实现逻辑 * test: 增加 IsHtml 单元测试
dotnetcore · Feb 27, 2024 · ac61247 · ac61247
1 parent 1cdbe3e
commit ac61247
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 66 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesSearch.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesSearch.razor
@@ -13,19 +13,21 @@
 <DemoBlock Title="@Localizer["SearchTableTitle"]"
            Introduction="@Localizer["SearchTableIntro"]"
            Name="SearchTable">
-    <ul class="ul-demo mb-3">
-        <li>@((MarkupString)Localizer["SearchTableLi1"].Value)</li>
-        <li>@((MarkupString)Localizer["SearchTableLi2"].Value)</li>
-        <li>@((MarkupString)Localizer["SearchTableLi3"].Value)</li>
-    </ul>
-    @((MarkupString)Localizer["AutoHeightIntro"].Value)
+    <section ignore>
+        <ul class="ul-demo mb-3">
+            <li>@((MarkupString)Localizer["SearchTableLi1"].Value)</li>
+            <li>@((MarkupString)Localizer["SearchTableLi2"].Value)</li>
+            <li>@((MarkupString)Localizer["SearchTableLi3"].Value)</li>
+        </ul>
+        @((MarkupString)Localizer["AutoHeightIntro"].Value)
+    </section>
     <div style="height: 600px;">
         <Table TItem="Foo"
                IsPagination="true" PageItemsSource="new int[] {10, 20}"
                IsStriped="true" IsBordered="true"
                ShowToolbar="true" ShowSearch="true" IsMultipleSelect="true" ShowExtendButtons="true"
                AddModalTitle="@Localizer["AddModelTitle"]" EditModalTitle="@Localizer["EditModelTitle"]"
-               SearchModel="@SearchModel" ShowEmpty="true" SearchMode="SearchMode.Top"
+               SearchModel="@SearchModel" SearchMode="SearchMode.Top" ShowEmpty="true"
                OnQueryAsync="@OnSearchModelQueryAsync" OnResetSearchAsync="@OnResetSearchAsync"
                OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
             <TableColumns>
@@ -53,35 +55,36 @@
 <DemoBlock Title="@Localizer["AutoGenerateSearchTitle"]"
            Introduction="@Localizer["AutoGenerateSearchIntro"]"
            Name="AutoGenerateSearch">
-    <p>@((MarkupString)Localizer["AutoGenerateSearchP"].Value)</p>
-    <Tips>@((MarkupString)Localizer["AutoGenerateSearchTips"].Value)</Tips>
-    <Pre>if (options.Searches.Any())
-{
-    //@Localizer["AutoGenerateSearchComment"] FilterLogic.Or
-    items = items.Where(options.Searches.GetFilterFunc&lt;Foo&gt;(FilterLogic.Or));
-}</Pre>
-    <GroupBox Title="@Localizer["AutoGenerateSearchGroupBoxTitle"]" class="mb-3">
-        <div class="row g-3 form-inline">
-            <div class="col-12 col-sm-3">
-                <Switch DisplayText="@Localizer["DisplayText1"]" ShowLabel="true" @bind-Value="SearchModeFlag" />
+    <section ignore>
+        <p>@((MarkupString)Localizer["AutoGenerateSearchP"].Value)</p>
+        <Tips>@((MarkupString)Localizer["AutoGenerateSearchTips"].Value)</Tips>
+        <Pre>if (options.Searches.Any())
+    {
+        //@Localizer["AutoGenerateSearchComment"] FilterLogic.Or
+        items = items.Where(options.Searches.GetFilterFunc&lt;Foo&gt;(FilterLogic.Or));
+    }</Pre>
+        <GroupBox Title="@Localizer["AutoGenerateSearchGroupBoxTitle"]" class="mb-3">
+            <div class="row g-3 form-inline">
+                <div class="col-12 col-sm-3">
+                    <Switch DisplayText="@Localizer["DisplayText1"]" ShowLabel="true" @bind-Value="SearchModeFlag" />
+                </div>
+                <div class="col-12 col-sm-3">
+                    <Switch DisplayText="@Localizer["DisplayText2"]" ShowLabel="true" @bind-Value="ShowSearchText" />
+                </div>
+                <div class="col-12 col-sm-3">
+                    <Switch DisplayText="@Localizer["DisplayText3"]" ShowLabel="true" @bind-Value="ShowResetButton" />
+                </div>
+                <div class="col-12 col-sm-3">
+                    <Switch DisplayText="@Localizer["DisplayText4"]" ShowLabel="true" @bind-Value="ShowSearchButton" IsDisabled="SearchModeFlag" />
+                </div>
             </div>
-            <div class="col-12 col-sm-3">
-                <Switch DisplayText="@Localizer["DisplayText2"]" ShowLabel="true" @bind-Value="ShowSearchText" />
-            </div>
-            <div class="col-12 col-sm-3">
-                <Switch DisplayText="@Localizer["DisplayText3"]" ShowLabel="true" @bind-Value="ShowResetButton" />
-            </div>
-            <div class="col-12 col-sm-3">
-                <Switch DisplayText="@Localizer["DisplayText4"]" ShowLabel="true" @bind-Value="ShowSearchButton" IsDisabled="SearchModeFlag" />
-            </div>
-        </div>
-    </GroupBox>
-
+        </GroupBox>
+    </section>
     <Table TItem="Foo"
            IsPagination="true" PageItemsSource="@PageItemsSource" SearchDialogShowMaximizeButton="true"
-           IsStriped="true" IsBordered="true" SearchModel="@SearchModel" ShowSearch="true"
-           SearchMode="SearchModeValue" ShowResetButton="ShowResetButton" ShowSearchButton="ShowSearchButton"
-           ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true" ShowSearchText="ShowSearchText"
+           IsStriped="true" IsBordered="true" SearchMode="SearchModeValue" SearchModel="@SearchModel"
+           ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
+           ShowSearch="true" ShowResetButton="ShowResetButton" ShowSearchButton="ShowSearchButton" ShowSearchText="ShowSearchText"
            AddModalTitle="@Localizer["AddModelTitle"]" EditModalTitle="@Localizer["EditModelTitle"]"
            OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
         <TableColumns>
@@ -96,14 +99,17 @@
 <DemoBlock Title="@Localizer["CustomColSearchTitle"]"
            Introduction="@Localizer["CustomColSearchIntro"]"
            Name="CustomColSearch">
-    <p>@((MarkupString)Localizer["CustomColSearchP"].Value)</p>
-    <p>@((MarkupString)Localizer["CustomColSearchP1"].Value)</p>
-    <p>@((MarkupString)Localizer["CustomColSearchP2"].Value)</p>
-    <p>@((MarkupString)Localizer["CustomColSearchP3"].Value)</p>
-    <p>@((MarkupString)Localizer["CustomColSearchP4"].Value)</p>
+    <section ignore>
+        <p>@((MarkupString)Localizer["CustomColSearchP"].Value)</p>
+        <p>@((MarkupString)Localizer["CustomColSearchP1"].Value)</p>
+        <p>@((MarkupString)Localizer["CustomColSearchP2"].Value)</p>
+        <p>@((MarkupString)Localizer["CustomColSearchP3"].Value)</p>
+        <p>@((MarkupString)Localizer["CustomColSearchP4"].Value)</p>
+    </section>
     <Table TItem="Foo"
            IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" SearchModel="@SearchModel" ShowSearch="true" ShowSearchText="false"
+           IsStriped="true" IsBordered="true"
+           SearchModel="@SearchModel" ShowSearch="true" ShowSearchText="false"
            ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true" SearchDialogIsDraggable="true"
            AddModalTitle="@Localizer["AddModelTitle"]" EditModalTitle="@Localizer["EditModelTitle"]" SearchDialogShowMaximizeButton="true"
            OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
@@ -125,10 +131,11 @@
 <DemoBlock Title="@Localizer["CustomerSearchModelTitle"]"
            Introduction="@Localizer["CustomerSearchModelIntro"]"
            Name="CustomerSearchModel">
-    <p>@((MarkupString)Localizer["CustomerSearchModelP"].Value)</p>
+    <section ignore>@((MarkupString)Localizer["CustomerSearchModelP"].Value)</section>
     <Table TItem="Foo"
            IsPagination="true" PageItemsSource="@PageItemsSource" SearchMode="SearchMode.Top"
-           IsStriped="true" IsBordered="true" CustomerSearchModel="@CustomerSearchModel" ShowSearch="true" ShowSearchText="true"
+           IsStriped="true" IsBordered="true"
+           CustomerSearchModel="@CustomerSearchModel" ShowSearch="true"
            ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
            OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
         <TableColumns>

diff --git a/src/BootstrapBlazor.Server/Data/TreeDataFoo.cs b/src/BootstrapBlazor.Server/Data/TreeDataFoo.cs
@@ -24,25 +24,25 @@ public static List<TreeItem> GetTreeItems()
     {
         var items = new List<TreeItem>
         {
-            new TreeItem() { Text = "导航一", Id = "1010", Icon = "fa-solid fa-font-awesome" },
-            new TreeItem() { Text = "导航二", Id = "1020", Icon = "fa-solid fa-font-awesome" },
-            new TreeItem() { Text = "导航三", Id = "1030", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "导航一", Id = "1010", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "导航二", Id = "1020", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "导航三", Id = "1030", Icon = "fa-solid fa-font-awesome" },
 
-            new TreeItem() { Text = "子菜单一", Id = "1040", ParentId = "1020", Icon = "fa-solid fa-font-awesome" },
-            new TreeItem() { Text = "子菜单二", Id = "1050", ParentId = "1020", Icon = "fa-solid fa-font-awesome" },
-            new TreeItem() { Text = "子菜单三", Id = "1060", ParentId = "1020", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "子菜单一", Id = "1040", ParentId = "1020", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "子菜单二", Id = "1050", ParentId = "1020", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "子菜单三", Id = "1060", ParentId = "1020", Icon = "fa-solid fa-font-awesome" },
 
-            new TreeItem() { Text = "孙菜单一", Id = "1070", ParentId = "1050", Icon = "fa-solid fa-font-awesome" },
-            new TreeItem() { Text = "孙菜单二", Id = "1080", ParentId = "1050", Icon = "fa-solid fa-font-awesome" },
-            new TreeItem() { Text = "孙菜单三", Id = "1090", ParentId = "1050", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "孙菜单一", Id = "1070", ParentId = "1050", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "孙菜单二", Id = "1080", ParentId = "1050", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "孙菜单三", Id = "1090", ParentId = "1050", Icon = "fa-solid fa-font-awesome" },
 
-            new TreeItem() { Text = "曾孙菜单一", Id = "1100", ParentId = "1080", Icon = "fa-solid fa-font-awesome" },
-            new TreeItem() { Text = "曾孙菜单二", Id = "1110", ParentId = "1080", Icon = "fa-solid fa-font-awesome" },
-            new TreeItem() { Text = "曾孙菜单三", Id = "1120", ParentId = "1080", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "曾孙菜单一", Id = "1100", ParentId = "1080", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "曾孙菜单二", Id = "1110", ParentId = "1080", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "曾孙菜单三", Id = "1120", ParentId = "1080", Icon = "fa-solid fa-font-awesome" },
 
-            new TreeItem() { Text = "曾曾孙菜单一", Id = "1130", ParentId = "1100", Icon = "fa-solid fa-font-awesome" },
-            new TreeItem() { Text = "曾曾孙菜单二", Id = "1140", ParentId = "1100", Icon = "fa-solid fa-font-awesome" },
-            new TreeItem() { Text = "曾曾孙菜单三", Id = "1150", ParentId = "1100", Icon = "fa-solid fa-font-awesome" }
+            new() { Text = "曾曾孙菜单一", Id = "1130", ParentId = "1100", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "曾曾孙菜单二", Id = "1140", ParentId = "1100", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "曾曾孙菜单三", Id = "1150", ParentId = "1100", Icon = "fa-solid fa-font-awesome" }
         };
 
         // 算法获取属性结构数据

diff --git a/src/BootstrapBlazor/Components/Console/Console.razor b/src/BootstrapBlazor/Components/Console/Console.razor
@@ -21,14 +21,16 @@
         <div class="console-window">
             @foreach (var item in Items)
             {
-                if (ItemTemplate != null)
-                {
-                    @ItemTemplate(item)
-                }
-                else
-                {
-                    <div @key="@item" class="@GetClassString(item)">@item.Message</div>
-                }
+                <div @key="item" class="@GetClassString(item)">
+                    @if (ItemTemplate != null)
+                    {
+                        @ItemTemplate(item)
+                    }
+                    else
+                    {
+                        @item.RenderMessage()
+                    }
+                </div>
             }
         </div>
     </div>

diff --git a/src/BootstrapBlazor/Components/Console/Console.razor.cs b/src/BootstrapBlazor/Components/Console/Console.razor.cs
@@ -171,7 +171,7 @@ protected override void OnParametersSet()
         AutoScrollText ??= Localizer[nameof(AutoScrollText)];
 
         ClearButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.ConsoleClearButtonIcon);
-        Items ??= Enumerable.Empty<ConsoleMessageItem>();
+        Items ??= [];
     }
 
     /// <summary>

diff --git a/src/BootstrapBlazor/Components/Console/ConsoleMessageItem.cs b/src/BootstrapBlazor/Components/Console/ConsoleMessageItem.cs
@@ -12,6 +12,7 @@ public class ConsoleMessageItem
     /// <summary>
     /// 获得/设置 控制台输出消息
     /// </summary>
+    [NotNull]
     public string? Message { get; set; }
 
     /// <summary>
@@ -23,4 +24,9 @@ public class ConsoleMessageItem
     /// 获得/设置 自定义样式名称 默认 null
     /// </summary>
     public string? CssClass { get; set; }
+
+    /// <summary>
+    /// 获得/设置 是否为 Html 原生字符串 默认 false
+    /// </summary>
+    public bool IsHtml { get; set; }
 }
diff --git a/src/BootstrapBlazor/Extensions/ConsoleItemMessageExtensions.cs b/src/BootstrapBlazor/Extensions/ConsoleItemMessageExtensions.cs
@@ -0,0 +1,25 @@
+// 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/
+
+namespace BootstrapBlazor.Components;
+
+static class ConsoleMessageItemExtensions
+{
+    /// <summary>
+    /// 渲染消息方法
+    /// </summary>
+    /// <param name="item"></param>
+    /// <returns></returns>
+    public static RenderFragment RenderMessage(this ConsoleMessageItem item) => builder =>
+    {
+        if (item.IsHtml)
+        {
+            builder.AddContent(0, new MarkupString(item.Message));
+        }
+        else
+        {
+            builder.AddContent(0, item.Message);
+        }
+    };
+}
diff --git a/src/BootstrapBlazor/Extensions/MenuItemExtensions.cs b/src/BootstrapBlazor/Extensions/MenuItemExtensions.cs
@@ -38,5 +38,5 @@ public static void CascadingSetActive(this MenuItem item, bool active = true)
     /// </summary>
     /// <param name="source"></param>
     /// <returns></returns>
-    public static IEnumerable<MenuItem> GetAllSubItems(this IEnumerable<MenuItem>? source) => source?.SelectMany(i => i.Items.Any() ? i.Items.Concat(GetAllSubItems(i.Items)) : i.Items) ?? Enumerable.Empty<MenuItem>();
+    public static IEnumerable<MenuItem> GetAllSubItems(this IEnumerable<MenuItem>? source) => source?.SelectMany(i => i.Items.Any() ? i.Items.Concat(GetAllSubItems(i.Items)) : i.Items) ?? [];
 }
diff --git a/test/UnitTest/Components/ConsoleTest.cs b/test/UnitTest/Components/ConsoleTest.cs
@@ -223,6 +223,19 @@ public void MessageItemColor_OK()
         Assert.Contains("text-danger", cut.Markup);
     }
 
+    [Fact]
+    public void MessageItemHtml_OK()
+    {
+        var cut = Context.RenderComponent<Console>(builder =>
+        {
+            builder.Add(a => a.Items, new List<ConsoleMessageItem>()
+            {
+                new() { Message = "<div class=\"html\">Test1</div>", Color = Color.Danger, IsHtml = true }, new() { Message = "Test2" }
+            });
+        });
+        cut.Contains("<div class=\"html\">Test1</div>");
+    }
+
     [Fact]
     public void FooterTemplate_OK()
     {