Laravel Nova 工具

概览

当你想用 Nova 还没有提供的功能时，你可以向 Nova 的侧边栏添加自定义工具。Nova 工具的定制性极强，因为他们主要都是由 Vue 的单文件组件构成。在 Vue 组件里，你可以向应用中任意的控制器发送 HTTP 请求。

定义工具

自定义工具可以通过 nova:tool 命令生成。所有生成的工具都默认放在应用的 nova-components 目录中。当使用 nova:tool 命令生成工具时，工具的名称必须遵循 Composer 的 vendor/package 格式。比如我们要生成一个价格跟踪工具，我们可以执行如下命令：

artisan nova:tool acme/price-tracker

当生成工具时，Nova 会提示你安装工具的 NPM 依赖，编译资源，并且更新应用的 composer.json 文件。所有自定义的工具都会作为 Composer 的「path」注册到你的应用中。

Nova 生成工具时已经包含了所有必要的东西。每个工具都有自己的 composer.json 文件，他们随时可以在 Github 或其他源码管理网站上分享。

注册工具

Nova 工具要在应用的 NovaServiceProvider 中注册。服务提供者里包含一个 tools 方法，该方法返回一个工具数组。只要把你的工具添加到工具列表中即可完成注册。假如你创建了一个名为 acme/price-tracker 的 Nova 工具，你可以像下面这样来注册：

use Acme\PriceTracker\PriceTracker;

/**
 * 获取展示在 Nova 侧边栏中的卡片。
 *
 * @return array
 */
public function tools()
{
    return [
        new PriceTracker,
    ];
}

构建工具

每个 Nova 生成的工具都包含有各自的服务提供者和「tool」类。以 price-tracker 工具为例，该工具的类文件位于 src/PriceTracker.php 。像上文提到的那样，该工具类必须在 NovaServiceProvider 中注册。

工具的服务提供者位于工具的 src 目录，并且已经注册进了工具的 composer.json 文件中，因此 Laravel 框架会自动加载该工具类。

授权

如果你只想把工具暴露给特定的用户，你可以在工具注册时链式调用 canSee 方法。canSee 方法接收一个返回值为 true 或 false 的闭包函数。该闭包函数的参数为 HTTP 请求：

use Acme\PriceTracker\PriceTracker;

/**
 * 获取展示在 Nova 侧边栏里的卡片。
 *
 * @return array
 */
public function tools()
{
    return [
        (new PriceTracker)->canSee(function ($request) {
            return false;
        }),
    ];
}

路由

通常，你需要定义工具调用的 Laravel 路由。Nova 生成工具时会创建一个 routes/api.php 的路由文件。你可以使用它定义任何工具所需要的路由。

它所有路由都是通过工具的 ToolServiceProvider 自动定义在路由组里面。路由组指定所有组内路由接收一个 /nova-vendor/tool-name 前缀，tool-name 是工具 "kebab-case" 的名字 。举例： /nova-vendor/price-tracker 。你可以自由定义这个路由组，但是请注意要确保你的 Nova 工具和其他 Nova 包兼容。

路由授权

你的 Nova 工具会生成一个 Authorize 中间件。它在执行任意的请求到达路由组之前，就自动判断授权用户是否可见此工具。另外，你可以按需自由修改这个中间件。

导航

Nova 工具类包含一个 renderNavigation 方法。该方法返回一个渲染工具侧边栏链接的视图。当然，工具生成时就已经创建好了一个默认的导航。如果需要的话你可以自定义该视图：

/**
 * 构建工具的导航链接视图。
 *
 * @return \Illuminate\View\View
 */
public function renderNavigation()
{
    return view('price-tracker::navigation');
}

资源

Nova 生成工具时，resources/js 和 resources/sass 目录也一并创建了。这些目录包含了工具的 JavaScript 脚本和 Sass 样式，其中的主要文件是：resources/js/components/Tool.vue 和 resources/sass/tool.scss。

Tool.vue 是一个 Vue 单文件组件，你可以在里面做任意修改。在工具里你可以通过全局的 Axios 发送 HTTP 请求。此外，moment.js 和 underscore.js 库也是全局可访问的。

注册资源

Nova 工具类包含了一个 boot 方法，当工具存在或者注册后，这个方法会被执行。默认情况下，该方法会把你的工具已编译的资源都注册上，因此在 Nova 的前端就可以使用了。

/**
 *  工具注册时需要执行的任务
 * 
 * @return void
 */
public function boot()
{
    Nova::script('price-tracker', __DIR__.'/../dist/js/tool.js');
    Nova::style('price-tracker', __DIR__.'/../dist/css/tool.css');
}

JavaScript Bootstrap & 路由

你的组件会被引导启动并且前端路由注册在 resources/js/tool.js 文件中。你可以按需求自由地修改这个文件或者注册额外的组件。

编译资源

Nova 在创建工具时也创建了一个 webpack.mix.js 文件。你可以使用 NPM dev 和 prod 命令构建工具：

// 为本地开发环境编译资源...
npm run dev

// 编译并压缩资源...
npm run prod

此外，你可以执行 NPM watch 命令来实现资源文件修改后的自动编译：

npm run watch