Victor_Jay
debaa17127
- 用户名校验改用白名单正则（中英文/数字/下划线/连字符），字符数计法统一 - 简介→个性签名，新增 textarea 可编辑，上限 128 字符 - 用户名+签名各增加实时字符计数器（x/16、x/128） - API 合并为 PUT /api/settings/profile，一次提交两字段，按变更写入 - Toast 移至 NAV 下方，独立样式，5 秒自动消失 - 移除用户 ID 灰色底色，提示改为「个人资料已更新」 - 纯文本存储 + Go 模板自动转义防 XSS
221 lines
8.3 KiB
HTML
221 lines
8.3 KiB
HTML
{{template "layout/header.html" .}}
|
|
<body>
|
|
|
|
{{template "layout/nav.html" .}}
|
|
|
|
<div class="settings-toast" id="settingsToast"></div>
|
|
|
|
<div class="settings-layout">
|
|
<aside class="settings-sidebar">
|
|
<nav class="settings-nav">
|
|
<a href="/settings/profile"
|
|
class="settings-nav-item {{if eq .ActiveTab "profile"}}active{{end}}">
|
|
<svg class="settings-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/>
|
|
</svg>
|
|
个人资料
|
|
</a>
|
|
<a href="/settings/account"
|
|
class="settings-nav-item {{if eq .ActiveTab "account"}}active{{end}}">
|
|
<svg class="settings-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
|
<circle cx="12" cy="16" r="1"/>
|
|
</svg>
|
|
账号信息
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="settings-main">
|
|
{{if eq .ActiveTab "profile"}}
|
|
<!-- 个人资料 -->
|
|
<div class="settings-card">
|
|
<div class="settings-card-header">
|
|
<h2>个人资料</h2>
|
|
<p class="settings-card-desc">你的公开信息和基本资料</p>
|
|
</div>
|
|
<div class="settings-card-body">
|
|
<div class="info-row">
|
|
<span class="info-label">用户名</span>
|
|
<span class="info-value">
|
|
<input type="text" id="usernameInput" class="settings-text-input" value="{{.User.Username}}" maxlength="16" autocomplete="off">
|
|
<span class="char-counter" id="usernameCounter"></span>
|
|
</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">头像</span>
|
|
<span class="info-value">
|
|
{{if .User.Avatar}}
|
|
<img src="{{.User.Avatar}}" alt="avatar" class="avatar-preview">
|
|
{{else}}
|
|
<span class="info-muted">未设置</span>
|
|
{{end}}
|
|
</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">个性签名</span>
|
|
<span class="info-value">
|
|
<textarea id="bioInput" class="settings-textarea" maxlength="128" placeholder="写一句话介绍自己...">{{.User.Bio}}</textarea>
|
|
<div class="char-counter" id="bioCounter"></div>
|
|
</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">角色</span>
|
|
<span class="info-value">
|
|
<span class="role-tag role-{{.User.Role}}">{{.RoleName}}</span>
|
|
</span>
|
|
</div>
|
|
<div class="settings-card-footer">
|
|
<button id="saveProfileBtn" class="settings-save-btn">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<!-- 账号信息 -->
|
|
<div class="settings-card">
|
|
<div class="settings-card-header">
|
|
<h2>账号信息</h2>
|
|
<p class="settings-card-desc">账号安全和基本状态</p>
|
|
</div>
|
|
<div class="settings-card-body">
|
|
<div class="info-row">
|
|
<span class="info-label">用户 ID</span>
|
|
<span class="info-value">{{.User.ID}}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">邮箱</span>
|
|
<span class="info-value">{{.User.Email}}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">账号状态</span>
|
|
<span class="info-value">
|
|
<span class="status-badge status-{{.User.Status}}">{{.StatusName}}</span>
|
|
</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">注册时间</span>
|
|
<span class="info-value">{{.User.CreatedAt.Format "2006-01-02 15:04:05"}}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">最后更新</span>
|
|
<span class="info-value">{{.User.UpdatedAt.Format "2006-01-02 15:04:05"}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</main>
|
|
</div>
|
|
|
|
{{template "layout/footer.html" .}}
|
|
|
|
<script src="/static/js/common.js"></script>
|
|
<script>
|
|
(function () {
|
|
'use strict';
|
|
|
|
var usernameInput = document.getElementById('usernameInput');
|
|
var bioInput = document.getElementById('bioInput');
|
|
var btn = document.getElementById('saveProfileBtn');
|
|
if (!usernameInput || !bioInput || !btn) return;
|
|
|
|
var toastEl = document.getElementById('settingsToast');
|
|
var toastTimer = null;
|
|
|
|
function showSettingsToast(msg, isError) {
|
|
if (!toastEl) return;
|
|
clearTimeout(toastTimer);
|
|
toastEl.textContent = msg;
|
|
toastEl.className = 'settings-toast' + (isError ? ' error' : '');
|
|
void toastEl.offsetWidth;
|
|
toastEl.classList.add('show');
|
|
toastTimer = setTimeout(function () {
|
|
toastEl.classList.remove('show');
|
|
}, 5000);
|
|
}
|
|
|
|
// ---- 字符计数器 ----
|
|
var usernameCounter = document.getElementById('usernameCounter');
|
|
var bioCounterEl = document.getElementById('bioCounter');
|
|
|
|
function updateCounters() {
|
|
if (usernameCounter) {
|
|
usernameCounter.textContent = usernameInput.value.length + '/16';
|
|
}
|
|
if (bioCounterEl) {
|
|
bioCounterEl.textContent = bioInput.value.length + '/128';
|
|
}
|
|
}
|
|
|
|
usernameInput.addEventListener('input', updateCounters);
|
|
bioInput.addEventListener('input', updateCounters);
|
|
updateCounters();
|
|
|
|
// ---- 原始值（用于判断是否变更） ----
|
|
var origUsername = usernameInput.value.trim();
|
|
var origBio = bioInput.value;
|
|
|
|
// 与后端一致的合法字符集：中文、英文大小写、数字、下划线、连字符
|
|
var usernameRe = /^[\u4e00-\u9fffa-zA-Z0-9_-]+$/;
|
|
|
|
btn.addEventListener('click', function () {
|
|
var username = usernameInput.value.trim();
|
|
var bio = bioInput.value;
|
|
|
|
// 用户名校验
|
|
if (!username) {
|
|
showSettingsToast('用户名不能为空', true);
|
|
return;
|
|
}
|
|
if (username.length > 16) {
|
|
showSettingsToast('用户名不能超过 16 个字符', true);
|
|
return;
|
|
}
|
|
if (!usernameRe.test(username)) {
|
|
showSettingsToast('用户名仅支持中英文、数字、下划线、连字符', true);
|
|
return;
|
|
}
|
|
|
|
// 个性签名校验
|
|
if (bio.length > 128) {
|
|
showSettingsToast('个性签名不能超过 128 个字符', true);
|
|
return;
|
|
}
|
|
|
|
// 无变更判断
|
|
if (username === origUsername && bio === origBio) {
|
|
showSettingsToast('内容未变更，无需保存');
|
|
return;
|
|
}
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = '保存中...';
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('PUT', '/api/settings/profile', true);
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState !== 4) return;
|
|
btn.disabled = false;
|
|
btn.textContent = '保存';
|
|
|
|
try {
|
|
var res = JSON.parse(xhr.responseText);
|
|
if (res.success) {
|
|
showSettingsToast(res.message || '个人资料已更新');
|
|
origUsername = username;
|
|
origBio = bio;
|
|
} else {
|
|
showSettingsToast(res.message || '保存失败', true);
|
|
}
|
|
} catch (e) {
|
|
showSettingsToast('保存失败', true);
|
|
}
|
|
};
|
|
xhr.send(JSON.stringify({ username: username, bio: bio }));
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|