为UI引擎前端页面添加物料组件

XDM模型组件

数据源表单

基于选定的数据源数据，自动解析数据结构并快速生成表单，无需手动逐个配置表单字段，大幅降低表单搭建成本。

数据源表格

基于选定的数据源数据，自动解析数据字段并生成表格组件，直接展示数据源中的数据列表，支持基础的表格展示与数据渲染，无需手动定义列配置。

模板树

关联指定的XDM模型后，自动构建树形展示结构。支持懒加载、层级展开与节点选择，适用于组织架构、分类目录等父子型数据可视化场景。

模板表格

关联指定的XDM模型后，自动生成功能完整的数据表格。前端项目运行时，会自动调用该模型关联的API接口获取数据并填充至表格，无需手动编写接口调用、数据渲染代码，实现“模型关联即数据展示”。

模板表单

关联指定的XDM模型后，根据模型定义的字段自动生成表单，支持可视化调整字段的显示顺序、表单布局（如单列/多列排布），适配不同场景下的表单展示与数据收集需求。

搜索模板

关联指定的XDM模型后，一键生成具备“增、删、改、查”全功能的业务页面，无需手动搭建页面结构与编写业务逻辑，快速落地各类数据管理类业务模块。

布局与容器

盒子容器

创建基础块级容器元素，作为页面布局的“基础单元”。主要用于包裹各类组件、划分页面功能区域（如头部、内容区、侧边栏），支持自定义宽高、边距、背景色等样式，适配灵活的布局组合需求。

栅格布局

提供12列/24列标准化栅格系统，通过拖拽列元素快速搭建规整布局。支持灵活拆分列宽（如两栏均分、三栏1:2:1比例），无需手动计算尺寸，即可实现响应式、对齐一致的页面结构（如列表页、表单页的多列布局）。

分隔面板

将单一页面区域分割为两个独立子区域，内置可拖拽分割线，支持实时调整两个区域的宽度（左右分栏）或高度（上下分栏）。适用于需要动态调整内容区域比重的场景，如“左侧筛选区+右侧数据表格”、“上方预览区+下方编辑区”等。

基础元素

文本

插入纯文本内容，支持自定义字体类型、字号、颜色、对齐方式等样式，无交互能力，适用于页面说明文字、标签提示、辅助信息展示等静态内容呈现场景。

图标

提供基于TinyVue的标准化图标集合（含操作类、状态类、功能类等常用类型），支持自定义尺寸与颜色，适配不同界面风格。

图片

嵌入图片资源，支持通过URL链接配置图片源，可自定义宽高、填充模式、加载失败提示图，适用于Logo、产品图、封面图等视觉元素展示，支持基础图片预览。

链接

创建可单击的文字超链接，支持内外部页面跳转，可自定义文字样式与交互效果，为用户提供清晰的导航指引。

分隔线

提供水平分隔线，支持自定义线宽、颜色、间距，用于划分页面不同功能模块边界，增强界面层次感与布局清晰度。

标题

支持创建h1至h6六级标准标题，可用于构建页面信息层级，并支持样式自定义以符合整体视觉规范。

视频

用于在页面中嵌入并播放视频内容，支持主流视频格式与基础播放控制，可适配不同场景的展示需求。

按钮

提供多种类型和样式的操作按钮，支持文本、图标、尺寸、颜色及交互状态的灵活配置，适用于触发各类用户操作。

导航类型

时间线

以时间轴形式清晰展示事件流或流程节点，支持纵向与横向布局，常用于任务进度、操作记录或发展历程等可视化场景。

标签页

通过选项卡在不同内容面板间切换，有效组织并分隔相关功能模块，支持多种布局样式与交互模式，优化界面空间利用率。

步骤条

引导用户按预设流程逐步完成任务的导航组件，直观展示当前进度与后续步骤，支持垂直与水平布局，适用于多步骤表单、配置向导等流程化场景。

表单类型

表单

由按钮、输入框、选择器、单选框、多选框等控件组成，用于实现数据的收集、校验与提交，支持复杂表单逻辑配置。

下拉框

即Select选择器，单击后弹出下拉列表展示预设选项，支持单选/多选、搜索过滤、默认值配置，简化用户在大量选项中的选择操作。

开关

用于在两种对立状态（如开启/关闭、是/否）之间切换，提供直观的视觉反馈，适用于设置项的状态控制。

复选框

允许用户从一组选项中选择零个或多个选项，支持独立选择与状态回显，适用于多选场景。

复选框组

将多个复选框组织为一个逻辑组，便于统一管理与验证，常用于需要批量选择的配置场景。

单选框组

用于配置不同场景的选项，在一组备选项中进行单选。

日期选择

提供可视化日历界面，支持选择单个日期或日期范围，并兼容多种日期格式，适用于日期相关的数据录入。

时间选择器

通过下拉列表或时钟界面选择具体时间，支持时分（HH:mm）格式，适用于需要精确时间的场景。

数字输入框

用于输入数字值，支持设置最小/最大值、步进单位，并允许通过键盘或界面按钮增减数值，适用于数量、金额等数值录入。

搜索框

提供输入关键词执行搜索的专用输入框，常配有搜索图标与清空按钮，支持实时搜索与结果展示，适用于数据筛选与查询场景。

弹出编辑

只读型选择组件，不支持手动输入数据，单击后弹出面板展示树形组件或表格组件，用户需从面板中选择数据完成赋值。

文件上传

允许用户选择本地文件并上传至服务器，支持单文件、多文件、拖拽上传及格式限制，是文件管理功能的基础组件。

输入框

基础的文本输入组件，支持单行、多行文本录入，可设置占位提示、最大长度等属性，适用于通用文本输入场景。

富文本

提供可视化的富文本编辑能力，支持文本加粗、换行、字体颜色调整、插入图片/链接等操作，生成带格式的文本内容，适用于内容创作与编辑场景。

表格类型

表格

功能强大的结构化数据展示组件，支持以行和列的结构化形式展示数据列表，适用于需要动态管理和交互的数据展示场景。

分页

用于将大批量数据按指定条数拆分展示，支持配置每页数据量、快速跳转页码。通常与表格组件配合使用，确保大规模数据的清晰呈现和便捷浏览。

反馈

折叠面板

支持在内容区指定动态页面或自定义HTML，适用于需要隐藏和展示复杂内容的场景。提供展开与收起操作，优化页面空间利用率。

树

用于展示具有父子层级关系的数据，支持节点选择与懒加载，提升用户体验和性能表现。

警告

即Alert组件，以非浮动层的静态形式呈现，始终显示在页面中，不会自动消失。用户可通过单击关闭按钮手动关闭警告，适用于重要信息的提示场景。

标签

用于标记事物的属性和维度，支持自定义样式和内容，适用于分类、标注等场景。

标签组

即TagGroup组件，可将多个标签管理为一组，便于批量展示和操作，适用于多属性标记或分组管理的场景。

对话框

模态对话框以浮层形式显示，引导用户完成特定操作或确认信息，支持多种配置选项（如标题、内容、按钮等），确保交互流程清晰明确。

抽屉

侧边弹出式内容容器，可从页面左侧或右侧滑出，适用于展示辅助功能、配置选项、详细信息等次要或临时性内容，可随时收起以保持页面主区域整洁。

气泡卡片

当用户单击或悬停在某个元素上时，会弹出一个气泡式的卡片浮层。适用于需要对某个元素提供额外解释性描述或相关操作的场景。通过将这些内容收纳到气泡卡片中，并根据用户的操作行为动态展示，可以有效提升界面的信息密度和用户体验。

图表组件

条形图

以横向条形为载体展示数据，清晰对比多组数据的数值大小，适用于类目名称较长、数据差异明显的对比场景。

仪表盘

采用仪表盘式可视化设计，直观展示关键指标的完成度或状态区间，常配合指针、刻度及颜色分区呈现数据阈值与进度。

柱状图

以纵向立柱为载体展示数据，突出不同类目数据的量级差异，适用于趋势分析、数据分布比较及周期性数据呈现。

折线图

以线条走势呈现数据变化趋势，清晰反映数据随时间或其他维度的波动规律，适用于展示数据趋势。

饼图

以圆形分割的扇形面积占比展示数据，直观呈现各部分占总体的比例关系，适用于分类数据占比分析。

进度图

以线性进度条形式展示任务或指标的完成进度，支持动态加载效果与百分比显示，适用于流程跟踪与状态监控。

环形图

饼图的衍生形态，以空心圆环展示数据占比，相比饼图更突出中心区域，同时清晰呈现各分类数据的占比关系，视觉效果更轻量化。