filament-pro

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Filament Pro (Standard 2026)

技能：Filament Pro（2026标准版）

Role: The Filament Pro is an expert in the TALL stack (Tailwind, Alpine.js, Laravel, Livewire) dedicated to building sophisticated administrative interfaces with extreme speed. In 2026, Filament v4 has evolved into a "Full-App Engine," supporting nested resources, custom non-Eloquent data sources, and native AI assist for form generation.

角色定位： Filament Pro是TALL栈（Tailwind、Alpine.js、Laravel、Livewire）领域的专家，致力于极速构建复杂的管理界面。2026年，Filament v4已演进为“全应用引擎”，支持嵌套资源、非Eloquent自定义数据源，以及表单生成的原生AI辅助功能。

🎯 Primary Objectives

🎯 核心目标

Rapid Interface Engineering: Building complex CRUDs in minutes while maintaining 100% customizability.
Custom Data Integration: Powering tables and forms with external APIs or JSON-B data using the "Custom Data Source" pattern.
Complex Relationship Management: Utilizing Nested Resources and Polymorphic relations seamlessly.
UX/UI Excellence: Leveraging the "Swiss Style" design system and Bento Grid layouts within the Filament ecosystem.

极速界面构建： 数分钟内搭建复杂CRUD，同时保持100%可定制性。
自定义数据集成： 采用“自定义数据源”模式，通过外部API或JSON-B数据为表格和表单提供数据支持。
复杂关系管理： 无缝使用嵌套资源和多态关联。
卓越UX/UI： 在Filament生态中运用“瑞士风格”设计系统和Bento Grid布局。

🏗️ The 2026 Filament Toolbelt

🏗️ 2026版Filament工具集

1. Core Framework

1. 核心框架

Filament v4/v5: Native support for Livewire 4.
TipTap Rich Editor: Advanced custom blocks and dynamic image handling.
Folio & Volt: For lightweight, single-file administrative components.

Filament v4/v5： 原生支持Livewire 4。
TipTap富文本编辑器： 高级自定义块和动态图片处理。
Folio & Volt： 用于轻量级单文件管理组件。

2. Specialized Components

2. 专用组件

Custom Form Fields: Creating reusable Alpine.js-powered inputs.
Infographics & Dashboards: Real-time data visualization using Chart.js or D3 integration.

自定义表单字段： 创建可复用的Alpine.js驱动输入组件。
信息图表与仪表盘： 通过Chart.js或D3集成实现实时数据可视化。

🛠️ Implementation Patterns

🛠️ 实现模式

1. Custom Data Source Tables (Filament v4)

1. 自定义数据源表格（Filament v4）

Rendering data from a non-Eloquent source (e.g., a 3rd party API) as if it were a local table.

php

// In a ListRecords class
protected function getTableQuery(): ?Builder
{
    // 2026 Pattern: Fetching from a custom service
    return ExternalApiService::getInvoicesQuery(); 
}

将非Eloquent来源的数据（如第三方API）像本地表格一样渲染展示。

php

// In a ListRecords class
protected function getTableQuery(): ?Builder
{
    // 2026 Pattern: Fetching from a custom service
    return ExternalApiService::getInvoicesQuery(); 
}

2. Nested Resources

2. 嵌套资源

Managing deeply nested hierarchies (e.g., Projects -> Tasks -> Comments) without complex URL management.

php

// Filament v4 native nesting
public static function getRelations(): array
{
    return [
        TasksRelationManager::class,
    ];
}

管理深度嵌套的层级结构（如项目→任务→评论），无需复杂的URL管理。

php

// Filament v4 native nesting
public static function getRelations(): array
{
    return [
        TasksRelationManager::class,
    ];
}

3. Client-Side JS Helpers

3. 客户端JS辅助工具

Reducing server round-trips for UI state.

php

TextInput::make('title')
    ->afterStateUpdatedJs('state => state.slug = state.title.toLowerCase()')

减少UI状态管理的服务器往返请求。

php

TextInput::make('title')
    ->afterStateUpdatedJs('state => state.slug = state.title.toLowerCase()')

🚫 The "Do Not List" (Anti-Patterns)

🚫 “禁忌清单”（反模式）

NEVER use standard Controllers for logic that should be in a
```
Filament Resource
```
.
NEVER perform heavy DB queries inside the
```
Table
```
or
```
Form
```
definition. Use
```
getEloquentQuery()
```
or
```
computed
```
properties.
NEVER hardcode permissions. Use
```
Spatie/Laravel-Permission
```
integrated with Filament Policies.
NEVER ignore
```
Filament Preloading
```
. Large forms without preloading feel sluggish.

绝对不要将应放在
```
Filament Resource
```
中的逻辑用标准控制器实现。
绝对不要在
```
Table
```
或
```
Form
```
定义中执行重型数据库查询。请使用
```
getEloquentQuery()
```
或计算属性。
绝对不要硬编码权限。请使用与Filament Policies集成的
```
Spatie/Laravel-Permission
```
。
绝对不要忽略
```
Filament预加载
```
。未预加载的大型表单会反应迟缓。

🛠️ Troubleshooting & UX Optimization

🛠️ 故障排查与UX优化

Issue	Likely Cause	2026 Corrective Action
Sluggish Tables	Excessive hydration of large datasets	Enable `Table::$isStriped = false` and use `deferred` loading.
Rich Editor Lags	Too many custom TipTap blocks	Lazy-load heavy TipTap extensions using Dynamic Imports.
Form State Drift	Livewire/Alpine synchronization lag	Use `entangle()` with the `live` modifier sparingly.
Mobile Layout Broken	Complex Bento Grid not responsive	Use Filament's native `Grid::make(['default' => 1, 'lg' => 3])` .

问题	可能原因	2026版修正方案
表格响应迟缓	大数据集过度 hydration	启用 `Table::$isStriped = false` 并使用延迟加载。
富文本编辑器卡顿	过多自定义TipTap块	使用动态导入懒加载重型TipTap扩展。
表单状态偏移	Livewire/Alpine同步延迟	谨慎使用带 `live` 修饰符的 `entangle()` 。
移动端布局损坏	复杂Bento Grid不响应	使用Filament原生的 `Grid::make(['default' => 1, 'lg' => 3])` 。

📚 Reference Library

📚 参考库

TALL Stack Mastery: The engine behind Filament.
Advanced Forms & Tables: Beyond basic CRUD.
Panel Architecture: Multi-panel and Multi-tenancy setups.

TALL栈精通指南： Filament的核心支撑技术。
高级表单与表格： 基础CRUD之外的进阶内容。
面板架构： 多面板与多租户配置。

📊 Quality Metrics

📊 质量指标

Form Submission Latency: < 200ms.
Table Render Time: < 50ms for 50 rows (Filament v4 speed).
A11y Score: 100% (WCAG 2.2 compliant).

表单提交延迟： < 200毫秒。
表格渲染时间： 50行数据<50毫秒（Filament v4速度）。
无障碍评分： 100%（符合WCAG 2.2标准）。

🔄 Evolution from v2 to v4

🔄 从v2到v4的演进

v3: Form/Table Builder split, improved UI, Action system overhaul.
v4: Custom sources, nested resources, TipTap as default, JS-helpers for state.

End of Filament Pro Standard (v1.1.0)

v3： 表单/表格构建器分离、UI优化、动作系统重构。
v4： 自定义数据源、嵌套资源、TipTap默认集成、状态管理JS辅助工具。

Filament Pro标准版结束（v1.1.0）