fe-manage/src/App.vue

<template>
  <div id="container" v-if="!isLogin">
    <nav-top/>
    <div style="display: flex">
      <nav-left/>
      <div style="flex: 1; display: flex; flex-direction: column; width: 0">
        <open-pages/>
        <bread-crumb/>
        <main>
          <a-config-provider :locale="zhCN">
            <router-view/>
          </a-config-provider>
        </main>
      </div>
    </div>
  </div>
  <div id="container" v-if="isLogin">
    <router-view/>
  </div>
</template>
<script setup>
import {ref, onMounted} from "vue";
import {useStore, createStore} from "vuex";
import NavLeft from "@/components/NavLeft";
import NavTop from "@/components/NavTop";
import OpenPages from "@/components/OpenPages";
import BreadCrumb from "@/components/BreadCrumb";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import * as api1 from "@/api/index1";
import * as api2 from "@/api/index";
import {boeRequest} from "@/api/request";
import {USER_PERMISSION} from "@/api/ThirdApi";

const store = useStore();
const isLogin = ref(false);
console.log("版本2.2.2------------");

// 监听关闭浏览器
let time1 = ref(0);
let time2 = ref(0);

onMounted(() => {
  init()
  window.addEventListener('beforeunload', e => beforeunloadHandler(e));
  window.addEventListener('unload', e => unloadHandler(e));
})

//添加监听事件
function beforeunloadHandler() {
  time1.value = new Date().getTime();
}

function init() {
  getUserInfo();
  getUserPermission();
  initDict("content_type"); //内容分类
  initDict("project_level"); //项目级别
  initDict("project_sys");  //培训分类
  initDict("project_pic"); //项目封面
  initDict("router_pic"); //路径图封面
  initDict("course_pic"); //课程封面
  initDict("job_type"); //岗位
  initDict("band"); //band
}

function unloadHandler() {
  time2.value = new Date().getTime() - time1.value;
  if (time2.value <= 5) {
    store.replaceState(createStore({state: {openpages: null}}).state);
    localStorage.removeItem("openpages");
  }
}

async function getUserInfo() {
  const userInfo = await api2.userInfo();
  store.commit("SET_USER", userInfo.data.data);
}

async function initDict(key) {
  const list = await getDictList(key);
  store.commit("SET_DICT", {key, data: list});
}

function getUserPermission(){
  boeRequest(USER_PERMISSION,{permissionType:'PAGE'}).then(res=>{
    store.commit("SET_PERMISSION", res.result.flatMap(t=>t?.permissionPageList.map(s=>s.url)));
  })
}

const getDictList = (param) => api1.getDictTree({code: param,}).then((res) => res.data.data);
</script>
<style lang="scss">
#app {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
  Microsoft YaHei, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}

.ant-table-wrapper {
  .ant-table-content {
    .ant-table-thead th {
      background-color: #eff4fc !important;
      text-align: center !important;
    }
  }
  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: #f6f9fd;
  }
}

.ant-btn-link {
  padding: 0 !important;
}

#container {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 1000px;
  min-height: 100%;
  background-color: rgba(245, 247, 250, 1);

  main {
    height: 0;
    flex: 1 1 auto;
    // flex-shrink: 0;
    display: flex;
    overflow-y: auto;
    // display: flex;
    // flex: 1 1 auto;
    width: calc(100% - 40px);
    // margin-bottom: 20px;
    margin: 0px 20px 20px 20px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
  }

  .cus-btn {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    border: 1px solid #4ea6ff;
    border-radius: 8px;
    background: #4ea6ff;
    cursor: pointer;
    color: #fff;
  }

  .white {
    // background: #fff;
    // color: #4ea6ff;
  }

  .cus-input {
    height: 40px;
    border-radius: 8px;
  }

  .cus-select {
    height: 40px;
    border-radius: 8px;
  }

  // @media screen and (max-width: 1366px) {
  //   .cmMain {
  //     width: 750px;
  //   }
  // }
  // @media screen and (min-width: 1367px) and (max-width: 1680px) {
  //   .cmMain {
  //     width: 1010px;
  //   }
  // }
  // @media screen and (min-width: 1681px) and (max-width: 1920px) {
  //   .cmMain {
  //     width: 1270px;
  //   }
  // }
  // @media screen and (min-width: 1921px) {
  //   .cmMain {
  //     width: 1270px;
  //   }
  // }
}
</style>