用途 该技能面向 Filament 后台面板的页面开发场景,适用于创建、编辑、审查或调试仪表盘与自定义面板页面。其核心目标是组合现有组件(Widget、Schema 组件、内嵌 Livewire 组件),而不是构建大量自定义 Blade 页面。
使用前阅读 技能要求从当前项目根目录解析并阅读相关约定文件,包括 app/Filament/CLAUDE.md、app/Filament/Pages/CLAUDE.md、app/Filament/Widgets/CLAUDE.md、app/Providers/Filament/CLAUDE.md;当页面包含操作(actions)时阅读 app/Filament/Actions/CLAUDE.md;当涉及测试时阅读 tests/Feature/Filament/CLAUDE.md。同时需检查现有面板页面、仪表盘 Widget、导航分组、面板发现路径与全局默认配置。
构建流程
- 先判断请求是否真的需要自定义页面;若标准面板仪表盘加 Widget 已足够,则注册 Widget 而不新建页面。
- 若确需自定义页面,保留 Filament 标准页面行为,通过 schema 组件、Widget 或内嵌 Livewire 组合自定义内容。
- 使用 tabs、sections、grids、callouts 及 prime 组件进行布局与说明性内容组织。
- 将开销较大的指标放在 Widget 或查询对象中,并明确缓存、轮询与懒加载行为。
- 页面级命令使用页面头部操作(header actions),并将领域逻辑委托出去。
- 导航元数据与邻近页面及集群(clusters)保持一致。
- 添加渲染测试及针对关键 Widget 和操作的断言。
应避免的做法
- 仅某一区域需要定制时,却把资源页面整体重写为自定义页面。
- 编写绕过 Filament 主题与授权机制的大型 Blade 视图。
- 仪表盘查询在每次请求都执行昂贵聚合,且没有缓存、过滤或懒加载。
标签页式仪表盘深入模式 当仪表盘需要在同一路由内切换不同 Widget 集合时,可用单个数组驱动标签页,并将 Widget 引用保留为类字符串,以便 Livewire 在请求间序列化状态。示例代码创建一个继承自 Page 的 Analytics 页面,定义 $activeTab 与 getTabs()、getActiveTabData() 方法;视图在 x-filament-panels::page 包装内渲染导航按钮,通过 wire:click 更新 activeTab,并用 x-filament-widgets::widgets 渲染当前标签页的 Widget,当激活键失效时回退到第一个标签页。若多个页面之间唯一差别是渲染哪些 Widget,应优先采用此方式而非创建多个同级页面。
适用场景 适用于 Filament 后台仪表盘开发、自定义面板页面组织、Widget 组合与标签页切换、页面导航一致性维护以及相关测试编写。
限制 资料未提供该技能的具体安装方式、依赖版本要求、收费或授权信息;相关路径与约定文件需以实际项目为准。