Home Explore Help
Sign In
txlyre
/
3x-ui
mirror of https://github.com/MHSanaei/3x-ui
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

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

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.
MHSanaei 16 hours ago
parent
5b5ac3f04b
commit
1b436bb3e0
2 changed files with 45 additions and 11 deletions
Unified View Show Diff Stats
  1. 42 11
      frontend/src/pages/clients/ClientsPage.vue
  2. 3 0
      frontend/src/pages/clients/useClients.js

+ 42 - 11
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"
 
-                    :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 #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-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 {
 
 .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 - 0
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,