mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-07-25 13:56:10 +00:00
feat(clients): selective bulk attach + new bulk detach
Inbounds page: - AttachClientsModal now shows a per-client selection table (email, comment, enabled tag) with search and a live "selected of total" counter; all clients are pre-selected so the old "attach all" workflow stays a single OK click. - New DetachClientsModal on the inbound row menu lets you pick which clients to remove from that inbound (records are kept so they can be re-attached later; for full removal use Delete). Clients page: - New "Attach (N)" bulk-action button + BulkAttachInboundsModal that attaches selected clients to one or more multi-user inbounds. - New "Detach (N)" bulk-action button + BulkDetachInboundsModal that removes selected clients from chosen inbounds; (email, inbound) pairs where the client isn't attached are silently skipped. Backend adds POST /panel/api/clients/bulkDetach, wrapping the existing Detach service for each email and reporting per-email detached/skipped/errors. ClientRecord rows are kept on detach to match the single-client endpoint; bulkDel remains the path for full removal.
This commit is contained in:
MHSanaei
@@ -1,6 +1,7 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Alert, Modal, Select, Typography, message } from 'antd';
|
||||
import { Alert, Input, Modal, Select, Space, Table, Tag, Typography, message } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
|
||||
import { HttpUtil } from '@/utils';
|
||||
import { coerceInboundJsonField, type DBInbound } from '@/models/dbinbound';
|
||||
@@ -20,10 +21,24 @@ interface BulkAttachResult {
|
||||
errors?: string[];
|
||||
}
|
||||
|
||||
function readClientEmails(settings: unknown): string[] {
|
||||
const parsed = coerceInboundJsonField(settings) as { clients?: Array<{ email?: string }> };
|
||||
interface ClientRow {
|
||||
email: string;
|
||||
comment: string;
|
||||
enable: boolean;
|
||||
}
|
||||
|
||||
function readClientRows(settings: unknown): ClientRow[] {
|
||||
const parsed = coerceInboundJsonField(settings) as {
|
||||
clients?: Array<{ email?: string; comment?: string; enable?: boolean }>;
|
||||
};
|
||||
const clients = Array.isArray(parsed?.clients) ? parsed.clients : [];
|
||||
return clients.map((c) => (c?.email || '').trim()).filter(Boolean);
|
||||
return clients
|
||||
.map((c) => ({
|
||||
email: (c?.email || '').trim(),
|
||||
comment: (c?.comment || '').trim(),
|
||||
enable: c?.enable !== false,
|
||||
}))
|
||||
.filter((r) => r.email);
|
||||
}
|
||||
|
||||
export default function AttachClientsModal({
|
||||
@@ -37,12 +52,18 @@ export default function AttachClientsModal({
|
||||
const [messageApi, messageContextHolder] = message.useMessage();
|
||||
const [targetIds, setTargetIds] = useState<number[]>([]);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [clientRows, setClientRows] = useState<ClientRow[]>([]);
|
||||
const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (open) setTargetIds([]);
|
||||
}, [open]);
|
||||
|
||||
const emails = useMemo(() => (source ? readClientEmails(source.settings) : []), [source]);
|
||||
if (!open) return;
|
||||
const rows = source ? readClientRows(source.settings) : [];
|
||||
setClientRows(rows);
|
||||
setSelectedEmails(rows.map((r) => r.email));
|
||||
setTargetIds([]);
|
||||
setSearch('');
|
||||
}, [open, source]);
|
||||
|
||||
const targetOptions = useMemo(() => {
|
||||
if (!source) return [];
|
||||
@@ -51,11 +72,53 @@ export default function AttachClientsModal({
|
||||
.map((ib) => ({ value: ib.id, label: `${ib.remark} (${ib.protocol}@${ib.port})` }));
|
||||
}, [dbInbounds, source]);
|
||||
|
||||
const filteredRows = useMemo(() => {
|
||||
const q = search.trim().toLowerCase();
|
||||
if (!q) return clientRows;
|
||||
return clientRows.filter(
|
||||
(r) => r.email.toLowerCase().includes(q) || r.comment.toLowerCase().includes(q),
|
||||
);
|
||||
}, [clientRows, search]);
|
||||
|
||||
const columns: ColumnsType<ClientRow> = useMemo(
|
||||
() => [
|
||||
{
|
||||
title: t('pages.inbounds.email'),
|
||||
dataIndex: 'email',
|
||||
key: 'email',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: t('comment'),
|
||||
dataIndex: 'comment',
|
||||
key: 'comment',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: t('enable'),
|
||||
dataIndex: 'enable',
|
||||
key: 'enable',
|
||||
width: 90,
|
||||
render: (enabled: boolean) =>
|
||||
enabled ? (
|
||||
<Tag color="success">{t('enable')}</Tag>
|
||||
) : (
|
||||
<Tag>{t('pages.inbounds.attachClientsStatusDisabled')}</Tag>
|
||||
),
|
||||
},
|
||||
],
|
||||
[t],
|
||||
);
|
||||
|
||||
async function submit() {
|
||||
if (!source || targetIds.length === 0 || emails.length === 0) return;
|
||||
if (!source || targetIds.length === 0 || selectedEmails.length === 0) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const msg = await HttpUtil.post('/panel/api/clients/bulkAttach', { emails, inboundIds: targetIds }, { headers: { 'Content-Type': 'application/json' } });
|
||||
const msg = await HttpUtil.post(
|
||||
'/panel/api/clients/bulkAttach',
|
||||
{ emails: selectedEmails, inboundIds: targetIds },
|
||||
{ headers: { 'Content-Type': 'application/json' } },
|
||||
);
|
||||
if (!msg?.success) {
|
||||
messageApi.error(msg?.msg || t('somethingWentWrong'));
|
||||
return;
|
||||
@@ -81,15 +144,52 @@ export default function AttachClientsModal({
|
||||
open={open}
|
||||
onCancel={onClose}
|
||||
onOk={submit}
|
||||
okButtonProps={{ disabled: targetIds.length === 0 || emails.length === 0, loading: saving }}
|
||||
okButtonProps={{
|
||||
disabled: targetIds.length === 0 || selectedEmails.length === 0,
|
||||
loading: saving,
|
||||
}}
|
||||
okText={t('pages.inbounds.attachClients')}
|
||||
cancelText={t('cancel')}
|
||||
title={t('pages.inbounds.attachClientsTitle', { remark: source?.remark ?? '' })}
|
||||
width={680}
|
||||
>
|
||||
{messageContextHolder}
|
||||
<Typography.Paragraph type="secondary">
|
||||
{t('pages.inbounds.attachClientsDesc', { count: emails.length })}
|
||||
{t('pages.inbounds.attachClientsDesc', { count: clientRows.length })}
|
||||
</Typography.Paragraph>
|
||||
|
||||
<Space direction="vertical" size="small" style={{ width: '100%', marginBottom: 12 }}>
|
||||
<Typography.Text strong>{t('pages.inbounds.attachClientsSelectLabel')}</Typography.Text>
|
||||
<Space style={{ width: '100%', justifyContent: 'space-between' }} wrap>
|
||||
<Input.Search
|
||||
allowClear
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder={t('pages.inbounds.attachClientsSearchPlaceholder')}
|
||||
style={{ maxWidth: 320 }}
|
||||
/>
|
||||
<Typography.Text type="secondary">
|
||||
{t('pages.inbounds.attachClientsSelectedCount', {
|
||||
selected: selectedEmails.length,
|
||||
total: clientRows.length,
|
||||
})}
|
||||
</Typography.Text>
|
||||
</Space>
|
||||
<Table<ClientRow>
|
||||
size="small"
|
||||
rowKey="email"
|
||||
columns={columns}
|
||||
dataSource={filteredRows}
|
||||
pagination={false}
|
||||
scroll={{ y: 280 }}
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedEmails,
|
||||
onChange: (keys) => setSelectedEmails(keys as string[]),
|
||||
preserveSelectedRowKeys: true,
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
|
||||
{targetOptions.length === 0 ? (
|
||||
<Alert type="info" showIcon message={t('pages.inbounds.attachClientsNoTargets')} />
|
||||
) : (
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Input, Modal, Space, Table, Tag, Typography, message } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
|
||||
import { HttpUtil } from '@/utils';
|
||||
import { coerceInboundJsonField, type DBInbound } from '@/models/dbinbound';
|
||||
|
||||
interface DetachClientsModalProps {
|
||||
open: boolean;
|
||||
source: DBInbound | null;
|
||||
onClose: () => void;
|
||||
onDetached?: () => void;
|
||||
}
|
||||
|
||||
interface BulkDetachResult {
|
||||
detached?: string[];
|
||||
skipped?: string[];
|
||||
errors?: string[];
|
||||
}
|
||||
|
||||
interface ClientRow {
|
||||
email: string;
|
||||
comment: string;
|
||||
enable: boolean;
|
||||
}
|
||||
|
||||
function readClientRows(settings: unknown): ClientRow[] {
|
||||
const parsed = coerceInboundJsonField(settings) as {
|
||||
clients?: Array<{ email?: string; comment?: string; enable?: boolean }>;
|
||||
};
|
||||
const clients = Array.isArray(parsed?.clients) ? parsed.clients : [];
|
||||
return clients
|
||||
.map((c) => ({
|
||||
email: (c?.email || '').trim(),
|
||||
comment: (c?.comment || '').trim(),
|
||||
enable: c?.enable !== false,
|
||||
}))
|
||||
.filter((r) => r.email);
|
||||
}
|
||||
|
||||
export default function DetachClientsModal({
|
||||
open,
|
||||
source,
|
||||
onClose,
|
||||
onDetached,
|
||||
}: DetachClientsModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const [messageApi, messageContextHolder] = message.useMessage();
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [clientRows, setClientRows] = useState<ClientRow[]>([]);
|
||||
const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const rows = source ? readClientRows(source.settings) : [];
|
||||
setClientRows(rows);
|
||||
setSelectedEmails([]);
|
||||
setSearch('');
|
||||
}, [open, source]);
|
||||
|
||||
const filteredRows = useMemo(() => {
|
||||
const q = search.trim().toLowerCase();
|
||||
if (!q) return clientRows;
|
||||
return clientRows.filter(
|
||||
(r) => r.email.toLowerCase().includes(q) || r.comment.toLowerCase().includes(q),
|
||||
);
|
||||
}, [clientRows, search]);
|
||||
|
||||
const columns: ColumnsType<ClientRow> = useMemo(
|
||||
() => [
|
||||
{
|
||||
title: t('pages.inbounds.email'),
|
||||
dataIndex: 'email',
|
||||
key: 'email',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: t('comment'),
|
||||
dataIndex: 'comment',
|
||||
key: 'comment',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: t('enable'),
|
||||
dataIndex: 'enable',
|
||||
key: 'enable',
|
||||
width: 90,
|
||||
render: (enabled: boolean) =>
|
||||
enabled ? (
|
||||
<Tag color="success">{t('enable')}</Tag>
|
||||
) : (
|
||||
<Tag>{t('pages.inbounds.attachClientsStatusDisabled')}</Tag>
|
||||
),
|
||||
},
|
||||
],
|
||||
[t],
|
||||
);
|
||||
|
||||
async function submit() {
|
||||
if (!source || selectedEmails.length === 0) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const msg = await HttpUtil.post(
|
||||
'/panel/api/clients/bulkDetach',
|
||||
{ emails: selectedEmails, inboundIds: [source.id] },
|
||||
{ headers: { 'Content-Type': 'application/json' } },
|
||||
);
|
||||
if (!msg?.success) {
|
||||
messageApi.error(msg?.msg || t('somethingWentWrong'));
|
||||
return;
|
||||
}
|
||||
const result = (msg.obj || {}) as BulkDetachResult;
|
||||
const detached = result.detached?.length ?? 0;
|
||||
const skipped = result.skipped?.length ?? 0;
|
||||
const errors = result.errors?.length ?? 0;
|
||||
if (errors > 0) {
|
||||
messageApi.warning(t('pages.inbounds.detachClientsResultMixed', { detached, skipped, errors }));
|
||||
} else {
|
||||
messageApi.success(t('pages.inbounds.detachClientsResult', { detached, skipped }));
|
||||
}
|
||||
onDetached?.();
|
||||
onClose();
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onCancel={onClose}
|
||||
onOk={submit}
|
||||
okButtonProps={{
|
||||
danger: true,
|
||||
disabled: selectedEmails.length === 0,
|
||||
loading: saving,
|
||||
}}
|
||||
okText={t('pages.inbounds.detachClients')}
|
||||
cancelText={t('cancel')}
|
||||
title={t('pages.inbounds.detachClientsTitle', { remark: source?.remark ?? '' })}
|
||||
width={680}
|
||||
>
|
||||
{messageContextHolder}
|
||||
<Typography.Paragraph type="secondary">
|
||||
{t('pages.inbounds.detachClientsDesc', { count: clientRows.length })}
|
||||
</Typography.Paragraph>
|
||||
|
||||
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
||||
<Typography.Text strong>{t('pages.inbounds.detachClientsSelectLabel')}</Typography.Text>
|
||||
<Space style={{ width: '100%', justifyContent: 'space-between' }} wrap>
|
||||
<Input.Search
|
||||
allowClear
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder={t('pages.inbounds.attachClientsSearchPlaceholder')}
|
||||
style={{ maxWidth: 320 }}
|
||||
/>
|
||||
<Typography.Text type="secondary">
|
||||
{t('pages.inbounds.attachClientsSelectedCount', {
|
||||
selected: selectedEmails.length,
|
||||
total: clientRows.length,
|
||||
})}
|
||||
</Typography.Text>
|
||||
</Space>
|
||||
<Table<ClientRow>
|
||||
size="small"
|
||||
rowKey="email"
|
||||
columns={columns}
|
||||
dataSource={filteredRows}
|
||||
pagination={false}
|
||||
scroll={{ y: 280 }}
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedEmails,
|
||||
onChange: (keys) => setSelectedEmails(keys as string[]),
|
||||
preserveSelectedRowKeys: true,
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -262,6 +262,7 @@ function buildRowActionsMenu({ record, subEnable, t, isMobile, hasClients }: { r
|
||||
items.push({ key: 'clone', icon: <BlockOutlined />, label: t('pages.inbounds.clone') });
|
||||
if (isInboundMultiUser(record) && hasClients) {
|
||||
items.push({ key: 'attachClients', icon: <UsergroupAddOutlined />, label: t('pages.inbounds.attachClients') });
|
||||
items.push({ key: 'detachClients', icon: <UsergroupDeleteOutlined />, label: t('pages.inbounds.detachClients') });
|
||||
items.push({ key: 'assignGroup', icon: <TagsOutlined />, label: t('pages.inbounds.assignClientsGroup') });
|
||||
items.push({ key: 'delAllClients', icon: <UsergroupDeleteOutlined />, danger: true, label: t('pages.inbounds.delAllClients') });
|
||||
}
|
||||
|
||||
@@ -39,6 +39,7 @@ const InboundFormModal = lazy(() => import('./InboundFormModal'));
|
||||
const InboundInfoModal = lazy(() => import('./InboundInfoModal'));
|
||||
const QrCodeModal = lazy(() => import('./QrCodeModal'));
|
||||
const AttachClientsModal = lazy(() => import('./AttachClientsModal'));
|
||||
const DetachClientsModal = lazy(() => import('./DetachClientsModal'));
|
||||
const AssignClientsGroupModal = lazy(() => import('./AssignClientsGroupModal'));
|
||||
|
||||
type RowAction =
|
||||
@@ -52,6 +53,7 @@ type RowAction =
|
||||
| 'resetTraffic'
|
||||
| 'delAllClients'
|
||||
| 'attachClients'
|
||||
| 'detachClients'
|
||||
| 'assignGroup'
|
||||
| 'clone';
|
||||
|
||||
@@ -127,6 +129,8 @@ export default function InboundsPage() {
|
||||
|
||||
const [attachOpen, setAttachOpen] = useState(false);
|
||||
const [attachSource, setAttachSource] = useState<DBInbound | null>(null);
|
||||
const [detachOpen, setDetachOpen] = useState(false);
|
||||
const [detachSource, setDetachSource] = useState<DBInbound | null>(null);
|
||||
|
||||
const [groupOpen, setGroupOpen] = useState(false);
|
||||
const [groupSource, setGroupSource] = useState<DBInbound | null>(null);
|
||||
@@ -489,6 +493,10 @@ export default function InboundsPage() {
|
||||
setAttachSource(target);
|
||||
setAttachOpen(true);
|
||||
break;
|
||||
case 'detachClients':
|
||||
setDetachSource(target);
|
||||
setDetachOpen(true);
|
||||
break;
|
||||
case 'assignGroup':
|
||||
setGroupSource(target);
|
||||
setGroupOpen(true);
|
||||
@@ -614,6 +622,14 @@ export default function InboundsPage() {
|
||||
dbInbounds={dbInbounds}
|
||||
/>
|
||||
</LazyMount>
|
||||
<LazyMount when={detachOpen}>
|
||||
<DetachClientsModal
|
||||
open={detachOpen}
|
||||
onClose={() => setDetachOpen(false)}
|
||||
onDetached={refresh}
|
||||
source={detachSource}
|
||||
/>
|
||||
</LazyMount>
|
||||
<LazyMount when={groupOpen}>
|
||||
<AssignClientsGroupModal
|
||||
open={groupOpen}
|
||||
|
||||
Reference in New Issue
Block a user