From 7c85d8fd774653e93cf4109022b8d85ec6c4c96b Mon Sep 17 00:00:00 2001
From: dushixiang <dushixiang@typesafe.cn>
Date: Sat, 24 Jan 2026 18:51:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=89=B9=E9=87=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=8E=A2=E9=92=88=E5=8F=AF=E8=A7=81=E6=80=A7=E7=9A=84?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=20fix=20#33?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/Agents/BatchVisibilityModal.tsx     | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 web/src/admin/pages/Agents/BatchVisibilityModal.tsx

diff --git a/web/src/admin/pages/Agents/BatchVisibilityModal.tsx b/web/src/admin/pages/Agents/BatchVisibilityModal.tsx
new file mode 100644
index 0000000..dffcf85
--- /dev/null
+++ b/web/src/admin/pages/Agents/BatchVisibilityModal.tsx
@@ -0,0 +1,90 @@
+import {useState} from 'react';
+import {App, Form, Modal, Radio} from 'antd';
+import {useMutation, useQueryClient} from '@tanstack/react-query';
+import {batchUpdateAgentVisibility} from '@/api/agent.ts';
+import {getErrorMessage} from '@/lib/utils';
+
+interface BatchVisibilityModalProps {
+    open: boolean;
+    agentIds: string[];
+    onCancel: () => void;
+    onSuccess: () => void;
+}
+
+const BatchVisibilityModal = ({open, agentIds, onCancel, onSuccess}: BatchVisibilityModalProps) => {
+    const {message: messageApi} = App.useApp();
+    const queryClient = useQueryClient();
+    const [form] = Form.useForm();
+    const [loading, setLoading] = useState(false);
+
+    const updateMutation = useMutation({
+        mutationFn: (data: { agentIds: string[]; visibility: string }) =>
+            batchUpdateAgentVisibility(data.agentIds, data.visibility),
+        onSuccess: () => {
+            messageApi.success('批量修改可见性成功');
+            queryClient.invalidateQueries({queryKey: ['admin', 'agents']});
+            form.resetFields();
+            onSuccess();
+        },
+        onError: (error: unknown) => {
+            messageApi.error(getErrorMessage(error, '批量修改可见性失败'));
+        },
+    });
+
+    const handleOk = async () => {
+        try {
+            setLoading(true);
+            const values = await form.validateFields();
+            await updateMutation.mutateAsync({
+                agentIds,
+                visibility: values.visibility,
+            });
+        } catch (error) {
+            console.error('表单验证失败:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleCancel = () => {
+        form.resetFields();
+        onCancel();
+    };
+
+    return (
+        <Modal
+            title={`批量修改可见性 (${agentIds.length} 个探针)`}
+            open={open}
+            onOk={handleOk}
+            onCancel={handleCancel}
+            confirmLoading={loading}
+            destroyOnClose
+            width={500}
+        >
+            <Form
+                form={form}
+                layout="vertical"
+                initialValues={{
+                    visibility: 'public',
+                }}
+            >
+                <Form.Item
+                    label="可见性"
+                    name="visibility"
+                    rules={[{required: true, message: '请选择可见性'}]}
+                >
+                    <Radio.Group>
+                        <Radio value="public">匿名可见</Radio>
+                        <Radio value="private">登录可见</Radio>
+                    </Radio.Group>
+                </Form.Item>
+                <div className="text-sm text-gray-500 mt-2">
+                    <p>• 匿名可见：未登录用户也可以查看探针信息</p>
+                    <p>• 登录可见：仅登录用户可以查看探针信息</p>
+                </div>
+            </Form>
+        </Modal>
+    );
+};
+
+export default BatchVisibilityModal;