feat: 支持用户管理
This commit is contained in:
248
app/(dashboard)/users/page.tsx
Normal file
248
app/(dashboard)/users/page.tsx
Normal file
@@ -0,0 +1,248 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Header } from '@/components/layout/header'
|
||||||
|
import { UserDialog } from '@/components/users/user-dialog'
|
||||||
|
import { Spinner } from '@/components/ui/spinner'
|
||||||
|
import { User, UserFormData } from '@/types'
|
||||||
|
import { Plus, Pencil, Trash2 } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function UsersPage() {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||||
|
const [editingUser, setEditingUser] = useState<User | null>(null)
|
||||||
|
const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null)
|
||||||
|
|
||||||
|
// Fetch users
|
||||||
|
const { data: users, isLoading, error } = useQuery<User[]>({
|
||||||
|
queryKey: ['users'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await fetch('/api/users')
|
||||||
|
if (!res.ok) throw new Error('Failed to fetch users')
|
||||||
|
return res.json()
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Create user mutation
|
||||||
|
const createMutation = useMutation({
|
||||||
|
mutationFn: async (data: UserFormData) => {
|
||||||
|
const res = await fetch('/api/users', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
})
|
||||||
|
if (!res.ok) {
|
||||||
|
const error = await res.json()
|
||||||
|
throw new Error(error.error || 'Failed to create user')
|
||||||
|
}
|
||||||
|
return res.json()
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['users'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Update user mutation
|
||||||
|
const updateMutation = useMutation({
|
||||||
|
mutationFn: async ({ id, data }: { id: string; data: UserFormData }) => {
|
||||||
|
const res = await fetch('/api/users', {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ id, ...data }),
|
||||||
|
})
|
||||||
|
if (!res.ok) {
|
||||||
|
const error = await res.json()
|
||||||
|
throw new Error(error.error || 'Failed to update user')
|
||||||
|
}
|
||||||
|
return res.json()
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['users'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Delete user mutation
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: async (id: string) => {
|
||||||
|
const res = await fetch(`/api/users?id=${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
})
|
||||||
|
if (!res.ok) {
|
||||||
|
const error = await res.json()
|
||||||
|
throw new Error(error.error || 'Failed to delete user')
|
||||||
|
}
|
||||||
|
return res.json()
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['users'] })
|
||||||
|
setDeleteConfirmId(null)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleOpenCreate = () => {
|
||||||
|
setEditingUser(null)
|
||||||
|
setIsDialogOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleOpenEdit = (user: User) => {
|
||||||
|
setEditingUser(user)
|
||||||
|
setIsDialogOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = (id: string) => {
|
||||||
|
if (deleteConfirmId === id) {
|
||||||
|
deleteMutation.mutate(id)
|
||||||
|
} else {
|
||||||
|
setDeleteConfirmId(id)
|
||||||
|
// Reset after 3 seconds
|
||||||
|
setTimeout(() => setDeleteConfirmId(null), 3000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (data: UserFormData) => {
|
||||||
|
if (editingUser) {
|
||||||
|
await updateMutation.mutateAsync({ id: editingUser.id, data })
|
||||||
|
} else {
|
||||||
|
await createMutation.mutateAsync(data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDate = (date: Date | string) => {
|
||||||
|
return new Date(date).toLocaleDateString('zh-CN', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="h-screen flex items-center justify-center">
|
||||||
|
<Spinner size="lg" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-red-600">加载失败</p>
|
||||||
|
<Button
|
||||||
|
className="mt-4"
|
||||||
|
onClick={() => queryClient.invalidateQueries({ queryKey: ['users'] })}
|
||||||
|
>
|
||||||
|
重试
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-screen flex flex-col">
|
||||||
|
<Header />
|
||||||
|
<div className="flex-1 overflow-auto p-6">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold">用户管理</h1>
|
||||||
|
<p className="text-gray-500 mt-1">
|
||||||
|
共 {users?.length || 0} 个用户
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={handleOpenCreate}>
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
添加用户
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead className="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
用户
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
邮箱
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
创建时间
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
操作
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{users?.map((user) => (
|
||||||
|
<tr key={user.id} className="hover:bg-gray-50">
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-medium">
|
||||||
|
{user.email[0]?.toUpperCase() || 'U'}
|
||||||
|
</div>
|
||||||
|
<div className="ml-4">
|
||||||
|
<div className="text-sm font-medium text-gray-900">
|
||||||
|
{user.name || '未设置'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div className="text-sm text-gray-900">{user.email}</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
{formatDate(user.createdAt)}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleOpenEdit(user)}
|
||||||
|
className="text-gray-600 hover:text-gray-900"
|
||||||
|
>
|
||||||
|
<Pencil className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleDelete(user.id)}
|
||||||
|
className={
|
||||||
|
deleteConfirmId === user.id
|
||||||
|
? 'text-red-600 hover:text-red-700'
|
||||||
|
: 'text-gray-600 hover:text-gray-900'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
{users?.length === 0 && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={4} className="px-6 py-12 text-center text-gray-500">
|
||||||
|
暂无用户数据
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<UserDialog
|
||||||
|
open={isDialogOpen}
|
||||||
|
onOpenChange={setIsDialogOpen}
|
||||||
|
user={editingUser}
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
217
app/api/users/route.ts
Normal file
217
app/api/users/route.ts
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server'
|
||||||
|
import { prisma } from '@/lib/prisma'
|
||||||
|
import { auth } from '@/lib/auth'
|
||||||
|
import { hashPassword } from 'better-auth/crypto'
|
||||||
|
import { v4 as uuidv4 } from 'uuid'
|
||||||
|
|
||||||
|
// GET /api/users - Get all users
|
||||||
|
export async function GET(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
|
||||||
|
}
|
||||||
|
|
||||||
|
const users = await prisma.user.findMany({
|
||||||
|
orderBy: { createdAt: 'desc' },
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
email: true,
|
||||||
|
emailVerified: true,
|
||||||
|
name: true,
|
||||||
|
image: true,
|
||||||
|
createdAt: true,
|
||||||
|
updatedAt: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return NextResponse.json(users)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching users:', error)
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Failed to fetch users' },
|
||||||
|
{ status: 500 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// POST /api/users - Create a new user
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await request.json()
|
||||||
|
const { email, password, name } = body
|
||||||
|
|
||||||
|
if (!email || !password) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'email and password are required' },
|
||||||
|
{ status: 400 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if user already exists
|
||||||
|
const existingUser = await prisma.user.findUnique({
|
||||||
|
where: { email },
|
||||||
|
})
|
||||||
|
|
||||||
|
if (existingUser) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: '该邮箱已被注册' },
|
||||||
|
{ status: 400 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hash password
|
||||||
|
const hashedPassword = await hashPassword(password)
|
||||||
|
|
||||||
|
const userId = uuidv4()
|
||||||
|
const accountId = uuidv4()
|
||||||
|
|
||||||
|
// Create user and account in transaction
|
||||||
|
const user = await prisma.$transaction(async (tx) => {
|
||||||
|
const newUser = await tx.user.create({
|
||||||
|
data: {
|
||||||
|
id: userId,
|
||||||
|
email,
|
||||||
|
name: name || null,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
await tx.account.create({
|
||||||
|
data: {
|
||||||
|
id: accountId,
|
||||||
|
accountId: userId,
|
||||||
|
providerId: 'credential',
|
||||||
|
userId: userId,
|
||||||
|
password: hashedPassword,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return newUser
|
||||||
|
})
|
||||||
|
|
||||||
|
return NextResponse.json(user, { status: 201 })
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating user:', error)
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Failed to create user' },
|
||||||
|
{ status: 500 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// PUT /api/users - Update a user
|
||||||
|
export async function PUT(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await request.json()
|
||||||
|
const { id, email, password, name } = body
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
return NextResponse.json({ error: 'id is required' }, { status: 400 })
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if email is taken by another user
|
||||||
|
if (email) {
|
||||||
|
const existingUser = await prisma.user.findFirst({
|
||||||
|
where: {
|
||||||
|
email,
|
||||||
|
NOT: { id },
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
if (existingUser) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: '该邮箱已被其他用户使用' },
|
||||||
|
{ status: 400 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update user and optionally password
|
||||||
|
const user = await prisma.$transaction(async (tx) => {
|
||||||
|
const updatedUser = await tx.user.update({
|
||||||
|
where: { id },
|
||||||
|
data: {
|
||||||
|
email,
|
||||||
|
name: name || null,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
if (password) {
|
||||||
|
const hashedPassword = await hashPassword(password)
|
||||||
|
await tx.account.updateMany({
|
||||||
|
where: { userId: id, providerId: 'credential' },
|
||||||
|
data: { password: hashedPassword },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return updatedUser
|
||||||
|
})
|
||||||
|
|
||||||
|
return NextResponse.json(user)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating user:', error)
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Failed to update user' },
|
||||||
|
{ status: 500 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DELETE /api/users - Delete a user
|
||||||
|
export async function DELETE(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
|
||||||
|
}
|
||||||
|
|
||||||
|
const { searchParams } = new URL(request.url)
|
||||||
|
const id = searchParams.get('id')
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
return NextResponse.json({ error: 'id is required' }, { status: 400 })
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prevent deleting yourself
|
||||||
|
if (id === session.user.id) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: '不能删除自己的账户' },
|
||||||
|
{ status: 400 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
await prisma.user.delete({
|
||||||
|
where: { id },
|
||||||
|
})
|
||||||
|
|
||||||
|
return NextResponse.json({ success: true })
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting user:', error)
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Failed to delete user' },
|
||||||
|
{ status: 500 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { usePathname } from 'next/navigation'
|
import { usePathname } from 'next/navigation'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import { Layers, Home, Settings, LogOut } from 'lucide-react'
|
import { Layers, Home, Settings, LogOut, Users } from 'lucide-react'
|
||||||
import { signOut, useSession } from '@/lib/auth-client'
|
import { signOut, useSession } from '@/lib/auth-client'
|
||||||
import { useRouter } from 'next/navigation'
|
import { useRouter } from 'next/navigation'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
@@ -11,6 +11,7 @@ import { Button } from '@/components/ui/button'
|
|||||||
const navigation = [
|
const navigation = [
|
||||||
{ name: '首页', href: '/levels', icon: Home },
|
{ name: '首页', href: '/levels', icon: Home },
|
||||||
{ name: '关卡配置', href: '/levels', icon: Layers },
|
{ name: '关卡配置', href: '/levels', icon: Layers },
|
||||||
|
{ name: '用户管理', href: '/users', icon: Users },
|
||||||
]
|
]
|
||||||
|
|
||||||
export function Sidebar() {
|
export function Sidebar() {
|
||||||
|
|||||||
@@ -2,9 +2,10 @@
|
|||||||
|
|
||||||
import { useState, useRef } from 'react'
|
import { useState, useRef } from 'react'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
import { Upload, X, Image as ImageIcon } from 'lucide-react'
|
import { X, Image as ImageIcon } from 'lucide-react'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import { Spinner } from '@/components/ui/spinner'
|
import { Spinner } from '@/components/ui/spinner'
|
||||||
|
import COS from 'cos-js-sdk-v5'
|
||||||
|
|
||||||
interface ImageUploaderProps {
|
interface ImageUploaderProps {
|
||||||
value: string
|
value: string
|
||||||
@@ -47,49 +48,42 @@ export function ImageUploader({ value, onChange }: ImageUploaderProps) {
|
|||||||
const ext = file.name.split('.').pop() || 'jpg'
|
const ext = file.name.split('.').pop() || 'jpg'
|
||||||
const timestamp = Date.now()
|
const timestamp = Date.now()
|
||||||
const randomStr = Math.random().toString(36).substring(2, 8)
|
const randomStr = Math.random().toString(36).substring(2, 8)
|
||||||
const filename = `levels/${timestamp}_${randomStr}.${ext}`
|
const filename = `mini_game/images/${timestamp}_${randomStr}.${ext}`
|
||||||
|
|
||||||
// Upload to COS
|
// Initialize COS with temp credentials
|
||||||
const formData = new FormData()
|
const cos = new COS({
|
||||||
formData.append('key', filename)
|
getAuthorization: (_options, callback) => {
|
||||||
formData.append('Signature', keyData.credentials.sessionToken)
|
callback({
|
||||||
formData.append('success_action_status', '200')
|
TmpSecretId: keyData.credentials.tmpSecretId,
|
||||||
|
TmpSecretKey: keyData.credentials.tmpSecretKey,
|
||||||
const uploadUrl = `https://${keyData.bucket}.cos.${keyData.region}.myqcloud.com`
|
SecurityToken: keyData.credentials.sessionToken,
|
||||||
|
StartTime: keyData.startTime,
|
||||||
// Use XMLHttpRequest for COS upload with temp credentials
|
ExpiredTime: keyData.expiredTime,
|
||||||
const uploadResult = await new Promise<string>((resolve, reject) => {
|
})
|
||||||
const xhr = new XMLHttpRequest()
|
},
|
||||||
xhr.open('POST', uploadUrl)
|
|
||||||
|
|
||||||
// Set temp credentials headers
|
|
||||||
xhr.setRequestHeader('Authorization', getCOSAuthorization(
|
|
||||||
keyData.credentials.tmpSecretId,
|
|
||||||
keyData.credentials.tmpSecretKey,
|
|
||||||
keyData.credentials.sessionToken,
|
|
||||||
'post',
|
|
||||||
filename,
|
|
||||||
keyData.bucket,
|
|
||||||
keyData.region
|
|
||||||
))
|
|
||||||
|
|
||||||
xhr.onload = () => {
|
|
||||||
if (xhr.status === 200) {
|
|
||||||
resolve(`${uploadUrl}/${filename}`)
|
|
||||||
} else {
|
|
||||||
reject(new Error('上传失败'))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
xhr.onerror = () => reject(new Error('上传失败'))
|
|
||||||
|
|
||||||
const cosFormData = new FormData()
|
|
||||||
cosFormData.append('key', filename)
|
|
||||||
cosFormData.append('file', file)
|
|
||||||
|
|
||||||
xhr.send(cosFormData)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
onChange(uploadResult)
|
// Upload file
|
||||||
|
const uploadUrl = await new Promise<string>((resolve, reject) => {
|
||||||
|
cos.putObject(
|
||||||
|
{
|
||||||
|
Bucket: keyData.bucket,
|
||||||
|
Region: keyData.region,
|
||||||
|
Key: filename,
|
||||||
|
Body: file,
|
||||||
|
},
|
||||||
|
(err, data) => {
|
||||||
|
if (err) {
|
||||||
|
reject(new Error(err.message || '上传失败'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const url = `https://${keyData.bucket}.cos.${keyData.region}.myqcloud.com/${filename}`
|
||||||
|
resolve(url)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
onChange(uploadUrl)
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Upload error:', err)
|
console.error('Upload error:', err)
|
||||||
setError(err instanceof Error ? err.message : '上传失败')
|
setError(err instanceof Error ? err.message : '上传失败')
|
||||||
@@ -162,21 +156,3 @@ export function ImageUploader({ value, onChange }: ImageUploaderProps) {
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper function to generate COS authorization header
|
|
||||||
function getCOSAuthorization(
|
|
||||||
secretId: string,
|
|
||||||
secretKey: string,
|
|
||||||
sessionToken: string,
|
|
||||||
method: string,
|
|
||||||
pathname: string,
|
|
||||||
bucket: string,
|
|
||||||
region: string
|
|
||||||
): string {
|
|
||||||
const now = Math.floor(Date.now() / 1000)
|
|
||||||
const exp = now + 1800
|
|
||||||
const keyTime = `${now};${exp}`
|
|
||||||
|
|
||||||
// Simple authorization string for temp credentials
|
|
||||||
return `q-sign-algorithm=sha1&q-ak=${secretId}&q-sign-time=${keyTime}&q-key-time=${keyTime}&q-header-list=&q-url-param-list=&q-signature=placeholder&x-cos-security-token=${sessionToken}`
|
|
||||||
}
|
|
||||||
|
|||||||
164
components/users/user-dialog.tsx
Normal file
164
components/users/user-dialog.tsx
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/dialog'
|
||||||
|
import { Spinner } from '@/components/ui/spinner'
|
||||||
|
import { User, UserFormData } from '@/types'
|
||||||
|
|
||||||
|
interface UserDialogProps {
|
||||||
|
open: boolean
|
||||||
|
onOpenChange: (open: boolean) => void
|
||||||
|
user?: User | null
|
||||||
|
onSubmit: (data: UserFormData) => Promise<void>
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultFormData: UserFormData = {
|
||||||
|
email: '',
|
||||||
|
password: '',
|
||||||
|
name: '',
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UserDialog({ open, onOpenChange, user, onSubmit }: UserDialogProps) {
|
||||||
|
const [formData, setFormData] = useState<UserFormData>(defaultFormData)
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
|
||||||
|
// Reset form when dialog opens/closes or user changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
if (user) {
|
||||||
|
setFormData({
|
||||||
|
email: user.email,
|
||||||
|
password: '',
|
||||||
|
name: user.name || '',
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
setFormData(defaultFormData)
|
||||||
|
}
|
||||||
|
setError('')
|
||||||
|
}
|
||||||
|
}, [open, user])
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setError('')
|
||||||
|
|
||||||
|
if (!formData.email.trim()) {
|
||||||
|
setError('请输入邮箱')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!user && !formData.password) {
|
||||||
|
setError('请输入密码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formData.password && formData.password.length < 6) {
|
||||||
|
setError('密码至少需要6个字符')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true)
|
||||||
|
try {
|
||||||
|
await onSubmit(formData)
|
||||||
|
onOpenChange(false)
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : '操作失败,请稍后重试')
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="sm:max-w-[400px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{user ? '编辑用户' : '添加用户'}</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
{user ? '修改用户信息,密码留空则不修改' : '创建新的平台用户'}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{error && (
|
||||||
|
<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="email">邮箱 *</Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormData((prev) => ({ ...prev, email: e.target.value }))
|
||||||
|
}
|
||||||
|
placeholder="请输入邮箱"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="password">
|
||||||
|
{user ? '密码 (留空则不修改)' : '密码 *'}
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
value={formData.password}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormData((prev) => ({ ...prev, password: e.target.value }))
|
||||||
|
}
|
||||||
|
placeholder={user ? '留空则不修改密码' : '请输入密码'}
|
||||||
|
required={!user}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="name">姓名 (可选)</Label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormData((prev) => ({ ...prev, name: e.target.value }))
|
||||||
|
}
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onOpenChange(false)}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={isLoading}>
|
||||||
|
{isLoading ? (
|
||||||
|
<>
|
||||||
|
<Spinner size="sm" className="mr-2" />
|
||||||
|
保存中...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'保存'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -26,7 +26,7 @@ export async function getTempKey(): Promise<TempKeyResult> {
|
|||||||
const region = process.env.COS_REGION || 'ap-guangzhou'
|
const region = process.env.COS_REGION || 'ap-guangzhou'
|
||||||
const appid = process.env.COS_APPID || ''
|
const appid = process.env.COS_APPID || ''
|
||||||
|
|
||||||
// Define the policy for upload permissions
|
// Define the policy for upload permissions (limited to mini_game/images/*)
|
||||||
const policy = {
|
const policy = {
|
||||||
version: '2.0',
|
version: '2.0',
|
||||||
statement: [
|
statement: [
|
||||||
@@ -38,7 +38,7 @@ export async function getTempKey(): Promise<TempKeyResult> {
|
|||||||
effect: 'allow',
|
effect: 'allow',
|
||||||
principal: { qcs: ['qcs::cam::anyone:anyone'] },
|
principal: { qcs: ['qcs::cam::anyone:anyone'] },
|
||||||
resource: [
|
resource: [
|
||||||
`qcs::cos:${region}:uid/${appid}:${bucket}/*`,
|
`qcs::cos:${region}:uid/${appid}:${bucket}/mini_game/images/*`,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
33
package-lock.json
generated
33
package-lock.json
generated
@@ -21,6 +21,7 @@
|
|||||||
"better-auth": "^1.2.7",
|
"better-auth": "^1.2.7",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
"cos-js-sdk-v5": "^1.10.1",
|
||||||
"cos-nodejs-sdk-v5": "^2.14.0",
|
"cos-nodejs-sdk-v5": "^2.14.0",
|
||||||
"lucide-react": "^0.483.0",
|
"lucide-react": "^0.483.0",
|
||||||
"next": "14.2.28",
|
"next": "14.2.28",
|
||||||
@@ -3420,6 +3421,38 @@
|
|||||||
"integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
|
"integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/cos-js-sdk-v5": {
|
||||||
|
"version": "1.10.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/cos-js-sdk-v5/-/cos-js-sdk-v5-1.10.1.tgz",
|
||||||
|
"integrity": "sha512-a4SRfCY5g6Z35C7OWe9te/S1zk77rVQzfpvZ33gmTdJQzKxbNbEG7Aw/v453XwVMsQB352FIf7KRMm5Ya/wlZQ==",
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"fast-xml-parser": "4.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/cos-js-sdk-v5/node_modules/fast-xml-parser": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.5.0.tgz",
|
||||||
|
"integrity": "sha512-/PlTQCI96+fZMAOLMZK4CWG1ItCbfZ/0jx7UIJFChPNrx7tcEgerUgWbeieCM9MfHInUDyK8DWYZ+YrywDJuTg==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/NaturalIntelligence"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "paypal",
|
||||||
|
"url": "https://paypal.me/naturalintelligence"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"strnum": "^1.0.5"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"fxparser": "src/cli/cli.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/cos-nodejs-sdk-v5": {
|
"node_modules/cos-nodejs-sdk-v5": {
|
||||||
"version": "2.15.4",
|
"version": "2.15.4",
|
||||||
"resolved": "https://registry.npmjs.org/cos-nodejs-sdk-v5/-/cos-nodejs-sdk-v5-2.15.4.tgz",
|
"resolved": "https://registry.npmjs.org/cos-nodejs-sdk-v5/-/cos-nodejs-sdk-v5-2.15.4.tgz",
|
||||||
|
|||||||
41
package.json
41
package.json
@@ -14,29 +14,30 @@
|
|||||||
"db:seed": "tsx prisma/seed.ts"
|
"db:seed": "tsx prisma/seed.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"next": "14.2.28",
|
|
||||||
"react": "^18.3.1",
|
|
||||||
"react-dom": "^18.3.1",
|
|
||||||
"@prisma/client": "^6.5.0",
|
|
||||||
"better-auth": "^1.2.7",
|
|
||||||
"@dnd-kit/core": "^6.3.1",
|
"@dnd-kit/core": "^6.3.1",
|
||||||
"@dnd-kit/sortable": "^10.0.0",
|
"@dnd-kit/sortable": "^10.0.0",
|
||||||
"@dnd-kit/utilities": "^3.2.2",
|
"@dnd-kit/utilities": "^3.2.2",
|
||||||
"@tanstack/react-query": "^5.69.0",
|
|
||||||
"react-hook-form": "^7.54.2",
|
|
||||||
"@hookform/resolvers": "^4.1.3",
|
"@hookform/resolvers": "^4.1.3",
|
||||||
"zod": "^3.24.2",
|
"@prisma/client": "^6.5.0",
|
||||||
"cos-nodejs-sdk-v5": "^2.14.0",
|
|
||||||
"uuid": "^11.1.0",
|
|
||||||
"class-variance-authority": "^0.7.1",
|
|
||||||
"clsx": "^2.1.1",
|
|
||||||
"tailwind-merge": "^3.0.2",
|
|
||||||
"lucide-react": "^0.483.0",
|
|
||||||
"@radix-ui/react-dialog": "^1.1.6",
|
"@radix-ui/react-dialog": "^1.1.6",
|
||||||
"@radix-ui/react-label": "^2.1.2",
|
"@radix-ui/react-label": "^2.1.2",
|
||||||
"@radix-ui/react-slot": "^1.1.2",
|
"@radix-ui/react-slot": "^1.1.2",
|
||||||
|
"@tanstack/react-query": "^5.69.0",
|
||||||
"bcryptjs": "^3.0.2",
|
"bcryptjs": "^3.0.2",
|
||||||
"qcloud-cos-sts": "^3.1.1"
|
"better-auth": "^1.2.7",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"cos-js-sdk-v5": "^1.10.1",
|
||||||
|
"cos-nodejs-sdk-v5": "^2.14.0",
|
||||||
|
"lucide-react": "^0.483.0",
|
||||||
|
"next": "14.2.28",
|
||||||
|
"qcloud-cos-sts": "^3.1.1",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-hook-form": "^7.54.2",
|
||||||
|
"tailwind-merge": "^3.0.2",
|
||||||
|
"uuid": "^11.1.0",
|
||||||
|
"zod": "^3.24.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/bcryptjs": "^3.0.0",
|
"@types/bcryptjs": "^3.0.0",
|
||||||
@@ -44,13 +45,13 @@
|
|||||||
"@types/react": "^19.0.12",
|
"@types/react": "^19.0.12",
|
||||||
"@types/react-dom": "^19.0.4",
|
"@types/react-dom": "^19.0.4",
|
||||||
"@types/uuid": "^10.0.0",
|
"@types/uuid": "^10.0.0",
|
||||||
"typescript": "^5.8.2",
|
"autoprefixer": "^10.4.21",
|
||||||
"prisma": "^6.5.0",
|
|
||||||
"tsx": "^4.19.3",
|
|
||||||
"eslint": "^8.57.0",
|
"eslint": "^8.57.0",
|
||||||
"eslint-config-next": "14.2.28",
|
"eslint-config-next": "14.2.28",
|
||||||
"tailwindcss": "^3.4.17",
|
|
||||||
"postcss": "^8.5.3",
|
"postcss": "^8.5.3",
|
||||||
"autoprefixer": "^10.4.21"
|
"prisma": "^6.5.0",
|
||||||
|
"tailwindcss": "^3.4.17",
|
||||||
|
"tsx": "^4.19.3",
|
||||||
|
"typescript": "^5.8.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -21,3 +21,19 @@ export interface LevelFormData {
|
|||||||
export interface ReorderRequest {
|
export interface ReorderRequest {
|
||||||
orders: { id: string; sortOrder: number }[]
|
orders: { id: string; sortOrder: number }[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface User {
|
||||||
|
id: string
|
||||||
|
email: string
|
||||||
|
emailVerified: boolean
|
||||||
|
name: string | null
|
||||||
|
image: string | null
|
||||||
|
createdAt: Date
|
||||||
|
updatedAt: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserFormData {
|
||||||
|
email: string
|
||||||
|
password: string
|
||||||
|
name?: string
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user