پرتوپرتو

الگوها

الگوهای ترکیب، دستور آشپزی، قالب صفحه، و راهنمای نوشتار

معرفی

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

سه چیز را با هم اشتباه نگیرید:

  • کامپوننت — یک واحد با API؛ در کامپوننت‌ها
  • الگو — یک تصمیم که چند کامپوننت را کنار هم می‌گذارد؛ همین‌جا
  • بلاک — یک صفحه‌ی کامل و کارکننده که کپی می‌کنید؛ در گالری بلاک‌ها

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


راهنمای انتخاب

چیدمان

الگوهای چیدمان صفحات در پرتو — PageContainer، PageHeaderRoot و PageSection

ناوبری

الگوهای ناوبری پرتو — Sidebar، NavMenu، Breadcrumb، و اصول طراحی ناوبری

مودالیتی (Modality)

راهنمای انتخاب — دیالوگ در برابر شیت در برابر آلرت‌دیالوگ در برابر کانفرم‌دیالوگ در برابر پاپ‌اور و دراپ‌داون

اعلام تغییرات محصول

کدام سطح برای کدام اندازه ریلیز — زنگوله، پنل، مودال — و بودجهٔ وقفه‌ای که هر کدام مصرف می‌کنند

الگوهای فرم

راهنمای طراحی فرم‌های قابل استفاده، دسترس‌پذیر، و سازگار با RTL در پرتو

الگوهای بارگذاری

راهنمای طراحی حالت‌های loading در پرتو — Skeleton، Spinner، و Progressive Loading

حالت‌های خالی

راهنمای طراحی حالت‌های خالی — از صفر نتیجه تا حالت اولیه و مسیر گم‌شده

الگوهای خطا

راهنمای نمایش خطاها در پرتو — API errors، validation، و حالت‌های سیستمی

الگوهای ریسپانسیو

راهنمای ساختاردهی رابط کاربری برای نمایش صحیح در موبایل، تبلت، و دسکتاپ

فرم با اعتبارسنجی

الگوی کامل فرم با React Hook Form، نمایش خطاها، و aria-invalid

دیالوگ تأیید حذف

الگوی دیالوگ تأیید برای عملیات مخرب مثل حذف

جدول با مرتب‌سازی

الگوی جدول داده‌ای با ستون‌های قابل مرتب‌سازی و نشانگر aria-sort

ترکیب داشبورد

الگوی ساخت صفحه داشبورد سوشال لیسنینگ با ترکیب کامپوننت‌های موجود

صفحه تحلیل

الگوی ساخت صفحه تحلیل اینفلوئنسر با ترکیب کامپوننت‌های دامنه‌ای

صفحه جدول داده

الگوی ساخت صفحه لیست با جستجو، فیلتر، مرتب‌سازی، و صفحه‌بندی

محتوا و لحن

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

اشتباهات رایج

الگوهایی که باید از آن‌ها پرهیز کنید — بر اساس مشکلات واقعی در محصولات پرتو

دسته‌بندی

گروهچه چیزی است
الگوهای بنیادینتصمیم‌های فرابخشی که روی هر صفحه‌ای اعمال می‌شوند — از چیدمان تا حالت‌های غیرعادی
دستور آشپزیراهنمای یک ترکیب مشخص از چند کامپوننت
قالب صفحهترکیب یک صفحه‌ی کامل؛ کدِ کارکننده‌اش در گالری بلاک‌ها است
نوشتار و کیفیتلحن و واژگان، و اشتباه‌هایی که نباید تکرار شوند

نکات مشترک

هر صفحه‌ای که داده نشان می‌دهد، پنج حالت دارد، نه یکی. بارگذاری، خالی، خطا، ناقص (بخشی آمد، بخشی نه)، و موفق. حالت ناقص همان است که بیشتر از همه فراموش می‌شود: صفحه‌ی چهارم از دوازده شکست خورده، درحالی‌که سه صفحه‌ی اول روی صفحه‌اند. در این حالت داده‌ی قبلی را نگه دارید و خطا را inline نشان دهید — کل صفحه را با یک ErrorState جایگزین نکنید.

دو حالت هم‌زمان نمایش داده نمی‌شوند

ترتیب همیشه یکی است: اسکلتون → سپس داده، خالی، یا خطا. هرگز اسکلتون و حالت خالی با هم. و «صفر نتیجه» خطا نیست — برای آن حالت خالی به کار ببرید، نه ErrorState.

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