fix: ws重连机制

.env.dev

@@ -3,5 +3,5 @@
 FT_NODE_ENV=dev
 
 FT_WS_URL=ws://192.168.1.199:8080/ws
-FT_PROXY=http://192.168.100.168:8080
+FT_PROXY=http://localhost:8080
 FT_API_BASE=/api

src/assets/styles/element.scss

@@ -314,3 +314,17 @@
     height: 5px;
   }
 }
+.el-badge {
+  display: flex;
+}
+.el-badge__content{
+  font-size: 20px;
+  height: 30px;
+  border: none;
+  padding: 10px;
+}
+
+.el-popper {
+  font-size: 30px;
+  padding: 20px;
+}

src/libs/socket.ts

@@ -7,6 +7,7 @@ import { ElMessage } from 'element-plus'
 import { ref } from 'vue'
 
 export const isClose = ref(true)
+export const reconnectCurrentCount = ref(0)
 
 interface socket {
   appKey: any
@@ -152,6 +153,7 @@ export const socket: socket = {
             // }
             // 记录重连次数
             socket.reconnect_current++
+            reconnectCurrentCount.value = socket.reconnect_current
             socket.reconnect()
           }, socket.reconnect_interval)
         }

src/views/main/index.vue

@@ -5,7 +5,7 @@ import Check from 'components/home/Check/index.vue'
 import Environment from 'components/home/Environment/index.vue'
 import Stop from 'components/home/Stop/index.vue'
 import { ElMessageBox } from 'element-plus'
-import { isClose, socket } from 'libs/socket'
+import { isClose, reconnectCurrentCount, socket } from 'libs/socket'
 import { useSystemStore } from 'stores/useSystemStore' // 引入 systemStore
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -174,8 +174,18 @@ const backHandle = () => {
         </div>
       </div>
       <div style="display: flex">
-        <img v-show="!isClose" class="wifi-icon" src="../../assets/images/icon_wifi.svg" alt="">
-        <img v-show="isClose" class="wifi-icon" src="../../assets/images/icon_wifi_red.svg" alt="">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="isClose ? `尝试重连: ${reconnectCurrentCount}次` : '已连接'"
+          placement="top-start"
+        >
+          <img v-if="!isClose" class="wifi-icon" src="../../assets/images/icon_wifi.svg" alt="">
+          <el-badge v-else :value="reconnectCurrentCount" :offset="[-20, 0]">
+            <img class="wifi-icon" src="../../assets/images/icon_wifi_red.svg" alt="">
+          </el-badge>
+        </el-tooltip>
+
         <ft-button v-if="systemStore.isDebug" @click="router.push('/debug')">
           调试
         </ft-button>
@@ -278,6 +288,6 @@ const backHandle = () => {
 }
 .wifi-icon {
   width: 50px;
-  margin: 0 30px;
+  margin: 0 50px;
 }
 </style>