avantcorp / nova-notifications
Laravel Nova 工具,用于显示用户通知。
Requires
- php: >=7.1.0
- illuminate/contracts: >=5.6
- nesbot/carbon: ^2.00
Requires (Dev)
- phpunit/phpunit: ^7
Replaces
- mirovit/nova-notifications: 1.0.6
README
快速链接
先决条件
- 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
然后请将显示铃铛图标的部分视图放置在导航栏中,大致在 nova 的用户部分周围 - @include('nova-notifications::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 errro ->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) ->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>
演示
没有通知
没有打开的通知
通知计数
通知成功
通知信息
通知错误
打开通知
待办事项
- 添加翻译
- 添加自定义 Vue 布局文档
- 允许在通知中添加外部链接
- 添加对图标的支持
- 操作定制






