feat: initial project setup for Meme Studio
Next.js 14 App Router application for managing homophone pun game levels: - Better Auth with Prisma adapter for authentication - MySQL database with Prisma ORM - Level CRUD operations with drag-and-drop reordering - Tencent COS integration for image uploads - shadcn/ui components with Tailwind CSS - TanStack Query for server state management
This commit is contained in:
richarjiang
16
app/(dashboard)/layout.tsx
Normal file
16
app/(dashboard)/layout.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { Sidebar } from '@/components/layout/sidebar'
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="flex h-screen bg-gray-100">
|
||||
<Sidebar />
|
||||
<main className="flex-1 overflow-auto">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
198
app/(dashboard)/levels/page.tsx
Normal file
198
app/(dashboard)/levels/page.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Header } from '@/components/layout/header'
|
||||
import { LevelList } from '@/components/levels/level-list'
|
||||
import { LevelDialog } from '@/components/levels/level-dialog'
|
||||
import { Spinner } from '@/components/ui/spinner'
|
||||
import { Level, LevelFormData } from '@/types'
|
||||
import { Plus } from 'lucide-react'
|
||||
|
||||
export default function LevelsPage() {
|
||||
const queryClient = useQueryClient()
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||
const [editingLevel, setEditingLevel] = useState<Level | null>(null)
|
||||
const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null)
|
||||
|
||||
// Fetch levels
|
||||
const { data: levels, isLoading, error } = useQuery<Level[]>({
|
||||
queryKey: ['levels'],
|
||||
queryFn: async () => {
|
||||
const res = await fetch('/api/levels')
|
||||
if (!res.ok) throw new Error('Failed to fetch levels')
|
||||
return res.json()
|
||||
},
|
||||
})
|
||||
|
||||
// Create level mutation
|
||||
const createMutation = useMutation({
|
||||
mutationFn: async (data: LevelFormData) => {
|
||||
const res = await fetch('/api/levels', {
|
||||
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 level')
|
||||
}
|
||||
return res.json()
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['levels'] })
|
||||
},
|
||||
})
|
||||
|
||||
// Update level mutation
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: async ({ id, data }: { id: string; data: LevelFormData }) => {
|
||||
const res = await fetch('/api/levels', {
|
||||
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 level')
|
||||
}
|
||||
return res.json()
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['levels'] })
|
||||
},
|
||||
})
|
||||
|
||||
// Delete level mutation
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: async (id: string) => {
|
||||
const res = await fetch(`/api/levels?id=${id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
if (!res.ok) {
|
||||
const error = await res.json()
|
||||
throw new Error(error.error || 'Failed to delete level')
|
||||
}
|
||||
return res.json()
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['levels'] })
|
||||
setDeleteConfirmId(null)
|
||||
},
|
||||
})
|
||||
|
||||
// Reorder mutation
|
||||
const reorderMutation = useMutation({
|
||||
mutationFn: async (orders: { id: string; sortOrder: number }[]) => {
|
||||
const res = await fetch('/api/levels/reorder', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ orders }),
|
||||
})
|
||||
if (!res.ok) {
|
||||
const error = await res.json()
|
||||
throw new Error(error.error || 'Failed to reorder levels')
|
||||
}
|
||||
return res.json()
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['levels'] })
|
||||
},
|
||||
})
|
||||
|
||||
const handleOpenCreate = () => {
|
||||
setEditingLevel(null)
|
||||
setIsDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleOpenEdit = (level: Level) => {
|
||||
setEditingLevel(level)
|
||||
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: LevelFormData) => {
|
||||
if (editingLevel) {
|
||||
await updateMutation.mutateAsync({ id: editingLevel.id, data })
|
||||
} else {
|
||||
await createMutation.mutateAsync(data)
|
||||
}
|
||||
}
|
||||
|
||||
const handleReorder = useCallback(
|
||||
(orders: { id: string; sortOrder: number }[]) => {
|
||||
reorderMutation.mutate(orders)
|
||||
},
|
||||
[reorderMutation]
|
||||
)
|
||||
|
||||
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: ['levels'] })}
|
||||
>
|
||||
重试
|
||||
</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">
|
||||
共 {levels?.length || 0} 个关卡
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleOpenCreate}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
添加关卡
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<LevelList
|
||||
levels={levels || []}
|
||||
onReorder={handleReorder}
|
||||
onEdit={handleOpenEdit}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LevelDialog
|
||||
open={isDialogOpen}
|
||||
onOpenChange={setIsDialogOpen}
|
||||
level={editingLevel}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user