123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271 |
- <template>
- <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
- <DynamicTime></DynamicTime>
- <ShopSelector class="layout-navbars-breadcrumb-user-icon"></ShopSelector>
- <!-- 字体切换移除 -->
- <!-- <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>
- </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> -->
- <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
- <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
- </div>
- <div class="layout-navbars-breadcrumb-user-icon">
- <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
- <template #reference>
- <el-badge :value="messageCenter.unread" :hidden="messageCenter.unread === 0">
- <el-icon :title="$t('message.user.title4')">
- <ele-Bell />
- </el-icon>
- </el-badge>
- </template>
- <template #default>
- <UserNews />
- </template>
- </el-popover>
- </div>
- <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
- <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">
- <img :src="userInfos.avatar" class="layout-navbars-breadcrumb-user-link-photo mr5" />
- {{ userInfos.username === '' ? 'common' : userInfos.username }}
- <el-icon class="el-icon--right">
- <ele-ArrowDown />
- </el-icon>
- </span>
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
- <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
- <!-- <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item> -->
- <el-dropdown-item divided command="logOut">{{ $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 } 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 ShopSelector from '/@/components/shopSelector/index.vue'
- import DynamicTime from '/@/components/DynamicTime/index.vue'
- // 引入组件
- const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue'));
- const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/search.vue'));
- // 定义变量内容
- const { locale, t } = useI18n();
- const router = useRouter();
- const stores = useUserInfo();
- const storesThemeConfig = useThemeConfig();
- const { userInfos } = storeToRefs(stores);
- const { themeConfig } = storeToRefs(storesThemeConfig);
- const searchRef = ref();
- const state = reactive({
- isScreenfull: false,
- disabledI18n: 'zh-cn',
- disabledSize: 'large',
- });
- // 设置分割样式
- 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 === '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/huge-dream/django-vue3-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');
- }
- });
- //消息中心的未读数量
- import { messageCenterStore } from '/@/stores/messageCenter';
- const messageCenter = messageCenterStore();
- </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;
- }
- // .profile-select {
- // background-color: #f4f7fe;
- // border-radius: 16px
- // }
- }
- </style>
|