From a4e107971e58bb4cf64489e7349c5031a9452cf0 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Tue, 29 Jul 2025 15:44:45 +0800
Subject: [PATCH] =?UTF-8?q?fix(avatar):=20=E6=B8=85=E7=A9=BA=20src=20?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E5=90=8E=E7=BC=BA=E6=8D=9F=E5=85=83=E7=B4=A0?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/avatar/__tests__/avatar.test.ts |  47 ++++++--
 packages/component/component/avatar/index.vue | 112 ++++++++++--------
 .../component/component/avatar/interface.ts   |   8 ++
 .../component/avatarList/constant.ts          |   4 +
 .../component/component/avatarList/index.vue  |  27 ++---
 .../component/avatarList/interface.ts         |   7 ++
 .../component/avatarList/use-avatar-list.ts   |  10 --
 7 files changed, 126 insertions(+), 89 deletions(-)
 create mode 100644 packages/component/component/avatar/interface.ts
 create mode 100644 packages/component/component/avatarList/constant.ts
 create mode 100644 packages/component/component/avatarList/interface.ts
 delete mode 100644 packages/component/component/avatarList/use-avatar-list.ts

diff --git a/packages/component/component/avatar/__tests__/avatar.test.ts b/packages/component/component/avatar/__tests__/avatar.test.ts
index 7ea7eeba..f8f5f8c1 100644
--- a/packages/component/component/avatar/__tests__/avatar.test.ts
+++ b/packages/component/component/avatar/__tests__/avatar.test.ts
@@ -1,15 +1,10 @@
-/*
- * @Author: baobaobao
- * @Date: 2023-11-06 14:03:54
- * @LastEditTime: 2023-11-06 15:36:02
- * @LastEditors: baobaobao
- */
 import { mount, config } from "@vue/test-utils";
-import { beforeAll, describe, expect, test, vi } from "vitest";
+import { describe, expect, test } from "vitest";
+import { sleep } from "@layui/component/test-utils";
+import { h, nextTick } from "vue";
 import LayAvatar from "../index";
-import LayIcon from "../../icon";
+import LayIcon from "@layui/component/component/icon";
 
-import { nextTick } from "vue";
 
 config.global.components = {
   "lay-icon": LayIcon,
@@ -66,4 +61,38 @@ describe("Avatar.vue", () => {
     });
     expect(wrapper.find(".layui-avatar-xs")).toBeTruthy();
   });
+
+  test("avatar test position", async () => {
+    const wrapper = mount(LayAvatar, {
+      props: {
+        src: "https://www.layui-vue.com/assets/logo-C6qhPaYZ.jpg",
+      },
+    });
+
+    expect(wrapper.find(".layui-avatar-text").exists()).toBeFalsy();
+
+    await wrapper.setProps({src: ''})
+    await sleep(200)
+    const emptyDom = wrapper.find(".layui-avatar-text")
+    expect(emptyDom.exists()).toBeTruthy();
+
+    // 目前无法模拟真实DOM效果，故此校验无法正常进行
+    // 可等后续可校验真实DOM可放开
+    // expect(emptyDom.attributes('style')!.includes('transform')).toBeTruthy();
+
+  });
+
+  test("avatar test slots", async () => {
+    const wrapper = mount(LayAvatar, {
+      slots: {
+        default: h('div', {class: 'text'}, '1')
+      }
+    });
+
+    const emptyDom = wrapper.find(".layui-avatar-text")
+
+    expect(emptyDom.exists()).toBeTruthy();
+    expect(emptyDom.find('.layui-icon').exists()).toBeFalsy();
+    expect(emptyDom.find('.text').exists()).toBeTruthy();
+  });
 });
diff --git a/packages/component/component/avatar/index.vue b/packages/component/component/avatar/index.vue
index a9ac6a12..4800064c 100644
--- a/packages/component/component/avatar/index.vue
+++ b/packages/component/component/avatar/index.vue
@@ -1,25 +1,11 @@
-<!--
- * @Author: baobaobao
- * @Date: 2023-10-28 23:47:09
- * @LastEditTime: 2023-11-14 09:32:20
- * @LastEditors: baobaobao
--->
-
 <script setup lang="ts">
-import { computed, ref, useSlots, onMounted, onUnmounted, toRefs } from "vue";
-import "./index.less";
-import { useAvatarProvide } from "../avatarList/use-avatar-list";
+import type { AvatarProps } from "./interface";
+import { AVATAR_LIST_CONTEXT } from "@layui/component/component/avatarList/constant";
 import { LayIcon } from "@layui/icons-vue";
+import { computed, inject, nextTick, onUnmounted, ref, watch } from "vue";
+import "./index.less";
 
-export interface AvatarProps {
-  src?: string;
-  size?: "xs" | "sm" | "md" | "lg";
-  radius?: boolean;
-  icon?: string;
-  alt?: string;
-  autoFixSize?: boolean;
-  fallback?: string;
-}
+export type { AvatarProps };
 
 defineOptions({
   name: "LayAvatar",
@@ -31,14 +17,22 @@ const props = withDefaults(defineProps<AvatarProps>(), {
   icon: "layui-icon-username",
   autoFixSize: true,
 });
+const AvatarListContext = inject(AVATAR_LIST_CONTEXT, {});
 
-const slot = useSlots();
 const avatar = ref<HTMLElement | null>(null);
 const avatarText = ref<HTMLElement | null>(null);
 const styles = ref({});
-const resizeObserver = ref<ResizeObserver>();
-const { size, radius, autoFixSize } = toRefs(props);
-const isSrcFailed = ref(false);
+
+const getSize = computed(() => {
+  return AvatarListContext?.size ?? props.size;
+});
+
+const getRadius = computed(() => AvatarListContext?.radius ?? props.radius);
+
+const getAutoFixSize = computed(
+  () => AvatarListContext?.autoFixSize ?? props.autoFixSize,
+);
+
 const classes = computed(() => {
   return [
     "layui-avatar",
@@ -46,48 +40,62 @@ const classes = computed(() => {
     getSize.value ? `layui-avatar-${getSize.value}` : "",
   ];
 });
-const getParentList = useAvatarProvide();
-const getSize = computed(() => getParentList?.size ?? size.value);
-const getRadius = computed(() => getParentList?.radius ?? radius.value);
-const getAutoFixSize = computed(
-  () => getParentList?.autoFixSize ?? autoFixSize.value
-);
-onMounted(() => {
-  if (getAutoFixSize.value && avatarText.value) {
-    resizeObserver.value = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.contentBoxSize) {
-          const avatarWidth = (avatar.value as HTMLElement).offsetWidth;
-          const ratio = Math.min(
-            (avatarWidth / entry.contentBoxSize[0].inlineSize) * 0.9,
-            1
-          );
-          styles.value = { transform: `translate(-50%, -50%) scale(${ratio})` };
+
+let resizeObserver: ResizeObserver | null;
+
+watch(
+  () => [getAutoFixSize.value, props.src],
+  async ([autoFix, src]) => {
+    if (autoFix && !src) {
+      resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          if (entry.contentBoxSize) {
+            const avatarWidth = (avatar.value as HTMLElement).offsetWidth;
+            const ratio = Math.min(
+              (avatarWidth / entry.contentBoxSize[0].inlineSize) * 0.9,
+              1,
+            );
+            styles.value = { transform: `translate(-50%, -50%) scale(${ratio})` };
+          }
         }
-      }
-    });
-    resizeObserver.value.observe(avatarText.value);
-  }
-});
-const handleImgErr = (e: Event) => {
+      });
+
+      await nextTick();
+      resizeObserver.observe(avatarText.value!);
+    }
+    else {
+      resizeObserver && resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const isSrcFailed = ref(false);
+
+function handleImgErr(e: Event) {
   if (props.fallback && !isSrcFailed.value) {
     const targetElement = e.target as HTMLImageElement;
     targetElement.src = props.fallback!;
   }
   isSrcFailed.value = true;
-};
+}
 
 onUnmounted(() => {
-  resizeObserver.value?.disconnect();
+  resizeObserver && resizeObserver.disconnect();
+  resizeObserver = null;
 });
 </script>
 
 <template>
   <span ref="avatar" :class="classes">
-    <img v-if="src" :src="src" :alt="alt" @error="handleImgErr" />
-    <span ref="avatarText" class="layui-avatar-text" :style="styles" v-else>
-      <lay-icon v-if="!slot.default" :type="icon" />
-      <slot></slot>
+    <img v-if="src" :src="src" :alt="alt" @error="handleImgErr">
+    <span v-else ref="avatarText" class="layui-avatar-text" :style="styles">
+      <slot>
+        <LayIcon :type="icon" />
+      </slot>
     </span>
   </span>
 </template>
diff --git a/packages/component/component/avatar/interface.ts b/packages/component/component/avatar/interface.ts
new file mode 100644
index 00000000..7ae770c3
--- /dev/null
+++ b/packages/component/component/avatar/interface.ts
@@ -0,0 +1,8 @@
+import type { AvatarListProps } from "@layui/component/component/avatarList/interface";
+
+export interface AvatarProps extends AvatarListProps {
+  src?: string;
+  icon?: string;
+  alt?: string;
+  fallback?: string;
+}
diff --git a/packages/component/component/avatarList/constant.ts b/packages/component/component/avatarList/constant.ts
new file mode 100644
index 00000000..107f9d68
--- /dev/null
+++ b/packages/component/component/avatarList/constant.ts
@@ -0,0 +1,4 @@
+import type { InjectionKey } from "vue";
+import type { AvatarListProps } from "./interface";
+
+export const AVATAR_LIST_CONTEXT: InjectionKey<AvatarListProps> = Symbol("LayAvatar");
diff --git a/packages/component/component/avatarList/index.vue b/packages/component/component/avatarList/index.vue
index 015805be..4935c8b0 100644
--- a/packages/component/component/avatarList/index.vue
+++ b/packages/component/component/avatarList/index.vue
@@ -1,19 +1,9 @@
-<!--
- * @Author: baobaobao
- * @Date: 2023-10-18 12:54:03
- * @LastEditTime: 2023-10-28 23:48:27
- * @LastEditors: baobaobao
--->
-
 <script setup lang="ts">
-import { provide } from "vue";
-import { LAYUI_AVATAR_KEY } from "./use-avatar-list";
+import type { AvatarListProps } from "./interface";
+import { provide, reactive, toRefs } from "vue";
+import { AVATAR_LIST_CONTEXT } from "./constant";
 
-export interface AvatarListProps {
-  size?: "xs" | "sm" | "md" | "lg";
-  radius?: boolean;
-  autoFixSize?: boolean;
-}
+export type { AvatarListProps };
 
 defineOptions({
   name: "LayAvatarList",
@@ -24,13 +14,14 @@ const props = withDefaults(defineProps<AvatarListProps>(), {
   radius: false,
   autoFixSize: true,
 });
-provide(LAYUI_AVATAR_KEY, {
-  ...props,
-});
+
+provide(AVATAR_LIST_CONTEXT, reactive({
+  ...toRefs(props),
+}));
 </script>
 
 <template>
   <div class="layui-avatar-list">
-    <slot></slot>
+    <slot />
   </div>
 </template>
diff --git a/packages/component/component/avatarList/interface.ts b/packages/component/component/avatarList/interface.ts
new file mode 100644
index 00000000..169b1b94
--- /dev/null
+++ b/packages/component/component/avatarList/interface.ts
@@ -0,0 +1,7 @@
+import type { CommonSize } from "@layui/component/types";
+
+export interface AvatarListProps {
+  size?: CommonSize;
+  radius?: boolean;
+  autoFixSize?: boolean;
+}
diff --git a/packages/component/component/avatarList/use-avatar-list.ts b/packages/component/component/avatarList/use-avatar-list.ts
deleted file mode 100644
index 4d7dcd31..00000000
--- a/packages/component/component/avatarList/use-avatar-list.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * @Author: baobaobao
- * @Date: 2023-10-27 14:10:55
- * @LastEditTime: 2023-10-27 14:11:59
- * @LastEditors: baobaobao
- */
-import { InjectionKey, inject } from "vue";
-
-export const LAYUI_AVATAR_KEY: InjectionKey<any> = Symbol("layui-avatar");
-export const useAvatarProvide = () => inject(LAYUI_AVATAR_KEY, {});
-- 
Gitee