From 5fdfada11d6813ae2728797e0c5ef81387c39c6d Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Sun, 4 Aug 2024 23:25:28 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E8=B7=AF=E7=94=B1=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E6=97=B6=E6=A3=80=E6=B5=8B=E5=89=8D=E7=AB=AF=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=EF=BC=88=E5=8E=9F=E4=B8=BA=E5=AE=9A=E6=97=B6?=
 =?UTF-8?q?=E5=99=A8=E6=A3=80=E6=B5=8B=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/index.vue     | 68 ----------------------------------------
 src/router/permission.ts | 60 ++++++++++++++++++++++++++++++++++-
 2 files changed, 59 insertions(+), 69 deletions(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index 8c20113..fd42af8 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -4,80 +4,12 @@
 </template>
 
 <script setup lang="ts">
-import { Button, Notification, Space } from '@arco-design/web-vue'
 import LayoutDefault from './LayoutDefault.vue'
 import LayoutMix from './LayoutMix.vue'
 import { useAppStore } from '@/stores'
 
 defineOptions({ name: 'Layout' })
 const appStore = useAppStore()
-let versionTag: string | null = null // 版本标识
-let timer: NodeJS.Timeout | undefined // 定时器
-// 更新
-const onUpdateSystem = (id: string) => {
-  Notification.remove(id)
-  window.location.reload()
-}
-// 关闭更新弹窗
-const onCloseUpdateSystem = (id: string) => {
-  Notification.remove(id)
-}
-// 提示用户更新弹窗
-const handleNotification = () => {
-  const id = `updateModel`
-  Notification.info({
-    id,
-    title: '新版本更新',
-    content: '当前系统检测到有新的版本，请及时更新',
-    duration: 0,
-    closable: true,
-    position: 'bottomRight',
-    footer: () => {
-      return h(Space, {}, () => [h(Button, { type: 'primary', onClick: () => onUpdateSystem(id) }, '更新'), h(Button, { type: 'secondary', onClick: () => onCloseUpdateSystem(id) }, '关闭')])
-    }
-  })
-}
-
-/**
- * 获取首页的 ETag 或 Last-Modified 值，作为当前版本标识
- * @returns {Promise<string|null>} 返回 ETag 或 Last-Modified 值
- */
-const getVersionTag = async () => {
-  const response = await fetch('/', {
-    cache: 'no-cache'
-  })
-  return response.headers.get('etag') || response.headers.get('last-modified')
-}
-
-/**
- * 比较当前的 ETag 或 Last-Modified 值与最新获取的值
- */
-const compareTag = async () => {
-  const newVersionTag = await getVersionTag()
-  if (versionTag === null) {
-    versionTag = newVersionTag
-  } else if (versionTag !== newVersionTag) {
-    // 如果 ETag 或 Last-Modified 发生变化，则认为有更新
-    // 清除定时器
-    clearInterval(timer)
-    // 提示用户更新
-    handleNotification()
-  }
-}
-
-const isProd = import.meta.env.PROD
-onMounted(() => {
-  if (isProd) {
-    // 每60秒检查一次是否有新的 ETag 或 Last-Modified 值
-    timer = setInterval(compareTag, 6000)
-  }
-})
-onUnmounted(() => {
-  if (isProd) {
-    // 清除定时器
-    clearInterval(timer)
-  }
-})
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/router/permission.ts b/src/router/permission.ts
index f7470c6..d040f0e 100644
--- a/src/router/permission.ts
+++ b/src/router/permission.ts
@@ -1,9 +1,61 @@
-import { Message } from '@arco-design/web-vue'
+import { Button, Message, Notification, Space } from '@arco-design/web-vue'
 import router from '@/router'
 import { useRouteStore, useUserStore } from '@/stores'
 import { getToken } from '@/utils/auth'
 import { isHttp } from '@/utils/validate'
 
+// 版本更新
+let versionTag: string | null = null // 版本标识
+// 更新
+const onUpdateSystem = (id: string) => {
+  Notification.remove(id)
+  window.location.reload()
+}
+// 关闭更新弹窗
+const onCloseUpdateSystem = (id: string) => {
+  Notification.remove(id)
+}
+// 提示用户更新弹窗
+const handleNotification = () => {
+  const id = `updateModel`
+  Notification.info({
+    id,
+    title: '新版本更新',
+    content: '当前系统检测到有新的版本，请及时更新',
+    duration: 0,
+    closable: true,
+    position: 'bottomRight',
+    footer: () => {
+      return h(Space, {}, () => [h(Button, { type: 'primary', onClick: () => onUpdateSystem(id) }, '更新'), h(Button, { type: 'secondary', onClick: () => onCloseUpdateSystem(id) }, '关闭')])
+    }
+  })
+}
+
+/**
+ * 获取首页的 ETag 或 Last-Modified 值，作为当前版本标识
+ * @returns {Promise<string|null>} 返回 ETag 或 Last-Modified 值
+ */
+const getVersionTag = async () => {
+  const response = await fetch('/', {
+    cache: 'no-cache'
+  })
+  return response.headers.get('etag') || response.headers.get('last-modified')
+}
+
+/**
+ * 比较当前的 ETag 或 Last-Modified 值与最新获取的值
+ */
+const compareTag = async () => {
+  const newVersionTag = await getVersionTag()
+  if (versionTag === null) {
+    versionTag = newVersionTag
+  } else if (versionTag !== newVersionTag) {
+    // 如果 ETag 或 Last-Modified 发生变化，则认为有更新
+    // 提示用户更新
+    handleNotification()
+  }
+}
+
 /** 免登录白名单 */
 const whiteList = ['/login', '/social/callback', '/pwdExpired']
 
@@ -59,4 +111,10 @@ router.beforeEach(async (to, from, next) => {
       next('/login')
     }
   }
+
+  // 生产环境开启检测版本更新
+  const isProd = import.meta.env.PROD
+  if (isProd) {
+    await compareTag()
+  }
 })