fix: 更换头像后 header 头像样式异常——只替换头像容器内容

旧逻辑在头像上传成功后把整个 avatarBtn 按钮的 innerHTML 换成单个
<img>:头像圆形容器(w-8 h-8 rounded-full)、用户名 span 全部丢失,
头像失去圆形裁剪与边框、布局错乱,直到刷新后服务端重新渲染才恢复。

- base.html:头像是像圆形容器加 id="headerAvatarWrap"(服务器渲染结构
  不变,仅加标记)
- profile.html:上传成功后仅更新容器内容(img/svg → 新头像),
  保留按钮结构与用户名文本
This commit is contained in:
dsh
2026-08-28 20:26:00 +08:00
parent a3122b04a4
commit cc49152f1b
2 changed files with 6 additions and 5 deletions
+1 -1
View File
@@ -58,7 +58,7 @@
<!-- Avatar Dropdown (click to toggle) -->
<div class="relative" id="avatarDropdown">
<button type="button" id="avatarBtn" class="flex items-center gap-2 hover:opacity-80 transition-opacity cursor-pointer" onclick="toggleDropdown()">
<div class="w-8 h-8 rounded-full overflow-hidden border-2 border-gray-300 hover:border-blue-500 transition-colors flex items-center justify-center bg-gray-200 text-gray-600 font-bold text-sm">
<div id="headerAvatarWrap" class="w-8 h-8 rounded-full overflow-hidden border-2 border-gray-300 hover:border-blue-500 transition-colors flex items-center justify-center bg-gray-200 text-gray-600 font-bold text-sm">
{{if .Avatar}}
<img src="/uploads/avatars/{{.Avatar}}" alt="avatar" class="w-full h-full object-cover">
{{else}}
+5 -4
View File
@@ -212,10 +212,11 @@
previewContainer.innerHTML =
'<img src="' + avatarUrl + '" alt="avatar" class="w-full h-full object-cover">';
// Update nav bar avatar
var navAvatarBtn = document.getElementById('avatarBtn');
if (navAvatarBtn) {
navAvatarBtn.innerHTML =
// Update nav bar avatar:只替换头像圆形容器内的内容,
// 保留按钮结构与用户名文本,避免样式被破坏。
var navAvatarWrap = document.getElementById('headerAvatarWrap');
if (navAvatarWrap) {
navAvatarWrap.innerHTML =
'<img src="' + avatarUrl + '" alt="avatar" class="w-full h-full object-cover">';
}