logo

资源工具

概述

资源工具与 自定义工具 非常相似;但是,资源工具不会显示在 Nova 侧边栏中,而是显示在特定资源的详细信息页面上。与 Nova 工具一样,资源工具具有极高的可定制性,主要由一个完全由您控制的单文件 Vue 组件组成。

定义工具

可以使用 nova:resource-tool Artisan 命令生成资源工具。默认情况下,所有新工具都将放置在应用程序的 nova-components 目录中。使用 nova:resource-tool 命令生成工具时,传递给命令的工具名称应遵循 Composer vendor/package 格式。因此,如果我们正在构建一个 Stripe 检查器工具,我们可以运行以下命令

bash
php artisan nova:resource-tool acme/stripe-inspector

生成工具时,Nova 会提示您安装工具的 NPM 依赖项、编译其资产并更新应用程序的 composer.json 文件。所有自定义工具都作为 Composer "path" 存储库 与您的应用程序注册。

Nova 资源工具包含构建工具所需的所有脚手架。每个工具甚至包含自己的 composer.json 文件,并已准备好与世界分享,可以在 GitHub 或您选择的源代码控制提供商上分享。

注册工具

可以在资源的 fields 方法中注册 Nova 资源工具。此方法返回资源可用的字段和工具数组。要注册您的资源工具,请将您的工具添加到此方法返回的字段数组中

php
use Acme\StripeInspector\StripeInspector;

/**
 * Get the fields displayed by the resource.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function fields(NovaRequest $request)
{
    return [
        ID::make()->sortable(),

        StripeInspector::make(),
    ];
}

授权

如果您只想向特定用户公开某个工具,您可以在注册工具时调用canSee方法。canSee方法接受一个闭包,该闭包应该返回truefalse。闭包将接收传入的HTTP请求

php
use Acme\StripeInspector\StripeInspector;

/**
 * Get the fields displayed by the resource.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function fields(NovaRequest $request)
{
    return [
        ID::make('ID', 'id')->sortable(),

        StripeInspector::make()->canSee(function ($request) {
            return $request->user()->managesBilling();
        }),
    ];
}

工具选项

通常,您需要允许工具的使用者在运行时自定义工具上的配置选项。您可以通过在工具类上公开方法来做到这一点。这些方法可以调用工具底层的withMeta方法,将信息添加到工具的元数据中,这些元数据将在您的Tool.vue组件中可用。withMeta方法接受一个键值选项数组

php
<?php

namespace Acme\StripeInspector;

use Laravel\Nova\ResourceTool;

class StripeInspector extends ResourceTool
{
    /**
     * Get the displayable name of the resource tool.
     *
     * @return string
     */
    public function name()
    {
        return 'Stripe Inspector';
    }

    /**
     * Indicates that the Stripe inspector should allow refunds.
     *
     * @return $this
     */
    public function issuesRefunds()
    {
        return $this->withMeta(['issuesRefunds' => true]);
    }

    /**
     * Get the component name for the resource tool.
     *
     * @return string
     */
    public function component()
    {
        return 'stripe-inspector';
    }
}

访问工具选项

您的资源工具的Tool.vue组件接收几个Vue propsresourceNameresourceIdpanelresourceId属性包含工具当前附加到的资源的主键。您可以在向控制器发出请求时使用resourceIdpanel prop提供了对可能通过fields提供的任何工具选项的访问权限

js
const issuesRefunds = this.panel.fields[0].issuesRefunds;

动态选项

资源工具还提供了一种在不使用setter方法的情况下动态设置工具选项的功能,只需在注册工具时将所需的选项作为方法调用即可。如果带参数调用,则该参数将被设置为选项的值

php
use Acme\StripeInspector\StripeInspector;

/**
 * Get the fields displayed by the resource.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function fields(NovaRequest $request)
{
    return [
        ID::make('ID', 'id')->sortable(),

        StripeInspector::make()->issuesRefunds(),
    ];
}

构建工具

Nova 生成的每个工具都包含自己的服务提供者和“工具”类。以stripe-inspector工具为例,工具类将位于src/StripeInspector.php

工具的服务提供者也位于工具的src目录中,并在工具的composer.json文件的extra部分中注册,以便由 Laravel 自动加载。

路由

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

此文件中的所有路由都由工具的ToolServiceProvider自动定义在路由组中。路由组指定该组中的所有路由都应接收/nova-vendor/tool-name前缀,其中tool-name是工具的“kebab-case”名称。例如,/nova-vendor/stripe-inspector。您可以随意修改此路由组定义,但请注意确保您的 Nova 工具能够与其他 Nova 包共存。

路由授权

在为您的工具构建路由时,您应该始终使用 Laravel 门禁或策略为这些路由添加授权。

资产

当 Nova 生成您的工具时,会为您生成 resources/jsresources/css 目录。这些目录包含您的工具的 JavaScript 和 CSS。这些目录中主要关注的文件是:resources/js/components/Tool.vueresources/css/tool.css

Tool.vue 文件是一个单文件 Vue 组件,包含您的工具的前端。您可以从这个文件自由构建您的工具。您的工具可以使用 Axios 通过 Nova.request 发出 HTTP 请求。

注册资产

您的 Nova 工具的服务提供者会注册您的工具的编译后的资产,以便它们可以被 Nova 前端使用。

php
use Laravel\Nova\Nova;
use Laravel\Nova\Events\ServingNova;

/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    $this->app->booted(function () {
        $this->routes();
    });

    Nova::serving(function (ServingNova $event) {
        Nova::script('stripe-inspector', __DIR__.'/../dist/js/tool.js');
        Nova::style('stripe-inspector', __DIR__.'/../dist/css/tool.css');
    });
}

JavaScript 引导和路由

您的组件在 resources/js/tool.js 文件中被引导和注册。您可以根据需要自由修改此文件或在此处注册其他组件。

编译资产

您的 Nova 资源工具包含一个 webpack.mix.js 文件,该文件是在 Nova 创建您的工具时生成的。您可以使用 NPM 的 devprod 命令构建您的工具。

bash
# Compile your assets for local development...
npm run dev

# Compile and minify your assets...
npm run prod

此外,您还可以运行 NPM 的 watch 命令,以便在资产发生更改时自动编译它们。

bash
npm run watch