feat: Modal 组件模板化

src/admin/Bootstrap.Admin/Components/ModalBase.cs

@@ -0,0 +1,60 @@
+using Bootstrap.Admin.Extensions;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Bootstrap.Admin.Components
+{
+    /// <summary>
+    /// 模态框组件类
+    /// </summary>
+    public class ModalBase : ComponentBase
+    {
+        /// <summary>
+        /// 
+        /// </summary>
+        [Inject]
+        protected IJSRuntime? JSRuntime { get; set; }
+
+        /// <summary>
+        ///
+        /// </summary>
+        [Parameter]
+        public string Id { get; set; } = "";
+
+        /// <summary>
+        ///
+        /// </summary>
+        [Parameter]
+        public string Title { get; set; } = "未设置";
+
+        /// <summary>
+        ///
+        /// </summary>
+        [Parameter]
+        public RenderFragment? ModalBody { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public bool Backdrop { get; set; }
+
+        /// <summary>
+        ///
+        /// </summary>
+        [Parameter]
+        public RenderFragment? ModalFooter { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="firstRender"></param>
+        protected override void OnAfterRender(bool firstRender)
+        {
+            if (firstRender)
+            {
+                JSRuntime.InitModal();
+            }
+        }
+    }
+}

src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor

@@ -57,7 +57,49 @@
     </div>
 </div>
 
-<Modal></Modal>
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
+    Launch demo modal
+</button>
+
+<Modal Id="exampleModal" Title="字典编辑窗口">
+    <ModalBody>
+        <form class="form-inline">
+            <div class="row">
+                <input type="hidden" id="dictID" />
+                <div class="form-group col-sm-6">
+                    <label class="control-label" for="dictCate">字典标签</label>
+                    <input type="text" class="form-control" id="dictCate" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
+                </div>
+                <div class="form-group col-sm-6">
+                    <label class="control-label" for="dictDefine">字典类型</label>
+                    <input class="form-control" data-toggle="lgbSelect" />
+                    <select data-toggle="lgbSelect" class="d-none" data-default-val="1" id="dictDefine">
+                        <option value="0">系统使用</option>
+                        <option value="1">自定义</option>
+                    </select>
+                </div>
+                <div class="form-group col-sm-6">
+                    <label class="control-label" for="dictName">字典名称</label>
+                    <input type="text" class="form-control" id="dictName" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
+                </div>
+                <div class="form-group col-sm-6">
+                    <label class="control-label" for="dictCode">字典代码</label>
+                    <input type="text" class="form-control" id="dictCode" placeholder="不可为空，2000字以内" maxlength="2000" data-valid="true" />
+                </div>
+            </div>
+        </form>
+    </ModalBody>
+    <ModalFooter>
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+            <i class="fa fa-times"></i>
+            <span>关闭</span>
+        </button>
+        <button type="button" class="btn btn-primary" id="btnSubmit">
+            <i class="fa fa-save"></i>
+            <span>保存</span>
+        </button>
+    </ModalFooter>
+</Modal>
 
 @code {
 

src/admin/Bootstrap.Admin/Shared/Modal.razor

@@ -1,36 +1,25 @@
-@inject IJSRuntime JSRuntime
+@inherits ModalBase
-
-<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
-    Launch demo modal
-</button>
 
 <!-- Modal -->
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+<div class="modal fade" id="@Id" tabindex="-1" role="dialog" aria-labelledby="modal_@Id" aria-hidden="true" data-backdrop="@(Backdrop ? "none" : "static")">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+                <h5 class="modal-title" id="modal_@Id">@Title</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-                ...
+                @ModalBody
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                @ModalFooter
-                <button type="button" class="btn btn-primary">Save changes</button>
             </div>
         </div>
     </div>
 </div>
 
 @code {
-    protected override void OnAfterRender(bool firstRender)
+
-    {
-        if (firstRender)
-        {
-            JSRuntime.InitModal();
-        }
-    }
 }