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/assets/css/layer-soon.css
+146 -8
View File
@@ -45,15 +45,23 @@
color: inherit !important;
}
.layui-layer.soon-layer.soon-layer--pay,
.layui-layer-soon-layer.soon-layer--pay {
width: min(480px, calc(100vw - 32px)) !important;
max-width: min(480px, calc(100vw - 32px)) !important;
max-height: calc(100vh - 32px) !important;
border-radius: var(--soon-radius-lg) !important;
overflow: hidden;
}
.layui-layer.soon-layer.soon-layer--pay .layui-layer-content,
.layui-layer-soon-layer.soon-layer--pay .layui-layer-content {
overflow: visible !important;
max-height: none !important;
}
.layui-layer.soon-layer.soon-layer--pay,
.layui-layer-soon-layer.soon-layer--pay {
max-height: calc(100vh - 32px);
height: auto !important;
max-height: calc(100vh - 32px) !important;
padding: 0 !important;
box-sizing: border-box !important;
background: transparent !important;
}
.layui-layer.soon-layer.soon-layer--subscribe,
@@ -77,6 +85,136 @@
right: 14px;
}
.layui-layer.soon-layer.soon-layer--activate,
.layui-layer-soon-layer.soon-layer--activate {
width: min(480px, calc(100vw - 32px)) !important;
max-width: min(480px, calc(100vw - 32px)) !important;
max-height: calc(100vh - 32px) !important;
border-radius: var(--soon-radius-lg) !important;
overflow: hidden;
}
.layui-layer.soon-layer.soon-layer--activate .layui-layer-content,
.layui-layer-soon-layer.soon-layer--activate .layui-layer-content {
overflow: visible !important;
height: auto !important;
max-height: calc(100vh - 32px) !important;
padding: 0 !important;
box-sizing: border-box !important;
background: transparent !important;
}
.layui-layer.soon-layer.soon-layer--activate .layui-layer-setwin,
.layui-layer-soon-layer.soon-layer--activate .layui-layer-setwin,
.layui-layer.soon-layer.soon-layer--pay .layui-layer-setwin,
.layui-layer-soon-layer.soon-layer--pay .layui-layer-setwin,
.layui-layer.soon-layer.soon-layer--login-gate .layui-layer-setwin,
.layui-layer-soon-layer.soon-layer--login-gate .layui-layer-setwin {
top: 10px;
right: 10px;
z-index: 20;
}
/* title:false 时 layui 用 close2，默认 top/right:-28px 会裁到弹窗外；此处统一自定义关闭钮 */
.layui-layer.soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico,
.layui-layer-soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico,
.layui-layer.soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico,
.layui-layer-soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico,
.layui-layer.soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico,
.layui-layer-soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico,
body.soon-design-page .layui-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico,
body.soon-design-page .layui-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico,
body.soon-design-page .layui-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico {
position: relative !important;
top: auto !important;
right: auto !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 30px !important;
height: 30px !important;
margin: 0 !important;
border-radius: 8px;
background: rgba(255, 255, 255, 0.94) !important;
background-image: none !important;
filter: none !important;
opacity: 1 !important;
font-size: 0 !important;
line-height: 1 !important;
text-indent: 0 !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
transition: background 0.15s, box-shadow 0.15s;
cursor: pointer;
}
.layui-layer.soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico:hover,
.layui-layer-soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico:hover,
.layui-layer.soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico:hover,
.layui-layer-soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico:hover,
.layui-layer.soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico:hover,
.layui-layer-soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico:hover,
body.soon-design-page .layui-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico:hover,
body.soon-design-page .layui-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico:hover,
body.soon-design-page .layui-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico:hover {
background: #fff !important;
opacity: 1 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}
.layui-layer.soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico::before,
.layui-layer-soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico::before,
.layui-layer.soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico::before,
.layui-layer-soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico::before,
.layui-layer.soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico::before,
.layui-layer-soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico::before,
body.soon-design-page .layui-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico::before,
body.soon-design-page .layui-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico::before,
body.soon-design-page .layui-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico::before {
content: '×';
display: block;
position: static;
width: auto;
height: auto;
margin: 0;
padding: 0;
background: none !important;
transform: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1;
color: #1a1f24;
pointer-events: none;
}
.layui-layer.soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico::after,
.layui-layer-soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico::after,
.layui-layer.soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico::after,
.layui-layer-soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico::after,
.layui-layer.soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico::after,
.layui-layer-soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico::after {
display: none !important;
content: none !important;
}
.layui-layer.soon-layer.soon-layer--login-gate,
.layui-layer-soon-layer.soon-layer--login-gate {
width: min(400px, calc(100vw - 32px)) !important;
max-height: calc(100vh - 32px) !important;
border-radius: var(--soon-radius-lg);
overflow: hidden;
box-shadow: var(--soon-shadow);
}
.layui-layer.soon-layer.soon-layer--login-gate .layui-layer-content,
.layui-layer-soon-layer.soon-layer--login-gate .layui-layer-content {
overflow: visible !important;
height: auto !important;
max-height: none !important;
padding: 0 !important;
background: transparent !important;
}
.layui-layer.soon-layer .layui-layer-content.soon-layer-content--scroll,
.layui-layer-soon-layer .layui-layer-content.soon-layer-content--scroll {
overflow-x: hidden !important;
@@ -149,12 +287,12 @@ body.soon-design-page .layui-layer .layui-layer-content {
color: var(--soon-text) !important;
}
body.soon-design-page .layui-layer .layui-layer-setwin .layui-layer-ico {
body.soon-design-page .layui-layer:not(.soon-layer--activate):not(.soon-layer--pay):not(.soon-layer--login-gate) .layui-layer-setwin .layui-layer-ico {
filter: brightness(0) invert(1);
opacity: 0.88;
}
body.soon-design-page .layui-layer .layui-layer-setwin .layui-layer-ico:hover {
body.soon-design-page .layui-layer:not(.soon-layer--activate):not(.soon-layer--pay):not(.soon-layer--login-gate) .layui-layer-setwin .layui-layer-ico:hover {
opacity: 1;
}