GitHub/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-05-26 07:08:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(clients): honor global pageSize and widen size-changer dropdown

Browse Source 
Read pageSize from defaultSettings and apply it to the clients table so
the panel-wide pagination preference is respected. Widen the AntD
size-changer trigger and its teleported popup so '100 / page' no longer
truncates.
This commit is contained in:
MHSanaei
2026-05-19 17:02:34 +02:00
parent 5b5ac3f04b
commit 1b436bb3e0
2 changed files with 45 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/pages/clients/ClientsPage.vue
View File

@@ -43,6 +43,7 @@ const {
tgBotEnable, tgBotEnable,
expireDiff, expireDiff,
trafficDiff, trafficDiff,
pageSize,
create, create,
update, update,
remove, remove,
@@ -442,6 +443,10 @@ function expiryColor(row) {
const sortState = ref({ column: null, order: null }); const sortState = ref({ column: null, order: null });
const paginationState = ref({ current: 1, pageSize: 20 }); const paginationState = ref({ current: 1, pageSize: 20 });
watch(pageSize, (next) => {
if (next > 0) paginationState.value.pageSize = next;
}, { immediate: true });
function sortableCol(col, key) { function sortableCol(col, key) {
return { return {
...col, ...col,
@@ -670,8 +675,9 @@ const columns = computed(() => [
</a-select> </a-select>
</div> </div>
<a-table v-if="!isMobile" :columns="columns" :data-source="sortedClients" :loading="loading" row-key="email" <a-table v-if="!isMobile" :columns="columns" :data-source="sortedClients" :loading="loading"
:row-selection="rowSelection" :pagination="tablePagination" size="small" @change="onTableChange"> row-key="email" :row-selection="rowSelection" :pagination="tablePagination" size="small"
@change="onTableChange">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'email'"> <template v-if="column.key === 'email'">
<div class="email-cell"> <div class="email-cell">
@@ -842,6 +848,11 @@ const columns = computed(() => [
background: var(--bg-page); background: var(--bg-page);
} }
.clients-page :deep(.ant-pagination-options-size-changer),
.clients-page :deep(.ant-pagination-options-size-changer .ant-select-selector) {
min-width: 100px !important;
}
.clients-page.is-dark { .clients-page.is-dark {
--bg-page: #1e1e1e; --bg-page: #1e1e1e;
--bg-card: #252526; --bg-card: #252526;
@@ -874,7 +885,7 @@ const columns = computed(() => [
margin-bottom: 8px; margin-bottom: 8px;
} }
.filter-bar.mobile > * { .filter-bar.mobile>* {
flex: 0 0 auto; flex: 0 0 auto;
} }
@@ -911,11 +922,25 @@ const columns = computed(() => [
vertical-align: middle; vertical-align: middle;
} }
.dot-green { background: #52c41a; } .dot-green {
.dot-blue { background: #1677ff; } background: #52c41a;
.dot-red { background: #ff4d4f; } }
.dot-orange { background: #fa8c16; }
.dot-gray { background: rgba(128, 128, 128, 0.6); } .dot-blue {
background: #1677ff;
}
.dot-red {
background: #ff4d4f;
}
.dot-orange {
background: #fa8c16;
}
.dot-gray {
background: rgba(128, 128, 128, 0.6);
}
.status-tag { .status-tag {
margin: 0 0 0 4px; margin: 0 0 0 4px;
@@ -1050,8 +1075,6 @@ const columns = computed(() => [
</style> </style>
<style> <style>
/* AD-Vue popovers teleport their content to <body>, so scoped styles
don't reach them — this block has to be unscoped. */
.client-email-list { .client-email-list {
max-height: 280px; max-height: 280px;
min-width: 160px; min-width: 160px;
@@ -1059,9 +1082,17 @@ const columns = computed(() => [
padding-right: 4px; padding-right: 4px;
} }
.client-email-list > div { .client-email-list>div {
padding: 2px 0; padding: 2px 0;
font-size: 12px; font-size: 12px;
white-space: nowrap; white-space: nowrap;
} }
.ant-select-dropdown:has(.ant-select-item-option[title$="/ page"]) {
min-width: 110px !important;
}
.ant-select-dropdown:has(.ant-select-item-option[title$="/ page"]) .ant-select-item-option-content {
white-space: nowrap;
}
</style> </style>

3
frontend/src/pages/clients/useClients.js
View File

@@ -14,6 +14,7 @@ export function useClients() {
const tgBotEnable = ref(false); const tgBotEnable = ref(false);
const expireDiff = ref(0); const expireDiff = ref(0);
const trafficDiff = ref(0); const trafficDiff = ref(0);
const pageSize = ref(0);
async function refresh() { async function refresh() {
loading.value = true; loading.value = true;
@@ -48,6 +49,7 @@ export function useClients() {
tgBotEnable.value = !!s.tgBotEnable; tgBotEnable.value = !!s.tgBotEnable;
expireDiff.value = (s.expireDiff ?? 0) * 86400000; expireDiff.value = (s.expireDiff ?? 0) * 86400000;
trafficDiff.value = (s.trafficDiff ?? 0) * 1073741824; trafficDiff.value = (s.trafficDiff ?? 0) * 1073741824;
pageSize.value = s.pageSize ?? 0;
} }
async function create(payload) { async function create(payload) {
@@ -199,6 +201,7 @@ export function useClients() {
tgBotEnable, tgBotEnable,
expireDiff, expireDiff,
trafficDiff, trafficDiff,
pageSize,
refresh, refresh,
create, create,
update, update,