قالب الصفحة

إطارات صفحات جاهزة للبدء مبنية على هيكل التطبيق. هذا قالب القائمة: رأس الصفحة مع مسار التنقل والعنوان والإجراءات، ثم الإجراءات الجماعية وجدول قابل للتحديد والترقيم.

جارٍ تحميل العرض التوضيحي: page-template-default

التثبيت

npx sdaia-ui@latest add page-template

الاستخدام

import { Breadcrumb } from '@/components/ui/Breadcrumb';
import { Button } from '@/components/ui/Button';
import { PageTemplate } from '@/components/ui/PageTemplate';

1<PageTemplate
2  type="list"
3  shell={shell}
4  breadcrumb={<Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Users" }]} />}
5  title="Users"
6  actions={<Button variant="primary">Add user</Button>}
7>
8  {/* table, filters, pagination */}
9</PageTemplate>

اختيار النوع

تشترك list وdetail وform وsettings وdashboard في إطار صفحة التطبيق: رأس الصفحة (مسار التنقل، والعنوان <h1>، والحالة، والإجراءات) فوق المحتوى، وتختلف في المكوّنات التي تضعها داخله.
يعرض sign-in بطاقة في الوسط داخل <main> خاص بها، دون هيكل التطبيق.
تعرض error-403 وerror-404 وerror-500 رسالة في الوسط، وتكون قيمة code الافتراضية رقم النوع.
مرّر shell لتغليف الصفحة بهيكل التطبيق، واحذفه إذا كانت الصفحة داخل هيكل موجود، مثل هيكل في تخطيط مشترك.
لا يتضمّن المكوّن أي نصوص منتج: كل عنوان ونص ورسالة يأتي من الخصائص.

الأمثلة

التفاصيل

عنوان مع شارة الحالة وإجراءات الصفحة، و`aside` بعرض 360 بكسل بجانب المحتوى على سطح المكتب (أسفله تحت 1280 بكسل).

جارٍ تحميل العرض التوضيحي: page-template-detail

النموذج

ملخص الأخطاء بعد إرسال فاشل (يربط كل عنصر بحقله)، وأقسام نموذج معنونة، وإجراءات النموذج.

جارٍ تحميل العرض التوضيحي: page-template-form

الإعدادات

إجراء رئيسي في رأس الصفحة وأقسام معنونة تضم المفاتيح والحقول.

جارٍ تحميل العرض التوضيحي: page-template-settings

لوحة المعلومات

مؤشرات ومخطط ونشاط حديث.

جارٍ تحميل العرض التوضيحي: page-template-dashboard

الخطأ 403

رفض الوصول. تستخدم صفحات الأخطاء هيكل التطبيق دون التنقل الجانبي.

جارٍ تحميل العرض التوضيحي: page-template-error-403

الخطأ 404

الصفحة غير موجودة.

جارٍ تحميل العرض التوضيحي: page-template-error-404

الخطأ 500

خطأ في الخادم، مع إجراء إعادة المحاولة ومرجع الخطأ.

جارٍ تحميل العرض التوضيحي: page-template-error-500

من اليمين إلى اليسار

قالب القائمة بالعربية: ينتقل التنقل الجانبي إلى اليمين وينعكس كل صف.

جارٍ تحميل العرض التوضيحي: page-template-rtl

السلوك المتجاوب

يلتف صف العنوان: تنتقل إجراءات الصفحة أسفل العنوان على الشاشات الضيقة.
يقع aside بجانب المحتوى من 1280 بكسل، وأسفله تحت ذلك، فلا يضيق المحتوى أبدًا.
بطاقة تسجيل الدخول مرنة حتى 440 بكسل، ورسالة الخطأ لا يتجاوز عرضها 560 بكسل وتتوسط الصفحة.
على الجهاز اللوحي والجوال ينقل هيكل التطبيق التنقل الجانبي إلى قائمة الشريط العلوي.

إمكانية الوصول

title هو العنوان <h1> الوحيد في الصفحة، وتبدأ عناوين الأقسام في المحتوى من <h2>.
تأتي المعالم من هيكل التطبيق (header وnav وmain)، وإطار تسجيل الدخول هو <main> خاص به.
قالب النموذج: بعد إرسال فاشل انقل التركيز إلى ملخص الأخطاء (role="alert")؛ يربط كل عنصر بحقله وينقل التركيز إليه.
قالب القائمة: شريط الإجراءات الجماعية منطقة لها اسم، ويعلن عدد العناصر المحددة بلطف.

PageTemplate

الخاصية	النوع	القيمة الافتراضية	مطلوبة
type	"list" \| "detail" \| "form" \| "settings" \| "dashboard" \| "sign-in" \| "error-403" \| "error-404" \| "error-500"	"list"	اختيارية
shell	PageTemplateShellProps	—	اختيارية
title	ReactNode	—	اختيارية
description	ReactNode	—	اختيارية
breadcrumb	ReactNode	—	اختيارية
status	ReactNode	—	اختيارية
actions	ReactNode	—	اختيارية
aside	ReactNode	—	اختيارية
logo	ReactNode	—	اختيارية
code	ReactNode	رمز النوع	اختيارية
footer	ReactNode	—	اختيارية
children	ReactNode	—	اختيارية
dir	"ltr" \| "rtl"	—	اختيارية