Yi.Admin/Yi.Vue/src/layouts/default/widgets/Account.vue

<template>
  <v-menu
    bottom
    left
    min-width="200"
    offset-y
    origin="top right"
    transition="scale-transition"
  >
    <template v-slot:activator="{ attrs, on }">
      <v-btn
        class="ml-2"
        min-width="0"
        text
        v-bind="attrs"
        v-on="on"
      >
        <!-- <v-icon>mdi-account</v-icon> -->
        <v-avatar size="36" class="elevation-2">
              <!-- <img src="https://z3.ax1x.com/2021/05/09/gJadhD.jpg" /> -->
              <img
                :src="
                  baseurl +
                  '/File/ShowNoticeImg?filePath=' +
                  $store.state.user.user.icon
                "
              />
            </v-avatar>
      </v-btn>
    </template>

    <v-list
      :tile="false"
      flat
      nav
    >

  <app-bar-item to="/"><v-list-item-title v-text="'用户名：橙子'" /></app-bar-item>
  <app-bar-item to="/"><v-list-item-title v-text="'称号：橙子'" /></app-bar-item>

        <v-divider class="mb-2 mt-2"/>

      <template v-for="(p, i) in profile">
        <v-divider
          v-if="p.divider"
          :key="`divider-${i}`"
          class="mb-2 mt-2"
        />

        <app-bar-item
          v-else
          :key="`item-${i}`"
          to="/"
        >
          <v-list-item-title v-text="p.title" />
        </app-bar-item>
      </template>
    </v-list>
  </v-menu>
</template>

<script>
  export default {
    name: 'DefaultAccount',

    data: () => ({
      profile: [
        { title: '用户信息' },
        { title: '设置' },
        { divider: true },
        { title: '登出' },
      ],
    }),
  }
</script>