hesoyam/trihuy-russian
1
0
Fork 0
Code Issues Pull Requests Actions 7 Packages Projects Releases 1 Wiki Activity

fix: show UDP tag for Hysteria and fix client count spacing (#4318)

Browse Source
This commit is contained in:
Abdalrahman
2026-05-13 02:12:25 +03:00
committed by GitHub
parent 6de9b24229
commit 48e90bba51
2 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/models/dbinbound.js
+4
View File
@@ -70,6 +70,10 @@ export class DBInbound {
return this.protocol === Protocols.WIREGUARD; return this.protocol === Protocols.WIREGUARD;
} }
get isHysteria() {
return this.protocol === Protocols.HYSTERIA;
}
get address() { get address() {
let address = location.hostname; let address = location.hostname;
if (!ObjectUtil.isEmpty(this.listen) && this.listen !== "0.0.0.0") { if (!ObjectUtil.isEmpty(this.listen) && this.listen !== "0.0.0.0") {
frontend/src/pages/inbounds/InboundList.vue
+15 -11
View File
@@ -395,8 +395,8 @@ function showQrCodeMenu(dbInbound) {
<div class="stat-row"> <div class="stat-row">
<span class="stat-label">{{ t('pages.inbounds.protocol') }}</span> <span class="stat-label">{{ t('pages.inbounds.protocol') }}</span>
<a-tag color="purple">{{ record.protocol }}</a-tag> <a-tag color="purple">{{ record.protocol }}</a-tag>
<template v-if="record.isVMess || record.isVLess || record.isTrojan || record.isSS"> <template v-if="record.isVMess || record.isVLess || record.isTrojan || record.isSS || record.isHysteria">
<a-tag color="green">{{ record.toInbound().stream.network }}</a-tag> <a-tag color="green">{{ record.isHysteria ? 'UDP' : record.toInbound().stream.network }}</a-tag>
<a-tag v-if="record.toInbound().stream.isTls" color="blue">TLS</a-tag> <a-tag v-if="record.toInbound().stream.isTls" color="blue">TLS</a-tag>
<a-tag v-if="record.toInbound().stream.isReality" color="blue">Reality</a-tag> <a-tag v-if="record.toInbound().stream.isReality" color="blue">Reality</a-tag>
</template> </template>
@@ -430,7 +430,7 @@ function showQrCodeMenu(dbInbound) {
</div> </div>
<div v-if="clientCount[record.id]" class="stat-row"> <div v-if="clientCount[record.id]" class="stat-row">
<span class="stat-label">{{ t('clients') }}</span> <span class="stat-label">{{ t('clients') }}</span>
<a-tag color="green">{{ clientCount[record.id].clients }}</a-tag> <a-tag color="green" class="client-count-tag">{{ clientCount[record.id].clients }}</a-tag>
<a-tag v-if="clientCount[record.id].online.length" color="blue"> <a-tag v-if="clientCount[record.id].online.length" color="blue">
{{ clientCount[record.id].online.length }} {{ t('online') }} {{ clientCount[record.id].online.length }} {{ t('online') }}
</a-tag> </a-tag>
@@ -570,8 +570,8 @@ function showQrCodeMenu(dbInbound) {
<template v-else-if="column.key === 'protocol'"> <template v-else-if="column.key === 'protocol'">
<div class="protocol-tags"> <div class="protocol-tags">
<a-tag color="purple">{{ record.protocol }}</a-tag> <a-tag color="purple">{{ record.protocol }}</a-tag>
<template v-if="record.isVMess || record.isVLess || record.isTrojan || record.isSS"> <template v-if="record.isVMess || record.isVLess || record.isTrojan || record.isSS || record.isHysteria">
<a-tag color="green">{{ record.toInbound().stream.network }}</a-tag> <a-tag color="green">{{ record.isHysteria ? 'UDP' : record.toInbound().stream.network }}</a-tag>
<a-tag v-if="record.toInbound().stream.isTls" color="blue">TLS</a-tag> <a-tag v-if="record.toInbound().stream.isTls" color="blue">TLS</a-tag>
<a-tag v-if="record.toInbound().stream.isReality" color="blue">Reality</a-tag> <a-tag v-if="record.toInbound().stream.isReality" color="blue">Reality</a-tag>
</template> </template>
@@ -581,14 +581,14 @@ function showQrCodeMenu(dbInbound) {
<!-- ============== Clients tag + popovers ============== --> <!-- ============== Clients tag + popovers ============== -->
<template v-else-if="column.key === 'clients'"> <template v-else-if="column.key === 'clients'">
<template v-if="clientCount[record.id]"> <template v-if="clientCount[record.id]">
<a-tag color="green" style="margin: 0">{{ clientCount[record.id].clients }}</a-tag> <a-tag color="green" class="client-count-tag" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].clients }}</a-tag>
<a-popover v-if="clientCount[record.id].deactive.length" :title="t('disabled')"> <a-popover v-if="clientCount[record.id].deactive.length" :title="t('disabled')">
<template #content> <template #content>
<div class="client-email-list"> <div class="client-email-list">
<div v-for="email in clientCount[record.id].deactive" :key="email">{{ email }}</div> <div v-for="email in clientCount[record.id].deactive" :key="email">{{ email }}</div>
</div> </div>
</template> </template>
<a-tag style="margin: 0; padding: 0 2px">{{ clientCount[record.id].deactive.length }}</a-tag> <a-tag class="client-count-tag" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].deactive.length }}</a-tag>
</a-popover> </a-popover>
<a-popover v-if="clientCount[record.id].depleted.length" :title="t('depleted')"> <a-popover v-if="clientCount[record.id].depleted.length" :title="t('depleted')">
<template #content> <template #content>
@@ -596,7 +596,7 @@ function showQrCodeMenu(dbInbound) {
<div v-for="email in clientCount[record.id].depleted" :key="email">{{ email }}</div> <div v-for="email in clientCount[record.id].depleted" :key="email">{{ email }}</div>
</div> </div>
</template> </template>
<a-tag color="red" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].depleted.length <a-tag color="red" class="client-count-tag" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].depleted.length
}}</a-tag> }}</a-tag>
</a-popover> </a-popover>
<a-popover v-if="clientCount[record.id].expiring.length" :title="t('depletingSoon')"> <a-popover v-if="clientCount[record.id].expiring.length" :title="t('depletingSoon')">
@@ -605,7 +605,7 @@ function showQrCodeMenu(dbInbound) {
<div v-for="email in clientCount[record.id].expiring" :key="email">{{ email }}</div> <div v-for="email in clientCount[record.id].expiring" :key="email">{{ email }}</div>
</div> </div>
</template> </template>
<a-tag color="orange" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].expiring.length <a-tag color="orange" class="client-count-tag" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].expiring.length
}}</a-tag> }}</a-tag>
</a-popover> </a-popover>
<a-popover v-if="clientCount[record.id].online.length" :title="t('online')"> <a-popover v-if="clientCount[record.id].online.length" :title="t('online')">
@@ -614,7 +614,7 @@ function showQrCodeMenu(dbInbound) {
<div v-for="email in clientCount[record.id].online" :key="email">{{ email }}</div> <div v-for="email in clientCount[record.id].online" :key="email">{{ email }}</div>
</div> </div>
</template> </template>
<a-tag color="blue" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].online.length }}</a-tag> <a-tag color="blue" class="client-count-tag" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].online.length }}</a-tag>
</a-popover> </a-popover>
</template> </template>
</template> </template>
@@ -680,7 +680,7 @@ function showQrCodeMenu(dbInbound) {
} }
.filter-bar.mobile>* { .filter-bar.mobile>* {
margin-bottom: 4px; margin-bottom: 4px;
} }
.protocol-tags { .protocol-tags {
@@ -689,6 +689,10 @@ function showQrCodeMenu(dbInbound) {
gap: 4px; gap: 4px;
} }
.client-count-tag {
font-variant-numeric: tabular-nums;
}
.row-action-trigger { .row-action-trigger {
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;