BotAvatar

用法

基础

state 跟随智能体的真实状态：流式输出或执行中为 working，空闲为 default。

对话回复

<template>
  <div class="msg msg--bot">
    <TxBotAvatar type="clover" :state="streaming ? 'working' : 'default'" :size="32" />
    <div class="msg-body">
      {{ streaming ? '思考中…' : content }}
    </div>
  </div>
</template>

智能体名册

每个实例默认错开眨眼时机，同一行不会同时眨眼。

<template>
  <ul class="roster">
    <li v-for="agent in agents" :key="agent.id">
      <TxBotAvatar :type="agent.avatar" :state="agent.busy ? 'working' : 'default'" :size="32" aria-hidden />
      <span>{{ agent.name }}</span>
      <span class="muted">{{ agent.status }}</span>
    </li>
  </ul>
</template>

静态头像

<template>
  <TxBotAvatar type="hexagon" :size="96" paused />
</template>

最佳实践

• 用 size 控制尺寸，不要在 style 或类里写 width、height、margin，否则头像会位移或被裁。
• 头像上方留出空间：画布按 size 的 1.5 倍绘制，跳跃会超出布局盒，overflow: hidden 的父级会把它裁掉。
• 映射自有状态：running / streaming / pending / busy → working；idle / ready / online → default；offline / away / disabled → default 加 paused。
• 名称与状态已在旁边以文字呈现时，加 aria-hidden 作为装饰。
• 只用于机器人；真人头像用照片或首字母。

API 参考

属性

BotAvatarType 共 18 种：clover、flower、triangle、square、blob、ghost、circle、drop、star、droid、mech、alien、hexagon、cat、cloud、pill、pebble、puddle。BotAvatarFace 为 'eyes' | 'mouth'。BotAvatarSquashEase 为 'sharp' | 'pulse' | 'soft' | 'bouncy'。

暴露方法

概述

• 画布为 role="img"，aria-label 随状态变化（如 "Clover bot, idle"）；传入 aria-label 可覆盖。
• 其余属性与 DOM 事件直接透传到 <canvas>，class、style、data-* 照常可用。
• 未知 state 回退到 default，未知 type 回退到 clover。
• 全页共用一个 requestAnimationFrame 循环；实例离开视口或标签页隐藏时停止绘制。
• 减少动态效果时不启动循环，只画当前状态的静止姿势；该偏好在渲染时读取，不实时监听。
• 状态切换带过渡，每个 token 或工具调用都切换 state 也安全。

技术实现

• 设备像素比上限为 2；plastic 打光在某体型首次出现时于空闲时间烘焙，完成前以柔和外观顶替。
• 绘制引擎逐字移植自上游 Jakubantalik/Libraries · bot-avatars（MIT © Jakub Antalik），Vue 壳对应上游 React 组件。
• 源码：packages/tuffex/packages/components/src/bot-avatar/。