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:
@@ -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}}
|
||||
|
||||
@@ -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">';
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user