From 9a49ef5e577226bbcfb23e7374f14870986d15ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=B0=B8=E5=B9=B3?= <xuyongping@szwycity.cn>
Date: Mon, 7 Jul 2025 09:49:35 +0800
Subject: [PATCH] feat : prifile css change over

---
 nkebao/src/components/ui/avatar.tsx  | 40 +++++++++++++++++++++++++---
 nkebao/src/pages/profile/Profile.tsx |  4 +--
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/nkebao/src/components/ui/avatar.tsx b/nkebao/src/components/ui/avatar.tsx
index 0273e3af..a816c987 100644
--- a/nkebao/src/components/ui/avatar.tsx
+++ b/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>
   );
 } 
\ No newline at end of file
diff --git a/nkebao/src/pages/profile/Profile.tsx b/nkebao/src/pages/profile/Profile.tsx
index 46f06979..5dbe2ce5 100644
--- a/nkebao/src/pages/profile/Profile.tsx
+++ b/nkebao/src/pages/profile/Profile.tsx
@@ -75,8 +75,8 @@ export default function Profile() {
           <div className="flex items-center space-x-4">
             <Avatar className="w-20 h-20">
               <AvatarImage src={userInfo?.avatar || user?.avatar || ''} />
-              <AvatarFallback>
-                {(userInfo?.username || user?.username || '用户').slice(0, 2)}
+              <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white text-xl font-semibold shadow-lg">
+                {(userInfo?.username || user?.username || '用户').slice(0, 2).toUpperCase()}
               </AvatarFallback>
             </Avatar>
             <div className="flex-1">