README

安装

您可以通过composer安装此包

composer require headlesslaravel/cards

创建一个卡片类来管理同一类型的多个卡片

php artisan make:cards Dashboard

然后将该类添加到端点

Route::cards('api/dashboard', Dashboard::class);

<?php

namespace App\Http\Cards;

use HeadlessLaravel\Cards\Cards;

class Dashboard extends Cards
{
    public function cards(): array
    {
        return [
            Card::make('Total Users')
                ->link('/users')
                ->component('number-card')
                ->value(function() {
                    return User::count();
                }),
        ];
    }
}

/api/dashboard

{
    "data": [
        {
            "key": "total_users",
            "title": "Total Users",
            "value": 5,
            "component": "number-card",
            "link": "/users",
            "endpoint": "api/dashboard/total-users"
        }
    ]
}

您还可以使用slug格式的key来引用单个方法。

当您希望UI更新/过滤单个卡片时，这非常有用。

/api/dashboard/total-users

{
    "key": "total_users",
    "title": "Total Users",
    "value": 5,
    "component": "number-card",
    "link": "/users",
    "endpoint": "api/dashboard/total-users"
}

这只是一个基本示例。真正的力量在于使用单个查询字符串过滤多个卡片，并验证该查询字符串的准确性。

<?php

namespace App\Http\Cards;

use HeadlessLaravel\Cards\Cards;

class Dashboard extends Cards
{
    public function rules()
    {
        return [
            'from' => ['nullable', 'date', 'before_or_equal:to'],
            'to' => ['nullable', 'date', 'after_or_equal:from'],
        ];
    }
    
    public function cards(): array
    {
        return [
        
            Card::make('Total Users')
                ->link('/users')
                ->component('number-card')
                ->value(function() {
                    return User::whereBetween('created_at', [
                        Request::input('from', now()),  
                        Request::input('to', now())
                    ])->count();
                }),
            
            Card::make('Total Orders', 'total_orders')
                ->link('/orders')
                ->component('number-card')
                ->value(function() {
                    return Order::whereBetween('created_at', [
                        Request::input('from', now()),  
                        Request::input('to', now())
                    ])->count();
                }),
        ];
    }
}

这导致两个模型都通过相同的查询字符串进行过滤。

/dashboard?from=...&to=...

{
    "data": [
        {
            "key": "total_users",
            "title": "Total Users",
            "value": 5,
            "component": "number-card",
            "link": "/users",
            "endpoint": "api/dashboard/total-users"
        },
        {
            "key": "total_orders",
            "title": "Total Orders",
            "value": 50,
            "component": "number-card",
            "link": "/orders",
            "endpoint": "api/dashboard/total-orders"
        }
    ]
}

过滤器也适用于单个卡片请求

/dashboard/total-users?from=...&to=...

/dashboard/total-orders?from=...&to=...

您可以将多个值作为值传递

视图

Card::make('Welcome')->view('cards.welcome');

{
    "key": "welcome",
    "title": "Welcome",
    "value": "<h1>Welcome!</h1>",
    "component": null,
    "link": null,
    "endpoint": "api/dashboard/welcome"
}

Http

Card::make('Weather')->http('api.com/weather', 'data.results.0');

{
    "key": "weather",
    "title": "Weather",
    "value": {
        "today": "90 degrees",
        "tomorrow": "50 degrees"
    },
    "component": null,
    "link": null,
    "endpoint": "api/dashboard/weather"
}

这只是一个简写

Card::make('Weather')
    ->value(function() {
        return Http::get('api.com/weather')->json('data.results.0');
    }),

缓存

在可调用函数中的任何值都可以缓存：（秒数）

Card::make('Weather')
    ->cache(60)
    ->value(function() {
        return Http::get('api.com/weather')->json('data.today');
    }),

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件。