消息通知列表

app/Http/Controllers/NotificationsController.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class NotificationsController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function index()
+    {
+        // 获取登录用户的所有通知
+        $notifications = Auth::user()->notifications()->paginate(20);
+        // 标记为已读，未读数量清零
+        Auth::user()->markAsRead();
+        return view('notifications.index', compact('notifications'));
+    }
+}

app/Models/User.php

@@ -64,4 +64,11 @@ public function replies()
     {
         return $this->hasMany(Reply::class);
     }
+
+    public function markAsRead()
+    {
+        $this->notification_count = 0;
+        $this->save();
+        $this->unreadNotifications->markAsRead();
+    }
 }

public/css/app.css

@@ -20907,3 +20907,15 @@ body {
   font-size: 0.9em;
   color: #b3b3b3;
 }
+
+/* 消息通知 */
+.notification-badge .badge {
+  font-size: 12px;
+  margin-top: 14px;
+}
+.notification-badge .badge-secondary {
+  background-color: #EBE8E8 !important;
+}
+.notification-badge .badge-hint {
+  background-color: #d15b47 !important;
+}

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
     "/js/app.js": "/js/app.js?id=50991537ade597bb0c683d960e912178",
-    "/css/app.css": "/css/app.css?id=ebad5a98a33c69df5cf3638b95cc6817",
+    "/css/app.css": "/css/app.css?id=e15b6631a842d3dc5ba74f3e8b8ba30f",
     "/js/hotkeys.js": "/js/hotkeys.js?id=60b95061e721b635da02b5cc7792204b",
     "/js/module.js": "/js/module.js?id=1f0206730b87684b7ad654a458319014",
     "/js/simditor.js": "/js/simditor.js?id=e19ffe3d664de3d4228a9bd3573b4a6b",

resources/sass/app.scss

@@ -137,7 +137,6 @@ body {
     }
 }
 
-
 /* 回复列表 */
 .topic-reply {
   a {
@@ -149,3 +148,19 @@ body {
       color: #b3b3b3;
   }
 }
+
+/* 消息通知 */
+.notification-badge {
+  .badge {
+    font-size: 12px;
+    margin-top: 14px;
+  }
+
+  .badge-secondary {
+    background-color: #EBE8E8!important;
+  }
+
+  .badge-hint {
+    background-color: #d15b47 !important;
+  }
+}

resources/views/layouts/_header.blade.php

@@ -26,11 +26,17 @@
           <li class="nav-item"><a class="nav-link" href="{{ route('login') }}">登录</a></li>
           <li class="nav-item"><a class="nav-link" href="{{ route('register') }}">注册</a></li>
         @else
-        <li class="nav-item">
-          <a class="nav-link mt-1 mr-3" href="{{ route('topics.create') }}">
-            <i class="fa-solid fa-plus"></i>
-          </a>
-        </li>
+          <li class="nav-item">
+            <a class="nav-link mt-1 mr-3" href="{{ route('topics.create') }}">
+              <i class="fa-solid fa-plus"></i>
+            </a>
+          </li>
+
+          <li class="nav-item notification-badge">
+            <a class="nav-link ms-3 me-3 badge bg-secondary rounded-pill badge-{{ Auth::user()->notification_count > 0 ? 'hint' : 'secondary' }} text-white" href="{{ route('notifications.index') }}">
+              {{ Auth::user()->notification_count }}
+            </a>
+          </li>
 
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

resources/views/notifications/index.blade.php

@@ -0,0 +1,35 @@
+@extends('layouts.app')
+
+@section('title', '我的通知')
+
+@section('content')
+  <div class="container">
+    <div class="col-md-10 offset-md-1">
+      <div class="card ">
+
+        <div class="card-body">
+
+          <h3 class="text-xs-center">
+            <i class="far fa-bell" aria-hidden="true"></i> 我的通知
+          </h3>
+          <hr>
+
+          @if ($notifications->count())
+
+            <div class="list-unstyled notification-list">
+              @foreach ($notifications as $notification)
+                @include('notifications.types._' . Str::snake(class_basename($notification->type)))
+              @endforeach
+
+              {!! $notifications->render() !!}
+            </div>
+
+          @else
+            <div class="empty-block">没有消息通知！</div>
+          @endif
+
+        </div>
+      </div>
+    </div>
+  </div>
+@stop

resources/views/notifications/types/_topic_replied.blade.php

@@ -0,0 +1,24 @@
+<li class="d-flex @if ( ! $loop->last) border-bottom @endif">
+  <div>
+    <a href="{{ route('users.show', $notification->data['user_id']) }}">
+      <img class="img-thumbnail mr-3" alt="{{ $notification->data['user_name'] }}" src="{{ $notification->data['user_avatar'] }}" style="width:48px;height:48px;" />
+    </a>
+  </div>
+
+  <div class="flex-grow-1 ms-2">
+    <div class="mt-0 mb-1 text-secondary">
+      <a class="text-decoration-none" href="{{ route('users.show', $notification->data['user_id']) }}">{{ $notification->data['user_name'] }}</a>
+      评论了
+      <a class="text-decoration-none" href="{{ $notification->data['topic_link'] }}">{{ $notification->data['topic_title'] }}</a>
+
+      {{-- 回复删除按钮 --}}
+      <span class="meta float-end" title="{{ $notification->created_at }}">
+        <i class="far fa-clock"></i>
+        {{ $notification->created_at->diffForHumans() }}
+      </span>
+    </div>
+    <div class="reply-content">
+      {!! $notification->data['reply_content'] !!}
+    </div>
+  </div>
+</li>

routes/web.php

@@ -39,3 +39,5 @@
 Route::get('topics/{topic}/{slug?}', 'TopicsController@show')->name('topics.show');
 
 Route::resource('replies', 'RepliesController', ['only' => ['store', 'destroy']]);
+
+Route::resource('notifications', 'NotificationsController', ['only' => ['index']]);