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:
@ -261,13 +261,179 @@ body {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ---------- Avatar Preview ---------- */
|
||||
/* ---------- Avatar Upload ---------- */
|
||||
.avatar-upload-wrap {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .7rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.avatar-upload-wrap:hover .avatar-hint {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.avatar-upload-wrap:hover .avatar-preview,
|
||||
.avatar-upload-wrap:hover .avatar-placeholder {
|
||||
opacity: .7;
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--color-border);
|
||||
transition: opacity .15s ease, border-color .15s ease;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: #f0f0f0;
|
||||
border: 2px dashed var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #bbb;
|
||||
transition: opacity .15s ease, border-color .15s ease;
|
||||
}
|
||||
|
||||
.avatar-hint {
|
||||
font-size: .8rem;
|
||||
color: var(--color-accent);
|
||||
font-weight: 500;
|
||||
opacity: 0;
|
||||
transition: opacity .15s ease;
|
||||
}
|
||||
|
||||
.avatar-input-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---------- Crop Modal ---------- */
|
||||
.crop-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
z-index: 2000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.crop-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.crop-dialog {
|
||||
background: var(--color-surface);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
max-width: 94vw;
|
||||
max-height: 94vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
.crop-header {
|
||||
padding: .75rem 1.25rem;
|
||||
font-size: .9rem;
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.crop-stage {
|
||||
position: relative;
|
||||
width: min(85vw, 480px);
|
||||
height: min(85vw, 480px);
|
||||
overflow: hidden;
|
||||
background: #edf0f4;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.crop-stage img {
|
||||
position: absolute;
|
||||
max-width: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 裁切框外的半透明暗色遮罩 */
|
||||
.crop-mask {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);
|
||||
}
|
||||
|
||||
/* 裁切框白色边框（纯视觉，不可交互） */
|
||||
.crop-frame {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 网格参考线 */
|
||||
.crop-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255, 255, 255, .3) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, .3) 1px, transparent 1px);
|
||||
background-size: 33.33% 33.33%;
|
||||
}
|
||||
|
||||
.crop-footer {
|
||||
display: flex;
|
||||
gap: .75rem;
|
||||
padding: .75rem 1rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.crop-btn {
|
||||
padding: .45rem 1.25rem;
|
||||
font-size: .85rem;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background .15s ease, opacity .15s ease;
|
||||
}
|
||||
|
||||
.crop-btn:disabled {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.crop-btn-cancel {
|
||||
background: #f0f0f0;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.crop-btn-cancel:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.crop-btn-confirm {
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.crop-btn-confirm:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
/* ---------- Role Tag ---------- */
|
||||
|
||||
Reference in New Issue
Block a user