FileManage/web/src/layout/components/Navbar.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 { useDark, useToggle } from '@vueuse/core'
import News from './news.vue';
// import LangSelect from '@/components/LangSelect/index.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 userStore = useUserStore();

const url = userStore.webApiBaseUrl;
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 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}`);
      });
  });
}
function querystrChange() {
}
const isDark = useDark()
const toggleDark = () => useToggle(isDark)

const badgeval = ref(0)
const isbadge = ref(true)
// var source = new EventSource(url+ `/sse/connect/` + getToken(),);
onMounted(() => {
  // if ("EventSource" in window) {
  //   source.onmessage = function(e) {
  //     if(e.data>0) {
  //       badgeval.value = e.data
  //       isbadge.value = false
  //       news.value.init()
  //     } else {
  //       isbadge.value = true
  //     }
  //   };
  //   source.onopen = function(e) {
  //   };
  //   source.onerror = function(e:any) {
     
  //   };
  // }
})
onBeforeUnmount(()=>{
  // source.close();
})
</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">
        <!--全屏 -->
        <div class="flex justify-center items-center" :class="[isDark?'peelingone':'peelingtwo']">
          <el-switch v-model="isDark" inline-prompt  size="large"
          active-color="var(--el-fill-color-dark)" 
          inactive-color="var(--el-color-primary)" 
          @change="toggleDark" />
          <!-- 全屏 -->
          <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
          <screenfull id="screenfull" />
          </el-tooltip>
        </div>
        <!--语言选择-->
        <!-- <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;
}
:deep() {
  .peelingone .el-switch__core .el-switch__action{
  background-image: url(@/assets/dashboard/peeling2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-color: #000;
  }
  .peelingone .el-switch__inner{
    background-image: url('@/assets/dashboard/peeling1.png');
    background-repeat: no-repeat;
    background-position: left 6px top 4px;
  }
  .peelingone .el-switch.is-checked .el-switch__core{
    border:1px solid rgba(255,255,255,0.2)
  }

  .peelingtwo .el-switch__core .el-switch__action{
  background-image: url(@/assets/dashboard/peeling1.png);
  background-repeat: no-repeat;
  background-position: center;
  left:3px;
  }
  .peelingtwo .el-switch--large .el-switch__core .el-switch__action{
    width:18px;
    height:18px;
  }
  .peelingtwo .el-switch__inner{
    background-image: url(@/assets/dashboard/peeling2.png);
    background-repeat: no-repeat;
    background-position: right 6px top 4px;
  }
  .peelingtwo .el-switch__core{
    border:1px solid rgba(64,158,255,0.3);
    background-color: rgba(64,158,255,0.1);
  }
}
</style>