组件库

侧边栏 + 顶栏 + 内容区的完整后台骨架，内置命令面板、面包屑、软刷新与返回顶部。

图标窄边栏放主模块，多子页面的模块右侧展开二级导航列，单页模块收起占满宽度。

路由默认布局的一层分发：按每个浏览器自己的偏好在 Config.Shells 候选里挑一个外壳渲染，没选过就落回 Config.LayoutType。

移动端骨架：顶部 App 栏 + 可滚动内容区 + 底部 Tab 导航，含登录门禁与软刷新。

站点标识、导航树与折叠开关的纯导航侧栏。

页面标题、面包屑，右侧搜索 / 刷新 / 全屏 / 通知与头像下拉（身份 + 偏好设置）。

多页签模式的导航页签条：一页一签，点签导航、悬停关闭、右键批量关闭。

Ctrl+K 呼出的全局命令检索。

集中放置顶部加载条、轻提示与通知三类全局浮层。

内联 Feather SVG 图标，内置 200 个图形并按分类组织，兼容 Font Awesome 写法，支持自定义注册。

多语义、多尺寸按钮，支持加载态、图标与块级展示。

带标题栏、扩展区与折叠能力的内容容器。

用于状态与分类的轻量标签，支持图标与可关闭。

数字或小圆点角标。

带文字的状态指示；加上计数与点击即成状态过滤器。

水平或垂直分割线，可带居中文字。

文字、图片或图标头像。

头像堆叠展示，超出数量折叠为 +N。

无数据时的占位展示。

加载指示器，旋转圆环或三点跳动，可包裹内容显示遮罩。

少量选项的互斥切换控件。

内容加载前的占位骨架。

在内容上平铺文字水印。

可展开折叠的内容区块，支持手风琴模式。

点击展开的浮层菜单，内置“点击外部自动关闭”。

纵向或横向多级导航菜单。

页面标题、描述与操作区。

层级路径导航。

滚动超过阈值后在屏幕角落淡入的返回顶部按钮，点击平滑滚回顶部。

轮播面板：淡入淡出或左右滑动切换，支持自动播放、指示器、箭头切换与悬停暂停。

Canvas 手写签名：鼠标 / 触摸 / 手写笔都能签，支持撤销、清空、笔宽颜色调节与 PNG 导出。

表单容器与字段级校验协调器，把服务端 Result 按字段名路由到对应表单项的行内红字。

统一的标签、必填标记、错误与帮助信息容器。

单行文本输入，支持前缀图标、后缀内容与多种原生类型。

多行文本输入，可自适应高度。

原生 select 封装，支持分组与占位提示。

单个勾选或基于 Options 的多选组。

单个单选或基于 Options 的单选组。

即时生效的布尔开关。

星级评分控件。

在区间内拖动取值。

自定义下拉日历，支持日期、日期时间、时间、月份、周。

起止日期组合选择。

带加减按钮的数值输入。

预设色板加原生取色控件。

输入即筛选的下拉建议。

输入框下方弹出多列表格，回车筛选、上下键选行、回车选中。

输入框下方弹出树面板，箭头展开、点行选中，支持键盘导航。

多列联动选择，逐级收窄。

在左右两栏之间移动选项。

拖拽区 + 文件列表 + 上传进度。

列表页的筛选条件区，内置查询与重置。

工具栏 + 源码框 + 实时预览的分栏 Markdown 编辑器。

按 Schema 字段类型自动映射到对应控件，读写同一份动态记录。

完整业务表格：固定表头/钉列、横向滚动、虚拟滚动、排序、列头过滤、自定义列头与单元格模板、超宽省略号、合并表头（多级列头）与合并单元格（跨行/跨列）。

写在 Table 内部的列声明：列属性用标记给，单元格模板直接把 Razor 写在列里，context 就是当前行的强类型实体。

独立分页器，可与表格配合或单独使用。

ECharts 封装，传入原生 option 对象即可渲染。

指标数值卡片，支持前缀后缀、趋势与图标。

键值信息展示，用于详情页。

头像 + 标题 + 描述的纵向列表，支持点击与右侧操作。

线性与环形进度，支持语义色与自定义颜色。

多步骤流程指示，支持横向与纵向。

内容分区切换，支持角标与卡片样式。

按时间顺序展示事件流。

层级数据展示，支持展开、选中与禁用。

glTF / GLB / OBJ 三维模型查看器：拖拽轨道旋转、滚轮缩放、线框与快照。

层级数据可视化：把树形结构渲染为可交互的脑图，支持展开收起、拖拽缩放与导出 PNG。

交互式地图：基于 Leaflet.js，支持标记点、弹窗、图层切换与缩放控制。

甘特图：把一组带起止日期的任务渲染成可拖拽的甘特条，支持按日 / 周 / 月 / 年切换视图。

完整月份日历，卡片与全屏两种形态，全屏可内联增删待办。

居中弹层，支持标题、图标、尺寸、自定义页脚与按住标题栏拖拽移动。

侧边滑出面板，用于详情或表单。

页面内联提示条。

水平居中的轻量悬浮提示，短暂显示后自动消失。

从屏幕角落横向滑出的卡片式通知，带标题与描述。

贴在顶部的进度条，支持不确定滑动动画与确定百分比两种模式。

在触发元素旁弹出二次确认气泡。

经内置 signalr.js 连接后端 worker 的 SignalR 中心，流式查看物联网设备运行日志。

定尺寸图片卡片，支持说明条与点击预览。

功能完整的视频播放器，原生与自定义控制条可切换。

带封面与律动可视化条的音频播放器。

基于浏览器 Web Speech API 的语音听写输入框，点击麦克风即可口述转文字。

基于浏览器 Web Speech API（SpeechSynthesis）的文字转语音朗读框，与语音输入一入一出。

用浏览器内置查看器预览 PDF 的卡片组件，外层附重新加载 / 新窗口打开 / 下载 / 全屏工具条。

纯托管、零依赖地把内容编码为一维条码并用 SVG 绘制，内置六种常见制式。

纯托管、零依赖地按 ISO/IEC 18004 生成二维码并用 SVG 绘制，自动选模式、版本与最优掩码。

相机 / PDA 按键 / 图片三种取码方式，识别 QR 与常见一维码。

监控摄像头在线直播拉流播放器，支持 HLS / HTTP-FLV / WebRTC(WHEP) / 原生点播，可截帧抓拍上报。

监控摄像头的多路宫格墙，按 4 / 6 / 9 / 12 / 16 宫格编排多个 LivePlayer 磁贴，支持整墙静音、增删与单路全屏。

把第三方页面（地图 / BI / 视频 / 小应用）以 iframe 内嵌到当前页，通用工具条 + postMessage 双向桥 + 整卡全屏。

以 Web 蓝牙（GATT 客户端）连接 BLE 外设，提供读 / 写 / 订阅通知的通信面板。

以 Web 串口（navigator.serial）连接串口外设，提供收发与波特率切换的通信面板。

以 WebUSB（navigator.usb）连接 USB 外设，提供配置 / 接口 / 端点级读写的通信面板。

以 Web NFC（NDEFReader）读写 NFC / 触碰标签，提供读取与文本 / URL / MIME 写入的通信面板。

以 WebHID（navigator.hid）连接 HID 人机接口设备，提供集合 / 报告枚举与输入上报、输出与特性报告收发的通信面板。

以 Web MIDI（navigator.requestMIDIAccess）连接 MIDI 设备，提供输入 / 输出端口枚举、消息解析与音符 / 控制 / 节目 / 弯音下发的通信面板。

操作结果反馈页，用于成功、失败、警告等终态。

404、500 等异常的统一展示。

后台数据页通用脚手架：页头（标题 + 说明 + 右侧操作）+ 概览统计卡片 + 数据卡片（工具栏固定、仅表格区滚动）。

低代码页面设计器的表格区块：标题 + 查询条件栏 + 工具栏 + 数据网格占位，完全由 PageBlock 配置驱动。

低代码页面设计器的 Tab 布局容器：每个子区块即一个标签页，可混排表格 / 列表 / 图表等区块。

低代码页面设计器的列表区块：以骨架占位呈现一组列表项，条数由 PageBlock 配置驱动。

低代码页面设计器的图表区块：柱状 / 折线 / 饼（环）三种占位呈现，数据由 PageBlock 配置驱动。

低代码页面设计器的左右布局容器：按 ratio 把子区块切成左右两区，逐区递归渲染。

低代码页面设计器的上下布局容器：按 ratio 把子区块切成上下两区，逐区递归渲染。

低代码页面设计器的栅格布局容器：把子区块平铺为 CSS 网格单元，列数可指定或自适应。

纯展示型对话气泡：左右方位、多种底色，可带头像 / 名称 / 时间、Header / Footer 插槽与富内容，并内建“正在输入”与“加载中”状态。

以一列可分组的会话线程管理 AI 对话 / 客服会话：选中、新建、重命名、置顶、删除，支持整表与单条加载态、未读点与空态。

AI 助手 / 对话入口的欢迎页：问候主副标题与助手头像，下方“你可能想问”提示卡片栅格，支持换一批、加载骨架与居中/左对齐，点卡片经 OnPrompt 把提问交给宿主。

一列可点选的 AI 快捷提示卡片：图标 + 标题 + 描述，支持子提示（父项下方的紧凑标签）、列数栅格、禁用、加载骨架与空态，点选经 OnPrompt 回传命中项。

折叠式的 AI 推理 / 深度思考面板：思考中脉冲并自动展开，结束自动收起并显示耗时；正文支持文本或富内容，展开收起为纯 CSS 动画。

以竖向时间线呈现智能体多步推理链：每个环节带状态节点（等待 / 进行中 / 完成 / 失败，进行中图标自动旋转）、标题、说明与可折叠正文，节点间有连接线。

会话输入框上方待发送文件的附件条：卡片 / 胶囊两态，按类型自动选图标与格式化大小，支持上传进度、失败红态、移除与预览回调，纯展示无 JS。

AI 会话底部的消息输入条：自适应高度文本域 + 发送 / 停止按钮，Enter 发送 / Shift+Enter 换行、空内容禁用、Loading 变红色停止，Header 可挂 Attachments、Prefix 放工具、Footer 放提示。

随输入过滤的 / 快捷指令建议菜单：图标 + 标题 + 说明 + 快捷键徽标，支持分组、禁用项、加载骨架与空态；ActiveKey 可 @bind 由宿主键盘上下键驱动高亮，选中经 OnSelect 回传，常与 Sender 组合成命令面板。

AI 消息下方的一排轻量图标操作栏：不传 Items 即用内置默认（复制 / 重新生成 / 朗读 / 点赞），或自定义 ActionItem；支持激活态、禁用、加载转圈与 ShowLabel 文字标签，点击经 OnAction 回传、由宿主翻转状态（受控展示），常挂在 Bubble 的 Footer。

以带语法配色的代码块呈现 AI 生成 / 引用的源码：内置纯托管分词器（关键字 / 字符串 / 注释 / 数字着色，覆盖 C# / JS / TS / Java / Python / Go / SQL / JSON / Shell，未知语言安全退化），头部栏带语言标签 / 文件名 / 复制按钮，支持行号、软换行与最大高度滚动；组件无 JS，剪贴板写入交宿主。

以较大的配色缩略瓦片呈现一批文件：按扩展名 / MIME 自动选图标与主题色（图片 / 视频 / 音频 / PDF / Word / Excel / PPT / 压缩包 / 代码 / 文本 / 字体 / 安装包 / 数据库各有配色），右下角自动大写扩展名角标，图片可显示缩略图，下方标注文件名与大小。Size 三档、Variant 实心 / 描边、OnPreview 点击预览；纯展示、无 JS 互操作。

以可展开 / 收起的层级树呈现目录与文件：目录用 folder / folder-open 图标、文件按扩展名复用 FileCard 的分类配色与图标表自动着色，点目录展开 / 收起（OnExpand）、点文件选中（OnSelect，可 @bind-SelectedKey 双向绑定）。Selectable / ShowIcon / ShowSize / DefaultExpandAll 开关，逐节点 Disabled 与空态文案；递归渲染、纯展示、无 JS 互操作。

把 Mermaid 文本渲染成 SVG 图示（流程图 / 时序图 / 类图 / 甘特图 / 状态图 等），常用于承载 AI 模型生成的结构化图。渲染由框架内置 known.mermaid 脚本完成、首次使用惰性加载 mermaid（宿主注入 window.mermaid 则复用，否则按 Source 动态 import，默认 jsDelivr ESM、可自托管离线）；主题默认跟随框架明暗（可用 Theme 覆盖），Code 或主题变化自动重绘，含加载 / 失败 / 空态。

把 AI 回答所依据的参考来源（网页 / 论文 / 文档 / 新闻 / 代码库 / 数据集 等）渲染成带序号、站点图标、域名 / 作者 / 时间元信息与可选摘录的引用列表，常用于承载 RAG 检索问答的出处。Variant 支持整行列表与紧凑标签两态；据 Type 自动配色配图标，可 Favicon / Icon / Color 逐项覆盖；点来源经 OnSelect 回传、点标题在有 Url 时新窗口打开（rel 采用 noopener）。纯展示、无 JS 互操作；来源标题 / 网址 / 域名 / 摘录视为业务数据不本地化，仅内置标题与空态文案走词条。

把智能体一轮回答里查到的东西画进气泡：一张卡 = 标题头 + 字段网格 + 标签行，数据来自 IAgentService 交回的 AgentReply.Cards（AgentCard / AgentCardField 纯 DTO）。刻意不做按钮与链接，卡片只读；三样全空的卡片收成一句「（无结果）」。