feat:用户头像名称

ZhangXianQiang

2024-07-04 2663f19b620d057633c66ca8442b04a234072414

feat:用户头像名称

 src/components/NormalHeader/index.vue

@@ -9,14 +9,14 @@

    <div class="user-container flex items-center">
      <div class="avatar-container w-12 h-12 rounded-full overflow-hidden mr-3">
        <div class="avatar-content">
          <img src="@/assets/image/avatar/avatar.png" class="avatar-img" alt="">
        <div class="avatar-content" v-if="userInfo.imagePath"">
          <img :src="userInfo.imagePath" class="avatar-img" alt="">
        </div>
        <!-- <div class="avatar-content" :style="{ backgroundColor: getColor }">
          <div class="name text-xl font-bold text-white">张</div>
        </div> -->
        <div class="avatar-content" :style="{ backgroundColor: getColor }">
          <div class="name text-xl font-bold text-white">{{ getFirstName }}</div>
        </div>
      </div>
      <div class="user-name text-white">测试测试测试</div>
      <div class="user-name text-white">{{ userInfo.realName || '用户' }}</div>
    </div>
  </div>
</template>
@@ -25,13 +25,21 @@
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import randomColor from '@/utils/randomColor.js';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/index.js';

const router = useRouter();
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const getColor = computed(() => {
  return randomColor();
});

const getFirstName = computed(() => {
  return userInfo.value.realName && userInfo.value.realName[0];
});

const returnBack = () => {
  router.back();
}

 src/views/home/components/user-panel/index.vue

@@ -4,7 +4,7 @@
      <div class="panel-content flex flex-col items-center">
        <div class="avatar-container w-40 h-40 rounded-full overflow-hidden">
          <div class="avatar-content" v-if="userInfo.imagePath">
            <img src="@/assets/image/avatar/avatar.png" class="avatar-img" alt="">
            <img :src="userInfo.imagePath" class="avatar-img" alt="">
          </div>
          <div class="avatar-content" :style="{backgroundColor: getColor}" v-else>
            <div class="name text-5xl font-bold text-white">{{ getFirstName }}</div>
@@ -77,7 +77,7 @@

const getFirstName = computed(() => {
  return userInfo.value.realName && userInfo.value.realName[0];
})
});

const toolClick = (item) => {
  if (item.path) {