mediaAll/src/view/allMedia/main.vue

<template>
  <div class="mainMaster">
    <div class="menu">
      <img
        src="../../assets/img/logo.png"
        style="width: 100%; margin-bottom: 2em"
        alt=""
      />
      <div
        @click="() => selectMenuFunc(item)"
        v-for="(item, index) in menu"
        :key="index"
        :class="{
          'menu-item': true,
          active: selectMenu == item.path
        }"
      >
        <span
          :class="{ menu_iconfont: true, [item.icon]: true }"
          style="margin-right: 5px; font-size: 20px"
        >
        </span>
        {{ item.title }}
      </div>
    </div>
    <router-view :isUp="isUp" class="rightMain" />
  </div>
</template>

<script setup>
// import header_local from './components/header.vue';
import { ref } from 'vue';
import { ElNotification } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import config from '../../config/index';

const Router = useRouter();
const Route = useRoute();
const selectMenu = ref(Route.fullPath);
const isUp = ref(0);
let eventSource = null;

const menu = JSON.parse(localStorage.getItem('menu') || '[]');

for (let i = 0; i < menu.length; i++) {
  const v = menu[i];
  if (v.path === Route.fullPath) {
    document.title = v.title;
    break;
  }
}

const selectMenuFunc = item => {
  if (!item.path || Route.fullPath == item.path) return;
  selectMenu.value = item.path;
  document.title = item.title;
  Router.push({
    path: item.path,
    query: {}
  });
};

/**
 * @description: 通知权限
 * 1 如果用户已经同意授权，返回值为granted；
 * 2 如果用户已经拒绝授权，返回值为denied；
 * 3 如果用户还没有作出选择，返回值为default；
 */
function notificationFunc() {
  return new Promise((resolve, reject) => {
    if (!Notification) return resolve(false);
    if (Notification.permission === 'granted') {
      resolve(true);
    } else {
      Notification.requestPermission().then(() => {
        resolve(true);
      });
    }
  });
}
function sse() {
  eventSource = new EventSource(
    config.base.videoProcessing +
      '/user/sse?token=' +
      localStorage.getItem('token')
  );
  eventSource.addEventListener('message', event => {
    // 处理来自服务器的消息
    const data = JSON.parse(event.data);
    isUp.value += 1;
    window.processing_getList && window.processing_getList();
    if (Notification) {
      new Notification('提示', {
        body: data.msg,
        icon: '' // 可选的图标路径
      });
      return;
    }

    ElNotification({
      title: '提示',
      message: data.msg,
      duration: 0
    });
  });

  eventSource.onerror = error => {
    // 处理错误
    console.error(error);
    eventSource && eventSource.close();
    sse();
  };
}

notificationFunc().then(isTrue => {
  sse();
});
</script>

<style scoped>
.mainMaster {
  width: 100vw;
  height: 100vh;
  min-width: 960px;
  overflow: auto;
  display: flex;
}

.mainMaster .menu {
  position: relative;
  display: inline-block;
  max-width: 230px;
  min-width: 200px;
  padding: 32px 15px 0;
  background-color: #393b48;
  height: 99.7%;
  flex: 1;
}

.mainMaster .icon {
  width: 1.8em;
  margin-right: 6px;
  margin-top: 0.6em;
  float: left;
}

.mainMaster .rightMain {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
}

.menu-item {
  padding: 0 16px;
  height: 3em;
  line-height: 3em;
  cursor: pointer;
  font-size: 15px;
  color: #f3f3f3;
}
.mainMaster .min-item {
  padding-left: 5px;
  text-align: center;
  padding-right: 5px;
  width: 60px;
  background-color: #ddd;
}

.min-item .menu-item {
  padding: 10px 0px;
}
.min-item .icon {
  margin: 0;
}
.menu-item:hover {
  color: rgb(64, 158, 255);
}
.active {
  font-weight: 600;
  border-radius: 8px;
  color: rgb(64, 158, 255);
  background-color: rgba(0, 0, 0, 0.1);
}
</style>