新增页面更新刷新检测

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-26 23:52:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-24 17:18:44
+ * @LastEditTime: 2024-06-24 17:43:51
  * @FilePath: /data-table/src/App.vue
  * @Description:
 -->
@@ -32,6 +32,7 @@ import { styleColor } from "@/constant.js";
 import { getFormSettingAPI } from "@/api/form.js";
 import { showDialog } from 'vant';
 import fp3 from '@/utils/fp3';
+import { Updater } from '@/utils/versionUpdater';
 
 // 使用 include + pinia 状态管理动态缓存页面
 const store = mainStore();
@@ -189,6 +190,25 @@ onMounted(async () => {
     //     console.log(visitorId)
     //   })
   }
+
+  // TAG：检查是否更新
+  if (import.meta.env.PROD) {
+    const upDater = new Updater({
+      time: 30000
+    })
+    upDater.on('no-update', () => {
+      // console.log('还没更新')
+    })
+    upDater.on('update', () => {
+      showDialog({
+        title: '温馨提示',
+        message: '检测到新版本，将会刷新页面!',
+      }).then(() => {
+        window.location.reload();
+      });
+    })
+  }
+
 });
 </script>
 

+/*
+ * @Date: 2024-02-06 11:38:13
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-02-06 13:04:25
+ * @FilePath: /xysBooking/src/utils/versionUpdater.js
+ * @Description:
+ */
+/* eslint-disable */
+/**
+ * @description: 版本更新检查
+ * @param {*} time 阈值
+ * @return {*}
+ */
+export class Updater {
+    constructor(options = {}) {
+        this.oldScript = [];
+        this.newScript = [];
+        this.dispatch = {};
+        this.init(); //初始化
+        this.timing(options.time); //轮询
+    }
+
+    async init() {
+        const html = await this.getHtml();
+        this.oldScript = this.parserScript(html);
+    }
+
+    async getHtml() {
+        // TAG: html的位置需要动态修改
+        const html = await fetch(import.meta.env.VITE_BASE).then((res) => res.text()); //读取index html
+        return html;
+    }
+
+    parserScript(html) {
+        const reg = new RegExp(/<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/gi); //script正则
+        return html.match(reg); //匹配script标签
+    }
+
+    //发布订阅通知
+    on(key, fn) {
+        (this.dispatch[key] || (this.dispatch[key] = [])).push(fn);
+        return this;
+    }
+
+    compare(oldArr, newArr) {
+        const base = oldArr.length;
+        // 去重
+        const arr = Array.from(new Set(oldArr.concat(newArr)));
+        //如果新旧length 一样无更新
+        if (arr.length === base) {
+            this.dispatch['no-update'].forEach((fn) => {
+                fn();
+            });
+        } else {
+            //否则通知更新
+            this.dispatch['update'].forEach((fn) => {
+                fn();
+            });
+        }
+    }
+
+    timing(time = 10000) {
+        //轮询
+        setInterval(async () => {
+            const newHtml = await this.getHtml();
+            this.newScript = this.parserScript(newHtml);
+            this.compare(this.oldScript, this.newScript);
+        }, time);
+    }
+}