SunUI 组件库

SunUI 是 Doggy 自研的前端 UI 组件库，基于 Twig 宏实现，提供 25+ 组件。

概述

SunUI 不依赖 Bootstrap 等第三方 UI 框架，组件模板位于 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 等）