decorate/src/views/personal/index.vue

<template>
  <HeadPanl v-bind="({class: 'personal-head'} as any)">
    <div class="user">
      <img :src="user.avatar" />
      <div class="info">
        <h4>{{ getGreet() }}，{{ user.nickname }}</h4>
        <div class="account">
          <span>{{ user.phone }}</span>
          <span>{{ user.email }}</span>
        </div>
        <div class="account-manage">
          <a :href="userInfoLink">{{ $t('sys.updateInfo') }} ></a>
          <a :href="userInfoLink">{{ $t('sys.updatePwd') }} ></a>
        </div>
      </div>
    </div>
    <Simples :data="simples" />
  </HeadPanl>

  <BodyPanl :title="$t('sys.operLog')">
    <RecordList />
  </BodyPanl>
</template>

<script lang="ts" setup>
import RecordList from '@/views/record/list.vue'
import Simples from '@/components/simples/index.vue'
import { HeadPanl, BodyPanl } from '@/layout/panl'
import { toRefs } from 'vue'
import { computed } from 'vue'
import { useUserStore } from '@/store'
import { userInfoLink } from '@/env'
import { ui18n } from '@/lang'

const { current: user, meta } = toRefs(useUserStore().$state)
const simples = computed(() => [
  { label: ui18n.t('sys.projectCount'), value: meta.value.projectCount },
  {
    label: ui18n.t('sys.projectFileCount'),
    value: meta.value.projectFileCount
  },
  {
    label: ui18n.t('sys.projectSceneCount'),
    value: meta.value.projectSceneCount
  },
  { label: ui18n.t('sys.projectOverCount'), value: meta.value.projectOverCount }
])
const getGreet = () => {
  const hours = new Date().getHours()
  return hours > 5 && hours < 11
    ? ui18n.t('sys.time[0]')
    : hours >= 11 && hours < 15
    ? ui18n.t('sys.time[1]')
    : hours >= 15 && hours <= 18
    ? ui18n.t('sys.time[2]')
    : ui18n.t('sys.time[3]')
}
</script>

<style lang="scss" scoped>
.personal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user {
  display: flex;
  img {
    width: 104px;
    height: 104px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    flex: none;
    margin-right: var(--padding);
    display: block;
    object-fit: cover;
    border-radius: 50%;
  }
}

.info {
  flex: 1;

  h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #323233;
  }
}

.account {
  margin-bottom: 20px;
  color: #666666;
  font-size: 14px;
  span {
    margin-right: 14px;
  }
}
.account-manage {
  a {
    font-size: 14px;
    color: #0076f6;
    margin-right: 30px;
  }
}
</style>