مكتبة مكونات SunUI

SunUI هي مكتبة مكونات واجهة مستخدم مطورة ذاتيًا داخل Doggy، مبنية على ماكروات Twig، وتوفر أكثر من 25 مكوّنًا.

نظرة عامة

لا تعتمد SunUI على أطر عمل واجهة أمامية خارجية مثل Bootstrap، وتوجد قوالب المكونات في templates/ui/:

templates/ui/
├── elements.html.twig          # 元素展示
├── table.html.twig             # 表格组件
├── buttons/
│   ├── button.html.twig        # 按钮
│   ├── button_group.html.twig  # 按钮组
│   └── icon_button.html.twig   # 图标按钮
├── drawer/
│   ├── drawer.html.twig        # 抽屉
│   ├── addField.html.twig
│   └── confirmButton.html.twig
├── form/
│   └── singleField.html.twig   # 单字段表单
├── template/
│   ├── icons.html.twig         # 图标模板
│   └── ui.html.twig            # UI 模板
└── example/
    └── button.html.twig        # 按钮示例

بالإضافة إلى مكونات عامة أخرى:

templates/components/
├── breadcrumb.html.twig    # 面包屑
├── datagrid.html.twig      # 数据表格
└── tree.html.twig          # 树形组件

المكونات الأساسية

عرض البيانات

المكوّن	القالب	الوصف
DataGrid	`components/datagrid.html.twig`	جدول بيانات متقدم
Tree	`components/tree.html.twig`	البنية الشجرية
Table	`ui/table.html.twig`	جدول أساسي

النماذج

المكوّن	وصف القالب	النوع
Input	إدخال نص	انظر قالب الاختبار `test/input.html.twig`
Select	قائمة منسدلة (تدعم البحث والاختيار المتعدد)	`test/select.html.twig`
DatePicker	منتقي التاريخ	`test/date.html.twig`
Switch	مفتاح تبديل	`test/switch.html.twig`
Checkbox	مربع اختيار	`test/checkbox.html.twig`
Upload	رفع الملفات	`test/file.html.twig`
Radio	اختيار منفرد	`test/radio.html.twig`

التغذية الراجعة

المكوّن	القالب	الوصف
Modal	`test/modal.html.twig`	نافذة منبثقة
Drawer	`ui/drawer/drawer.html.twig`	الدرج
Toast	`test/alert.html.twig`	إشعارات الرسائل

التنقل

المكوّن	الوصف
Tabs	علامات التبويب (`test/tabs.html.twig`)
Breadcrumb	فتات الخبز (`components/breadcrumb.html.twig`)
Menu	القائمة (`admin/dynamic/menu.html.twig`)

سمات النماذج

يعتمد عرض النماذج على سمة Twig مخصصة:

templates/form/
├── ef_ui_form_theme.html.twig              # 默认表单主题
└── ef_ui_form_theme_department.html.twig   # 部门选择器主题

صفحات الاختبار

توجد أمثلة وصفحات اختبار كاملة للمكونات في templates/test/ (أكثر من 45 قالب اختبار)، وتغطي:

جميع أنواع حقول النماذج (input, select, date, file, color, password, money, percent وغيرها)
مكونات التخطيط (grid, table, tabs, drawer, modal)
مكونات الأعمال (أمثلة employee, department, company)
الاختبارات الوظيفية (form_dates_check, choice_fields وغيرها)

مكتبة مكونات SunUI ​

نظرة عامة ​

المكونات الأساسية ​

عرض البيانات ​

النماذج ​

التغذية الراجعة ​

التنقل ​

سمات النماذج ​

صفحات الاختبار ​