feat: ✨ 手机端访问二维码受websocket连接状态控制 (#189)

src/layout/RightButton/index.vue

@@ -2,13 +2,19 @@
 import { useFullscreen } from '@vueuse/core'
 import { useQRCode } from '@vueuse/integrations/useQRCode'
 import { Maximize, Minimize, TabletSmartphone } from 'lucide-vue-next'
+import { storeToRefs } from 'pinia'
 import { onMounted, ref, shallowRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import CustomDialog from '@/components/Dialog/index.vue'
+import useStore from '@/store'
 import { getOriginUrl, getUniqueSignature } from '@/utils/auth'
 import { usePlayMusic } from './usePlayMusic'
 
+const serverConfig = useStore().serverConfig
+const {
+    getServerStatus: serverStatus,
+} = storeToRefs(serverConfig)
 const { playMusic, currentMusic, nextPlay } = usePlayMusic()
 const { isFullscreen, toggle: toggleScreen } = useFullscreen()
 const { t } = useI18n()
@@ -110,7 +116,7 @@ onMounted(() => {
         <svg-icon :name="currentMusic.paused ? 'play' : 'pause'" />
       </div>
     </div>
-    <div class="tooltip tooltip-left" data-tip="访问手机端">
+    <div v-if="serverStatus" class="tooltip tooltip-left" data-tip="访问手机端">
       <div class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90" @click="openMobileQrCode">
         <TabletSmartphone />
       </div>

src/store/serverConfig.ts

@@ -8,6 +8,7 @@ export const useServerConfig = defineStore('server', {
             serverConfig: {
                 serverList: defaultServerHostList,
                 currentServer: defaultServerHostList[0],
+                serverStatus: false,
             },
         }
     },
@@ -20,6 +21,10 @@ export const useServerConfig = defineStore('server', {
         getCurrentServer(state) {
             return state.serverConfig.currentServer
         },
+        // 获取服务器状态
+        getServerStatus(state) {
+            return state.serverConfig.serverStatus
+        },
 
     },
     actions: {
@@ -36,11 +41,16 @@ export const useServerConfig = defineStore('server', {
         setCurrentServer(userServer: ServerType) {
             this.serverConfig.currentServer = userServer
         },
+        // 设置服务器状态
+        setServerStatus(status: boolean) {
+            this.serverConfig.serverStatus = status
+        },
         // 重置所有配置
         resetDefault() {
             this.serverConfig = {
                 serverList: defaultServerHostList,
                 currentServer: defaultServerHostList[0],
+                serverStatus: false,
             }
         },
     },

src/views/Config/Server/useViewModel.ts

@@ -9,7 +9,10 @@ import { IndexDb } from '@/utils/dexie'
 
 export function useViewModel() {
     const serverConfig = useStore().serverConfig
-    const { getServerList: serverList, getCurrentServer: currentServer } = storeToRefs(serverConfig)
+    const {
+        getServerList: serverList,
+        getCurrentServer: currentServer,
+    } = storeToRefs(serverConfig)
     const currentServerValue = ref<ServerType>(cloneDeep(currentServer.value))
     const wsUrl = ref<string>('ws://localhost:8080/echo')
     const msgList = ref<WsMsgData[]>([])
@@ -41,6 +44,16 @@ export function useViewModel() {
         currentServerValue.value.host = newValue
         serverConfig.updateServerList(currentServerValue.value)
     })
+
+    watch(
+        () => wsStatus.value,
+        (newValue) => {
+            if (newValue && (newValue.connected === true || newValue.connected === false)) {
+                serverConfig.setServerStatus(newValue.connected)
+            }
+        },
+    )
+
     onMounted(() => {
         getAllMsg()
     })