Bilibili-Evolved/registry/lib/components/utils/dev-client/Widget.vue
2022-05-21 16:24:08 +08:00

121 lines
3.1 KiB
Vue

<template>
<div class="be-dev-client">
<div class="title">DevClient</div>
<div class="connection-status">
<template v-if="isConnected">
<div class="status-dot connected" />
<div class="status-text">已连接</div>
<AsyncButton
title="断开连接"
@click="disconnect"
>
<VIcon icon="mdi-stop" :size="14" />
断开连接
</AsyncButton>
</template>
<template v-else class="status">
<div class="status-dot disconnected" />
<div class="status-text">未连接</div>
<AsyncButton
title="重新连接"
@click="connect"
>
<VIcon icon="mdi-play" :size="14" />
重新连接
</AsyncButton>
</template>
</div>
</div>
</template>
<script lang="ts">
import { Toast } from '@/core/toast'
import { AsyncButton, VIcon } from '@/ui'
import type { DevClient } from './client'
import { DevClientEvents } from './client'
export default Vue.extend({
components: {
AsyncButton,
VIcon,
},
data() {
return {
client: null,
// sessions: [],
// devRecords: options.devRecords,
isConnected: false,
}
},
async created() {
const { devClient } = await import('./client')
this.client = devClient
this.updateConnectionStatus()
devClient.addEventListener(DevClientEvents.ServerConnected, this.updateConnectionStatus)
devClient.addEventListener(DevClientEvents.ServerDisconnected, this.updateConnectionStatus)
// devClient.addEventListener(DevClientEvents.SessionsUpdate, this.updateSessionsStatus)
},
beforeDestroy() {
const devClient = this.client as DevClient
devClient.removeEventListener(DevClientEvents.ServerConnected, this.updateConnectionStatus)
devClient.removeEventListener(DevClientEvents.ServerDisconnected, this.updateConnectionStatus)
// devClient.removeEventListener(DevClientEvents.SessionsUpdate, this.updateSessionsStatus)
},
methods: {
async connect() {
const result = await this.client.createSocket()
if (!result) {
Toast.error('连接失败, 请确保 DevServer 已启动, 并检查连接配置.', 'DevClient', 2000)
}
},
disconnect() {
this.client.closeSocket()
},
updateConnectionStatus() {
this.isConnected = this.client.isConnected
},
updateSessionsStatus() {
this.sessions = [...this.client.sessions]
},
},
})
</script>
<style lang="scss" scoped>
@import "common";
.be-dev-client {
box-shadow: 0 0 0 1px #8884;
order: -2;
border-radius: 4px;
padding: 6px 6px 6px 10px;
@include v-stretch(6px);
body.dark & {
background-color: #333;
}
.title {
@include semi-bold();
}
.connection-status {
@include h-center(6px);
font-size: 12px;
.status-dot {
height: 8px;
width: 8px;
border-radius: 50%;
&.connected {
background-color: #81C785;
}
&.disconnected {
background-color: #78909C;
}
}
.be-button {
margin-left: 4px;
padding-left: 4px;
.be-icon {
margin-right: 4px;
}
}
}
}
</style>