129 lines
4.1 KiB
Vue
129 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { ElMessageBox } from 'element-plus';
|
|
import { getToken } from '@/utils/auth';
|
|
|
|
import Screenfull from '@/components/Screenfull/index.vue';
|
|
import SizeSelect from '@/components/SizeSelect/index.vue';
|
|
import News from './news.vue';
|
|
// import LangSelect from '@/components/LangSelect/index.vue';
|
|
import MixNav from './Sidebar/MixNav.vue';
|
|
// import { CaretBottom } from '@element-plus/icons-vue';
|
|
import Logo from './Sidebar/Logo.vue';
|
|
|
|
import { useAppStore } from '@/store/modules/app';
|
|
import { useTagsViewStore } from '@/store/modules/tagsView';
|
|
import { useUserStore } from '@/store/modules/user';
|
|
import { useSettingsStore } from '@/store/modules/settings';
|
|
import Cookies from 'js-cookie';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
const url = import.meta.env.VITE_APP_BASE_API;
|
|
const username = Cookies.get('username');
|
|
const settingsStore = useSettingsStore();
|
|
const { sidebarLogo } = storeToRefs(settingsStore);
|
|
const isCollapse = computed(() => !appStore.sidebar.opened);
|
|
|
|
const appStore = useAppStore();
|
|
const tagsViewStore = useTagsViewStore();
|
|
const userStore = useUserStore();
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const querystr = ref('');
|
|
const dialogVisible = ref(false)
|
|
const device = computed(() => appStore.device);
|
|
const news = ref()
|
|
|
|
function logout() {
|
|
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
userStore
|
|
.logout()
|
|
.then(() => {
|
|
tagsViewStore.delAllViews();
|
|
})
|
|
.then(() => {
|
|
router.push(`/login?redirect=${route.fullPath}`);
|
|
});
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
|
|
})
|
|
onBeforeUnmount(()=>{
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="navbar">
|
|
<logo v-if="sidebarLogo" :collapse="isCollapse" />
|
|
<!-- <mix-nav v-if="device !== 'mobile' && settingsStore.layout === 'mix'" /> -->
|
|
<div v-if="settingsStore.layout === 'left'" class="flex justify-start">
|
|
<div class="flex justify-center items-center">
|
|
<!-- 全屏 -->
|
|
<el-tooltip content="全屏缩放" effect="dark" placement="bottom">
|
|
<screenfull id="screenfull" />
|
|
</el-tooltip>
|
|
<!--语言选择-->
|
|
<!-- <lang-select /> -->
|
|
</div>
|
|
<!-- 头像 -->
|
|
<div style="heigth:100%;display: flex;display: -webkit-flex;align-items: center; -webkit-align-items: center; ">
|
|
<div class="heighta"></div>
|
|
<img v-if="userStore.avatar!== ''" :src="url + '/avatar/' + userStore.avatar + '?imageView2/1/w/80/h/80'"
|
|
class="w-[30px] h-[30px] rounded-lg rounded-full" style="border-radius: 50%;" />
|
|
<img v-else src="@/assets/MenuIcon/top_tx.png" alt="" class="w-[30px] h-[30px] rounded-lg rounded-full" style="border-radius: 50%;">
|
|
</div>
|
|
|
|
<el-tooltip content="个人中心" effect="dark" placement="bottom">
|
|
<div class="cursor-pointer flex justify-center items-center pl-[10px]"
|
|
:style="{ fontSize: appStore.size === 'default' ? '14px' : '16px' }" @click="$router.push('/personalCenter')">{{
|
|
username }}</div>
|
|
</el-tooltip>
|
|
|
|
<div class="flex justify-center items-center cursor-pointer pr-[12px]"
|
|
:style="{ fontSize: appStore.size === 'default' ? '14px' : '16px' }" @click="logout"><el-divider
|
|
direction="vertical" style="padding-right:5px" />{{ $t('navbar.logout') }}</div>
|
|
<News ref="news" v-model:dialog-visible="dialogVisible" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.navbar {
|
|
width: 100%;
|
|
position: relative;
|
|
height: 60px;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
align-items: center;
|
|
-webkit-align-items: center;
|
|
justify-content: space-between;
|
|
-webkit-justify-content: space-between;
|
|
box-shadow: 0px 0px 10px rgb(219 225 236);
|
|
z-index: 98;
|
|
}
|
|
|
|
.keywords {
|
|
width: 240px;
|
|
height: 34px;
|
|
margin-right: 20px;
|
|
|
|
:deep(.el-input__wrapper) {
|
|
padding-left: 15px;
|
|
border-radius: 40px;
|
|
}
|
|
}
|
|
.heighta{
|
|
border-left:1px solid #dcdfe6 ;
|
|
height: 1em;
|
|
margin-right: 15px;
|
|
}
|
|
</style>
|