xinyin025/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-09-02 16:37:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(clients,groups): client groups + sub-links export + dedicated groups page

Browse Source 
Persistent client groups
- New ClientGroup model + client_groups table that holds empty
  (placeholder) groups so a user can define a label before any client
  references it. ListGroups merges these with the distinct group_name
  values already stored on clients and reports {name, clientCount}.
- ClientRecord gains group_name column; the model.Client wire shape
  gains a matching `group` JSON field that survives the
  inbound.settings → SyncInbound round-trip.
- Rename/Delete on a group mutates client_groups (rename row / delete
  row) AND propagates to all matching clients in ClientRecord and in
  every owning inbound's settings JSON, all in one transaction.

Bulk operations
- AssignGroup(emails, group) updates clients.group_name + patches each
  affected inbound's settings JSON in one read-modify-write per inbound.
  Empty group clears the label. Auto-creates the client_groups row when
  the user assigns to a brand-new name.
- BulkResetTraffic(emails) loops the existing single-reset path so the
  caller can zero traffic across a whole selection or a whole group.
- EmailsByGroup(name) returns just the email list (used by the groups
  page to fan a single bulk action over every member).

Endpoints (all under /panel/api/clients)
- GET  /groups                         — summaries with counts
- GET  /groups/:name/emails            — emails in a group
- POST /groups/create                  — empty placeholder group
- POST /groups/rename                  — rename (table + clients + JSON)
- POST /groups/delete                  — drop label everywhere (clients survive)
- POST /bulkAssignGroup                — assign N selected clients
- POST /bulkResetTraffic               — reset traffic on a list

Clients page UX
- New Group column (Actions → Client → Group → Inbounds → …) with a
  click-to-filter chip.
- FilterDrawer gains a multi-select Group filter whose options come
  from the new ClientPageResponse.groups field (sourced from ListGroups
  so empty/placeholder groups are pickable too).
- Single-client and bulk-add forms gain a Group AutoComplete pre-loaded
  with all known group names.
- New toolbar buttons when selection > 0: "Group ({n})" opens
  BulkAssignGroupModal, "Sub links ({n})" opens SubLinksModal.

Sub-links export modal (new SubLinksModal.tsx)
- Table of selected clients with their subscription URL (and JSON URL
  when subJsonEnable is on), per-row copy, Copy all, and Download as
  sub-links-<timestamp>.txt. Warns when subscription is disabled or
  none of the selected clients have a subId.

Dedicated Groups page (new pages/groups/GroupsPage.tsx)
- /groups route + sidebar entry (TagsOutlined icon) + page title key.
- Card-based layout matching Clients/Inbounds/Nodes — summary card with
  Total/Grouped/Empty stats, main card with Add Group button + table.
- Per-row More dropdown (icon-first column on the left): Sub links,
  Adjust (days+traffic), Reset traffic, Rename, Delete clients in
  group, Delete group (keep clients). Empty groups disable the
  client-targeted actions.
- Reuses SubLinksModal and ClientBulkAdjustModal — emails for the
  group are fetched on demand from GET /groups/:name/emails.

Other polish
- /groups + groups-page selectors added to page-shell.css and
  page-cards.css so the new page inherits the same background, padding,
  card borders, hover shadow, and summary-card padding.
- .card-toolbar gains a small vertical padding so the larger toolbar
  buttons (now default size, matching Inbounds) don't crowd the top of
  the card-head on Clients and Groups pages.
This commit is contained in:
MHSanaei
2026-05-27 17:30:55 +02:00
parent 7680e27d1d
commit 93eda06878
25 changed files with 2052 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/clients/BulkAssignGroupModal.tsx
+83
View File
@@ -0,0 +1,83 @@
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { AutoComplete, Form, Modal, message } from 'antd';
interface BulkAssignGroupModalProps {
open: boolean;
count: number;
groups: string[];
onOpenChange: (open: boolean) => void;
onSubmit: (group: string) => Promise<{ affected?: number } | null>;
}
export default function BulkAssignGroupModal({
open,
count,
groups,
onOpenChange,
onSubmit,
}: BulkAssignGroupModalProps) {
const { t } = useTranslation();
const [messageApi, messageContextHolder] = message.useMessage();
const [value, setValue] = useState('');
const [submitting, setSubmitting] = useState(false);
useEffect(() => {
if (open) setValue('');
}, [open]);
async function submit() {
const next = value.trim();
setSubmitting(true);
try {
const result = await onSubmit(next);
if (result) {
const affected = result.affected ?? 0;
if (next === '') {
messageApi.success(t('pages.clients.assignGroupClearedToast', { count: affected }));
} else {
messageApi.success(t('pages.clients.assignGroupAssignedToast', { count: affected, group: next }));
}
onOpenChange(false);
}
} finally {
setSubmitting(false);
}
}
return (
<>
{messageContextHolder}
<Modal
open={open}
title={t('pages.clients.assignGroupTitle', { count })}
okText={t('save')}
cancelText={t('cancel')}
confirmLoading={submitting}
onCancel={() => onOpenChange(false)}
onOk={submit}
destroyOnHidden
>
<Form layout="vertical">
<Form.Item
label={t('pages.clients.group')}
tooltip={t('pages.clients.assignGroupTooltip')}
>
<AutoComplete
value={value}
placeholder={t('pages.clients.assignGroupPlaceholder')}
options={groups.map((g) => ({ value: g }))}
onChange={(v) => setValue(v ?? '')}
filterOption={(input, option) =>
String(option?.value ?? '').toLowerCase().includes((input || '').toLowerCase())
}
allowClear
style={{ width: '100%' }}
autoFocus
/>
</Form.Item>
</Form>
</Modal>
</>
);
}
frontend/src/pages/clients/ClientBulkAddModal.tsx
+19 -1
View File
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Form, Input, InputNumber, Modal, Select, Space, Switch, message } from 'antd';
import { AutoComplete, Button, Form, Input, InputNumber, Modal, Select, Space, Switch, message } from 'antd';
import { ReloadOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
@@ -21,6 +21,7 @@ interface ClientBulkAddModalProps {
open: boolean;
inbounds: InboundOption[];
ipLimitEnable?: boolean;
groups?: string[];
onOpenChange: (open: boolean) => void;
onSaved?: () => void;
}
@@ -36,6 +37,7 @@ function emptyForm(): FormState {
emailPostfix: '',
quantity: 1,
subId: '',
group: '',
comment: '',
flow: '',
limitIp: 0,
@@ -50,6 +52,7 @@ export default function ClientBulkAddModal({
open,
inbounds,
ipLimitEnable = false,
groups = [],
onOpenChange,
onSaved,
}: ClientBulkAddModalProps) {
@@ -157,6 +160,7 @@ export default function ClientBulkAddModal({
expiryTime: form.expiryTime,
reset: Number(form.reset) || 0,
limitIp: Number(form.limitIp) || 0,
group: form.group,
comment: form.comment,
enable: true,
},
@@ -263,6 +267,20 @@ export default function ClientBulkAddModal({
</Space.Compact>
</Form.Item>
<Form.Item label={t('pages.clients.group')} tooltip={t('pages.clients.groupDesc')}>
<AutoComplete
value={form.group}
placeholder={t('pages.clients.groupPlaceholder')}
options={groups.map((g) => ({ value: g }))}
onChange={(v) => update('group', v ?? '')}
filterOption={(input, option) =>
String(option?.value ?? '').toLowerCase().includes((input || '').toLowerCase())
}
allowClear
style={{ width: '100%' }}
/>
</Form.Item>
<Form.Item label={t('comment')}>
<Input value={form.comment} onChange={(e) => update('comment', e.target.value)} />
</Form.Item>
frontend/src/pages/clients/ClientFormModal.tsx
+22
View File
@@ -1,6 +1,7 @@
import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
AutoComplete,
Button,
Col,
Form,
@@ -61,6 +62,7 @@ interface ClientFormModalProps {
attachedIds?: number[];
ipLimitEnable?: boolean;
tgBotEnable?: boolean;
groups?: string[];
save: (
payload: Record<string, unknown> | SaveCreatePayload,
meta: SaveMetaEdit | SaveMetaCreate,
@@ -83,6 +85,7 @@ interface FormState {
reset: number;
limitIp: number;
tgId: number;
group: string;
comment: string;
enable: boolean;
inboundIds: number[];
@@ -104,6 +107,7 @@ function emptyForm(): FormState {
reset: 0,
limitIp: 0,
tgId: 0,
group: '',
comment: '',
enable: true,
inboundIds: [],
@@ -128,6 +132,7 @@ export default function ClientFormModal({
attachedIds = [],
ipLimitEnable = false,
tgBotEnable = false,
groups = [],
save,
onOpenChange,
}: ClientFormModalProps) {
@@ -163,6 +168,7 @@ export default function ClientFormModal({
reset: Number(client.reset) || 0,
limitIp: client.limitIp || 0,
tgId: Number(client.tgId) || 0,
group: client.group || '',
comment: client.comment || '',
enable: !!client.enable,
inboundIds: Array.isArray(attachedIds) ? [...attachedIds] : [],
@@ -287,6 +293,7 @@ export default function ClientFormModal({
reset: form.reset,
limitIp: form.limitIp,
tgId: form.tgId,
group: form.group,
comment: form.comment,
enable: form.enable,
inboundIds: form.inboundIds,
@@ -507,6 +514,21 @@ export default function ClientFormModal({
<Input value={form.comment} onChange={(e) => update('comment', e.target.value)} />
</Form.Item>
</Col>
<Col xs={24} md={12}>
<Form.Item label={t('pages.clients.group')} tooltip={t('pages.clients.groupDesc')}>
<AutoComplete
value={form.group}
placeholder={t('pages.clients.groupPlaceholder')}
options={groups.map((g) => ({ value: g }))}
onChange={(v) => update('group', v ?? '')}
filterOption={(input, option) =>
String(option?.value ?? '').toLowerCase().includes((input || '').toLowerCase())
}
allowClear
style={{ width: '100%' }}
/>
</Form.Item>
</Col>
</Row>
<Form.Item label={t('pages.clients.attachedInbounds')} required={!isEdit}>
frontend/src/pages/clients/ClientsPage.css
+1
View File
@@ -74,6 +74,7 @@
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 6px 0;
}
.email-cell {
frontend/src/pages/clients/ClientsPage.tsx
+118 -14
View File
@@ -31,6 +31,7 @@ import {
EditOutlined,
FilterOutlined,
InfoCircleOutlined,
LinkOutlined,
MoreOutlined,
PlusOutlined,
QrcodeOutlined,
@@ -38,6 +39,7 @@ import {
RetweetOutlined,
SearchOutlined,
SortAscendingOutlined,
TagsOutlined,
TeamOutlined,
UsergroupAddOutlined,
} from '@ant-design/icons';
@@ -58,6 +60,8 @@ const ClientQrModal = lazy(() => import('./ClientQrModal'));
const ClientBulkAddModal = lazy(() => import('./ClientBulkAddModal'));
const ClientBulkAdjustModal = lazy(() => import('./ClientBulkAdjustModal'));
const FilterDrawer = lazy(() => import('./FilterDrawer'));
const SubLinksModal = lazy(() => import('./SubLinksModal'));
const BulkAssignGroupModal = lazy(() => import('./BulkAssignGroupModal'));
import { emptyFilters, activeFilterCount } from './filters';
import type { ClientFilters } from './filters';
import './ClientsPage.css';
@@ -97,6 +101,7 @@ function readFilterState(): PersistedFilterState {
buckets: Array.isArray(fromRaw.buckets) ? fromRaw.buckets : [],
protocols: Array.isArray(fromRaw.protocols) ? fromRaw.protocols : [],
inboundIds: Array.isArray(fromRaw.inboundIds) ? fromRaw.inboundIds : [],
groups: Array.isArray(fromRaw.groups) ? fromRaw.groups : [],
},
};
} catch {
@@ -140,10 +145,11 @@ export default function ClientsPage() {
const {
clients, filtered,
summary: serverSummary,
allGroups,
setQuery,
inbounds, onlines, loading, fetched, subSettings,
ipLimitEnable, tgBotEnable, expireDiff, trafficDiff, pageSize,
create, update, remove, bulkDelete, bulkAdjust, attach, detach,
create, update, remove, bulkDelete, bulkAdjust, bulkAssignGroup, attach, detach,
resetTraffic, resetAllTraffics, delDepleted, setEnable,
applyTrafficEvent, applyClientStatsEvent,
hydrate,
@@ -165,6 +171,8 @@ export default function ClientsPage() {
const [qrClient, setQrClient] = useState<ClientRecord | null>(null);
const [bulkAddOpen, setBulkAddOpen] = useState(false);
const [bulkAdjustOpen, setBulkAdjustOpen] = useState(false);
const [subLinksOpen, setSubLinksOpen] = useState(false);
const [bulkGroupOpen, setBulkGroupOpen] = useState(false);
const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
const initial = readFilterState();
@@ -210,6 +218,7 @@ export default function ClientsPage() {
autoRenew: filters.autoRenew || undefined,
hasTgId: filters.hasTgId || undefined,
hasComment: filters.hasComment || undefined,
group: filters.groups.join(',') || undefined,
sort: sortColumn || undefined,
order: sortOrder || undefined,
});
@@ -236,6 +245,12 @@ export default function ClientsPage() {
return [...values].sort();
}, [inbounds]);
const groupOptions = useMemo(() => {
const values = new Set<string>(allGroups);
for (const g of filters.groups) values.add(g);
return [...values].sort((a, b) => a.localeCompare(b));
}, [allGroups, filters.groups]);
const isOnline = useCallback((email: string) => !!email && onlineSet.has(email), [onlineSet]);
function inboundLabel(id: number) {
@@ -562,6 +577,29 @@ export default function ClientsPage() {
</div>
),
},
{
title: t('pages.clients.group'),
key: 'group',
width: 130,
render: (_v, record) => {
if (!record.group) return <span style={{ color: 'rgba(0,0,0,0.45)' }}>—</span>;
const isActive = filters.groups.includes(record.group);
return (
<Tag
color="geekblue"
style={{ margin: 0, cursor: 'pointer', opacity: isActive ? 0.6 : 1 }}
onClick={(e) => {
e.stopPropagation();
if (!isActive) {
setFilters({ ...filters, groups: [...filters.groups, record.group!] });
}
}}
>
{record.group}
</Tag>
);
},
},
{
title: t('pages.clients.attachedInbounds'),
key: 'inboundIds',
@@ -627,7 +665,7 @@ export default function ClientsPage() {
),
},
// eslint-disable-next-line react-hooks/exhaustive-deps
], [t, togglingEmail, clientBucket, isOnline, inboundsById]);
], [t, togglingEmail, clientBucket, isOnline, inboundsById, filters]);
const tablePagination = {
current: currentPage,
@@ -740,28 +778,56 @@ export default function ClientsPage() {
hoverable
title={
<div className="card-toolbar">
<Button type="primary" size="small" icon={<PlusOutlined />} onClick={onAdd}>
<Button type="primary" icon={<PlusOutlined />} onClick={onAdd}>
{!isMobile && t('pages.clients.addClients')}
</Button>
<Button size="small" icon={<UsergroupAddOutlined />} onClick={() => setBulkAddOpen(true)}>
{!isMobile && t('pages.clients.bulk')}
</Button>
{selectedRowKeys.length > 0 && (
<>
<Button size="small" icon={<ClockCircleOutlined />} onClick={() => setBulkAdjustOpen(true)}>
<Button icon={<ClockCircleOutlined />} onClick={() => setBulkAdjustOpen(true)}>
{t('pages.clients.adjustSelected', { count: selectedRowKeys.length })}
</Button>
<Button danger size="small" icon={<DeleteOutlined />} onClick={onBulkDelete}>
<Button icon={<TagsOutlined />} onClick={() => setBulkGroupOpen(true)}>
{t('pages.clients.assignGroupSelected', { count: selectedRowKeys.length })}
</Button>
<Button icon={<LinkOutlined />} onClick={() => setSubLinksOpen(true)}>
{t('pages.clients.subLinksSelected', { count: selectedRowKeys.length })}
</Button>
<Button danger icon={<DeleteOutlined />} onClick={onBulkDelete}>
{t('pages.clients.deleteSelected', { count: selectedRowKeys.length })}
</Button>
</>
)}
<Button size="small" icon={<RetweetOutlined />} onClick={onResetAllTraffics}>
{!isMobile && t('pages.clients.resetAllTraffics')}
</Button>
<Button size="small" danger icon={<RestOutlined />} onClick={onDelDepleted}>
{!isMobile && t('pages.clients.delDepleted')}
</Button>
<Dropdown
trigger={['click']}
placement="bottomRight"
menu={{
items: [
{
key: 'bulk',
icon: <UsergroupAddOutlined />,
label: t('pages.clients.bulk'),
onClick: () => setBulkAddOpen(true),
},
{
key: 'resetAll',
icon: <RetweetOutlined />,
label: t('pages.clients.resetAllTraffics'),
onClick: onResetAllTraffics,
},
{
key: 'delDepleted',
icon: <RestOutlined />,
label: t('pages.clients.delDepleted'),
danger: true,
onClick: onDelDepleted,
},
],
}}
>
<Button icon={<MoreOutlined />}>
{!isMobile && t('more')}
</Button>
</Dropdown>
</div>
}
>
@@ -838,6 +904,16 @@ export default function ClientsPage() {
{inboundLabel(id)}
</Tag>
))}
{filters.groups.map((g) => (
<Tag
key={`g-${g}`}
closable
color="geekblue"
onClose={() => setFilters({ ...filters, groups: filters.groups.filter((x) => x !== g) })}
>
{t('pages.clients.group')}: {g}
</Tag>
))}
{(filters.expiryFrom || filters.expiryTo) && (
<Tag closable color="purple" onClose={() => clearOneFilter('expiryFrom')}>
{t('pages.clients.expiryTime')}: {filters.expiryFrom ? IntlUtil.formatDate(filters.expiryFrom, datepicker) : '…'}
@@ -1008,6 +1084,7 @@ export default function ClientsPage() {
inbounds={inbounds}
ipLimitEnable={ipLimitEnable}
tgBotEnable={tgBotEnable}
groups={allGroups}
save={onSave}
onOpenChange={setFormOpen}
/>
@@ -1035,6 +1112,7 @@ export default function ClientsPage() {
open={bulkAddOpen}
inbounds={inbounds}
ipLimitEnable={ipLimitEnable}
groups={allGroups}
onOpenChange={setBulkAddOpen}
onSaved={() => setBulkAddOpen(false)}
/>
@@ -1054,6 +1132,31 @@ export default function ClientsPage() {
}}
/>
</LazyMount>
<LazyMount when={subLinksOpen}>
<SubLinksModal
open={subLinksOpen}
emails={selectedRowKeys}
clients={clients}
subSettings={subSettings}
onOpenChange={setSubLinksOpen}
/>
</LazyMount>
<LazyMount when={bulkGroupOpen}>
<BulkAssignGroupModal
open={bulkGroupOpen}
count={selectedRowKeys.length}
groups={allGroups}
onOpenChange={setBulkGroupOpen}
onSubmit={async (group) => {
const msg = await bulkAssignGroup([...selectedRowKeys], group);
if (msg?.success) {
setSelectedRowKeys([]);
return (msg.obj as { affected?: number } | undefined) ?? { affected: 0 };
}
return null;
}}
/>
</LazyMount>
<LazyMount when={filterDrawerOpen}>
<FilterDrawer
open={filterDrawerOpen}
@@ -1062,6 +1165,7 @@ export default function ClientsPage() {
onChange={setFilters}
inbounds={inbounds}
protocols={protocolOptions}
groups={groupOptions}
/>
</LazyMount>
</Layout>
frontend/src/pages/clients/FilterDrawer.tsx
+22
View File
@@ -27,6 +27,7 @@ interface FilterDrawerProps {
onChange: (next: ClientFilters) => void;
inbounds: InboundOption[];
protocols: string[];
groups: string[];
}
const BUCKET_KEYS = ['active', 'expiring', 'depleted', 'deactive', 'online'] as const;
@@ -38,6 +39,7 @@ export default function FilterDrawer({
onChange,
inbounds,
protocols,
groups,
}: FilterDrawerProps) {
const { t } = useTranslation();
@@ -60,6 +62,11 @@ export default function FilterDrawer({
[protocols],
);
const groupOptions = useMemo(
() => groups.map((g) => ({ value: g, label: g })),
[groups],
);
const dateRange: [Dayjs | null, Dayjs | null] = [
filters.expiryFrom ? dayjs(filters.expiryFrom) : null,
filters.expiryTo ? dayjs(filters.expiryTo) : null,
@@ -126,6 +133,21 @@ export default function FilterDrawer({
/>
</Form.Item>
<Form.Item label={t('pages.clients.group')}>
<Select
mode="multiple"
value={filters.groups}
onChange={(v) => patch('groups', v as string[])}
options={groupOptions}
placeholder={t('pages.clients.groupPlaceholder')}
maxTagCount="responsive"
allowClear
showSearch
optionFilterProp="label"
listHeight={220}
/>
</Form.Item>
<Form.Item label={t('pages.clients.expiryTime')}>
<DatePicker.RangePicker
value={dateRange}
frontend/src/pages/clients/SubLinksModal.tsx
+193
View File
@@ -0,0 +1,193 @@
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Alert, Button, Modal, Table, Tooltip, Typography, message } from 'antd';
import type { TableColumnType } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import type { ClientRecord } from '@/hooks/useClients';
interface SubSettings {
enable: boolean;
subURI: string;
subJsonURI: string;
subJsonEnable: boolean;
}
interface SubLinksModalProps {
open: boolean;
emails: string[];
clients: ClientRecord[];
subSettings?: SubSettings;
onOpenChange: (open: boolean) => void;
}
interface Row {
key: string;
email: string;
subId: string;
link: string;
jsonLink: string;
}
export default function SubLinksModal({
open,
emails,
clients,
subSettings,
onOpenChange,
}: SubLinksModalProps) {
const { t } = useTranslation();
const [messageApi, messageContextHolder] = message.useMessage();
const enabled = !!subSettings?.enable && !!subSettings?.subURI;
const jsonEnabled = !!subSettings?.subJsonEnable && !!subSettings?.subJsonURI;
const rows = useMemo<Row[]>(() => {
if (!enabled) return [];
const byEmail = new Map(clients.map((c) => [c.email, c]));
const out: Row[] = [];
for (const email of emails) {
const c = byEmail.get(email);
if (!c?.subId) continue;
out.push({
key: email,
email,
subId: c.subId,
link: subSettings!.subURI + c.subId,
jsonLink: jsonEnabled ? subSettings!.subJsonURI + c.subId : '',
});
}
return out;
}, [emails, clients, enabled, jsonEnabled, subSettings]);
const allText = useMemo(
() => rows.map((r) => (jsonEnabled ? `${r.email}\t${r.link}\t${r.jsonLink}` : `${r.email}\t${r.link}`)).join('\n'),
[rows, jsonEnabled],
);
async function copy(text: string, label?: string) {
try {
await navigator.clipboard.writeText(text);
messageApi.success(label || t('copied'));
} catch {
messageApi.error(t('somethingWentWrong'));
}
}
function download() {
const blob = new Blob([allText], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
const stamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
a.href = url;
a.download = `sub-links-${stamp}.txt`;
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(url);
}
const columns: TableColumnType<Row>[] = [
{
title: t('pages.clients.client'),
dataIndex: 'email',
key: 'email',
width: 180,
ellipsis: true,
},
{
title: t('pages.clients.subLinkColumn'),
dataIndex: 'link',
key: 'link',
ellipsis: true,
render: (link: string) => (
<Tooltip title={link} placement="topLeft">
<Typography.Text copyable={false} ellipsis>{link}</Typography.Text>
</Tooltip>
),
},
{
title: '',
key: 'actions',
width: 64,
render: (_v, row) => (
<Button size="small" type="text" icon={<CopyOutlined />} onClick={() => copy(row.link, t('copied'))} />
),
},
];
if (jsonEnabled) {
columns.splice(2, 0, {
title: t('pages.clients.subJsonLinkColumn'),
dataIndex: 'jsonLink',
key: 'jsonLink',
ellipsis: true,
render: (link: string) => (
<Tooltip title={link} placement="topLeft">
<Typography.Text copyable={false} ellipsis>{link}</Typography.Text>
</Tooltip>
),
});
}
return (
<>
{messageContextHolder}
<Modal
open={open}
title={t('pages.clients.subLinksTitle', { count: rows.length })}
width={780}
footer={
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Button onClick={() => onOpenChange(false)}>{t('close')}</Button>
<div style={{ display: 'flex', gap: 8 }}>
<Button
icon={<CopyOutlined />}
disabled={rows.length === 0}
onClick={() => copy(allText, t('pages.clients.subLinksCopiedAll', { count: rows.length }))}
>
{t('pages.clients.subLinksCopyAll')}
</Button>
<Button
type="primary"
icon={<DownloadOutlined />}
disabled={rows.length === 0}
onClick={download}
>
{t('download')}
</Button>
</div>
</div>
}
onCancel={() => onOpenChange(false)}
>
{!enabled && (
<Alert
type="warning"
showIcon
message={t('pages.clients.subLinksDisabled')}
description={t('pages.clients.subLinksDisabledHint')}
style={{ marginBottom: 12 }}
/>
)}
{enabled && rows.length === 0 && (
<Alert
type="info"
showIcon
message={t('pages.clients.subLinksEmpty')}
style={{ marginBottom: 12 }}
/>
)}
{rows.length > 0 && (
<Table<Row>
dataSource={rows}
columns={columns}
size="small"
pagination={false}
scroll={{ y: 360 }}
/>
)}
</Modal>
</>
);
}
frontend/src/pages/clients/filters.ts
+3
View File
@@ -2,6 +2,7 @@ export interface ClientFilters {
buckets: string[];
protocols: string[];
inboundIds: number[];
groups: string[];
expiryFrom?: number;
expiryTo?: number;
usageFromGB?: number;
@@ -16,6 +17,7 @@ export function emptyFilters(): ClientFilters {
buckets: [],
protocols: [],
inboundIds: [],
groups: [],
autoRenew: '',
hasTgId: '',
hasComment: '',
@@ -27,6 +29,7 @@ export function activeFilterCount(f: ClientFilters): number {
if (f.buckets.length) n++;
if (f.protocols.length) n++;
if (f.inboundIds.length) n++;
if (f.groups.length) n++;
if (f.expiryFrom || f.expiryTo) n++;
if (f.usageFromGB || f.usageToGB) n++;
if (f.autoRenew) n++;