mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-08-14 07:10:58 +00:00
refactor(clients): coherent group management — rename, split, extract
This bundles a set of group-related improvements that built up across one session and only make sense together. Terminology / API surface: - Rename "assign group" → "add to group" everywhere: i18n keys, callback names (bulkAddToGroup), component + file names (BulkAddToGroupModal, AddClientsToGroupModal), Go controller/struct names (bulkAddToGroup, AddToGroup), OpenAPI summaries. Nothing keeps the word "assign" anymore. - Move group routes under /panel/api/clients/groups/* (was /bulkAssignGroup at the clients root). - Split add and remove into two endpoints: /groups/bulkAdd now rejects empty group; new /groups/bulkRemove clears the label for the given emails. The old "submit empty to clear" UX is gone — Ungroup is its own action. UI affordances on Clients page: - Promote Group + Ungroup to visible bar buttons next to Attach + Detach. Group reuses BulkAddToGroupModal; Ungroup pops a danger confirm and calls bulkRemoveFromGroup. - Custom UngroupIcon (TagsOutlined with a diagonal strike) for the Ungroup button so the pairing reads at a glance. - Hide the Group column when no clients have a group label yet — removes a column of em-dashes on fresh installs. UI on Groups page: - New per-row Add clients… / Remove clients… actions backed by GroupAddClientsModal and GroupRemoveClientsModal: rich client picker (email / comment / current group / enable) with search and preserveSelectedRowKeys, mirroring the inbounds Attach modal UX. Controller split: - Move all /groups/* routes, handlers, and request bodies out of web/controller/client.go into a dedicated web/controller/group.go (GroupController with leaner clientService + xrayService dependencies). URLs are byte-identical because the new controller registers on the same parent gin.RouterGroup; api_docs_test.go gets a group.go → /panel/api/clients basePath entry so its route extraction keeps working. Invalidation dedup: - Removing a client from a group on the Groups page used to refetch /clients/groups and /clients/onlines three times: once from the mutation's onSuccess, once from a redundant invalidate() in the page's onSubmit, once from the WebSocket invalidate broadcast that the backend fires after every mutation. The manual invalidate() is gone, and a small invalidationTracker module lets websocketBridge skip WS-driven invalidates that arrive within 1.5s of a local invalidate — bringing the refetch count down to one. The WS path still works for changes made by another tab or user.
This commit is contained in:
MHSanaei
@@ -0,0 +1,161 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Alert, Input, Modal, Space, Table, Tag, Typography, message } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
|
||||
import type { ClientRecord } from '@/hooks/useClients';
|
||||
|
||||
interface GroupAddClientsModalProps {
|
||||
open: boolean;
|
||||
groupName: string | null;
|
||||
candidates: ClientRecord[];
|
||||
onClose: () => void;
|
||||
onSubmit: (emails: string[]) => Promise<{ affected?: number } | null>;
|
||||
}
|
||||
|
||||
interface ClientRow {
|
||||
email: string;
|
||||
comment: string;
|
||||
enable: boolean;
|
||||
currentGroup: string;
|
||||
}
|
||||
|
||||
export default function GroupAddClientsModal({
|
||||
open,
|
||||
groupName,
|
||||
candidates,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: GroupAddClientsModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const [messageApi, messageContextHolder] = message.useMessage();
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
const rows = useMemo<ClientRow[]>(
|
||||
() =>
|
||||
(candidates || [])
|
||||
.map((c) => ({
|
||||
email: (c.email || '').trim(),
|
||||
comment: (c.comment || '').trim(),
|
||||
enable: c.enable !== false,
|
||||
currentGroup: (c.group || '').trim(),
|
||||
}))
|
||||
.filter((r) => r.email),
|
||||
[candidates],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setSelectedEmails([]);
|
||||
setSearch('');
|
||||
}, [open, rows]);
|
||||
|
||||
const filteredRows = useMemo(() => {
|
||||
const q = search.trim().toLowerCase();
|
||||
if (!q) return rows;
|
||||
return rows.filter(
|
||||
(r) =>
|
||||
r.email.toLowerCase().includes(q) ||
|
||||
r.comment.toLowerCase().includes(q) ||
|
||||
r.currentGroup.toLowerCase().includes(q),
|
||||
);
|
||||
}, [rows, 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('pages.clients.group'),
|
||||
dataIndex: 'currentGroup',
|
||||
key: 'currentGroup',
|
||||
width: 140,
|
||||
ellipsis: true,
|
||||
render: (g: string) =>
|
||||
g ? <Tag color="geekblue">{g}</Tag> : <span style={{ color: 'rgba(0,0,0,0.45)' }}>—</span>,
|
||||
},
|
||||
{
|
||||
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 (!groupName || selectedEmails.length === 0) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const result = await onSubmit(selectedEmails);
|
||||
if (!result) return;
|
||||
const affected = result.affected ?? selectedEmails.length;
|
||||
messageApi.success(t('pages.groups.addToGroupResult', { count: affected, name: groupName }));
|
||||
onClose();
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onCancel={onClose}
|
||||
onOk={submit}
|
||||
okButtonProps={{ disabled: selectedEmails.length === 0, loading: saving }}
|
||||
okText={t('add')}
|
||||
cancelText={t('cancel')}
|
||||
title={t('pages.groups.addToGroupTitle', { name: groupName ?? '' })}
|
||||
width={720}
|
||||
>
|
||||
{messageContextHolder}
|
||||
<Typography.Paragraph type="secondary">
|
||||
{t('pages.groups.addToGroupDesc')}
|
||||
</Typography.Paragraph>
|
||||
|
||||
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
||||
<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: rows.length,
|
||||
})}
|
||||
</Typography.Text>
|
||||
</Space>
|
||||
{rows.length === 0 ? (
|
||||
<Alert type="info" showIcon message={t('pages.groups.addToGroupEmpty')} />
|
||||
) : (
|
||||
<Table<ClientRow>
|
||||
size="small"
|
||||
rowKey="email"
|
||||
columns={columns}
|
||||
dataSource={filteredRows}
|
||||
pagination={false}
|
||||
scroll={{ y: 320 }}
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedEmails,
|
||||
onChange: (keys) => setSelectedEmails(keys as string[]),
|
||||
preserveSelectedRowKeys: true,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Space>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
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 type { ClientRecord } from '@/hooks/useClients';
|
||||
|
||||
interface GroupRemoveClientsModalProps {
|
||||
open: boolean;
|
||||
groupName: string | null;
|
||||
members: ClientRecord[];
|
||||
onClose: () => void;
|
||||
onSubmit: (emails: string[]) => Promise<{ affected?: number } | null>;
|
||||
}
|
||||
|
||||
interface ClientRow {
|
||||
email: string;
|
||||
comment: string;
|
||||
enable: boolean;
|
||||
}
|
||||
|
||||
export default function GroupRemoveClientsModal({
|
||||
open,
|
||||
groupName,
|
||||
members,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: GroupRemoveClientsModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const [messageApi, messageContextHolder] = message.useMessage();
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
const rows = useMemo<ClientRow[]>(
|
||||
() =>
|
||||
(members || [])
|
||||
.map((c) => ({
|
||||
email: (c.email || '').trim(),
|
||||
comment: (c.comment || '').trim(),
|
||||
enable: c.enable !== false,
|
||||
}))
|
||||
.filter((r) => r.email),
|
||||
[members],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setSelectedEmails([]);
|
||||
setSearch('');
|
||||
}, [open, rows]);
|
||||
|
||||
const filteredRows = useMemo(() => {
|
||||
const q = search.trim().toLowerCase();
|
||||
if (!q) return rows;
|
||||
return rows.filter(
|
||||
(r) => r.email.toLowerCase().includes(q) || r.comment.toLowerCase().includes(q),
|
||||
);
|
||||
}, [rows, 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 (!groupName || selectedEmails.length === 0) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const result = await onSubmit(selectedEmails);
|
||||
if (!result) return;
|
||||
const affected = result.affected ?? selectedEmails.length;
|
||||
messageApi.success(
|
||||
t('pages.groups.removeFromGroupResult', { count: affected, name: groupName }),
|
||||
);
|
||||
onClose();
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onCancel={onClose}
|
||||
onOk={submit}
|
||||
okButtonProps={{ danger: true, disabled: selectedEmails.length === 0, loading: saving }}
|
||||
okText={t('remove')}
|
||||
cancelText={t('cancel')}
|
||||
title={t('pages.groups.removeFromGroupTitle', { name: groupName ?? '' })}
|
||||
width={680}
|
||||
>
|
||||
{messageContextHolder}
|
||||
<Typography.Paragraph type="secondary">
|
||||
{t('pages.groups.removeFromGroupDesc')}
|
||||
</Typography.Paragraph>
|
||||
|
||||
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
||||
<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: rows.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>
|
||||
);
|
||||
}
|
||||
@@ -30,6 +30,8 @@ import {
|
||||
RetweetOutlined,
|
||||
TagsOutlined,
|
||||
TeamOutlined,
|
||||
UsergroupAddOutlined,
|
||||
UsergroupDeleteOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
@@ -47,6 +49,8 @@ import { parseMsg } from '@/utils/zodValidate';
|
||||
|
||||
const SubLinksModal = lazy(() => import('../clients/SubLinksModal'));
|
||||
const ClientBulkAdjustModal = lazy(() => import('../clients/ClientBulkAdjustModal'));
|
||||
const GroupAddClientsModal = lazy(() => import('./GroupAddClientsModal'));
|
||||
const GroupRemoveClientsModal = lazy(() => import('./GroupRemoveClientsModal'));
|
||||
|
||||
const JSON_HEADERS = { headers: { 'Content-Type': 'application/json' } } as const;
|
||||
|
||||
@@ -77,7 +81,7 @@ export default function GroupsPage() {
|
||||
useEffect(() => { setMessageInstance(messageApi); }, [messageApi]);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { clients, subSettings, bulkAdjust, bulkDelete } = useClients();
|
||||
const { clients, subSettings, bulkAdjust, bulkAddToGroup, bulkRemoveFromGroup, bulkDelete } = useClients();
|
||||
|
||||
const groupsQuery = useQuery({
|
||||
queryKey: keys.clients.groups(),
|
||||
@@ -124,6 +128,8 @@ export default function GroupsPage() {
|
||||
|
||||
const [subLinksOpen, setSubLinksOpen] = useState(false);
|
||||
const [adjustOpen, setAdjustOpen] = useState(false);
|
||||
const [addClientsOpen, setAddClientsOpen] = useState(false);
|
||||
const [removeClientsOpen, setRemoveClientsOpen] = useState(false);
|
||||
const [groupEmails, setGroupEmails] = useState<string[]>([]);
|
||||
const [groupForAction, setGroupForAction] = useState<GroupSummary | null>(null);
|
||||
|
||||
@@ -228,6 +234,20 @@ export default function GroupsPage() {
|
||||
setAdjustOpen(true);
|
||||
}
|
||||
|
||||
function openAddClientsFor(g: GroupSummary) {
|
||||
setGroupForAction(g);
|
||||
setAddClientsOpen(true);
|
||||
}
|
||||
|
||||
function openRemoveClientsFor(g: GroupSummary) {
|
||||
if (!g.clientCount) {
|
||||
messageApi.info(t('pages.groups.emptyForAction'));
|
||||
return;
|
||||
}
|
||||
setGroupForAction(g);
|
||||
setRemoveClientsOpen(true);
|
||||
}
|
||||
|
||||
function onDeleteClients(g: GroupSummary) {
|
||||
if (!g.clientCount) {
|
||||
messageApi.info(t('pages.groups.emptyForAction'));
|
||||
@@ -306,6 +326,20 @@ export default function GroupsPage() {
|
||||
disabled: !row.clientCount,
|
||||
onClick: () => onResetTraffic(row),
|
||||
},
|
||||
{
|
||||
key: 'addClients',
|
||||
icon: <UsergroupAddOutlined />,
|
||||
label: t('pages.groups.addToGroup'),
|
||||
onClick: () => openAddClientsFor(row),
|
||||
},
|
||||
{
|
||||
key: 'removeClients',
|
||||
icon: <UsergroupDeleteOutlined />,
|
||||
label: t('pages.groups.removeFromGroup'),
|
||||
danger: true,
|
||||
disabled: !row.clientCount,
|
||||
onClick: () => openRemoveClientsFor(row),
|
||||
},
|
||||
{ type: 'divider' },
|
||||
{
|
||||
key: 'rename',
|
||||
@@ -522,6 +556,38 @@ export default function GroupsPage() {
|
||||
}}
|
||||
/>
|
||||
</LazyMount>
|
||||
|
||||
<LazyMount when={addClientsOpen}>
|
||||
<GroupAddClientsModal
|
||||
open={addClientsOpen}
|
||||
groupName={groupForAction?.name ?? null}
|
||||
candidates={clients.filter((c) => c.group !== groupForAction?.name)}
|
||||
onClose={() => setAddClientsOpen(false)}
|
||||
onSubmit={async (emails) => {
|
||||
const msg = await bulkAddToGroup(emails, groupForAction?.name ?? '');
|
||||
if (msg?.success) {
|
||||
return (msg.obj as { affected?: number } | undefined) ?? { affected: 0 };
|
||||
}
|
||||
return null;
|
||||
}}
|
||||
/>
|
||||
</LazyMount>
|
||||
|
||||
<LazyMount when={removeClientsOpen}>
|
||||
<GroupRemoveClientsModal
|
||||
open={removeClientsOpen}
|
||||
groupName={groupForAction?.name ?? null}
|
||||
members={clients.filter((c) => c.group === groupForAction?.name)}
|
||||
onClose={() => setRemoveClientsOpen(false)}
|
||||
onSubmit={async (emails) => {
|
||||
const msg = await bulkRemoveFromGroup(emails);
|
||||
if (msg?.success) {
|
||||
return (msg.obj as { affected?: number } | undefined) ?? { affected: 0 };
|
||||
}
|
||||
return null;
|
||||
}}
|
||||
/>
|
||||
</LazyMount>
|
||||
</Layout>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user