端驅(qū)動(dòng) UI（SDUI）框架)
Filament 框架入門總覽基于 Laravel Livewire 的服務(wù)端驅(qū)動(dòng) UISDUI框架【免費(fèi)下載鏈接】filamentA powerful open-source UI framework for Laravel ? Build and ship apps admin panels fast with Livewire項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fi/filamentFilament 是一個(gè)構(gòu)建在 Laravel 之上的 Server-Driven UISDUI框架你可以用純 PHP 的結(jié)構(gòu)化配置對(duì)象定義界面而不是手寫模板從而快速構(gòu)建管理后臺(tái)Admin Panel、儀表盤、用戶門戶甚至完整應(yīng)用。本文以官方入門文檔docs/01-introduction/01-overview.md為核心結(jié)合本倉庫源碼系統(tǒng)講解 Filament 的核心概念、包結(jié)構(gòu)、插件生態(tài)、樣式定制與測(cè)試策略幫助你理解它的設(shè)計(jì)哲學(xué)并快速上手。什么是 Filament從「模板渲染」到「服務(wù)端驅(qū)動(dòng)」官方文檔開宗明義Filament 是一個(gè)面向 Laravel 的 Server-Driven UISDUI框架。它允許你用結(jié)構(gòu)化的 PHP 配置對(duì)象來定義用戶界面而不是依賴傳統(tǒng)的模板渲染。框架底層基于 Livewire、Alpine.js 與 Tailwind CSS 構(gòu)建因此你可以在不編寫任何自定義 JavaScript 或前端代碼的情況下構(gòu)建出功能完整的界面——例如管理后臺(tái)、儀表盤、表單類應(yīng)用。需要區(qū)分兩個(gè)概念Server-Rendered UI服務(wù)端渲染依賴靜態(tài)模板如傳統(tǒng) Blade 視圖UI 的結(jié)構(gòu)與行為在 HTML 或 PHP 文件中提前定義好Server-Driven UI服務(wù)端驅(qū)動(dòng)由服務(wù)器根據(jù)實(shí)時(shí)配置與業(yè)務(wù)邏輯動(dòng)態(tài)生成UI無需直接修改前端模板即可獲得更高的靈活性與響應(yīng)性。Meta、Airbnb、Shopify 等公司已在大規(guī)模生產(chǎn)環(huán)境中驗(yàn)證了這一架構(gòu)模式。Filament 正是把 SDUI 模式引入 Web 開發(fā)你用 PHP 類以聲明式方式定義界面服務(wù)器負(fù)責(zé)將其渲染為 HTML。在源碼層面這一設(shè)計(jì)體現(xiàn)在filament/schemas包中——它的核心類 Schema.php 通過make()工廠方法創(chuàng)建實(shí)例由configure()完成配置將一組「組件」PHP 對(duì)象HasComponents作為 UI 的配置來源而Schema本身繼承自ViewComponent并實(shí)現(xiàn)HasEmbeddedView最終由服務(wù)器端渲染輸出。Filament 的應(yīng)用范圍遠(yuǎn)不止管理后臺(tái)你可以用它構(gòu)建自定義儀表盤、用戶門戶、CRM甚至由多個(gè) Panel 組成的完整應(yīng)用。它與任何前端棧都能無縫集成尤其適合與 Inertia.js、Livewire、Blade 搭配使用。如果你的 Laravel 應(yīng)用已經(jīng)在使用 Blade 視圖也可以直接把 Filament 驅(qū)動(dòng)的 Livewire 組件嵌入任意 Blade 視圖或路由中復(fù)用同一套基于 schema 的表單、表格構(gòu)建器而無需切換整個(gè)技術(shù)棧。核心包結(jié)構(gòu)從 panel 到 supportFilament 的核心由多個(gè) Composer 包組成每個(gè)包承擔(dān)獨(dú)立的職責(zé)。倉庫 composer.json 中的autoload映射Filament\Actions\、Filament\Forms\、Filament\Schemas\、Filament\Tables\等命名空間分別指向packages/*/src與下方清單一一對(duì)應(yīng)包名職責(zé)倉庫源碼位置filament/filament核心包用于構(gòu)建 Panel如管理后臺(tái)。由于 Panel 常使用其他包的諸多特性它依賴全部其他包packages/panels/srcfilament/tables數(shù)據(jù)表格構(gòu)建器支持過濾、排序、分頁等交互packages/tables/srcfilament/schemas用「組件」PHP 對(duì)象數(shù)組作為配置來構(gòu)建 UI 的包是許多 Filament 功能渲染 UI 的基礎(chǔ)內(nèi)置一批基礎(chǔ)內(nèi)容渲染組件packages/schemas/srcfilament/forms基于filament/schemas組件擴(kuò)展出的各類表單輸入字段集合自帶完整校驗(yàn)packages/forms/srcfilament/infolists渲染「描述列表」的 schema 組件集合由「entries」組成以鍵值對(duì) UI 呈現(xiàn)文本、圖標(biāo)、圖片等只讀信息數(shù)據(jù)可來自任意來源常見為單個(gè) Eloquent 記錄packages/infolists/srcfilament/actionsAction 對(duì)象封裝按鈕 UI、按鈕可打開的交互式模態(tài)窗口、以及模態(tài)提交后執(zhí)行的邏輯三部分可用于 UI 任意位置常用于執(zhí)行刪除記錄、發(fā)送郵件、按模態(tài)表單輸入更新數(shù)據(jù)等一次性操作packages/actions/srcfilament/notifications向應(yīng)用 UI 中的用戶發(fā)送通知請(qǐng)求后立即出現(xiàn)的「flash」通知、存入數(shù)據(jù)庫并可隨時(shí)在 slide-over 模態(tài)中打開的「database」通知、通過 WebSocket 實(shí)時(shí)送達(dá)的「broadcast」通知packages/notifications/srcfilament/widgets儀表盤「widget」集合可渲染任意內(nèi)容通常是統(tǒng)計(jì)數(shù)據(jù)圖表、數(shù)字、表格以及完全自定義的 widget 都能在儀表盤中渲染packages/widgets/srcfilament/support供所有其他包共享的 UI 組件與工具集合一般無需用戶直接安裝它是其他包的依賴packages/support/src其中filament/schemas是整個(gè)體系的關(guān)鍵抽象。從源碼看Schema.php 組合了大量 ConcernHasColumns、HasComponents、HasState、CanBeValidated、CanBeHidden等使任何 UI 區(qū)域表單、表格、詳情頁都能以「組件樹」的方式聲明式構(gòu)建并在make()時(shí)通過服務(wù)容器注入 Livewire 組件實(shí)現(xiàn)HasSchemas契約的組件。filament/forms、filament/infolists、filament/tables等包正是在這套 schema 組件之上疊加各自的領(lǐng)域組件。插件生態(tài)官方維護(hù)與社區(qū)擴(kuò)展Filament 被設(shè)計(jì)為高度可擴(kuò)展的框架。你可以為它添加自己的 UI 組件與特性如果擴(kuò)展僅服務(wù)于你的應(yīng)用可以直接放在你的代碼庫內(nèi)如果是通用能力可以打包為 Composer 包分發(fā)——在 Filament 生態(tài)中這類 Composer 包被稱為插件plugins社區(qū)已有數(shù)百個(gè)。Filament 團(tuán)隊(duì)也官方維護(hù)了一批插件提供與 Laravel 生態(tài)中熱門第三方包的集成。本倉庫中即可看到這些官方插件的源碼例如filament/spatie-laravel-media-library-plugin集成 Spatie Media Library 的文件上傳與展示源碼filament/spatie-laravel-settings-plugin集成 Spatie Laravel Settings 的設(shè)置頁源碼filament/spatie-laravel-tags-plugin集成 Spatie Laravel Tags 的標(biāo)簽輸入與列源碼filament/spark-billing-providerSpark 計(jì)費(fèi)提供商源碼。??注意非 Filament 團(tuán)隊(duì)維護(hù)的插件由獨(dú)立作者創(chuàng)建與管理。雖然這些插件能增強(qiáng)你的體驗(yàn)但 Filament 無法保證其質(zhì)量、安全性、兼容性或維護(hù)狀態(tài)。官方建議在安裝前仔細(xì)審查插件的代碼、文檔與用戶反饋。官方與社區(qū)插件的完整列表可瀏覽 Filament 官網(wǎng)的插件目錄插件入門文檔 提供了開發(fā)插件的進(jìn)一步指引。插件能力在源碼中有充分體現(xiàn)例如 packages/panels/src/Panel.php 是 Panel 的構(gòu)建入口支持在 Panel 上注冊(cè)插件、資源、頁面與 widget各插件的ServiceProvider如SpatieLaravelSettingsPluginServiceProvider負(fù)責(zé)注冊(cè)其表單字段、表格列等擴(kuò)展。社區(qū)插件中絕大多數(shù)開源免費(fèi)也有部分付費(fèi)的優(yōu)質(zhì)插件通常附帶增強(qiáng)的客戶支持與質(zhì)量保證。定制外觀基于 Tailwind 的「語義化」設(shè)計(jì)系統(tǒng)Filament 使用 Tailwind CSS 作為基于 token 的設(shè)計(jì)系統(tǒng)但這里有一個(gè)關(guān)鍵差異Filament 組件渲染出的 HTML 并不直接使用 Tailwind 工具類而是把 Tailwind 工具類編譯成語義化 CSS 類如.fi-btn。這樣你就可以用自己的 CSS 精準(zhǔn)覆蓋這些語義類在 Filament 默認(rèn)設(shè)計(jì)之上疊加一層薄薄的樣式覆蓋無需編寫整套自定義樣式表也無需為每個(gè)組件維護(hù) HTML 副本。文檔給出的經(jīng)典例子是修改所有按鈕的圓角。Filament 源碼中按鈕的默認(rèn)樣式位于 packages/support/resources/css/components/button.css編譯前的源碼使用了 Tailwind 工具類.fi-btn { apply relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 align-middle text-sm font-medium transition duration-75 outline-none; }實(shí)際編譯產(chǎn)物即為文檔所展示的rounded-lg px-3 py-2 text-sm font-medium outline-none等規(guī)則。如果你希望把圓角調(diào)小為rounded-sm只需在自己的 CSS 文件中寫.fi-btn { apply rounded-sm; }這會(huì)用rounded-sm覆蓋默認(rèn)的rounded-lg同時(shí)保留按鈕的其他樣式屬性。從源碼看同一文件還定義了尺寸變體.fi-size-xs、.fi-size-sm、.fi-size-lg、.fi-size-xl、禁用態(tài).fi-disabled、描邊態(tài).fi-outlined等這些語義類同樣可以被覆蓋。該設(shè)計(jì)賦予了極高的外觀定制靈活性。更系統(tǒng)的定制方式見 自定義樣式文檔其中包含顏色、CSS 鉤子、圖標(biāo)等主題。測(cè)試為你的 Filament 應(yīng)用編寫測(cè)試Filament 的核心包在每次發(fā)布前都會(huì)經(jīng)過單元測(cè)試以保證穩(wěn)定性本倉庫的 tests 目錄即為佐證——測(cè)試按包劃分tests/src/Actions、tests/src/Forms、tests/src/Tables、tests/src/Panels、tests/src/Schemas、tests/src/Widgets等覆蓋了 action 模態(tài)、表單校驗(yàn)、表格列、schema 組件等核心行為并在 composer.json 的scripts中配置了針對(duì) SQLite / MySQL / PostgreSQL 三種數(shù)據(jù)庫的 Pest 測(cè)試命令如composer test:sqlite、composer test:mysql、composer test:pgsql。作為 Filament 用戶你也可以為基于 Filament 構(gòu)建的應(yīng)用編寫測(cè)試。Filament 提供了同時(shí)適用于 Pest 與 PHPUnit 測(cè)試套件的工具既能測(cè)試功能邏輯也能測(cè)試 UI 組件。當(dāng)你定制框架或?qū)崿F(xiàn)自定義功能時(shí)測(cè)試尤為關(guān)鍵即便只是驗(yàn)證基礎(chǔ)功能是否按預(yù)期工作測(cè)試同樣有價(jià)值。測(cè)試方法論詳見 測(cè)試文檔。備選方案如果 Filament 不適合你官方文檔也坦誠地列出了 Laravel 生態(tài)中一些優(yōu)秀的替代方案幫助你做技術(shù)選型覺得 Filament 太復(fù)雜Laravel Nova 是 Laravel 團(tuán)隊(duì)官方維護(hù)的項(xiàng)目是構(gòu)建 Laravel 管理后臺(tái)的輕量方案購買它同時(shí)也在支持 Laravel 框架的開發(fā)。不想用 Livewire 做任何定制Filament 的許多部分完全不需要你接觸 Livewire但構(gòu)建自定義組件時(shí)可能涉及。Laravel Nova 基于 Vue.js 與 Inertia.js 構(gòu)建如果你的項(xiàng)目需要大量定制且熟悉這些技術(shù)可能更合適。需要開箱即用的 CMSStatamic 是基于 Laravel 的 CMS適合需要易于安裝使用、且無需自行構(gòu)建管理后臺(tái)的場(chǎng)景。只想寫 Blade 視圖、后端自己處理Flux 是官方 Livewire UI 工具包提供一套預(yù)構(gòu)建、預(yù)樣式的 Blade 組件由維護(hù) Livewire 與 Alpine.js 的同一團(tuán)隊(duì)維護(hù)。下一步從安裝到開始構(gòu)建安裝與構(gòu)建流程在 安裝文檔 與 快速上手 中有完整介紹。簡(jiǎn)要路線如下在 Laravel 項(xiàng)目要求 PHP 8.2、Laravel v11.28、Tailwind CSS v4.1中運(yùn)行composer require filament/filament:^4.0與php artisan filament:install --panels生成并注冊(cè)app/Providers/Filament/AdminPanelProvider.php用php artisan make:filament-user創(chuàng)建用戶訪問/admin登錄進(jìn)入默認(rèn)儀表盤后通過Resources為模型生成 List / Create / Edit 三個(gè)頁面可選用 View 頁面、WidgetsPHP 類 Blade 視圖本質(zhì)是 Livewire 組件與自定義頁面同樣是全頁 Livewire 組件常用于設(shè)置頁、文檔等開始搭建你的應(yīng)用。理解本篇介紹的 SDUI 思想、包結(jié)構(gòu)與插件機(jī)制后你就可以在官方文檔指引下逐模塊深入學(xué)習(xí)表格、表單、schema 組件與 Panel 配置構(gòu)建出完整的生產(chǎn)級(jí)應(yīng)用。【免費(fèi)下載鏈接】filamentA powerful open-source UI framework for Laravel ? Build and ship apps admin panels fast with Livewire項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fi/filament創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Filament 框架入門總覽：基于 Laravel + Livewire 的服務(wù)端驅(qū)動(dòng) UI（SDUI）框架
Filament 框架入門總覽基于 Laravel Livewire 的服務(wù)端驅(qū)動(dòng) UISDUI框架【免費(fèi)下載鏈接】filamentA powerful open-source UI framework for Laravel ? Build and ship apps admin panels fast with Livewire項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fi/filamentFilament 是一個(gè)構(gòu)建在 Laravel 之上的 Server-Driven UISDUI框架你可以用純 PHP 的結(jié)構(gòu)化配置對(duì)象定義界面而不是手寫模板從而快速構(gòu)建管理后臺(tái)Admin Panel、儀表盤、用戶門戶甚至完整應(yīng)用。本文以官方入門文檔docs/01-introduction/01-overview.md為核心結(jié)合本倉庫源碼系統(tǒng)講解 Filament 的核心概念、包結(jié)構(gòu)、插件生態(tài)、樣式定制與測(cè)試策略幫助你理解它的設(shè)計(jì)哲學(xué)并快速上手。什么是 Filament從「模板渲染」到「服務(wù)端驅(qū)動(dòng)」官方文檔開宗明義Filament 是一個(gè)面向 Laravel 的 Server-Driven UISDUI框架。它允許你用結(jié)構(gòu)化的 PHP 配置對(duì)象來定義用戶界面而不是依賴傳統(tǒng)的模板渲染。框架底層基于 Livewire、Alpine.js 與 Tailwind CSS 構(gòu)建因此你可以在不編寫任何自定義 JavaScript 或前端代碼的情況下構(gòu)建出功能完整的界面——例如管理后臺(tái)、儀表盤、表單類應(yīng)用。需要區(qū)分兩個(gè)概念Server-Rendered UI服務(wù)端渲染依賴靜態(tài)模板如傳統(tǒng) Blade 視圖UI 的結(jié)構(gòu)與行為在 HTML 或 PHP 文件中提前定義好Server-Driven UI服務(wù)端驅(qū)動(dòng)由服務(wù)器根據(jù)實(shí)時(shí)配置與業(yè)務(wù)邏輯動(dòng)態(tài)生成UI無需直接修改前端模板即可獲得更高的靈活性與響應(yīng)性。Meta、Airbnb、Shopify 等公司已在大規(guī)模生產(chǎn)環(huán)境中驗(yàn)證了這一架構(gòu)模式。Filament 正是把 SDUI 模式引入 Web 開發(fā)你用 PHP 類以聲明式方式定義界面服務(wù)器負(fù)責(zé)將其渲染為 HTML。在源碼層面這一設(shè)計(jì)體現(xiàn)在filament/schemas包中——它的核心類 Schema.php 通過make()工廠方法創(chuàng)建實(shí)例由configure()完成配置將一組「組件」PHP 對(duì)象HasComponents作為 UI 的配置來源而Schema本身繼承自ViewComponent并實(shí)現(xiàn)HasEmbeddedView最終由服務(wù)器端渲染輸出。Filament 的應(yīng)用范圍遠(yuǎn)不止管理后臺(tái)你可以用它構(gòu)建自定義儀表盤、用戶門戶、CRM甚至由多個(gè) Panel 組成的完整應(yīng)用。它與任何前端棧都能無縫集成尤其適合與 Inertia.js、Livewire、Blade 搭配使用。如果你的 Laravel 應(yīng)用已經(jīng)在使用 Blade 視圖也可以直接把 Filament 驅(qū)動(dòng)的 Livewire 組件嵌入任意 Blade 視圖或路由中復(fù)用同一套基于 schema 的表單、表格構(gòu)建器而無需切換整個(gè)技術(shù)棧。核心包結(jié)構(gòu)從 panel 到 supportFilament 的核心由多個(gè) Composer 包組成每個(gè)包承擔(dān)獨(dú)立的職責(zé)。倉庫 composer.json 中的autoload映射Filament\Actions\、Filament\Forms\、Filament\Schemas\、Filament\Tables\等命名空間分別指向packages/*/src與下方清單一一對(duì)應(yīng)包名職責(zé)倉庫源碼位置filament/filament核心包用于構(gòu)建 Panel如管理后臺(tái)。由于 Panel 常使用其他包的諸多特性它依賴全部其他包packages/panels/srcfilament/tables數(shù)據(jù)表格構(gòu)建器支持過濾、排序、分頁等交互packages/tables/srcfilament/schemas用「組件」PHP 對(duì)象數(shù)組作為配置來構(gòu)建 UI 的包是許多 Filament 功能渲染 UI 的基礎(chǔ)內(nèi)置一批基礎(chǔ)內(nèi)容渲染組件packages/schemas/srcfilament/forms基于filament/schemas組件擴(kuò)展出的各類表單輸入字段集合自帶完整校驗(yàn)packages/forms/srcfilament/infolists渲染「描述列表」的 schema 組件集合由「entries」組成以鍵值對(duì) UI 呈現(xiàn)文本、圖標(biāo)、圖片等只讀信息數(shù)據(jù)可來自任意來源常見為單個(gè) Eloquent 記錄packages/infolists/srcfilament/actionsAction 對(duì)象封裝按鈕 UI、按鈕可打開的交互式模態(tài)窗口、以及模態(tài)提交后執(zhí)行的邏輯三部分可用于 UI 任意位置常用于執(zhí)行刪除記錄、發(fā)送郵件、按模態(tài)表單輸入更新數(shù)據(jù)等一次性操作packages/actions/srcfilament/notifications向應(yīng)用 UI 中的用戶發(fā)送通知請(qǐng)求后立即出現(xiàn)的「flash」通知、存入數(shù)據(jù)庫并可隨時(shí)在 slide-over 模態(tài)中打開的「database」通知、通過 WebSocket 實(shí)時(shí)送達(dá)的「broadcast」通知packages/notifications/srcfilament/widgets儀表盤「widget」集合可渲染任意內(nèi)容通常是統(tǒng)計(jì)數(shù)據(jù)圖表、數(shù)字、表格以及完全自定義的 widget 都能在儀表盤中渲染packages/widgets/srcfilament/support供所有其他包共享的 UI 組件與工具集合一般無需用戶直接安裝它是其他包的依賴packages/support/src其中filament/schemas是整個(gè)體系的關(guān)鍵抽象。從源碼看Schema.php 組合了大量 ConcernHasColumns、HasComponents、HasState、CanBeValidated、CanBeHidden等使任何 UI 區(qū)域表單、表格、詳情頁都能以「組件樹」的方式聲明式構(gòu)建并在make()時(shí)通過服務(wù)容器注入 Livewire 組件實(shí)現(xiàn)HasSchemas契約的組件。filament/forms、filament/infolists、filament/tables等包正是在這套 schema 組件之上疊加各自的領(lǐng)域組件。插件生態(tài)官方維護(hù)與社區(qū)擴(kuò)展Filament 被設(shè)計(jì)為高度可擴(kuò)展的框架。你可以為它添加自己的 UI 組件與特性如果擴(kuò)展僅服務(wù)于你的應(yīng)用可以直接放在你的代碼庫內(nèi)如果是通用能力可以打包為 Composer 包分發(fā)——在 Filament 生態(tài)中這類 Composer 包被稱為插件plugins社區(qū)已有數(shù)百個(gè)。Filament 團(tuán)隊(duì)也官方維護(hù)了一批插件提供與 Laravel 生態(tài)中熱門第三方包的集成。本倉庫中即可看到這些官方插件的源碼例如filament/spatie-laravel-media-library-plugin集成 Spatie Media Library 的文件上傳與展示源碼filament/spatie-laravel-settings-plugin集成 Spatie Laravel Settings 的設(shè)置頁源碼filament/spatie-laravel-tags-plugin集成 Spatie Laravel Tags 的標(biāo)簽輸入與列源碼filament/spark-billing-providerSpark 計(jì)費(fèi)提供商源碼。??注意非 Filament 團(tuán)隊(duì)維護(hù)的插件由獨(dú)立作者創(chuàng)建與管理。雖然這些插件能增強(qiáng)你的體驗(yàn)但 Filament 無法保證其質(zhì)量、安全性、兼容性或維護(hù)狀態(tài)。官方建議在安裝前仔細(xì)審查插件的代碼、文檔與用戶反饋。官方與社區(qū)插件的完整列表可瀏覽 Filament 官網(wǎng)的插件目錄插件入門文檔 提供了開發(fā)插件的進(jìn)一步指引。插件能力在源碼中有充分體現(xiàn)例如 packages/panels/src/Panel.php 是 Panel 的構(gòu)建入口支持在 Panel 上注冊(cè)插件、資源、頁面與 widget各插件的ServiceProvider如SpatieLaravelSettingsPluginServiceProvider負(fù)責(zé)注冊(cè)其表單字段、表格列等擴(kuò)展。社區(qū)插件中絕大多數(shù)開源免費(fèi)也有部分付費(fèi)的優(yōu)質(zhì)插件通常附帶增強(qiáng)的客戶支持與質(zhì)量保證。定制外觀基于 Tailwind 的「語義化」設(shè)計(jì)系統(tǒng)Filament 使用 Tailwind CSS 作為基于 token 的設(shè)計(jì)系統(tǒng)但這里有一個(gè)關(guān)鍵差異Filament 組件渲染出的 HTML 并不直接使用 Tailwind 工具類而是把 Tailwind 工具類編譯成語義化 CSS 類如.fi-btn。這樣你就可以用自己的 CSS 精準(zhǔn)覆蓋這些語義類在 Filament 默認(rèn)設(shè)計(jì)之上疊加一層薄薄的樣式覆蓋無需編寫整套自定義樣式表也無需為每個(gè)組件維護(hù) HTML 副本。文檔給出的經(jīng)典例子是修改所有按鈕的圓角。Filament 源碼中按鈕的默認(rèn)樣式位于 packages/support/resources/css/components/button.css編譯前的源碼使用了 Tailwind 工具類.fi-btn { apply relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 align-middle text-sm font-medium transition duration-75 outline-none; }實(shí)際編譯產(chǎn)物即為文檔所展示的rounded-lg px-3 py-2 text-sm font-medium outline-none等規(guī)則。如果你希望把圓角調(diào)小為rounded-sm只需在自己的 CSS 文件中寫.fi-btn { apply rounded-sm; }這會(huì)用rounded-sm覆蓋默認(rèn)的rounded-lg同時(shí)保留按鈕的其他樣式屬性。從源碼看同一文件還定義了尺寸變體.fi-size-xs、.fi-size-sm、.fi-size-lg、.fi-size-xl、禁用態(tài).fi-disabled、描邊態(tài).fi-outlined等這些語義類同樣可以被覆蓋。該設(shè)計(jì)賦予了極高的外觀定制靈活性。更系統(tǒng)的定制方式見 自定義樣式文檔其中包含顏色、CSS 鉤子、圖標(biāo)等主題。測(cè)試為你的 Filament 應(yīng)用編寫測(cè)試Filament 的核心包在每次發(fā)布前都會(huì)經(jīng)過單元測(cè)試以保證穩(wěn)定性本倉庫的 tests 目錄即為佐證——測(cè)試按包劃分tests/src/Actions、tests/src/Forms、tests/src/Tables、tests/src/Panels、tests/src/Schemas、tests/src/Widgets等覆蓋了 action 模態(tài)、表單校驗(yàn)、表格列、schema 組件等核心行為并在 composer.json 的scripts中配置了針對(duì) SQLite / MySQL / PostgreSQL 三種數(shù)據(jù)庫的 Pest 測(cè)試命令如composer test:sqlite、composer test:mysql、composer test:pgsql。作為 Filament 用戶你也可以為基于 Filament 構(gòu)建的應(yīng)用編寫測(cè)試。Filament 提供了同時(shí)適用于 Pest 與 PHPUnit 測(cè)試套件的工具既能測(cè)試功能邏輯也能測(cè)試 UI 組件。當(dāng)你定制框架或?qū)崿F(xiàn)自定義功能時(shí)測(cè)試尤為關(guān)鍵即便只是驗(yàn)證基礎(chǔ)功能是否按預(yù)期工作測(cè)試同樣有價(jià)值。測(cè)試方法論詳見 測(cè)試文檔。備選方案如果 Filament 不適合你官方文檔也坦誠地列出了 Laravel 生態(tài)中一些優(yōu)秀的替代方案幫助你做技術(shù)選型覺得 Filament 太復(fù)雜Laravel Nova 是 Laravel 團(tuán)隊(duì)官方維護(hù)的項(xiàng)目是構(gòu)建 Laravel 管理后臺(tái)的輕量方案購買它同時(shí)也在支持 Laravel 框架的開發(fā)。不想用 Livewire 做任何定制Filament 的許多部分完全不需要你接觸 Livewire但構(gòu)建自定義組件時(shí)可能涉及。Laravel Nova 基于 Vue.js 與 Inertia.js 構(gòu)建如果你的項(xiàng)目需要大量定制且熟悉這些技術(shù)可能更合適。需要開箱即用的 CMSStatamic 是基于 Laravel 的 CMS適合需要易于安裝使用、且無需自行構(gòu)建管理后臺(tái)的場(chǎng)景。只想寫 Blade 視圖、后端自己處理Flux 是官方 Livewire UI 工具包提供一套預(yù)構(gòu)建、預(yù)樣式的 Blade 組件由維護(hù) Livewire 與 Alpine.js 的同一團(tuán)隊(duì)維護(hù)。下一步從安裝到開始構(gòu)建安裝與構(gòu)建流程在 安裝文檔 與 快速上手 中有完整介紹。簡(jiǎn)要路線如下在 Laravel 項(xiàng)目要求 PHP 8.2、Laravel v11.28、Tailwind CSS v4.1中運(yùn)行composer require filament/filament:^4.0與php artisan filament:install --panels生成并注冊(cè)app/Providers/Filament/AdminPanelProvider.php用php artisan make:filament-user創(chuàng)建用戶訪問/admin登錄進(jìn)入默認(rèn)儀表盤后通過Resources為模型生成 List / Create / Edit 三個(gè)頁面可選用 View 頁面、WidgetsPHP 類 Blade 視圖本質(zhì)是 Livewire 組件與自定義頁面同樣是全頁 Livewire 組件常用于設(shè)置頁、文檔等開始搭建你的應(yīng)用。理解本篇介紹的 SDUI 思想、包結(jié)構(gòu)與插件機(jī)制后你就可以在官方文檔指引下逐模塊深入學(xué)習(xí)表格、表單、schema 組件與 Panel 配置構(gòu)建出完整的生產(chǎn)級(jí)應(yīng)用。【免費(fèi)下載鏈接】filamentA powerful open-source UI framework for Laravel ? Build and ship apps admin panels fast with Livewire項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fi/filament創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考