From 1510389709ae80311599741c49be823ae6eb7d0f Mon Sep 17 00:00:00 2001
From: Wisp X <wisp-x@qq.com>
Date: Fri, 18 Feb 2022 13:58:27 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=94=B9=E8=BF=9B=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Controllers/Admin/ImageController.php     |  1 -
 app/Models/User.php                           |  2 +
 public/css/app.css                            |  8 ++
 resources/views/admin/image/index.blade.php   |  2 +-
 resources/views/admin/user/index.blade.php    | 90 ++++++++++++++++++-
 5 files changed, 100 insertions(+), 3 deletions(-)

diff --git a/app/Http/Controllers/Admin/ImageController.php b/app/Http/Controllers/Admin/ImageController.php
index d56910dc..574d4577 100644
--- a/app/Http/Controllers/Admin/ImageController.php
+++ b/app/Http/Controllers/Admin/ImageController.php
@@ -20,7 +20,6 @@ class ImageController extends Controller
         }, 'album', 'group', 'strategy'])->latest()->paginate(40);
         $images->getCollection()->each(function (Image $image) {
             $image->append('url', 'pathname');
-            $image->user->append('avatar');
             $image->album?->setVisible(['name']);
             $image->group?->setVisible(['name']);
             $image->strategy?->setVisible(['name']);
diff --git a/app/Models/User.php b/app/Models/User.php
index 97599679..a7b8ff73 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -83,6 +83,8 @@ class User extends Authenticatable implements MustVerifyEmail
         'email_verified_at' => 'datetime',
     ];
 
+    protected $appends = ['avatar'];
+
     protected static function booted()
     {
         static::creating(function (self $user) {
diff --git a/public/css/app.css b/public/css/app.css
index 6f8b80e2..b00cbff4 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1789,6 +1789,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(71 85 105 / var(--tw-text-opacity));
 }
+.text-teal-600 {
+  --tw-text-opacity: 1;
+  color: rgb(13 148 136 / var(--tw-text-opacity));
+}
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -2008,6 +2012,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(99 102 241 / var(--tw-text-opacity));
 }
+.hover\:text-teal-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(19 78 74 / var(--tw-text-opacity));
+}
 .focus\:z-10:focus {
   z-index: 10;
 }
diff --git a/resources/views/admin/image/index.blade.php b/resources/views/admin/image/index.blade.php
index ffa6363e..3e1cf06d 100644
--- a/resources/views/admin/image/index.blade.php
+++ b/resources/views/admin/image/index.blade.php
@@ -5,7 +5,7 @@
         @if($images->isNotEmpty())
             <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-2">
                 @foreach($images as $image)
-                <div data-json='@json($image)' class="item relative flex flex-col items-center justify-center overflow-hidden rounded-md cursor-pointer group">
+                <div data-json='{{ $image->toJson() }}' class="item relative flex flex-col items-center justify-center overflow-hidden rounded-md cursor-pointer group">
                     @if($image->extension === 'gif')
                         <span class="absolute top-1 left-1 z-[1] bg-white rounded-md text-sm px-1 py-0">Gif</span>
                     @endif
diff --git a/resources/views/admin/user/index.blade.php b/resources/views/admin/user/index.blade.php
index 6e09dd6a..ff1d0ef0 100644
--- a/resources/views/admin/user/index.blade.php
+++ b/resources/views/admin/user/index.blade.php
@@ -15,7 +15,7 @@
 
         <x-table :columns="['ID', '邮箱', '名称', '角色组', '总容量', '剩余容量', '图片数量', '相册数量', '状态', '操作']">
             @foreach($users as $user)
-            <tr data-id="{{ $user->id }}">
+            <tr data-id="{{ $user->id }}" data-json='{{ $user->toJson() }}'>
                 <td class="px-6 py-4 whitespace-nowrap">{{ $user->id }}</td>
                 <td class="px-6 py-4 whitespace-nowrap">{{ $user->name }}</td>
                 <td class="px-6 py-4 whitespace-nowrap">{{ $user->email }}</td>
@@ -30,6 +30,7 @@
                 <td class="px-6 py-4 whitespace-nowrap">{{ $user->album_num }}</td>
                 <td class="px-6 py-4 whitespace-nowrap">{{ $user->status ? '正常' : '冻结' }}</td>
                 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
+                    <a href="javascript:void(0)" data-operate="detail" class="text-teal-600 hover:text-teal-900">详细</a>
                     <a href="{{ route('admin.user.edit', ['id' => $user->id]) }}" class="text-indigo-600 hover:text-indigo-900">编辑</a>
                     @if(Auth::user()->id != $user->id)
                         <a href="javascript:void(0)" data-operate="delete" class="text-red-600 hover:text-red-900">删除</a>
@@ -47,8 +48,95 @@
         @endif
     </div>
 
+    <x-modal>
+        <div id="modal-content"></div>
+    </x-modal>
+
+    <script type="text/html" id="user-tpl">
+        <div class="flex w-full items-center justify-center py-4">
+            <img class="rounded-full h-24 w-24" src="__avatar__">
+        </div>
+        <div class="relative rounded-md bg-white mb-8 overflow-hidden">
+            <dl>
+                <div class="bg-white px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt class="text-sm font-medium text-gray-500">用户名</dt>
+                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 truncate">__name__</dd>
+                </div>
+            </dl>
+            <dl>
+                <div class="bg-gray-50 px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt class="text-sm font-medium text-gray-500">邮箱</dt>
+                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 truncate">__email__</dd>
+                </div>
+            </dl>
+            <dl>
+                <div class="bg-white px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt class="text-sm font-medium text-gray-500">总容量</dt>
+                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 truncate">__capacity__</dd>
+                </div>
+            </dl>
+            <dl>
+                <div class="bg-gray-50 px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt class="text-sm font-medium text-gray-500">剩余容量</dt>
+                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 truncate">__surplus_capacity__</dd>
+                </div>
+            </dl>
+            <dl>
+                <div class="bg-white px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt class="text-sm font-medium text-gray-500">图片数量</dt>
+                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 truncate">__image_num__</dd>
+                </div>
+            </dl>
+            <dl>
+                <div class="bg-gray-50 px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt class="text-sm font-medium text-gray-500">相册数量</dt>
+                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 truncate">__album_num__</dd>
+                </div>
+            </dl>
+            <dl>
+                <div class="bg-white px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt class="text-sm font-medium text-gray-500">注册 IP</dt>
+                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 truncate">__registered_ip__</dd>
+                </div>
+            </dl>
+            <dl>
+                <div class="bg-gray-50 px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt class="text-sm font-medium text-gray-500">邮箱验证时间</dt>
+                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 truncate">__email_verified_at__</dd>
+                </div>
+            </dl>
+            <dl>
+                <div class="bg-white px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt class="text-sm font-medium text-gray-500">注册时间</dt>
+                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 truncate">__created_at__</dd>
+                </div>
+            </dl>
+        </div>
+    </script>
+
     @push('scripts')
         <script>
+            let modal = Alpine.store('modal');
+
+            $('[data-operate="detail"]').click(function () {
+                let user = $(this).closest('tr').data('json');
+                let html = $('#user-tpl').html()
+                    .replace(/__avatar__/g, user.avatar)
+                    .replace(/__name__/g, user.name)
+                    .replace(/__email__/g, user.email)
+                    .replace(/__capacity__/g, utils.formatSize(user.capacity * 1024))
+                    .replace(/__surplus_capacity__/g, utils.formatSize(user.images_sum_size * 1024))
+                    .replace(/__image_num__/g, user.image_num)
+                    .replace(/__album_num__/g, user.album_num)
+                    .replace(/__registered_ip__/g, user.registered_ip || '-')
+                    .replace(/__status__/g, user.status === 1 ? '<span class="text-green-500">正常</span>' : '<span class="text-red-500">冻结</span>')
+                    .replace(/__email_verified_at__/g, user.email_verified_at || '-')
+                    .replace(/__created_at__/g, user.created_at);
+
+                $('#modal-content').html(html);
+
+                modal.open = true;
+            });
             $('[data-operate="delete"]').click(function () {
                 Swal.fire({
                     title: `确认删除用户【${$(this).closest('tr').find('td.name').text()}】吗?`,