GCLS_Page_Learn/src/App.vue

<template>
  <div id="app" :dir="dir">
    <router-view />
    <progress-bar />
    <div v-if="userAgentTipShow" class="userAgentTips">
      <img src="./assets/userAgentWarning.png" width="32px" />
      <span>当前浏览器可能与网站不兼容！建议使用 chrome 浏览器获得最佳使用体验。</span>
      <img src="./assets/userAgentClose.png" width="16px" @click="handleClickUserAgent" />
    </div>
  </div>
</template>

<script>
import { getConfig, getToken, removeToken } from '@/utils/auth';
import Cookies from 'js-cookie';

import ProgressBar from '@/common/progress_bar/index.vue';

export default {
  components: {
    ProgressBar
  },
  provide() {
    return {
      $t: (key) => {
        return this.$t(key);
      }
    };
  },
  data() {
    return {
      dir: 'ltr',
      userAgentTipShow: false,
      timeout: null
    };
  },
  created() {
    this.handleUserAgentRoot();
    // ['click', 'mousewheel', 'mousemove'].forEach((item) => {
    //   window.addEventListener(item, () => {
    //     sessionStorage.setItem('lastClickTime', new Date().getTime());
    //   });
    // });
  },
  mounted() {
    const { token: config, isHas: isConfigHas } = getConfig();
    // 有 config 信息时，设置 icon
    if (isConfigHas) {
      const link = document.querySelector("link[rel*='icon']") || document.createElement('link');
      link.type = 'image/x-icon';
      link.rel = 'shortcut icon';
      link.href = config.title_icon_url;
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  },
  // mounted() {
  //   sessionStorage.setItem('lastClickTime', new Date().getTime());
  //   this.isTimeout();
  // },
  // beforeDestroy() {
  //   clearInterval(this.timeout);
  // },
  methods: {
    handleUserAgentRoot() {
      if (!sessionStorage.getItem('useragent_root_close') && navigator.userAgent.indexOf('Chrome') === -1) {
        this.userAgentTipShow = true;
      }
    },
    handleClickUserAgent() {
      sessionStorage.setItem('useragent_root_close', true);
      this.userAgentTipShow = false;
    }
    // isTimeout() {
    //   clearInterval(this.timeout);
    //   this.timeout = setInterval(() => {
    //     let nowTime = new Date().getTime();
    //     let { token } = getConfig();
    //     let { user_connection_timeout_duration, sys_home_url } = token;
    //     if (nowTime - Number(sessionStorage.getItem('lastClickTime')) > 1000 * user_connection_timeout_duration) {
    //       clearInterval(this.timeout);
    //       sessionStorage.removeItem('SysList');
    //       removeToken();
    //       Cookies.remove('JSESSIONID');
    //       sessionStorage.removeItem('useragent_root_close');
    //       window.location.href = sys_home_url;
    //     }
    //   }, 1000);
    // }
  }
};
</script>

<style lang="scss" scoped>
.userAgentTips {
  position: fixed;
  top: 62px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 12px 8px;
  margin-left: -312px;
  font-size: 16px;
  line-height: 24px;
  background: #fff;
  border-radius: 8px;

  :nth-child(1) {
    margin-right: 8px;
  }

  :nth-child(3) {
    cursor: pointer;
  }
}
</style>