xinyin025/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-07-24 13:36:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(inbounds): paginate expanded client list, restore ID column, hide empty Remark

Browse Source 
- ClientRowTable now applies the General-Settings pageSize to its
  expanded client list. The 3.0 rewrite dropped pagination, so users
  with thousands of clients per inbound hit a 30-60s browser hang on
  expand (#4233).
- ID column was marked responsive: ['xs'] so it was hidden on desktop;
  removed the restriction so it shows as the first column everywhere.
- Remark column is now omitted entirely when no inbound has a non-empty
  remark, matching the existing Node-column pattern.
This commit is contained in:
MHSanaei
2026-05-11 09:05:47 +02:00
parent 4c2915586c
commit 3e8a0eb93e
2 changed files with 38 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/inbounds/ClientRowTable.vue
+27 -2
View File
@@ -31,6 +31,7 @@ const props = defineProps({
onlineClients: { type: Array, default: () => [] },
lastOnlineMap: { type: Object, default: () => ({}) },
isDarkTheme: { type: Boolean, default: false },
pageSize: { type: Number, default: 0 },
});
const emit = defineEmits([
@@ -46,6 +47,20 @@ const emit = defineEmits([
const inbound = computed(() => props.dbInbound.toInbound());
const clients = computed(() => inbound.value?.clients || []);
const currentPage = ref(1);
const paginatedClients = computed(() => {
if (!props.pageSize || props.pageSize <= 0) return clients.value;
const start = (currentPage.value - 1) * props.pageSize;
return clients.value.slice(start, start + props.pageSize);
});
watch([clients, () => props.pageSize], () => {
const total = clients.value.length;
const size = props.pageSize > 0 ? props.pageSize : (total || 1);
const maxPage = Math.max(1, Math.ceil(total / size));
if (currentPage.value > maxPage) currentPage.value = maxPage;
});
// === Per-client stats lookup =======================================
const statsMap = computed(() => {
const m = new Map();
@@ -246,7 +261,7 @@ function confirmBulkDelete() {
<div class="cell cell-expiry">{{ t('pages.inbounds.expireDate') }}</div>
</div>
<div v-for="client in clients" :key="rowKey(client)" class="client-row"
<div v-for="client in paginatedClients" :key="rowKey(client)" class="client-row"
:class="{ 'is-selected': isSelected(rowKey(client)) }">
<div v-if="isRemovable" class="cell cell-select">
<a-checkbox :checked="isSelected(rowKey(client))"
@@ -383,7 +398,7 @@ function confirmBulkDelete() {
<!-- ====================== Mobile: card list ======================= -->
<template v-else>
<div v-for="client in clients" :key="rowKey(client)" class="client-card"
<div v-for="client in paginatedClients" :key="rowKey(client)" class="client-card"
:class="{ 'is-selected': isSelected(rowKey(client)) }">
<div class="client-card-head">
<a-checkbox v-if="isRemovable" :checked="isSelected(rowKey(client))"
@@ -474,6 +489,10 @@ function confirmBulkDelete() {
</div>
</div>
</template>
<a-pagination v-if="pageSize > 0 && clients.length > pageSize" v-model:current="currentPage"
:page-size="pageSize" :total="clients.length" :show-size-changer="false" size="small"
class="client-list-pagination" />
</div>
</template>
@@ -687,6 +706,12 @@ function confirmBulkDelete() {
padding: 0 !important;
}
.client-list-pagination {
display: flex;
justify-content: center;
padding: 10px 16px 4px;
}
/* ===== Mobile card list =========================================== */
.client-list.is-mobile {
display: flex;