卡片

1.0

1.0

• 概述
• 定义卡片
• 注册卡片
  • 卡片选项
• 创建卡片
  • 授权
  • 路由
  • 自定义

概述

卡片类似于资源工具，但却是一种更小、更微型的工具，它们可以被放置在仪表盘中，用来显示或提示各类资源的简要信息或明细信息。事实上，如果你已经使用过 Nova metrics 的话，说明你已经尝试过卡片。同时，可以通过自定义卡片来创建属于你自己的资源工具。

定义卡片

卡片可以使用 Artisan 命令 nova:card 来创建。默认情况下，所有新创建的卡片都将被保持在你应用根目录下的 nova-components 文件夹中。当使用 Artisan 命令 nova:card 创建卡片时，所传递的卡片名称因遵从 Composer vendor/package 格式。因此，如果我们要创建一个叫『流量分析』的卡片时，我们应该运行如下命令：

artisan nova:card acme/analytics

生成卡片时, Nova 讲提示你去安装卡片所需要的npm依赖包, 编译资源, 和更新项目的 composer.json 文件. 所有的自定义卡片都会通过 Composer "path" 仓库注册到你的应用。

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

注册卡片

Nova 卡片可以在你的 Resource 类中的 cards 方法中注册。此方法返回资源可用的卡片数组。将你的卡片添加到由这个方法返回的卡片数组中，对卡片进行注册:

use Acme\Analytics\Analytics;

/**
 * 获取可用的资源卡片.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function cards(Request $request)
{
    return [new Analytics];
}

卡片选项

通常，您需要允许您卡片的消费者自定义卡上的运行时配置选项。您可以通过在您的card类中公开方法来实现这一点。这些方法可能会调用卡片的底层withMeta方法来添加信息到卡片的元数据中，这些元数据将应用在您的Card.vue的组件。withMeta方法接受一个 键/值 选项数组：

<?php

namespace Acme\Analytics;

use Laravel\Nova\Card;

class Analytics extends Card
{
    /**
     * 卡片的宽度(1/3, 1/2, or full)。
     *
     * @var string
     */
    public $width = '1/3';

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

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

构建卡片

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

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

授权

如果您只想向特定用户公开指定的卡片，可以将canSee方法链到您指定的卡片上。canSee方法接受一个闭包，该闭包应该返回true或false。闭包将接收传入的HTTP请求：

use Acme\Analytics\Analytics;

/**
 * 获得可用的资源卡片.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function cards(Request $request)
{
    return [
        (new Analytics)->canSee(function ($request) {
            return false;
        }),
    ];
}

路由

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

此文件中的所有路由都由您卡片的 CardServiceProvider 在路由组内自动定义。路由组指定组内所有路由都应接收 /nova-vendor/card-name 前缀，其中 card-name 是您卡片的「kebab-case」名称。例如，/nova-vendor/analytics。您可以自由的修改此路由组的定义， 但请务必确保您的 Nova 卡片与其他 Nova 包共存。

路由授权

当为您的卡片创建路由时，您应该 始终 使用 Laravel 的 gates 或 policies 为这些路由添加授权。

Assets

当 Nova 生成卡片时，会为您生成 resources/js 和 resources/sass 目录。这些目录包含您的卡片的 JavaScript 和 Sass 样式表。这些目录中最感兴趣的文件主要是： resources/js/components/Card.vue 和 resources/sass/card.scss。

Card.vue 文件是一个包含卡片前端的单文件 Vue 组件。从这文件中，您可以随意构建你想要的卡片。您的卡片可以使用 Axios 发起 HTTP 请求，它是全局可用的。此外，moment.js 和 underscore.js 库也是全局可用。

卡片属性

您卡片的 Card.vue 组件接收一个 卡片 Vue prop。此属性提供对任何可用卡片 选项 的访问：

const issuesRefunds = this.card.issuesRefunds;

注册 Assets

Nova 卡片的服务提供注册您卡片编译的 assets，以便 Nova 前端可以使用它们：

/**
 * 引导任何应用程序服务。
 *
 * @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');
    });
}

JavaScript 引导 & 路由

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

编译资源

Nova 创建卡片的同时生成一个 webpack.mix.js 文件。你可以使用 NPM dev 和 prod 命令构建卡片：

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

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

此外，你还可以运行 NPM watch 命令在文件改动时自动编译：

npm run watch

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/nova/1.0/card/2...

译文地址：https://learnku.com/docs/nova/1.0/card/2...