Bibliothèque de composants SunUI

SunUI est la bibliothèque de composants UI frontend développée en interne par Doggy, implémentée sur la base des macros Twig, avec plus de 25 composants.

Aperçu

SunUI ne dépend d'aucun framework UI tiers comme Bootstrap. Les modèles des composants se trouvent dans 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        # 按钮示例

Il existe également des composants partagés :

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

Composants principaux

Affichage des données

Composant	Modèle	Description
DataGrid	components/datagrid.html.twig	Table de données avancée
Tree	components/tree.html.twig	Structure arborescente
Table	ui/table.html.twig	Table basique

Formulaires

Composant	Description du modèle	Type
Input	Saisie de texte	voir le modèle de test test/input.html.twig
Select	Liste déroulante (prise en charge de la recherche, de la sélection multiple)	test/select.html.twig
DatePicker	Sélecteur de date	test/date.html.twig
Switch	Interrupteur	test/switch.html.twig
Checkbox	Case à cocher	test/checkbox.html.twig
Upload	Téléversement de fichiers	test/file.html.twig
Radio	Bouton radio	test/radio.html.twig

Retour visuel

Composant	Modèle	Description
Modal	test/modal.html.twig	Fenêtre modale
Drawer	ui/drawer/drawer.html.twig	Tiroir
Toast	test/alert.html.twig	Message de notification

Navigation

Composant	Description
Tabs	Onglets (test/tabs.html.twig)
Breadcrumb	Fil d'Ariane (components/breadcrumb.html.twig)
Menu	Menu (admin/dynamic/menu.html.twig)

Thèmes de formulaires

Le rendu des formulaires est basé sur des thèmes Twig personnalisés :

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

Pages de test

Les exemples complets de composants et les pages de test se trouvent dans templates/test/ (plus de 45 modèles de test), couvrant :

• Tous les types de champs de formulaire (input, select, date, file, color, password, money, percent, etc.)
• Les composants de disposition (grid, table, tabs, drawer, modal)
• Les composants métier (exemples employee, department, company)
• Les tests fonctionnels (form_dates_check, choice_fields, etc.)