Sky-Cube AI交互组件开发Skill
适用场景
开发 AI 交互类前端组件:对话消息流式渲染、打字机效果、Markdown 渲染、图表可视化、会话控制(停止/重新生成)。
执行步骤
- 流式渲染:消费 SSE 或回调流,增量追加文本到消息状态;渲染用 requestAnimationFrame 或短间隔批量合并,避免逐字高频渲染。
- 打字机效果:基于流式增量直接渲染即为天然打字机;需要动画时按帧推进,支持「停止/继续/中断」状态切换。
- Markdown 渲染:选成熟渲染库,渲染前必须 sanitize 过滤脚本与危险标签,禁止直接 v-html/dangerouslySetInnerHTML 未经消毒内容。
- 图表可视化:数据到图表组件(如 ECharts)统一走适配层;大数据量下采样;图表 resize 与主题切换统一处理。
- 会话控制:停止生成(中断请求并清理连接)、重新生成、清空会话;每个消息带状态(进行中/完成/失败/已中断)。
- 异常与性能:断流重连或提示重试;长会话列表虚拟滚动;消息内容防抖保存,避免高频接口调用。
规范要点
- 流式连接必须随组件销毁清理,防止内存泄漏与后台请求堆积。
- AI 输出内容一律视为不可信:渲染前 sanitize,链接加 rel 与白名单校验。
- 进行中状态禁止用户重复触发同一请求,停止/中断必须真正终止网络请求。
- 图表配置抽为可复用封装,禁止页面内堆积配置对象;数据更新与销毁时机明确。
- 长文本与长列表必须虚拟化,滚动跟随与用户手动滚动区分处理。
输出模板
## AI 交互组件方案
组件清单:流式消息/输入框/停止控制/Markdown 渲染/图表
流式处理:SSE 解析方式 + 渲染合并策略 + 中断清理
安全处理:内容 sanitize 方案 + 链接/脚本白名单
会话状态机:消息状态流转(进行中/完成/失败/中断)
自检清单
- 流式增量渲染无卡顿,连接随销毁清理
- AI 输出内容渲染前 sanitize,无 XSS 风险
- 停止/中断真正终止请求,无重复提交
- 长列表虚拟滚动,图表统一封装
- 失败/中断状态有明确 UI 与重试入口