<p><br></p><table style="width: 100%;"><tbody><tr><th colSpan="1" rowSpan="1" width="38.46"><span style="font-size: 14px;">序号</span></th><th colSpan="1" rowSpan="1" width="86.85"><span style="font-size: 14px;">组件名称</span></th><th colSpan="1" rowSpan="1" width="340.51"><span style="font-size: 14px;">用途描述</span></th><th colSpan="1" rowSpan="1" width="86"><span style="font-size: 14px;">备注</span></th></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">1</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">文本</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">用于显示静态说明文字或标题信息，起内容展示与引导作用。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">2</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">输入框</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">供用户输入文本或数值数据，适用于表单填写与参数配置。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">3</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">下拉框</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">从预设选项列表中选取一项，适用于筛选条件或模式切换。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">4</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">按钮</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">用于触发操作响应，支持提交、跳转及功能执行等交互。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">5</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">边框按钮</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">带边框样式的按钮控件，视觉层级高于普通按钮。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">6</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">图标按钮</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">以图标为主要视觉元素的按钮，节省空间且识别度高。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">7</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">默认图片</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">展示静态图像内容，可用作占位、配图或视觉装饰。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">8</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">链接视频</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">播放来自网络地址的视频内容，支持URL流媒体资源。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">9</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">本地视频</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">播放用户本地存储的视频文件，用于上传内容的展示。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">10</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">颜色选择器</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">提供颜色选取面板，用于主题定制或状态标识配置。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">11</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">单选框</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">用于单一条件的勾选与取消勾选，控制功能启用状态。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">12</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">标题单选框</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">带分组标题的单选控件，便于选项分类与理解。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">13</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">开关</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">控制功能的启用与停用，实现状态的双向切换。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">14</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">日期/时间</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">显示当前日期与时间信息，亦可用于界面装饰。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">15</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">滑块</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">通过拖拽连续调节数值，适用于音量、速度等参数调整。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">16</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">竖向滑块</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">垂直方向拖拽调节数值，适合纵向紧凑的布局场景。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">17</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">线性进度条</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">以水平长条展示任务完成百分比，直观反馈进度。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">18</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">环形进度条</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">以环形样式展示完成进度，美观且节省横向空间。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">19</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">3D空间锚点</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">在三维场景中标记固定位置，用于定位与空间参照。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">20</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">竖向列表</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">垂直排列菜单项或选项列表，用于纵向导航或选择。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">21</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">横向列表</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">水平排列标签或导航项，适用于横向滚动式浏览。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">22</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">自适应竖向列表</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">垂直排列，并根据内容自动调整列表高度。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">23</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">自适应横向列表</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">水平排列，并根据内容长度自动适配宽度。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">24</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">轮播列表</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">逐条滚动展示信息条目，适用于公告或通知栏场景。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">25</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">垂直布局</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">将子元素沿垂直方向依次排布，构建纵向布局结构。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">26</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">水平布局</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">将子元素沿水平方向依次排布，构建横向布局结构。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">27</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">网格布局</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">按网格形式均匀排布子元素，适合卡片或图标集合。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">28</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">分组柱状图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">分组展示多系列数据，便于类别间横向对比分析。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">29</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">柱状图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">以柱体高度表示数据数值，适用于直观的对比展示。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">30</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">横向柱状图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">水平方向的柱状图，更适合长文本标签的展示。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">31</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">多系列折线图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">同时展示多条折线，用于多变量变化趋势对比。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">32</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">折线图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">以折线展示数据变化趋势，反映数值随维度的波动。</span></td><td colSpan="1" rowSpan="1" width="auto">-</td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">33</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">折线面积图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">折线下方填充色块，强调数值的累积量变化。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">34</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">饼图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">以扇形面积比例展示数据构成，突出各部分的占比关系。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">35</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">圆角环形图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">采用圆角样式的环形占比图，视觉风格更现代化。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">36</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">雷达图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">多维度综合对比，适用于能力评估与指标分析场景。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">37</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">散点图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">以点阵分布展示数据关联性与离散程度，便于相关性分析。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">38</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">树图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">以嵌套矩形展示层级数据，兼顾结构关系与占比呈现。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">39</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">漏斗图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">展示流程各阶段转化率，常用于运营与销售数据分析。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">40</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">仪表盘</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">模拟仪表盘指针指示数值区间，适用于监控看板场景。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr><tr><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">41</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">3D地图</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">展示三维地理空间信息，适用于地形与区域分布可视化。</span></td><td colSpan="1" rowSpan="1" width="auto"><span style="font-size: 14px;">-</span></td></tr></tbody></table><p><br></p>