40 lines
1.5 KiB
Vue
40 lines
1.5 KiB
Vue
<template>
|
|
<q-btn flat no-caps dense icon="account_circle" :label="userInfo.fullName">
|
|
<q-menu class="bar-user-menu">
|
|
<div class="row no-wrap q-px-md q-pt-sm ">
|
|
<div class="column items-center justify-center">
|
|
<q-icon name="account_circle" color="grey" size="3em" />
|
|
</div>
|
|
<div class="column q-ml-sm overflow-hidden">
|
|
<div class="text-subtitle1 ellipsis full-width">{{ userInfo.fullName }}</div>
|
|
<div class="text-grey-7 ellipsis text-caption q-mb-sm full-width">{{ userInfo.email }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row q-pb-sm q-px-md">
|
|
<q-chip v-if="authStore.isSuperAdmin" square color="accent" text-color="white" icon="admin_panel_settings"
|
|
label="システム管理者" size="sm" />
|
|
<q-chip v-else v-for="(item) in roles" square class="role-label" color="primary" text-color="white" :key="item.id" :label="item.name" size="sm" />
|
|
</div>
|
|
<div class="row q-pb-sm q-px-md">
|
|
<q-btn outline color="negative" icon="logout" label="Logout" @click="authStore.logout()" class="full-width" size="sm" v-close-popup />
|
|
</div>
|
|
</q-menu>
|
|
</q-btn>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useAuthStore } from 'stores/useAuthStore';
|
|
import { computed } from 'vue';
|
|
|
|
const authStore = useAuthStore();
|
|
|
|
const userInfo = computed(() => authStore.userInfo);
|
|
const roles = computed(() => authStore.roles);
|
|
</script>
|
|
<style lang="scss" >
|
|
.bar-user-menu {
|
|
max-width: 230px !important;
|
|
}
|
|
.role-label {
|
|
margin: 2px;
|
|
}
|
|
</style> |