xs-common-plugins 1.3.8 → 1.3.9

package/README.md

@@ -327,4 +327,10 @@
 ```
    1.3.8
    1. Navbar 新增 ChangeLog 组件
-```
+```
+
+```
+   1.3.9
+   1. 新增UpdateChecker组件， 用于检测更新
+   2. 优化了买点发送函数
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xs-common-plugins",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "private": false,
   "description": "向上公共代码部分",
   "author": "祝玲云 <1902733517@qq.com>",

package/src/App.vue

@@ -2,10 +2,18 @@
     <div id="app">
         <router-view/>
         <router-view name="websocket"/>
+        <UpdateChecker />
     </div>
 </template>
 
 <script>
+import UpdateChecker from './components/UpdateChecker'
+export default {
+  name: 'App',
+  components: {
+    UpdateChecker
+  }
+}
 
 </script>
 

package/src/components/UpdateChecker/index.vue

@@ -0,0 +1,88 @@
+<script>
+import md5 from 'js-md5'
+import { defineComponent } from 'vue'
+import trackerSend from "@/router/ca";
+
+function trackerSendUpdateChecker({action} = {}) {
+  trackerSend({
+    title: "检测到新版本",
+    action
+  })
+}
+
+const DURATION = 1000 * 60 * 60 * 2
+export default {
+  name: 'UpdateChecker',
+  data () {
+    return {
+      md5: '',
+      interval: null
+    }
+  },
+  methods: {
+    check() {
+      return fetch(`${location.origin}${location.pathname}`, {
+        cache: 'no-cache',
+      }).then(async (res) => {
+        return res.text()
+      })
+    },
+    start() {
+      this.stop()
+      this.interval = setInterval(() => {
+        this.check().then(text => {
+          const newMd5 = md5(text)
+          if (newMd5 !== this.md5) {
+            this.stop()
+            this.notify()
+            trackerSendUpdateChecker({action: "检测到新版本通知用户"})
+          }
+        })
+      }, DURATION)
+    },
+    stop() {
+      if (!this.interval) return
+      clearInterval(this.interval)
+    },
+    refresh() {
+      trackerSendUpdateChecker({action: "检测到新版本刷新页面"})
+      window.location.reload()
+    },
+    onClose() {
+      this.start()
+      trackerSendUpdateChecker({action: "检测到新版本关闭提示"})
+    },
+    notify() {
+      this.$common.popup({
+        title: '检测到新版本',
+        component: defineComponent({
+          template: `<div>
+              <div style="font-size: 14px;color: #606266;line-height: 20px;padding: 10px 20px">
+                检测到有新版本已经发布，请刷新页面
+              </div>
+              <div style="text-align: center"><el-button type="primary" @click="refresh">刷新</el-button></div>
+            </div>`,
+          methods: {
+            refresh: () => this.refresh(),
+            beforeClose: (done) => {done(); this.onClose()}
+          },
+        }),
+        dialogCfg: {
+          closeOnClickModal: false,
+          closeOnPressEscape: false
+        }
+      })
+    }
+  },
+  mounted() {
+    this.check().then(text => {
+      this.md5 = md5(text)
+      this.start()
+    })
+  },
+  render() {
+    return null
+  }
+}
+  
+</script>

package/src/router/ca.js

@@ -1,21 +1,40 @@
 import tracker from "./tracker";
 import moment from "moment";
-export default function trackerSend({userName, router = {}, clientId}) {
-  tracker.send({
-    title: "页面访问",
-    action: "后台页面路由跳转",
-    url: location.href,
-    qt: {
-      clientId,
-      userName,
-      date: moment(Date.now()).format("YYYY-MM-DD HH:mm:ss"),
-      fullPath: router.fullPath,
-      title: getRouterBreadcrumbs(router)
-    }
-  });
+import { getToken } from "@/utils/auth"; // get token from cookie
+import { getConfig } from "@/utils/global-config";
+
+/**
+ * Sends tracking data to the tracker.
+ *
+ * @param {Object} options - The options for tracking.
+ * @param {string} options.title - The title of the tracking event.
+ * @param {string} options.action - The action being tracked.
+ * @param {Object} [options.qt] - Additional tracking data.
+ * @return {void}
+ */
+export default function trackerSend({title, action, qt}) {
+  try {
+    tracker.send({
+      title,
+      action,
+      url: location.href,
+      qt: {
+        clientId: getConfig("CLIENT_ID"),
+        userName: getToken("LoginUserName"),
+        date: moment(Date.now()).format("YYYY-MM-DD HH:mm:ss"),
+        ...qt
+      }
+    });
+  } catch (error) {}
 }
 
-function getRouterBreadcrumbs(router) {
+/**
+ * Returns a string representing the breadcrumbs of the current router.
+ *
+ * @param {Object} router - The router object.
+ * @return {string} The breadcrumbs string.
+ */
+export function getRouterBreadcrumbs(router) {
   return router.matched
     .map((item) => (item.meta && item.meta.title) || item.name)
     .filter((item) => item && item !== "首页")

package/src/router/permission.js

@@ -10,7 +10,7 @@ import "nprogress/nprogress.css"; // progress bar style
 import Oidc from "oidc-client";
 import { requestApi as HTTP } from "xs-request";
 import router from "./index";
-import trackerSend from "./ca";
+import trackerSend, {getRouterBreadcrumbs} from "./ca";
 
 NProgress.configure({
   showSpinner: false,
@@ -73,9 +73,12 @@ router.beforeEach((to, from, next) => {
   } // 没登录 & 没在登录页 => 跳转到登录页
 
   trackerSend({
-    clientId: id4config.client_id,
-    userName: getToken("LoginUserName"),
-    router: to
+    title: "页面访问",
+    action: "前台页面路由跳转",
+    qt: {  
+      fullPath: to.fullPath,
+      title: getRouterBreadcrumbs(to)
+    }
   })
 });