feat: add new color themes and styles for rose, violet, and yellow

- Introduced new CSS files for rose, violet, and yellow themes with custom color variables.
- Implemented dark mode styles for each theme.
- Created a color data structure to manage theme colors in the console settings.

feat: implement image cropper component

- Added an image cropper component for user profile picture editing.
- Integrated the image cropper into the user profile page.

feat: enhance console sidebar with user permissions

- Defined sidebar items with permission checks for admin and editor roles.
- Updated user center navigation to reflect user permissions.

feat: add user profile and security settings

- Developed user profile page with avatar upload and editing functionality.
- Implemented user security settings for password and email verification.

feat: create reusable dialog and OTP input components

- Built a dialog component for modal interactions.
- Developed an OTP input component for email verification.

fix: improve file handling utilities

- Added utility functions for file URI generation.
- Implemented permission checks for user roles in the common utilities.

web/src/components/user/user-header.tsx

@@ -2,7 +2,7 @@
 import { User } from "@/models/user";
 import { Mail, User as UserIcon, Shield } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { getGravatarUrl } from "@/utils/common/gravatar";
+import { getGravatarFromUser } from "@/utils/common/gravatar";
 import { getFirstCharFromUser } from "@/utils/common/username";
 
 export function UserHeader({ user }: { user: User }) {
@@ -13,7 +13,7 @@ export function UserHeader({ user }: { user: User }) {
         {/* wrapper 控制显示大小，父组件给具体 w/h */}
         <div className="w-40 h-40 md:w-48 md:h-48 relative">
           <Avatar className="h-full w-full rounded-full">
-            <AvatarImage src={getGravatarUrl({ email: user.email, size: 120 })} alt={user.nickname} />
+            <AvatarImage src={getGravatarFromUser({user})} alt={user.nickname} />
               <AvatarFallback className="rounded-full">{getFirstCharFromUser(user)}</AvatarFallback>
             </Avatar>
         </div>