yangchunjin/SoonDesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web 端本地缓存、首页与会员弹窗体验优化

Browse Source 
新增 IndexedDB 与最近文件 L1 缓存、云保存/打开链路；首页支持下载与清空本地缓存；修复清空 storage 后语言初始化报错；优化 design2 背景加载与侧栏标签样式；完善会员激活/支付弹层样式；后端补充文件缩略图字段与 thumb 接口。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
24kycj
2026-06-11 11:05:44 +08:00
parent 877fd278c2
commit 4ce4486b26
33 changed files with 3190 additions and 1143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-web/js/common/member-login-gate.js
+31 -17
View File
@@ -37,21 +37,29 @@
}
function shellHtml(reason) {
var mailIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16v12H4z"/><path d="M4 8l8 5 8-5"/></svg>';
var lockIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="10" rx="1"/><path d="M8 11V8a4 4 0 118 0v3"/></svg>';
return '<div class="soon-login-gate">' +
'<header class="soon-subscribe-modal__head">' +
'<span class="soon-subscribe-modal__eyebrow">登录</span>' +
'<h3 class="soon-subscribe-modal__title">登录后继续</h3>' +
'<p class="soon-subscribe-modal__desc">预览内' + esc(reason || '导出或打印') + '需先登录账号。</p>' +
'<header class="soon-login-gate__head">' +
'<span class="soon-login-gate__eyebrow">登录</span>' +
'<h3 class="soon-login-gate__title">登录后继续</h3>' +
'<p class="soon-login-gate__desc">预览内' + esc(reason || '导出或打印') + '成品需先登录账号。</p>' +
'</header>' +
'<form class="soon-login-gate__form" data-role="login-form">' +
'<div class="soon-input-wrap"><input type="email" name="email" required class="soon-input" placeholder="邮箱" autocomplete="email"></div>' +
'<div class="soon-input-wrap"><input type="password" name="password" required class="soon-input" placeholder="密码" autocomplete="current-password"></div>' +
'<p class="soon-login-gate__error" data-role="login-error" style="display:none"></p>' +
'<button type="submit" class="soon-btn soon-btn--block">登录</button>' +
'</form>' +
'<div class="soon-input-wrap soon-login-gate__field">' +
'<span class="soon-input-icon" aria-hidden="true">' + mailIcon + '</span>' +
'<input type="email" name="email" required class="soon-input soon-login-gate__input" placeholder="邮箱" autocomplete="email">' +
'</div>' +
'<div class="soon-input-wrap soon-login-gate__field">' +
'<span class="soon-input-icon" aria-hidden="true">' + lockIcon + '</span>' +
'<input type="password" name="password" required class="soon-input soon-login-gate__input" placeholder="密码" autocomplete="current-password">' +
'</div>' +
'<p class="soon-login-gate__error" data-role="login-error" hidden></p>' +
'<button type="submit" class="soon-btn soon-btn--block soon-login-gate__submit">登录</button>' +
'<p class="soon-login-gate__links">还没有账号？<a href="register.web.html" target="_blank" rel="noopener">立即注册</a></p>' +
'<footer class="soon-subscribe-modal__foot">' +
'<button type="button" class="soon-subscribe-modal__stay" data-action="stay">继续设计</button>' +
'</form>' +
'<footer class="soon-login-gate__foot">' +
'<button type="button" class="soon-login-gate__stay" data-action="stay">继续设计</button>' +
'</footer></div>';
}
@@ -77,7 +85,7 @@
form.addEventListener('submit', function (e) {
e.preventDefault();
if (errEl) {
errEl.style.display = 'none';
errEl.hidden = true;
errEl.textContent = '';
}
var email = (form.email && form.email.value || '').trim();
@@ -90,7 +98,7 @@
if (!j.ok || !j.data || !j.data.access_token) {
if (errEl) {
errEl.textContent = (j && j.message) || '登录失败';
errEl.style.display = 'block';
errEl.hidden = false;
}
return;
}
@@ -109,7 +117,7 @@
}).catch(function () {
if (errEl) {
errEl.textContent = '网络错误，请稍后重试';
errEl.style.display = 'block';
errEl.hidden = false;
}
});
});
@@ -122,20 +130,26 @@
try { layer.close(_gate.index); } catch (e) { /* ignore */ }
}
_gate.opts = opts;
var width = Math.min(420, window.innerWidth - 24);
var width = Math.min(400, window.innerWidth - 32);
layer.open({
type: 1,
skin: 'soon-layer',
title: false,
closeBtn: 1,
shade: [0.62, '#000'],
shadeClose: true,
area: [width + 'px', 'auto'],
offset: 'auto',
content: shellHtml(opts.reason),
success: function (layero, index) {
var layerEl = layero && layero[0] ? layero[0] : layero;
if (layerEl && layerEl.classList) layerEl.classList.add('soon-layer--subscribe');
if (layerEl && layerEl.classList) layerEl.classList.add('soon-layer--login-gate');
var content = layerEl && layerEl.querySelector ? layerEl.querySelector('.layui-layer-content') : null;
if (content) content.style.padding = '0';
if (content) {
content.style.padding = '0';
content.style.overflow = 'visible';
content.style.background = 'transparent';
}
var modal = layerEl.querySelector('.soon-login-gate');
_gate.index = index;
_gate.opts = opts;