From 88be3eea10196054596945af0eb9910e998dfd42 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Wed, 27 Sep 2023 10:59:19 +0800
Subject: [PATCH] perf: useNetwork

---
 mock/role/index.ts             |  9 +++++++++
 src/hooks/web/useNetwork.ts    | 21 +++++++++++++++++++++
 src/router/index.ts            |  8 ++++++++
 src/views/hooks/useNetwork.vue | 12 ++++++++++++
 4 files changed, 50 insertions(+)
 create mode 100644 src/hooks/web/useNetwork.ts
 create mode 100644 src/views/hooks/useNetwork.vue

diff --git a/mock/role/index.ts b/mock/role/index.ts
index 9cd0271..5ecd679 100644
--- a/mock/role/index.ts
+++ b/mock/role/index.ts
@@ -369,6 +369,14 @@ const adminList = [
         meta: {
           title: 'useClipboard'
         }
+      },
+      {
+        path: 'useNetwork',
+        component: 'views/hooks/useNetwork',
+        name: 'UseNetwork',
+        meta: {
+          title: 'useNetwork'
+        }
       }
     ]
   },
@@ -635,6 +643,7 @@ const testList: string[] = [
   '/hooks/useValidator',
   '/hooks/useCrudSchemas',
   '/hooks/useClipboard',
+  '/hooks/useNetwork',
   '/level',
   '/level/menu1',
   '/level/menu1/menu1-1',
diff --git a/src/hooks/web/useNetwork.ts b/src/hooks/web/useNetwork.ts
new file mode 100644
index 0000000..66fa446
--- /dev/null
+++ b/src/hooks/web/useNetwork.ts
@@ -0,0 +1,21 @@
+import { ref, onBeforeUnmount } from 'vue'
+
+const useNetwork = () => {
+  const online = ref(true)
+
+  const updateNetwork = () => {
+    online.value = navigator.onLine
+  }
+
+  window.addEventListener('online', updateNetwork)
+  window.addEventListener('offline', updateNetwork)
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('online', updateNetwork)
+    window.removeEventListener('offline', updateNetwork)
+  })
+
+  return { online }
+}
+
+export { useNetwork }
diff --git a/src/router/index.ts b/src/router/index.ts
index 27dec3b..15798ef 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -411,6 +411,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: 'useClipboard'
         }
+      },
+      {
+        path: 'useNetwork',
+        component: () => import('@/views/hooks/useNetwork.vue'),
+        name: 'UseNetwork',
+        meta: {
+          title: 'useNetwork'
+        }
       }
     ]
   },
diff --git a/src/views/hooks/useNetwork.vue b/src/views/hooks/useNetwork.vue
new file mode 100644
index 0000000..dd6ed93
--- /dev/null
+++ b/src/views/hooks/useNetwork.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useNetwork } from '@/hooks/web/useNetwork'
+
+const { online } = useNetwork()
+</script>
+
+<template>
+  <ContentWrap title="useNetwork">
+    当前网络状态: <code>{{ online ? '已连接' : '已断开' }}</code>
+  </ContentWrap>
+</template>