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 等）