classroom-instruments/src/App.tsx

import { computed, defineComponent, onMounted, ref, onBeforeUnmount } from 'vue';
import { NConfigProvider, zhCN, dateZhCN, NModal } from 'naive-ui';
import { AppProvider } from './components/Application';
import { RouterView } from 'vue-router';
import setting from './settings/designSetting';
import { lighten } from './utils';
import RouterError from './components/RouterError';
import { tryOnUnmounted } from '@vueuse/core';
export default defineComponent({
  name: 'App',
  setup() {
    const isIOSChrome = ref();
    const getThemeOverrides = computed(() => {
      const appTheme = setting.appTheme;
      const lightenStr = lighten(setting.appTheme, 6);

      return {
        common: {
          primaryColor: appTheme,
          primaryColorHover: lightenStr,
          primaryColorPressed: lightenStr
        },
        LoadingBar: {
          colorLoading: appTheme
        }
      };
    });
    // const showModal = ref(false);
    const showModalMsg = ref('');
    // 判断浏览器
    const isChrome = () => {
      const isChromium = (window as any).chrome;
      const winNav = window.navigator;
      const vendorName = winNav.vendor;
      const isOpera = typeof (window as any).opr !== 'undefined';
      const isIEedge = winNav.userAgent.indexOf('Edge') > -1;
      isIOSChrome.value = winNav.userAgent.match('CriOS');
      return (
        isIOSChrome.value ||
        (isChromium !== null &&
          typeof isChromium !== 'undefined' &&
          vendorName === 'Google Inc.' &&
          isOpera === false &&
          isIEedge === false)
      );
    };

    // 获取谷歌版本
    const getChromeVersion = () => {
      const arr = navigator.userAgent.split(' ');
      let chromeVersion = '' as any;
      for (let i = 0; i < arr.length; i++) {
        if (/chrome/i.test(arr[i])) chromeVersion = arr[i];
      }
      if (chromeVersion) {
        return Number(chromeVersion.split('/')[1].split('.')[0]);
      } else {
        return false;
      }
    };

    const isChromeFlag = isChrome();
    if (isChromeFlag) {
      const chromeVersion = getChromeVersion();
      if (!chromeVersion || (chromeVersion && chromeVersion < 100)) {
        showModalMsg.value =
          '您当前的chrome版本过低,为了保证您的用户体验请升级后使用';
        // showModal.value = true;
      }
      // if (chromeVersion) {
      //   return Number(chromeVersion.split('/')[1].split('.')[0]);
      // } else {
      //   return false;
      // }
    } else {
      showModalMsg.value = '为了保证您的用户体验,请使用chrome打开,点击确定下载';
      // showModal.value = true;
      console.log('---');
    }

    const submitCallback = () => {
      window.open('https://www.google.cn/intl/zh-CN/chrome/');
    };

    return () => (
      <>
        <NConfigProvider
          locale={zhCN}
          themeOverrides={getThemeOverrides.value}
          // :theme="getDarkTheme"
          // :theme-overrides="getThemeOverrides"
          dateLocale={dateZhCN}>
          <AppProvider>
            <RouterView />
            <RouterError />
          </AppProvider>
        </NConfigProvider>
        {/* <NModal
          show={showModal.value}
          closeOnEsc={false}
          closable={false}
          maskClosable={false}
          preset="dialog"
          title="确认"
          content={showModalMsg.value}
          positive-text="确认"
          onPositiveClick={submitCallback}></NModal> */}
      </>
    );
  }
});