From 8a80bcdfdc2b70a61e379a5a2c6ba1e7cf2946f1 Mon Sep 17 00:00:00 2001
From: XiaoLFeng <gm@x-lf.cn>
Date: Sun, 9 Jul 2023 12:01:03 +0800
Subject: [PATCH] =?UTF-8?q?AddFeature=EF=BC=9A=E5=8F=8B=E9=93=BE=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E6=98=BE=E7=A4=BA=E5=92=8CTooltips=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加了对于暗色的支持模式
添加了编辑界面颜色标记
添加了编辑窗口的颜色显示

Signed-off-by: XiaoLFeng <gm@x-lf.cn>
---
 app/Http/Controllers/Console/Link.php         | 15 ++++-
 .../views/console/friends-link/edit.blade.php | 55 +++++++++++++++----
 .../views/console/friends-link/list.blade.php | 31 ++++++++---
 resources/views/function/link.blade.php       |  5 +-
 4 files changed, 82 insertions(+), 24 deletions(-)

diff --git a/app/Http/Controllers/Console/Link.php b/app/Http/Controllers/Console/Link.php
index c3f8fc2..130fb5a 100644
--- a/app/Http/Controllers/Console/Link.php
+++ b/app/Http/Controllers/Console/Link.php
@@ -39,10 +39,14 @@ public function ViewEdit(Request $request, $userId): Application|Factory|View|Re
             ->orderBy('sort')
             ->get()
             ->toArray();
-        $this->data['blogColor'] = DB::table('blog_color')
+        $blogColor = DB::table('blog_color')
             ->orderBy('id')
             ->get()
             ->toArray();
+        for ($i = 0; !empty($blogColor[$i]->id); $i++) {
+            $blogColor[$i]->colorDarkType = str_replace('dark:', '', $blogColor[$i]->colorDarkType);
+        }
+        $this->data['blogColor'] = $blogColor;
         // 没有查询到执行删除
         if ($this->data['blog'][0] == null) return Response::redirectTo(route('console.friends-link.list'));
         return view('console.friends-link.edit', $this->data);
@@ -86,6 +90,15 @@ protected function ViewList(Request $request): Factory|View|Application|Redirect
             $this->data['blog'] = DB::select("SELECT * FROM xf_index.blog_link WHERE blogName LIKE '%$request->search%' OR blogUrl LIKE '%$request->search%' ORDER BY id");
         }
         $this->data = array_merge($this->data, $dataMarge);
+        $blogColor = DB::table('blog_color')
+            ->orderBy('id')
+            ->get()
+            ->toArray();
+        for ($i = 0; !empty($blogColor[$i]->id); $i++) {
+            $blogColor[$i]->colorLightType = str_replace('border-', 'ring-', $blogColor[$i]->colorLightType);
+            $blogColor[$i]->colorDarkType = str_replace('border-', 'ring-', $blogColor[$i]->colorDarkType);
+        }
+        $this->data['blogColor'] = $blogColor;
         return view('console.friends-link.list', $this->data);
     }
 
diff --git a/resources/views/console/friends-link/edit.blade.php b/resources/views/console/friends-link/edit.blade.php
index 20a5b82..35602de 100644
--- a/resources/views/console/friends-link/edit.blade.php
+++ b/resources/views/console/friends-link/edit.blade.php
@@ -33,9 +33,28 @@ class="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg s
         <div class="grid grid-cols-10 gap-4 mb-4">
             <div class="col-span-10 lg:hidden gird grid-cols-1">
                 <div class="items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow grid grid-cols-1">
-                    <p class="text-2xl text-center text-gray-400 dark:text-gray-500 pt-3"><i class="bi bi-person-check"></i> 当前友链 <b class="text-black dark:text-white"></b> 条</p>
-                    <p class="text-2xl text-center text-gray-400 dark:text-gray-500"><i class="bi bi-person-hearts"></i> 超级友链 <b class="text-black dark:text-white"></b> 条</p>
-                    <p class="text-2xl text-center text-gray-400 dark:text-gray-500 pb-3"><i class="bi bi-person-check-fill"></i> 待审友链 <b class="text-black dark:text-white"></b> 条</p>
+                    <p class="text-2xl text-center text-gray-400 dark:text-gray-500 pt-3"><i class="bi bi-person-check"></i> 当前友链 <b
+                            class="text-black dark:text-white"></b> 条</p>
+                    <p class="text-2xl text-center text-gray-400 dark:text-gray-500"><i class="bi bi-person-hearts"></i> 超级友链 <b
+                            class="text-black dark:text-white"></b> 条</p>
+                    <p class="text-2xl text-center text-gray-400 dark:text-gray-500 pb-3"><i class="bi bi-person-check-fill"></i> 待审友链 <b
+                            class="text-black dark:text-white"></b> 条</p>
+                </div>
+            </div>
+            <div class="block lg:hidden col-span-10">
+                <div class="items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow grid grid-cols-1">
+                    <div class="p-2 xl:p-8 grid grid-cols-2">
+                        <button type="submit" class="m-2 text-white bg-green-500 hover:bg-green-600 focus:ring-4 focus:outline-none focus:ring-blue-300
+                        font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-blue-800">
+                            <i class="bi bi-send"></i>
+                            <span class="ps-1">提交修改</span>
+                        </button>
+                        <button type="submit" class="m-2 text-white bg-red-500 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-blue-300
+                        font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-blue-800">
+                            <i class="bi bi-trash3"></i>
+                            <span class="ps-1">删除友链</span>
+                        </button>
+                    </div>
                 </div>
             </div>
             <div class="col-span-10 lg:col-span-7 items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow">
@@ -186,26 +205,34 @@ class="w-16 h-16 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500 me-2 s
             </div>
             <div class="sm:hidden lg:block col-span-3">
                 <div class="items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow grid grid-cols-1 mb-4">
-                    <div class="p-8 grid grid-cols-2">
-                        <button type="submit" class="m-2 text-white bg-green-500 hover:bg-green-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-blue-800">
+                    <div class="p-2 xl:p-8 grid grid-cols-2">
+                        <button type="submit" class="m-2 text-white bg-green-500 hover:bg-green-600 focus:ring-4 focus:outline-none focus:ring-blue-300
+                        font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-blue-800">
                             <i class="bi bi-send"></i>
                             <span class="ps-1">提交修改</span>
                         </button>
-                        <button type="submit" class="m-2 text-white bg-red-500 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-blue-800">
+                        <button type="submit" class="m-2 text-white bg-red-500 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-blue-300
+                        font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-blue-800">
                             <i class="bi bi-trash3"></i>
                             <span class="ps-1">删除友链</span>
                         </button>
                     </div>
                 </div>
                 <div class="items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow grid grid-cols-1 mb-4">
-                    <div class="p-8 grid grid-cols-1">
+                    <div class="p-2 md:p-6 xl:p-8 grid grid-cols-1">
                         <div class="text-lg font-bold mb-3">
                             <i class="bi bi-eye"></i>
                             <span class="ps-1">参考样式</span>
                         </div>
-                        <div class="max-w-4xl mb-3">
+                        <div class="max-w-4xl mb-3" data-tooltip-target="friend-{{ $blog[0]->id }}">
+                            <div id="friend-{{ $blog[0]->id }}" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium
+                                            text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                                {{ $blog[0]->blogDescription }}
+                                <div class="tooltip-arrow" data-popper-arrow></div>
+                            </div>
                             <div
-                                class="flex p-2 hover:bg-gray-100 bg-white border border-grey-200 rounded-lg shadow-lg sm:p-4 dark:bg-gray-800 dark:border-gray-700 grid-cols-2 m-1">
+                                class="flex p-2 hover:bg-gray-100 bg-white border-2 {{ $blogColor[$blog[0]->blogSetColor-1]->colorLightType }} rounded-lg
+                                shadow-lg sm:p-4 grid-cols-2 m-1">
                                 <img id="Lazy"
                                      class="w-16 h-16 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500 me-2 sm:me-4"
                                      src="{{ $blog[0]->blogIcon }}" alt="Bordered avatar">
@@ -215,9 +242,15 @@ class="w-16 h-16 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500 me-2 s
                                 </div>
                             </div>
                         </div>
-                        <div class="max-w-4xl">
+                        <div class="max-w-4xl" data-tooltip-target="friend-{{ $blog[0]->id }}">
+                            <div id="friend-{{ $blog[0]->id }}" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium
+                                            text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                                {{ $blog[0]->blogDescription }}
+                                <div class="tooltip-arrow" data-popper-arrow></div>
+                            </div>
                             <div
-                                class="flex p-2 hover:bg-gray-700 border rounded-lg shadow-lg sm:p-4 bg-gray-800 border-gray-700 grid-cols-2 m-1">
+                                class="flex p-2 hover:bg-gray-700 border-2 rounded-lg shadow-lg sm:p-4 bg-gray-800
+                                {{ $blogColor[$blog[0]->blogSetColor-1]->colorDarkType }} grid-cols-2 m-1">
                                 <img id="LazyDark"
                                      class="w-16 h-16 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500 me-2 sm:me-4"
                                      src="{{ $blog[0]->blogIcon }}" alt="Bordered avatar">
diff --git a/resources/views/console/friends-link/list.blade.php b/resources/views/console/friends-link/list.blade.php
index ab90e90..7cc41f9 100644
--- a/resources/views/console/friends-link/list.blade.php
+++ b/resources/views/console/friends-link/list.blade.php
@@ -33,20 +33,27 @@ class="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg s
         <div class="grid grid-cols-10 gap-4 mb-4">
             <div class="col-span-10 lg:hidden gird grid-cols-1">
                 <div class="items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow grid grid-cols-1">
-                    <p class="text-2xl text-center text-gray-400 dark:text-gray-500 pt-3"><i class="bi bi-person-check"></i> 当前友链 <b class="text-black dark:text-white">{{ $blogFriendsTotal }}</b> 条</p>
-                    <p class="text-2xl text-center text-gray-400 dark:text-gray-500"><i class="bi bi-person-hearts"></i> 超级友链 <b class="text-black dark:text-white">{{ $blogFriendsBest }}</b> 条</p>
-                    <p class="text-2xl text-center text-gray-400 dark:text-gray-500 pb-3"><i class="bi bi-person-check-fill"></i> 待审友链 <b class="text-black dark:text-white">{{ $blogFriendsCheck }}</b> 条</p>
+                    <p class="text-2xl text-center text-gray-400 dark:text-gray-500 pt-3"><i class="bi bi-person-check"></i> 当前友链 <b
+                            class="text-black dark:text-white">{{ $blogFriendsTotal }}</b> 条</p>
+                    <p class="text-2xl text-center text-gray-400 dark:text-gray-500"><i class="bi bi-person-hearts"></i> 超级友链 <b
+                            class="text-black dark:text-white">{{ $blogFriendsBest }}</b> 条</p>
+                    <p class="text-2xl text-center text-gray-400 dark:text-gray-500 pb-3"><i class="bi bi-person-check-fill"></i> 待审友链 <b
+                            class="text-black dark:text-white">{{ $blogFriendsCheck }}</b> 条</p>
                 </div>
             </div>
             <div class="col-span-10 lg:col-span-7 items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow">
                 <div class="px-10 py-5">
                     @if(!empty($blog) && empty($request->search))
                         <ul class="divide-y divide-gray-200 dark:divide-gray-700">
-                        @foreach($blog as $blogValue)
+                            @foreach($blog as $blogValue)
                                 <li class="py-3 sm:py-4">
                                     <div class="flex items-center space-x-4">
                                         <div class="flex-shrink-0">
-                                            <img id="Lazy" class="w-10 h-10 rounded-full" src="{{ asset('images/avatar.png') }}" data-src="{{ $blogValue->blogIcon }}" alt="Neil image">
+                                            <img id="Lazy"
+                                                 class="w-10 h-10 p-1 rounded-full ring-2 {{ $blogColor[$blogValue->blogSetColor-1]->colorLightType }}
+                                             {{ $blogColor[$blogValue->blogSetColor-1]->colorDarkType }} sm:me-4"
+                                                 src="{{ asset('images/avatar.png') }}" data-src="{{ $blogValue->blogIcon }}"
+                                                 alt="Bordered avatar">
                                         </div>
                                         <div class="flex-1 min-w-0">
                                             <p class="text-sm font-bold text-gray-900 truncate dark:text-white">
@@ -57,21 +64,27 @@ class="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg s
                                             </p>
                                         </div>
                                         <a href="?" type="button" class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
-                                            <a href="{{ route('console.friends-link.edit',$blogValue->id) }}" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-3 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                                            <a href="{{ route('console.friends-link.edit',$blogValue->id) }}" type="button"
+                                               class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-3 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                                                 <i class="bi bi-pencil"></i>
                                                 <span class="ps-1">编辑</span>
                                             </a>
                                         </a>
                                     </div>
                                 </li>
-                        @endforeach
+                            @endforeach
                         </ul>
                         <div class="justify-center items-center text-center">
                             <ul class="inline-flex items-center -space-x-px py-3">
                                 <li>
-                                    <a @if($request->page != 0)href="{{ route('console.friends-link.list','page='.$request->page-1) }}" @endif class="block px-3 py-2 ml-0 leading-tight text-gray-500 border border-gray-300 @if($request->page != 0)bg-white @else bg-gray-100 @endif rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+                                    <a @if($request->page != 0)href="{{ route('console.friends-link.list','page='.$request->page-1) }}"
+                                       @endif class="block px-3 py-2 ml-0 leading-tight text-gray-500 border border-gray-300 @if($request->page != 0)bg-white @else bg-gray-100 @endif rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                                         <span class="sr-only">Previous</span>
-                                        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
+                                        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                            <path fill-rule="evenodd"
+                                                  d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                                                  clip-rule="evenodd"></path>
+                                        </svg>
                                     </a>
                                 </li>
                                 @if($blogCount == 0)
diff --git a/resources/views/function/link.blade.php b/resources/views/function/link.blade.php
index 5bc93c4..28c312b 100644
--- a/resources/views/function/link.blade.php
+++ b/resources/views/function/link.blade.php
@@ -38,9 +38,8 @@ class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translat
                             </div>
                             <div
                                 class="flex p-2 hover:bg-gray-100 bg-white border-2 {{ $blogColor[$valueLink->blogSetColor-1]->colorLightType }} rounded-lg
-                                shadow-lg sm:p-4
-                                dark:bg-gray-800
-                                dark:hover:bg-gray-700 dark:border-gray-700 grid-cols-2 m-1">
+                                shadow-lg sm:p-4 dark:bg-gray-800 dark:hover:bg-gray-700 {{ $blogColor[$valueLink->blogSetColor-1]->colorDarkType }}
+                                grid-cols-2 m-1">
                                 <img id="Lazy"
                                      class="w-16 h-16 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500 me-2 sm:me-4"
                                      src="{{ asset('images/avatar.png') }}" data-src="{{ $valueLink->blogIcon }}"