feat: 增加 Select 组件

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

@@ -0,0 +1,61 @@
+using Microsoft.AspNetCore.Components;
+using System;
+
+namespace Bootstrap.Admin.Components
+{
+    /// <summary>
+    /// Select 组件基类
+    /// </summary>
+    public class SelectBase : ComponentBase
+    {
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public RenderFragment? ChildContent { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public string PlaceHolder { get; set; } = "请选择 ...";
+
+        /// <summary>
+        /// 当前选择项实例
+        /// </summary>
+        public SelectItemBase? SelectedItem { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public Action<SelectItemBase>? ClickItemCallback { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public Action<SelectItemBase>? ActiveChanged { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="firstRender"></param>
+        protected override void OnAfterRender(bool firstRender)
+        {
+            if (firstRender)
+            {
+                ClickItemCallback = UpdateItem;
+                ActiveChanged = UpdateItem;
+            }
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="item"></param>
+        protected void UpdateItem(SelectItemBase item)
+        {
+            SelectedItem = item;
+            StateHasChanged();
+        }
+    }
+}

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

@@ -0,0 +1,55 @@
+using Bootstrap.Admin.Shared;
+using Microsoft.AspNetCore.Components;
+
+namespace Bootstrap.Admin.Components
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public class SelectItemBase : ComponentBase
+    {
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public bool Active { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public string Text { get; set; } = "";
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public string Value { get; set; } = "";
+
+        /// <summary>
+        ///
+        /// </summary>
+        [CascadingParameter]
+        public Select? Select { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="firstRender"></param>
+        protected override void OnAfterRender(bool firstRender)
+        {
+            if (firstRender)
+            {
+                if (Active) Select?.ActiveChanged?.Invoke(this);
+            }
+        }
+
+        /// <summary>
+        ///
+        /// </summary>
+        protected void ClickItem()
+        {
+            Select?.ClickItemCallback?.Invoke(this);
+        }
+    }
+}

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

@@ -13,12 +13,11 @@
                 </div>
                 <div class="form-group col-sm-6 col-md-auto">
                     <label class="control-label" for="txt_dict_define">字典类别</label>
-                    <input class="form-control" data-toggle="lgbSelect" />
+                    <Select @ref="DictCate">
-                    <select data-toggle="lgbSelect" class="d-none" id="txt_dict_define">
+                        <SelectItem Text="全部" Value="" Active="true"></SelectItem>
-                        <option value="">全部</option>
+                        <SelectItem Text="系统使用" Value="0"></SelectItem>
-                        <option value="0">系统使用</option>
+                        <SelectItem Text="自定义" Value="1"></SelectItem>
-                        <option value="1">自定义</option>
+                    </Select>
-                    </select>
                 </div>
                 <div class="form-group col-sm-6 col-md-auto flex-sm-fill justify-content-sm-end align-self-sm-end">
                     <button type="button" id="btn_query" class="btn btn-primary btn-fill" @onclick="e => Query(1)"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
@@ -52,7 +51,7 @@
                 <th>字典标签</th>
                 <th>字典名称</th>
                 <th>字典代码</th>
-                <th>字典分类</th>
+                <th>字典类型</th>
             </TableHeader>
             <RowTemplate>
                 <td>@context.Category</td>
@@ -128,6 +127,8 @@
     [Parameter]
     public int PageIndex { get; set; } = 1;
 
+    protected Select? DictCate { get; set; }
+
     protected int PageItem { get; set; } = 20;
 
     protected Pagination? Pagination { get; set; }
@@ -152,6 +153,7 @@
     protected void Query(int pageIndex)
     {
         var data = DataAccess.DictHelper.RetrieveDicts();
+        if (!string.IsNullOrEmpty(DictCate?.SelectedItem?.Value)) data = data.Where(d => d.Define.ToString() == DictCate?.SelectedItem?.Value);
         ItemsCount = data.Count();
         Items = data.Skip((pageIndex - 1) * PageItem).Take(PageItem);
         PageCount = (int)Math.Ceiling(data.Count() * 1.0d / PageItem);

src/admin/Bootstrap.Admin/Pages/_Host.cshtml

@@ -33,6 +33,7 @@
         <link href="~/lib/overlayscrollbars/OverlayScrollbars.min.css" rel="stylesheet" />
     </environment>
     <link href="~/lib/captcha/slidercaptcha.css" rel="stylesheet" />
+    <link href="~/lib/longbow-select/longbow-select.css" rel="stylesheet" />
     <link href="~/css/theme.css" rel="stylesheet" asp-append-version="true" />
     <link href="~/css/theme-responsive.css" rel="stylesheet" asp-append-version="true" />
     <link href="~/css/site.css" rel="stylesheet" asp-append-version="true" />

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

@@ -0,0 +1,16 @@
+@inherits SelectBase
+
+<div data-toggle="lgbSelect" class="form-select dropdown">
+    <input type="text" readonly="readonly" class="form-control form-select-input" data-toggle="dropdown" placeholder="@PlaceHolder" value="@SelectedItem?.Text">
+    <span class="form-select-append"><i class="fa fa-angle-up"></i></span>
+    <div class="dropdown-menu-arrow"></div>
+    <div class="dropdown-menu">
+        <CascadingValue Value="this">
+            @ChildContent
+        </CascadingValue>
+    </div>
+</div>
+
+@code {
+
+}

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

@@ -0,0 +1,6 @@
+@inherits SelectItemBase
+
+<div class="@(Active ? "dropdown-item active" : "dropdown-item")" data-val="@Value" @onclick="ClickItem">@Text</div>
+
+@code {
+}