提交版本验证

1

src/App.tsx

@@ -1,5 +1,5 @@
-import { computed, defineComponent } from 'vue';
-import { NConfigProvider, zhCN, dateZhCN } from 'naive-ui';
+import { computed, defineComponent, onMounted, ref } 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';
@@ -8,9 +8,11 @@ import RouterError from './components/RouterError';
 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,
@@ -22,6 +24,63 @@ export default defineComponent({
         }
       };
     });
+    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();
+    console.log(isChromeFlag, 'isChromeFlag', isIOSChrome.value);
+    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
@@ -35,6 +94,16 @@ export default defineComponent({
             <RouterError />
           </AppProvider>
         </NConfigProvider>
+        <NModal
+          show={showModal.value}
+          closeOnEsc={false}
+          closable={false}
+          maskClosable={false}
+          preset="dialog"
+          title="确认"
+          content={showModalMsg.value}
+          positive-text="确认"
+          onPositiveClick={submitCallback}></NModal>
       </>
     );
   }