feat: 后台筛选条件横向排列 + 全局紧凑 CSS

- 文章表筛选改为 filtersFormColumns(3) 一行横向排列,不再纵向堆叠占空间
- 后台紧凑化 CSS:表格行(fi-ta-cell/fi-ta-header-cell)与表头工具栏收紧内边距,筛选区(Above 布局)压缩留白
- 说明:Filament 官方无全局紧凑开关,紧凑由 CSS 实现(侧边栏已如此)
This commit is contained in:
ak
2026-08-12 17:54:35 +08:00
parent 24b3c25e60
commit 66194b6b22
2 changed files with 11 additions and 1 deletions
@@ -79,6 +79,7 @@ class PostsTable
TernaryFilter::make('is_sticky') TernaryFilter::make('is_sticky')
->label('置顶'), ->label('置顶'),
], \Filament\Tables\Enums\FiltersLayout::AboveContent) ], \Filament\Tables\Enums\FiltersLayout::AboveContent)
->filtersFormColumns(3)
->recordActions([ ->recordActions([
ViewAction::make(), ViewAction::make(),
EditAction::make(), EditAction::make(),
+10 -1
View File
@@ -52,7 +52,7 @@ class AppServiceProvider extends ServiceProvider
// 前台页面缓存(匿名 GET,缓存含 SEO 注入后的最终 HTML) // 前台页面缓存(匿名 GET,缓存含 SEO 注入后的最终 HTML)
app('router')->pushMiddlewareToGroup('web', \App\Blog\Support\PageCacheMiddleware::class); app('router')->pushMiddlewareToGroup('web', \App\Blog\Support\PageCacheMiddleware::class);
// 后台侧边栏紧凑化(更窄的菜单项 // 后台紧凑化:侧边栏 + 表格行 + 筛选区(Filament 无官方全局紧凑开关,用 CSS 收紧
Filament::serving(function () { Filament::serving(function () {
Filament::registerRenderHook( Filament::registerRenderHook(
PanelsRenderHook::STYLES_AFTER, PanelsRenderHook::STYLES_AFTER,
@@ -65,6 +65,15 @@ class AppServiceProvider extends ServiceProvider
.fi-sidebar-nav .fi-sidebar-item-label { font-size: 0.82rem; } .fi-sidebar-nav .fi-sidebar-item-label { font-size: 0.82rem; }
.fi-sidebar-nav .fi-sidebar-group-label { font-size: 0.68rem; letter-spacing: 0.04em; } .fi-sidebar-nav .fi-sidebar-group-label { font-size: 0.68rem; letter-spacing: 0.04em; }
.fi-sidebar-brand { padding-block: 0.9rem; } .fi-sidebar-brand { padding-block: 0.9rem; }
/* 表格行更紧凑 */
.fi-ta-cell, .fi-ta-header-cell { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
.fi-ta-header-toolbar { padding-block: 0.6rem !important; }
/* 筛选条件区(Above 布局)更紧凑 */
.fi-ta-filters-above-content-ctn { padding: 0.7rem 1rem !important; }
.fi-ta-filters-header { margin-bottom: 0.4rem !important; }
.fi-ta-filters-heading { font-size: 0.8rem !important; margin: 0 !important; }
</style> </style>
HTML) HTML)
); );