feat: 更新 dom 结构支持背景色高亮

Author: ArgoZhang

src/BootstrapBlazor/Components/TreeView/TreeView.razor

@@ -63,28 +63,31 @@ else
 @code {
     private RenderFragment<TreeViewItem<TItem>> RenderTreeRow => item =>
     @<div @key="item" class="@GetContentClassString(item)" data-bb-tree-view-index="@Rows.IndexOf(item)" @oncontextmenu="e => OnContextMenu(e, item)" @oncontextmenu:preventDefault="IsPreventDefault" @ontouchstart="e => OnTouchStart(e, item)" @ontouchend="OnTouchEnd" style="@GetTreeRowStyle(item)">
-        <DynamicElement TagName="i" class="@GetCaretClassString(item)" TriggerClick="CanTriggerClickNode(item)" OnClick="() => OnToggleNodeAsync(item, true)"></DynamicElement>
-        <i class="@NodeLoadingClassString"></i>
-        @if (ShowCheckbox)
-        {
-            <Checkbox Value="@item" IsDisabled="GetItemDisabledState(item)"
-                      SkipValidate="true" ShowLabel="false" ShowAfterLabel="false"
-                      State="@item.CheckedState" OnStateChanged="(state, v) => OnCheckStateChanged(item, state)"
-                      OnBeforeStateChanged="@(MaxSelectedCount > 0 ? state => OnBeforeStateChangedCallback(item, state) : null)" ></Checkbox>
-        }
-        <DynamicElement class="@GetNodeClassString(item)" TriggerClick="TriggerNodeLabel(item)" OnClick="() => OnClick(item)">
-            @if (ShowIcon)
-            {
-                <i class="@GetIconClassString(item)"></i>
-            }
-            @if (item.Template == null)
-            {
-                <span class="@GetItemTextClassString(item)">@item.Text</span>
-            }
-            else
+        <div class="tree-content-header"></div>
+        <div class="tree-content-body">
+            <DynamicElement TagName="i" class="@GetCaretClassString(item)" TriggerClick="CanTriggerClickNode(item)" OnClick="() => OnToggleNodeAsync(item, true)"></DynamicElement>
+            <i class="@NodeLoadingClassString"></i>
+            @if (ShowCheckbox)
             {
-                @item.Template(item.Value)
+                <Checkbox Value="@item" IsDisabled="GetItemDisabledState(item)"
+                          SkipValidate="true" ShowLabel="false" ShowAfterLabel="false"
+                          State="@item.CheckedState" OnStateChanged="(state, v) => OnCheckStateChanged(item, state)"
+                          OnBeforeStateChanged="@(MaxSelectedCount > 0 ? state => OnBeforeStateChangedCallback(item, state) : null)" ></Checkbox>
             }
-        </DynamicElement>
+            <DynamicElement class="@GetNodeClassString(item)" TriggerClick="TriggerNodeLabel(item)" OnClick="() => OnClick(item)">
+                @if (ShowIcon)
+                {
+                    <i class="@GetIconClassString(item)"></i>
+                }
+                @if (item.Template == null)
+                {
+                    <span class="@GetItemTextClassString(item)">@item.Text</span>
+                }
+                else
+                {
+                    @item.Template(item.Value)
+                }
+            </DynamicElement>
+        </div>
     </div>;
 }

src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss

@@ -33,11 +33,24 @@
     .tree-content {
         position: relative;
         display: flex;
-        width: 100%;
+        flex-wrap: nowrap;
         align-items: center;
-        margin-inline-start: calc(var(--bb-tree-padding-left) * var(--bb-tree-view-level, 0));
         cursor: pointer;
 
+        .tree-content-header {
+            flex-basis: calc(var(--bb-tree-padding-left) * var(--bb-tree-view-level, 0));
+            flex-shrink: 0;
+        }
+
+        .tree-content-body {
+            display: flex;
+            flex-wrap: nowrap;
+            flex-grow: 1;
+            flex-shrink: 0;
+            align-items: center;
+            border-radius: var(--bs-border-radius);
+        }
+
         .node-icon {
             width: 18px;
             height: 18px;
@@ -73,31 +86,21 @@
             }
         }
 
-        &:after {
-            content: "";
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            pointer-events: none;
-            margin-inline-start: calc(var(--bb-tree-padding-left) * var(--bb-tree-view-level, 0) * -1);
-            border-radius: var(--bb-tree-item-bg-radius);
+        .form-check {
+            margin: var(--bb-tree-check-margin);
         }
 
         &:not(.disabled) {
             &.active {
-                color: var(--bb-tree-item-active-color);
-
-                &:after {
+                .tree-content-body {
+                    color: var(--bb-tree-item-active-color);
                     background-color: var(--bb-tree-item-active-bg);
                 }
             }
 
             &:hover {
-                color: var(--bb-tree-item-hover-color);
-
-                &:after {
+                .tree-content-body {
+                    color: var(--bb-tree-item-hover-color);
                     background-color: var(--bb-tree-item-hover-bg);
                 }
             }
@@ -114,10 +117,6 @@
         padding: var(--bb-tree-node-padding);
         flex: 1;
 
-        .form-check {
-            margin: var(--bb-tree-check-margin);
-        }
-
         .tree-icon {
             width: var(--bb-tree-icon-width);
             text-align: center;