car-wash-java/admin-web/src/layout/navBars/breadcrumb/toolbar.vue

<template>
  <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">

    <!--    字体大小-->
    <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
      <div class="layout-navbars-breadcrumb-user-icon">
        <!--        <i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>-->
        <el-icon class="el-icon--right">
          <ele-Switch/>
        </el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>
          <el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
          <el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!--    <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
          <div class="layout-navbars-breadcrumb-user-icon">
            <i
                class="iconfont"
                :class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'"
                :title="$t('message.user.title1')"
            ></i>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="zh-cn" :disabled="state.disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>
              <el-dropdown-item command="en" :disabled="state.disabledI18n === 'en'">English</el-dropdown-item>
              <el-dropdown-item command="zh-tw" :disabled="state.disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>-->

    <!--    <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
          <el-icon :title="$t('message.user.title2')">
            <ele-Search/>
          </el-icon>
        </div>-->

    <template v-if="admin">
      <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
        <el-icon class="el-icon--right">
          <ele-Tools/>
        </el-icon>
      </div>
    </template>

    <!-- 消息通知中心 -->
    <NotificationCenter />

    <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
      <el-icon class="el-icon--right">
        <ele-FullScreen/>
      </el-icon>
      <!--      <i
                class="iconfont"
                :title="state.isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
                :class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
            ></i>-->
    </div>

    <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
			<span class="layout-navbars-breadcrumb-user-link">
        <el-avatar :src="u.fmt.fmtImg(userInfos.avatar)" :size="35" class="mr3">
          <SvgIcon name="ele-User"/>
        </el-avatar>
				{{ userInfos.username }}
				<el-icon class="el-icon--right">
					<ele-ArrowDown/>
				</el-icon>
			</span>
      <template #dropdown>
        <el-dropdown-menu>
          <!--          <el-dropdown-item>
                      <RouterLink target="_blank" to="/admin?oid=">
                        <el-link type="primary">管理设置</el-link>
                      </RouterLink>
                    </el-dropdown-item>-->
          <!--					<el-dropdown-item command="/admin/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>-->
          <!--					<el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>-->
          <!--          <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
                    <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
                    <el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>-->
          <el-dropdown-item divided command="logOut">
            <el-icon color="#409EFC">
              <ele-SwitchButton/>
            </el-icon>
            {{ $t('message.user.dropdown5') }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <Search ref="searchRef"/>
  </div>
</template>

<script setup lang="ts" name="layoutBreadcrumbUser">
import {defineAsyncComponent, ref, computed, reactive, onMounted, onBeforeUnmount} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessageBox, ElMessage} from 'element-plus';
import screenfull from 'screenfull';
import {useI18n} from 'vue-i18n';
import {storeToRefs} from 'pinia';
import {useUserInfo} from '/@/stores/userInfo';
import {useThemeConfig} from '/@/stores/themeConfig';
import other from '/@/utils/other';
import mittBus from '/@/utils/mitt';
import {Session, Local} from '/@/utils/storage';
import u from "/@/utils/u";

// 引入组件
const Notification = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/notification.vue'));
const NotificationCenter = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/notificationCenter.vue'));
const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/search.vue'));

// 定义变量内容
const {locale, t} = useI18n();
const router = useRouter();
const storesUserInfo = useUserInfo();
const storesThemeConfig = useThemeConfig();

const {themeConfig} = storeToRefs(storesThemeConfig);
const searchRef = ref();

const props = defineProps({
  admin: {
    type: Boolean,
    default: true
  }
})

const state = reactive({
  isScreenfull: false,
  disabledI18n: 'zh-cn',
  disabledSize: 'large'
});

const onSwitchTheme = () => {
  let dark = themeConfig.value.isIsDark;
  const body = document.documentElement as HTMLElement;
  if (!dark) body.setAttribute('data-theme', 'dark');
  else body.setAttribute('data-theme', '');
  themeConfig.value.isIsDark = !dark;
  storesThemeConfig.setThemeConfig({themeConfig: themeConfig.value});
  Local.set('themeConfig', themeConfig.value)
}

const userInfos = computed(() => {
  let user = storesUserInfo.userInfos
  //console.error(user)
  return user || {};
})

// 设置分割样式
const layoutUserFlexNum = computed(() => {
  let num: string | number = '';
  const {layout, isClassicSplitMenu} = themeConfig.value;
  const layoutArr: string[] = ['defaults', 'columns'];
  if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
  else num = '';
  return num;
});
// 全屏点击时
const onScreenfullClick = () => {
  if (!screenfull.isEnabled) {
    ElMessage.warning('暂不不支持全屏');
    return false;
  }
  screenfull.toggle();
  screenfull.on('change', () => {
    if (screenfull.isFullscreen) state.isScreenfull = true;
    else state.isScreenfull = false;
  });
};
// 布局配置 icon 点击时
const onLayoutSetingClick = () => {
  mittBus.emit('openSetingsDrawer');
};
// 下拉菜单点击时
const onHandleCommandClick = (path: string) => {
  if (!path) {
    return;
  }
  if (path === 'logOut') {
    ElMessageBox({
      closeOnClickModal: false,
      closeOnPressEscape: false,
      title: t('message.user.logOutTitle'),
      message: t('message.user.logOutMessage'),
      showCancelButton: true,
      confirmButtonText: t('message.user.logOutConfirm'),
      cancelButtonText: t('message.user.logOutCancel'),
      buttonSize: 'default',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true;
          instance.confirmButtonText = t('message.user.logOutExit');
          setTimeout(() => {
            done();
            setTimeout(() => {
              instance.confirmButtonLoading = false;
            }, 300);
          }, 700);
        } else {
          done();
        }
      },
    })
        .then(async () => {
          // 清除缓存/token等
          Session.clear();
          // 使用 reload 时，不需要调用 resetRoute() 重置路由
          window.location.reload();
        })
        .catch(() => {
        });
  } else if (path === 'wareHouse') {
    window.open('https://gitee.com/lyt-top/vue-next-admin');
  } else {
    router.push(path);
  }
};
// 菜单搜索点击
const onSearchClick = () => {
  searchRef.value.openSearch();
};


// 组件大小改变
const onComponentSizeChange = (size: string) => {
  Local.remove('themeConfig');
  themeConfig.value.globalComponentSize = size;
  Local.set('themeConfig', themeConfig.value);
  initI18nOrSize('globalComponentSize', 'disabledSize');
  window.location.reload();
};
// 语言切换
const onLanguageChange = (lang: string) => {
  Local.remove('themeConfig');
  themeConfig.value.globalI18n = lang;
  Local.set('themeConfig', themeConfig.value);
  locale.value = lang;
  other.useTitle();
  initI18nOrSize('globalI18n', 'disabledI18n');
};
// 初始化组件大小/i18n
const initI18nOrSize = (value: string, attr: string) => {
  state[attr] = Local.get('themeConfig')[value];
};
// 页面加载时
onMounted(() => {
  if (Local.get('themeConfig')) {
    initI18nOrSize('globalComponentSize', 'disabledSize');
    initI18nOrSize('globalI18n', 'disabledI18n');
  }
});
</script>

<style scoped lang="scss">
.layout-navbars-breadcrumb-user {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  &-link {
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;

    &-photo {
      width: 25px;
      height: 25px;
      border-radius: 100%;
    }
  }

  &-icon {
    padding: 0 10px;
    cursor: pointer;
    color: var(--next-bg-topBarColor);
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;

    &:hover {
      background: var(--next-color-user-hover);

      i {
        display: inline-block;
        animation: logoAnimation 0.3s ease-in-out;
      }
    }
  }

  :deep(.el-dropdown) {
    color: var(--next-bg-topBarColor);
  }

  :deep(.el-badge) {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
  }

  :deep(.el-badge__content.is-fixed) {
    top: 12px;
  }
}
</style>