From 15685d664f1fe2995c1136e1516d3bc0e7c7bc73 Mon Sep 17 00:00:00 2001
From: Wisp X <wisp-x@qq.com>
Date: Thu, 23 Dec 2021 22:49:40 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=88=91=E7=9A=84=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=94=AF=E6=8C=81=E5=85=B3=E9=94=AE=E5=AD=97=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Http/Controllers/User/ImageController.php |  2 ++
 public/js/app.js                              |  8 +++++++
 resources/js/app.js                           |  6 ++++++
 resources/views/images.blade.php              | 21 +++++++++++++++----
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/app/Http/Controllers/User/ImageController.php b/app/Http/Controllers/User/ImageController.php
index 3fb65600..e285cb44 100644
--- a/app/Http/Controllers/User/ImageController.php
+++ b/app/Http/Controllers/User/ImageController.php
@@ -38,6 +38,8 @@ class ImageController extends Controller
                 default:
                     $builder->latest();
             }
+        })->when($request->query('keyword'), function (Builder $builder, $keyword) {
+            $builder->whereRaw("concat(IFNULL(origin_name,''),IFNULL(alias_name,'')) like ?", ["%{$keyword}%"]);
         })->paginate(40);
         $images->getCollection()->each(function (Image $image) {
             $image->human_date = $image->created_at->diffForHumans();
diff --git a/public/js/app.js b/public/js/app.js
index 87991473..0ec075ba 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -3490,6 +3490,14 @@ window.utils = {
       return {
         refresh: function refresh(params) {
           load(params, true);
+        },
+        reset: function reset() {
+          opts.data = {
+            page: 1
+          };
+          props.loading = false;
+          props.finished = false;
+          load();
         }
       };
     }
diff --git a/resources/js/app.js b/resources/js/app.js
index acef1abc..7a87f240 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -93,6 +93,12 @@ window.utils = {
                 refresh(params) {
                     load(params, true);
                 },
+                reset() {
+                    opts.data = {page: 1};
+                    props.loading = false;
+                    props.finished = false;
+                    load();
+                },
             }
         }
     }
diff --git a/resources/views/images.blade.php b/resources/views/images.blade.php
index 6e6f2dc5..8749fa10 100644
--- a/resources/views/images.blade.php
+++ b/resources/views/images.blade.php
@@ -25,7 +25,7 @@
             </div>
         </div>
         <div class="flex space-x-2 items-center">
-            <input type="text" class="px-2.5 py-1.5 border-0 outline-none rounded bg-gray-100 text-sm transition-all duration-300 hidden md:block md:w-36 md:hover:w-52 md:focus:w-52" placeholder="输入关键字搜索...">
+            <input type="text" id="search" class="px-2.5 py-1.5 border-0 outline-none rounded bg-gray-100 text-sm transition-all duration-300 hidden md:block md:w-36 md:hover:w-52 md:focus:w-52" placeholder="输入关键字搜索...">
             <x-dropdown direction="left">
                 <x-slot name="trigger">
                     <a id="order" class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">
@@ -35,7 +35,7 @@
                 </x-slot>
 
                 <x-slot name="content">
-                    <x-dropdown-link href="javascript:void(0)" @click="setOrderBy('newest'); open = false">最新
+                    <x-dropdown-link href="javascript:void(0)" @click="setOrderBy('newest1'); open = false">最新
                     </x-dropdown-link>
                     <x-dropdown-link href="javascript:void(0)" @click="setOrderBy('earliest'); open = false">最早
                     </x-dropdown-link>
@@ -143,8 +143,14 @@
                             .replace(/__height__/g, images[i].height)
                     }
 
-                    $photos.append(html).justifiedGallery('norewind');
-                    viewer.update();
+                    $photos.append(html);
+                    if ($photos.html() !== '') {
+                        $photos.justifiedGallery('norewind')
+                        viewer.update();
+                    } else {
+                        // 没有任何数据时销毁 justifiedGallery，否则会占高度，且会计算
+                        $photos.justifiedGallery('destroy')
+                    }
                 }
             });
 
@@ -154,6 +160,13 @@
                 $('#order span').text({newest: '最新', earliest: '最早', utmost: '最大', least: '最小'}[sort]);
             };
 
+            $('#search').keydown(function (e) {
+                if (e.keyCode === 13) {
+                    $photos.html('').justifiedGallery('destroy').justifiedGallery(gridConfigs)
+                    infinite.refresh({page: 1, keyword: $(this).val()});
+                }
+            })
+
             $photos.on('click', '.photo-mask', function () {
                 $(this).siblings('img').trigger('click');
             })