修复角色中心组件中的类型不匹配错误，改进skinId和capeId的类型处理逻辑

src/app/dashboard/page.tsx

@@ -1,13 +1,12 @@
 // src/app/dashboard/page.tsx
 'use client';
+import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-//import { Separator } from '@/components/ui/separator';
 import Link from 'next/link';
-import { useState } from 'react';
 import Canvas2DSkinPreview from '@/components/skins/Canvas2DSkinPreview';
-import SkinGrid from '@/components/skins/SkinGrid';
+import { TextureInfo, TextureType, getUserTextures, getUserFavorites, addFavorite, removeFavorite, checkFavoriteStatus } from '@/lib/api/skins';
 
 export default function Dashboard() {
     // 由于这是客户端组件，我们不能在这里使用getServerSession
@@ -21,16 +20,61 @@ export default function Dashboard() {
     // 状态管理
     const [searchTerm, setSearchTerm] = useState('');
     const [activeCategory, setActiveCategory] = useState('all');
-
-    // 实际应用中这里会从API获取用户皮肤数据
-    const mockSkins = [
-        { id: '1', name: 'Steve皮肤', createdAt: '2023-05-01' },
-        { id: '2', name: 'Alex皮肤', createdAt: '2023-05-15' },
-    ];
+    const [skins, setSkins] = useState<TextureInfo[]>([]);
+    const [favorites, setFavorites] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    
+    // 加载用户皮肤
+    useEffect(() => {
+        loadUserSkins();
+    }, []);
+    
+    const loadUserSkins = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            // 获取用户皮肤列表
+            const response = await getUserTextures({ type: TextureType.SKIN, page: 1, pageSize: 20 });
+            setSkins(response.textures);
+            
+            // 获取用户收藏列表
+            const favResponse = await getUserFavorites({ page: 1, pageSize: 20 });
+            setFavorites(favResponse.textures);
+        } catch (err) {
+            console.error('加载皮肤失败:', err);
+            setError('无法加载皮肤，请稍后重试');
+        } finally {
+            setLoading(false);
+        }
+    };
+    
+    const handleFavoriteToggle = async (textureId: number) => {
+        try {
+            // 检查当前收藏状态
+            const isCurrentlyFavorite = await checkFavoriteStatus(textureId);
+            
+            if (isCurrentlyFavorite) {
+                // 取消收藏
+                await removeFavorite(textureId);
+                // 更新本地状态
+                setFavorites(favorites.filter(fav => fav.texture.id !== textureId));
+            } else {
+                // 添加收藏
+                await addFavorite(textureId);
+                // 获取更新后的收藏列表
+                const favResponse = await getUserFavorites({ page: 1, pageSize: 20 });
+                setFavorites(favResponse.textures);
+            }
+        } catch (err) {
+            console.error('操作收藏失败:', err);
+            alert('操作失败，请稍后重试');
+        }
+    };
     
     // 根据搜索词和分类过滤皮肤
-    const filteredSkins = mockSkins.filter(skin => 
-        skin.name.toLowerCase().includes(searchTerm.toLowerCase())
+    const filteredSkins = skins.filter(skin => 
+        skin.id.toString().includes(searchTerm.toLowerCase())
     );
 
     return (
@@ -108,24 +152,63 @@ export default function Dashboard() {
                 
                 {/* 皮肤网格 */}
                 <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
-                    {filteredSkins.map((skin) => (
-                        <Card key={skin.id} className="overflow-hidden border border-emerald-200 dark:border-emerald-900/30 rounded-2xl hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm">
+                    {loading ? (
+                        // 加载状态
+                        Array.from({ length: 6 }).map((_, index) => (
+                            <Card key={index} className="overflow-hidden border border-emerald-200 dark:border-emerald-900/30 rounded-2xl hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm">
+                                <div className="aspect-square bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+                                <CardContent className="p-5">
+                                    <div className="h-6 bg-gray-300 dark:bg-gray-600 rounded w-2/3 mb-2 animate-pulse"></div>
+                                    <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/2 mb-4 animate-pulse"></div>
+                                    <div className="flex gap-2">
+                                        <div className="h-8 bg-gray-300 dark:bg-gray-600 rounded w-1/3 animate-pulse"></div>
+                                        <div className="h-8 bg-gray-300 dark:bg-gray-600 rounded w-1/3 animate-pulse"></div>
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        ))
+                    ) : error ? (
+                        // 错误状态
+                        <div className="col-span-full text-center py-12">
+                            <p className="text-red-500 mb-4">{error}</p>
+                            <Button onClick={loadUserSkins}>重试</Button>
+                        </div>
+                    ) : filteredSkins.length === 0 ? (
+                        // 空状态
+                        <div className="col-span-full text-center py-12">
+                            <p className="text-gray-500 dark:text-gray-400 mb-4">你还没有上传任何皮肤</p>
+                            <Button asChild>
+                                <Link href="/skins/upload">立即上传</Link>
+                            </Button>
+                        </div>
+                    ) : (
+                        // 正常显示皮肤列表
+                        filteredSkins.map((skin) => (
+                            <Card key={skin.id} className="overflow-hidden border border-emerald-200 dark:border-emerald-900/30 rounded-2xl hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm">
                             <div className="aspect-square bg-gray-100/95 dark:bg-gray-900/95 flex items-center justify-center p-4 relative overflow-hidden group">
                                 <div className="absolute inset-0 bg-gradient-to-br from-emerald-50/50 to-teal-50/50 dark:from-emerald-900/10 dark:to-teal-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                                 <Canvas2DSkinPreview 
-                                    skinUrl={`/test-skin.png`} 
+                                    skinUrl={skin.url || `/test-skin.png`} 
                                     size={128} 
                                     className="max-w-full max-h-full relative z-10 transition-transform duration-500 group-hover:scale-110" 
                                 />
                             </div>
                             <CardContent className="p-5">
                                 <div className="flex justify-between items-start mb-2">
-                                    <h3 className="font-semibold text-lg text-gray-800 dark:text-white truncate group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors">{skin.name}</h3>
-                                    <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-500 hover:text-rose-500 dark:hover:text-rose-400 rounded-full">
+                                    <h3 className="font-semibold text-lg text-gray-800 dark:text-white truncate group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors">皮肤 #{skin.id}</h3>
+                                    <Button 
+                                        variant="ghost" 
+                                        size="icon" 
+                                        className="h-8 w-8 text-gray-500 hover:text-rose-500 dark:hover:text-rose-400 rounded-full"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            handleFavoriteToggle(skin.id);
+                                        }}
+                                    >
                                         ❤️
                                     </Button>
                                 </div>
-                                <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">上传于 {skin.createdAt}</p>
+                                <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">上传于 {new Date(skin.createdAt).toLocaleDateString()}</p>
                                 <div className="flex gap-2">
                                     <Button size="sm" variant="ghost" className="text-xs flex-1 border border-emerald-200 dark:border-emerald-900/30 hover:bg-emerald-50 dark:hover:bg-emerald-900/20 rounded-lg">
                                         编辑
@@ -139,7 +222,8 @@ export default function Dashboard() {
                                 </div>
                             </CardContent>
                         </Card>
-                    ))}
+                        ))
+                    )}
                 </div>
                 
                 {/* 空状态 */}