首次提交
This commit is contained in:
+104
-27
@@ -5,10 +5,18 @@
|
||||
<v-col cols="12">
|
||||
<v-card border>
|
||||
<v-card-title class="d-flex align-center">
|
||||
<v-icon class="mr-2" color="primary">mdi-network</v-icon>
|
||||
<v-icon
|
||||
class="mr-2"
|
||||
color="primary"
|
||||
>
|
||||
mdi-network
|
||||
</v-icon>
|
||||
Socket.IO 连接调试器
|
||||
<v-spacer />
|
||||
<v-chip :color="connectionStatus.color" size="small">
|
||||
<v-chip
|
||||
:color="connectionStatus.color"
|
||||
size="small"
|
||||
>
|
||||
{{ connectionStatus.text }}
|
||||
</v-chip>
|
||||
</v-card-title>
|
||||
@@ -16,7 +24,10 @@
|
||||
</v-col>
|
||||
|
||||
<!-- 连接信息卡片 -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<v-card border>
|
||||
<v-card-title>连接信息</v-card-title>
|
||||
<v-card-text>
|
||||
@@ -43,7 +54,10 @@
|
||||
</template>
|
||||
<v-list-item-title>传输方式</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<v-chip size="x-small" :color="transportColor">
|
||||
<v-chip
|
||||
size="x-small"
|
||||
:color="transportColor"
|
||||
>
|
||||
{{ transport || '未知' }}
|
||||
</v-chip>
|
||||
</v-list-item-subtitle>
|
||||
@@ -113,40 +127,71 @@
|
||||
</v-col>
|
||||
|
||||
<!-- 统计信息卡片 -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<v-card border>
|
||||
<v-card-title>统计信息</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<v-card variant="tonal" color="success">
|
||||
<v-card
|
||||
variant="tonal"
|
||||
color="success"
|
||||
>
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h4">{{ stats.eventsReceived }}</div>
|
||||
<div class="text-caption">接收事件</div>
|
||||
<div class="text-h4">
|
||||
{{ stats.eventsReceived }}
|
||||
</div>
|
||||
<div class="text-caption">
|
||||
接收事件
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-card variant="tonal" color="primary">
|
||||
<v-card
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
>
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h4">{{ stats.eventsSent }}</div>
|
||||
<div class="text-caption">发送事件</div>
|
||||
<div class="text-h4">
|
||||
{{ stats.eventsSent }}
|
||||
</div>
|
||||
<div class="text-caption">
|
||||
发送事件
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-card variant="tonal" color="warning">
|
||||
<v-card
|
||||
variant="tonal"
|
||||
color="warning"
|
||||
>
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h4">{{ stats.errors }}</div>
|
||||
<div class="text-caption">错误次数</div>
|
||||
<div class="text-h4">
|
||||
{{ stats.errors }}
|
||||
</div>
|
||||
<div class="text-caption">
|
||||
错误次数
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-card variant="tonal" color="info">
|
||||
<v-card
|
||||
variant="tonal"
|
||||
color="info"
|
||||
>
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h4">{{ stats.reconnects }}</div>
|
||||
<div class="text-caption">重连次数</div>
|
||||
<div class="text-h4">
|
||||
{{ stats.reconnects }}
|
||||
</div>
|
||||
<div class="text-caption">
|
||||
重连次数
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
@@ -175,14 +220,26 @@
|
||||
</v-col>
|
||||
|
||||
<!-- 事件监控 -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<v-card border>
|
||||
<v-card-title>
|
||||
事件监控
|
||||
<v-chip class="ml-2" size="small">{{ activeListeners.size }} 个监听器</v-chip>
|
||||
<v-chip
|
||||
class="ml-2"
|
||||
size="small"
|
||||
>
|
||||
{{ activeListeners.size }} 个监听器
|
||||
</v-chip>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-list density="compact" max-height="300" style="overflow-y: auto">
|
||||
<v-list
|
||||
density="compact"
|
||||
max-height="300"
|
||||
style="overflow-y: auto"
|
||||
>
|
||||
<v-list-item v-if="activeListeners.size === 0">
|
||||
<v-list-item-title class="text-center text-disabled">
|
||||
暂无活动监听器
|
||||
@@ -193,7 +250,9 @@
|
||||
:key="listener"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-icon size="small">mdi-eye</v-icon>
|
||||
<v-icon size="small">
|
||||
mdi-eye
|
||||
</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>{{ listener }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
@@ -203,7 +262,10 @@
|
||||
</v-col>
|
||||
|
||||
<!-- 自定义事件发送 -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<v-card border>
|
||||
<v-card-title>发送自定义事件</v-card-title>
|
||||
<v-card-text>
|
||||
@@ -272,9 +334,15 @@
|
||||
<span class="log-time">[{{ log.time }}]</span>
|
||||
<span class="log-type">[{{ log.type.toUpperCase() }}]</span>
|
||||
<span class="log-message">{{ log.message }}</span>
|
||||
<pre v-if="log.data" class="log-data">{{ log.data }}</pre>
|
||||
<pre
|
||||
v-if="log.data"
|
||||
class="log-data"
|
||||
>{{ log.data }}</pre>
|
||||
</div>
|
||||
<div v-if="logs.length === 0" class="text-center text-disabled pa-8">
|
||||
<div
|
||||
v-if="logs.length === 0"
|
||||
class="text-center text-disabled pa-8"
|
||||
>
|
||||
暂无日志
|
||||
</div>
|
||||
</div>
|
||||
@@ -288,7 +356,10 @@
|
||||
<v-card-title>连接诊断</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<v-btn
|
||||
block
|
||||
color="info"
|
||||
@@ -298,7 +369,10 @@
|
||||
测试连接
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@@ -309,7 +383,10 @@
|
||||
测量延迟
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<v-btn
|
||||
block
|
||||
color="warning"
|
||||
|
||||
Reference in New Issue
Block a user