xs-common-plugins 1.3.8 → 1.4.0

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.4.0",
   "private": false,
   "description": "向上公共代码部分",
   "author": "祝玲云 <1902733517@qq.com>",

package/src/App.vue

@@ -6,6 +6,10 @@
 </template>
 
 <script>
+export default {
+  name: 'App',
+  components: {}
+}
 
 </script>
 

package/src/components/UpdateChecker/index.vue

@@ -0,0 +1,145 @@
+<script>
+import trackerSend from '@/router/ca'
+import md5 from 'js-md5'
+import Vue from 'vue'
+
+function trackerSendUpdateChecker({ action } = {}) {
+	trackerSend({
+		title: '检测到新版本',
+		action
+	})
+}
+
+const DURATION = 1000 * 60 * 30
+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() {
+			let vm = new Vue({
+				template: `
+					<div class='update-box'>
+						<div class='update-box-content'>
+							<p class='title'>版本更新</p>
+							<p class='message'>检测到有新版本已经发布，请刷新页面</p>
+							<div class='update-box-btn'>
+								<button class='button-close' @click='close'>关闭</button>
+								<button @click='refresh'>刷新</button>
+							</div>
+						</div>
+					</div>`,
+				methods: {
+					refresh: () => this.refresh(),
+					close: () => {
+						vm.$el.remove()
+						this.onClose()
+					}
+				}
+			})
+			vm.$mount()
+			document.body.appendChild(vm.$el)
+		}
+	},
+	mounted() {
+		this.check().then(text => {
+			this.md5 = md5(text)
+			this.start()
+		})
+	},
+	render() {
+		return null
+	}
+}
+</script>
+
+<style lang="scss">
+.update-box {
+	position: fixed;
+	width: 300px;
+	right: 0;
+	bottom: 0;
+	background-color: #fff;
+	border-radius: 5px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+	z-index: 100;
+	transform: translateY(0);
+	transition: transform 0.3s;
+
+	.update-box-content {
+		padding: 20px;
+
+		.title {
+			font-size: 16px;
+			color: #333;
+			text-align: left;
+			margin-bottom: 20px;
+			margin-top: 0px;
+		}
+
+		.message {
+			font-size: 14px;
+			color: #606266;
+			text-align: center;
+			margin-bottom: 20px;
+		}
+
+		.update-box-btn {
+			text-align: center;
+
+			.button-close {
+				padding: 5px 10px;
+				background-color: #f56c6c;
+				color: #fff;
+				cursor: pointer;
+				margin-right: 20px;
+			}
+
+			button {
+				padding: 5px 10px;
+				border: none;
+				background-color: #409eff;
+				color: #fff;
+				border-radius: 4px;
+				cursor: pointer;
+			}
+		}
+	}
+}
+</style>

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)
+    }
   })
 });
 

package/src/views/layout/components/Navbar.vue

@@ -45,9 +45,6 @@
           />
         </el-badge>
       </div>
-      <div class="changelog">
-        <ChangeLog />
-      </div>
       <div>
         <el-tag style="margin: 0 3px;">{{
           userProfile &&
@@ -119,7 +116,6 @@ import { mapGetters } from "vuex";
 import Breadcrumb from "@/components/Breadcrumb";
 import Hamburger from "@/components/Hamburger";
 import AllSearch from "./AllSearch";
-import ChangeLog from "./ChangeLog";
 import { getConfig } from "@/utils/global-config";
 import { getToken, removeToken, removeLocalToken } from "@/utils/auth"; // get token from cookie
 import ImCom from "@/components/im";
@@ -133,7 +129,6 @@ export default {
     Hamburger,
     AllSearch,
     ImCom,
-    ChangeLog,
   },
   data() {
     return {

package/src/views/layout/components/ChangeLog/index.vue

@@ -1,59 +0,0 @@
-<template>
-  <div v-if="list.length > 0">
-    <el-dropdown :hide-on-click="false" @command="handleCommand">
-      <el-badge is-dot class="item">
-        <i class="el-icon-bell"></i>
-      </el-badge>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="(item, index) in list" :key="index" :command="index">{{ item.title }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-  </div>
-</template>
-
-<script>
-import {defineComponent, h} from "vue";
-import { getConfig } from "@/utils/global-config";
-export default {
-  name: 'changeLog',
-  data () {
-    return {
-      list: []
-    }
-  },
-  methods: {
-    handleCommand (command) {
-      this.$common.popup({
-        title: this.list[command].remark,
-        component: defineComponent({
-          template: `<div>
-              <div style="font-size: 14px;color: #606266;line-height: 20px;padding: 10px 20px">${this.list[command].remark}</div>
-              <div style="text-align: center"><el-button type="primary" @click="$emit('close')">关闭</el-button></div>
-            </div>`
-        })
-      });
-    },
-    getChangeLog () {
-      this.$ask.commng.api.commmng.Banner.Query.post({pageInfo: {
-          page: 1,
-          pageSize: 3
-        },
-        codeLike: `changelog#${getConfig('CLIENT_ID')}`
-      }).then((result) => {
-        if (result.code === 0 && result.data.data.length > 0) {
-          this.list = result.data.data;
-        }
-      }).catch((err) => {
-        
-      }).finally(() => {
-        setTimeout(() => {
-          this.getChangeLog();
-        }, 1000 * 60 * 60 * 12);
-      })
-    }
-  },
-  mounted () {
-    this.getChangeLog();
-  }
-}
-</script>