优化

src/App.vue

@@ -22,6 +22,7 @@
 </template>
 
 <script setup>
+import _ from 'lodash'
 import { ref, reactive, watch, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import leftMenu from "@/components/leftMenu.vue";
@@ -162,6 +163,20 @@ async function getBarCode(e) {
   }
 }
 
+// 获取网络状态
+const updateInfo = _.throttle(function (isOnLine) {
+  console.log(isOnLine);
+  if (store.userInfo && store.userInfo.shopId) {
+    if (isOnLine) {
+      console.log('有网了重新连接ws~');
+      socket.init();
+    } else {
+      socket.close();
+      console.log('网络连接失败~');
+    }
+  }
+}, 100, { leading: true, trailing: false })
+
 onMounted(() => {
   document.addEventListener("keydown", (e) => {
     getBarCode(e);
@@ -171,6 +186,11 @@ onMounted(() => {
   if (store.userInfo && store.userInfo.shopId) {
     socket.init();
   }
+
+  // 监听网络在线状态
+  window.addEventListener("onLine", updateInfo(true))
+  // 监听网络离线
+  window.addEventListener("offLine", updateInfo(false))
 });
 </script>
 
@@ -203,28 +223,20 @@ onMounted(() => {
   --b-darker: calc(var(--b) * 0.8);
 
   --primary-color: rgb(var(--r), var(--g), var(--b));
-  --primary-color-hover: rgb(
-    var(--r-lighter3),
-    var(--g-lighter3),
-    var(--b-lighter3)
-  );
+  --primary-color-hover: rgb(var(--r-lighter3),
+      var(--g-lighter3),
+      var(--b-lighter3));
   --el-color-primary: var(--primary-color) !important;
   --el-button-hover-bg-color: var(--primary-color) !important;
-  --el-color-primary-light-3: rgb(
-    var(--r-lighter),
-    var(--g-lighter),
-    var(--b-lighter)
-  ) !important;
-  --el-color-primary-dark-2: rgb(
-    var(--r-darker),
-    var(--g-darker),
-    var(--b-darker)
-  ) !important;
-  --el-color-primary-light-5: rgb(
-    var(--r-lighter2),
-    var(--g-lighter2),
-    var(--b-lighter2)
-  ) !important;
+  --el-color-primary-light-3: rgb(var(--r-lighter),
+      var(--g-lighter),
+      var(--b-lighter)) !important;
+  --el-color-primary-dark-2: rgb(var(--r-darker),
+      var(--g-darker),
+      var(--b-darker)) !important;
+  --el-color-primary-light-5: rgb(var(--r-lighter2),
+      var(--g-lighter2),
+      var(--b-lighter2)) !important;
 
   --el-font-size-base: 16px !important;
   --el-message-close-size: var(--el-font-size-base) !important;
@@ -279,8 +291,7 @@ html {
   background-color: #555;
   margin-right: 0 !important;
   padding-bottom: 20px !important;
-  border-radius: var(--el-dialog-border-radius) var(--el-dialog-border-radius) 0
-    0;
+  border-radius: var(--el-dialog-border-radius) var(--el-dialog-border-radius) 0 0;
 }
 
 .el-dialog__title {
@@ -301,8 +312,7 @@ html {
 }
 
 .el-dialog__body {
-  padding: calc(var(--el-dialog-padding-primary) + 10px)
-    var(--el-dialog-padding-primary);
+  padding: calc(var(--el-dialog-padding-primary) + 10px) var(--el-dialog-padding-primary);
 }
 
 .el-dialog__header {
@@ -390,7 +400,7 @@ html {
     display: flex;
     width: 200%;
 
-    & > div {
+    &>div {
       width: 50%;
     }