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

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

@@ -43,6 +43,7 @@ const {
tgBotEnable,
expireDiff,
trafficDiff,
pageSize,
create,
update,
remove,
@@ -442,6 +443,10 @@ function expiryColor(row) {
const sortState = ref({ column: null, order: null });
const paginationState = ref({ current: 1, pageSize: 20 });
watch(pageSize, (next) => {
if (next > 0) paginationState.value.pageSize = next;
}, { immediate: true });
function sortableCol(col, key) {
return {
...col,
@@ -670,8 +675,9 @@ const columns = computed(() => [
</a-select>
</div>
<a-table v-if="!isMobile" :columns="columns" :data-source="sortedClients" :loading="loading" row-key="email"
:row-selection="rowSelection" :pagination="tablePagination" size="small" @change="onTableChange">
<a-table v-if="!isMobile" :columns="columns" :data-source="sortedClients" :loading="loading"
row-key="email" :row-selection="rowSelection" :pagination="tablePagination" size="small"
@change="onTableChange">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'email'">
<div class="email-cell">
@@ -842,6 +848,11 @@ const columns = computed(() => [
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 {
--bg-page: #1e1e1e;
--bg-card: #252526;
@@ -911,11 +922,25 @@ const columns = computed(() => [
vertical-align: middle;
}
.dot-green { background: #52c41a; }
.dot-blue { background: #1677ff; }
.dot-red { background: #ff4d4f; }
.dot-orange { background: #fa8c16; }
.dot-gray { background: rgba(128, 128, 128, 0.6); }
.dot-green {
background: #52c41a;
}
.dot-blue {
background: #1677ff;
}
.dot-red {
background: #ff4d4f;
}
.dot-orange {
background: #fa8c16;
}
.dot-gray {
background: rgba(128, 128, 128, 0.6);
}
.status-tag {
margin: 0 0 0 4px;
@@ -1050,8 +1075,6 @@ const columns = computed(() => [
</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 {
max-height: 280px;
min-width: 160px;
@@ -1064,4 +1087,12 @@ const columns = computed(() => [
font-size: 12px;
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>

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

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