|
|
@@ -1,34 +1,65 @@
|
|
|
import React, { useState } from 'react';
|
|
|
-import {
|
|
|
- Button, Table, Space, Form, Input, Select, Modal, Card, Typography, Tag, Popconfirm,
|
|
|
- App
|
|
|
-} from 'antd';
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
|
-import dayjs from 'dayjs';
|
|
|
-import { roleClient, userClient } from '@/client/api';
|
|
|
+import { format } from 'date-fns';
|
|
|
+import { Plus, Search, Edit, Trash2, User, Mail, Phone } from 'lucide-react';
|
|
|
+import { userClient, roleClient } from '@/client/api';
|
|
|
import type { InferResponseType, InferRequestType } from 'hono/client';
|
|
|
+import { Button } from '@/client/components/ui/button';
|
|
|
+import { Input } from '@/client/components/ui/input';
|
|
|
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
|
|
|
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/client/components/ui/table';
|
|
|
+import { Badge } from '@/client/components/ui/badge';
|
|
|
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
|
|
|
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/client/components/ui/form';
|
|
|
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/client/components/ui/select';
|
|
|
+import { useForm } from 'react-hook-form';
|
|
|
+import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
+import { z } from 'zod';
|
|
|
+import { toast } from 'sonner';
|
|
|
+import { Skeleton } from '@/client/components/ui/skeleton';
|
|
|
+import { Switch } from '@/client/components/ui/switch';
|
|
|
+import { Label } from '@/client/components/ui/label';
|
|
|
|
|
|
type UserListResponse = InferResponseType<typeof userClient.$get, 200>;
|
|
|
-type RoleListResponse = InferResponseType<typeof roleClient.$get, 200>;
|
|
|
-type CreateRoleRequest = InferRequestType<typeof roleClient.$post>['json'];
|
|
|
-type UserDetailResponse = InferResponseType<typeof userClient[':id']['$get'], 200>;
|
|
|
type CreateUserRequest = InferRequestType<typeof userClient.$post>['json'];
|
|
|
type UpdateUserRequest = InferRequestType<typeof userClient[':id']['$put']>['json'];
|
|
|
|
|
|
-const { Title } = Typography;
|
|
|
+// 表单验证Schema
|
|
|
+const userFormSchema = z.object({
|
|
|
+ username: z.string().min(3, '用户名至少3个字符'),
|
|
|
+ nickname: z.string().optional(),
|
|
|
+ email: z.string().email('请输入有效的邮箱地址').optional().or(z.literal('')),
|
|
|
+ phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号').optional().or(z.literal('')),
|
|
|
+ name: z.string().optional(),
|
|
|
+ password: z.string().min(6, '密码至少6个字符').optional(),
|
|
|
+ isDisabled: z.boolean().default(false),
|
|
|
+});
|
|
|
+
|
|
|
+type UserFormData = z.infer<typeof userFormSchema>;
|
|
|
|
|
|
-// 用户管理页面
|
|
|
export const UsersPage = () => {
|
|
|
- const { message } = App.useApp();
|
|
|
const [searchParams, setSearchParams] = useState({
|
|
|
page: 1,
|
|
|
limit: 10,
|
|
|
search: ''
|
|
|
});
|
|
|
- const [modalVisible, setModalVisible] = useState(false);
|
|
|
- const [modalTitle, setModalTitle] = useState('');
|
|
|
+ const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
const [editingUser, setEditingUser] = useState<any>(null);
|
|
|
- const [form] = Form.useForm();
|
|
|
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
|
+ const [userToDelete, setUserToDelete] = useState<number | null>(null);
|
|
|
+
|
|
|
+ const form = useForm<UserFormData>({
|
|
|
+ resolver: zodResolver(userFormSchema),
|
|
|
+ defaultValues: {
|
|
|
+ username: '',
|
|
|
+ nickname: '',
|
|
|
+ email: '',
|
|
|
+ phone: '',
|
|
|
+ name: '',
|
|
|
+ password: '',
|
|
|
+ isDisabled: false,
|
|
|
+ },
|
|
|
+ });
|
|
|
|
|
|
const { data: usersData, isLoading, refetch } = useQuery({
|
|
|
queryKey: ['users', searchParams],
|
|
|
@@ -48,295 +79,418 @@ export const UsersPage = () => {
|
|
|
});
|
|
|
|
|
|
const users = usersData?.data || [];
|
|
|
- const pagination = {
|
|
|
- current: searchParams.page,
|
|
|
- pageSize: searchParams.limit,
|
|
|
- total: usersData?.pagination?.total || 0
|
|
|
- };
|
|
|
+ const totalCount = usersData?.pagination?.total || 0;
|
|
|
|
|
|
// 处理搜索
|
|
|
- const handleSearch = (values: any) => {
|
|
|
- setSearchParams(prev => ({
|
|
|
- ...prev,
|
|
|
- search: values.search || '',
|
|
|
- page: 1
|
|
|
- }));
|
|
|
+ const handleSearch = (e: React.FormEvent) => {
|
|
|
+ e.preventDefault();
|
|
|
+ setSearchParams(prev => ({ ...prev, page: 1 }));
|
|
|
};
|
|
|
|
|
|
- // 处理分页变化
|
|
|
- const handleTableChange = (newPagination: any) => {
|
|
|
- setSearchParams(prev => ({
|
|
|
- ...prev,
|
|
|
- page: newPagination.current,
|
|
|
- limit: newPagination.pageSize
|
|
|
- }));
|
|
|
+ // 处理分页
|
|
|
+ const handlePageChange = (page: number, limit: number) => {
|
|
|
+ setSearchParams(prev => ({ ...prev, page, limit }));
|
|
|
};
|
|
|
|
|
|
- // 打开创建用户模态框
|
|
|
- const showCreateModal = () => {
|
|
|
- setModalTitle('创建用户');
|
|
|
+ // 打开创建用户对话框
|
|
|
+ const handleCreateUser = () => {
|
|
|
setEditingUser(null);
|
|
|
- form.resetFields();
|
|
|
- setModalVisible(true);
|
|
|
+ form.reset({
|
|
|
+ username: '',
|
|
|
+ nickname: '',
|
|
|
+ email: '',
|
|
|
+ phone: '',
|
|
|
+ name: '',
|
|
|
+ password: '',
|
|
|
+ isDisabled: false,
|
|
|
+ });
|
|
|
+ setIsModalOpen(true);
|
|
|
};
|
|
|
|
|
|
- // 打开编辑用户模态框
|
|
|
- const showEditModal = (user: any) => {
|
|
|
- setModalTitle('编辑用户');
|
|
|
+ // 打开编辑用户对话框
|
|
|
+ const handleEditUser = (user: any) => {
|
|
|
setEditingUser(user);
|
|
|
- form.setFieldsValue(user);
|
|
|
- setModalVisible(true);
|
|
|
+ form.reset({
|
|
|
+ username: user.username,
|
|
|
+ nickname: user.nickname || '',
|
|
|
+ email: user.email || '',
|
|
|
+ phone: user.phone || '',
|
|
|
+ name: user.name || '',
|
|
|
+ isDisabled: user.isDisabled === 1,
|
|
|
+ });
|
|
|
+ setIsModalOpen(true);
|
|
|
};
|
|
|
|
|
|
- // 处理模态框确认
|
|
|
- const handleModalOk = async () => {
|
|
|
+ // 处理表单提交
|
|
|
+ const handleSubmit = async (data: UserFormData) => {
|
|
|
try {
|
|
|
- const values = await form.validateFields();
|
|
|
-
|
|
|
if (editingUser) {
|
|
|
// 编辑用户
|
|
|
const res = await userClient[':id']['$put']({
|
|
|
param: { id: editingUser.id },
|
|
|
- json: values
|
|
|
+ json: {
|
|
|
+ ...data,
|
|
|
+ isDisabled: data.isDisabled ? 1 : 0,
|
|
|
+ } as UpdateUserRequest
|
|
|
});
|
|
|
if (res.status !== 200) {
|
|
|
throw new Error('更新用户失败');
|
|
|
}
|
|
|
- message.success('用户更新成功');
|
|
|
+ toast.success('用户更新成功');
|
|
|
} else {
|
|
|
// 创建用户
|
|
|
const res = await userClient.$post({
|
|
|
- json: values
|
|
|
+ json: {
|
|
|
+ ...data,
|
|
|
+ isDisabled: data.isDisabled ? 1 : 0,
|
|
|
+ } as CreateUserRequest
|
|
|
});
|
|
|
if (res.status !== 201) {
|
|
|
throw new Error('创建用户失败');
|
|
|
}
|
|
|
- message.success('用户创建成功');
|
|
|
+ toast.success('用户创建成功');
|
|
|
}
|
|
|
|
|
|
- setModalVisible(false);
|
|
|
- form.resetFields();
|
|
|
- refetch(); // 刷新用户列表
|
|
|
+ setIsModalOpen(false);
|
|
|
+ refetch();
|
|
|
} catch (error) {
|
|
|
- console.error('表单提交失败:', error);
|
|
|
- message.error('操作失败，请重试');
|
|
|
+ console.error('操作失败:', error);
|
|
|
+ toast.error('操作失败，请重试');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 处理删除用户
|
|
|
- const handleDelete = async (id: number) => {
|
|
|
+ const handleDeleteUser = (id: number) => {
|
|
|
+ setUserToDelete(id);
|
|
|
+ setDeleteDialogOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ const confirmDelete = async () => {
|
|
|
+ if (!userToDelete) return;
|
|
|
+
|
|
|
try {
|
|
|
const res = await userClient[':id']['$delete']({
|
|
|
- param: { id }
|
|
|
+ param: { id: userToDelete }
|
|
|
});
|
|
|
if (res.status !== 204) {
|
|
|
throw new Error('删除用户失败');
|
|
|
}
|
|
|
- message.success('用户删除成功');
|
|
|
- refetch(); // 刷新用户列表
|
|
|
+ toast.success('用户删除成功');
|
|
|
+ refetch();
|
|
|
} catch (error) {
|
|
|
console.error('删除用户失败:', error);
|
|
|
- message.error('删除失败，请重试');
|
|
|
+ toast.error('删除失败，请重试');
|
|
|
+ } finally {
|
|
|
+ setDeleteDialogOpen(false);
|
|
|
+ setUserToDelete(null);
|
|
|
}
|
|
|
};
|
|
|
-
|
|
|
- const columns = [
|
|
|
- {
|
|
|
- title: '用户名',
|
|
|
- dataIndex: 'username',
|
|
|
- key: 'username',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '昵称',
|
|
|
- dataIndex: 'nickname',
|
|
|
- key: 'nickname',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '邮箱',
|
|
|
- dataIndex: 'email',
|
|
|
- key: 'email',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '真实姓名',
|
|
|
- dataIndex: 'name',
|
|
|
- key: 'name',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '角色',
|
|
|
- dataIndex: 'role',
|
|
|
- key: 'role',
|
|
|
- render: (role: string) => (
|
|
|
- <Tag color={role === 'admin' ? 'red' : 'blue'}>
|
|
|
- {role === 'admin' ? '管理员' : '普通用户'}
|
|
|
- </Tag>
|
|
|
- ),
|
|
|
- },
|
|
|
- {
|
|
|
- title: '创建时间',
|
|
|
- dataIndex: 'created_at',
|
|
|
- key: 'created_at',
|
|
|
- render: (date: string) => dayjs(date).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- key: 'action',
|
|
|
- render: (_: any, record: any) => (
|
|
|
- <Space size="middle">
|
|
|
- <Button type="link" onClick={() => showEditModal(record)}>
|
|
|
- 编辑
|
|
|
+
|
|
|
+ // 渲染加载骨架
|
|
|
+ if (isLoading) {
|
|
|
+ return (
|
|
|
+ <div className="space-y-4">
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <h1 className="text-2xl font-bold">用户管理</h1>
|
|
|
+ <Button disabled>
|
|
|
+ <Plus className="mr-2 h-4 w-4" />
|
|
|
+ 创建用户
|
|
|
</Button>
|
|
|
- <Popconfirm
|
|
|
- title="确定要删除此用户吗？"
|
|
|
- onConfirm={() => handleDelete(record.id)}
|
|
|
- okText="确定"
|
|
|
- cancelText="取消"
|
|
|
- >
|
|
|
- <Button type="link" danger>
|
|
|
- 删除
|
|
|
- </Button>
|
|
|
- </Popconfirm>
|
|
|
- </Space>
|
|
|
- ),
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <Skeleton className="h-6 w-1/4" />
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <div className="space-y-2">
|
|
|
+ <Skeleton className="h-4 w-full" />
|
|
|
+ <Skeleton className="h-4 w-full" />
|
|
|
+ <Skeleton className="h-4 w-full" />
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
return (
|
|
|
- <div>
|
|
|
- <div className="mb-6 flex justify-between items-center">
|
|
|
- <Title level={2}>用户管理</Title>
|
|
|
+ <div className="space-y-4">
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <h1 className="text-2xl font-bold">用户管理</h1>
|
|
|
+ <Button onClick={handleCreateUser}>
|
|
|
+ <Plus className="mr-2 h-4 w-4" />
|
|
|
+ 创建用户
|
|
|
+ </Button>
|
|
|
</div>
|
|
|
- <Card className="shadow-md transition-all duration-300 hover:shadow-lg">
|
|
|
- <Form layout="inline" onFinish={handleSearch} style={{ marginBottom: 16, padding: '16px 0' }}>
|
|
|
- <Form.Item name="search" label="搜索">
|
|
|
- <Input placeholder="用户名/昵称/邮箱" allowClear />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item>
|
|
|
- <Space>
|
|
|
- <Button type="primary" htmlType="submit">
|
|
|
+
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle>用户列表</CardTitle>
|
|
|
+ <CardDescription>
|
|
|
+ 管理系统中的所有用户，共 {totalCount} 位用户
|
|
|
+ </CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <div className="mb-4">
|
|
|
+ <form onSubmit={handleSearch} className="flex gap-2">
|
|
|
+ <div className="relative flex-1 max-w-sm">
|
|
|
+ <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
|
+ <Input
|
|
|
+ placeholder="搜索用户名、昵称或邮箱..."
|
|
|
+ value={searchParams.search}
|
|
|
+ onChange={(e) => setSearchParams(prev => ({ ...prev, search: e.target.value }))}
|
|
|
+ className="pl-8"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <Button type="submit" variant="outline">
|
|
|
搜索
|
|
|
</Button>
|
|
|
- <Button type="primary" onClick={showCreateModal}>
|
|
|
- 创建用户
|
|
|
- </Button>
|
|
|
- </Space>
|
|
|
- </Form.Item>
|
|
|
- </Form>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="rounded-md border">
|
|
|
+ <Table>
|
|
|
+ <TableHeader>
|
|
|
+ <TableRow>
|
|
|
+ <TableHead>用户名</TableHead>
|
|
|
+ <TableHead>昵称</TableHead>
|
|
|
+ <TableHead>邮箱</TableHead>
|
|
|
+ <TableHead>真实姓名</TableHead>
|
|
|
+ <TableHead>角色</TableHead>
|
|
|
+ <TableHead>状态</TableHead>
|
|
|
+ <TableHead>创建时间</TableHead>
|
|
|
+ <TableHead className="text-right">操作</TableHead>
|
|
|
+ </TableRow>
|
|
|
+ </TableHeader>
|
|
|
+ <TableBody>
|
|
|
+ {users.map((user) => (
|
|
|
+ <TableRow key={user.id}>
|
|
|
+ <TableCell className="font-medium">{user.username}</TableCell>
|
|
|
+ <TableCell>{user.nickname || '-'}</TableCell>
|
|
|
+ <TableCell>{user.email || '-'}</TableCell>
|
|
|
+ <TableCell>{user.name || '-'}</TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Badge
|
|
|
+ variant={user.role === 'admin' ? 'destructive' : 'default'}
|
|
|
+ className="capitalize"
|
|
|
+ >
|
|
|
+ {user.role === 'admin' ? '管理员' : '普通用户'}
|
|
|
+ </Badge>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Badge
|
|
|
+ variant={user.isDisabled === 1 ? 'secondary' : 'default'}
|
|
|
+ >
|
|
|
+ {user.isDisabled === 1 ? '禁用' : '启用'}
|
|
|
+ </Badge>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ {format(new Date(user.createdAt), 'yyyy-MM-dd HH:mm')}
|
|
|
+ </TableCell>
|
|
|
+ <TableCell className="text-right">
|
|
|
+ <div className="flex justify-end gap-2">
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleEditUser(user)}
|
|
|
+ >
|
|
|
+ <Edit className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleDeleteUser(user.id)}
|
|
|
+ >
|
|
|
+ <Trash2 className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ))}
|
|
|
+ </TableBody>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
|
|
|
- <Table
|
|
|
- columns={columns}
|
|
|
- dataSource={users}
|
|
|
- loading={isLoading}
|
|
|
- rowKey="id"
|
|
|
- pagination={{
|
|
|
- ...pagination,
|
|
|
- showSizeChanger: true,
|
|
|
- showQuickJumper: true,
|
|
|
- showTotal: (total) => `共 ${total} 条记录`
|
|
|
- }}
|
|
|
- onChange={handleTableChange}
|
|
|
- bordered
|
|
|
- scroll={{ x: 'max-content' }}
|
|
|
- rowClassName={(record, index) => index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
|
|
|
- />
|
|
|
+ <div className="flex justify-between items-center mt-4">
|
|
|
+ <div className="text-sm text-muted-foreground">
|
|
|
+ 第 {searchParams.page} 页，共 {Math.ceil(totalCount / searchParams.limit)} 页
|
|
|
+ </div>
|
|
|
+ <div className="flex gap-2">
|
|
|
+ <Button
|
|
|
+ variant="outline"
|
|
|
+ size="sm"
|
|
|
+ disabled={searchParams.page <= 1}
|
|
|
+ onClick={() => handlePageChange(searchParams.page - 1, searchParams.limit)}
|
|
|
+ >
|
|
|
+ 上一页
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="outline"
|
|
|
+ size="sm"
|
|
|
+ disabled={searchParams.page >= Math.ceil(totalCount / searchParams.limit)}
|
|
|
+ onClick={() => handlePageChange(searchParams.page + 1, searchParams.limit)}
|
|
|
+ >
|
|
|
+ 下一页
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
</Card>
|
|
|
|
|
|
- {/* 创建/编辑用户模态框 */}
|
|
|
- <Modal
|
|
|
- title={modalTitle}
|
|
|
- open={modalVisible}
|
|
|
- onOk={handleModalOk}
|
|
|
- onCancel={() => {
|
|
|
- setModalVisible(false);
|
|
|
- form.resetFields();
|
|
|
- }}
|
|
|
- width={600}
|
|
|
- centered
|
|
|
- destroyOnClose
|
|
|
- maskClosable={false}
|
|
|
- >
|
|
|
- <Form
|
|
|
- form={form}
|
|
|
- layout="vertical"
|
|
|
- labelCol={{ span: 5 }}
|
|
|
- wrapperCol={{ span: 19 }}
|
|
|
- >
|
|
|
- <Form.Item
|
|
|
- name="username"
|
|
|
- label="用户名"
|
|
|
- required
|
|
|
- rules={[
|
|
|
- { required: true, message: '请输入用户名' },
|
|
|
- { min: 3, message: '用户名至少3个字符' }
|
|
|
- ]}
|
|
|
- >
|
|
|
- <Input placeholder="请输入用户名" />
|
|
|
- </Form.Item>
|
|
|
+ {/* 创建/编辑用户对话框 */}
|
|
|
+ <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
|
|
+ <DialogContent className="sm:max-w-[500px]">
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle>
|
|
|
+ {editingUser ? '编辑用户' : '创建用户'}
|
|
|
+ </DialogTitle>
|
|
|
+ <DialogDescription>
|
|
|
+ {editingUser ? '编辑现有用户信息' : '创建一个新的用户账户'}
|
|
|
+ </DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+
|
|
|
+ <Form {...form}>
|
|
|
+ <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="username"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>用户名</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入用户名" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="nickname"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>昵称</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入昵称" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="email"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>邮箱</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input type="email" placeholder="请输入邮箱" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
|
|
|
- <Form.Item
|
|
|
- name="nickname"
|
|
|
- label="昵称"
|
|
|
- rules={[{ required: false, message: '请输入昵称' }]}
|
|
|
- >
|
|
|
- <Input placeholder="请输入昵称" />
|
|
|
- </Form.Item>
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="phone"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>手机号</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入手机号" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
|
|
|
- <Form.Item
|
|
|
- name="email"
|
|
|
- label="邮箱"
|
|
|
- rules={[
|
|
|
- { required: false, message: '请输入邮箱' },
|
|
|
- { type: 'email', message: '请输入有效的邮箱地址' }
|
|
|
- ]}
|
|
|
- >
|
|
|
- <Input placeholder="请输入邮箱" />
|
|
|
- </Form.Item>
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="name"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>真实姓名</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入真实姓名" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
|
|
|
- <Form.Item
|
|
|
- name="phone"
|
|
|
- label="手机号"
|
|
|
- rules={[
|
|
|
- { required: false, message: '请输入手机号' },
|
|
|
- { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }
|
|
|
- ]}
|
|
|
- >
|
|
|
- <Input placeholder="请输入手机号" />
|
|
|
- </Form.Item>
|
|
|
+ {!editingUser && (
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="password"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>密码</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input type="password" placeholder="请输入密码" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ )}
|
|
|
|
|
|
- <Form.Item
|
|
|
- name="name"
|
|
|
- label="真实姓名"
|
|
|
- rules={[{ required: false, message: '请输入真实姓名' }]}
|
|
|
- >
|
|
|
- <Input placeholder="请输入真实姓名" />
|
|
|
- </Form.Item>
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="isDisabled"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
|
|
|
+ <div className="space-y-0.5">
|
|
|
+ <FormLabel className="text-base">用户状态</FormLabel>
|
|
|
+ <FormDescription>
|
|
|
+ 禁用后用户将无法登录系统
|
|
|
+ </FormDescription>
|
|
|
+ </div>
|
|
|
+ <FormControl>
|
|
|
+ <Switch
|
|
|
+ checked={field.value}
|
|
|
+ onCheckedChange={field.onChange}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
|
|
|
- {!editingUser && (
|
|
|
- <Form.Item
|
|
|
- name="password"
|
|
|
- label="密码"
|
|
|
- required
|
|
|
- rules={[
|
|
|
- { required: true, message: '请输入密码' },
|
|
|
- { min: 6, message: '密码至少6个字符' }
|
|
|
- ]}
|
|
|
- >
|
|
|
- <Input.Password placeholder="请输入密码" />
|
|
|
- </Form.Item>
|
|
|
- )}
|
|
|
+ <DialogFooter>
|
|
|
+ <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button type="submit">
|
|
|
+ {editingUser ? '更新用户' : '创建用户'}
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </form>
|
|
|
+ </Form>
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
|
|
|
- <Form.Item
|
|
|
- name="isDisabled"
|
|
|
- label="状态"
|
|
|
- required
|
|
|
- rules={[{ required: true, message: '请选择状态' }]}
|
|
|
- >
|
|
|
- <Select placeholder="请选择状态">
|
|
|
- <Select.Option value={0}>启用</Select.Option>
|
|
|
- <Select.Option value={1}>禁用</Select.Option>
|
|
|
- </Select>
|
|
|
- </Form.Item>
|
|
|
- </Form>
|
|
|
- </Modal>
|
|
|
+ {/* 删除确认对话框 */}
|
|
|
+ <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
|
|
+ <DialogContent>
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle>确认删除</DialogTitle>
|
|
|
+ <DialogDescription>
|
|
|
+ 确定要删除这个用户吗？此操作无法撤销。
|
|
|
+ </DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+ <DialogFooter>
|
|
|
+ <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button variant="destructive" onClick={confirmDelete}>
|
|
|
+ 删除
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
yourname