这一版本优化了很多

node_modules/wot-design-uni/components/wd-avatar/wd-avatar.vue

@@ -0,0 +1,203 @@
+<!--
+ * @Author: North
+ * @Date: 2026-01-01
+ * @LastEditTime: 2026-01-01
+ * @LastEditors: North
+ * @Description: Avatar 头像组件，支持图片、文本或图标展示
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-avatar/wd-avatar.vue
+-->
+<template>
+  <view v-if="isShow" :class="rootClass" :style="rootStyle" @click="handleClick">
+    <!-- 默认插槽优先 -->
+    <slot v-if="hasDefaultSlot"></slot>
+    <!-- 图片 -->
+    <wd-img v-else-if="src" :src="src" :width="imgSize" :height="imgSize" :mode="props.mode" custom-class="wd-avatar__img" @error="handleError" />
+    <!-- 文本 -->
+    <text v-else-if="text" class="wd-avatar__text">{{ text }}</text>
+    <!-- 图标 -->
+    <wd-icon v-else-if="icon" :name="icon" custom-class="wd-avatar__icon" />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-avatar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, useSlots, type CSSProperties, ref } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdImg from '../wd-img/wd-img.vue'
+import { addUnit, isDef, objToStyle } from '../common/util'
+import { avatarProps, type AvatarSize } from './types'
+import { useParent } from '../composables/useParent'
+import { AVATAR_GROUP_KEY } from '../wd-avatar-group/types'
+
+const props = defineProps(avatarProps)
+const emit = defineEmits(['error', 'click'])
+const slots = useSlots()
+
+// _internal 用于 avatar-group 内部的溢出计数头像，跳过父组件上下文
+const { parent, index } = props._internal ? { parent: null, index: ref(-1) } : useParent(AVATAR_GROUP_KEY)
+
+const SIZE_MAP: Record<AvatarSize, number> = {
+  large: 76,
+  medium: 64,
+  normal: 54,
+  small: 48
+}
+
+/**
+ * 是否显示该头像
+ */
+const isShow = computed(() => {
+  if (!parent) {
+    return true
+  }
+  // 在 avatar-group 中，根据 maxCount 判断
+  const maxCount = parent.props.maxCount
+  if (!isDef(maxCount)) {
+    return true
+  }
+  const count = typeof maxCount === 'number' ? maxCount : parseInt(maxCount, 10)
+  // 检查 count 是否为有效数字
+  if (isNaN(count) || count <= 0) {
+    return true
+  }
+  return index.value < count
+})
+
+/**
+ * 获取实际尺寸
+ * 在 avatar-group 中优先使用 parent 的 size
+ */
+const actualSize = computed(() => {
+  if (parent && isDef(parent.props.size)) {
+    return parent.props.size
+  }
+  return props.size
+})
+
+/**
+ * 获取实际像素尺寸
+ */
+const imgSize = computed(() => {
+  const size = actualSize.value
+  if (!isDef(size)) {
+    return SIZE_MAP.normal
+  }
+
+  if (typeof size === 'string' && size in SIZE_MAP) {
+    return SIZE_MAP[size as AvatarSize]
+  }
+
+  return size
+})
+
+const hasDefaultSlot = computed(() => !!slots.default)
+
+const rootClass = computed(() => {
+  const classes = ['wd-avatar', props.customClass]
+
+  // 形状类 - 在 avatar-group 中优先使用 parent 的 shape
+  const shape = parent && isDef(parent.props.shape) ? parent.props.shape : props.shape
+  classes.push(`wd-avatar--${shape}`)
+
+  // 尺寸类仅预设尺寸
+  const size = actualSize.value
+  if (typeof size === 'string' && ['large', 'medium', 'normal', 'small'].includes(size)) {
+    classes.push(`wd-avatar--${size}`)
+  }
+
+  // 在 avatar-group 中时，添加 item 类
+  if (parent) {
+    classes.push('wd-avatar-group__item')
+  }
+
+  return classes.join(' ')
+})
+
+/**
+ * 根节点样式
+ */
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+
+  let size = ''
+  const sizeValue = actualSize.value
+  if (typeof sizeValue === 'string' && sizeValue in SIZE_MAP) {
+    size = addUnit(SIZE_MAP[sizeValue as AvatarSize])
+  } else if (isDef(sizeValue)) {
+    size = addUnit(sizeValue)
+  }
+  if (size) {
+    style.width = size
+    style.height = size
+    style.fontSize = `calc(${size} * 0.45)`
+
+    if (parent) {
+      style['--wot-avatar-group-overlap' as any] = `calc(${size} * -0.22)`
+    }
+  }
+
+  // 形状 - 在 avatar-group 中优先使用 parent 的 shape
+  const shape = parent && isDef(parent.props.shape) ? parent.props.shape : props.shape
+  if (shape === 'round') {
+    style.borderRadius = '50%'
+  }
+
+  // 处理层叠效果的 z-index
+  if (parent) {
+    const cascading = parent.props.cascading
+    if (cascading === 'left-up') {
+      // 左侧在上，越后面越大
+      style.zIndex = index.value + 1
+    } else if (cascading === 'right-up') {
+      // 右侧在上，越前面越大
+      const maxCount = parent.props.maxCount
+      let count = parent.children?.length ?? 0
+
+      if (isDef(maxCount)) {
+        const parsedCount = typeof maxCount === 'number' ? maxCount : parseInt(maxCount, 10)
+        if (!isNaN(parsedCount) && parsedCount > 0) {
+          count = parsedCount
+        }
+      }
+
+      style.zIndex = count - index.value
+    }
+  }
+
+  if (props.color) {
+    style.color = props.color
+  }
+
+  if (props.bgColor) {
+    style.backgroundColor = props.bgColor
+    // 有背景色但无文字色时，默认白色
+    if (!props.color) {
+      style.color = '#fff'
+    }
+  }
+
+  return `${objToStyle(style)} ${props.customStyle}`
+})
+
+const handleError = (event: any) => {
+  emit('error', event)
+}
+
+const handleClick = () => {
+  emit('click')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>