✨(all): update

package/component/src/component/avatar/index.less

@@ -1,25 +1,25 @@
 .layui-avatar {
-  box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: #000000d9;
   font-size: 14px;
   font-variant: tabular-nums;
+  font-feature-settings: tnum;
+  border-radius: var(--global-border-radius);
+  box-sizing: border-box;
+  color: #000000d9;
   line-height: 1.5715;
   list-style: none;
-  font-feature-settings: tnum;
   position: relative;
   display: inline-block;
   overflow: hidden;
   color: #fff;
   white-space: nowrap;
   text-align: center;
-  vertical-align: middle;
   background: #ccc;
   width: 32px;
   height: 32px;
   line-height: 32px;
-  border-radius: var(--global-border-radius);
+  vertical-align: middle;
 }
 
 .layui-avatar.layui-avatar-radius {

package/component/src/component/avatar/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { computed } from 'vue';
 export default {
   name: "LayAvatar",
 };
@@ -11,21 +12,27 @@ export interface LayAvatarProps {
   src?: string;
   size?: "xs" | "sm" | "md" | "lg";
   radius?: boolean;
+  alt?: string;
 }
 
 const props = withDefaults(defineProps<LayAvatarProps>(), {
   size: "md",
   radius: false,
 });
+
+const classes = computed(() => {
+  return [
+      'layui-avatar',
+      props.radius ? 'layui-avatar-radius' : '',
+      props.size ? `layui-avatar-${props.size}` : '',
+  ]
+})
 </script>
 
 <template>
   <img
+    :alt="alt"
     :src="src"
-    class="layui-avatar"
-    :class="[
-      radius ? 'layui-avatar-radius' : '',
-      size ? 'layui-avatar-' + size : '',
-    ]"
+    :class="classes"
   />
 </template>