JoeAllen/mqttx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: message cards expanded by default

Browse Source 
Change toggle logic from 'expanded set' (collapsed by default)
to 'collapsed set' (expanded by default). Users can collapse
individual messages with the toggle button.
This commit is contained in:
Joe Allen
2026-08-18 14:59:22 +08:00
parent 6ced5c8444
commit 85b7c6b31b
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dashboard/MessageStream.vue
+7 -7
View File
@@ -14,7 +14,7 @@ const emit = defineEmits<{
const scrollRef = ref<HTMLDivElement | null>(null) const scrollRef = ref<HTMLDivElement | null>(null)
const autoScroll = ref(true) const autoScroll = ref(true)
const expandedPayloads = ref(new Set<string>()) const collapsedPayloads = ref(new Set<string>())
const messageFormats = ref<Record<string, 'auto' | 'json' | 'hex' | 'base64' | 'plain'>>({}) const messageFormats = ref<Record<string, 'auto' | 'json' | 'hex' | 'base64' | 'plain'>>({})
const formatOptions: { value: string; label: string }[] = [ const formatOptions: { value: string; label: string }[] = [
@@ -83,10 +83,10 @@ function setFormat(msgId: string, fmt: 'auto' | 'json' | 'hex' | 'base64' | 'pla
} }
function togglePayload(msgId: string) { function togglePayload(msgId: string) {
const s = new Set(expandedPayloads.value) const s = new Set(collapsedPayloads.value)
if (s.has(msgId)) s.delete(msgId) if (s.has(msgId)) s.delete(msgId)
else s.add(msgId) else s.add(msgId)
expandedPayloads.value = s collapsedPayloads.value = s
} }
// ─── Display helpers ─────────────────────────────────────────── // ─── Display helpers ───────────────────────────────────────────
@@ -156,17 +156,17 @@ function formatTime(ts: number): string {
@click="togglePayload(msg.id)" @click="togglePayload(msg.id)"
> >
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline v-if="expandedPayloads.has(msg.id)" points="18 15 12 9 6 15"/> <polyline v-if="!collapsedPayloads.has(msg.id)" points="18 15 12 9 6 15"/>
<polyline v-else points="6 9 12 15 18 9"/> <polyline v-else points="6 9 12 15 18 9"/>
</svg> </svg>
{{ expandedPayloads.has(msg.id) ? '收起' : '展开' }} {{ !collapsedPayloads.has(msg.id) ? '收起' : '展开' }}
</span> </span>
</div> </div>
<!-- Payload Content --> <!-- Payload Content -->
<div class="msg-payload" :class="{ expanded: expandedPayloads.has(msg.id) }"> <div class="msg-payload" :class="{ expanded: !collapsedPayloads.has(msg.id) }">
<pre <pre
v-if="expandedPayloads.has(msg.id)" v-if="!collapsedPayloads.has(msg.id)"
:class="['payload-full', { 'is-json': getEffectiveFormat(msg) === 'json' }]" :class="['payload-full', { 'is-json': getEffectiveFormat(msg) === 'json' }]"
>{{ formatPayload(msg) }}</pre> >{{ formatPayload(msg) }}</pre>
<pre v-else class="payload-truncated">{{ truncate(prettyJson(msg.payload), 200) }}</pre> <pre v-else class="payload-truncated">{{ truncate(prettyJson(msg.payload), 200) }}</pre>