logo

卡片 ​

概述 ​

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

定义卡片 ​

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

bash
php artisan nova:card acme/analytics

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

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

注册卡片 ​

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

php
use Acme\Analytics\Analytics;

/**
 * Get the cards available for the resource.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function cards(NovaRequest $request)
{
    return [new Analytics];
}

授权 ​

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

php
use Acme\Analytics\Analytics;

/**
 * Get the cards available for the resource.
 *
 * @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
<?php

namespace Acme\Analytics;

use Laravel\Nova\Card;

class Analytics extends Card
{
    /**
     * The width of the card (1/3, 2/3, 1/2, 1/4, 3/4, or full).
     *
     * @var string
     */
    public $width = '1/3';
    
    /**
     * The height strategy of the card (fixed or dynamic).
     *
     * @var string
     */
    public $height = 'fixed';

    /**
     * Indicates that the analytics should show current visitors.
     *
     * @return $this
     */
    public function currentVisitors()
    {
        return $this->withMeta(['currentVisitors' => true]);
    }

    /**
     * Get the component name for the card.
     *
     * @return string
     */
    public function component()
    {
        return 'analytics';
    }
}

注册自定义卡片后，别忘了实际调用你定义的任何自定义选项方法

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

访问卡片选项 ​

你的卡片的 Card.vue 组件接收一个 card Vue prop。此属性提供对卡片上可能可用的任何卡片选项的访问权限

js
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 包共存。

路由授权

构建卡片的路由时，你应该始终使用 Laravel 门禁或策略为这些路由添加授权。

资产 ​

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

Card.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('{{ component }}', __DIR__.'/../dist/js/card.js');
        Nova::style('{{ component }}', __DIR__.'/../dist/css/card.css');
        Nova::translations(__DIR__.'/../resources/lang/en/card.json');
    });
}

JavaScript 引导和路由

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

编译资源 ​

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

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

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

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

bash
npm run watch