owl-admin: 利用 Pipeline 实现任意组件可全局重写

写在前面

本文只是借用 owl-admin 中组件封装的例子, 给大家分享一种 Pipeline 的使用场景
欢迎大家探讨 Pipeline 的其他使用场景

至于 owl-admin , 只是一个基于 laravel 和 amis 开发的又快又灵活的框架, 大家不必过多关心, 当然, 如果有想了解的也可以点击这里了解更多内容 🤣

什么是管道

使用 Pipeline 你可以将一个实例对象（object）在多个类之间传递，就像流水顺着管道依次流淌一般，层层传递，你就得到了从头至尾一系列执行操作的 “最终” 结果。

laravel 中许多地方都用了 Pipeline, 最典型的便是: Middleware

用一段简单的代码演示一下：

$pipeline = new \Illuminate\Pipeline\Pipeline();

// 原始传入数据
$user = [
    'name'    => '张三',
    'age'     => 18,
    'gender'  => '男',
];

$result = $pipeline
            ->send($user)
            // ->via('run') // 你可以通过调用 via 方法指定一个方法名，Pipeline 会调用该方法, 替代默认的 handle 方法
            ->through([
                // 这里如果传入的是一个类名, Pipeline 会默认调用该类中的 handle 方法
                GenderTransition::class, 
                // handle 方法的参数是 $user (原始数据) 和 $next
                function ($user, $next){ // 这里也可以直接传入 闭包
                    // 这里的 $user 是上一个类传递过来的数据

                    // 假设: GenderTransition 类中, 将 gender 设置为了 女
                    // 那么, 这个方法中 $user['gender'] = '女'

                    // 再次给 $user 添加属性
                    $user['address'] = 'M78 星云';

                    // 执行下一个类, 传递 $user
                    return $next($user);
                },
                // ...
            ])
            ->then(function ($user) {
                // 最后一个类执行完后, 会执行 then 方法

                // 你可以做你想做的事, 比如:
                $user['address'] .= ' 123456';

                // 最后返回 $user
                return $user;
            });

var_dump($result);
/*
array(4) {
  ["name"]=>
  string(6) "张三"
  ["age"]=>
  int(18)
  ["sex"]=>
  string(1) "女"
  ["address"]=>
  string(15) "M78 星云 123456"
}
*/

将管道应用到 owl-admin 的组件中

首先, 对 Pipeline 稍作封装

<?php

namespace Slowlyo\OwlAdmin\Support\Cores;

use Slowlyo\OwlAdmin\Admin;

class AdminPipeline
{
    /**
     * @param               $key
     * @param               $passable
     * @param callable|null $callback
     *
     * @return mixed
     */
    public static function handle($key, $passable, callable $callback = null)
    {
        $do    = fn($i) => $callback ? $callback($i) : $i; // 如果传入了回调函数, 则执行回调函数, 否则直接返回 $passable
        $pipes = Admin::context()->get($key, []); // 从框架上下文中获取管道内容

        // 管道为空, 则直接返回原始数据, 稍微提升些许性能
        if (blank($pipes)) {
            return $do($passable);
        }

        // 执行管道
        return admin_pipeline($passable)->through($pipes)->then(fn($i) => $do($i));
    }

    /**
     * 该方法用于设置管道, 它们通过 $key 来对应
     * 
     * @param array|mixed $pipes
     *
     * @return void
     */
    public static function through($key, $pipes)
    {
        Admin::context()->set($key, $pipes);
    }
}

这样, 我们只需要在调用到 handle 方法之前, 给框架的上下文中写入对应的管道内容, 就实现了逻辑的注入

结合 owl-admin 的组件特性

基于 amis 通过后端返回组件的 json 结构, 由前端渲染对应的组件

就可以实现以下逻辑:

// 所有组件在返回给前端之前, 都会执行这么一段代码
AdminPipeline::handle(static::class, $this->amisSchema);
// - 由于要给所有的组件都加上这行代码, 不可能重复写 100 多遍吧
// - 所以这里把逻辑写在了所有组件的基类中
// - 通过 static::class 来获取当前使用的组件的类名

// 那么, 我们只需要在返回之前, 给框架上下文中添加管道内容即可
AdminPipeline::through(
    Button::class, // 这里对应到上面的 static::class
    [
        // something...
    ]
);

将逻辑完整的提取出来, 流程如下:

// 原本的结构
$schema = [
    'type' => 'button',
    'label' => '按钮',
    'level' => 'primary'
];

// 通过 Pipeline 处理, 得到的新的结构
$lastSchema = app(Pipeline::class)
                ->send($schema)
                ->through([
                    function ($schema, $next){
                        $schema['level'] = 'success';   // 修改按钮颜色
                        $schema['label'] = '我是个按钮'; // 替换按钮文字
                        $schema['icon']  = 'fa fa-add'; // 添加按钮图标

                        // 甚至可以返回个新的结构
                        //$schema = [];

                        return $next($schema);
                    }
                ])
                ->then(fn($schema)=>$schema);

这么一来, 所有的基础组件就都支持了使用 Pipeline 来扩展, 或者是加一些基础属性

结合这个思路, 只需要给框架中做过一层封装的组件分别定义一些 key, 用于在上下文中设置管道内容, 那么页面内容基本上就都可以自定义了 👏

// 基础页面
const PIPE_BASE_PAGE = 'pipe_schema_base_page';
// 返回按钮
const PIPE_BACK_ACTION = 'pipe_schema_back_action';
// 批量删除按钮
const PIPE_BULK_DELETE_ACTION = 'pipe_schema_bulk_delete_action';
// 添加按钮
const PIPE_CREATE_ACTION = 'pipe_schema_create_action';
// 编辑按钮
const PIPE_EDIT_ACTION = 'pipe_schema_edit_action';
// 查看按钮
const PIPE_SHOW_ACTION = 'pipe_schema_show_action';
// 删除按钮
const PIPE_DELETE_ACTION = 'pipe_schema_delete_action';
// 行操作按钮
const PIPE_ROW_ACTIONS = 'pipe_schema_row_actions';
// 基础筛选
const PIPE_BASE_FILTER = 'pipe_schema_base_filter';
// 基础CRUD
const PIPE_BASE_CRUD = 'pipe_schema_base_crud';
// 基础头部工具栏
const PIPE_BASE_HEADER_TOOLBAR = 'pipe_schema_base_header_toolbar';
// 基础表单
const PIPE_BASE_FORM = 'pipe_schema_base_form';
// 基础详情
const PIPE_BASE_DETAIL = 'pipe_schema_base_detail';
// 基础列表
const PIPE_BASE_LIST = 'pipe_schema_base_list';
//  导出按钮
const PIPE_EXPORT_ACTION = 'pipe_schema_export_action';