更新记录

1.0.0（2026-06-28）

新增

• color prop：文字颜色自定义，默认 #ffffff
• display prop：显示模式，full 全称（默认）/ first 仅首字
• weight prop：字重自定义，默认 600
• image prop：传入图片地址后直接显示图片头像，不生成文字
• 3 字以上文字自动拆为两行显示（3 字为 2|1，4 字以上为 2|剩余）
• 单行文字自适应字号，居中无遮挡
• 多行文字 flex 纵向居中对齐
• 更新 readme.md：组件介绍、特性说明、Props 文档、使用示例
• 更新 package.json：displayName 改为「智能文字头像」，补充 description

修复

• 修复 UTS 编译错误：移除不兼容的双重类型断言 as unknown as
• 修复 UTS 编译错误：移除 Record<string, unknown> 类型注解
• 修复单行文字偏上、顶部被遮挡问题：lineHeight 从 1.0x 调整为 1.6x 字号

优化

• 清理未使用文件：utils/new-short-name copy.uts、utils/short-name.uts
• 组件定位从「企业头像」扩展为「通用文字头像」，覆盖用户名、群组名等场景

平台兼容性

uni-app(5.14)

uni-app x(5.14)

mt-avatar-bgcolor · 智能文字头像

基于文字自动生成彩色头像的 uni-app x 组件。输入任意文字（用户名、群组名、企业名、标题等），即可通过 DJB2 哈希算法稳定映射为柔和背景色，配合自适应字号排版快速展示。同时支持传入图片直接显示，一个组件覆盖全部头像场景。

特性

• 文字映射颜色：同一文字始终生成相同背景色，视觉稳定可预期
• 智能字号排版：单行文字字号自适应放大，3 字以上自动拆两行，居中无遮挡
• 双模式显示：全称 / 仅首字，满足不同布局密度需求
• 图片优先：传入图片地址后直接显示，不生成文字头像，兼容已有头像图
• 零依赖：纯 UTS 实现，无三方依赖，即装即用

props

使用示例

<!-- 默认全称 -->
<mt-avatar-bgcolor :name="userName" />

<!-- 仅显示首字 -->
<mt-avatar-bgcolor :name="userName" display="first" />

<!-- 自定义尺寸、圆角、颜色 -->
<mt-avatar-bgcolor :name="groupName" :size="120" :radius="60" color="#333333" />

<!-- 传入图片，直接显示 -->
<mt-avatar-bgcolor :name="userName" :image="avatarUrl" :size="80" :radius="40" />

显示规则