# 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/` 路由 - `templates/chat.html`: 修改 renderMsg() 中头像渲染逻辑 ## 数据流 ``` 浏览器 chat.html → GET /media/avatar/ → Flask app.py → MD5(username) → su cp + chmod → /tmp/ → send_file → 浏览器 ``` ## 步骤 ### 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 ## 验证命令 ```bash # 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 旧进程重启