zsy-recycling-supervision-admin/src/pages/main-zone/header-bar/UserPanel.vue

<template>
  <IxDropdown :trigger="currentTab==='1'?'hover':'click'" placement="bottom">
    <div class="user-info-container">
      <div>
        <div>{{ appUserStore.nickname }}</div>
        <div v-if="tenantName">{{ tenantName }}</div>
      </div>
      <IxAvatar :src="avatar" class="avatar"/>
    </div>
    <template #overlay>
      <div class="opt-panel ix-global-hghjyn">
        <div>
          <div>{{ appUserStore.nickname }}</div>
          <div v-if="tenantName">{{ tenantName }}</div>
        </div>
        <IxTabs v-model:selectedKey="currentTab" :dataSource="tabsDtaSource" :forceRender="false" type="segment">
          <template #content="{ key }">
            <IxEmpty v-if="key === '1' && appSettingStore.collectedMenus.length === 0"/>
            <IxList v-else-if="key === '1' && appSettingStore.collectedMenus.length > 0">
              <IxListItem v-for="item in appSettingStore.collectedMenus">
                <IxButton mode="text" @click="openMenuHandler(item)">
                  {{ item.title }}
                  <IxIcon name="jumpz"/>
                </IxButton>
                <IxIcon class="menu-bookmarked" name="bookmark" @click.stop="bookmarkHandler(item)"/>
              </IxListItem>
            </IxList>
            <UserInfo v-else-if="key === '2'"/>
            <ModifyPwdForm v-else-if="key === '3'"/>
            <Settings v-else-if="key === '4'"/>
          </template>
        </IxTabs>
        <IxButton @click="logoutHandler">退出登录</IxButton>
      </div>
    </template>
  </IxDropdown>
</template>

<script lang="ts" setup>
import { useAppUserStore } from '@/common/app/app-user-store.ts'
import Strings from '@/common/utils/strings.ts'
import defaultAvatar from '@/assets/images/avatar.png'
import LoginApi from '@/pages/login/login-api.ts'
import Evt from '@/common/utils/evt.ts'
import { useAppSettingStore } from '@/common/app/app-setting-store.ts'
import Settings from '@/pages/main-zone/header-bar/Settings.vue'
import ModifyPwdForm from '@/pages/main-zone/header-bar/ModifyPwdForm.vue'
import UserInfo from '@/pages/main-zone/header-bar/UserInfo.vue'
import { VKey } from '@idux/cdk'
import Nav from '@/common/router/nav.ts'
import { downloadBaseUrl } from '@/common'
import MenuPanelApi from '@/pages/main-zone/menu-panel/menu-panel-api.ts'
import Toast from '@/components/toast'
import { reloadUserInfo } from '@/common/app'

const appSettingStore = useAppSettingStore()
const appUserStore = useAppUserStore()

const currentTab = ref<VKey>('1')

const tabsDtaSource = [
  {key: '1', title: '我的收藏'},
  {key: '2', title: '基本资料'},
  {key: '3', title: '修改密码'},
  {key: '4', title: '系统设置'},
]

const avatar = computed(() => {
  return Strings.isBlank(appUserStore.avatar) ? defaultAvatar : downloadBaseUrl + appUserStore.avatar!
})
const tenantName = computed(() => {
  return appUserStore.tenantName
})

function logoutHandler() {
  LoginApi.logout()
      .finally(() => {
        Evt.emit('logout')
      })
}

function openMenuHandler(data: AppTypes.Menu) {
  Nav.open(data.routeName)
}

function bookmarkHandler(data: AppTypes.Menu) {
  MenuPanelApi.bookmark(data.id, false)
      .then(() => {
        Toast.success('已取消')
        reloadUserInfo()
      })
}

onUnmounted(() => {
  Evt.off('logout')
})
</script>

<style lang="stylus" scoped>
.user-info-container {
  display: flex;
  margin: 0 1rem;
  cursor: pointer;
  height: 100%;

  & > div:first-child {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-right: 1rem;
  }

  .avatar {
    display block
    margin auto
  }
}

.menu-bookmarked {
  color: var(--ix-color-warning)
}

:deep(.ix-list-item-content) {
  display: flex
  justify-content: space-between;
  align-items: center;
}

.opt-panel {
  box-shadow: var(--ix-box-shadow-md);
  border-radius: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  & > div:first-child {
    width 100%
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-bottom: 1px solid var(--ix-color-border);
    background-color: rgba(0, 46, 70, 0.04);
    padding: 1rem;
  }

  :deep(.ix-tabs) {
    width 100%
    height 26rem
    border-bottom: 1px solid var(--ix-color-border);
  }

  :deep(.ix-tabs .ix-tabs-nav-wrapper) {
    height: calc(var(--ix-tabs-nav-font-size-md) * 3);
  }

  :deep(.ix-tabs .ix-tabs-pane-wrapper) {
    height: calc(100% - var(--ix-tabs-nav-font-size-md) * 3);
    padding 0
  }

  :deep(.ix-tabs .ix-tabs-pane-wrapper .ix-tabs-pane) {
    height: 100%;
    overflow-y auto
  }


  & > button:nth-child(3) {
    display flex
    width 20rem
    margin: .6rem 0;
  }

  /*
    & > div:nth-child(2) {
      display: flex;
      height: 3rem;
      justify-content: space-around;
      align-items: center;
      border-bottom: 1px solid var(--ix-color-border);

      & > div {
        cursor: pointer;
        flex: 1;
        height: 100%;
        text-align: center;
        line-height: 3rem;

        &::selection {
          background-color: transparent;
        }
      }

      & > div:nth-child(2) {
        border-left: 1px solid var(--ix-color-border);
        border-right: 1px solid var(--ix-color-border);
      }
    }

    & > div:nth-child(3) {
      height: 20rem;
      width: 35rem;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding: 1rem;

      & > div {
        height: 3rem;
        padding: 1rem;
        cursor: pointer;
      }

      & > div:hover {
        border-bottom: 1px solid var(--ix-color-border);
        color: var(--wh-primary-color);
      }

    }

    & > div:nth-child(4) {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 4rem;
      border-top: 1px solid var(--ix-color-border);

      & > button {
        width: 20rem;
      }
    }*/
}


</style>