调整头像大小

通过 MuiAvatar 编辑器可以精确控制头像组件的外观和大小。

访问路径

1. 打开 VertiTab 设置页面
2. 点击侧边栏的"自定义主题"菜单
3. 选择要编辑的主题，点击"编辑"
4. 点击"🧩 组件自定义"标签页
5. 找到"Avatar"配置卡片，点击展开

头像配置选项

基础属性设置

变体 (Variant)

• 圆形 (Circular)：标准圆形头像
• 圆角 (Rounded)：带圆角的方形头像
• 方形 (Square)：方形头像

尺寸 (Size)

• 调节范围：9-32px
• 滑条调节：拖动滑条实时调整头像大小
• 同时影响：宽度和高度同步调整

字体大小 (Font Size)

• 调节范围：9-24px
• 作用效果：影响头像内显示的文字（如用户姓名首字母）大小
• 独立控制：不影响头像本身的尺寸

高级样式设置

边框圆角 (Border Radius)

• 自定义圆角程度
• 仅在圆角或方形变体时生效

外边距 (Margin)

• 调节头像与周围元素的间距
• 最大值：20px

操作步骤

调整头像大小

1. 在"尺寸"滑条上拖动调节点
2. 观察实时预览效果
3. 找到合适的大小后松开鼠标

调整文字大小

1. 在"字体大小"滑条上调节
2. 主要影响头像内显示的首字母
3. 确保文字与头像大小协调

修改外观样式

1. 选择合适的变体类型
2. 根据需要调整边框圆角
3. 设置适当的外边距

实际效果

• 用户头像：显示在个人资料、评论等位置
• 占位头像：显示用户姓名首字母时的样式
• 界面一致性：所有头像组件统一使用这些设置

使用建议

1. 保持协调：头像大小应与界面其他元素协调
2. 考虑可读性：确保文字在头像内清晰可见
3. 测试不同场景：在各种界面位置验证效果
4. 适度调整：避免过大或过小影响界面美观

保存设置

所有调整会实时预览，点击主题编辑器的"保存"按钮保存更改。