From 035c184761514c64be40319f0e2f9edb7717a201 Mon Sep 17 00:00:00 2001
From: Wisp X <wisp-x@qq.com>
Date: Tue, 21 Dec 2021 23:16:31 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=E5=AE=8C=E5=96=84=E6=88=91?=
 =?UTF-8?q?=E7=9A=84=E5=9B=BE=E7=89=87=E9=A1=B5=E9=9D=A2=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Http/Controllers/User/ImageController.php |  32 +-
 public/css/app.css                            | 463 +++++++++++-------
 public/css/common.css                         |  36 ++
 resources/css/common.less                     |  18 +
 resources/views/images.blade.php              |  35 +-
 routes/web.php                                |   3 +-
 6 files changed, 381 insertions(+), 206 deletions(-)

diff --git a/app/Http/Controllers/User/ImageController.php b/app/Http/Controllers/User/ImageController.php
index 2ecea6e7..84ba5cbb 100644
--- a/app/Http/Controllers/User/ImageController.php
+++ b/app/Http/Controllers/User/ImageController.php
@@ -12,23 +12,29 @@ use Illuminate\View\View;
 
 class ImageController extends Controller
 {
-    public function index(Request $request): View|Response
+    public function index(): View
+    {
+        return view('images');
+    }
+
+    public function images(Request $request): Response
     {
         /** @var User $user */
         $user = Auth::user();
 
-        if ($request->method() === 'POST') {
-            $images = $user->images()->latest()->paginate(40);
-            $images->getCollection()->each(function (Image $image) {
-                $image->human_date = $image->created_at->diffForHumans();
-                $image->date = $image->created_at->format('Y-m-d H:i:s');
-                $image->append(['url', 'filename'])->setVisible([
-                    'id', 'filename', 'url', 'human_date', 'date', 'human_date', 'width', 'height'
-                ]);
-            });
-            return $this->success('success', compact('images'));
-        }
+        $images = $user->images()->latest()->paginate(40);
+        $images->getCollection()->each(function (Image $image) {
+            $image->human_date = $image->created_at->diffForHumans();
+            $image->date = $image->created_at->format('Y-m-d H:i:s');
+            $image->append(['url', 'filename'])->setVisible([
+                'id', 'filename', 'url', 'human_date', 'date', 'human_date', 'width', 'height'
+            ]);
+        });
+        return $this->success('success', compact('images'));
+    }
 
-        return view('images');
+    public function albums(Request $request): Response
+    {
+        return $this->success();
     }
 }
diff --git a/public/css/app.css b/public/css/app.css
index fa478bf4..2c3b8cf0 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -391,7 +391,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.divide-y > *, .border, .border-0, .border-2, .border-t, .border-r, .border-b, .border-b-2 {
+.divide-y > *, .border, .border-2, .border-0, .border-b-2, .border-t, .border-r, .border-b {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
@@ -651,6 +651,18 @@ select {
   bottom: 0px;
   left: 0px;
 }
+.top-1 {
+  top: 0.25rem;
+}
+.right-1 {
+  right: 0.25rem;
+}
+.top-2 {
+  top: 0.5rem;
+}
+.right-2 {
+  right: 0.5rem;
+}
 .-left-64 {
   left: -16rem;
 }
@@ -669,23 +681,26 @@ select {
 .bottom-0 {
   bottom: 0px;
 }
-.top-2 {
-  top: 0.5rem;
-}
-.right-2 {
-  right: 0.5rem;
-}
 .left-2 {
   left: 0.5rem;
 }
 .bottom-2 {
   bottom: 0.5rem;
 }
-.top-1 {
-  top: 0.25rem;
+.right-\[40\%\] {
+  right: 40%;
 }
-.right-1 {
-  right: 0.25rem;
+.right-\[30\%\] {
+  right: 30%;
+}
+.right-6 {
+  right: 1.5rem;
+}
+.top-\[50\%\] {
+  top: 50%;
+}
+.left-\[50\%\] {
+  left: 50%;
 }
 .z-0 {
   z-index: 0;
@@ -705,6 +720,9 @@ select {
 .m-2 {
   margin: 0.5rem;
 }
+.m-4 {
+  margin: 1rem;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -713,15 +731,48 @@ select {
   margin-left: 1rem;
   margin-right: 1rem;
 }
+.mx-10 {
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+}
+.my-7 {
+  margin-top: 1.75rem;
+  margin-bottom: 1.75rem;
+}
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
 .ml-3 {
   margin-left: 0.75rem;
 }
 .-ml-px {
   margin-left: -1px;
 }
+.mb-4 {
+  margin-bottom: 1rem;
+}
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
 .mt-3 {
   margin-top: 0.75rem;
 }
+.ml-1 {
+  margin-left: 0.25rem;
+}
+.mt-2 {
+  margin-top: 0.5rem;
+}
+.ml-2 {
+  margin-left: 0.5rem;
+}
+.mt-1 {
+  margin-top: 0.25rem;
+}
+.mt-4 {
+  margin-top: 1rem;
+}
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -731,21 +782,9 @@ select {
 .mt-10 {
   margin-top: 2.5rem;
 }
-.ml-1 {
-  margin-left: 0.25rem;
-}
-.mt-2 {
-  margin-top: 0.5rem;
-}
 .mr-2 {
   margin-right: 0.5rem;
 }
-.ml-2 {
-  margin-left: 0.5rem;
-}
-.mt-4 {
-  margin-top: 1rem;
-}
 .ml-4 {
   margin-left: 1rem;
 }
@@ -758,12 +797,6 @@ select {
 .-mt-px {
   margin-top: -1px;
 }
-.mb-4 {
-  margin-bottom: 1rem;
-}
-.mt-1 {
-  margin-top: 0.25rem;
-}
 .-ml-1 {
   margin-left: -0.25rem;
 }
@@ -773,8 +806,8 @@ select {
 .mr-3 {
   margin-right: 0.75rem;
 }
-.mb-2 {
-  margin-bottom: 0.5rem;
+.mt-20 {
+  margin-top: 5rem;
 }
 .block {
   display: block;
@@ -800,6 +833,9 @@ select {
 .h-8 {
   height: 2rem;
 }
+.h-10 {
+  height: 2.5rem;
+}
 .h-screen {
   height: 100vh;
 }
@@ -821,18 +857,15 @@ select {
 .h-6 {
   height: 1.5rem;
 }
-.h-10 {
-  height: 2.5rem;
-}
 .h-12 {
   height: 3rem;
 }
-.min-h-screen {
-  min-height: 100vh;
-}
 .min-h-\[150px\] {
   min-height: 150px;
 }
+.min-h-screen {
+  min-height: 100vh;
+}
 .w-5 {
   width: 1.25rem;
 }
@@ -842,6 +875,15 @@ select {
 .w-8 {
   width: 2rem;
 }
+.w-\[0\%\] {
+  width: 0%;
+}
+.w-10 {
+  width: 2.5rem;
+}
+.w-\[80\%\] {
+  width: 80%;
+}
 .w-3\/4 {
   width: 75%;
 }
@@ -863,15 +905,6 @@ select {
 .w-\[90\%\] {
   width: 90%;
 }
-.w-\[0\%\] {
-  width: 0%;
-}
-.w-10 {
-  width: 2.5rem;
-}
-.w-\[80\%\] {
-  width: 80%;
-}
 .max-w-xl {
   max-width: 36rem;
 }
@@ -881,6 +914,9 @@ select {
 .max-w-\[70\%\] {
   max-width: 70%;
 }
+.max-w-\[33\.33\%\] {
+  max-width: 33.33%;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -893,6 +929,9 @@ select {
 .basis-1\/2 {
   flex-basis: 50%;
 }
+.basis-1\/6 {
+  flex-basis: 16.666667%;
+}
 .origin-top-right {
   transform-origin: top right;
 }
@@ -931,12 +970,12 @@ select {
 .cursor-default {
   cursor: default;
 }
-.cursor-not-allowed {
-  cursor: not-allowed;
-}
 .cursor-pointer {
   cursor: pointer;
 }
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
 .select-all {
   -webkit-user-select: all;
      -moz-user-select: all;
@@ -951,6 +990,15 @@ select {
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.flex-row {
+  flex-direction: row;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -975,21 +1023,16 @@ select {
 .justify-between {
   justify-content: space-between;
 }
-.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
-.space-x-3 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
-}
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1010,10 +1053,15 @@ select {
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
@@ -1044,15 +1092,15 @@ select {
 .rounded-md {
   border-radius: 0.375rem;
 }
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-full {
   border-radius: 9999px;
 }
 .rounded {
   border-radius: 0.25rem;
 }
-.rounded-lg {
-  border-radius: 0.5rem;
-}
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -1064,11 +1112,14 @@ select {
 .border {
   border-width: 1px;
 }
+.border-2 {
+  border-width: 2px;
+}
 .border-0 {
   border-width: 0px;
 }
-.border-2 {
-  border-width: 2px;
+.border-b-2 {
+  border-bottom-width: 2px;
 }
 .border-t {
   border-top-width: 1px;
@@ -1079,9 +1130,6 @@ select {
 .border-b {
   border-bottom-width: 1px;
 }
-.border-b-2 {
-  border-bottom-width: 2px;
-}
 .border-solid {
   border-style: solid;
 }
@@ -1092,6 +1140,14 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
+.border-stone-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(214 211 209 / var(--tw-border-opacity));
+}
+.border-indigo-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(99 102 241 / var(--tw-border-opacity));
+}
 .border-transparent {
   border-color: transparent;
 }
@@ -1107,14 +1163,6 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
-.border-stone-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(214 211 209 / var(--tw-border-opacity));
-}
-.border-indigo-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(99 102 241 / var(--tw-border-opacity));
-}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1123,6 +1171,18 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1135,25 +1195,13 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
-.bg-gray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
 .bg-slate-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
 }
-.bg-gray-50 {
+.bg-gray-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
@@ -1171,11 +1219,17 @@ select {
 .p-4 {
   padding: 1rem;
 }
+.p-2 {
+  padding: 0.5rem;
+}
 .p-6 {
   padding: 1.5rem;
 }
-.p-2 {
-  padding: 0.5rem;
+.p-10 {
+  padding: 2.5rem;
+}
+.p-3 {
+  padding: 0.75rem;
 }
 .px-4 {
   padding-left: 1rem;
@@ -1189,6 +1243,18 @@ select {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1201,10 +1267,6 @@ select {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1217,10 +1279,6 @@ select {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
 }
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
 .py-14 {
   padding-top: 3.5rem;
   padding-bottom: 3.5rem;
@@ -1229,9 +1287,24 @@ select {
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
 }
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+.py-7 {
+  padding-top: 1.75rem;
+  padding-bottom: 1.75rem;
+}
+.pb-6 {
+  padding-bottom: 1.5rem;
 }
 .pt-6 {
   padding-top: 1.5rem;
@@ -1239,9 +1312,6 @@ select {
 .pt-20 {
   padding-top: 5rem;
 }
-.pb-6 {
-  padding-bottom: 1.5rem;
-}
 .pb-12 {
   padding-bottom: 3rem;
 }
@@ -1258,14 +1328,26 @@ select {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
 }
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -1274,16 +1356,8 @@ select {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-.text-6xl {
-  font-size: 3.75rem;
+.text-7xl {
+  font-size: 4.5rem;
   line-height: 1;
 }
 .font-medium {
@@ -1301,12 +1375,12 @@ select {
 .leading-7 {
   line-height: 1.75rem;
 }
-.tracking-widest {
-  letter-spacing: 0.1em;
-}
 .tracking-wider {
   letter-spacing: 0.05em;
 }
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -1315,26 +1389,58 @@ select {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+.text-green-800 {
+  --tw-text-opacity: 1;
+  color: rgb(22 101 52 / var(--tw-text-opacity));
+}
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
 }
-.text-gray-900 {
+.text-amber-500 {
   --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
+  color: rgb(245 158 11 / var(--tw-text-opacity));
+}
+.text-emerald-500 {
+  --tw-text-opacity: 1;
+  color: rgb(16 185 129 / var(--tw-text-opacity));
 }
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.text-green-400 {
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity));
+}
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
-.text-gray-400 {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
 .text-gray-200 {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -1343,10 +1449,6 @@ select {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
 .text-green-600 {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity));
@@ -1359,34 +1461,6 @@ select {
   --tw-text-opacity: 1;
   color: rgb(71 85 105 / var(--tw-text-opacity));
 }
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-.text-amber-500 {
-  --tw-text-opacity: 1;
-  color: rgb(245 158 11 / var(--tw-text-opacity));
-}
-.text-green-500 {
-  --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity));
-}
-.text-emerald-500 {
-  --tw-text-opacity: 1;
-  color: rgb(16 185 129 / var(--tw-text-opacity));
-}
-.text-green-400 {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity));
-}
-.text-green-800 {
-  --tw-text-opacity: 1;
-  color: rgb(22 101 52 / var(--tw-text-opacity));
-}
 .underline {
   text-decoration: underline;
 }
@@ -1394,6 +1468,9 @@ select {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.opacity-70 {
+  opacity: 0.7;
+}
 .opacity-0 {
   opacity: 0;
 }
@@ -1406,9 +1483,6 @@ select {
 .opacity-75 {
   opacity: 0.75;
 }
-.opacity-70 {
-  opacity: 0.7;
-}
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1431,9 +1505,15 @@ select {
 .outline {
   outline-style: solid;
 }
+.outline-2 {
+  outline-width: 2px;
+}
 .outline-offset-2 {
   outline-offset: 2px;
 }
+.outline-offset-1 {
+  outline-offset: 1px;
+}
 .outline-transparent {
   outline-color: transparent;
 }
@@ -1497,22 +1577,22 @@ select {
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
-.hover\:bg-gray-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
-.hover\:bg-gray-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
+.hover\:bg-gray-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+.hover\:bg-gray-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
 .hover\:text-gray-500:hover {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -1521,6 +1601,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
+.hover\:text-indigo-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(129 140 248 / var(--tw-text-opacity));
+}
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1529,10 +1613,6 @@ select {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.hover\:text-indigo-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(129 140 248 / var(--tw-text-opacity));
-}
 .hover\:outline-blue-500:hover {
   outline-color: #3b82f6;
 }
@@ -1691,10 +1771,6 @@ select {
 }
 @media (min-width: 768px) {
 
-  .md\:mt-2 {
-    margin-top: 0.5rem;
-  }
-
   .md\:mt-8 {
     margin-top: 2rem;
   }
@@ -1703,6 +1779,14 @@ select {
     margin-top: 0px;
   }
 
+  .md\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
+  .md\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -1723,6 +1807,10 @@ select {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -1753,6 +1841,11 @@ select {
     padding-right: 2.5rem;
   }
 
+  .md\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
   .md\:pt-24 {
     padding-top: 6rem;
   }
@@ -1767,6 +1860,10 @@ select {
 }
 @media (min-width: 1024px) {
 
+  .lg\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
   .lg\:px-10 {
     padding-left: 2.5rem;
     padding-right: 2.5rem;
@@ -1787,6 +1884,10 @@ select {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .xl\:grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
   .xl\:gap-x-8 {
     -moz-column-gap: 2rem;
          column-gap: 2rem;
@@ -1803,6 +1904,10 @@ select {
 }
 @media (min-width: 1536px) {
 
+  .\32xl\:grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+
   .\32xl\:px-60 {
     padding-left: 15rem;
     padding-right: 15rem;
diff --git a/public/css/common.css b/public/css/common.css
index 8d8c4830..311be150 100644
--- a/public/css/common.css
+++ b/public/css/common.css
@@ -242,4 +242,40 @@ progress::-webkit-progress-value {
 .viewer-backdrop {
   background-color: rgba(0, 0, 0, 0.75);
 }
+#albums-grid a:hover,
+#photos-grid a:hover,
+#albums-grid a.selected,
+#photos-grid a.selected {
+  outline-color: #3b82f6;
+}
+#albums-grid a:hover .album-select,
+#photos-grid a:hover .album-select,
+#albums-grid a.selected .album-select,
+#photos-grid a.selected .album-select,
+#albums-grid a:hover .photo-select,
+#photos-grid a:hover .photo-select,
+#albums-grid a.selected .photo-select,
+#photos-grid a.selected .photo-select {
+  display: block;
+}
+#albums-grid a:hover.selected .album-select,
+#photos-grid a:hover.selected .album-select,
+#albums-grid a.selected.selected .album-select,
+#photos-grid a.selected.selected .album-select,
+#albums-grid a:hover.selected .photo-select,
+#photos-grid a:hover.selected .photo-select,
+#albums-grid a.selected.selected .photo-select,
+#photos-grid a.selected.selected .photo-select {
+  border-color: white;
+}
+#albums-grid a:hover.selected .album-select > i,
+#photos-grid a:hover.selected .album-select > i,
+#albums-grid a.selected.selected .album-select > i,
+#photos-grid a.selected.selected .album-select > i,
+#albums-grid a:hover.selected .photo-select > i,
+#photos-grid a:hover.selected .photo-select > i,
+#albums-grid a.selected.selected .photo-select > i,
+#photos-grid a.selected.selected .photo-select > i {
+  color: #0061ff;
+}
 
diff --git a/resources/css/common.less b/resources/css/common.less
index ca679ac6..19cd7e17 100644
--- a/resources/css/common.less
+++ b/resources/css/common.less
@@ -34,3 +34,21 @@ progress::-webkit-progress-value {
 .viewer-backdrop {
     background-color: rgba(0, 0, 0, .75);
 }
+
+// 我的图片
+#albums-grid, #photos-grid {
+    a:hover, a.selected {
+        outline-color: #3b82f6;
+        .album-select, .photo-select {
+            display: block;
+        }
+        &.selected {
+            .album-select, .photo-select {
+                border-color: white;
+                &>i {
+                    color: #0061ff;
+                }
+            }
+        }
+    }
+}
diff --git a/resources/views/images.blade.php b/resources/views/images.blade.php
index a346b6e5..74e24233 100644
--- a/resources/views/images.blade.php
+++ b/resources/views/images.blade.php
@@ -42,19 +42,26 @@
             </div>
         </x-container>
     </div>
-
-    <div id="photos-grid" class="overflow-hidden mt-6 md:mt-2"></div>
+    <div id="albums-grid" class="mt-10 md:mt-6 px-3 space-x-2 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
+        <a href="javascript:void(0)" class="relative inline-flex flex-col mb-2 text-center rounded outline outline-2 outline-offset-2 outline-transparent">
+            <div class="album-select absolute z-[1] top-1 right-1 rounded-full overflow-hidden text-white text-lg bg-white border border-gray-500 cursor-pointer hidden group-hover:block">
+                <i class="fas fa-check-circle block"></i>
+            </div>
+            <i class="fas fa-folder-open text-7xl m-4 text-blue-500"></i>
+            <p class="truncate text-sm text-gray-500 mx-2 mb-2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
+        </a>
+    </div>
+    <div id="photos-grid" class="overflow-hidden mt-4 md:mt-2"></div>
     <div id="photos-loading" class="flex justify-center items-center pt-6 pb-6">
         <a href="javascript:void(0)" class="flex justify-center items-center text-sm text-gray-400 text-gray-700 cursor-not-allowed">加载中...</a>
     </div>
 
     <script type="text/html" id="photos-item">
-        <a href="javascript:void(0)" class="relative transition-all rounded group outline outline-offset-2 outline-transparent hover:outline-blue-500">
-            <div class="photo-mask absolute transition-all left-0 right-0 bottom-0 h-20 group-hover:h-full z-[1] bg-gradient-to-t from-black">
-                <div class="photo-select absolute transition-all top-2 right-2 rounded-full overflow-hidden text-white text-lg bg-white border border-gray-500 cursor-pointer hidden group-hover:block">
-                    <i class="fas fa-check-circle block"></i>
-                </div>
-
+        <a href="javascript:void(0)" class="relative rounded outline outline-2 outline-offset-2 outline-transparent">
+            <div class="photo-select absolute z-[1] top-1 right-1 rounded-full overflow-hidden text-white text-lg bg-white border border-gray-500 cursor-pointer hidden group-hover:block">
+                <i class="fas fa-check-circle block"></i>
+            </div>
+            <div class="photo-mask absolute left-0 right-0 bottom-0 h-20 z-[1] bg-gradient-to-t from-black">
                 <div class="absolute left-2 bottom-2 text-white z-[2] w-[90%]">
                     <p class="text-sm truncate" title="__name__">__name__</p>
                     <p class="text-xs" title="__human_date__">__date__</p>
@@ -77,7 +84,7 @@
             };
             let gridConfigs = {
                 rowHeight : 180,
-                margins: 10,
+                margins: 20,
                 captions: false,
                 border: 10,
                 waitThumbnailsLoad: false,
@@ -87,8 +94,7 @@
                     return;
                 }
                 $.ajax({
-                    url: '',
-                    type: 'post',
+                    url: '{{ route('user.images') }}',
                     data: params,
                     beforeSend: function () {
                         $loading.text('加载中...').addClass('text-gray-400 cursor-not-allowed');
@@ -152,9 +158,12 @@
                 $(this).siblings('img').trigger('click');
             })
 
-            $photos.on('click', '.photo-select', function (e) {
+            $('#albums-grid, #photos-grid').on('click', 'a', function (e) {
                 e.stopPropagation();
-                console.log(11)
+                $(this).css('transform', 'scale(1)').toggleClass('selected');
+            }).on('mousedown', 'a', function () {
+                // TODO 鼠标按下动画
+            }).on('mouseup', 'a', function () {
             });
         </script>
     @endpush
diff --git a/routes/web.php b/routes/web.php
index 6fb7ab95..484f42ef 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -21,7 +21,8 @@ Route::post('/upload', [Controller::class, 'upload']);
 Route::group(['middleware' => ['auth']], function () {
     Route::get('/dashboard', [UserController::class, 'dashboard'])->name('dashboard');
     Route::get('/upload', fn () => view('upload'))->name('upload');
-    Route::any('/images', [ImageController::class, 'index'])->name('images');
+    Route::get('/images', [ImageController::class, 'index'])->name('images');
+    Route::get('/user/images', [ImageController::class, 'images'])->name('user.images');
 });
 
 require __DIR__.'/auth.php';