feat: refs #6630 VnAvatar letter feature added

src/components/common/VnLog.vue

@@ -422,13 +422,13 @@ setLogTree();
         >
             <div class="timeline">
                 <div class="user-avatar">
-                    <VnUserLink v-if="userLog.user.image" :worker-id="userLog.user.id">
+                    <VnUserLink :worker-id="userLog.user.id">
                         <template #link>
                             <VnAvatar
                                 :class="{ 'cursor-pointer': userLog.user.id }"
                                 :worker-id="userLog.user.id"
                                 :title="userLog.user.nickname"
-                                size="md"
+                                size="lg"
                             />
                         </template>
                     </VnUserLink>

src/components/ui/VnAvatar.vue

@@ -1,20 +1,37 @@
 <script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
+import { useColor } from 'src/composables/useColor';
 
 const $props = defineProps({
     workerId: { type: Number, required: true },
     description: { type: String, default: null },
-    size: { type: String, default: 'xl' },
+    size: { type: String, default: null },
+    title: { type: String, default: null },
 });
 const session = useSession();
 const token = session.getToken();
+const { t } = useI18n();
+
+const title = computed(() => $props.title ?? t('globals.system'));
+const showLetter = ref(false);
 </script>
 <template>
     <div class="avatar-picture column items-center">
-        <QAvatar color="orange" :size="$props.size">
+        <QAvatar
+            :style="{
+                backgroundColor: useColor(title),
+            }"
+            :size="$props.size"
+            :title="title"
+        >
+            <template v-if="showLetter">{{ title.charAt(0) }}</template>
             <QImg
+                v-else
                 :src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
                 spinner-color="white"
+                @error="showLetter = true"
             />
         </QAvatar>
         <div class="description">