fix: 重写设置页模板，修复 sessions tab 重复和结构损坏
- 移除 sessions tab 重复3次的冗余内容 - 修复 profile 内容碎片混入 sessions 区块的问题 - 恢复正确的三tab结构（profile / sessions / account）
This commit is contained in:
@ -68,55 +68,6 @@
|
||||
<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 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>
|
||||
@ -194,55 +145,7 @@
|
||||
<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>
|
||||
{{else}}
|
||||
<!-- 账号信息 -->
|
||||
<div class="settings-card">
|
||||
<div class="settings-card-header">
|
||||
@ -489,8 +392,6 @@
|
||||
var iw = imgDW * zoom, ih = imgDH * zoom;
|
||||
var cx = Math.round((sw - iw) / 2); // 图片居中时的基准偏移
|
||||
var cy = Math.round((sh - ih) / 2);
|
||||
// 图片左边界必须在框左边之左：cx + panX <= fLeft → panX <= fLeft - cx
|
||||
// 图片右边界必须在框右边之右：cx + panX + iw >= fLeft + fSize → panX >= fLeft + fSize - cx - iw
|
||||
panX = Math.max(fLeft + fSize - cx - iw, Math.min(panX, fLeft - cx));
|
||||
panY = Math.max(fTop + fSize - cy - ih, Math.min(panY, fTop - cy));
|
||||
}
|
||||
@ -506,7 +407,6 @@
|
||||
cropImageEl.style.left = ox + 'px';
|
||||
cropImageEl.style.top = oy + 'px';
|
||||
|
||||
// 裁切框固定不变
|
||||
cropFrame.style.left = fLeft + 'px';
|
||||
cropFrame.style.top = fTop + 'px';
|
||||
cropFrame.style.width = fSize + 'px';
|
||||
@ -546,16 +446,14 @@
|
||||
pendingFile = null;
|
||||
}
|
||||
|
||||
// 将裁切框映射回原图像素坐标
|
||||
function getCropParams() {
|
||||
var sw = cropStage.clientWidth, sh = cropStage.clientHeight;
|
||||
var iw = imgDW * zoom, ih = imgDH * zoom;
|
||||
var ox = Math.round((sw - iw) / 2) + panX;
|
||||
var oy = Math.round((sh - ih) / 2) + panY;
|
||||
// 裁切框中心在 zoom=1 图片坐标中的位置
|
||||
var cx = (fLeft + fSize / 2 - ox) / zoom;
|
||||
var cy = (fTop + fSize / 2 - oy) / zoom;
|
||||
var cs = fSize / zoom; // zoom=1 坐标中的裁切边长
|
||||
var cs = fSize / zoom;
|
||||
var sx = imgNW / imgDW, sy = imgNH / imgDH;
|
||||
return {
|
||||
x: Math.round((cx - cs / 2) * sx),
|
||||
@ -564,7 +462,7 @@
|
||||
};
|
||||
}
|
||||
|
||||
// ---- 图片平移（点击拖拽 stage 任意位置） ----
|
||||
// ---- 图片平移 ----
|
||||
var panning = false, panStartX = 0, panStartY = 0, panInitX = 0, panInitY = 0;
|
||||
|
||||
function startPan(clientX, clientY) {
|
||||
@ -596,7 +494,6 @@
|
||||
cropStage.style.cursor = 'grab';
|
||||
});
|
||||
|
||||
// 触屏平移
|
||||
cropStage.addEventListener('touchstart', function (e) {
|
||||
e.preventDefault();
|
||||
var t = e.touches[0];
|
||||
@ -612,7 +509,6 @@
|
||||
cropStage.style.cursor = 'grab';
|
||||
});
|
||||
|
||||
// ---- 滚轮缩放 ----
|
||||
cropStage.addEventListener('wheel', function (e) {
|
||||
e.preventDefault();
|
||||
if (panning) return;
|
||||
@ -709,7 +605,6 @@
|
||||
showSettingsToast('密码已修改，请重新登录');
|
||||
currentPwd.value = '';
|
||||
newPwd.value = '';
|
||||
// 延时后执行登出并跳转到首页
|
||||
setTimeout(function () {
|
||||
window.location.href = '/';
|
||||
}, 2000);
|
||||
@ -798,7 +693,6 @@
|
||||
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';
|
||||
@ -840,7 +734,6 @@
|
||||
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 () {
|
||||
|
||||
Reference in New Issue
Block a user