!1903 feat(#I4BZER): table cell compatible Progress component

* style: 设置示例样式
* refactor: 设置教育列宽度
* feat: 内置 disabled 样式
* refactor: Foo 增加静态方法
* refactor: 微调日期宽度
* refactor: 获取头像链接重构为 Foo 静态方法
* doc: 增加 Table 组件实战示例
* style: Table 组件兼容 Progress 组件

src/BootstrapBlazor.Shared/Pages/Components/Foo.cs

@@ -118,6 +118,42 @@ namespace BootstrapBlazor.Shared.Pages.Components
         /// </summary>
         /// <returns></returns>
         public static IEnumerable<SelectedItem> GenerateHobbys(IStringLocalizer<Foo> localizer) => localizer["Hobbys"].Value.Split(",").Select(i => new SelectedItem(i, i)).ToList();
+
+
+        /// <summary>
+        /// 通过 Id 获取头像链接
+        /// </summary>
+        /// <param name="id"></param>
+        /// <returns></returns>
+        public static string GetAvatarUrl(int id) => $"_content/BootstrapBlazor.Shared/images/avatars/150-{Math.Max(1, id % 25)}.jpg";
+
+        /// <summary>
+        /// 通过 Count 获得颜色
+        /// </summary>
+        /// <param name="count"></param>
+        /// <returns></returns>
+        public static Color GetProgressColor(int count) => count switch
+        {
+            >= 0 and < 10 => Color.Secondary,
+            >= 10 and < 20 => Color.Danger,
+            >= 20 and < 40 => Color.Warning,
+            >= 40 and < 50 => Color.Info,
+            >= 50 and < 70 => Color.Primary,
+            _ => Color.Success
+        };
+
+        /// <summary>
+        /// 通过 Id 获取 Title
+        /// </summary>
+        /// <returns></returns>
+        public static string GetTitle() => random.Next(1, 80) switch
+        {
+            >= 1 and < 10 => "Clerk",
+            >= 10 and < 50 => "Engineer",
+            >= 50 and < 60 => "Manager",
+            >= 60 and < 70 => "Chief",
+            _ => "General Manager"
+        };
     }
 
     /// <summary>

src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesCell.razor

@@ -4,14 +4,14 @@
 
 <h4>单元格相关操作示例</h4>
 
-<Block Title="合并单元格" Introduction="基础的表格展示用法。">
+<Block Title="合并单元格" Introduction="基础的表格展示用法" Name="MergeCell">
     <p>本例中通过设置 <code>OnCellRenderHandler</code> 回调委托，通过判断条件对 <code>Name</code> 与 <code>Address</code> 两列进行单元格合并操作，并且通过设置 <code>TableCellArgs</code> 属性 <code>Class</code> 值为 <code>cell-demo</code> 样式表名称对合并后单元格进行背景色设置</p>
     <Pre>.cell-demo {
     background-color: #ddd;
 }</Pre>
     <Table TItem="Foo" Items="@Items.Take(3)">
         <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
+            <TableColumn @bind-Field="@context.DateTime" Width="140" />
             <TableColumn @bind-Field="@context.Name" OnCellRender="@OnCellRenderHandler" />
             <TableColumn @bind-Field="@context.Address" />
         </TableColumns>

src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesColumn.razor

@@ -270,3 +270,38 @@
            OnQueryAsync="@OnQueryAsync">
     </Table>
 </Block>
+
+<Block Title="实战示例" Introduction="通过显示模板 <code>Template</code> 对各列进行自定义渲染" Name="Advance">
+    <Table TItem="Foo" IsPagination="true" PageItemsSource="@PageItemsSource" RenderMode="TableRenderMode.Table"
+           IsStriped="true" IsBordered="true" UseInjectDataService="true" OnQueryAsync="OnQueryAsync">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name" Width="220">
+                <Template Context="value">
+                    <div class="d-flex">
+                        @{
+                            var row = (Foo)value.Row;
+                        }
+                        <div>
+                            <img src="@Foo.GetAvatarUrl(row.Id)" />
+                        </div>
+                        <div class="ps-2">
+                            <div>@value.Value</div>
+                            <div class="address">@row.Address</div>
+                        </div>
+                    </div>
+                </Template>
+            </TableColumn>
+            <TableColumn @bind-Field="@context.Address" />
+            <TableColumn @bind-Field="@context.Education" Align="Alignment.Center" Width="80" />
+            <TableColumn @bind-Field="@context.Count" Width="160">
+                <Template Context="value">
+                    <div class="w-100">
+                        <div>@value.Value %</div>
+                        <Progress Value="@value.Value" Color="@Foo.GetProgressColor(value.Value)"></Progress>
+                    </div>
+                </Template>
+            </TableColumn>
+            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" Width="80" />
+        </TableColumns>
+    </Table>
+</Block>

src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesColumn.razor.cs

@@ -33,7 +33,7 @@ namespace BootstrapBlazor.Shared.Pages.Table
         [NotNull]
         private ToastService? ToastService { get; set; }
 
-        private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };
+        private static IEnumerable<int> PageItemsSource => new int[] { 5, 10, 20 };
 
         /// <summary>
         /// OnInitialized 方法

src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesExcel.razor

@@ -78,3 +78,44 @@
     Trace.Log($"单元格变化通知 类: Foo - 值: 单元格");
     return Task.FromResult(true);
 }</Pre>
+
+<Block Title="通过编辑模板单独控制单元格渲染方式" Introduction="高级用法" Name="CellRender">
+    <ul class="ul-demo">
+        <li><code>IsFixedHeader</code> 固定表头 高度设定为 <code>Height="500px"</code></li>
+        <li><code>Name</code> 不可编辑显示头像</li>
+    </ul>
+    <Table TItem="Foo" Items="@Items" IsBordered="true" IsExcel="true" IsFixedHeader="true" Height="500">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name" Width="200">
+                <EditTemplate Context="value">
+                    @{
+                        var row = (Foo)value;
+                    }
+                    <div class="d-flex disabled">
+                        <div>
+                            <img src="@Foo.GetAvatarUrl(row.Id)" />
+                        </div>
+                        <div class="ps-2">
+                            <div>@row.Name</div>
+                            <div class="address">@GetTitle(row.Id)</div>
+                        </div>
+                    </div>
+                </EditTemplate>
+            </TableColumn>
+            <TableColumn @bind-Field="@context.Address" />
+            <TableColumn @bind-Field="@context.Education" Width="160" />
+            <TableColumn @bind-Field="@context.Count" Width="160">
+                <EditTemplate Context="value">
+                    @{
+                        var row = (Foo)value;
+                    }
+                    <div class="disabled">
+                        <div>@row.Count %</div>
+                        <Progress Value="@row.Count" Color="@Foo.GetProgressColor(row.Count)"></Progress>
+                    </div>
+                </EditTemplate>
+            </TableColumn>
+            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" Width="80" />
+        </TableColumns>
+    </Table>
+</Block>

src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesExcel.razor.cs

@@ -114,5 +114,9 @@ namespace BootstrapBlazor.Shared.Pages.Table
             Trace.Log($"集合值变化通知 列: {Items.Count} - 类型: Delete");
             return Task.FromResult(true);
         }
+
+        private ConcurrentDictionary<int, string> TitleCache { get; } = new();
+
+        private string GetTitle(int id) => TitleCache.GetOrAdd(id, key => Foo.GetTitle());
     }
 }

src/BootstrapBlazor.Shared/wwwroot/css/site.css

@@ -1764,3 +1764,20 @@ header .bb-fs {
 .anchor-link-demo {
     margin: 0 !important;
 }
+
+.table-cell img {
+    width: 46px;
+    border-radius: var(--bs-border-radius);
+}
+
+.table-cell .progress {
+    height: 6px;
+    margin-top: 9px;
+    margin-bottom: 10px;
+}
+
+.table-cell .address {
+    margin-top: .25rem;
+    font-size: 86%;
+    color: #c0c4cc;
+}

src/BootstrapBlazor/Components/Table/Table.css

@@ -615,6 +615,12 @@ form .table .table-cell > textarea {
     width: 100%;
 }
 
+.table-excel .table-cell > .disabled {
+    background-color: #f5f8fa;
+    width: 100%;
+    padding: .375rem .1875rem;
+}
+
 .table-excel .datetime-picker-input {
     padding-left: 2rem;
 }
@@ -644,3 +650,7 @@ form .table .table-cell > textarea {
     .table-cell.text-end input {
         text-align: right;
     }
+
+.table-cell > .progress {
+    flex: 1;
+}