卡片 ​

概述 ​

卡片与资源工具类似，但都是小型、微型工具，通常显示在仪表板、资源索引或资源详情页面的顶部。事实上，如果您使用过 Nova 指标，就已经见过 Nova 卡片了。自定义 Nova 卡片允许你构建自己的指标工具。

定义卡片 ​

可以使用 nova:card Artisan 命令生成卡片。默认情况下，所有新卡片都将放置在应用程序的 nova-components 目录中。使用 nova:card 命令生成卡片时，传递给该命令的卡片名称应遵循 Composer vendor/package 格式。因此，如果我们要创建流量分析卡，可以运行以下命令：

php artisan nova:card acme/analytics

生成卡片时，Nova 会提示你安装卡片的 NPM 依赖项、编译其资产并更新应用程序的 composer.json 文件。所有自定义卡片都会在应用程序中注册为 Composer 「路径」存储库。

Nova 卡片包含构建卡片所需的所有脚手架。每张卡片甚至都包含自己的 composer.json 文件，可随时在 GitHub 或你选择的源控制提供商上与全世界共享。

注册卡片 ​

Nova 卡片可以在资源的 cards 方法中注册。该方法返回资源可用的卡片数组。要注册卡片，请将卡片添加到此方法返回的卡片数组中：

use Acme\Analytics\Analytics;

/**
 * 获取资源可用的卡片。
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function cards(NovaRequest $request)
{
    return [new Analytics];
}

授权 ​

如果你只想向某些用户公开特定的卡片，可以在注册卡片时调用 canSee 方法。canSee 方法接受一个闭包，该闭包应返回 true 或 false。闭包将接收传入的 HTTP 请求：

use Acme\Analytics\Analytics;

/**
 * 获取资源可用的卡片。
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function cards(NovaRequest $request)
{
    return [
        (new Analytics)->canSee(function ($request) {
            return false;
        }),
    ];
}

卡片选项 ​

通常情况下，你需要允许卡的用户自定义卡上的运行时配置选项。为此，你可以在卡类上公开一些方法。这些方法可调用卡片的底层 withMeta 方法，以向卡片的元数据中添加信息，这些信息将在你的 Card.vue 组件中提供。withMeta 方法接受一个 键/值 选项数组：

<?php

namespace Acme\Analytics;

use Laravel\Nova\Card;

class Analytics extends Card
{
    /**
     * 卡片宽度 (1/3, 2/3, 1/2, 1/4, 3/4, or full).
     *
     * @var string
     */
    public $width = '1/3';
    
    /**
     * 卡片的高度策略（固定或动态）。 (fixed or dynamic).
     *
     * @var string
     */
    public $height = 'fixed';

    /**
     * 表示分析应显示当前访客。
     *
     * @return $this
     */
    public function currentVisitors()
    {
        return $this->withMeta(['currentVisitors' => true]);
    }

    /**
     * 获取卡片的组件名称。
     *
     * @return string
     */
    public function component()
    {
        return 'analytics';
    }
}

注册自定义卡片后，不要忘记实际调用你定义的任何自定义选项方法：

(new Acme\Analytics\Analytics)->currentVisitors()

获取卡片选项 ​

你的卡片的 Card.vue 组件会收到一个 card Vue prop。该属性提供了对卡片上可能存在的任何卡片选项的访问：

const currentVisitors = this.card.currentVisitors;

创建卡片 ​

Nova 生成的每张卡片都包含自己的服务提供商和「卡片」类。以 analytics 卡为例，该卡类将位于 src/Analytics.php。

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

路由 ​

通常，你需要定义 Laravel 路由，通过 Nova.request 由你的卡片调用。Nova 在生成你的卡片时，会创建一个 routes/api.php 路由文件。如有需要，你可使用该文件定义你的卡所需的任何路由。

该文件中的所有路由都由你的 CardServiceProvider 自动定义在路由组内。路由组指定组内的所有路由都应使用 /nova-vendor/card-name 前缀，其中 card-name 是卡的 「kebab-case 」名称。例如，/nova-vendor/analytics。你可以自由修改路由组定义，但要注意确保你的 Nova 卡能与其他 Nova 软件包共存。

资源 ​

Nova 生成卡片时，会为你生成 resources/js 和 resources/css 目录。这些目录包含卡片的 JavaScript 和 CSS 样式表。这些目录中最重要的文件是 resources/js/components/Card.vue 和 resources/css/card.css。

Card.vue 文件是一个包含卡片前端的单文件 Vue 组件。在该文件中，你可以随意构建您的卡片。你的卡片可通过 Nova.request 使用 Axios 发送 HTTP 请求。

注册资源 ​

你的 Nova 卡服务提供者会注册你的卡的编译资源，以便 Nova 前端可以使用这些资源：

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

/**
 * 引导任何应用服务。
 *
 * @return void
 */
public function boot()
{
    $this->app->booted(function () {
        $this->routes();
    });

    Nova::serving(function (ServingNova $event) {
        Nova::script('{{ component }}', __DIR__.'/../dist/js/card.js');
        Nova::style('{{ component }}', __DIR__.'/../dist/css/card.css');
        Nova::translations(__DIR__.'/../resources/lang/en/card.json');
    });
}

编译资源 ​

Nova 卡片包含一个 webpack.mix.js 文件，该文件在 Nova 创建工具时生成。你可以使用 NPM dev 和 prod 命令构建你的工具：

# 为本地开发编译资源...
npm run dev

# 编译并最小化资源...
npm run prod

此外，你还可以运行 NPM watch 命令，在资源发生变化时自动编译它们：

npm run watch