xiaoshu/src/components/dialog-wrap/ClientUserAvatar.vue

<template>
<div class="user-name" style="background-color: rgb(255, 110, 110)">
    {{ u_name_display }}
</div>
</template>

<script setup>
import { ref, inject, computed } from "vue";


const { helper, ajax } = inject("$global");
const userName = ref(helper.read("userName") || "");

const u_name_display = computed(() => {
    return userName.value.slice(0, 1);
});
</script>

<style scoped>
.user-name {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
</style>