feat(settings): 个人资料编辑 + 头像上传/裁切 + 自定义裁切弹窗
**新增功能:**
用户名编辑:输入框替换静态文本,白名单验证(中文/英文/数字/下划线/连字符),前端计数器(n/16),utf8对齐PG VARCHAR,XSS防控。
个性签名编辑:Textarea,128字符上限,实时计数器。
头像上传管线:校验→解码→裁切→CatmullRom缩放→WebP二分编码≤100KB→原子写入(.tmp→os.Rename)。限制5MB,128-3840px,JPEG/PNG/WebP。输出512x512 WebP。文件名 {uid}_{timestamp}.webp。清理旧头像。
自定义裁切弹窗:浅色主题,固定裁切框+图片平移/缩放(1×-3×滚轮),box-shadow遮罩,三等分网格。坐标映射pan/zoom→原图像素→subImage。
CSP修复:img-src允许data:URI(FileReader预览)。
**文件变更:**
修改: README, docs/{development,structure}.md, go.{mod,sum}, cmd/server/main.go, controller/settings, middleware/security, router, templates/settings/{index.html,css}
新增: internal/service/avatar_service.go, docs/settings.md
This commit is contained in:
@ -378,6 +378,37 @@ RememberMe bool `json:"remember_me"`
|
||||
|
||||
---
|
||||
|
||||
### 14. 个人设置页与头像上传
|
||||
|
||||
**涉及文件**:参考 [`docs/settings.md`](settings.md) 获取完整实现文档。
|
||||
|
||||
**功能概要**:
|
||||
|
||||
| 功能 | 实现文件 |
|
||||
|------|----------|
|
||||
| 用户名编辑 | `auth_service.go` — `UpdateProfile()`,正则 `[\p{Han}a-zA-Z0-9_-]` 白名单 |
|
||||
| 个性签名编辑 | 同上,0-128 字符 |
|
||||
| 头像处理管线 | `avatar_service.go`(新文件)— 解码→裁切→CatmullRom缩放→WebP二分编码→原子写入 |
|
||||
| 前端裁切弹窗 | `settings/index.html` — 固定框 + 图片平移/缩放 + 坐标映射 |
|
||||
| CSS样式 | `settings.css` — 浅色主题裁切弹窗、Toast通知、输入框样式 |
|
||||
| CSP放宽 | `security.go` — `img-src 'self' data:`(裁切预览用data URI) |
|
||||
| 静态路由 | `main.go` — `/uploads/avatars` → `./storage/uploads/avatars` |
|
||||
|
||||
**设计决策**:
|
||||
|
||||
| 决策 | 选择 | 原因 |
|
||||
|------|------|------|
|
||||
| 用户名校验 | 白名单 regex | 比黑名单更安全,直接排除 `<>&"'` 等 XSS 向量 |
|
||||
| 字符计数 | `utf8.RuneCountInString` | 确保与 PostgreSQL `varchar(16)` 语义一致 |
|
||||
| 头像编码 | WebP + 二分查找质量 | 目标 ≤100KB,兼顾质量与体积 |
|
||||
| 原子写入 | `.tmp` → `os.Rename` | 防止写入中断产生损坏文件 |
|
||||
| 裁切方式 | 固定框 + 图片平移/缩放 | 框大小不变,zoom使框覆盖更小区域,真正支持精确定位 |
|
||||
| GIF支持 | 不支持 | 裁切后无法保持动画,无实际用途 |
|
||||
| 最小分辨率 | 128×128 | 防止马赛克图被拉升到 512×512 |
|
||||
| CSP data: URI | 显式允许 img-src | 裁切预览使用 FileReader → data URI |
|
||||
|
||||
---
|
||||
|
||||
## 二、解决方案建议
|
||||
|
||||
### 2.1 PostgreSQL 密码认证(问题一记录)
|
||||
@ -505,7 +536,7 @@ config.yaml # 主配置(服务/数据库/JWT 含 remember_expire/BCry
|
||||
| ~~**P0**~~ | ~~登出功能~~ | ✅ 已完成 | `POST /api/auth/logout` → 清除三个 Cookie + 跳转首页 |
|
||||
| **P1** | 首页完善 | 待做 | 当前仅有 Hero 区域,需添加帖子列表、话题导航等 |
|
||||
| **P1** | 帖子系统 | 待做 | CRUD + 话题分类 + Markdown 编辑 |
|
||||
| **P1** | 用户设置页 | 待做 | `/settings` — 修改用户名/头像/密码/个人简介 |
|
||||
| **P1** | 用户设置页 | ✅ 已完成 | `/settings/profile`、`/settings/account` — 用户名修改、个性签名、头像上传与裁切 |
|
||||
| **P2** | 管理后台 | 待做 | `/admin` — 用户管理、内容审核、主题切换 |
|
||||
| ~~**P2**~~ | ~~刷新令牌~~ | ✅ 已完成 | 记住我 + access/refresh 双 Token + 自动续期 + 登出 |
|
||||
| **P3** | 多主题支持 | 待做 | `MetaLab-2026` → `MetaLab-2027` 切换 |
|
||||
|
||||
Reference in New Issue
Block a user