first save

src/app/skins/[id]/page.tsx

@@ -0,0 +1,46 @@
+import { notFound } from 'next/navigation';
+import SkinViewer3D from '@/components/skins/SkinViewer3D';
+import { Button } from '@/components/ui/button';
+
+interface SkinDetailProps {
+    params: { id: string };
+}
+
+export default function SkinDetail({ params }: SkinDetailProps) {
+    // 实际应用中这里会从API获取皮肤数据
+    const skinData = {
+        id: params.id,
+        name: `皮肤 #${params.id}`,
+        description: '这是你的Minecraft角色皮肤',
+        createdAt: '2023-06-01',
+        downloadUrl: `/api/skins/${params.id}/download`,
+    };
+
+    if (!skinData) return notFound();
+
+    return (
+        <div className="max-w-4xl mx-auto">
+            <h1 className="text-3xl font-bold mb-6">{skinData.name}</h1>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4">
+                    <SkinViewer3D skinUrl={skinData.downloadUrl} />
+                </div>
+
+                <div>
+                    <p className="mb-4">{skinData.description}</p>
+                    <p className="text-gray-500 mb-6">创建于: {skinData.createdAt}</p>
+
+                    <div className="flex gap-3">
+                        <Button asChild>
+                            <a href={skinData.downloadUrl} download>下载皮肤</a>
+                        </Button>
+                        <Button variant="outline">
+                            分享
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}