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

components/layout/header.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { useSession } from '@/lib/auth-client'
+import { Spinner } from '@/components/ui/spinner'
+
+export function Header() {
+  const { data: session, isPending } = useSession()
+
+  if (isPending) {
+    return (
+      <header className="h-16 border-b bg-white flex items-center justify-center px-6">
+        <Spinner size="sm" />
+      </header>
+    )
+  }
+
+  return (
+    <header className="h-16 border-b bg-white flex items-center justify-between px-6">
+      <h2 className="text-lg font-semibold">关卡配置管理</h2>
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-gray-500">
+          {session?.user?.email}
+        </span>
+      </div>
+    </header>
+  )
+}

components/layout/sidebar.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import { Layers, Home, Settings, LogOut } from 'lucide-react'
+import { signOut, useSession } from '@/lib/auth-client'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+
+const navigation = [
+  { name: '首页', href: '/levels', icon: Home },
+  { name: '关卡配置', href: '/levels', icon: Layers },
+]
+
+export function Sidebar() {
+  const pathname = usePathname()
+  const router = useRouter()
+  const { data: session } = useSession()
+
+  const handleSignOut = async () => {
+    await signOut()
+    router.push('/login')
+    router.refresh()
+  }
+
+  return (
+    <div className="flex h-full w-64 flex-col bg-gray-900 text-white">
+      <div className="flex h-16 items-center justify-center border-b border-gray-800">
+        <h1 className="text-xl font-bold">Meme Studio</h1>
+      </div>
+      <nav className="flex-1 space-y-1 p-4">
+        {navigation.map((item) => {
+          const isActive = pathname === item.href
+          return (
+            <Link
+              key={item.name}
+              href={item.href}
+              className={cn(
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-gray-800 text-white'
+                  : 'text-gray-400 hover:bg-gray-800 hover:text-white'
+              )}
+            >
+              <item.icon className="h-5 w-5" />
+              {item.name}
+            </Link>
+          )
+        })}
+      </nav>
+      <div className="border-t border-gray-800 p-4">
+        <div className="flex items-center gap-3 mb-3">
+          <div className="h-8 w-8 rounded-full bg-gray-700 flex items-center justify-center">
+            {session?.user?.email?.[0]?.toUpperCase() || 'U'}
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium truncate">
+              {session?.user?.name || session?.user?.email || '用户'}
+            </p>
+            <p className="text-xs text-gray-400 truncate">
+              {session?.user?.email}
+            </p>
+          </div>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-full justify-start text-gray-400 hover:text-white hover:bg-gray-800"
+          onClick={handleSignOut}
+        >
+          <LogOut className="h-4 w-4 mr-2" />
+          退出登录
+        </Button>
+      </div>
+    </div>
+  )
+}