avatar-loading.md 1.68 KB

PLAN: 聊天页面加载用户头像

目标

在聊天页面 (chat.html) 为用户头像加载真实微信头像图片,替代当前的字母彩色方块 fallback。

研究结论 (S1)

微信头像存储在 {data_root}/avatar/ 目录:

  • 路径: avatar/{md5[:2]}/{md5}/user_hd_{md5}.png 或 user_{md5}.png
  • 映射: username → hashlib.md5(username.encode()).hexdigest() → 文件查找
  • 格式: JPEG (header: ffd8ffe0)
  • 权限: 需要 su cp + chmod 644 复制到 /tmp 后 serve

涉及文件

  • app.py: 新增 /media/avatar/<username> 路由
  • templates/chat.html: 修改 renderMsg() 中头像渲染逻辑

数据流

浏览器 chat.html → GET /media/avatar/<username> 
→ Flask app.py → MD5(username) → su cp + chmod → /tmp/ → send_file
→ 浏览器 <img onerror="fallback to letter">

步骤

S2: 后端 API

  1. RED: curl 测试端点返回 404/200
  2. GREEN: 实现 /media/avatar/
  3. REFACTOR: 清理
  4. VERIFY: curl 测试 + smoketest

S3: 前端渲染

  1. RED: curl 页面检查 JS 中 img 标签逻辑
  2. GREEN: 修改 renderMsg() 头像部分
  3. REFACTOR: 确保 onerror fallback 正常
  4. VERIFY: curl 页面 + 检查 JS 无语法错 + smoketest

验证命令

# S2 验证
curl -so /dev/null -w '%{http_code}' http://127.0.0.1:5000/media/avatar/testuser
# S3 验证
curl -s http://127.0.0.1:5000/chat/testuser | grep '/media/avatar/'
# 回归 smoketest
python3 test_smoke.py

风险

  • 权限: su 复制可能失败,需错误处理返回 404
  • MD5 碰撞: 极小概率,可忽略
  • 性能: 每次请求都 su cp + chmod,可缓存但非必需(头像不大)
  • Flask 模板缓存: 改模板后需 kill 旧进程重启