feat: Refactor comment section to correctly handle API response structure

fix: Update Gravatar URL size and improve avatar rendering logic

style: Adjust footer margin for better layout consistency

refactor: Remove old navbar component and integrate new layout structure

feat: Enhance user profile page with user header component

chore: Remove unused user profile component

fix: Update posts per page configuration for better pagination

feat: Extend device context to support system theme mode

refactor: Remove unused device hook

fix: Improve storage state hook for better error handling

i18n: Add new translations for blog home page

feat: Implement pagination component for better navigation

feat: Create theme toggle component for improved user experience

feat: Introduce responsive navbar or side layout with theme toggle

feat: Develop custom select component for better UI consistency

feat: Create user header component to display user information

chore: Add query key constants for better code maintainability

web/src/components/user/index.tsx

@@ -1,5 +1,8 @@
 import { User } from "@/models/user";
+import { UserHeader } from "./user-header";
 
 export function UserPage({user}: {user: User}) {
-  return <div>User: {user.username}</div>;
-}
+  return <div>
+    <UserHeader user={user} />
+  </div>;
+}

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

@@ -0,0 +1,40 @@
+"use client"
+import { User } from "@/models/user";
+import GravatarAvatar from "@/components/common/gravatar";
+import { Mail, User as UserIcon, Shield } from 'lucide-react';
+
+export function UserHeader({ user }: { user: User }) {
+  return (
+    <div className="flex flex-col md:flex-row items-center md:items-center h-auto md:h-60">
+      {/* 左侧 30%（头像容器） */}
+      <div className="md:basis-[20%] flex justify-center items-center p-4">
+        {/* wrapper 控制显示大小，父组件给具体 w/h */}
+        <div className="w-40 h-40 md:w-48 md:h-48 relative">
+          <GravatarAvatar className="rounded-full w-full h-full" url={user.avatarUrl} email={user.email} size={200} />
+        </div>
+      </div>
+
+      {/* 右侧 70%（信息区） */}
+      <div className="md:basis-[70%] p-4 flex flex-col justify-center space-y-2">
+        <h2 className="text-2xl font-bold mt-0">{user.nickname}</h2>
+        <p className="text-gray-500 dark:text-gray-400 mt-1">@{user.username}</p>
+
+        <div className="flex items-center text-sm text-slate-600 dark:text-slate-400">
+          <UserIcon className="w-4 h-4 mr-2" />
+          <span>{user.gender || '未填写'}</span>
+        </div>
+
+        <div className="flex items-center text-sm text-slate-600 dark:text-slate-400">
+          <Mail className="w-4 h-4 mr-2" />
+          <span>{user.email || '未填写'}</span>
+        </div>
+
+        <div className="flex items-center text-sm text-slate-600 dark:text-slate-400">
+          <Shield className="w-4 h-4 mr-2" />
+          <span>{user.role || '访客'}</span>
+        </div>
+        {/* 其他简介、按钮等放这里 */}
+      </div>
+    </div>
+  );
+}

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

@@ -1,11 +0,0 @@
-"use client"
-import { User } from "@/models/user";
-import GravatarAvatar from "@/components/common/gravatar";
-
-export function UserProfile({ user }: { user: User }) {
-  return (
-    <div className="flex">
-      <GravatarAvatar email={user.email} size={120}/>
-    </div>
-  );
-}