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

Open
dsh wants to merge 1 commits from dsh/go_blog:fix/header-avatar-update into main
Contributor

问题

/profile 更换头像成功后,header 导航栏的头像样式错乱(圆形裁剪/边框丢失、用户名消失),刷新页面后才恢复正常。

根因

profile 页 JS 更新导航头像时把整个 #avatarBtn 按钮的 innerHTML 替换成了单个 <img>

  • 头像圆形容器(w-8 h-8 rounded-full overflow-hidden border-2 …——负责圆形裁剪与边框)被删掉;
  • 按钮内的用户名 <span> 也被删掉(一并造成布局错乱);
  • <img> 直接成为按钮子元素,w-full h-full 无容器可依,样式异常;
  • 刷新后服务端按新会话头像重新渲染,结构才正常。

修复

  • templates/layouts/base.html:头像圆形容器加 id="headerAvatarWrap"(服务端渲染结构不变,仅加标记);
  • templates/pages/profile.html:上传成功后只更新容器内容(<img>/占位 <svg> → 新头像),保留按钮结构与用户名文本;新 URL 带 ?t= 时间戳防浏览器缓存旧图。

验证

模板解析(handlers 测试)与 profile 页内嵌 JS node --check 通过。

## 问题 在 `/profile` 更换头像成功后,header 导航栏的头像样式错乱(圆形裁剪/边框丢失、用户名消失),刷新页面后才恢复正常。 ## 根因 profile 页 JS 更新导航头像时把**整个** `#avatarBtn` 按钮的 innerHTML 替换成了单个 `<img>`: - 头像圆形容器(`w-8 h-8 rounded-full overflow-hidden border-2 …`——负责圆形裁剪与边框)被删掉; - 按钮内的用户名 `<span>` 也被删掉(一并造成布局错乱); - 新 `<img>` 直接成为按钮子元素,`w-full h-full` 无容器可依,样式异常; - 刷新后服务端按新会话头像重新渲染,结构才正常。 ## 修复 - `templates/layouts/base.html`:头像圆形容器加 `id="headerAvatarWrap"`(服务端渲染结构不变,仅加标记); - `templates/pages/profile.html`:上传成功后只更新容器内容(`<img>`/占位 `<svg>` → 新头像),**保留按钮结构与用户名文本**;新 URL 带 `?t=` 时间戳防浏览器缓存旧图。 ## 验证 模板解析(handlers 测试)与 profile 页内嵌 JS `node --check` 通过。
dsh added 1 commit 2026-08-28 20:26:08 +08:00
旧逻辑在头像上传成功后把整个 avatarBtn 按钮的 innerHTML 换成单个
<img>:头像圆形容器(w-8 h-8 rounded-full)、用户名 span 全部丢失,
头像失去圆形裁剪与边框、布局错乱,直到刷新后服务端重新渲染才恢复。

- base.html:头像是像圆形容器加 id="headerAvatarWrap"(服务器渲染结构
  不变,仅加标记)
- profile.html:上传成功后仅更新容器内容(img/svg → 新头像),
  保留按钮结构与用户名文本
You are not authorized to merge this pull request.
This pull request can be merged automatically.
This branch is out-of-date with the base branch
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u https://git.lmve.net/dsh/go_blog fix/header-avatar-update:dsh-fix/header-avatar-update
git checkout dsh-fix/header-avatar-update
Sign in to join this conversation.
No Reviewers
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: kevin/go_blog#10