MetaZone/MetaLab
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 设置页新增登录管理 TAB

Browse Source 
- Session 结构体新增 IP、UserAgent、Remark 字段，登录/注册时记录设备信息
- Store 接口新增 ListByUID、DeleteByUIDExclude 方法，MemoryStore 完整实现
- SessionManager 新增 ListByUID、DestroyOtherByUID、UpdateRemark 方法
- 新增 UA 轻量解析器（session/ua.go），提取浏览器/OS/设备类型
- 新增 settings_api_sessions.go，提供列表/踢出/一键踢出/备注 4 个 API
- 控制器层声明 sessionManager 最小接口（ISP），SettingsController 注入依赖
- Auth 中间件注入 sid 到 gin context，支持识别当前会话
- 设置页左侧导航增加登录管理入口，tab 白名单新增 sessions
- 前端实现设备列表展示（浏览器/OS/设备图标/IP/时间）、当前设备标识、备注输入、踢出按钮、一键踢出
- settings.css 新增会话管理全套样式及响应式适配
This commit is contained in:
Victor Jay
2026-05-30 23:58:37 +08:00
parent e3853071d6
commit d203447eb3
15 changed files with 884 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
templates/MetaLab-2026/html/settings/index.html
View File

@ -24,6 +24,15 @@
</svg>
账号信息
</a>
<a href="/settings/sessions"
class="settings-nav-item {{if eq .ActiveTab "sessions"}}active{{end}}">
<svg class="settings-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
<line x1="8" y1="21" x2="16" y2="21"/>
<line x1="12" y1="17" x2="12" y2="21"/>
</svg>
登录管理
</a>
</nav>
</aside>
@ -59,7 +68,56 @@
<div class="avatar-upload-wrap" id="avatarWrap">
{{if .User.Avatar}}
<img src="{{.User.Avatar}}?v={{.User.UpdatedAt.Unix}}" alt="avatar" class="avatar-preview" id="avatarPreview">
{{else}}
{{else if eq .ActiveTab "sessions"}}
<!-- 登录管理 -->
<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="session-list" id="sessionList">
{{range .Sessions}}
<div class="session-item{{if .IsCurrent}} session-current{{end}}" data-sid="{{.ID}}">
<div class="session-icon">
{{if eq .DeviceInfo.Device "Mobile"}}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
{{else if eq .DeviceInfo.Device "Tablet"}}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
{{else}}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
{{end}}
</div>
<div class="session-info">
<div class="session-title">
<span class="session-browser">{{.DeviceInfo.Browser}}</span>
<span class="session-os">/ {{.DeviceInfo.OS}}</span>
{{if .IsCurrent}}<span class="session-badge">当前设备</span>{{end}}
</div>
<div class="session-meta">
<span class="session-ip">IP: {{.IP}}</span>
<span class="session-time">登录于 {{.CreatedAt.Format "2006-01-02 15:04"}}</span>
<span class="session-time">最后活动 {{.LastAccess.Format "2006-01-02 15:04"}}</span>
</div>
<div class="session-remark-row">
<input type="text" class="session-remark-input" value="{{.Remark}}" placeholder="添加备注（如"我的笔记本"）" maxlength="32" data-sid="{{.ID}}" {{if .IsCurrent}}readonly{{end}}>
</div>
</div>
<div class="session-action">
{{if not .IsCurrent}}
<button class="session-kick-btn" data-sid="{{.ID}}">踢出</button>
{{end}}
</div>
</div>
{{end}}
{{if not .Sessions}}
<div class="session-empty">暂无活跃的登录会话</div>
{{end}}
</div>
</div>
<div class="settings-card-footer">
<button id="kickOthersBtn" class="settings-danger-btn">一键踢出其他设备</button>
<span class="form-hint">将强制退出除当前设备外的所有登录会话</span>
</div>
</div>
{{else}}
<div class="avatar-placeholder" id="avatarPreview">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg>
</div>
@ -87,7 +145,104 @@
</div>
</div>
</div>
{{else}}
{{else if eq .ActiveTab "sessions"}}
<!-- 登录管理 -->
<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="session-list" id="sessionList">
{{range .Sessions}}
<div class="session-item{{if .IsCurrent}} session-current{{end}}" data-sid="{{.ID}}">
<div class="session-icon">
{{if eq .DeviceInfo.Device "Mobile"}}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
{{else if eq .DeviceInfo.Device "Tablet"}}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
{{else}}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
{{end}}
</div>
<div class="session-info">
<div class="session-title">
<span class="session-browser">{{.DeviceInfo.Browser}}</span>
<span class="session-os">/ {{.DeviceInfo.OS}}</span>
{{if .IsCurrent}}<span class="session-badge">当前设备</span>{{end}}
</div>
<div class="session-meta">
<span class="session-ip">IP: {{.IP}}</span>
<span class="session-time">登录于 {{.CreatedAt.Format "2006-01-02 15:04"}}</span>
<span class="session-time">最后活动 {{.LastAccess.Format "2006-01-02 15:04"}}</span>
</div>
<div class="session-remark-row">
<input type="text" class="session-remark-input" value="{{.Remark}}" placeholder="添加备注（如"我的笔记本"）" maxlength="32" data-sid="{{.ID}}" {{if .IsCurrent}}readonly{{end}}>
</div>
</div>
<div class="session-action">
{{if not .IsCurrent}}
<button class="session-kick-btn" data-sid="{{.ID}}">踢出</button>
{{end}}
</div>
</div>
{{end}}
{{if not .Sessions}}
<div class="session-empty">暂无活跃的登录会话</div>
{{end}}
</div>
</div>
<div class="settings-card-footer">
<button id="kickOthersBtn" class="settings-danger-btn">一键踢出其他设备</button>
<span class="form-hint">将强制退出除当前设备外的所有登录会话</span>
</div>
</div>
{{else if eq .ActiveTab "sessions"}}
<!-- 登录管理 -->
<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="session-list" id="sessionList">
{{range .Sessions}}
<div class="session-item{{if .IsCurrent}} session-current{{end}}" data-sid="{{.ID}}">
<div class="session-icon">
{{if eq .DeviceInfo.Device "Mobile"}}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
{{else if eq .DeviceInfo.Device "Tablet"}}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
{{else}}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
{{end}}
</div>
<div class="session-info">
<div class="session-title">
<span class="session-browser">{{.DeviceInfo.Browser}}</span>
<span class="session-os">/ {{.DeviceInfo.OS}}</span>
{{if .IsCurrent}}<span class="session-badge">当前设备</span>{{end}}
</div>
<div class="session-meta">
<span class="session-ip">IP: {{.IP}}</span>
<span class="session-time">登录于 {{.CreatedAt.Format "2006-01-02 15:04"}}</span>
<span class="session-time">最后活动 {{.LastAccess.Format "2006-01-02 15:04"}}</span>
</div>
<div class="session-remark-row">
<input type="text" class="session-remark-input" value="{{.Remark}}" placeholder="添加备注（如"我的笔记本"）" maxlength="32" data-sid="{{.ID}}" {{if .IsCurrent}}readonly{{end}}>
</div>
</div>
<div class="session-action">
{{if not .IsCurrent}}
<button class="session-kick-btn" data-sid="{{.ID}}">踢出</button>
{{end}}
</div>
</div>
{{end}}
{{if not .Sessions}}
<div class="session-empty">暂无活跃的登录会话</div>
{{end}}
</div>
</div>
<div class="settings-card-footer">
<button id="kickOthersBtn" class="settings-danger-btn">一键踢出其他设备</button>
<span class="form-hint">将强制退出除当前设备外的所有登录会话</span>
</div>
</div>
<!-- 账号信息 -->
<div class="settings-card">
<div class="settings-card-header">
@ -615,6 +770,136 @@
}));
});
}
// ===== 登录管理 Tab =====
(function () {
var kickBtns = document.querySelectorAll('.session-kick-btn');
var kickOthersBtn = document.getElementById('kickOthersBtn');
var remarkInputs = document.querySelectorAll('.session-remark-input');
if (!kickBtns.length && !kickOthersBtn && !remarkInputs.length) return;
// ---- 踢出单个设备 ----
kickBtns.forEach(function (btn) {
btn.addEventListener('click', function () {
var sid = btn.getAttribute('data-sid');
if (!sid) return;
if (!confirm('确定要踢出该设备吗？')) return;
btn.disabled = true;
btn.textContent = '踢出中...';
var xhr = new XMLHttpRequest();
xhr.open('DELETE', '/api/settings/sessions/' + encodeURIComponent(sid), 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 || '已踢出该设备');
// 移除该设备行（带淡出动画）
var item = btn.closest('.session-item');
if (item) {
item.style.transition = 'opacity .3s ease, transform .3s ease';
item.style.opacity = '0';
item.style.transform = 'translateX(20px)';
setTimeout(function () { item.remove(); }, 300);
}
} else {
showSettingsToast(res.message || '操作失败', true);
}
} catch (e) {
showSettingsToast('操作失败', true);
}
};
xhr.send();
});
});
// ---- 一键踢出其他设备 ----
if (kickOthersBtn) {
kickOthersBtn.addEventListener('click', function () {
var otherCount = document.querySelectorAll('.session-item:not(.session-current)').length;
if (otherCount === 0) {
showSettingsToast('没有其他在线设备');
return;
}
if (!confirm('确定要踢出所有其他设备（共 ' + otherCount + ' 台）吗？')) return;
kickOthersBtn.disabled = true;
kickOthersBtn.textContent = '处理中...';
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/settings/sessions/destroy-others', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;
kickOthersBtn.disabled = false;
kickOthersBtn.textContent = '一键踢出其他设备';
try {
var res = JSON.parse(xhr.responseText);
if (res.success) {
showSettingsToast(res.message || '已踢出所有其他设备');
// 移除非当前设备行
var others = document.querySelectorAll('.session-item:not(.session-current)');
others.forEach(function (item, i) {
setTimeout(function () {
item.style.transition = 'opacity .3s ease, transform .3s ease';
item.style.opacity = '0';
item.style.transform = 'translateX(20px)';
setTimeout(function () { item.remove(); }, 300);
}, i * 100);
});
} else {
showSettingsToast(res.message || '操作失败', true);
}
} catch (e) {
showSettingsToast('操作失败', true);
}
};
xhr.send();
});
}
// ---- 备注保存 ----
var remarkTimers = {};
remarkInputs.forEach(function (input) {
input.addEventListener('blur', function () {
var sid = input.getAttribute('data-sid');
var remark = input.value.trim();
if (!sid) return;
saveRemark(sid, remark);
});
input.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
input.blur();
}
});
});
function saveRemark(sid, remark) {
if (remarkTimers[sid]) clearTimeout(remarkTimers[sid]);
remarkTimers[sid] = setTimeout(function () {
var xhr = new XMLHttpRequest();
xhr.open('PUT', '/api/settings/sessions/' + encodeURIComponent(sid) + '/remark', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;
try {
var res = JSON.parse(xhr.responseText);
if (res.success) {
showSettingsToast('备注已保存');
} else {
showSettingsToast(res.message || '保存失败', true);
}
} catch (e) {
showSettingsToast('保存失败', true);
}
};
xhr.send(JSON.stringify({ remark: remark }));
}, 500);
}
})();
})();
</script>
</body>

197
templates/MetaLab-2026/static/css/settings.css
View File

@ -568,3 +568,200 @@ body {
opacity: .6;
cursor: not-allowed;
}
/* ---------- Session Management ---------- */
.session-list {
display: flex;
flex-direction: column;
gap: 0;
}
.session-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.1rem 0;
border-bottom: 1px solid #f0f0f0;
}
.session-item:last-child {
border-bottom: none;
}
.session-item.session-current {
background: rgba(46, 204, 113, .04);
margin: 0 -2rem;
padding: 1.1rem 2rem;
border-radius: 6px;
border-bottom: none;
}
.session-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #f5f7fa;
border-radius: 10px;
color: var(--color-text-light);
margin-top: 2px;
}
.session-current .session-icon {
background: rgba(46, 204, 113, .1);
color: #2ecc71;
}
.session-info {
flex: 1;
min-width: 0;
}
.session-title {
display: flex;
align-items: center;
gap: .4rem;
flex-wrap: wrap;
margin-bottom: .3rem;
}
.session-browser {
font-size: .92rem;
font-weight: 600;
color: var(--color-text);
}
.session-os {
font-size: .85rem;
color: var(--color-text-light);
}
.session-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 4px;
font-size: .75rem;
font-weight: 600;
background: #e8f5e9;
color: #2e7d32;
margin-left: .2rem;
}
.session-meta {
display: flex;
gap: .8rem;
flex-wrap: wrap;
font-size: .8rem;
color: #aaa;
margin-bottom: .5rem;
}
.session-ip {
font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
font-size: .78rem;
background: #f5f5f5;
padding: 1px 6px;
border-radius: 3px;
}
.session-remark-row {
margin-top: .25rem;
}
.session-remark-input {
width: 100%;
max-width: 320px;
padding: .35rem .6rem;
font-size: .82rem;
font-family: inherit;
color: var(--color-text);
background: #f9fafb;
border: 1px solid var(--color-border);
border-radius: 5px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.session-remark-input:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(52, 152, 219, .15);
background: #fff;
}
.session-remark-input[readonly] {
background: transparent;
border-color: transparent;
cursor: default;
}
.session-remark-input[readonly]:focus {
box-shadow: none;
border-color: transparent;
}
.session-action {
flex-shrink: 0;
align-self: center;
}
.session-kick-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .35rem .9rem;
font-size: .82rem;
font-weight: 600;
font-family: inherit;
color: #e74c3c;
background: #fff5f5;
border: 1px solid #fecaca;
border-radius: 5px;
cursor: pointer;
transition: all .15s ease;
white-space: nowrap;
}
.session-kick-btn:hover {
background: #fee2e2;
border-color: #e74c3c;
}
.session-kick-btn:disabled {
opacity: .5;
cursor: not-allowed;
}
.session-empty {
text-align: center;
padding: 2rem 0;
color: #bbb;
font-size: .9rem;
}
/* ---------- Session Responsive ---------- */
@media (max-width: 768px) {
.session-item {
flex-wrap: wrap;
gap: .75rem;
}
.session-item.session-current {
margin: 0 -1.25rem;
padding: 1.1rem 1.25rem;
}
.session-action {
width: 100%;
}
.session-kick-btn {
width: 100%;
justify-content: center;
}
.session-remark-input {
max-width: 100%;
}
}