mirror of
https://gitee.com/dromara/mayfly-go
synced 2025-11-03 07:50:25 +08:00
278 lines
9.1 KiB
Vue
278 lines
9.1 KiB
Vue
<template>
|
|
<div class="layout-navbars-breadcrumb-user" :style="{ flex: layoutUserFlexNum }">
|
|
<div class="layout-navbars-breadcrumb-user-icon">
|
|
<el-switch
|
|
@change="switchDark()"
|
|
v-model="isDark"
|
|
active-action-icon="Moon"
|
|
inactive-action-icon="Sunny"
|
|
style="--el-switch-off-color: #c4c9c4; --el-switch-on-color: #2c2c2c"
|
|
class="dark-icon"
|
|
/>
|
|
</div>
|
|
<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
|
|
<div class="layout-navbars-breadcrumb-user-icon">
|
|
<el-icon title="组件大小">
|
|
<plus />
|
|
</el-icon>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="" :disabled="state.disabledSize === ''">默认</el-dropdown-item>
|
|
<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">大型</el-dropdown-item>
|
|
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown> -->
|
|
<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
|
|
<el-icon title="菜单搜索">
|
|
<search />
|
|
</el-icon>
|
|
</div>
|
|
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
|
|
<el-icon title="布局设置">
|
|
<setting />
|
|
</el-icon>
|
|
</div>
|
|
<div class="layout-navbars-breadcrumb-user-icon">
|
|
<el-popover placement="bottom" trigger="click" :visible="state.isShowUserNewsPopover" :width="300" popper-class="el-popover-pupop-user-news">
|
|
<template #reference>
|
|
<el-badge :is-dot="false" @click="state.isShowUserNewsPopover = !state.isShowUserNewsPopover">
|
|
<el-icon title="消息">
|
|
<bell />
|
|
</el-icon>
|
|
</el-badge>
|
|
</template>
|
|
<transition name="el-zoom-in-top">
|
|
<UserNews v-show="state.isShowUserNewsPopover" />
|
|
</transition>
|
|
</el-popover>
|
|
</div>
|
|
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
|
|
<el-icon v-if="!state.isScreenfull" title="关全屏">
|
|
<full-screen />
|
|
</el-icon>
|
|
<el-icon v-else title="开全屏">
|
|
<crop />
|
|
</el-icon>
|
|
</div>
|
|
<el-dropdown trigger="click" :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
|
|
<span class="layout-navbars-breadcrumb-user-link" style="cursor: pointer">
|
|
<img :src="userInfo.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
|
|
{{ userInfo.name || userInfo.username }}
|
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="/home">首页</el-dropdown-item>
|
|
<el-dropdown-item command="/personal">个人中心</el-dropdown-item>
|
|
<el-dropdown-item divided command="logOut">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<SearchMenu ref="searchRef" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="layoutBreadcrumbUser">
|
|
import { ref, computed, reactive, onMounted, watch } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
|
import screenfull from 'screenfull';
|
|
import { resetRoute } from '@/router/index';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useUserInfo } from '@/store/userInfo';
|
|
import { useThemeConfig } from '@/store/themeConfig';
|
|
import { clearSession } from '@/common/utils/storage';
|
|
import UserNews from '@/layout/navBars/breadcrumb/userNews.vue';
|
|
import SearchMenu from '@/layout/navBars/breadcrumb/search.vue';
|
|
import mittBus from '@/common/utils/mitt';
|
|
import openApi from '@/common/openApi';
|
|
import { saveThemeConfig, getThemeConfig } from '@/common/utils/storage';
|
|
import { useDark, usePreferredDark } from '@vueuse/core';
|
|
|
|
const router = useRouter();
|
|
const searchRef = ref();
|
|
const state = reactive({
|
|
isScreenfull: false,
|
|
isShowUserNewsPopover: false,
|
|
disabledI18n: 'zh-cn',
|
|
disabledSize: '',
|
|
});
|
|
const { userInfo } = storeToRefs(useUserInfo());
|
|
const themeConfigStore = useThemeConfig();
|
|
const { themeConfig } = storeToRefs(themeConfigStore);
|
|
|
|
// 设置分割样式
|
|
const layoutUserFlexNum = computed(() => {
|
|
let { layout, isClassicSplitMenu } = themeConfig.value;
|
|
let num = '';
|
|
if (layout === 'defaults' || (layout === 'classic' && !isClassicSplitMenu) || layout === 'columns') num = '1';
|
|
else num = '';
|
|
return num;
|
|
});
|
|
// 全屏点击时
|
|
const onScreenfullClick = () => {
|
|
if (!screenfull.isEnabled) {
|
|
ElMessage.warning('暂不不支持全屏');
|
|
return false;
|
|
}
|
|
screenfull.toggle();
|
|
state.isScreenfull = !state.isScreenfull;
|
|
};
|
|
// 布局配置 icon 点击时
|
|
const onLayoutSetingClick = () => {
|
|
mittBus.emit('openSetingsDrawer');
|
|
};
|
|
// 下拉菜单点击时
|
|
const onHandleCommandClick = (path: string) => {
|
|
if (path === 'logOut') {
|
|
ElMessageBox({
|
|
closeOnClickModal: false,
|
|
closeOnPressEscape: false,
|
|
title: '提示',
|
|
message: '此操作将退出登录, 是否继续?',
|
|
showCancelButton: true,
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
beforeClose: async (action, instance, done) => {
|
|
if (action === 'confirm') {
|
|
await openApi.logout();
|
|
instance.confirmButtonLoading = true;
|
|
instance.confirmButtonText = '退出中';
|
|
setTimeout(() => {
|
|
done();
|
|
setTimeout(() => {
|
|
instance.confirmButtonLoading = false;
|
|
}, 300);
|
|
}, 700);
|
|
} else {
|
|
done();
|
|
}
|
|
},
|
|
})
|
|
.then(() => {
|
|
clearSession(); // 清除缓存/token等
|
|
resetRoute(); // 删除/重置路由
|
|
router.push('/login');
|
|
setTimeout(() => {
|
|
ElMessage.success('安全退出成功！');
|
|
}, 300);
|
|
})
|
|
.catch(() => {});
|
|
} else {
|
|
router.push(path);
|
|
}
|
|
};
|
|
|
|
const isDark = useDark();
|
|
const preDark = usePreferredDark();
|
|
|
|
watch(preDark, (newValue) => {
|
|
isDark.value = newValue;
|
|
switchDark();
|
|
});
|
|
|
|
const switchDark = () => {
|
|
themeConfigStore.switchDark(isDark.value);
|
|
saveThemeConfig(themeConfig.value);
|
|
};
|
|
|
|
// // 菜单搜索点击
|
|
const onSearchClick = () => {
|
|
searchRef.value.openSearch();
|
|
};
|
|
|
|
// 组件大小改变
|
|
// const onComponentSizeChange = (size: string) => {
|
|
// removeLocal('themeConfig');
|
|
// themeConfig.value.globalComponentSize = size;
|
|
// saveThemeConfig(themeConfig.value);
|
|
// // proxy.$ELEMENT.size = size;
|
|
// initComponentSize();
|
|
// window.location.reload();
|
|
// };
|
|
|
|
// 初始化全局组件大小
|
|
const initComponentSize = () => {
|
|
switch (getThemeConfig().globalComponentSize) {
|
|
case '':
|
|
state.disabledSize = '';
|
|
break;
|
|
case 'default':
|
|
state.disabledSize = 'default';
|
|
break;
|
|
case 'small':
|
|
state.disabledSize = 'small';
|
|
break;
|
|
case 'large':
|
|
state.disabledSize = 'large';
|
|
break;
|
|
}
|
|
};
|
|
|
|
// 页面加载时
|
|
onMounted(() => {
|
|
const themeConfig = getThemeConfig();
|
|
if (themeConfig) {
|
|
initComponentSize();
|
|
isDark.value = themeConfig.isDark;
|
|
}
|
|
});
|
|
</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(--bg-topBarColor);
|
|
height: 50px;
|
|
line-height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
|
|
i {
|
|
display: inline-block;
|
|
animation: logoAnimation 0.3s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep(.el-dropdown) {
|
|
color: var(--bg-topBarColor);
|
|
}
|
|
|
|
::v-deep(.el-badge) {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
::v-deep(.el-badge__content.is-fixed) {
|
|
top: 12px;
|
|
}
|
|
}
|
|
</style>
|