diff --git a/src/layout/RightButton/index.vue b/src/layout/RightButton/index.vue index f1f6f9b..c83edce 100644 --- a/src/layout/RightButton/index.vue +++ b/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(() => { -
+
diff --git a/src/store/serverConfig.ts b/src/store/serverConfig.ts index 89ad8c6..1c4303b 100644 --- a/src/store/serverConfig.ts +++ b/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, } }, }, diff --git a/src/views/Config/Server/useViewModel.ts b/src/views/Config/Server/useViewModel.ts index ce66994..b3ee5f0 100644 --- a/src/views/Config/Server/useViewModel.ts +++ b/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(cloneDeep(currentServer.value)) const wsUrl = ref('ws://localhost:8080/echo') const msgList = ref([]) @@ -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() })