在使用 Filament 构建后台管理系统时，经常会遇到需要处理 JSON 格式数据的情况。默认情况下，Filament 只能以纯文本形式展示 JSON 数据，这对于开发者来说非常不友好，难以阅读和编辑。 为了解决这个问题，我发现了 valentin-morice/filament-json-column 这个插件。 Composer在线学习地址：学习地址

filament-json-column 是一个 Filament 的插件，它允许你在 Filament 的表单中以更友好的方式查看和编辑 JSON 格式的字段。它提供了两个选项卡：

• Viewer: 以美观的格式展示 JSON 数据，方便阅读。
• Editor: 提供一个 JSON 编辑器，方便修改 JSON 数据。

安装

使用 Composer 安装非常简单：

composer require valentin-morice/filament-json-column

使用

确保你的 Eloquent 模型中，对应的字段被 cast 为 json 或 array。

protected $casts = [
    'example' => 'array', // 或者 'json'
];

然后在 Filament 的表单中使用 FilamentJsonColumn：

use Filament\Forms\Form;
use ValentinMorice\FilamentJsonColumn\FilamentJsonColumn;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            FilamentJsonColumn::make('example'),
        ]);
}

自定义

• Accent Color: 可以自定义选项卡选择器的颜色。

  FilamentJsonColumn::make('example')->accent('#007bff');

• Single Tab: 可以只显示 Viewer 或 Editor。

  FilamentJsonColumn::make('example')->editorOnly(); // 只显示 Editor
  FilamentJsonColumn::make('example')->viewerOnly(); // 只显示 Viewer

• Height: 可以自定义 Viewer 和 Editor 的高度。

  FilamentJsonColumn::make('example')->editorHeight(500);
  FilamentJsonColumn::make('example')->viewerHeight(500);

filament-json-column 极大地简化了 Filament 中 JSON 数据的处理，提高了开发效率。如果你在使用 Filament，强烈推荐尝试这个插件。它让 JSON 数据的查看和编辑变得更加轻松愉快！