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

fix(inbounds): wrap popover-table rows in <tbody>

Browse source 
Vue's template compiler warned that <tr> can't be a direct child of
<table> per the HTML spec; the browser silently inserts a <tbody>
wrapper but Vue's SSR/hydration path doesn't, which can cause
hydration mismatches. Add explicit <tbody> in both popover tables
(traffic + mobile-info).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MHSanaei 2026-05-08 13:36:24 +02:00
parent f205cce044
commit d2d69ecfa1
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
1 changed files with 41 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
frontend/src/pages/inbounds/InboundList.vue
View file

@ -397,14 +397,16 @@ function showQrCodeMenu(dbInbound) {
<a-popover>
<template #content>
<table cellpadding="2">
<tr>
<td>↑ {{ SizeFormatter.sizeFormat(record.up) }}</td>
<td>↓ {{ SizeFormatter.sizeFormat(record.down) }}</td>
</tr>
<tr v-if="record.total > 0 && record.up + record.down < record.total">
<td>Remaining</td>
<td>{{ SizeFormatter.sizeFormat(record.total - record.up - record.down) }}</td>
</tr>
<tbody>
<tr>
<td>↑ {{ SizeFormatter.sizeFormat(record.up) }}</td>
<td>↓ {{ SizeFormatter.sizeFormat(record.down) }}</td>
</tr>
<tr v-if="record.total > 0 && record.up + record.down < record.total">
<td>Remaining</td>
<td>{{ SizeFormatter.sizeFormat(record.total - record.up - record.down) }}</td>
</tr>
</tbody>
</table>
</template>
<a-tag :color="ColorUtils.usageColor(record.up + record.down, trafficDiff, record.total)">
@ -439,35 +441,37 @@ function showQrCodeMenu(dbInbound) {
<a-popover placement="bottomRight" trigger="click">
<template #content>
<table cellpadding="2">
<tr>
<td>Protocol</td>
<td><a-tag color="purple">{{ record.protocol }}</a-tag></td>
</tr>
<tr>
<td>Port</td>
<td><a-tag>{{ record.port }}</a-tag></td>
</tr>
<tr v-if="clientCount[record.id]">
<td>Clients</td>
<td><a-tag color="blue">{{ clientCount[record.id].clients }}</a-tag></td>
</tr>
<tr>
<td>Traffic</td>
<td>
<a-tag>
{{ SizeFormatter.sizeFormat(record.up + record.down) }} /
<template v-if="record.total > 0">{{ SizeFormatter.sizeFormat(record.total) }}</template>
<template v-else>∞</template>
</a-tag>
</td>
</tr>
<tr>
<td>Expiry</td>
<td>
<a-tag v-if="record.expiryTime > 0">{{ IntlUtil.formatRelativeTime(record.expiryTime) }}</a-tag>
<a-tag v-else color="purple">∞</a-tag>
</td>
</tr>
<tbody>
<tr>
<td>Protocol</td>
<td><a-tag color="purple">{{ record.protocol }}</a-tag></td>
</tr>
<tr>
<td>Port</td>
<td><a-tag>{{ record.port }}</a-tag></td>
</tr>
<tr v-if="clientCount[record.id]">
<td>Clients</td>
<td><a-tag color="blue">{{ clientCount[record.id].clients }}</a-tag></td>
</tr>
<tr>
<td>Traffic</td>
<td>
<a-tag>
{{ SizeFormatter.sizeFormat(record.up + record.down) }} /
<template v-if="record.total > 0">{{ SizeFormatter.sizeFormat(record.total) }}</template>
<template v-else>∞</template>
</a-tag>
</td>
</tr>
<tr>
<td>Expiry</td>
<td>
<a-tag v-if="record.expiryTime > 0">{{ IntlUtil.formatRelativeTime(record.expiryTime) }}</a-tag>
<a-tag v-else color="purple">∞</a-tag>
</td>
</tr>
</tbody>
</table>
</template>
<InfoCircleOutlined class="row-info-trigger" />