آموزش سفارشی‌سازی (Customization) در Filament

در آموزش Filament، یکی از جنبه‌های کلیدی سفارشی‌سازی (Customization) در Filament نقش مهمی در ایجاد داشبوردها و پنل‌های مدیریت متناسب با نیازهای خاص پروژه‌ها دارد. این مقاله آموزشی جامع و کامل به شما کمک می‌کند تا با مفاهیم مختلف سفارشی‌سازی (Customization) در Filament از سطح مبتدی تا پیشرفته آشنا شوید. هم چنین آموزش Filament به شما این امکان را می‌دهد که پنل‌های مدیریت قدرتمندی برای پروژه‌های لاراول خود بسازید. یکی از ویژگی‌های برجسته Filament، قابلیت‌های گسترده آن در زمینه سفارشی‌سازی (Customization) در Filament است که به توسعه‌دهندگان امکان می‌دهد تا تجربه کاربری بهتری ارائه دهند.

شخصی‌سازی تم (Theme)

سفارشی‌سازی (Customization) در Filament از طریق تم‌ها یکی از مهم‌ترین جنبه‌های طراحی و توسعه پنل‌های مدیریت است. در این بخش، با روش‌های مختلفی آشنا می‌شوید که به کمک آن‌ها می‌توانید ظاهر، رنگ‌بندی و جلوه‌های بصری پنل خود را تغییر دهید تا تجربه کاربری جذاب‌تر و هماهنگ‌تری ارائه دهید.

استفاده از تم‌های پیش‌فرض

یکی از ساده‌ترین راه‌ها برای شروع سفارشی‌سازی (Customization) در Filament، استفاده از تم‌های پیش‌فرضی است که این فریمورک ارائه می‌کند. این تم‌ها به‌صورت پیش‌فرض همراه با نصب Filament در دسترس هستند و محیطی آماده را برای ساخت و مدیریت داشبوردها فراهم می‌کنند. در ادامه، نکاتی درباره استفاده از این تم‌ها و انجام تغییرات کوچک در آن‌ها ارائه شده است:

بررسی و انتخاب تم مناسب

Filament ممکن است به‌صورت پیش‌فرض از یک تم واحد یا چند تم ساده پشتیبانی کند. ابتدا، ظاهر کلی تم پیش‌فرض را بررسی کنید تا متوجه شوید آیا ساختار، رنگ‌بندی و چینش کلی آن با نیازهای پروژه شما هم‌خوانی دارد یا خیر.
اگر برای پروژه‌های آزمایشی یا کوچک کار می‌کنید، همین تم پیش‌فرض ممکن است تا حد زیادی نیازهایتان را برآورده کند.

ویرایش رنگ‌ها و اندازه‌ فونت‌ها

برای ایجاد تغییرات کوچک، اغلب کافی است رنگ‌های اصلی (Primary و Secondary) و اندازه یا نوع فونت را تغییر دهید.
همان‌طور که در مثال زیر آمده، می‌توانید مستقیماً در فایل‌های CSS سفارشی یا با استفاده از tailwind.config.js، رنگ‌ها و فونت‌های پایه را عوض کنید:

:root {
    --filament-color-primary: #4A90E2;
    --filament-color-secondary: #50E3C2;
}

یا در فایل tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#4A90E2',
        secondary: '#50E3C2',
      },
      fontFamily: {
        sans: ['IranSans', 'sans-serif'],
      },
    },
  },
}

پس از اعمال تغییرات، حتماً پروژه را کامپایل و ریفرش کنید تا نتیجه را ببینید.

استفاده از ساختارهای آماده

تم‌های پیش‌فرض Filament اغلب شامل ساختارهای آماده برای بخش‌های مختلف داشبورد (مانند منوهای کناری، هدر، فوتر، جداول و فرم‌ها) هستند. این ساختارهای از پیش تعریف‌شده به شما کمک می‌کنند که در سریع‌ترین زمان، یک داشبورد قابل‌استفاده داشته باشید.
شما می‌توانید با کمترین کدنویسی یا تغییر فایل‌های Blade مربوط به این ساختارها، چینش المان‌ها را مطابق نیازتان تغییر دهید.

سازگاری با زبان فارسی

در صورتی که پروژه شما فارسی است، ممکن است بخواهید فونت فارسی مناسبی را جایگزین فونت پیش‌فرض کنید و اندازه متن‌ها را برای خوانایی بهتر تنظیم کنید.
همچنین بررسی کنید که جهت نوشتار (RTL) به درستی پشتیبانی می‌شود. اگر نه، می‌توانید با وارد کردن فایل‌های سفارشی CSS یا استفاده از ویژگی‌های RTL در Tailwind این مشکل را رفع کنید.

کدنویسی کمتر، نتیجه سریع‌تر

یکی از مزیت‌های بزرگ استفاده از تم پیش‌فرض این است که شما نیازی ندارید همه‌چیز را از صفر طراحی کنید. با تمرکز روی تغییرات جزئی (مانند رنگ، فونت، فضاگذاری‌ها و اندازه‌ها)، می‌توانید سریعاً به نتیجه مطلوب برسید و در زمان خود صرفه‌جویی کنید.
اگر در آینده تصمیم گرفتید که تم خود را کاملاً سفارشی‌سازی یا حتی از صفر طراحی کنید، می‌توانید به‌راحتی تغییرات جدید را روی همین ساختار ابتدایی اعمال کنید.

ارتقا به تم سفارشی در آینده

پس از مدتی کار با تم پیش‌فرض، اگر احساس کردید به قابلیت‌ها یا طراحی منحصربه‌فردی نیاز دارید، می‌توانید به‌تدریج تم خود را توسعه دهید. این روند به شما کمک می‌کند ضمن یادگیری اصول سفارشی‌سازی (Customization) در Filament، به‌تدریج با کدها و ساختار داخلی این فریمورک آشنا شوید.
در نهایت، استفاده از تم‌های پیش‌فرض یک نقطه شروع مناسب برای افرادی است که تازه با Filament آشنا شده‌اند و می‌خواهند در کمترین زمان، یک پنل مدیریت کاربردی بسازند. با اعمال تغییرات کوچک و تدریجی روی این تم‌ها، می‌توانید مهارت خود در سفارشی‌سازی (Customization) در Filament را افزایش دهید و قدم به قدم به سمت ساخت یک تم کاملاً اختصاصی و پیشرفته حرکت کنید.

ساخت تم‌های کاملاً سفارشی

اگر نیازهای پروژه شما فراتر از تم‌های موجود باشد و قصد دارید کنترل کامل بر روی طراحی و نمایش پنل مدیریت خود داشته باشید، می‌توانید تم مخصوص به خود را از صفر ایجاد کنید. این فرایند به شما اجازه می‌دهد جزئی‌ترین بخش‌های ظاهر پنل را مطابق سلیقه و نیازمندی‌های پروژه‌تان سفارشی‌سازی کنید. در ادامه، مراحل کلی این کار را با جزئیات بیشتری توضیح خواهیم داد:

ایجاد فایل‌های CSS سفارشی

ابتدا در مسیر resources/css یا هر مسیر دلخواه دیگر، فایل‌هایی برای استایل‌های سفارشی خود ایجاد کنید؛ برای مثال:

resources/css/filament-custom.css

با استفاده از ابزارهایی مانند لاراول میکس (Laravel Mix) یا Vite، می‌توانید این فایل‌ها را به پروژه خود بیفزایید. این ابزارها وظیفه کامپایل، بهینه‌سازی و نسخه‌بندی فایل‌های CSS و JavaScript را بر عهده دارند.
در فایل اصلی پیکربندی (مثلاً webpack.mix.js یا vite.config.js)، مسیر فایل‌های سفارشی خود را مشخص کنید تا در زمان ساخت پروژه، این فایل‌ها کامپایل شوند.

تعریف متغیرهای CSS

یکی از بهترین راه‌ها برای حفظ هماهنگی و یکپارچگی در سفارشی‌سازی (Customization) در Filament، استفاده از متغیرهای CSS است. این متغیرها به شما کمک می‌کنند تا رنگ‌ها، اندازه‌ها و سایر مقادیر را در یک نقطه تعریف کرده و در سراسر پروژه از آن‌ها استفاده کنید.
به عنوان مثال، برای تعریف رنگ‌های اصلی (Primary و Secondary) در فایل filament-custom.css خود، می‌توانید از قطعه کد زیر استفاده کنید:

:root {
    --filament-color-primary: #4A90E2;
    --filament-color-secondary: #50E3C2;
}

با این روش، هرگاه تصمیم به تغییر رنگ‌های کلی پروژه گرفتید، کافی است این مقادیر را در یک محل ویرایش کنید تا در تمام بخش‌ها اعمال شود.

متصل کردن تم سفارشی

پس از آنکه فایل‌های CSS سفارشی خود را ایجاد و در فرآیند کامپایل قرار دادید، باید آن‌ها را به Filament معرفی کنید تا در پنل مدیریت اعمال شوند.
بسته به ساختار پروژه، می‌توانید از یکی از روش‌های زیر استفاده کنید:
وارد کردن مستقیم (Import) در Blade: در صورت تمایل، می‌توانید مستقیماً در فایل‌های Blade مربوط به Filament، فایل CSS خود را ایمپورت کنید:

<link rel="stylesheet" href="{{ mix('css/filament-custom.css') }}" />

استفاده از Service Provider:

در برخی از پروژه‌ها، برای اعمال سفارشی‌سازی‌ها ممکن است بخواهید از FilamentServiceProvider شخصی خود استفاده کنید.
متد Filament::serving() این امکان را به شما می‌دهد که هنگام بارگذاری Filament، فایل‌های CSS و JS سفارشی را نیز فراخوانی کنید.
برای مثال:

use Filament\Facades\Filament;

class FilamentServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Filament::serving(function () {
            Filament::registerStyles([
                mix('css/filament-custom.css'),
            ]);
        });
    }
}

با این روش، هر زمان که پنل Filament بارگذاری شود، استایل سفارشی شما نیز اعمال خواهد شد.

استفاده از پیکربندی Filament:

در فایل config/filament.php نیز می‌توانید آدرس فایل‌های استایل یا اسکریپت سفارشی را اضافه کنید (اگر نسخه Filament شما از این قابلیت پشتیبانی می‌کند).تلفیق با Tailwind CSSچون Filament از Tailwind CSS به‌صورت پیش‌فرض استفاده می‌کند، می‌توانید برای سفارشی‌سازی (Customization) در Filament از فایل پیکربندی Tailwind نیز استفاده کنید.
در فایل tailwind.config.js، رنگ‌ها و سایر خصوصیات مورد نیاز پروژه خود را اضافه یا بازنویسی کنید تا طراحی شما به‌صورت سیستماتیک و منسجم باقی بماند:

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./vendor/filament/**/*.blade.php",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#4A90E2',
        secondary: '#50E3C2',
      },
    },
  },
  plugins: [],
}

پس از ویرایش پیکربندی، با اجرای دستور npm run dev یا yarn dev تغییرات خود را اعمال کنید.

بررسی و تست واکنش‌گرایی (Responsiveness)

پس از متصل‌کردن تم سفارشی، حتماً پنل مدیریت خود را در صفحه‌نمایش‌های مختلف (موبایل، تبلت، دسکتاپ) تست کنید تا از درستی نمایش و سازگاری آن مطمئن شوید.
در صورت نیاز، می‌توانید برای حالت‌های مختلف شکست (Breakpoints)، کلاس‌های Tailwind یا استایل‌های سفارشی بیشتری تعریف کنید تا در ابعاد متفاوت، طراحی شما ایده‌آل باقی بماند.

اعمال تغییرات تکمیلی و بهبود طراحی

اکنون که چهارچوب تم سفارشی شما شکل گرفته است، می‌توانید با ایجاد تغییراتی در بخش‌های مختلف مانند منوها، جداول، فرم‌ها و کارت‌های داشبورد، تم خود را به شکلی منحصربه‌فرد درآورید.
تغییرات می‌تواند شامل استفاده از آیکن‌های سفارشی، انیمیشن‌های ساده با CSS یا سفارشی‌سازی کامل چیدمان (Layout) باشد.
با پیمودن این مراحل، شما می‌توانید تم کاملاً اختصاصی خود را برای Filament ایجاد کنید و هر بخشی از داشبورد مدیریتی را مطابق خواسته‌ها و الزامات پروژه طراحی نمایید. این سطح از سفارشی‌سازی (Customization) در Filament به شما کمک می‌کند تا یک هویت بصری منحصربه‌فرد بسازید و تجربه کاربری فوق‌العاده‌ای به مخاطبان خود ارائه دهید.

یکپارچه‌سازی با Tailwind CSS

Filament از Tailwind CSS به‌صورت پیش‌فرض استفاده می‌کند؛ به همین دلیل، شما می‌توانید بخش عمده‌ای از سفارشی‌سازی (Customization) در Filament را از طریق Tailwind انجام دهید. این فریمورک سبک وزنی از CSS است که با استفاده از کلاس‌های کمکی (Utility Classes) طراحی شده و امکان توسعه سریع و منظم رابط کاربری را فراهم می‌کند. در ادامه، نکات مهمی درباره یکپارچه‌سازی Filament با Tailwind CSS ارائه می‌شود:

پیکربندی فایل Tailwind

مهم‌ترین نقطه شروع برای سفارشی‌سازی Tailwind، فایل پیکربندی آن یعنی tailwind.config.js است.
با ویرایش این فایل، می‌توانید پالت رنگ پروژه، اندازه‌ها، فونت‌ها و حتی شیوه واکنش‌گرایی را مطابق نیازهای پنل مدیریت تنظیم کنید.
به‌طور پیش‌فرض، Filament بخشی از مسیرهای (paths) مورد نیاز برای جستجوی کلاس‌های Tailwind را در نظر گرفته است؛ اما اگر فایل پیکربندی Tailwind را شخصی‌سازی می‌کنید، مطمئن شوید که مسیرهای Blade مربوط به Filament را به بخش content یا purge اضافه کرده‌اید:

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./vendor/filament/**/*.blade.php",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#4A90E2',
        secondary: '#50E3C2',
      },
    },
  },
  plugins: [],
}

افزودن یا تغییر رنگ‌ها و سبک‌ها

در بخش theme.extend می‌توانید رنگ‌های جدیدی را معرفی کرده یا رنگ‌های پیش‌فرض را بازنویسی کنید. برای مثال، در نمونه کد بالا، رنگ‌های اصلی (primary) و ثانویه (secondary) تعریف یا تغییر داده شده‌اند تا ظاهر پنل مدیریت دقیقاً با هویت بصری پروژه همخوانی داشته باشد.
علاوه بر رنگ‌ها، می‌توانید فونت‌های سفارشی، اندازه‌های جدید برای حاشیه‌ها (padding و margin)، ارتفاع و عرض، و سایر تنظیمات دلخواه را اضافه کنید.

کامپایل و به‌روزرسانی

پس از انجام تنظیمات در فایل پیکربندی، لازم است بسته به ابزار ساخت پروژه، دستور مربوطه را برای کامپایل و به‌روزرسانی فایل‌های CSS اجرا کنید.
اگر از لاراول میکس (Laravel Mix) استفاده می‌کنید، اغلب دستور npm run dev یا npm run production به‌کار می‌رود. اگر از Vite استفاده می‌کنید، اجرای دستور npm run dev یا yarn dev تغییرات شما را کامپایل خواهد کرد.
پس از کامپایل، فایل‌های خروجی جدید در سراسر پروژه—including پنل مدیریت Filament—مورد استفاده قرار خواهند گرفت و تغییرات شما نمایان می‌شوند.

افزودن کلاس‌های سفارشی

ممکن است نیاز داشته باشید کلاس‌هایی کاملاً منحصربه‌فرد برای پروژه خود تعریف کنید. در این صورت، از فایل‌های CSS سفارشی در کنار Tailwind استفاده کنید یا از ویژگی‌های پیشرفته Tailwind مانند پلاگین‌ها بهره ببرید.
برای مثال، اگر بخواهید یک کلاس سفارشی برای استایل‌دهی به دکمه‌ها داشته باشید، می‌توانید این کلاس را در فایل‌های سفارشی یا پلاگین‌های داخلی تعریف کرده و از آن در پنل مدیریت استفاده کنید:

.btn-custom {
  @apply px-4 py-2 bg-primary text-white rounded;
}

مدیریت حالت تاریک (Dark Mode)

یکی از ویژگی‌های جذاب Tailwind امکان فعال‌سازی حالت تاریک (Dark Mode) است. اگر قصد دارید داشبورد Filament خود را با حالت تاریک نیز سازگار کنید، کافی است حالت تاریک را در فایل پیکربندی فعال نمایید:

module.exports = {
  darkMode: 'class', // or 'media'
  // سایر تنظیمات
}

سپس، در بخش‌های مختلف Blade (یا حتی ساختار Filament)، با قرار دادن کلاس dark در المنت والد (Wrapper)، استایل‌های تاریک اعمال می‌شوند. برای جزئیات بیشتر، می‌توانید از مستندات Tailwind استفاده کنید.

بهترین شیوه‌ها (Best Practices)

سازمان‌دهی کلاس‌ها: استفاده از کلاس‌های کمکی گاه باعث شلوغ شدن کدهای HTML می‌شود. بهتر است در مواقع نیاز، از الگوهای مناسب کدنویسی و گاهاً فایل‌های CSS سفارشی برای مدیریت بهتر استایل‌ها استفاده کنید.
هماهنگی با طراحی پروژه: مطمئن شوید کلاس‌های پایه‌ای که در Tailwind تعریف می‌کنید (مثل رنگ‌های اصلی، نوع و اندازه فونت) با هویت بصری سازمان یا پروژه شما سازگار باشند. این کار به حفظ یکپارچگی و انسجام طراحی کمک می‌کند.
به‌روزرسانی‌های منظم: کتابخانه Tailwind مرتباً به‌روزرسانی می‌شود و قابلیت‌های جدیدی به آن اضافه می‌شود. برای بهره‌گیری از آخرین امکانات و رفع باگ‌ها، بهتر است پروژه خود را در فواصل زمانی مناسب به‌روزرسانی کنید.

ترکیب با سایر ابزارها

اگر در پروژه خود از ابزارهای دیگری مانند Alpine.js یا Vue.js استفاده می‌کنید، مطمئن شوید در فایل پیکربندی Tailwind، مسیر فایل‌های آن‌ها نیز مشخص شده باشد تا کلاس‌های داینامیک شناسایی و اصطلاحاً Purge نشوند.
ترکیب Tailwind با این فریمورک‌های فرانت‌اند می‌تواند قدرت و انعطاف زیادی در طراحی صفحات مدیریت به شما بدهد.
با پیاده‌سازی صحیح این نکات، می‌توانید طراحی دلخواه خود را به شکلی انعطاف‌پذیر در سفارشی‌سازی (Customization) در Filament اعمال کرده و از امکانات گسترده Tailwind CSS برای توسعه سریع، منظم و واکنش‌گرای رابط کاربری بهره ببرید. این سطح از یکپارچه‌سازی به شما اطمینان می‌دهد که داشبورد مدیریتی‌تان نه‌تنها زیبا و منحصربه‌فرد باشد، بلکه تجربه کاربری ساده و بهینه‌ای را نیز برای مدیران و کاربران فراهم کند.

مدیریت حالت تاریک (Dark Mode)

یکی از جذاب‌ترین ویژگی‌های سفارشی‌سازی (Customization) در Filament، پشتیبانی از حالت تاریک (Dark Mode) است که به کاربران اجازه می‌دهد در صورت تمایل، از یک طرح رنگی تیره و با کنتراست بالا استفاده کنند. این قابلیت به بهبود تجربه کاربری، خصوصاً در محیط‌های کم‌نور یا هنگام کار طولانی‌مدت با داشبورد کمک شایانی می‌کند. در ادامه، روش‌های پیاده‌سازی حالت تاریک در Filament و نکات مهم مربوط به آن را بررسی می‌کنیم:

استفاده از ویژگی‌های بومی سیستم‌عامل با prefers-color-scheme

بسیاری از مرورگرهای مدرن از قابلیت تشخیص ترجیحات رنگی سیستم‌عامل پشتیبانی می‌کنند. با استفاده از Media Query زیر، می‌توانید به‌طور خودکار رنگ‌بندی تیره را در صورت تنظیم کاربر روی حالت تاریک اعمال کنید:

@media (prefers-color-scheme: dark) {
    :root {
        --filament-color-primary: #222831;
        --filament-color-secondary: #393E46;
    }
}

هر زمان که کاربر در سیستم‌عامل خود، حالت تاریک را فعال کند، رنگ‌های شما نیز به‌صورت خودکار تغییر می‌کنند.

پیکربندی حالت تاریک در Tailwind CSS

چون Filament از Tailwind CSS استفاده می‌کند، می‌توانید حالت تاریک را در فایل پیکربندی Tailwind (یعنی tailwind.config.js) نیز فعال کنید. دو حالت کلی برای Dark Mode در Tailwind وجود دارد:
darkMode: ‘media’: به‌صورت خودکار از Media Query prefers-color-scheme: dark تبعیت می‌کند.
darkMode: ‘class’: برای اعمال حالت تاریک نیاز است که کلاس dark را به المنت والد (مثلاً <html> یا <body>) اضافه کنید.
مثال پیکربندی:

module.exports = {
  darkMode: 'class', // یا 'media'
  theme: {
    extend: {
      colors: {
        primary: '#4A90E2',
        secondary: '#50E3C2',
      },
    },
  },
  plugins: [],
}

با darkMode: ‘class’، می‌توانید هر زمان که مایل بودید با جاوااسکریپت، کلاس dark را اضافه یا حذف کنید تا حالت تاریک فعال یا غیرفعال شود.

مدیریت دستی با دکمه سوئیچ (Toggle)

ممکن است کاربر بخواهد به‌صورت دستی بین حالت تاریک و روشن جابه‌جا شود، حتی اگر سیستم‌عامل او در حالت تاریک نباشد. در این صورت، می‌توانید از یک دکمه یا سوئیچ اختصاصی در پنل مدیریت استفاده کنید:

<button 
  onclick="document.documentElement.classList.toggle('dark')"
  class="px-4 py-2 bg-gray-300 rounded"
>
  Toggle Dark Mode
</button>

در این مثال، با کلیک روی دکمه، کلاس dark به تگ <html> اضافه یا حذف می‌شود. اگر darkMode: ‘class’ در فایل پیکربندی Tailwind فعال باشد، استایل‌های تاریک شما بلافاصله اعمال یا لغو خواهند شد.
برای حفظ انتخاب کاربر بین رفرش‌ها، می‌توانید حالت انتخاب‌شده را در Local Storage مرورگر ذخیره کنید و در بارگذاری مجدد صفحه دوباره آن را اعمال کنید.

پشتیبانی از RTL و زبان فارسی

اگر پروژه شما زبان فارسی و جهت نوشتار راست به چپ (RTL) را دارد، مطمئن شوید که در حالت تاریک نیز کلاس‌های مربوط به RTL به‌درستی اعمال می‌شوند. گاهی ممکن است کلاس‌های RTL و تاریک هم‌زمان نیاز به تعریف یا پیکربندی شوند تا تداخلی در چینش ایجاد نشود.
برخی از بسته‌های کمکی Tailwind برای RTL ممکن است حالت تاریک را نیز پشتیبانی کنند؛ پیش از آغاز سفارشی‌سازی، مستندات آن‌ها را بررسی کنید.

فایل‌های CSS سفارشی برای جزئیات بیشتر

علاوه بر Media Query یا کلاس dark، می‌توانید فایل‌های CSS سفارشی خود را نیز به‌کار ببرید. برای مثال، اگر بخواهید رنگ‌های خاصی در حالت تاریک برای عناصر مختلفی مانند دکمه‌ها، کارت‌ها یا فرم‌ها در نظر بگیرید، می‌توانید به این شکل عمل کنید:

.dark .filament-card {
    background-color: #1f1f1f;
    color: #fff;
}

این سطح از سفارشی‌سازی (Customization) در Filament به شما اجازه می‌دهد تا تم تاریک را به‌صورت منحصربه‌فرد و مطابق با نیازهای پروژه‌تان طراحی کنید.

بهترین شیوه‌ها (Best Practices)

همخوانی با طراحی کلی: حواستان باشد که رنگ‌بندی تاریک، همچنان با هویت بصری برند یا پروژه همخوانی داشته باشد و فقط روشنایی صفحه را کم نکند.
کنتراست کافی: در حالت تاریک، استفاده از رنگ‌های پررنگ و با کنتراست مناسب (مثلاً متن سفید در پس‌زمینه تیره) به خوانایی بهتر کمک می‌کند.
توجه به آیکون‌ها و تصاویر: گاهی اوقات آیکون‌ها یا تصاویری که برای حالت روشن طراحی شده‌اند، در حالت تاریک نامرئی یا غیرقابل رویت می‌شوند. بهتر است رنگ یا تم آیکون‌ها و تصاویر را نیز متناسب با حالت تاریک تغییر دهید.
تست در مرورگرها و دستگاه‌های مختلف: قابلیت حالت تاریک در مرورگرهای قدیمی‌تر ممکن است با محدودیت‌هایی مواجه باشد. همچنین بررسی کنید که المان‌ها در حالت موبایل نیز به شکل مطلوبی نمایش داده شوند.
با رعایت نکات بالا و بهره‌گیری از امکانات Tailwind CSS و Media Queryها، می‌توانید یک حالت تاریک (Dark Mode) کارآمد و زیبا برای داشبورد Filament خود پیاده‌سازی کنید. این امر نه‌تنها تجربه کاربری بهتری را برای کاربران علاقه‌مند به فضای تیره فراهم می‌کند، بلکه به پروژه شما کمک می‌کند تا در زمینه سفارشی‌سازی (Customization) در Filament حرفه‌ای‌تر و کامل‌تر ظاهر شود.

چند تم برای کاربردهای مختلف

در برخی پروژه‌ها، ممکن است تیم یا بخش‌های مختلفی با نیازمندی‌ها و سلیقه‌های متفاوت در یک پنل مدیریت فعالیت کنند. به عنوان مثال، تیم فروش (Sales) می‌تواند به تم خاصی با رنگ‌بندی متمایل به سبز و فونت‌های متفاوت نیاز داشته باشد، در حالی که تیم پشتیبانی (Support) تمی دیگر با رنگ‌بندی متمایل به آبی را ترجیح دهد. در این شرایط، سفارشی‌سازی (Customization) در Filament این امکان را به شما می‌دهد تا چند تم مجزا طراحی کرده و بر اساس نقش کاربر یا سناریوی مورد نظر، تم مناسب را بارگذاری کنید. در ادامه، مراحل و نکات کلیدی برای پیاده‌سازی این رویکرد توضیح داده می‌شوند:

ایجاد چند فایل CSS اختصاصی

اولین قدم، ایجاد فایل‌های CSS جداگانه برای هر نقش یا سناریو است. به عنوان مثال:

├── resources
│   └── css
│       ├── filament-sales.css   // مخصوص تیم فروش
│       ├── filament-support.css // مخصوص تیم پشتیبانی
│       └── filament-admin.css   // مخصوص مدیران

در هر کدام از این فایل‌ها، می‌توانید رنگ‌بندی، فونت و استایل‌هایی را که برای نقش یا بخش خاصی طراحی شده‌اند، تعریف کنید.
اگر از Tailwind CSS استفاده می‌کنید، می‌توانید در هر فایل CSS، تنها تغییرات اختصاصی را اعمال کنید و باقی تنظیمات مشترک (مثل پایه‌های طراحی) را در فایل‌های عمومی قرار دهید تا از تکرار بیهوده جلوگیری شود.

تشخیص نقش یا سناریو در سطح کنترلر یا Middleware

در مرحله بعد، باید مشخص کنید که هر کاربر با چه نقشی وارد پنل شده است یا به کدام بخش دسترسی دارد. این تشخیص معمولاً از طریق Middleware یا در سطح کنترلر انجام می‌شود.
به عنوان مثال، در یک Middleware می‌توانید نقش کاربر را بررسی کرده و متناسب با آن فایل استایل مناسب را به اپلیکیشن معرفی کنید:

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Filament\Facades\Filament;

class LoadDynamicTheme
{
    public function handle(Request $request, Closure $next)
    {
        $user = $request->user();
        
        // فرض می‌کنیم نقش کاربر در فیلد role ذخیره شده است
        switch ($user->role) {
            case 'sales':
                Filament::registerStyles([
                    mix('css/filament-sales.css'),
                ]);
                break;
            
            case 'support':
                Filament::registerStyles([
                    mix('css/filament-support.css'),
                ]);
                break;

            default:
                Filament::registerStyles([
                    mix('css/filament-admin.css'),
                ]);
                break;
        }

        return $next($request);
    }
}

در این مثال ساده، نقش کاربر از روی فیلد role تشخیص داده می‌شود و متناسب با آن، فایل CSS تم موردنظر از طریق متد Filament::registerStyles() لود می‌شود. همچنین می‌توانید در کنترلرهای خاص Filament یا در سرویسی مانند FilamentServiceProvider این کار را انجام دهید.

یکپارچگی و هماهنگی در تعریف متغیرهای CSS

برای این که مدیریت چندین تم آسان‌تر شود، بهتر است ساختار و قواعد یکسانی را برای تعریف متغیرهای CSS (مثلاً رنگ‌های اصلی، اندازه فونت‌ها و سایر مقادیر پایه) در نظر بگیرید.

به عنوان مثال، در هر فایل تم، متغیرهای اصلی را با نامی یکسان تعریف کنید:

/* filament-sales.css */
:root {
    --filament-color-primary: #28a745;  /* رنگ سبز برای تیم فروش */
    --filament-color-secondary: #6c757d;
    --filament-font-family: 'Vazirmatn', sans-serif;
}
/* سایر استایل‌های تخصصی برای تیم فروش */

/* filament-support.css */
:root {
    --filament-color-primary: #007bff;  /* رنگ آبی برای تیم پشتیبانی */
    --filament-color-secondary: #343a40;
    --filament-font-family: 'Vazirmatn', sans-serif;
}
/* سایر استایل‌های تخصصی برای تیم پشتیبانی */

 

این کار باعث می‌شود که فقط مقادیر متغیرها در تم‌های مختلف عوض شوند و باقی ساختار CSS (از جمله کلاس‌های مشترک) ثابت بماند. در نتیجه، نگهداری و تغییر بعدی این تم‌ها آسان‌تر خواهد بود.

رعایت اصول DRY (Don’t Repeat Yourself)

تلاش کنید بخش‌های مشترک در فایل‌های تم را به یک فایل عمومی منتقل کنید تا از تکرار کد جلوگیری شود. در واقع، می‌توانید یک فایل CSS پایه با نامی مثل filament-base.css ایجاد کنید که حاوی قواعد عمومی و غیرقابل تغییر است. سپس، در هر فایل تم اختصاصی، فقط مقادیر و استایل‌های خاص آن تم را تعریف نمایید.
این رویکرد سبب می‌شود اگر نیاز به تغییر در ساختار کلی داشبورد دارید (برای مثال تغییر در کلاس کلی کارت‌ها، یا اضافه‌کردن انیمیشن خاص)، تنها یک بار کدنویسی انجام شود.

بررسی و تست در چند نقش مختلف

پس از پیاده‌سازی چند تم، از کاربران مختلف با نقش‌های متفاوت بخواهید وارد سیستم شوند و ببینند آیا تم مختص آن‌ها بارگذاری می‌شود یا خیر.
بررسی کنید که آیا استایل‌های نقش‌های مختلف با یکدیگر تداخلی ایجاد نمی‌کند و همه چیز مطابق انتظار کار می‌کند.

ترکیب با سایر قابلیت‌ها

اگر پروژه شما بین‌المللی است یا کاربرانی با زبان‌ها و جهت‌های نوشتاری گوناگون (مثلاً راست‌به‌چپ و چپ‌به‌راست) دارد، شاید بخواهید تم‌های مختلف را با تنظیمات RTL یا LTR نیز ترکیب کنید.
همچنین می‌توانید حالت تاریک (Dark Mode) را برای هر تم به‌طور جداگانه مدیریت کنید تا کاربران هر نقش، یک نسخه تیره مجزا از تم خود را داشته باشند.
با پیاده‌سازی این روش، پنل مدیریت شما برای سناریوها و نقش‌های مختلف قابلیت انعطاف پیدا می‌کند. این امر به تیم‌های متفاوت اجازه می‌دهد در محیطی منحصربه‌فرد، اما همچنان سازگار با ساختار کلی پروژه، فعالیت کنند. در نهایت، مدیریت چند تم برای کاربردهای مختلف بخش مهمی از سفارشی‌سازی (Customization) در Filament محسوب می‌شود و می‌تواند کارایی و جذابیت پنل مدیریتی شما را به شکل قابل توجهی ارتقا دهد.

کامپوننت‌های سفارشی

یکی از قدرتمندترین قابلیت‌های سفارشی‌سازی (Customization) در Filament، امکان ایجاد کامپوننت‌های سفارشی است. این کامپوننت‌ها به شما اجازه می‌دهند تا منطق و ظاهر مورد نیاز پروژه‌تان را در قالب اجزای مجزا در دسترس داشته باشید و بارها از آن‌ها در بخش‌های مختلف استفاده کنید. نتیجه این کار، کاهش تکرار کد، بهبود ساختار پروژه و افزایش سرعت توسعه خواهد بود. در ادامه، با جزئیات بیشتری درباره نحوه ایجاد و استفاده از کامپوننت‌های سفارشی در Filament آشنا می‌شوید:

دلایل استفاده از کامپوننت‌های سفارشی

استفاده از کامپوننت‌های سفارشی در سفارشی‌سازی (Customization) در Filament دلایل متعددی دارد که در نهایت به بهبود کیفیت و تسهیل روند توسعه پروژه منجر می‌شود. در ادامه، مهم‌ترین مزایای این رویکرد شرح داده می‌شوند:

تمرکز بر منطق تجاری

در بسیاری از پروژه‌ها، بخش‌هایی از کد تکراری و یا دارای منطق پیچیده هستند که به صورت مکرر در نقاط مختلف داشبورد استفاده می‌شوند.
با تبدیل این بخش‌ها به کامپوننت‌های مجزا، تنها یک مرتبه منطق تجاری مورد نیاز را پیاده‌سازی می‌کنید. هر زمان به المان مشابهی احتیاج داشته باشید، کافی است همان کامپوننت را فراخوانی کنید.
این رویکرد باعث کاهش حجم کد تکراری و افزایش شفافیت می‌شود، چرا که تمام جزئیات منطق در یک مکان واحد مدیریت می‌شوند.

افزایش انعطاف‌پذیری

در طول توسعه یک پروژه، ممکن است نیازهای جدیدی پیش بیایند یا بخواهید ویژگی‌های اضافی مانند تنظیمات اعتبارسنجی اختصاصی، استایل خاص، یا حتی رفتارهای دینامیک را به یک المان اضافه کنید.
هنگامی که از کامپوننت سفارشی استفاده می‌کنید، به‌روزرسانی یا گسترش ویژگی‌های آن فقط در یک نقطه (کلاس کامپوننت) صورت می‌گیرد. به این ترتیب، همه جای پروژه که این کامپوننت استفاده شده، به‌طور خودکار به‌روزرسانی می‌شوند.
این ویژگی به‌ویژه زمانی ارزشمند است که پروژه شما بزرگ باشد یا کامپوننت در بخش‌های متعددی از داشبورد به‌کار گرفته شده باشد.

قابلیت نگهداری بالا

هر تغییری که در کامپوننت سفارشی رخ دهد—مانند رفع یک باگ، بهبود عملکرد یا افزودن یک قابلیت جدید—به‌صورت متمرکز انجام می‌شود. این امر ردیابی مشکلات احتمالی و اصلاح آن‌ها را بسیار ساده‌تر می‌کند.
به جای جستجو در بخش‌های مختلف کد برای یافتن فیلد یا کامپوننت مشابه، تنها به کلاس کامپوننت سفارشی مراجعه می‌کنید و تغییرات لازم را اعمال می‌کنید.
این رویکرد باعث صرفه‌جویی در زمان توسعه و افزایش کیفیت نهایی محصول می‌شود. همچنین اگر در آینده تیم توسعه بزرگ‌تر شود یا تغییراتی در اعضای تیم رخ دهد، ساختار کد مبتنی بر کامپوننت به راحتی قابل فهم و گسترش است.
به طور کلی، کامپوننت‌های سفارشی باعث می‌شوند تا در سفارشی‌سازی (Customization) در Filament، کد شما ساختارمندتر، خواناتر و منعطف‌تر باشد. این ویژگی‌ها در پروژه‌های بزرگ اهمیت بیشتری پیدا می‌کنند، زیرا مدیریت و نگهداری کد راحت‌تر خواهد شد و روند توسعه نیز سریع‌تر پیش می‌رود.

نحوه ایجاد کامپوننت سفارشی

در Filament می‌توانید برای بخش‌های مختلف از جمله فرم‌ها، جداول و حتی المان‌های رابط کاربری دیگر، کامپوننت‌های سفارشی ایجاد کنید. این قابلیت به شما امکان می‌دهد اجزای داشبورد خود را مطابق نیازهای خاص پروژه سفارشی‌سازی کنید و از توسعه تکراری جلوگیری نمایید. در ادامه مراحل و نکات مهم در ساخت یک کامپوننت سفارشی را شرح می‌دهیم:

انتخاب کلاس پایه مناسب

پیش از هر چیز، باید مشخص کنید قصد دارید کدام نوع کامپوننت را سفارشی‌سازی کنید؛ برای مثال، یک فیلد فرم متنی، یک گزینه انتخاب (Select)، یا یک ستون در جدول.
Filament کلاس‌های پایه متنوعی را ارائه می‌دهد که نام‌های آن‌ها غالباً گویا هستند (مانند TextInput، DatePicker، Select، Table, و غیره). هدف و رفتار هر کامپوننت در مستندات رسمی Filament توضیح داده شده است.

ایجاد یک کلاس جدید و ارث‌بری از کلاس پایه

زمانی که کلاس پایه مناسب را شناسایی کردید، باید کلاسی جدید در مسیر دلخواه پروژه خود—مثلاً در پوشه app/Filament/Components— ایجاد کنید و از کلاس پایه Filament ارث‌بری نمایید.
ساختار کلی فایل به صورت زیر خواهد بود:

<?php

namespace App\Filament\Components;

use Filament\Forms\Components\TextInput;

class CustomTextInput extends TextInput
{
    protected function setUp(): void
    {
        parent::setUp();
        
        // سفارشی‌سازی‌ها
    }
}

با این کار، تمام ویژگی‌ها و قابلیت‌های کامپوننت پایه را به ارث می‌برید و می‌توانید آن‌ها را مطابق نیازتان اصلاح یا تکمیل کنید.

افزودن و تنظیم ویژگی‌های سفارشی در متد setUp()

متد setUp() نقطه مناسبی برای انجام تنظیمات اولیه (Initialization) کامپوننت است.
در این متد، ابتدا parent::setUp() را فراخوانی کنید تا Filament بتواند پیش‌فرض‌های کامپوننت را اعمال کند. سپس هر تنظیم سفارشی که می‌خواهید، مانند برچسب (Label)، اعتبارسنجی، رنگ، یا استایل را اضافه کنید.
در مثال زیر، متدهای label() و required() روی فیلد متنی تنظیم شده‌اند تا این فیلد همیشه برچسب فارسی «فیلد سفارشی» داشته باشد و ورود مقدار در آن الزامی باشد:

protected function setUp(): void
{
    parent::setUp();
    $this->label('فیلد سفارشی');
    $this->required();
}

آشنایی با سایر متدهای پیکربندی

کلاس‌های پایه Filament متدهای مختلفی برای پیکربندی ویژگی‌ها دارند؛ برای مثال:
placeholder() برای تعیین متن نمایشی در فیلد
minLength() و maxLength() برای کنترل طول ورودی
mask() برای تعیین ساختار ورودی (مانند شماره تلفن یا کد ملی)
default() برای مشخص‌کردن مقدار پیش‌فرض و بسیاری متدهای دیگر
با بررسی مستندات Filament، می‌توانید متدهایی را که برای پروژه خود نیاز دارید، پیدا کرده و در کلاس سفارشی از آن‌ها استفاده کنید.

صرفه‌جویی در زمان و بهبود ساختار کد

اگر پروژه شما دارای چندین فیلد متنی مشابه است که باید همگی برچسب فارسی و ویژگی الزامی داشته باشند، تعریف این تنظیمات در یک کامپوننت سفارشی باعث صرفه‌جویی در زمان و جلوگیری از تکرار می‌شود.
هر تغییری که در کلاس CustomTextInput ایجاد کنید، بلافاصله در تمامی فیلدهایی که از آن استفاده می‌کنند، اعمال خواهد شد.

گسترش رفتار کامپوننت

گاهی نیاز دارید رفتار و منطق کامپوننت را فراتر از تغییر تنظیمات پیش‌فرض گسترش دهید. به عنوان مثال، ممکن است بخواهید در هنگام رندر شدن، یک رویداد خاص را اجرا کنید یا در صورت بروز خطا، پیام سفارشی نشان دهید. در چنین مواردی، می‌توانید متدهای داخلی کلاس پایه را Override یا متدهای جدیدی اضافه کنید تا منطق اختصاصی خود را پیاده‌سازی نمایید.

اتصال و استفاده از کامپوننت سفارشی در پروژه

پس از ایجاد کامپوننت سفارشی، برای استفاده از آن کافی است کلاس آن را در بخش‌های مختلف پروژه (مانند Resource یا فرم‌های دیگر) ایمپورت کرده و مشابه سایر کامپوننت‌های پیش‌فرض Filament صدا بزنید:

use App\Filament\Components\CustomTextInput;

CustomTextInput::make('custom_field')
    ->maxLength(255);

در این مثال، می‌توانید علاوه بر ویژگی‌های از پیش تعریف‌شده (مانند required() یا برچسب فارسی)، ویژگی‌های جدیدی را نیز در این محل اضافه کنید.

تست، دیباگ و نگهداری

پس از ایجاد و استفاده از کامپوننت سفارشی، اطمینان حاصل کنید که در وضعیت‌های مختلف (ورود یا عدم ورود داده، ورود داده نادرست، تغییر زبان، و غیره) به‌درستی عمل می‌کند.
اگر ایرادی یافتید یا قصد افزودن ویژگی جدیدی داشتید، تغییرات را مستقیماً در کلاس کامپوننت سفارشی اعمال کنید. بدین ترتیب، تمام مکان‌هایی که از آن کامپوننت استفاده می‌کنند، به‌روزرسانی خواهند شد.
با رعایت این مراحل، می‌توانید کامپوننت‌های سفارشی مورد نیاز خود را در Filament بسازید و سفارشی‌سازی (Customization) در Filament را به شکلی تمیز، ساختاریافته و قابل نگهداری انجام دهید. این روش به‌ویژه در پروژه‌های بزرگ و پیچیده، موجب صرفه‌جویی در زمان و بهبود انسجام کد می‌شود.

ترجمه و زبان‌ها

سفارشی‌سازی (Customization) در Filament شامل پشتیبانی از چند زبان و قابلیت ترجمه است تا بتوانید پنل مدیریت خود را برای مخاطبان جهانی در دسترس قرار دهید. از طریق این ویژگی، می‌توانید متن‌ها، پیام‌ها، برچسب‌ها (Labels) و هر عنصر متنی دیگر را به زبان‌های مختلف ترجمه کنید. در ادامه، نحوه فعال‌سازی و پیکربندی چندزبانه‌بودن در Filament را توضیح می‌دهیم.

مبانی Localization در لاراول و Filament

Filament بر پایه لاراول کار می‌کند و از سیستم Localization لاراول برای ترجمه متن‌ها استفاده می‌کند. در لاراول، فایل‌های ترجمه معمولاً در پوشه resources/lang قرار می‌گیرند و زیرپوشه‌های آن معرف زبان‌های مختلف است (برای مثال: fa برای فارسی، en برای انگلیسی).
هر زبان می‌تواند چند فایل ترجمه داشته باشد که کلید (Key) و مقدار (Value) متن‌های ترجمه را تعیین می‌کنند. برای مثال، در پوشه resources/lang/fa/messages.php، می‌توانید یک آرایه برگردانید که کلیدهای متن و مقادیر فارسی آن را در خود جای دهد.

ایجاد پوشه و فایل‌های ترجمه

برای اضافه‌کردن زبان فارسی، کافی است در مسیر resources/lang یک پوشه جدید با نام fa بسازید:

resources
└── lang
    └── fa
        ├── auth.php
        ├── pagination.php
        ├── validation.php
        └── messages.php

در این پوشه، می‌توانید فایل‌های متعددی را برای ساختاردهی بهتر ترجمه‌ها ایجاد کنید (مثلاً فایل‌های auth.php، validation.php یا messages.php). هر فایل شامل یک آرایه از کلید-مقدارهای ترجمه‌ شده است. مثلاً در messages.php ممکن است داشته باشید:

<?php

return [
    'welcome' => 'خوش آمدید!',
    'login'   => 'ورود',
    // سایر کلیدها...
];

اگر قصد دارید برای بخش‌های مختلف پروژه فایل‌های جداگانه داشته باشید، می‌توانید آن‌ها را ایجاد کنید و از کلیدهای تودرتو (Nested Keys) یا نام‌گذاری منظم استفاده کنید.

تنظیم زبان پیش‌فرض در Filament

با ایجاد فایل‌های ترجمه زبان فارسی، مرحله بعد تنظیم Filament برای استفاده از این زبان است. کافی است در فایل پیکربندی Filament (واقع در config/filament.php) مقدار کلید locale را تغییر دهید:

'locale' => 'fa',

با این کار، Filament به‌صورت پیش‌فرض زبان فارسی را در پنل مدیریت شما اعمال می‌کند.

استفاده از بسته‌های ترجمه آماده

گاهی اوقات جامعه توسعه‌دهندگان یا خود Filament بسته‌های آماده‌ای برای برخی زبان‌ها عرضه می‌کنند. این بسته‌ها می‌توانند در پوشه vendor قرار گرفته و شامل فایل‌های ترجمه آماده برای کلیدهای استاندارد Filament باشند.
برای بهره‌مندی از این بسته‌ها، می‌توانید آن‌ها را از طریق Composer نصب کرده و سپس در صورت نیاز، شخصی‌سازی‌های دلخواه خود را اعمال کنید. این روش باعث صرفه‌جویی در زمان می‌شود و سرعت راه‌اندازی پروژه‌های چندزبانه را افزایش می‌دهد.

ترجمه اختصاصی و تکیه بر کلیدهای سفارشی

چنانچه در پروژه خود متن‌های سفارشی دارید (مثلاً عبارت‌های منحصربه‌فرد برای دکمه‌ها یا پیام‌های موفقیت)، بهتر است کلیدهای مربوط به آن‌ها را در فایل‌های ترجمه اختصاصی تعریف کنید.
در Blade یا سایر بخش‌های پروژه می‌توانید با استفاده از تابع کمکی __() یا @lang از این کلیدها بهره ببرید. مثال:

<h1>{{ __('messages.welcome') }}</h1>

در نتیجه، اگر فایل ترجمه مناسب وجود داشته باشد و زبان جاری به درستی تنظیم شده باشد، متن فارسی را نمایش خواهد داد.

تغییر زبان به‌صورت دینامیک

در برخی پروژه‌ها، نیاز دارید که کاربران بتوانند زبان پنل مدیریت را به‌صورت دستی تغییر دهند. برای این کار می‌توانید در روت یا کنترلر مربوطه زبان را تغییر دهید:

App::setLocale('fa');

همچنین برخی توسعه‌دهندگان از ویژگی locale در Session یا مدل‌های کاربر برای ذخیره انتخاب زبان استفاده می‌کنند تا هنگام ورود مجدد، تنظیمات زبان حفظ شود.
در سطح Filament، می‌توانید از Service Provider یا Middleware سفارشی استفاده کنید تا زبان را بر اساس نقش کاربر، تنظیمات پروفایل یا پارامترهایی در URL تغییر دهید.

نکات و بهترین شیوه‌ها

هماهنگی با راست‌به‌چپ (RTL): برای زبان‌هایی مانند فارسی و عربی که جهت نوشتار از راست به چپ است، اطمینان حاصل کنید که تم (Theme) شما و کلاس‌های CSS مرتبط برای RTL فعال باشند. Filament با Tailwind CSS ترکیب می‌شود و بسته‌هایی برای RTL در دسترس هستند که می‌توانید استفاده کنید.
حفظ یکپارچگی کلیدها: سعی کنید برای اجتناب از سردرگمی، ساختار کلیدهای ترجمه را در طول پروژه یکپارچه نگه دارید. بهتر است از دسته‌بندی و نام‌گذاری گویا استفاده کنید.
مدیریت فایل‌های ترجمه حجیم: اگر پروژه شما بسیار بزرگ است، امکان دارد فایل‌های ترجمه حجیم شوند. توصیه می‌شود آن‌ها را بر اساس ماژول یا زمینه‌های مختلف شکسته و نگهداری کنید تا مدیریتشان ساده‌تر شود.
پیش‌بینی حالت پیش‌فرض (Fallback Locale): لاراول از مکانیزم Fallback Locale پشتیبانی می‌کند. یعنی اگر ترجمه‌ای برای یک کلید در زبان فعلی یافت نشود، به زبان پیش‌فرض پروژه مراجعه می‌کند. اطمینان حاصل کنید که این مقدار نیز در فایل config/app.php یا config/filament.php به درستی تنظیم شده باشد.

با طی این مراحل، می‌توانید پنل مدیریت Filament خود را به سادگی چندزبانه کنید و تجربه کاربری بهتری را برای افرادی از فرهنگ‌ها و زبان‌های مختلف فراهم سازید. این سطح از سفارشی‌سازی (Customization) در Filament، برای پروژه‌های بین‌المللی یا سازمان‌هایی که مخاطبان چندزبانه دارند بسیار حیاتی است.

توضیحات تکمیلی

استفاده از CSS و JavaScript سفارشی

یکی از بهترین راه‌های سفارشی‌سازی (Customization) در Filament، اضافه‌کردن فایل‌های CSS و JavaScript سفارشی برای تقویت ظاهر و رفتار پنل مدیریت است. در برخی پروژه‌ها، نیاز دارید جلوه‌های بصری یا تعاملات کاربری ویژه‌ای را پیاده‌سازی کنید که فراتر از امکانات پیش‌فرض Filament است. در چنین شرایطی، می‌توانید مراحل زیر را دنبال کنید:

ایجاد فایل‌های سفارشی

در مسیر resources/css یک فایل جدید برای استایل سفارشی خود (مثلاً filament-custom.css) بسازید. برای اسکریپت‌های جاوااسکریپت نیز می‌توانید فایل‌های موردنظر را در مسیر resources/js قرار دهید.
این فایل‌ها را می‌توانید با ابزاری مانند لاراول میکس (Laravel Mix) یا Vite کامپایل و کوچک‌سازی (Minify) کنید تا در مرحله تولید (Production) از کارایی بهتری برخوردار باشند.

متصل کردن فایل‌های سفارشی به Filament

بسته به ساختار پروژه، می‌توانید در فایل‌های Blade مربوط به Filament یا در متدهای Service Provider (مانند Filament::serving()) فایل‌های CSS و JS خود را لود کنید.
مثلاً در یک Service Provider سفارشی:

use Filament\Facades\Filament;

Filament::serving(function () {
    Filament::registerStyles([
        mix('css/filament-custom.css'),
    ]);
    Filament::registerScripts([
        mix('js/filament-custom.js'),
    ]);
});

با این روش، هر بار که پنل Filament بارگذاری شود، فایل‌های سفارشی شما نیز اعمال خواهند شد.

افزودن انیمیشن‌ها و رفتارهای تعاملی

اگر قصد دارید به کلیک یک دکمه یا رویداد خاصی واکنش نشان دهید، با نگارش کدهای JS سفارشی می‌توانید رفتار مورد نظر را پیاده کنید (برای مثال، نمایش یک مودال سفارشی یا ارسال درخواست Ajax).
در فایل CSS سفارشی، می‌توانید استایل‌های خاصی (مانند انیمیشن‌های CSS، آیکن‌های دلخواه، سایز فونت اختصاصی و …) را تعریف کنید تا شکل و شمایل داشبورد دقیقاً مطابق نیاز شما باشد.

ملاحظات امنیتی و نگهداری

هنگام افزودن فایل‌های JS سفارشی، اطمینان یابید که حفره‌های امنیتی (مانند XSS) در نظر گرفته شده باشد. هرگز داده‌های کاربر را بدون اعتبارسنجی یا سانیتایزکردن مستقیماً وارد کد اسکریپت نکنید.
اگر پروژه شما بزرگ است، توصیه می‌شود فایل‌های سفارشی را برای هر ماژول یا بخش خاص تفکیک کنید تا نگهداری و اصلاح آن‌ها ساده‌تر شود.

مدیریت دسترسی‌ها و نقش‌ها

سفارشی‌سازی (Customization) در Filament فراتر از تغییرات ظاهری است و می‌تواند کنترل دقیقی بر دسترسی کاربران به بخش‌های مختلف داشبورد ایجاد کند. بسیاری از پروژه‌ها نیاز دارند که کاربران با نقش‌ها و سطوح دسترسی متفاوت وارد شوند و تنها به ماژول‌های مجاز دسترسی داشته باشند.

تعریف نقش‌ها (Roles) و مجوزها (Permissions)

در لایه بکند (Backend)، معمولاً از پکیج‌های مدیریت نقش و مجوز (نظیر spatie/laravel-permission) استفاده می‌شود. با این پکیج‌ها می‌توانید نقش‌های مختلف (مثلاً Admin، Editor، Viewer) و مجوزهای ریزتر (مثل ویرایش پست، حذف کاربر، مشاهده گزارش‌ها و …) را تعریف کنید.
سپس کاربران را به نقش‌های مشخص یا مجموعه‌ای از مجوزها تخصیص می‌دهید تا هنگام ورود تشخیص داده شود که کدام قسمت‌های داشبورد در دسترس آن‌ها قرار دارد.

ادغام با Filament

Filament این امکان را فراهم می‌کند که در منابع (Resources) و صفحات (Pages) مختلف، دسترسی‌ها را کنترل کنید. برای مثال، می‌توانید در کلاس Resource یا Service Provider مخصوص Filament تعیین کنید که کدام نقش‌ها مجاز به دیدن یک منو یا انجام یک عمل خاص هستند.
وقتی کاربر با سطح دسترسی پایین (مثلاً یک کاربر عادی) وارد می‌شود، گزینه‌های مدیریتی پیشرفته را نخواهد دید؛ اما اگر با نقش Admin وارد شود، تمام قابلیت‌ها برایش فعال خواهد بود.

مثال عملی

فرض کنید یک Resource به نام PostResource دارید که نیاز است تنها Admin بتواند پست‌ها را حذف کند، اما Editor بتواند آن‌ها را ویرایش کند. با ترکیب کردن قواعد نقش و مجوز در متدهای Resource (مثلاً canDelete(), canEdit())، می‌توانید این سطوح دسترسی را به‌راحتی کنترل کنید.
در صورت تلاش یک کاربر برای دسترسی به عملی فراتر از مجوزش، معمولاً با پیغام خطا یا صفحه «عدم دسترسی» روبه‌رو می‌شود.

افزایش امنیت کلی پروژه

با تنظیم دقیق دسترسی‌ها و نقش‌ها، پنل مدیریت در برابر دسترسی‌های غیرمجاز حفاظت می‌شود. همچنین، با به‌روزرسانی‌ها و تغییرات در ساختار تیم (مثلاً اضافه‌شدن یک کاربر جدید)، می‌توانید به‌سرعت نقش مرتبط را به فرد تخصیص دهید و نیازی به تغییرات اساسی در کد نداشته باشید.

استفاده از پلاگین‌ها و اکستنشن‌ها

Filament اکوسیستمی در حال رشد دارد و یکی از نقاط قوت آن، پشتیبانی از پلاگین‌ها و اکستنشن‌های متعدد است. این ابزارها به توسعه‌دهندگان اجازه می‌دهد تا ویژگی‌های اضافی و کاربردی را به پنل مدیریت خود اضافه کنند.

پیدا کردن پلاگین‌های مناسب

برای یافتن پلاگین‌های متنوع، می‌توانید به مخزن گیت‌هاب Filament یا وب‌سایت رسمی مراجعه کنید. گاهی هم جامعه کاربری، پلاگین‌هایی را در GitHub شخصی خود منتشر می‌کند.
پلاگین‌ها ممکن است قابلیت‌هایی مانند ایجاد گزارش‌های پیشرفته، اتصال به درگاه پرداخت، اجرای عملیات انبوه (Bulk Actions) در جداول، و غیره را به پروژه اضافه کنند.

نصب و راه‌اندازی آسان

اغلب پلاگین‌های Filament با استفاده از Composer نصب می‌شوند. پس از نصب، ممکن است نیاز باشد پکیج را با فرمان php artisan vendor:publish پابلیش کنید یا برخی تنظیمات را در فایل پیکربندی Filament قرار دهید.
پس از نصب موفق، می‌توانید از کلاس‌ها و قابلیت‌های پلاگین در پروژه خود بهره ببرید؛ برای مثال، در Resourceهای جدید یا موجود، فرم‌ها یا جداول اضافی را با پلاگین راه‌اندازی کنید.

سفارشی‌سازی پلاگین‌ها

اگر پلاگینی دقیقاً مطابق میل شما نباشد، می‌توانید با نگاهی به مستندات یا کد منبع آن، بخش‌های مورد نیاز را سفارشی‌سازی یا حتی Override کنید.
برخی پلاگین‌ها هم خودشان متدهای پیکربندی و Hookهای متعدد دارند که امکان اعمال تغییرات دلخواه را فراهم می‌کنند.

گسترش قابلیت‌ها بدون بازنویسی از صفر

مزیت بزرگ پلاگین‌ها این است که بسیاری از نیازهای رایج توسعه‌دهندگان را از پیش پیاده‌سازی کرده‌اند. به‌جای صرف وقت و انرژی برای ساخت یک سیستم بارگذاری فایل پیشرفته یا یک ماژول آمارگیری، می‌توانید از پلاگین‌های آماده بهره ببرید.
این کار موجب تسریع توسعه، کاهش احتمال بروز خطا و متمرکزکردن تلاش‌های تیم روی هسته اصلی پروژه می‌شود.
با در نظر گرفتن موارد فوق، سفارشی‌سازی (Customization) در Filament تنها محدود به جنبه‌های ظاهری نیست و ابعاد گوناگونی از جمله یکپارچه‌سازی فایل‌های سفارشی، مدیریت نقش‌ها و دسترسی‌ها و همچنین استفاده از پلاگین‌ها و اکستنشن‌ها را در بر می‌گیرد. بهره‌گیری هوشمندانه از این امکانات می‌تواند پنل مدیریت شما را به ابزاری قدرتمند، کاربردی و منعطف برای پروژه‌های مختلف تبدیل کند.

نتیجه‌گیری

سفارشی‌سازی (Customization) در Filament با ارائه امکاناتی مانند شخصی‌سازی تم، ایجاد کامپوننت‌های سفارشی، مدیریت زبان‌ها و نقش‌ها، و همچنین استفاده از پلاگین‌های گوناگون، بستری قدرتمند برای توسعه پنل‌های مدیریت فراهم می‌کند. با به‌کارگیری این قابلیت‌ها، می‌توانید داشبورد خود را دقیقاً مطابق نیازهای پروژه طراحی کنید و در عین حال، تجربه کاربری ایده‌آلی برای مدیران و کاربران مختلف ارائه دهید. این سطح از انعطاف‌پذیری باعث می‌شود تا Filament به گزینه‌ای برتر برای ساخت و توسعه پروژه‌های مبتنی بر لاراول تبدیل شود.