326 lines
11 KiB
TypeScript
326 lines
11 KiB
TypeScript
'use client'
|
|
import { useState, useEffect } from 'react'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { useForm } from 'react-hook-form'
|
|
import * as z from 'zod'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
|
|
import { User, Lock, Search, Trash2, Plus, X } from 'lucide-react'
|
|
import { toast, Toaster } from 'sonner'
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"
|
|
|
|
// 用户类型定义
|
|
interface UserData {
|
|
id: string
|
|
account: string
|
|
createdAt: string
|
|
}
|
|
|
|
const formSchema = z.object({
|
|
account: z.string().min(3, '账号至少需要3个字符'),
|
|
password: z.string().min(6, '密码至少需要6个字符'),
|
|
confirmPassword: z.string().min(6, '密码至少需要6个字符'),
|
|
}).refine((data) => data.password === data.confirmPassword, {
|
|
message: "密码不匹配",
|
|
path: ["confirmPassword"],
|
|
})
|
|
|
|
|
|
export default function Settings() {
|
|
const [loading, setLoading] = useState(false)
|
|
const [users, setUsers] = useState<UserData[]>([])
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
const [isCreateMode, setIsCreateMode] = useState(false)
|
|
|
|
const form = useForm<z.infer<typeof formSchema>>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
account: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
},
|
|
})
|
|
|
|
|
|
// 获取用户列表
|
|
const fetchUsers = async () => {
|
|
try {
|
|
const response = await fetch('/api/users')
|
|
const data = await response.json()
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || '获取用户列表失败')
|
|
}
|
|
|
|
if (data.success) {
|
|
setUsers(data.users)
|
|
}
|
|
} catch (error) {
|
|
toast.error("获取用户列表失败", {
|
|
description: error instanceof Error ? error.message : "服务器连接失败，请稍后重试",
|
|
})
|
|
}
|
|
}
|
|
|
|
// 初始加载用户列表
|
|
useEffect(() => {
|
|
fetchUsers()
|
|
}, [])
|
|
|
|
// 创建用户
|
|
async function onSubmit(values: z.infer<typeof formSchema>) {
|
|
setLoading(true)
|
|
try {
|
|
const response = await fetch('/api/users', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
account: values.account,
|
|
password: values.password,
|
|
}),
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || '创建用户失败')
|
|
}
|
|
|
|
if (data.success) {
|
|
toast.success("用户创建成功", {
|
|
description: "新账户已成功添加",
|
|
})
|
|
form.reset()
|
|
setIsCreateMode(false)
|
|
fetchUsers() // 刷新用户列表
|
|
}
|
|
} catch (error) {
|
|
toast.error("创建用户失败", {
|
|
description: error instanceof Error ? error.message : "服务器连接失败，请稍后重试",
|
|
})
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
// 删除用户
|
|
const handleDeleteUser = async (userId: number) => {
|
|
|
|
if (!confirm('确定要删除这个用户吗？此操作不可恢复。')) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
// 使用查询参数传递ID
|
|
const response = await fetch(`/api/users?id=${userId}`, {
|
|
method: 'DELETE',
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || '删除用户失败')
|
|
}
|
|
|
|
if (data.success) {
|
|
toast.success("用户删除成功", {
|
|
description: "用户账户已删除",
|
|
})
|
|
fetchUsers() // 刷新用户列表
|
|
}
|
|
} catch (error) {
|
|
toast.error("删除用户失败", {
|
|
description: error instanceof Error ? error.message : "服务器连接失败，请稍后重试",
|
|
})
|
|
}
|
|
}
|
|
|
|
// 过滤用户列表
|
|
const filteredUsers = users.filter(user =>
|
|
user.account.toLowerCase().includes(searchTerm.toLowerCase())
|
|
)
|
|
|
|
return (
|
|
<div className="bg-white p-4 md:p-8">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h1 className="text-3xl font-bold">用户管理</h1>
|
|
<Button onClick={() => setIsCreateMode(!isCreateMode)}>
|
|
{isCreateMode ? (
|
|
<>
|
|
<X className="mr-2 h-4 w-4" /> 取消
|
|
</>
|
|
) : (
|
|
<>
|
|
<Plus className="mr-2 h-4 w-4" /> 添加用户
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
{isCreateMode && (
|
|
<Card className="mb-6">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">添加用户账号</CardTitle>
|
|
<CardDescription>创建新的系统用户账户</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="account"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>账号</FormLabel>
|
|
<FormControl>
|
|
<div className="relative">
|
|
<User className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="请输入需要添加的账号"
|
|
className="pl-8"
|
|
{...field}
|
|
/>
|
|
</div>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="password"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>密码</FormLabel>
|
|
<FormControl>
|
|
<div className="relative">
|
|
<Lock className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
className="pl-8"
|
|
{...field}
|
|
/>
|
|
</div>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="confirmPassword"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>确认密码</FormLabel>
|
|
<FormControl>
|
|
<div className="relative">
|
|
<Lock className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
type="password"
|
|
placeholder="请再次输入密码"
|
|
className="pl-8"
|
|
{...field}
|
|
/>
|
|
</div>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="submit"
|
|
disabled={loading}
|
|
>
|
|
{loading ? (
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
|
|
创建中...
|
|
</div>
|
|
) : (
|
|
'创建用户'
|
|
)}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => setIsCreateMode(false)}
|
|
>
|
|
取消
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* 用户列表直接显示在页面上 */}
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h2 className="text-2xl font-semibold">用户列表</h2>
|
|
<p className="text-muted-foreground">管理系统中的所有用户账户</p>
|
|
</div>
|
|
|
|
<div className="relative max-w-sm mt-4">
|
|
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="搜索用户..."
|
|
className="pl-8"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="border rounded-lg">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>账号</TableHead>
|
|
<TableHead>创建时间</TableHead>
|
|
<TableHead className="text-right">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredUsers.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={3} className="text-center py-4">
|
|
暂无用户数据
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredUsers.map((user) => (
|
|
<TableRow key={user.id}>
|
|
<TableCell className="font-medium">{user.account}</TableCell>
|
|
<TableCell>{new Date(user.createdAt).toLocaleDateString()}</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex justify-end">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-5 border-0 hover:bg-transparent"
|
|
onClick={() => handleDeleteUser(Number(user.id))}
|
|
><Trash2 className="h-4 w-4" /></Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Toaster richColors />
|
|
</div>
|
|
)
|
|
} |