前端组件概览
Forge Admin 前端提供了 70+ 个公共组件，覆盖 CRUD 页面、数据展示、流程设计、低代码搭建等场景。
组件分类
核心 AI 组件 (12)
智能 CRUD 页面及配套组件，是业务开发的主力。
| 组件 | 说明 |
|---|---|
| AiCrudPage | 完整 CRUD 页面解决方案，97 个 Props |
| AiForm | JSON 配置驱动动态表单，34 种字段类型 |
| AiTable | 增强型数据表格，表格/卡片双模式 |
| AiSearch | 搜索表单组件，支持折叠展开 |
| AiModal | 可配置、可拖拽的模态对话框 |
| AiToolbarAction | 表格工具栏（刷新/密度/列设置/搜索） |
| AiTableFilter | 表格列筛选，支持拖拽排序 |
| AiCustomQuery | 自定义查询/高级筛选，方案管理 |
| AiCustomSelect | 远程搜索下拉选择器 |
| AiFormGroupTitle | 表单分组标题装饰 |
| AiFormSectionTitle | 表单区块标题装饰（含徽章/描述） |
| AiRecordSelectorModal | 业务记录选择弹窗（字段映射） |
数据展示与交互 (14)
字典、图标、图片、文件上传、用户选择等常用交互组件。
| 组件 | 说明 |
|---|---|
| DictSelect | 字典数据下拉选择器 |
| DictTag | 字典数据标签展示 |
| IconSelector | 图标库选择器 |
| IconRenderer | 统一图标渲染（ionicons5/本地/图片/fileId） |
| RegionTreeSelect | 行政区划树选择 |
| ImagePreview | 图片分组预览，NImageGroup |
| AuthImage | 认证图片（懒加载/重试/预览/回退） |
| SignatureImage | 签名图片/文本渲染 |
| FileUpload | 文件上传，支持业务分类 |
| ImageUpload | 图片上传，支持预览和裁剪 |
| UserSelectPicker | 用户选择表单控件 |
| UserSelectModal | 用户选择弹窗（部门树筛选） |
| UserSelectPanel | 用户批量授权面板 |
| UserAvatar | 圆形用户头像（渐变背景） |
页面布局与主题 (16)
页面容器、布局结构、导航菜单、主题配置、CRUD 模板。
| 组件 | 说明 |
|---|---|
| AppPage | 简洁页面布局 |
| CommonPage | 标准后台页面布局 |
| SystemPageLayout | 系统弹性布局容器 |
| MasterDetailWorkspace | 主从布局（折叠/分离/自适应） |
| SkeletonScreen | 骨架屏（7 种类型） |
| Loading | 全屏/局部加载遮罩 |
| MenuRenderer | 侧边栏菜单渲染 |
| AppCard | 增强卡片（阴影/圆角/玻璃态） |
| PremiumTree | 增强树（复选框级联/图标/元数据） |
| SystemTableCell | 系统实体表格单元格 |
| BusinessTopNav | 业务领域顶部导航栏 |
| TheFooter / TheTitle | 页脚和系统标题 |
| LayoutSetting | 布局/主题/导航色彩设置面板 |
| ThemeConfig / ThemeConfigButton / ToggleTheme | 主题配置抽屉 + 触发按钮 + 深色切换 |
| SimpleCrudTemplate | 标准 CRUD 页面模板 |
| MasterDetailCrudTemplate / TreeCrudTemplate / ChildTableEditor | 主从CRUD / 树形CRUD / 子表编辑器 |
流程组件 (16)
流程设计器、查看器、任务管理、审批历史、签名等完整流程能力。
| 组件 | 说明 |
|---|---|
| DingFlowDesigner | 钉钉风格 BPMN 流程设计器 |
| DingFlowViewer | 钉钉风格流程查看器（只读+节点详情） |
| BPMN 流程设计器 | 基于 bpmn-js 的 BPMN 2.0 设计器 |
| NodePropertiesPanel | BPMN 节点属性配置面板 |
| BusinessProcessDesigner | 业务流程编排设计器 |
| FlowFormCreateDesigner / Renderer | FormCreate 表单设计器/渲染器 |
| FormDesigner | 可视化拖拽表单构建器 |
| FlowStats | 流程统计卡片 |
| FlowCategoryStats / FlowModelStats | 流程分类/模型统计卡片 |
| FlowTaskCardList | 流程任务卡片列表 |
| FlowTimeline | 审批历史时间线 |
| SignaturePad | Canvas 手写签名板 |
| FlowPropertyPanelShell | 流程属性面板外壳布局 |
| FlowTaskDetailShell | 审批详情弹窗外壳 |
| FlowBusinessForm | 流程业务表单动态路由 |
低代码构建器 (7)
领域建模、页面搭建、代码预览、发布等低代码平台核心组件。
| 组件 | 说明 |
|---|---|
| 代码预览弹窗 | 代码生成预览弹窗 |
| 领域管理组件 | 领域编辑器 / 领域树 / 迁移弹窗 |
| 模型设计 / 导入 | 模型设计器 / 数据库表导入 |
| 页面构建器组件 | 页面构建器 / 网格设计器 / 块渲染器 / 参数编辑器 |
| 预览与发布 | 预览面板 / 发布面板 |
| 共享组件 | 菜单选择/字典选择/字段类型/值渲染/规则编辑器 |
| 扩展代码与运行时 | 扩展代码编辑器 / CSS沙盒 / JS沙盒 / 运行时页面 |
开发工具 (6)
SQL 编辑器、Cron 构建器、数据集 Schema 编辑器等开发辅助工具。
| 组件 | 说明 |
|---|---|
| SqlEditor | 基于 CodeMirror 6 的 SQL 编辑器 |
| CronBuilder | Cron 表达式可视化构建器 |
| JobOpenApiUsageGuide | 任务 OpenAPI 使用指南 |
| DatasetParamSchemaEditor | 数据集参数 Schema 编辑器 |
| DemoBanner | 演示模式横幅提示 |
| SliderCaptchaModal | 滑块验证码模态框 |
工具函数
See 工具函数概览 — 包含 HTTP 请求、加密、文件处理、本地存储等 9 大模块。