feat : prifile css change over

nkebao/src/components/ui/avatar.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { UserCircle } from 'lucide-react';
 
 interface AvatarProps {
   children: React.ReactNode;
@@ -27,19 +28,50 @@ export function AvatarImage({ src, alt, className = '' }: AvatarImageProps) {
       src={src}
       alt={alt || '头像'}
       className={`aspect-square h-full w-full object-cover ${className}`}
+      onError={(e) => {
+        // 图片加载失败时隐藏图片，显示fallback
+        const target = e.target as HTMLImageElement;
+        target.style.display = 'none';
+      }}
     />
   );
 }
 
 interface AvatarFallbackProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
+  variant?: 'default' | 'gradient' | 'solid' | 'outline';
+  showUserIcon?: boolean;
 }
 
-export function AvatarFallback({ children, className = '' }: AvatarFallbackProps) {
+export function AvatarFallback({ 
+  children, 
+  className = '', 
+  variant = 'default',
+  showUserIcon = true 
+}: AvatarFallbackProps) {
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'gradient':
+        return 'bg-gradient-to-br from-blue-500 to-purple-600 text-white shadow-lg';
+      case 'solid':
+        return 'bg-blue-500 text-white';
+      case 'outline':
+        return 'bg-white border-2 border-blue-500 text-blue-500';
+      default:
+        return 'bg-gradient-to-br from-blue-100 to-blue-200 text-blue-600';
+    }
+  };
+
   return (
-    <div className={`flex h-full w-full items-center justify-center rounded-full bg-gray-100 text-gray-600 ${className}`}>
-      {children}
+    <div className={`flex h-full w-full items-center justify-center rounded-full ${getVariantClasses()} ${className}`}>
+      {children ? (
+        <span className="text-sm font-medium">{children}</span>
+      ) : showUserIcon ? (
+        <UserCircle className="h-1/2 w-1/2" />
+      ) : (
+        <span className="text-sm font-medium">用户</span>
+      )}
     </div>
   );
 }