Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-05-18 12:05:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: preserve space between date and time in log modal (#4326)

Browse source 
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:
Abdalrahman 2026-05-13 02:02:48 +03:00 committed by GitHub
parent 07bc74a521
commit 6de9b24229
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 8 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/pages/index/LogModal.vue
View file

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