前端UI组件小程序设计系统移动开发【免费下载链接】tdesign-miniprogramWechat MiniProgram and Uniapp UI components lib for TDesign项目地址https://gitcode.com/gh_mirrors/tde/tdesign-miniprogram点击查看免费下载导读本文聚焦于 TDesign MiniProgram 中tdesign/uniapp-chat对话组件库的ChatLoading 加载状态组件packages/uniapp-pro-components/chat/chat-loading/该组件专门用于 AI 对话/聊天场景中等待模型回复时的加载反馈。读完本文你将掌握 ChatLoading 的引入方式、animation四种动效skeleton / moving / gradient / dots的选用逻辑与实现原理、text文案配置、样式定制方法以及在chat-message组件中通过pending状态自动触发加载态的联动用法可直接落地到 UniApp 聊天项目实战中。一、组件定位对话场景中的加载反馈ChatLoading 在组件库中的定位十分明确——README.en-US.md 将其描述为loading state component for chat scenarios对话场景加载状态组件中文 README 中亦标注为用于对话场景中的加载状态组件。在聊天类业务中当用户发送消息后、模型响应尚未返回前页面需要一段等待过渡。ChatLoading 的价值在于它以极轻的 API 提供了多种符合 TDesign 视觉规范的加载动效避免开发者自行书写动画逻辑并天然适配 chat-message 等上层对话组件。从源码结构看组件由以下文件构成职责清晰| 文件 | 作用 | | -- | -- | | chat-loading.vue | 组件模板与逻辑主体按animation分支渲染不同动效 | | props.ts | 属性声明与取值校验 | | type.ts |TdChatLoadingProps类型定义 | | chat-loading.less | 四种动效的样式与keyframes动画定义 | | _example/ | 官方示例base 动效示例、text 文案示例 |二、组件引入方式2.1 推荐easycom 模式组件文档推荐使用easycom 模式引入无需手动import即可在模板中直接使用t-chat-loading /配置 easycom 后框架会自动将标签与组件路径建立映射详情见组件库的快速开始文档说明。2.2 手动引入如需显式引入使用如下方式import TChatLoading from tdesign/uniapp-chat/chat-loading/chat-loading.vue;并在组件中注册后使用TChatLoading animationdots text加载中... /官方示例 base/index.vue 即采用手动引入方式同时展示了gradient、moving、dots三种动效。三、ChatLoading Props API 详解组件属性定义在 props.ts 与 type.ts 中。完整 API 如下表| 属性 | 类型 | 默认值 | 说明 | 必传 | | -- | -- | -- | -- | -- | |custom-style| Object | - | 自定义样式 | N | |animation| String |moving| 加载的状态形式可选值skeleton/moving/gradient/dots| N | |text| String || 加载过程展示的文字内容 | N |3.1 animation加载动效类型这是组件最核心的属性决定等待动画的视觉形态。源码中通过validator对取值进行白名单校验// packages/uniapp-pro-components/chat/chat-loading/props.ts animation: { type: String, default: moving as TdChatLoadingProps[animation], validator(val: TdChatLoadingProps[animation]): boolean { if (!val) return true; return [skeleton, moving, gradient, dots].includes(val); }, },从 type.ts 的类型定义可知合法取值严格限定为四种枚举animation?: skeleton | moving | gradient | dots;3.2 text加载文案用于在动效右侧展示一段文字如思考中…、加载中...。默认值为模板中仅在存在text时渲染文案节点view v-iftext :classclassPrefix __text {{ text }} /view3.3 custom-style自定义样式custom-style用于覆盖组件外部容器的内联样式。在模板中通过工具函数注入view :classclassPrefix :style tools._style([customStyle])注意custom-style由tdesign/uniapp组件基座统一注入uniComponent封装因此它不会出现在 props.ts 的显式声明中但可作为通用样式透传属性使用。四、四种加载动效的视觉与实现原理chat-loading.vue 的模板结构非常清晰animation skeleton时渲染骨架屏分支否则进入动效图标分支再按animation值分别渲染moving、gradient、dots三种形态。4.1 moving三点位移动效默认值由三个圆形小点构成通过三条keyframes动画dot-moving-top/dot-moving-left/dot-moving-right实现三点从中心向外扩散再收回的跳动效果动画时长统一为0.6schat-loading-animation-duration缓动函数为ease-in-out且alternate infinite往返循环。样式定义见 chat-loading.less__moving { position: relative; width: 28rpx; height: 28rpx; --top, --left, --right { position: absolute; width: 14rpx; height: 14rpx; border-radius: 50%; background-color: brand-color; } }4.2 gradient渐变环动效一个圆环描边动画通过border-gradient-color动画在动画周期内改变边框颜色brand-color→brand-color-active→primary-color-6与边框宽度1.5px→3px→4px产生呼吸渐变感样式见 chat-loading.less__gradient { width: 28rpx; height: 28rpx; background-color: transparent; border-radius: 50%; border: 3rpx solid brand-color; animation: border-gradient-color chat-loading-animation-duration ease-in-out alternate infinite; }4.3 dots点阵加载复用 TDesign 基础库的 t-loading 组件以themedots、size60rpx渲染标准点阵加载图标view v-ifanimation dots :classclassPrefix __dots t-loading themedots size60rpx / /view其外层容器在 chat-loading.less 中定义为 flex 居中布局保证点阵在组件区域内水平垂直居中。4.4 skeleton骨架屏骨架屏分支复用 TDesign 基础库的 t-skeleton 组件采用段落主题、渐变动画并指定列宽block v-ifanimation skeleton view :classclassPrefix __skeleton t-skeleton :row-col[1, 1, 1, { width: 80% }] themeparagraph animationgradient loading / /view /blockrow-col数组依次渲染四列占位前三列占满宽度、最后一列占80%配合gradient渐变扫光动画适合模拟对话气泡中的多行文本内容加载。注意此时外层不渲染动效图标节点模板中v-ifanimation ! skeleton并让骨架屏铺满容器宽度__skeleton { width: 100% }。从源码结构看skeleton 模式更适合整段回复内容预加载的场景而 moving / gradient / dots 更适合行内紧凑型等待指示。五、在 ChatMessage 中的联动使用ChatLoading 最大的实战价值在于与 chat-message 组件联动当消息状态status pending等待回复时自动渲染加载动画消息到达后切换为内容渲染block v-ifstatus pending view stylewidth: 100% chat-loading :animationanimation / /view /block block v-else !-- 渲染 content / thinking / markdown 等内容 -- /blockchat-message同样提供了animation属性透传给内部chat-loading其默认值为skeleton区别于 ChatLoading 自身的moving默认值且校验逻辑一致见 chat-message/props.tsanimation: { type: String, default: skeleton as TdChatMessageProps[animation], validator(val: TdChatMessageProps[animation]): boolean { if (!val) return true; return [skeleton, moving, gradient, dots].includes(val); }, },此外chat-thinking思考过程展示组件在模型思考中状态下也会以:animationanimation的方式复用 ChatLoading用于头部状态指示block v-else t-chat-loading :animationanimation / /block由此可见ChatLoading 已成为该对话组件库中异步等待反馈的标准基础设施。六、样式定制说明6.1 主题色联动动效颜色直接继承 TDesign 设计令牌而非写死色值。moving与gradient均使用brand-color、brand-color-active、primary-color-6等变量见 chat-loading.less因此组件会自动跟随全局主题配置变化无需额外适配深浅色模式。6.2 自定义样式外层容器使用custom-style透传内联样式如调整外边距、宽度文案节点颜色使用text-color-placeholder、字号使用font-size-base文本存在时左侧自动留有spacer间距见__text样式规则需要彻底重写动画时可针对.t-chat-loading__moving、.t-chat-loading__gradient等前缀类名追加覆盖样式。七、完整示例7.1 展示四种动效官方示例 _example/base/index.vue 在一个横向容器中并排展示三种动效skeleton 模式在示例中默认注释view classchat-example view classchat-example-block t-chat-loading animationgradient / /view view classchat-example-block t-chat-loading animationmoving / /view view classchat-example-block t-chat-loading animationdots / /view /view7.2 带文案的加载态_example/text/index.vue 展示了dots动效搭配加载中...文案的典型组合t-chat-loading animationdots text加载中... /7.3 接入真实对话流程结合前面章节一个完整的接入模式如下t-chat-message :statusmessage.status !-- pending 时自动显示加载态 -- :animationmoving !-- 透传给内部 chat-loading -- :contentmessage.content roleassistant /当接口请求发起时置status pending响应返回或流式开始时切换为streaming/complete加载动画即自动出现与消失无需额外编写显隐逻辑。八、小结ChatLoading 是一个 API 极简仅三个 Props、但实现完整的对话加载组件animation提供四种差异化动效供场景挑选text支撑带文案的加载提示custom-style提供样式兜底同时它深度融入chat-message、chat-thinking等上层组件构成了整个 Chat 组件库统一、一致的异步等待反馈体系。对需要快速构建 AI 对话类小程序/跨端应用的开发者而言直接复用该组件可以显著减少加载态的自研成本并天然保持 TDesign 的设计语言一致性。赞分享前端UI组件小程序设计系统移动开发【免费下载链接】tdesign-miniprogramWechat MiniProgram and Uniapp UI components lib for TDesign项目地址https://gitcode.com/gh_mirrors/tde/tdesign-miniprogram点击查看免费下载相关推荐TDesign Uniapp Chat 对话加载组件 ChatLoading 完全指南四种加载动效、文案配置与 easycom 引入实战TDesign Uniapp Chat 对话加载组件 ChatLoading 完全指南四种加载动效、文案配置与 easycom 引入实战 ChatLoadin前端UI组件小程序设计系统移动开发TDesign Miniprogram ChatLoading 对话加载组件实战指南四种加载动效与 API 全解析TDesign Miniprogram ChatLoading 对话加载组件实战指南四种加载动效与 API 全解析 导读 ChatLoading 是 TDes前端UI组件小程序设计系统移动开发TDesign小程序组件库完整使用指南TDesign小程序组件库完整使用指南 TDesign MiniProgram是腾讯开源的专业微信小程序UI组件库提供60高质量组件和一致的设计体验帮助开前端UI组件小程序设计系统移动开发上一篇pandoc 测试用例 6709 解析--file-scope 模式下制表符仍须按 --tab-stop 展开下一篇CANN ops-transformer 算子详解MoeInitRoutingV2Grad 反向路由梯度聚合原理与 aclnn / PyTorch 调用实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考