feat(settings): 用户名校验强化、个性签名编辑、字符计数器及提示优化

- 用户名校验改用白名单正则(中英文/数字/下划线/连字符),字符数计法统一
- 简介→个性签名,新增 textarea 可编辑,上限 128 字符
- 用户名+签名各增加实时字符计数器(x/16、x/128)
- API 合并为 PUT /api/settings/profile,一次提交两字段,按变更写入
- Toast 移至 NAV 下方,独立样式,5 秒自动消失
- 移除用户 ID 灰色底色,提示改为「个人资料已更新」
- 纯文本存储 + Go 模板自动转义防 XSS
This commit is contained in:
2026-05-27 00:03:09 +08:00
parent 3937945b43
commit debaa17127
6 changed files with 347 additions and 12 deletions

View File

@ -10,6 +10,37 @@ body {
min-height: 100vh;
}
/* ---------- Toast Notification ---------- */
.settings-toast {
position: fixed;
top: 55px; /* 紧贴导航栏下方 */
left: 50%;
transform: translateX(-50%) translateY(-20px);
padding: .6rem 1.5rem;
font-size: .88rem;
font-weight: 500;
color: #fff;
background: #2ecc71;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
max-width: calc(100% - 40px);
white-space: nowrap;
}
.settings-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.settings-toast.error {
background: #e74c3c;
}
/* ---------- Layout ---------- */
.settings-layout {
display: flex;
@ -104,6 +135,91 @@ body {
padding: 1.25rem 2rem 1.5rem;
}
/* ---------- Input Field ---------- */
.settings-text-input {
width: 100%;
max-width: 260px;
padding: .45rem .7rem;
font-size: .92rem;
font-family: inherit;
color: var(--color-text);
background: #f9fafb;
border: 1px solid var(--color-border);
border-radius: 6px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.settings-text-input:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(52, 152, 219, .15);
background: #fff;
}
/* ---------- Textarea Field ---------- */
.settings-textarea {
width: 100%;
max-width: 460px;
height: 80px;
padding: .5rem .7rem;
font-size: .92rem;
font-family: inherit;
color: var(--color-text);
background: #f9fafb;
border: 1px solid var(--color-border);
border-radius: 6px;
outline: none;
resize: vertical;
transition: border-color .15s ease, box-shadow .15s ease;
line-height: 1.5;
}
.settings-textarea:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(52, 152, 219, .15);
background: #fff;
}
/* ---------- Character Counter ---------- */
.char-counter {
font-size: .78rem;
color: #aaa;
margin-top: 4px;
display: block;
}
/* ---------- Save Button ---------- */
.settings-card-footer {
padding: 1rem 2rem 1.5rem;
border-top: 1px solid var(--color-border);
margin-top: .25rem;
}
.settings-save-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .55rem 1.5rem;
font-size: .88rem;
font-weight: 600;
font-family: inherit;
color: #fff;
background: var(--color-accent);
border: none;
border-radius: 6px;
cursor: pointer;
transition: background .15s ease, opacity .15s ease;
}
.settings-save-btn:hover {
background: #2980b9;
}
.settings-save-btn:disabled {
opacity: .6;
cursor: not-allowed;
}
/* ---------- Info Rows ---------- */
.info-row {
display: flex;