fix: prompt that the browser version is too low #192

ui/public/index.html

@@ -16,6 +16,10 @@
             #spin-mask {
               display: none !important;
             }
+
+            #protect-brower {
+              display: none;
+            }
           </style>
         </noscript>
         <style>
@@ -49,11 +53,89 @@
             border-radius: 50%;
             animation: 0.75s linear infinite _doc-spin;
           }
+
+          #protect-brower {
+            padding: 20px;
+            text-align: center;
+          }
         </style>
         <div id="spin-container">
           <div class="spinner"></div>
         </div>
+        <div id="protect-brower"></div>
       </div>
     </div>
   </body>
+  <script>
+    /**
+     * @description: Prompt that the browser version is too low
+    */
+    const defaultList = [
+      {
+        name: 'Edge',
+        version: '100'
+      },
+      {
+        name: 'Firefox',
+        version: '100'
+      },
+      {
+        name: 'Chrome',
+        version: '90'
+      },
+      {
+        name: 'Safari',
+        version: '15'
+      }
+    ];
+    function getBrowerTypeAndVersion(){
+      var brower = {
+        name: '',
+        version: ''
+      };
+      var ua = navigator.userAgent.toLowerCase();
+      var s;
+      (s = ua.match(/edge\/([\d\.]+)/)) ? brower = { name: 'Edge', version: s[1] } :
+      (s = ua.match(/firefox\/([\d\.]+)/)) ? brower = { name: 'Firefox', version: s[1] } :
+      (s = ua.match(/chrome\/([\d\.]+)/)) ?  brower = { name: 'Chrome', version: s[1] } :
+      (s = ua.match(/version\/([\d\.]+).*safari/)) ?  brower = { name: 'Safari', version: s[1] } : brower = { name: 'unknown', version: '' };
+      // 根据关系进行判断
+      return brower;
+    }
+
+    function compareVersion(version1, version2) {
+      var v1 = version1.split('.');
+      var v2 = version2.split('.');
+      var len = Math.max(v1.length, v2.length);
+      while (v1.length < len) {
+        v1.push('0');
+      }
+      while (v2.length < len) {
+        v2.push('0');
+      }
+      for (var i = 0; i < len; i++) {
+        var num1 = parseInt(v1[i]);
+        var num2 = parseInt(v2[i]);
+        if (num1 >= num2) {
+          return 1;
+        } else if (num1 < num2) {
+          return -1;
+        }
+      }
+      return 0;
+    }
+
+    const browerInfo = getBrowerTypeAndVersion();
+    const notSupport = defaultList.some(item => {
+      if (item.name === browerInfo.name) {
+        return compareVersion(browerInfo.version, item.version) === -1;
+      }
+      return false;
+    });
+
+    if (notSupport) {
+      const div = document.getElementById('protect-brower');
+      div.innerText = 'The current browser version is too low, in order not to affect the normal use of the function, please upgrade the browser to the latest version'
+    }
+  </script>
 </html>