feat(lightbox): 用户主页头像可预览，图箱支持缩放旋转反色

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/app/u/[id]/page.tsx

@@ -11,7 +11,7 @@ import { getMeCached, getPublicSettingsCached } from "@/lib/serverData";
 import UserProfileContent from "./UserProfileContent";
 import ProfileForm from "./ProfileForm";
 import PasswordForm from "./PasswordForm";
-import Avatar from "@/components/Avatar";
+import ProfileHeroAvatar from "./ProfileHeroAvatar";
 import RoleBadge from "@/components/RoleBadge";
 import { roleMeta } from "@/lib/roles";
 import StartDMButton from "./StartDMButton";
@@ -181,22 +181,10 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
         {/* 身份信息：纯文档流，头像 + 右侧文字 baseline 对齐 */}
         <div className="relative z-10 px-5 sm:px-7 pt-5 sm:pt-6">
           <div className="flex items-center gap-4">
-            <span
-              className="inline-flex items-center justify-center shrink-0 rounded-full p-0"
-              style={{
-                width: 80,
-                height: 80,
-                lineHeight: 0,
-                boxShadow:
-                  "0 0 0 4px var(--panel), 0 0 0 6px color-mix(in srgb, var(--accent) 38%, transparent)",
-              }}
-            >
-              <Avatar
-                name={u.nickname || u.username}
-                src={u.avatar || undefined}
-                size={80}
-              />
-            </span>
+            <ProfileHeroAvatar
+              name={u.nickname || u.username}
+              src={u.avatar || undefined}
+            />
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2 flex-wrap">
                 <h1