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.
2026-08-12 14:21:01 +00:00 · 2026-05-28 11:08:52 +02:00
parent a07b68894c
commit 72b68cce22
15 changed files with 809 additions and 13 deletions
@@ -0,0 +1,98 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Alert, Modal, Select, Typography, message } from 'antd';
+
+import type { InboundOption } from '@/hooks/useClients';
+import type { BulkAttachResult } from '@/schemas/client';
+
+const MULTI_USER_PROTOCOLS = new Set(['vmess', 'vless', 'trojan', 'hysteria', 'shadowsocks']);
+
+interface BulkAttachInboundsModalProps {
+  open: boolean;
+  count: number;
+  inbounds: InboundOption[];
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (inboundIds: number[]) => Promise<BulkAttachResult | null>;
+}
+
+export default function BulkAttachInboundsModal({
+  open,
+  count,
+  inbounds,
+  onOpenChange,
+  onSubmit,
+}: BulkAttachInboundsModalProps) {
+  const { t } = useTranslation();
+  const [messageApi, messageContextHolder] = message.useMessage();
+  const [targetIds, setTargetIds] = useState<number[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (open) setTargetIds([]);
+  }, [open]);
+
+  const targetOptions = useMemo(() => {
+    return (inbounds || [])
+      .filter((ib) => MULTI_USER_PROTOCOLS.has((ib.protocol || '').toLowerCase()))
+      .map((ib) => ({
+        value: ib.id,
+        label: `${ib.remark ?? ''} (${ib.protocol ?? ''}@${ib.port ?? ''})`,
+      }));
+  }, [inbounds]);
+
+  async function submit() {
+    if (targetIds.length === 0 || count === 0) return;
+    setSubmitting(true);
+    try {
+      const result = await onSubmit(targetIds);
+      if (!result) return;
+      const attached = result.attached?.length ?? 0;
+      const skipped = result.skipped?.length ?? 0;
+      const errors = result.errors?.length ?? 0;
+      if (errors > 0) {
+        messageApi.warning(
+          t('pages.inbounds.attachClientsResultMixed', { attached, skipped, errors }),
+        );
+      } else {
+        messageApi.success(t('pages.inbounds.attachClientsResult', { attached, skipped }));
+      }
+      onOpenChange(false);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <>
+      {messageContextHolder}
+      <Modal
+        open={open}
+        title={t('pages.clients.attachToInboundsTitle', { count })}
+        okText={t('pages.inbounds.attachClients')}
+        cancelText={t('cancel')}
+        okButtonProps={{ disabled: targetIds.length === 0, loading: submitting }}
+        onCancel={() => onOpenChange(false)}
+        onOk={submit}
+        destroyOnHidden
+      >
+        <Typography.Paragraph type="secondary">
+          {t('pages.clients.attachToInboundsDesc', { count })}
+        </Typography.Paragraph>
+        {targetOptions.length === 0 ? (
+          <Alert type="info" showIcon message={t('pages.clients.attachToInboundsNoTargets')} />
+        ) : (
+          <Select
+            mode="multiple"
+            style={{ width: '100%' }}
+            value={targetIds}
+            onChange={setTargetIds}
+            options={targetOptions}
+            placeholder={t('pages.clients.attachToInboundsTargets')}
+            optionFilterProp="label"
+            autoFocus
+          />
+        )}
+      </Modal>
+    </>
+  );
+}