xs-common-plugins 1.3.9 → 1.4.0

package/package.json

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

package/src/App.vue

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

package/src/components/UpdateChecker/index.vue

@@ -1,88 +1,145 @@
 <script>
+import trackerSend from '@/router/ca'
 import md5 from 'js-md5'
-import { defineComponent } from 'vue'
-import trackerSend from "@/router/ca";
+import Vue from 'vue'
 
-function trackerSendUpdateChecker({action} = {}) {
-  trackerSend({
-    title: "检测到新版本",
-    action
-  })
+function trackerSendUpdateChecker({ action } = {}) {
+	trackerSend({
+		title: '检测到新版本',
+		action
+	})
 }
 
-const DURATION = 1000 * 60 * 60 * 2
+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() {
-      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
-  }
+	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>
+</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/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>