feat(settings): 用户名校验强化、个性签名编辑、字符计数器及提示优化
- 用户名校验改用白名单正则(中英文/数字/下划线/连字符),字符数计法统一 - 简介→个性签名,新增 textarea 可编辑,上限 128 字符 - 用户名+签名各增加实时字符计数器(x/16、x/128) - API 合并为 PUT /api/settings/profile,一次提交两字段,按变更写入 - Toast 移至 NAV 下方,独立样式,5 秒自动消失 - 移除用户 ID 灰色底色,提示改为「个人资料已更新」 - 纯文本存储 + Go 模板自动转义防 XSS
This commit is contained in:
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user