feat: 添加附件支持和拖放功能到 XSender 组件

Author: maikebing

src/AntDesign.X.Blazor/Components/XSender.razor

@@ -24,7 +24,17 @@
         </div>
     }
 
-    <div class="antdx-sender-editor">
+    <div class="antdx-sender-editor" @ref="Editor">
+        @if (AttachmentsEnabled)
+        {
+            <InputFile class="antdx-sender-file-input"
+                       multiple="@Multiple"
+                       disabled="@(Disabled || ReadOnly)"
+                       accept="@Accept"
+                       @attributes="InputAttributes"
+                       OnChange="@HandleFiles" />
+        }
+
         @if (ShowAttachmentsPanel)
         {
             <div class="antdx-sender-attachments-panel">
@@ -192,6 +202,8 @@
 
 @code {
     private IJSObjectReference? _module;
+    private IJSObjectReference? _senderDropZone;
+    private ElementReference Editor;
     private ElementReference TextArea;
 
     [Parameter] public string? Value { get; set; }
@@ -283,6 +295,15 @@
     private DotNetObjectReference<XSender>? _speechRef;
     private string? _speechBaseValue;
 
+    private IDictionary<string, object>? InputAttributes =>
+        Directory
+            ? new Dictionary<string, object>
+            {
+                ["webkitdirectory"] = true,
+                ["directory"] = true,
+            }
+            : null;
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
@@ -299,6 +320,25 @@
             {
                 return;
             }
+
+            if (AttachmentsEnabled)
+            {
+                try
+                {
+                    _senderDropZone = await _module.InvokeAsync<IJSObjectReference>(
+                        "wireAttachmentDropZone",
+                        Editor,
+                        AttachmentsDragHover,
+                        AttachmentsPastable,
+                        Disabled || ReadOnly);
+                }
+                catch (JSException)
+                {
+                }
+                catch (InvalidOperationException)
+                {
+                }
+            }
         }
 
         await ResizeAsync();
@@ -310,6 +350,11 @@
         _speechRef?.Dispose();
         _speechRef = null;
 
+        if (_senderDropZone is not null)
+        {
+            await _senderDropZone.DisposeAsync();
+        }
+
         if (_module is not null)
         {
             await _module.DisposeAsync();
@@ -456,6 +501,12 @@
             files = files.Take(MaxAttachments.Value).ToArray();
         }
 
+        if (files.Count > 0)
+        {
+            _attachmentsPanelTouched = false;
+            _attachmentsPanelOpen = true;
+        }
+
         await OnFilesSelected.InvokeAsync(files);
     }
 

src/AntDesign.X.Blazor/wwwroot/css/antdesign-x.css

@@ -609,6 +609,12 @@
     box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.10);
 }
 
+.antdx-sender-editor.antdx-attachments-drag-over {
+    border-color: rgba(22, 119, 255, 0.62);
+    background: color-mix(in srgb, var(--antdx-component-bg) 88%, var(--antdx-color-primary));
+    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.10);
+}
+
 .antdx-sender-header,
 .antdx-sender-custom-footer,
 .antdx-sender-footer {