refactor: refactor dashboard

Vben

2021-03-31 8a14069e71d5393cfa5b758f46a1c5c001fa172b

 src/layouts/default/header/components/user-dropdown/index.vue

@@ -1,9 +1,11 @@
<template>
  <Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
    <span :class="[prefixCls, `${prefixCls}--${theme}`]">
    <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
      <img :class="`${prefixCls}__header`" :src="headerImg" />
      <span :class="`${prefixCls}__info`">
        <span :class="`${prefixCls}__name anticon`">{{ getUserInfo.realName }}</span>
      <span :class="`${prefixCls}__info hidden md:block`">
        <span :class="`${prefixCls}__name  `" class="truncate">
          {{ getUserInfo.realName }}
        </span>
      </span>
    </span>

@@ -15,14 +17,14 @@
          icon="ion:document-text-outline"
          v-if="getShowDoc"
        />
        <MenuDivider />
        <MenuDivider v-if="getShowDoc" />
        <MenuItem
          key="lock"
          :text="t('layout.header.tooltipLock')"
          icon="ion:lock-closed-outline"
        />
        <MenuItem
          key="loginOut"
          key="logout"
          :text="t('layout.header.dropdownItemLoginOut')"
          icon="ion:power-outline"
        />
@@ -51,7 +53,7 @@

  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

  type MenuEvent = 'loginOut' | 'doc' | 'lock';
  type MenuEvent = 'logout' | 'doc' | 'lock';

  export default defineComponent({
    name: 'UserDropdown',
@@ -93,7 +95,7 @@

      function handleMenuClick(e: { key: MenuEvent }) {
        switch (e.key) {
          case 'loginOut':
          case 'logout':
            handleLoginOut();
            break;
          case 'doc':
@@ -121,9 +123,7 @@
  @prefix-cls: ~'@{namespace}-header-user-dropdown';

  .@{prefix-cls} {
    display: flex;
    height: @header-height;
    min-width: 100px;
    padding: 0 0 0 10px;
    padding-right: 10px;
    overflow: hidden;
@@ -136,8 +136,8 @@
    }

    img {
      width: 26px;
      height: 26px;
      width: 24px;
      height: 24px;
      margin-right: 12px;
    }