fix: preserve space between date and time in log modal

Vue 3's whitespace: condense strips bare whitespace text nodes and
trailing whitespace inside elements, causing the <template> trick
to fail. Use mustache interpolations (which compile to _createTextVNode)
for all spacing between fields so they survive compilation.
This commit is contained in:
abdulrahman 2026-05-12 23:04:52 +03:00
parent 07bc74a521
commit b0c5cc0c0d

View file

@ -53,7 +53,9 @@ function parseLogLine(line) {
service = 'X-UI:';
}
return { date, time, levelText, levelClass, service, body };
const stamp = [date, time].filter(Boolean).join(' ');
return { date, time, stamp, levelText, levelClass, service, body };
}
const parsedLogs = computed(() => logs.value.map(parseLogLine));
@ -133,33 +135,25 @@ const modalWidth = computed(() => (isMobile.value ? '100vw' : '800px'));
<template v-else-if="isMobile">
<div v-for="(log, idx) in parsedLogs" :key="idx" class="log-card">
<div class="log-card-head">
<span v-if="log.date || log.time" class="log-time">
<span v-if="log.time">{{ log.time }}</span>
<span v-if="log.date" class="log-date">{{ log.date }}</span>
<span v-if="log.stamp" class="log-time">
<span v-if="log.time">{{ log.time }}</span>{{ log.time && log.date ? ' ' : '' }}<span v-if="log.date" class="log-date">{{ log.date }}</span>
</span>
<span v-if="log.levelText" class="log-level-badge" :class="log.levelClass">
{{ log.levelText }}
</span>
</div>
<div v-if="log.body || log.service" class="log-body">
<b v-if="log.service">{{ log.service }}</b>
<span v-if="log.body" class="log-body-text">{{ log.body }}</span>
<b v-if="log.service">{{ log.service }}</b>{{ log.service && log.body ? ' ' : '' }}<span v-if="log.body" class="log-body-text">{{ log.body }}</span>
</div>
</div>
</template>
<template v-else>
<div v-for="(log, idx) in parsedLogs" :key="idx" class="log-line">
<span v-if="log.date || log.time" class="log-stamp">
{{ log.date }}<template v-if="log.date && log.time"> </template>{{ log.time }}
</span>
<span v-if="log.levelText" class="log-level" :class="log.levelClass">
{{ log.levelText }}
</span>
<span v-if="log.stamp" class="log-stamp">{{ log.stamp }}</span>{{ log.stamp && log.levelText ? ' ' : '' }}<span v-if="log.levelText" class="log-level" :class="log.levelClass">{{ log.levelText }}</span>
<template v-if="log.body || log.service">
<span> - </span>
<b v-if="log.service">{{ log.service }} </b>
<span>{{ log.body }}</span>
<b v-if="log.service">{{ log.service }}</b>{{ log.service && log.body ? ' ' : '' }}<span>{{ log.body }}</span>
</template>
</div>
</template>