增加头像显示

gonghui/unhost-center/index.html

@@ -56,7 +56,21 @@
 
             <main class="content">
                 <section class="card profile-card">
-                    <div class="avatar-shell"></div>
+                    <div class="avatar-shell">
+                        <img
+                            class="avatar-image"
+                            id="profileAvatar"
+                            alt=""
+                            hidden
+                        />
+                        <div
+                            class="avatar-fallback"
+                            id="profileAvatarFallback"
+                            aria-hidden="true"
+                        >
+                            N
+                        </div>
+                    </div>
                     <div class="profile-copy">
                         <div
                             class="name"

gonghui/unhost-center/script.js

@@ -100,6 +100,55 @@
         return Number.isFinite(count) && count > 0 ? count : 0;
     }
 
+    function profileAvatar(profile) {
+        return String(
+            (profile &&
+                (profile.avatar ||
+                    profile.user_avatar ||
+                    profile.userAvatar ||
+                    profile.avatar_url ||
+                    profile.avatarUrl ||
+                    profile.profile_avatar ||
+                    profile.profileAvatar)) ||
+                ''
+        );
+    }
+
+    function profileInitial(name) {
+        return String(name || '')
+            .trim()
+            .charAt(0)
+            .toUpperCase();
+    }
+
+    function renderProfileAvatar(profile, name) {
+        var avatar = $('profileAvatar');
+        var fallback = $('profileAvatarFallback');
+        if (!avatar || !fallback) return;
+        fallback.textContent = profileInitial(name) || 'N';
+
+        var src = profileAvatar(profile);
+        if (!src) {
+            avatar.hidden = true;
+            avatar.removeAttribute('src');
+            fallback.hidden = false;
+            return;
+        }
+
+        avatar.onerror = function () {
+            avatar.hidden = true;
+            avatar.removeAttribute('src');
+            fallback.hidden = false;
+        };
+        avatar.onload = function () {
+            avatar.hidden = false;
+            fallback.hidden = true;
+        };
+        fallback.hidden = true;
+        avatar.hidden = false;
+        avatar.src = src;
+    }
+
     function hostCountText(count) {
         if (count === 1) return t('host_center.host_count_one', '1 host');
         return t('host_center.host_count_many', '{count} hosts').replace(
@@ -299,6 +348,7 @@
             $('profileUID').removeAttribute('data-i18n');
             $('profileUID').textContent = 'UID: ' + uid;
         }
+        renderProfileAvatar(profile, name);
     }
 
     function init() {

gonghui/unhost-center/style.css

@@ -355,16 +355,26 @@ a {
 
 .avatar-image,
 .avatar-fallback {
-    display: block;
     width: 64px;
     height: 64px;
     border-radius: 50%;
 }
 
 .avatar-image {
+    display: block;
     object-fit: cover;
 }
 
+.avatar-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--hy-theme-primary, #dbc8ff);
+    color: var(--hy-theme-primary-deep, #6d45bd);
+    font-size: 24px;
+    font-weight: 950;
+}
+
 .avatar-image[hidden],
 .avatar-fallback[hidden] {
     display: none;
@@ -1540,20 +1550,6 @@ a {
     }
 }
 
-.avatar-shell::before {
-    content: 'N';
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 64px;
-    height: 64px;
-    border-radius: 50%;
-    background: var(--hy-theme-primary, #dbc8ff);
-    color: var(--hy-theme-primary-deep, #6d45bd);
-    font-size: 24px;
-    font-weight: 950;
-}
-
 .join-agency-dialog-static {
     display: flex;
     flex-direction: column;