mirovit/nova-notifications

一个用于显示用户通知的 Laravel Nova 工具。


README

Build Status Maintainability Test Coverage

快速链接

先决条件

  • Laravel Nova 应用
  • Laravel 广播已配置
  • Laravel Echo
  • Laravel 通知

安装

使用 composer 安装 composer require mirovit/nova-notifications

Laravel 会自动注册服务提供者。您需要将工具与 Laravel Nova 注册。

    public function tools()
    {
        return [
            // ...
            \Mirovit\NovaNotifications\NovaNotifications::make(),
        ];
    }

确保您已在 routes/channels.php 或存储此逻辑的位置中对用户通道进行了身份验证

Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
    return (int)$user->id === (int)$id;
});

Laravel Echo 默认没有与 Nova 捆绑,因此您需要为前端设置该功能。为此,请按照以下步骤操作

  • 安装 Echo
  • npm install
  • 在 resources/js 中创建一个 admin.js 文件
import Echo from 'laravel-echo';

// Sample instance with Pusher
window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});
  • 添加到您的 webpack.mix.js
mix.js('resources/js/admin.js', 'public/js');
  • 添加到您的 Nova 布局.blade.php
// ...
<script src="{{ mix('app.js', 'vendor/nova') }}"></script>
<script src="{{ mix('js/admin.js') }}"></script>

此外,该包假设模型命名空间为 App\Models,如果您的项目不正确,则前后端之间的认证将无法工作,并且通知不会显示,除非刷新页面。有关如何修复此问题的说明,请参阅 配置 部分。

最后一步是手动发布 Nova 的布局文件,如果您还没有这样做的话。 cp vendor/laravel/nova/resources/views/layout.blade.php resources/views/vendor/nova/layout.blade.php

然后放置显示导航栏中铃声图标的部分视图

views/vendor/nova/layout.blade.php 中查找

<dropdown class="ml-auto h-9 flex items-center dropdown-right">
    @include('nova::partials.user')
</dropdown>

替换为

@include('nova-notifications::dropdown')

<dropdown class="ml-8 h-9 flex items-center dropdown-right">
    @include('nova::partials.user')
</dropdown>

使用

从 Laravel 触发通知。示例通知

<?php

namespace App\Notifications;

use App\User;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\BroadcastMessage;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Notifications\Notification;

class Created extends Notification
{
    use Queueable;

    private $user;


    /**
     * Create a new notification instance.
     *
     * @param User $user
     */
    public function __construct(User $user)
    {
        $this->user = $user;
    }

    /**
     * Get the notification's delivery channels.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function via($notifiable)
    {
        return ['database', 'broadcast'];
    }

    /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function toArray($notifiable)
    {
        return \Mirovit\NovaNotifications\Notification::make()
            ->info('A new user was created.')
            ->subtitle('There is a new user in the system - ' . $this->user->name . '!')
            ->routeDetail('users', $this->user->id)
            ->toArray();

    }
}

可用方法

Notification::make($title = null, $subtitle = null)
    // Sets title
    ->title(string $value)
    // Sets subtitle
    ->subtitle(string $subtitle)
    // Link and route work similarly. Route has precedence over link, if you define both on an instance. You should generally use a one of them.
    ->link(string $url, bool $external = false)
    // Route to internal resource
    ->route(string $name, string $resourceName, $resourceId = null)
    // Helper methods for resource routing
    ->routeIndex(string $resourceName)
    ->routeCreate(string $resourceName)
    ->routeEdit(string $resourceName, $resourceId)
    ->routeDetail(string $resourceName, $resourceId)
    // Notification level - info, success or error
    
    ->level(string $value)
    // Helpers to set title and level with one call
    ->info(string $value)
    ->success(string $value)
    ->error(string $value)
    // Set custom date for notification, defaults to current datetime
    ->createdAt(Carbon $value)
    // Add icon classes to be applied, ex: fas fa-info
    ->icon(string $value)
    ->showMarkAsRead(bool $value = true)
    ->showCancel(bool $value = true)
    // URL to the sound that the notification should make
    ->sound('https://url-to-a-sound-file')
    // If `play_sound` is set to true in your config, every notification will play the default sound. You can disable the sound per notification here.
    ->playSound(bool $value = true)
    // Whether to show the toasted popup notification
    ->displayToasted(bool $value = true)
    // Alias to invoke the displayToasted() with false
    ->hideToasted()
    ->toArray();

图标

为了显示图标,您需要确保它们已在您的项目中导入。您可以使用任何图标字体,例如 Font Awesome

FA 的示例用法:在 layout.blade.php 中添加 FA 的 CSS。

然后只需在通知上添加 ->icon() 方法并指定渲染图标的类 fas fa-info

配置

该包已发布一个可选的配置文件。如果您使用不同的模型命名空间约定或希望覆盖包提供的默认控制器,则需要将配置发布到您的项目中。

请注意,该包假设的默认模型命名空间是 App\Models,因此如果您使用另一个命名空间,则需要调整 API 和前端之间的认证。

运行 php artisan vendor:publish 并选择对应于 Mirovit\NovaNotifications\NovaNotificationsServiceProvider 的数字或选择全部发布。

翻译

该包已翻译成英文,如果需要额外的翻译,可以按照 Laravel Nova 文档中的说明添加。

有人多次提到的问题是,对于人类来说,差异仅在英语中显示,而不管应用程序的区域设置如何。您需要将您的应用程序中的 moment.js 区域设置设置为适当的区域设置,这并非本包的责任。

找到您的布局文件 - resources/views/vendor/nova/layout.blade.php

查找

<!-- Build Nova Instance -->
<script>
    window.Nova = new CreateNova(config)
</script>

并替换为

<!-- Build Nova Instance -->
<script>
    window.Nova = new CreateNova(config)
    moment.locale('es-es') // this can come from a config setting, just an example of how to set it
</script>

演示

无通知

No notifications

无已打开的通知

No notifications open

通知计数

Notifications count

通知成功

Notification success

通知信息

Notification info

通知错误

Notification error

打开通知

Notifications open

待办事项

  • 添加翻译
  • 为自定义Vue布局添加文档
  • 允许在通知中使用外部链接
  • 添加图标支持
  • 操作自定义