refactor(AvatarUpload): Rewrite zoom event，align the current item index.

1. Make the hover style of the delete button more prominent,
2. Rewrite zoom onclick event and set stopPropagation.

Author: momijijin

src/BootstrapBlazor/Components/Upload/AvatarUpload.razor

@@ -16,8 +16,9 @@
         {
             <div @key="item" class="@GetItemClassString()" id="@item.ValidateId" style="@ItemStyleString">
                 <Avatar Url="@item.PrevUrl" />
-                <div class="upload-item-actions">
-                    <span class="upload-item-delete" @onclick="@(e => OnFileDelete(item))">
+                <div class="upload-item-actions" @onclick="@(() => Preview(item.ValidateId ?? ""))">
+                    <span class="upload-item-delete" @onclick="@(e => OnFileDelete(item))"
+                          @onclick:stopPropagation="true">
                         <i class="@DeleteIcon"></i>
                     </span>
                     @if (GetShowProgress(item))

src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs

@@ -154,11 +154,11 @@ protected override async Task TriggerOnChanged(UploadFile file)
     /// 预览当前头像方法
     /// </summary>
     /// <returns></returns>
-    public async Task Preview()
+    public async Task Preview(string id)
     {
-        if(ShowPreviewList)
+        if(ShowPreviewList && !string.IsNullOrWhiteSpace(id) && Files.Any(r => r.ValidateId == id))
         {
-            await InvokeVoidAsync("preview", PreviewerId, 0);
+            await InvokeVoidAsync("preview", PreviewerId, Files.IndexOf(Files.First(r => r.ValidateId == id)));
         }
     }
 

src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss

@@ -157,6 +157,14 @@
 .upload .upload-body.is-avatar .upload-item:hover .upload-item-actions .upload-item-delete {
     display: block;
     color: var(--bs-danger);
+    padding: 0.1rem;
+    border-radius: 0.5rem;
+    border: 0.1rem solid var(--bs-danger);
+}
+
+.upload .upload-body.is-avatar .upload-item:hover .upload-item-actions .upload-item-delete:hover {
+    color: var(--bs-white);
+    background-color: var(--bs-danger);
 }
 
 .upload .upload-body.is-avatar .upload-item.is-invalid .upload-item-spin {