mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-05-31 10:14:15 +00:00
3675f88caf
The old toolbar exposed a single-value Search box, a single bucket radio, and one Protocol + Inbound dropdown. Real panels with hundreds of clients across mixed protocols need to slice by combinations (active + expiring, two specific inbounds, expiring within a window, high-usage subset, etc.), which the old shape couldn't express. Backend ClientPageParams now accepts comma-separated multi values for Filter / Protocol / Inbound and three new structured fields each: expiry/usage ranges (ms / bytes), and three trinary toggles (AutoRenew / HasTgID / HasComment with on/off, yes/no). The free-text search predicate also picks up UUID / Password / Auth, which were previously invisible to search. Frontend introduces a dedicated FilterDrawer (multi-select for state/protocol/inbound, DatePicker.RangePicker for expiry, paired InputNumbers for usage, radio buttons for the trinary toggles) opened from a single Filter button with a badge for the active count. Active filters render as closable chips above the table so the user can drop them one at a time, with a Clear-all next to the Filter button. The search box stays inline and always visible.
192 lines
3.3 KiB
CSS
192 lines
3.3 KiB
CSS
.clients-page .ant-pagination-options-size-changer,
|
|
.clients-page .ant-pagination-options-size-changer .ant-select-selector {
|
|
min-width: 100px;
|
|
}
|
|
|
|
.client-email-list {
|
|
max-height: 280px;
|
|
min-width: 160px;
|
|
overflow-y: auto;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.client-email-list > div {
|
|
padding: 2px 0;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.filter-bar.mobile {
|
|
gap: 6px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.filter-bar.mobile > * {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.filter-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin: 0 0 12px;
|
|
padding: 6px 8px;
|
|
background: var(--ant-color-fill-quaternary);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.filter-chips .ant-tag {
|
|
margin: 0;
|
|
}
|
|
|
|
.dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 4px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.dot-green { background: var(--ant-color-success); }
|
|
.dot-blue { background: var(--ant-color-primary); }
|
|
.dot-red { background: var(--ant-color-error); }
|
|
.dot-orange { background: var(--ant-color-warning); }
|
|
.dot-gray { background: var(--ant-color-text-quaternary); }
|
|
|
|
.status-tag {
|
|
margin: 0 0 0 4px;
|
|
font-size: 11px;
|
|
padding: 0 6px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.card-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.email-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.email-cell .email {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.email-cell .sub {
|
|
font-size: 11px;
|
|
opacity: 0.55;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 220px;
|
|
}
|
|
|
|
.client-cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.card-bulk-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 4px 8px;
|
|
}
|
|
|
|
.card-pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
padding: 4px 0 8px;
|
|
}
|
|
|
|
.card-pagination .ant-pagination-options-size-changer,
|
|
.card-pagination .ant-pagination-options-size-changer .ant-select-selector {
|
|
min-width: 88px;
|
|
}
|
|
|
|
.bulk-count {
|
|
font-size: 12px;
|
|
background: color-mix(in srgb, var(--ant-color-primary) 12%, transparent);
|
|
color: var(--ant-color-primary);
|
|
padding: 1px 8px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.client-card {
|
|
border: 1px solid var(--ant-color-border-secondary);
|
|
border-radius: 10px;
|
|
padding: 10px 12px;
|
|
background: var(--ant-color-fill-quaternary);
|
|
}
|
|
|
|
.client-card.is-selected {
|
|
border-color: var(--ant-color-primary);
|
|
background: color-mix(in srgb, var(--ant-color-primary) 6%, transparent);
|
|
}
|
|
|
|
.card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
user-select: none;
|
|
}
|
|
|
|
.card-head .tag-name {
|
|
font-weight: 600;
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.row-action-trigger {
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
opacity: 0.75;
|
|
transition: opacity 120ms ease;
|
|
}
|
|
|
|
.row-action-trigger:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card-empty {
|
|
text-align: center;
|
|
padding: 40px 16px;
|
|
opacity: 0.55;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.clients-empty {
|
|
padding: 32px 0;
|
|
text-align: center;
|
|
opacity: 0.55;
|
|
}
|