Xiaoxia AI
81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
/**
|
|
* 邀请成员弹窗
|
|
*/
|
|
import React from 'react';
|
|
import { Modal, Form, Input, Select, message } from 'antd';
|
|
import { useInviteMember } from '@/hooks/useWorkspace';
|
|
|
|
interface InviteMemberModalProps {
|
|
workspaceId: string;
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const InviteMemberModal: React.FC<InviteMemberModalProps> = ({
|
|
workspaceId,
|
|
open,
|
|
onClose,
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
const inviteMutation = useInviteMember(workspaceId);
|
|
|
|
const handleOk = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
await inviteMutation.mutateAsync(values);
|
|
message.success('邀请已发送！');
|
|
form.resetFields();
|
|
onClose();
|
|
} catch (error) {
|
|
// 验证失败或请求失败
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
form.resetFields();
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title="邀请成员"
|
|
open={open}
|
|
onOk={handleOk}
|
|
onCancel={handleCancel}
|
|
confirmLoading={inviteMutation.isPending}
|
|
okText="发送邀请"
|
|
cancelText="取消"
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item
|
|
name="email"
|
|
label="邮箱地址"
|
|
rules={[
|
|
{ required: true, message: '请输入邮箱地址' },
|
|
{ type: 'email', message: '请输入有效的邮箱地址' },
|
|
]}
|
|
>
|
|
<Input placeholder="member@example.com" />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="role"
|
|
label="角色"
|
|
initialValue="member"
|
|
rules={[{ required: true, message: '请选择角色' }]}
|
|
>
|
|
<Select
|
|
options={[
|
|
{ value: 'admin', label: '管理员 - 可以管理成员和项目' },
|
|
{ value: 'member', label: '成员 - 可以创建和管理项目' },
|
|
{ value: 'viewer', label: '访客 - 只读权限' },
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default InviteMemberModal;
|