Web 端本地缓存、首页与会员弹窗体验优化
新增 IndexedDB 与最近文件 L1 缓存、云保存/打开链路；首页支持下载与清空本地缓存；修复清空 storage 后语言初始化报错；优化 design2 背景加载与侧栏标签样式；完善会员激活/支付弹层样式；后端补充文件缩略图字段与 thumb 接口。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
24kycj
@@ -424,6 +424,7 @@ body.soon-design-page,
|
||||
body.soon-design-page .layui-fluid.main,
|
||||
body.soon-design-page .layui-row {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
html:has(body.soon-design-page) {
|
||||
@@ -431,15 +432,22 @@ html:has(body.soon-design-page) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.soon-design-page,
|
||||
body.soon-design-page *,
|
||||
body.soon-design-page *::before,
|
||||
body.soon-design-page *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.soon-design-page {
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
max-width: 100vw;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #1e1e1e;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@@ -448,7 +456,21 @@ body.soon-design-page .soon-design-portal-bar,
|
||||
body.soon-design-page .soon-portal-topbar {
|
||||
position: static !important;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.soon-design-page .soon-portal-topbar__brand {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
body.soon-design-page .soon-portal-topbar__actions {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
body.soon-design-page #portal-topbar {
|
||||
@@ -457,6 +479,7 @@ body.soon-design-page #portal-topbar {
|
||||
|
||||
body.soon-design-page .layui-fluid.main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: auto !important;
|
||||
overflow: hidden;
|
||||
@@ -467,6 +490,7 @@ body.soon-design-page .layui-fluid.main {
|
||||
|
||||
body.soon-design-page .layui-row {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
@@ -477,7 +501,7 @@ body.soon-design-page .layui-row {
|
||||
}
|
||||
|
||||
body.soon-design-page .col-left {
|
||||
flex: 1;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
margin-right: 0;
|
||||
float: none;
|
||||
@@ -509,15 +533,116 @@ body.soon-design-page .tools-bar {
|
||||
background-color: #31373d;
|
||||
}
|
||||
|
||||
body.soon-design-page .tools-bar.left-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.soon-design-page .tools-bar.left-bar .mode-left {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.soon-design-page .tools-bar.left-bar .mode-warp {
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
flex-wrap: nowrap;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
body.soon-design-page .tools-bar.left-bar .mode-warp::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.soon-design-page .tools-bar.left-bar .mode3 {
|
||||
float: none;
|
||||
flex-shrink: 0;
|
||||
line-height: normal;
|
||||
margin-right: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
body.soon-design-page #version_change {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
min-width: 60px;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body.soon-design-page .soon-side-tabs {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: stretch;
|
||||
margin-left: 10px;
|
||||
height: 32px;
|
||||
border: 1px solid #646E76;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background-color: #2a2f35;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.soon-design-page .soon-side-tabs .ui-button {
|
||||
margin-left: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
min-width: 48px;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
padding: 0 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
color: #e8eaed;
|
||||
}
|
||||
|
||||
body.soon-design-page .soon-side-tabs .ui-button + .ui-button {
|
||||
border-left: 1px solid #646E76;
|
||||
}
|
||||
|
||||
body.soon-design-page .soon-side-tabs .ui-button.ui-button-active {
|
||||
background-color: #646E76;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.soon-design-page .soon-side-tabs .ui-button:not(.ui-button-active):hover {
|
||||
background-color: #4a535c;
|
||||
}
|
||||
|
||||
body.soon-design-page .soon-side-tabs .ui-button.ui-button-active:hover {
|
||||
background-color: #74808a;
|
||||
}
|
||||
|
||||
body.soon-design-page .soon-tool-text-btn {
|
||||
flex-shrink: 0;
|
||||
height: 32px;
|
||||
min-width: 52px;
|
||||
margin-left: 10px;
|
||||
padding: 0 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.soon-design-page .img-warp {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -567,15 +692,18 @@ body.soon-design-page .container .right {
|
||||
|
||||
body.soon-design-page #canvas-div {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body.soon-design-page .canvas-wrapper {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -803,461 +803,7 @@
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* ── 支付弹窗 ── */
|
||||
.soon-pay-sheet {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 22px 26px 20px;
|
||||
background: linear-gradient(160deg, rgba(0, 150, 136, 0.12) 0%, rgba(30, 36, 42, 0.95) 55%);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.soon-pay-sheet__eyebrow {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--soon-accent);
|
||||
}
|
||||
|
||||
.soon-pay-sheet__title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--soon-text-strong);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__order {
|
||||
margin: 8px 0 0;
|
||||
font-size: 11px;
|
||||
font-family: ui-monospace, Consolas, monospace;
|
||||
color: var(--soon-text-muted);
|
||||
}
|
||||
|
||||
.soon-pay-sheet__head-price {
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__currency {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--soon-text-muted);
|
||||
vertical-align: top;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__amount {
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
color: var(--soon-text-strong);
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__body {
|
||||
padding: 22px 26px 0;
|
||||
}
|
||||
|
||||
.soon-pay-stepper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0 0 24px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.soon-pay-stepper__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 72px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.soon-pay-stepper__bridge {
|
||||
flex: 1;
|
||||
min-width: 24px;
|
||||
max-width: 56px;
|
||||
height: 2px;
|
||||
margin-top: 15px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 1px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.soon-pay-stepper__bridge.is-done {
|
||||
background: linear-gradient(90deg, var(--soon-accent), rgba(77, 182, 172, 0.6));
|
||||
}
|
||||
|
||||
.soon-pay-stepper__dot {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--soon-text-muted);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
border: 2px solid rgba(255, 255, 255, 0.12);
|
||||
transition: background 0.2s, border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.soon-pay-stepper__label {
|
||||
font-size: 11px;
|
||||
color: var(--soon-text-muted);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.soon-pay-stepper__item.is-active .soon-pay-stepper__dot {
|
||||
color: #fff;
|
||||
background: var(--soon-accent);
|
||||
border-color: var(--soon-accent);
|
||||
box-shadow: 0 0 0 4px rgba(0, 150, 136, 0.18);
|
||||
}
|
||||
|
||||
.soon-pay-stepper__item.is-active .soon-pay-stepper__label {
|
||||
color: var(--soon-text-strong);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.soon-pay-stepper__item.is-done .soon-pay-stepper__dot {
|
||||
color: #fff;
|
||||
background: rgba(77, 182, 172, 0.35);
|
||||
border-color: var(--soon-accent);
|
||||
}
|
||||
|
||||
.soon-pay-stepper__item.is-done .soon-pay-stepper__label {
|
||||
color: var(--soon-text);
|
||||
}
|
||||
|
||||
.soon-pay-section {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.soon-pay-section__title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--soon-text-muted);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.soon-pay-channels {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.soon-pay-channels--single {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-fixed {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-fixed:hover {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-fixed.is-active:hover {
|
||||
border-color: var(--soon-accent);
|
||||
background: rgba(0, 150, 136, 0.07);
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-fixed .soon-pay-channel__radio {
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-fixed.is-active .soon-pay-channel__radio::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.soon-pay-channel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.soon-pay-channel:hover {
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-active {
|
||||
border-color: var(--soon-accent);
|
||||
background: rgba(0, 150, 136, 0.07);
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 150, 136, 0.15);
|
||||
}
|
||||
|
||||
.soon-pay-channel[data-ch="wechat"].is-active {
|
||||
border-color: #07c160;
|
||||
background: rgba(7, 193, 96, 0.08);
|
||||
box-shadow: inset 0 0 0 1px rgba(7, 193, 96, 0.2);
|
||||
}
|
||||
|
||||
.soon-pay-channel[data-ch="alipay"].is-active {
|
||||
border-color: #1677ff;
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
box-shadow: inset 0 0 0 1px rgba(22, 119, 255, 0.2);
|
||||
}
|
||||
|
||||
.soon-pay-channel__radio {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-active .soon-pay-channel__radio {
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-active .soon-pay-channel__radio::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 3px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.soon-pay-channel[data-ch="wechat"].is-active .soon-pay-channel__radio { color: #07c160; }
|
||||
.soon-pay-channel[data-ch="alipay"].is-active .soon-pay-channel__radio { color: #1677ff; }
|
||||
|
||||
.soon-pay-channel__icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.soon-pay-channel__icon--wechat { background: linear-gradient(135deg, #06ae56, #07c160); }
|
||||
.soon-pay-channel__icon--alipay { background: linear-gradient(135deg, #0958d9, #1677ff); }
|
||||
|
||||
.soon-pay-channel__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.soon-pay-channel__name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--soon-text-strong);
|
||||
}
|
||||
|
||||
.soon-pay-channel__hint {
|
||||
font-size: 11px;
|
||||
color: var(--soon-text-muted);
|
||||
}
|
||||
|
||||
.soon-pay-qr-panel {
|
||||
min-height: 168px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.soon-pay-sheet--checkout .soon-pay-qr-panel {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.soon-pay-sheet--checkout .soon-pay-stepper {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 28px 20px;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-empty__icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: rgba(255, 255, 255, 0.22);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-empty__icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-empty__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--soon-text);
|
||||
}
|
||||
|
||||
.soon-pay-checkout-empty__desc {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--soon-text-muted);
|
||||
line-height: 1.55;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.soon-pay-checkout-loading p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--soon-text-muted);
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 22px 20px 18px;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready--alipay {
|
||||
padding: 18px 16px 14px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready__brand {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready__brand--wechat { background: linear-gradient(135deg, #06ae56, #07c160); }
|
||||
.soon-pay-checkout-ready__brand--alipay { background: linear-gradient(135deg, #0958d9, #1677ff); }
|
||||
|
||||
.soon-pay-checkout-ready__title {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--soon-text-strong);
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready__desc {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--soon-text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready__qr {
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready__qr canvas,
|
||||
.soon-pay-checkout-ready__qr img {
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready__btn {
|
||||
min-width: 180px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__foot {
|
||||
padding: 12px 26px 18px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.soon-pay-sheet--checkout .soon-pay-sheet__foot {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.soon-pay-status {
|
||||
margin: 0 0 12px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--soon-text-muted);
|
||||
}
|
||||
|
||||
.soon-pay-status--ok { color: #4db6ac; }
|
||||
.soon-pay-status--err { color: var(--soon-danger); }
|
||||
|
||||
.soon-pay-sheet__cta {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__cta--secondary {
|
||||
margin-top: 8px;
|
||||
}
|
||||
@import url('pay-sheet.css');
|
||||
|
||||
.soon-member-page ::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
.soon-member-page ::-webkit-scrollbar-thumb {
|
||||
|
||||
@@ -0,0 +1,472 @@
|
||||
/* 支付确认弹窗（设计页 / 会员页共用） */
|
||||
.soon-pay-sheet {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
border-radius: 14px;
|
||||
background: var(--soon-bg-panel);
|
||||
color: var(--soon-text);
|
||||
}
|
||||
|
||||
.soon-pay-sheet__toolbar {
|
||||
padding: 12px 16px 0;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__back {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 22px 52px 20px 26px;
|
||||
background: linear-gradient(160deg, rgba(0, 150, 136, 0.12) 0%, rgba(30, 36, 42, 0.95) 55%);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.soon-pay-sheet__head-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__eyebrow {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--soon-accent);
|
||||
}
|
||||
|
||||
.soon-pay-sheet__title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--soon-text-strong);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__order {
|
||||
margin: 8px 0 0;
|
||||
font-size: 11px;
|
||||
font-family: ui-monospace, Consolas, monospace;
|
||||
color: var(--soon-text-muted);
|
||||
}
|
||||
|
||||
.soon-pay-sheet__head-price {
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__currency {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--soon-text-muted);
|
||||
vertical-align: top;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__amount {
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
color: var(--soon-text-strong);
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__body {
|
||||
padding: 22px 26px 0;
|
||||
}
|
||||
|
||||
.soon-pay-stepper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0 0 24px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.soon-pay-stepper__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 72px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.soon-pay-stepper__bridge {
|
||||
flex: 1;
|
||||
min-width: 24px;
|
||||
max-width: 56px;
|
||||
height: 2px;
|
||||
margin-top: 15px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 1px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.soon-pay-stepper__bridge.is-done {
|
||||
background: linear-gradient(90deg, var(--soon-accent), rgba(77, 182, 172, 0.6));
|
||||
}
|
||||
|
||||
.soon-pay-stepper__dot {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--soon-text-muted);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
border: 2px solid rgba(255, 255, 255, 0.12);
|
||||
transition: background 0.2s, border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.soon-pay-stepper__label {
|
||||
font-size: 11px;
|
||||
color: var(--soon-text-muted);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.soon-pay-stepper__item.is-active .soon-pay-stepper__dot {
|
||||
color: #fff;
|
||||
background: var(--soon-accent);
|
||||
border-color: var(--soon-accent);
|
||||
box-shadow: 0 0 0 4px rgba(0, 150, 136, 0.18);
|
||||
}
|
||||
|
||||
.soon-pay-stepper__item.is-active .soon-pay-stepper__label {
|
||||
color: var(--soon-text-strong);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.soon-pay-stepper__item.is-done .soon-pay-stepper__dot {
|
||||
color: #fff;
|
||||
background: rgba(77, 182, 172, 0.35);
|
||||
border-color: var(--soon-accent);
|
||||
}
|
||||
|
||||
.soon-pay-stepper__item.is-done .soon-pay-stepper__label {
|
||||
color: var(--soon-text);
|
||||
}
|
||||
|
||||
.soon-pay-section {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.soon-pay-section__title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--soon-text-muted);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.soon-pay-channels {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.soon-pay-channels--single {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-fixed {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-fixed:hover {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-fixed.is-active:hover {
|
||||
border-color: var(--soon-accent);
|
||||
background: rgba(0, 150, 136, 0.07);
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-fixed .soon-pay-channel__radio {
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-fixed.is-active .soon-pay-channel__radio::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.soon-pay-channel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.soon-pay-channel:hover {
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-active {
|
||||
border-color: var(--soon-accent);
|
||||
background: rgba(0, 150, 136, 0.07);
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 150, 136, 0.15);
|
||||
}
|
||||
|
||||
.soon-pay-channel[data-ch="wechat"].is-active {
|
||||
border-color: #07c160;
|
||||
background: rgba(7, 193, 96, 0.08);
|
||||
box-shadow: inset 0 0 0 1px rgba(7, 193, 96, 0.2);
|
||||
}
|
||||
|
||||
.soon-pay-channel[data-ch="alipay"].is-active {
|
||||
border-color: #1677ff;
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
box-shadow: inset 0 0 0 1px rgba(22, 119, 255, 0.2);
|
||||
}
|
||||
|
||||
.soon-pay-channel__radio {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-active .soon-pay-channel__radio {
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
.soon-pay-channel.is-active .soon-pay-channel__radio::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 3px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.soon-pay-channel[data-ch="wechat"].is-active .soon-pay-channel__radio { color: #07c160; }
|
||||
.soon-pay-channel[data-ch="alipay"].is-active .soon-pay-channel__radio { color: #1677ff; }
|
||||
|
||||
.soon-pay-channel__icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.soon-pay-channel__icon--wechat { background: linear-gradient(135deg, #06ae56, #07c160); }
|
||||
.soon-pay-channel__icon--alipay { background: linear-gradient(135deg, #0958d9, #1677ff); }
|
||||
|
||||
.soon-pay-channel__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.soon-pay-channel__name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--soon-text-strong);
|
||||
}
|
||||
|
||||
.soon-pay-channel__hint {
|
||||
font-size: 11px;
|
||||
color: var(--soon-text-muted);
|
||||
}
|
||||
|
||||
.soon-pay-qr-panel {
|
||||
min-height: 168px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.soon-pay-sheet--checkout .soon-pay-qr-panel {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.soon-pay-sheet--checkout .soon-pay-stepper {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 28px 20px;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-empty__icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: rgba(255, 255, 255, 0.22);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-empty__icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-empty__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--soon-text);
|
||||
}
|
||||
|
||||
.soon-pay-checkout-empty__desc {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--soon-text-muted);
|
||||
line-height: 1.55;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.soon-pay-checkout-loading p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--soon-text-muted);
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 22px 20px 18px;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready--alipay {
|
||||
padding: 18px 16px 14px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready__brand {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready__brand--wechat { background: linear-gradient(135deg, #06ae56, #07c160); }
|
||||
.soon-pay-checkout-ready__brand--alipay { background: linear-gradient(135deg, #0958d9, #1677ff); }
|
||||
|
||||
.soon-pay-checkout-ready__title {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--soon-text-strong);
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready__desc {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--soon-text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready__qr {
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready__qr canvas,
|
||||
.soon-pay-checkout-ready__qr img {
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.soon-pay-checkout-ready__btn {
|
||||
min-width: 180px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__foot {
|
||||
padding: 12px 26px 18px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
margin-top: 16px;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.soon-pay-sheet--checkout .soon-pay-sheet__foot {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.soon-pay-status {
|
||||
margin: 0 0 12px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--soon-text-muted);
|
||||
}
|
||||
|
||||
.soon-pay-status--ok { color: #4db6ac; }
|
||||
.soon-pay-status--err { color: var(--soon-danger); }
|
||||
|
||||
.soon-pay-sheet__cta {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.soon-pay-sheet__cta--secondary {
|
||||
margin-top: 8px;
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('pay-sheet.css');
|
||||
|
||||
.soon-subscribe-modal {
|
||||
text-align: left;
|
||||
background: var(--soon-bg-panel);
|
||||
@@ -223,31 +225,149 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.soon-login-gate {
|
||||
text-align: left;
|
||||
background: var(--soon-bg-panel);
|
||||
color: var(--soon-text);
|
||||
border-radius: var(--soon-radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.soon-login-gate__head {
|
||||
padding: 22px 48px 16px 22px;
|
||||
border-bottom: 1px solid var(--soon-border-subtle);
|
||||
background: linear-gradient(160deg, rgba(0, 150, 136, 0.12) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.soon-login-gate__eyebrow {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--soon-accent);
|
||||
}
|
||||
|
||||
.soon-login-gate__title {
|
||||
margin: 0;
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
color: var(--soon-text-strong);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.soon-login-gate__desc {
|
||||
margin: 6px 0 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
color: var(--soon-text-muted);
|
||||
}
|
||||
|
||||
.soon-login-gate__form {
|
||||
padding: 0 24px 8px;
|
||||
padding: 18px 22px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.soon-login-gate__form .soon-input-wrap {
|
||||
width: 100%;
|
||||
.soon-login-gate__field.soon-input-wrap {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.soon-login-gate__input.soon-input {
|
||||
height: 42px;
|
||||
padding: 0 14px 0 40px;
|
||||
background: var(--soon-bg-deep);
|
||||
border: 1px solid var(--soon-border-subtle);
|
||||
border-radius: var(--soon-radius-sm);
|
||||
color: var(--soon-text-strong);
|
||||
font-size: 14px;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.soon-login-gate__input.soon-input::placeholder {
|
||||
color: var(--soon-text-muted);
|
||||
}
|
||||
|
||||
.soon-login-gate__input.soon-input:focus {
|
||||
border-color: var(--soon-accent);
|
||||
box-shadow: var(--soon-focus-ring);
|
||||
}
|
||||
|
||||
.soon-login-gate__input.soon-input:-webkit-autofill,
|
||||
.soon-login-gate__input.soon-input:-webkit-autofill:hover,
|
||||
.soon-login-gate__input.soon-input:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: var(--soon-text-strong);
|
||||
caret-color: var(--soon-text-strong);
|
||||
transition: background-color 99999s ease-out 0s;
|
||||
-webkit-box-shadow: 0 0 0 1000px var(--soon-bg-deep) inset;
|
||||
box-shadow: 0 0 0 1000px var(--soon-bg-deep) inset;
|
||||
border: 1px solid var(--soon-border-subtle);
|
||||
}
|
||||
|
||||
.soon-login-gate__error {
|
||||
color: #f87171;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--soon-radius-sm);
|
||||
background: rgba(229, 115, 115, 0.12);
|
||||
border: 1px solid rgba(229, 115, 115, 0.28);
|
||||
color: #fca5a5;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.soon-login-gate__error[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.soon-login-gate__submit {
|
||||
margin-top: 2px;
|
||||
height: 42px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.soon-login-gate__links {
|
||||
padding: 0 24px 16px;
|
||||
margin: 0;
|
||||
padding: 0 0 4px;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
text-align: center;
|
||||
color: var(--soon-text-muted);
|
||||
}
|
||||
|
||||
.soon-login-gate__links a {
|
||||
color: #7dd3fc;
|
||||
color: var(--soon-accent-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.soon-login-gate__links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.soon-login-gate__foot {
|
||||
padding: 12px 22px 18px;
|
||||
border-top: 1px solid var(--soon-border-subtle);
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.soon-login-gate__stay {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 9px 16px;
|
||||
border: 1px solid var(--soon-border-subtle);
|
||||
border-radius: var(--soon-radius-sm);
|
||||
background: transparent;
|
||||
color: var(--soon-text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.soon-login-gate__stay:hover {
|
||||
color: var(--soon-text);
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.soon-activate-price {
|
||||
@@ -265,12 +385,6 @@
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.soon-activate-price__value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.soon-activate-price__hint {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
@@ -283,25 +397,69 @@
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.soon-activate-channel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.soon-activate-channel.is-active {
|
||||
border-color: #38bdf8;
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
}
|
||||
|
||||
.soon-activate-load {
|
||||
margin: 12px 0 0;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
.soon-activate-modal {
|
||||
border-radius: var(--soon-radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.soon-activate-modal .soon-subscribe-modal__head {
|
||||
padding: 22px 52px 18px 24px;
|
||||
}
|
||||
|
||||
.soon-activate-modal .soon-subscribe-modal__body {
|
||||
padding: 18px 24px 20px;
|
||||
}
|
||||
|
||||
.soon-activate-modal .soon-subscribe-modal__foot {
|
||||
padding: 16px 24px 20px;
|
||||
}
|
||||
|
||||
.soon-activate-price__value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--soon-text-strong);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.soon-activate-channel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 10px;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--soon-text);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.soon-activate-channel input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.soon-activate-channel.is-active {
|
||||
border-color: #1677ff;
|
||||
background: rgba(22, 119, 255, 0.1);
|
||||
box-shadow: inset 0 0 0 1px rgba(22, 119, 255, 0.18);
|
||||
}
|
||||
|
||||
.soon-activate-channel.is-active::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #1677ff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -38,4 +38,122 @@
|
||||
var n = String(rel || '').replace(/^\/+/, '');
|
||||
return window.SOON_JS_BASE + n;
|
||||
};
|
||||
|
||||
/** 等 HTMLImage 解码完成后再 toDataURL / setSrc，避免间歇性空白背景 */
|
||||
window.soonFabricImageWhenReady = function (image, cb, skipEmbed) {
|
||||
if (!image) {
|
||||
if (typeof cb === 'function') cb(null);
|
||||
return;
|
||||
}
|
||||
function finalize() {
|
||||
if (skipEmbed) {
|
||||
if (typeof cb === 'function') cb(image);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
var dataUrl = image.toDataURL();
|
||||
if (dataUrl && dataUrl.length > 500) {
|
||||
image.setSrc(dataUrl, function (img) {
|
||||
if (typeof cb === 'function') cb(img || image);
|
||||
});
|
||||
return;
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
if (typeof cb === 'function') cb(image);
|
||||
}
|
||||
var el = image.getElement ? image.getElement() : null;
|
||||
if (!el) {
|
||||
finalize();
|
||||
return;
|
||||
}
|
||||
if (el.complete && el.naturalWidth > 0) {
|
||||
finalize();
|
||||
return;
|
||||
}
|
||||
el.onload = function () { finalize(); };
|
||||
el.onerror = function () {
|
||||
if (typeof cb === 'function') cb(null);
|
||||
};
|
||||
};
|
||||
|
||||
window.soonFabricImageFromAsset = function (assetName, onReady, onFail, retryLeft, skipEmbed) {
|
||||
if (typeof fabric === 'undefined' || !fabric.Image) {
|
||||
if (typeof onFail === 'function') onFail();
|
||||
return;
|
||||
}
|
||||
var retries = retryLeft == null ? 2 : retryLeft;
|
||||
var url = window.soonAsset(assetName);
|
||||
fabric.Image.fromURL(url, function (image) {
|
||||
if (!image || !image.width) {
|
||||
if (retries > 0) {
|
||||
setTimeout(function () {
|
||||
window.soonFabricImageFromAsset(assetName, onReady, onFail, retries - 1, skipEmbed);
|
||||
}, 150);
|
||||
return;
|
||||
}
|
||||
if (typeof onFail === 'function') onFail();
|
||||
return;
|
||||
}
|
||||
function deliver(img) {
|
||||
if (img && typeof onReady === 'function') onReady(img);
|
||||
else if (retries > 0) {
|
||||
setTimeout(function () {
|
||||
window.soonFabricImageFromAsset(assetName, onReady, onFail, retries - 1, skipEmbed);
|
||||
}, 150);
|
||||
} else if (typeof onFail === 'function') onFail();
|
||||
}
|
||||
if (skipEmbed) {
|
||||
window.soonFabricImageWhenReady(image, deliver, true);
|
||||
return;
|
||||
}
|
||||
window.soonFabricImageWhenReady(image, deliver);
|
||||
}, null, { crossOrigin: 'anonymous' });
|
||||
};
|
||||
|
||||
window.soonRunWhenCanvasReady = function (selector, fn) {
|
||||
function tryRun() {
|
||||
var el = typeof selector === 'string' ? document.querySelector(selector) : selector;
|
||||
var w = el ? (el.clientWidth || el.width || 0) : 0;
|
||||
if ((!w || w < 50) && window.SOON_DEPLOY_CONFIG) {
|
||||
requestAnimationFrame(function () {
|
||||
requestAnimationFrame(tryRun);
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (typeof fn === 'function') fn(w || 800);
|
||||
}
|
||||
tryRun();
|
||||
};
|
||||
|
||||
var SOON_LOCALE_CODES = { zh: 1, ozh: 1, en: 1 };
|
||||
|
||||
window.soonNormalizeLocaleCode = function (loc) {
|
||||
if (!loc) return 'zh';
|
||||
if (SOON_LOCALE_CODES[loc]) return loc;
|
||||
var s = String(loc);
|
||||
if (s.indexOf('zh') === 0) return s.indexOf('TW') >= 0 ? 'ozh' : 'zh';
|
||||
return 'en';
|
||||
};
|
||||
|
||||
window.soonResolveLocale = function (cb) {
|
||||
if (typeof cb !== 'function') return;
|
||||
var stored;
|
||||
try { stored = localStorage.getItem('lang'); } catch (e) { stored = null; }
|
||||
if (stored && SOON_LOCALE_CODES[stored]) {
|
||||
cb(stored);
|
||||
return;
|
||||
}
|
||||
var bridge = window.platformBridge;
|
||||
if (!bridge || typeof bridge.getLocale !== 'function') {
|
||||
cb('zh');
|
||||
return;
|
||||
}
|
||||
var ret;
|
||||
try { ret = bridge.getLocale(); } catch (e) { cb('zh'); return; }
|
||||
if (ret && typeof ret.then === 'function') {
|
||||
ret.then(function (loc) { cb(window.soonNormalizeLocaleCode(loc)); }).catch(function () { cb('zh'); });
|
||||
return;
|
||||
}
|
||||
cb(window.soonNormalizeLocaleCode(ret));
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -39,18 +39,243 @@
|
||||
return FILE_PREFIX + id + ':v' + version;
|
||||
}
|
||||
|
||||
function soonIsTemplateKey(key) {
|
||||
return !!(key && typeof key === 'string' && key.indexOf(TEMPLATE_PREFIX) === 0);
|
||||
}
|
||||
|
||||
function soonNeedsSaveDialog(key) {
|
||||
return !key || soonIsTemplateKey(key);
|
||||
}
|
||||
|
||||
function soonDefaultNewSoonName() {
|
||||
var d = new Date();
|
||||
function pad(n) { return n < 10 ? '0' + n : String(n); }
|
||||
var yy = String(d.getFullYear()).slice(-2);
|
||||
var stamp = yy + pad(d.getMonth() + 1) + pad(d.getDate()) +
|
||||
pad(d.getHours()) + pad(d.getMinutes()) + pad(d.getSeconds());
|
||||
return 'design' + stamp + '.soon';
|
||||
}
|
||||
|
||||
function soonEnsureSoonExt(name) {
|
||||
var n = String(name || 'design.soon').trim();
|
||||
if (!/\.soon$/i.test(n)) n = (n.replace(/\.soon$/i, '') || 'design') + '.soon';
|
||||
return n;
|
||||
}
|
||||
|
||||
function soonSessionSlug(nameOrKey) {
|
||||
var s = String(nameOrKey || 'design').replace(/^soondesign_session:/, '').split(/[/\\]/).pop();
|
||||
s = s.replace(/\.soon$/i, '');
|
||||
s = s.replace(/-\d{10,}$/, '');
|
||||
return s || 'design';
|
||||
}
|
||||
|
||||
function soonMakeSessionKey(nameOrKey) {
|
||||
return 'soondesign_session:' + soonSessionSlug(nameOrKey);
|
||||
}
|
||||
|
||||
function soonSessionDisplayName(keyOrName) {
|
||||
return soonEnsureSoonExt(soonSessionSlug(keyOrName));
|
||||
}
|
||||
|
||||
function soonBuildSavePreviewPic(canvas) {
|
||||
var THUMB_MAX = 102400;
|
||||
if (!canvas || typeof canvas.getObjects !== 'function') return '';
|
||||
var hidden = [];
|
||||
canvas.getObjects().forEach(function (obj) {
|
||||
if (obj.isGuideLine) {
|
||||
hidden.push(obj);
|
||||
obj.visible = false;
|
||||
}
|
||||
});
|
||||
if (hidden.length) canvas.renderAll();
|
||||
var mult = 0.18;
|
||||
var quality = 0.72;
|
||||
var url = '';
|
||||
for (var i = 0; i < 3; i++) {
|
||||
try {
|
||||
var candidate = canvas.toDataURL({ format: 'jpeg', quality: quality, multiplier: mult });
|
||||
if (candidate && candidate.indexOf('data:image/') === 0 && candidate.length <= THUMB_MAX) {
|
||||
url = candidate;
|
||||
break;
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
quality -= 0.18;
|
||||
mult -= 0.04;
|
||||
}
|
||||
hidden.forEach(function (obj) { obj.visible = true; });
|
||||
if (hidden.length) canvas.renderAll();
|
||||
return url;
|
||||
}
|
||||
|
||||
function soonApplySavePreview(con_o, canvas) {
|
||||
if (!con_o) return con_o;
|
||||
var pic = soonBuildSavePreviewPic(canvas);
|
||||
if (pic) con_o.frontDisplayPic = pic;
|
||||
return con_o;
|
||||
}
|
||||
|
||||
function soonSaveDialogDefaultPath(openKey) {
|
||||
if (soonNeedsSaveDialog(openKey)) return soonDefaultNewSoonName();
|
||||
return openKey || undefined;
|
||||
}
|
||||
|
||||
function soonEnsureSaveFileName(fp) {
|
||||
var name = String(fp || 'design.soon');
|
||||
if (typeof window !== 'undefined' && window.platformBridge && window.fs == null) {
|
||||
return soonEnsureSoonExt(name);
|
||||
}
|
||||
if (typeof window !== 'undefined' && window.path && window.path.extname) {
|
||||
if (window.path.extname(name) !== '.soon') {
|
||||
name = (name.replace(/\.soon$/i, '') || 'design') + '.soon';
|
||||
}
|
||||
} else if (!/\.soon$/i.test(name)) {
|
||||
name = (name.replace(/\.soon$/i, '') || 'design') + '.soon';
|
||||
}
|
||||
return soonEnsureSoonExt(name);
|
||||
}
|
||||
|
||||
function soonReportSaveError(err) {
|
||||
if (typeof window.soonShowApiError === 'function') {
|
||||
window.soonShowApiError({
|
||||
status: err && err.status,
|
||||
message: (err && err.message) || '保存失败',
|
||||
code: err && err.code
|
||||
});
|
||||
} else {
|
||||
soonToast((err && err.message) || '保存失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function soonWriteSoonContentWeb(fp, content, prevOpenKey, onDone, onError) {
|
||||
if (!window.platformBridge || !window.platformBridge.writeFile) return false;
|
||||
window.platformBridge.writeFile(fp, content).then(function (res) {
|
||||
if (typeof onDone === 'function') onDone(res, prevOpenKey);
|
||||
}).catch(function (err) {
|
||||
if (typeof onError === 'function') onError(err);
|
||||
else soonReportSaveError(err);
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
function soonDownloadBlob(filename, content, mime) {
|
||||
var name = soonEnsureSoonExt(filename || 'design.soon');
|
||||
var blob = content instanceof Blob
|
||||
? content
|
||||
: new Blob([content], { type: mime || 'application/json' });
|
||||
var a = document.createElement('a');
|
||||
a.download = name;
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.click();
|
||||
URL.revokeObjectURL(a.href);
|
||||
}
|
||||
|
||||
function soonDownloadRecentItem(item) {
|
||||
if (!item) return Promise.resolve();
|
||||
var key = item.filePath || item.key || '';
|
||||
var name = soonEnsureSoonExt(item.name || 'design.soon');
|
||||
var kind = item.kind || (typeof window.soonRecentKindFromKey === 'function'
|
||||
? window.soonRecentKindFromKey(key) : 'local');
|
||||
|
||||
if (kind === 'template') {
|
||||
var tpl = soonParseTemplateKey(key);
|
||||
if (!tpl) {
|
||||
soonToast('无法下载模板', 'error');
|
||||
return Promise.resolve();
|
||||
}
|
||||
var base = (window.SOON_DEPLOY_CONFIG && window.SOON_DEPLOY_CONFIG.api_v1_base) || '';
|
||||
if (!base) {
|
||||
soonToast('下载地址未配置', 'error');
|
||||
return Promise.resolve();
|
||||
}
|
||||
return fetch(base + '/templates/' + tpl.id + '/file', { headers: { Accept: 'application/json' } })
|
||||
.then(function (r) {
|
||||
if (!r.ok) throw new Error('download_failed');
|
||||
return r.text();
|
||||
})
|
||||
.then(function (text) {
|
||||
soonDownloadBlob(name, text, 'application/json');
|
||||
})
|
||||
.catch(function () {
|
||||
soonToast('模板下载失败', 'error');
|
||||
});
|
||||
}
|
||||
|
||||
if (kind === 'cloud') {
|
||||
function tryCloudApiDownload() {
|
||||
if (!item.fileId || !soonGetAccessToken()) return Promise.resolve(false);
|
||||
var bridge = window.platformBridge;
|
||||
if (!bridge || typeof bridge.downloadCloudFile !== 'function') return Promise.resolve(false);
|
||||
return bridge.downloadCloudFile(item.fileId, name).then(function () { return true; }).catch(function () {
|
||||
soonToast('下载失败', 'error');
|
||||
return true;
|
||||
});
|
||||
}
|
||||
if (key && typeof window.soonLocalGet === 'function') {
|
||||
return window.soonLocalGet(key).then(function (hit) {
|
||||
if (hit && hit.json) {
|
||||
soonDownloadBlob(name, JSON.stringify(hit.json), 'application/json');
|
||||
return;
|
||||
}
|
||||
return tryCloudApiDownload().then(function (done) {
|
||||
if (!done) soonToast('请先打开或保存该文件', 'warn');
|
||||
});
|
||||
});
|
||||
}
|
||||
return tryCloudApiDownload().then(function (done) {
|
||||
if (!done) soonToast('请先打开或保存该文件', 'warn');
|
||||
});
|
||||
}
|
||||
|
||||
if (key.indexOf('soondesign_session:') === 0 || kind === 'local') {
|
||||
if (typeof window.soonLocalGet !== 'function') {
|
||||
soonToast('本地缓存不可用', 'error');
|
||||
return Promise.resolve();
|
||||
}
|
||||
return window.soonLocalGet(key).then(function (hit) {
|
||||
if (!hit || !hit.json) {
|
||||
soonToast('请先打开或保存该文件', 'warn');
|
||||
return;
|
||||
}
|
||||
soonDownloadBlob(name, JSON.stringify(hit.json), 'application/json');
|
||||
});
|
||||
}
|
||||
|
||||
soonToast('无法下载该文件', 'warn');
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
function soonLookupRecentCloudName(fileId) {
|
||||
if (!fileId || typeof window.soonRecentList !== 'function') return '';
|
||||
var items = window.soonRecentList();
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
if (items[i].fileId === fileId && items[i].name) return items[i].name;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function soonResolveCloudFileName(fileKey) {
|
||||
if (!fileKey || fileKey.indexOf(FILE_PREFIX) !== 0) return '';
|
||||
var parsed = soonParseFileKey(fileKey);
|
||||
if (!parsed) return '';
|
||||
var meta = window._soonFileMeta;
|
||||
if (meta && meta.id === parsed.id && meta.name) return meta.name;
|
||||
var recentName = soonLookupRecentCloudName(parsed.id);
|
||||
if (recentName) return recentName;
|
||||
return '';
|
||||
}
|
||||
|
||||
function soonNormalizeSoonName(pathOrName) {
|
||||
var n = String(pathOrName || 'design.soon');
|
||||
if (n.indexOf(FILE_PREFIX) === 0) {
|
||||
var meta = window._soonFileMeta;
|
||||
return (meta && meta.name) ? meta.name : 'design.soon';
|
||||
var resolved = soonResolveCloudFileName(n);
|
||||
if (resolved) return resolved;
|
||||
return 'design.soon';
|
||||
}
|
||||
if (n.indexOf(TEMPLATE_PREFIX) === 0) {
|
||||
var tpl = soonParseTemplateKey(n);
|
||||
return tpl ? ('template-' + tpl.id + '.soon') : 'template.soon';
|
||||
return soonDefaultNewSoonName();
|
||||
}
|
||||
if (n.indexOf('soondesign_session:') === 0) {
|
||||
n = n.replace(/^soondesign_session:/, '');
|
||||
return soonSessionDisplayName(n);
|
||||
}
|
||||
n = n.split(/[/\\]/).pop();
|
||||
if (!/\.soon$/i.test(n)) n = (n.replace(/\.soon$/i, '') || 'design') + '.soon';
|
||||
@@ -128,10 +353,12 @@
|
||||
var parsed = soonParseFileKey(fileKey);
|
||||
if (!parsed) return;
|
||||
var prev = window._soonFileMeta || {};
|
||||
var name = (opts && opts.name) || (prev.id === parsed.id ? prev.name : '') || '';
|
||||
if (!name) name = soonLookupRecentCloudName(parsed.id);
|
||||
window._soonFileMeta = {
|
||||
id: parsed.id,
|
||||
version: parsed.version != null ? parsed.version : prev.version,
|
||||
name: (opts && opts.name) || (prev.id === parsed.id ? prev.name : '') || ''
|
||||
name: name
|
||||
};
|
||||
}
|
||||
|
||||
@@ -301,11 +528,15 @@
|
||||
|
||||
function soonPutSoonSession(j, fileName) {
|
||||
if (!j) return '';
|
||||
var hint = (fileName || 'design').replace(/\.soon$/i, '');
|
||||
var key = 'soondesign_session:' + hint + '-' + Date.now();
|
||||
var displayName = soonEnsureSoonExt(fileName || 'design.soon');
|
||||
var key = soonMakeSessionKey(displayName);
|
||||
if (typeof window.soonLocalCacheAndThumb === 'function') {
|
||||
window.soonLocalCacheAndThumb(key, j, { source: 'session', name: displayName });
|
||||
try { sessionStorage.setItem(key, 'idb'); } catch (e) { /* ignore */ }
|
||||
return key;
|
||||
}
|
||||
try {
|
||||
sessionStorage.setItem(key, JSON.stringify(j));
|
||||
try { localStorage.setItem(key, JSON.stringify(j)); } catch (e2) { /* ignore quota */ }
|
||||
return key;
|
||||
} catch (e) {
|
||||
return '';
|
||||
@@ -318,6 +549,9 @@
|
||||
soonToast('无法打开文件（存储空间不足）', 'error');
|
||||
return '';
|
||||
}
|
||||
if (typeof window.soonRecentUpsertFromOpen === 'function') {
|
||||
window.soonRecentUpsertFromOpen(key, j);
|
||||
}
|
||||
soonScheduleCloudImport(key, fileName);
|
||||
var type = soonSoonTypeFromJson(j);
|
||||
if (window.platformBridge && window.platformBridge.openDesignPage) {
|
||||
@@ -369,25 +603,55 @@
|
||||
if (!pending || pending.sessionKey !== currentFileKey) return;
|
||||
try { sessionStorage.removeItem(PENDING_IMPORT_KEY); } catch (e) { /* ignore */ }
|
||||
|
||||
var jsonRaw;
|
||||
try {
|
||||
jsonRaw = sessionStorage.getItem(currentFileKey);
|
||||
if (!jsonRaw && typeof localStorage !== 'undefined') jsonRaw = localStorage.getItem(currentFileKey);
|
||||
} catch (e) {
|
||||
return;
|
||||
function loadJsonForImport() {
|
||||
if (typeof window.soonLocalGet === 'function') {
|
||||
return window.soonLocalGet(currentFileKey).then(function (hit) {
|
||||
if (hit && hit.json) return hit.json;
|
||||
try {
|
||||
var raw = sessionStorage.getItem(currentFileKey);
|
||||
if (raw && raw !== 'idb') return JSON.parse(raw);
|
||||
} catch (e) { /* ignore */ }
|
||||
return null;
|
||||
});
|
||||
}
|
||||
try {
|
||||
var raw = sessionStorage.getItem(currentFileKey);
|
||||
if (raw && raw !== 'idb') return JSON.parse(raw);
|
||||
} catch (e) { /* ignore */ }
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
if (!jsonRaw) return;
|
||||
|
||||
var bridge = window.platformBridge;
|
||||
if (!bridge || typeof bridge.importSoonFile !== 'function') return;
|
||||
|
||||
bridge.importSoonFile(pending.name || 'design.soon', jsonRaw).then(function (res) {
|
||||
if (res && res.fileKey && typeof window.openAs !== 'undefined' && window.openAs) {
|
||||
window.openAs.name = res.fileKey;
|
||||
}
|
||||
loadJsonForImport().then(function (jsonObj) {
|
||||
if (!jsonObj) return;
|
||||
var oldKey = currentFileKey;
|
||||
return bridge.importSoonFile(pending.name || 'design.soon', jsonObj).then(function (res) {
|
||||
if (res && res.fileKey && typeof window.openAs !== 'undefined' && window.openAs) {
|
||||
window.openAs.name = res.fileKey;
|
||||
}
|
||||
if (res && res.fileKey && typeof window.soonLocalRenameKey === 'function') {
|
||||
window.soonLocalRenameKey(oldKey, res.fileKey, { source: 'cloud', name: res.name || pending.name });
|
||||
}
|
||||
try {
|
||||
sessionStorage.removeItem(oldKey);
|
||||
localStorage.removeItem(oldKey);
|
||||
} catch (e) { /* ignore */ }
|
||||
if (typeof window.soonRecentOnCloudSave === 'function') {
|
||||
window.soonRecentOnCloudSave(res, oldKey, soonSoonTypeFromJson(jsonObj));
|
||||
}
|
||||
});
|
||||
}).catch(function (err) {
|
||||
if (err && err.status) return;
|
||||
soonToast((err && err.message) ? err.message : '云端登记失败，可稍后保存重试', 'warn');
|
||||
if (typeof window.soonShowApiError === 'function') {
|
||||
window.soonShowApiError({
|
||||
status: err && err.status,
|
||||
message: (err && err.message) || '云端登记失败，可稍后保存重试',
|
||||
code: err && err.code
|
||||
});
|
||||
} else {
|
||||
soonToast((err && err.message) || '云端登记失败，可稍后保存重试', 'warn');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -462,13 +726,13 @@
|
||||
return tplParsed ? ('模板 #' + tplParsed.id) : pathOrKey;
|
||||
}
|
||||
if (pathOrKey.indexOf(FILE_PREFIX) === 0) {
|
||||
var meta = window._soonFileMeta;
|
||||
if (meta && meta.name) return meta.name;
|
||||
var resolved = soonResolveCloudFileName(pathOrKey);
|
||||
if (resolved) return resolved;
|
||||
var parsed = soonParseFileKey(pathOrKey);
|
||||
return parsed ? ('文件 #' + parsed.id) : pathOrKey;
|
||||
}
|
||||
if (pathOrKey.indexOf('soondesign_session:') === 0) {
|
||||
return pathOrKey.replace(/^soondesign_session:/, '');
|
||||
return soonSessionDisplayName(pathOrKey);
|
||||
}
|
||||
return String(pathOrKey).split(/[/\\]/).pop();
|
||||
}
|
||||
@@ -503,6 +767,7 @@
|
||||
window.soonParseFileKey = soonParseFileKey;
|
||||
window.soonMakeFileKey = soonMakeFileKey;
|
||||
window.soonNormalizeSoonName = soonNormalizeSoonName;
|
||||
window.soonResolveCloudFileName = soonResolveCloudFileName;
|
||||
window.soonApplyCloudMeta = soonApplyCloudMeta;
|
||||
window.soonBindFileMeta = soonBindFileMeta;
|
||||
window.soonSyncOpenNavigation = soonSyncOpenNavigation;
|
||||
@@ -529,6 +794,21 @@
|
||||
window.soonParseApiError = soonParseApiError;
|
||||
window.soonShowApiError = soonShowApiError;
|
||||
window.soonDisplayFileName = soonDisplayFileName;
|
||||
window.soonIsTemplateKey = soonIsTemplateKey;
|
||||
window.soonNeedsSaveDialog = soonNeedsSaveDialog;
|
||||
window.soonDefaultNewSoonName = soonDefaultNewSoonName;
|
||||
window.soonEnsureSoonExt = soonEnsureSoonExt;
|
||||
window.soonSessionSlug = soonSessionSlug;
|
||||
window.soonMakeSessionKey = soonMakeSessionKey;
|
||||
window.soonSessionDisplayName = soonSessionDisplayName;
|
||||
window.soonBuildSavePreviewPic = soonBuildSavePreviewPic;
|
||||
window.soonApplySavePreview = soonApplySavePreview;
|
||||
window.soonSaveDialogDefaultPath = soonSaveDialogDefaultPath;
|
||||
window.soonEnsureSaveFileName = soonEnsureSaveFileName;
|
||||
window.soonReportSaveError = soonReportSaveError;
|
||||
window.soonWriteSoonContentWeb = soonWriteSoonContentWeb;
|
||||
window.soonDownloadBlob = soonDownloadBlob;
|
||||
window.soonDownloadRecentItem = soonDownloadRecentItem;
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', soonHandlePayReturn);
|
||||
|
||||
@@ -141,6 +141,8 @@
|
||||
}
|
||||
_gate.plan = plan;
|
||||
if (statusEl) statusEl.textContent = '';
|
||||
var priceEl = modal.querySelector('.soon-activate-price__value');
|
||||
if (priceEl) priceEl.textContent = '¥' + planPriceDisplay(plan);
|
||||
updatePayButton(modal);
|
||||
}).catch(function () {
|
||||
if (statusEl) statusEl.textContent = '网络错误，请稍后重试';
|
||||
@@ -205,24 +207,36 @@
|
||||
try { layer.close(_gate.payIndex); } catch (e) { /* ignore */ }
|
||||
}
|
||||
_gate = { index: null, payIndex: null, plan: null, gateOpts: opts };
|
||||
var width = Math.min(520, window.innerWidth - 24);
|
||||
var width = Math.min(480, window.innerWidth - 32);
|
||||
layer.open({
|
||||
type: 1,
|
||||
skin: 'soon-layer',
|
||||
title: false,
|
||||
closeBtn: 1,
|
||||
fixed: true,
|
||||
offset: 'auto',
|
||||
shade: [0.68, '#000'],
|
||||
shadeClose: true,
|
||||
maxWidth: width,
|
||||
area: [width + 'px', 'auto'],
|
||||
content: shellHtml(opts.reason, null),
|
||||
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--activate');
|
||||
}
|
||||
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';
|
||||
}
|
||||
var modal = layerEl.querySelector('.soon-activate-modal');
|
||||
_gate.index = index;
|
||||
_gate.gateOpts = opts;
|
||||
if (modal) bindModal(modal);
|
||||
requestAnimationFrame(function () {
|
||||
if (typeof layer.style === 'function') layer.style(index);
|
||||
});
|
||||
},
|
||||
end: function () {
|
||||
var payIdx = _gate.payIndex;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -473,22 +473,29 @@
|
||||
displayChannels: channels,
|
||||
});
|
||||
var payCtrl = null;
|
||||
var width = Math.min(480, window.innerWidth - 32);
|
||||
var idx = layer.open({
|
||||
type: 1,
|
||||
skin: 'soon-layer',
|
||||
title: false,
|
||||
closeBtn: 1,
|
||||
fixed: true,
|
||||
offset: 'auto',
|
||||
shade: [0.72, '#000'],
|
||||
shadeClose: !!opts.shadeClose,
|
||||
area: ['480px'],
|
||||
maxWidth: width,
|
||||
area: [width + 'px', 'auto'],
|
||||
content: html,
|
||||
success: function (layero) {
|
||||
success: function (layero, index) {
|
||||
var layerEl = layero && layero[0] ? layero[0] : layero;
|
||||
if (layerEl && layerEl.classList) {
|
||||
layerEl.classList.add('soon-layer--pay');
|
||||
var layerContent = layerEl.querySelector('.layui-layer-content');
|
||||
if (layerContent) {
|
||||
layerContent.style.padding = '0';
|
||||
layerContent.style.overflow = 'visible';
|
||||
layerContent.style.maxHeight = 'none';
|
||||
layerContent.style.background = 'transparent';
|
||||
}
|
||||
}
|
||||
var sheet = layerEl.querySelector('.soon-pay-sheet');
|
||||
@@ -505,6 +512,9 @@
|
||||
},
|
||||
onBack: opts.onBack,
|
||||
});
|
||||
requestAnimationFrame(function () {
|
||||
if (typeof layer.style === 'function') layer.style(index);
|
||||
});
|
||||
},
|
||||
end: function () {
|
||||
if (payCtrl) payCtrl.destroy();
|
||||
|
||||
@@ -19,8 +19,43 @@
|
||||
}
|
||||
}
|
||||
|
||||
function initClearCache() {
|
||||
var btn = document.getElementById('auth_clear_cache');
|
||||
if (!btn) return;
|
||||
btn.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
if (typeof layui === 'undefined' || typeof window.soonClearLocalDesignCache !== 'function') return;
|
||||
layui.use('layer', function () {
|
||||
var layer = layui.layer;
|
||||
layer.open({
|
||||
type: 1,
|
||||
skin: 'soon-layer',
|
||||
title: '清除本地缓存',
|
||||
content: '<div class="soon-dialog-body">将清除最近文件与本地缓存，不会退出登录。未上传的本地编辑将丢失。</div>',
|
||||
btn: ['确定清除', '取消'],
|
||||
btnAlign: 'r',
|
||||
area: ['320px', 'auto'],
|
||||
shadeClose: true,
|
||||
yes: function (index) {
|
||||
layer.close(index);
|
||||
window.soonClearLocalDesignCache().then(function () {
|
||||
if (typeof window.soonToast === 'function') window.soonToast('已清除本地缓存', 'success');
|
||||
else layer.msg('已清除本地缓存', { icon: 1, time: 1200 });
|
||||
setTimeout(function () {
|
||||
if (/design[12]\.web\.html/i.test(location.pathname || '')) location.href = 'index.web.html';
|
||||
else location.reload();
|
||||
}, 400);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initTopbar(options) {
|
||||
options = options || {};
|
||||
initClearCache();
|
||||
|
||||
var tok = localStorage.getItem('soon_access') || '';
|
||||
var login = document.getElementById('auth_login');
|
||||
var reg = document.getElementById('auth_register');
|
||||
|
||||
@@ -37,7 +37,8 @@
|
||||
function toolsBlock(lang, linksHtml) {
|
||||
return '<div class="soon-portal-topbar__tools">' +
|
||||
lang +
|
||||
(linksHtml ? '<nav class="soon-portal-topbar__links" aria-label="导航">' + linksHtml + '</nav>' : '') +
|
||||
(linksHtml ? '<nav class="soon-portal-topbar__links" aria-label="导航">' + linksHtml +
|
||||
'<a href="#" id="auth_clear_cache" class="soon-portal-topbar__link">清除缓存</a></nav>' : '') +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,244 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var DB_NAME = 'soondesign_local';
|
||||
var DB_VERSION = 1;
|
||||
var MAX_BLOBS = 20;
|
||||
var THUMB_MAX_BYTES = 102400;
|
||||
var dbPromise = null;
|
||||
var idbAvailable = typeof indexedDB !== 'undefined';
|
||||
|
||||
function soonExtractThumbFromJson(json) {
|
||||
if (!json || !json.frontDisplayPic || typeof json.frontDisplayPic !== 'string') return '';
|
||||
var candidate = json.frontDisplayPic.trim();
|
||||
if (candidate.indexOf('data:image/') !== 0) return '';
|
||||
if (candidate.length > THUMB_MAX_BYTES) return '';
|
||||
return candidate;
|
||||
}
|
||||
|
||||
function txDone(tx) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
tx.oncomplete = function () { resolve(); };
|
||||
tx.onerror = function () { reject(tx.error || new Error('idb_tx_error')); };
|
||||
tx.onabort = function () { reject(tx.error || new Error('idb_tx_abort')); };
|
||||
});
|
||||
}
|
||||
|
||||
function reqPromise(req) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
req.onsuccess = function () { resolve(req.result); };
|
||||
req.onerror = function () { reject(req.error || new Error('idb_req_error')); };
|
||||
});
|
||||
}
|
||||
|
||||
function soonLocalOpen() {
|
||||
if (!idbAvailable) return Promise.resolve(null);
|
||||
if (dbPromise) return dbPromise;
|
||||
dbPromise = new Promise(function (resolve, reject) {
|
||||
var req = indexedDB.open(DB_NAME, DB_VERSION);
|
||||
req.onupgradeneeded = function (e) {
|
||||
var db = e.target.result;
|
||||
if (!db.objectStoreNames.contains('blobs')) {
|
||||
db.createObjectStore('blobs', { keyPath: 'cacheKey' });
|
||||
}
|
||||
if (!db.objectStoreNames.contains('thumbs')) {
|
||||
db.createObjectStore('thumbs', { keyPath: 'cacheKey' });
|
||||
}
|
||||
};
|
||||
req.onsuccess = function () { resolve(req.result); };
|
||||
req.onerror = function () {
|
||||
idbAvailable = false;
|
||||
dbPromise = null;
|
||||
reject(req.error || new Error('idb_open_failed'));
|
||||
};
|
||||
}).catch(function () {
|
||||
idbAvailable = false;
|
||||
dbPromise = null;
|
||||
return null;
|
||||
});
|
||||
return dbPromise;
|
||||
}
|
||||
|
||||
function soonLocalGet(cacheKey) {
|
||||
if (!cacheKey || !idbAvailable) return Promise.resolve(null);
|
||||
return soonLocalOpen().then(function (db) {
|
||||
if (!db) return null;
|
||||
var tx = db.transaction('blobs', 'readonly');
|
||||
return reqPromise(tx.objectStore('blobs').get(cacheKey)).then(function (row) {
|
||||
if (!row || row.json == null) return null;
|
||||
return {
|
||||
json: row.json,
|
||||
meta: {
|
||||
name: row.name,
|
||||
type: row.type,
|
||||
source: row.source,
|
||||
updatedAt: row.updatedAt,
|
||||
savedAt: row.savedAt,
|
||||
bytes: row.bytes
|
||||
}
|
||||
};
|
||||
});
|
||||
}).catch(function () { return null; });
|
||||
}
|
||||
|
||||
function soonLocalEvictLRU(max) {
|
||||
max = max || MAX_BLOBS;
|
||||
return soonLocalOpen().then(function (db) {
|
||||
if (!db) return;
|
||||
var tx = db.transaction(['blobs', 'thumbs'], 'readwrite');
|
||||
var blobStore = tx.objectStore('blobs');
|
||||
return reqPromise(blobStore.getAll()).then(function (rows) {
|
||||
if (!rows || rows.length <= max) return txDone(tx);
|
||||
rows.sort(function (a, b) { return (a.savedAt || 0) - (b.savedAt || 0); });
|
||||
var toRemove = rows.length - max;
|
||||
for (var i = 0; i < toRemove; i++) {
|
||||
var k = rows[i].cacheKey;
|
||||
blobStore.delete(k);
|
||||
tx.objectStore('thumbs').delete(k);
|
||||
}
|
||||
return txDone(tx);
|
||||
});
|
||||
}).catch(function () { /* ignore */ });
|
||||
}
|
||||
|
||||
function soonLocalPut(cacheKey, json, meta) {
|
||||
if (!cacheKey || json == null || !idbAvailable) return Promise.resolve(false);
|
||||
meta = meta || {};
|
||||
var jsonObj = typeof json === 'string' ? (function () {
|
||||
try { return JSON.parse(json); } catch (e) { return null; }
|
||||
})() : json;
|
||||
if (!jsonObj) return Promise.resolve(false);
|
||||
var bytes = 0;
|
||||
try { bytes = JSON.stringify(jsonObj).length; } catch (e) { bytes = 0; }
|
||||
var row = {
|
||||
cacheKey: cacheKey,
|
||||
json: jsonObj,
|
||||
name: meta.name || '',
|
||||
type: meta.type != null ? meta.type : (jsonObj.soonType || 1),
|
||||
source: meta.source || '',
|
||||
updatedAt: meta.updatedAt || '',
|
||||
savedAt: Date.now(),
|
||||
bytes: bytes
|
||||
};
|
||||
return soonLocalOpen().then(function (db) {
|
||||
if (!db) return false;
|
||||
var tx = db.transaction('blobs', 'readwrite');
|
||||
tx.objectStore('blobs').put(row);
|
||||
return txDone(tx).then(function () {
|
||||
return soonLocalEvictLRU(MAX_BLOBS).then(function () { return true; });
|
||||
});
|
||||
}).catch(function () { return false; });
|
||||
}
|
||||
|
||||
function soonLocalPutThumb(cacheKey, dataUrl) {
|
||||
if (!cacheKey || !dataUrl || !idbAvailable) return Promise.resolve(false);
|
||||
if (String(dataUrl).length > THUMB_MAX_BYTES) return Promise.resolve(false);
|
||||
return soonLocalOpen().then(function (db) {
|
||||
if (!db) return false;
|
||||
var tx = db.transaction('thumbs', 'readwrite');
|
||||
tx.objectStore('thumbs').put({ cacheKey: cacheKey, dataUrl: dataUrl, savedAt: Date.now() });
|
||||
return txDone(tx).then(function () { return true; });
|
||||
}).catch(function () { return false; });
|
||||
}
|
||||
|
||||
function soonLocalGetThumb(cacheKey) {
|
||||
if (!cacheKey || !idbAvailable) return Promise.resolve('');
|
||||
return soonLocalOpen().then(function (db) {
|
||||
if (!db) return '';
|
||||
var tx = db.transaction('thumbs', 'readonly');
|
||||
return reqPromise(tx.objectStore('thumbs').get(cacheKey)).then(function (row) {
|
||||
return (row && row.dataUrl) ? row.dataUrl : '';
|
||||
});
|
||||
}).catch(function () { return ''; });
|
||||
}
|
||||
|
||||
function soonLocalRemove(cacheKey) {
|
||||
if (!cacheKey || !idbAvailable) return Promise.resolve();
|
||||
return soonLocalOpen().then(function (db) {
|
||||
if (!db) return;
|
||||
var tx = db.transaction(['blobs', 'thumbs'], 'readwrite');
|
||||
tx.objectStore('blobs').delete(cacheKey);
|
||||
tx.objectStore('thumbs').delete(cacheKey);
|
||||
return txDone(tx);
|
||||
}).catch(function () { /* ignore */ });
|
||||
}
|
||||
|
||||
function soonLocalRenameKey(oldKey, newKey, meta) {
|
||||
if (!oldKey || !newKey || oldKey === newKey) return Promise.resolve(false);
|
||||
return soonLocalGet(oldKey).then(function (hit) {
|
||||
if (!hit) return false;
|
||||
return soonLocalPut(newKey, hit.json, Object.assign({}, hit.meta, meta || {})).then(function (ok) {
|
||||
if (!ok) return false;
|
||||
return soonLocalGetThumb(oldKey).then(function (thumb) {
|
||||
var chain = Promise.resolve();
|
||||
if (thumb) chain = soonLocalPutThumb(newKey, thumb);
|
||||
return chain.then(function () { return soonLocalRemove(oldKey); }).then(function () { return true; });
|
||||
});
|
||||
});
|
||||
}).catch(function () { return false; });
|
||||
}
|
||||
|
||||
function soonLocalCacheAndThumb(cacheKey, json, meta) {
|
||||
var thumb = soonExtractThumbFromJson(json);
|
||||
return soonLocalPut(cacheKey, json, meta).then(function (ok) {
|
||||
if (!ok) return false;
|
||||
if (thumb) return soonLocalPutThumb(cacheKey, thumb).then(function () { return true; });
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function soonLocalIsTemplateStale(cacheKey, blobMeta) {
|
||||
if (!cacheKey || cacheKey.indexOf('soondesign_template:') !== 0) return false;
|
||||
var tplMeta = window._soonTemplateMeta;
|
||||
if (!tplMeta || !tplMeta.updated_at) return false;
|
||||
if (!blobMeta || !blobMeta.updatedAt) return false;
|
||||
return String(tplMeta.updated_at) !== String(blobMeta.updatedAt);
|
||||
}
|
||||
|
||||
window.soonLocalOpen = soonLocalOpen;
|
||||
window.soonLocalGet = soonLocalGet;
|
||||
window.soonLocalPut = soonLocalPut;
|
||||
window.soonLocalPutThumb = soonLocalPutThumb;
|
||||
window.soonLocalGetThumb = soonLocalGetThumb;
|
||||
window.soonLocalRemove = soonLocalRemove;
|
||||
window.soonLocalRenameKey = soonLocalRenameKey;
|
||||
window.soonLocalEvictLRU = soonLocalEvictLRU;
|
||||
window.soonLocalCacheAndThumb = soonLocalCacheAndThumb;
|
||||
window.soonLocalIsTemplateStale = soonLocalIsTemplateStale;
|
||||
window.soonExtractThumbFromJson = soonExtractThumbFromJson;
|
||||
|
||||
var LS_DROP = ['soondesign_recent', 'soondesign_history', 'soondesign_recent_migrated'];
|
||||
var SS_DROP = ['soondesign_open_file', 'soondesign_open_type', 'soondesign_open_meta', 'soondesign_pending_import'];
|
||||
|
||||
function dropStorageKeys(storage, prefix) {
|
||||
if (!storage) return;
|
||||
try {
|
||||
var rm = [];
|
||||
for (var i = 0; i < storage.length; i++) {
|
||||
var k = storage.key(i);
|
||||
if (k && k.indexOf(prefix) === 0) rm.push(k);
|
||||
}
|
||||
rm.forEach(function (k) { storage.removeItem(k); });
|
||||
} catch (e) { /* ignore */ }
|
||||
}
|
||||
|
||||
function soonClearLocalDesignCache() {
|
||||
try {
|
||||
LS_DROP.forEach(function (k) { localStorage.removeItem(k); });
|
||||
dropStorageKeys(localStorage, 'soondesign_session:');
|
||||
SS_DROP.forEach(function (k) { sessionStorage.removeItem(k); });
|
||||
dropStorageKeys(sessionStorage, 'soondesign_session:');
|
||||
} catch (e) { /* ignore */ }
|
||||
dbPromise = null;
|
||||
if (typeof indexedDB === 'undefined') return Promise.resolve();
|
||||
return new Promise(function (resolve) {
|
||||
var done = function () { resolve(); };
|
||||
try {
|
||||
var req = indexedDB.deleteDatabase(DB_NAME);
|
||||
req.onsuccess = req.onerror = req.onblocked = done;
|
||||
} catch (e2) { done(); }
|
||||
});
|
||||
}
|
||||
|
||||
window.soonClearLocalDesignCache = soonClearLocalDesignCache;
|
||||
})();
|
||||
@@ -0,0 +1,217 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var RECENT_KEY = 'soondesign_recent';
|
||||
var MIGRATED_KEY = 'soondesign_recent_migrated';
|
||||
var HISTORY_KEY = 'soondesign_history';
|
||||
var MAX_ITEMS = 20;
|
||||
|
||||
function nowTimeStr() {
|
||||
var d = new Date();
|
||||
function pad(n) { return n < 10 ? '0' + n : String(n); }
|
||||
return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' +
|
||||
pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
|
||||
}
|
||||
|
||||
function readRaw() {
|
||||
try {
|
||||
var raw = localStorage.getItem(RECENT_KEY);
|
||||
if (!raw) return { version: 1, items: [] };
|
||||
var j = JSON.parse(raw);
|
||||
if (!j || !Array.isArray(j.items)) return { version: 1, items: [] };
|
||||
return j;
|
||||
} catch (e) {
|
||||
return { version: 1, items: [] };
|
||||
}
|
||||
}
|
||||
|
||||
function writeRaw(data) {
|
||||
try {
|
||||
localStorage.setItem(RECENT_KEY, JSON.stringify(data));
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function soonRecentKindFromKey(key) {
|
||||
if (!key) return 'local';
|
||||
if (key.indexOf('soondesign_file:') === 0) return 'cloud';
|
||||
if (key.indexOf('soondesign_template:') === 0) return 'template';
|
||||
return 'local';
|
||||
}
|
||||
|
||||
function parseFileId(key) {
|
||||
var m = String(key).match(/^soondesign_file:(\d+)/);
|
||||
return m ? parseInt(m[1], 10) : null;
|
||||
}
|
||||
|
||||
function soonRecentList() {
|
||||
return readRaw().items.slice();
|
||||
}
|
||||
|
||||
function soonRecentRemove(key) {
|
||||
if (!key) return;
|
||||
var data = readRaw();
|
||||
data.items = data.items.filter(function (it) { return it.key !== key; });
|
||||
writeRaw(data);
|
||||
}
|
||||
|
||||
function soonRecentUpsert(item) {
|
||||
if (!item || !item.key) return;
|
||||
var key = item.key;
|
||||
var kind = item.kind || soonRecentKindFromKey(key);
|
||||
var type = item.type != null ? item.type : 1;
|
||||
var name = item.name || '';
|
||||
if (!name && typeof window.soonDisplayFileName === 'function') {
|
||||
name = window.soonDisplayFileName(key);
|
||||
}
|
||||
var entry = {
|
||||
key: key,
|
||||
name: name || 'design.soon',
|
||||
type: type,
|
||||
kind: kind,
|
||||
fileId: item.fileId != null ? item.fileId : parseFileId(key),
|
||||
thumbRef: item.thumbRef || key,
|
||||
time: item.time || nowTimeStr()
|
||||
};
|
||||
var data = readRaw();
|
||||
data.items = data.items.filter(function (it) { return it.key !== key; });
|
||||
data.items.unshift(entry);
|
||||
if (data.items.length > MAX_ITEMS) data.items = data.items.slice(0, MAX_ITEMS);
|
||||
writeRaw(data);
|
||||
}
|
||||
|
||||
function soonRecentUpsertFromOpen(fileKey, json) {
|
||||
if (!fileKey) return;
|
||||
var type = 1;
|
||||
if (json) {
|
||||
type = json.soonType ? json.soonType : (json.backBlackPic ? 2 : 1);
|
||||
}
|
||||
var name = '';
|
||||
if (typeof window.soonDisplayFileName === 'function') name = window.soonDisplayFileName(fileKey);
|
||||
var tplMeta = window._soonTemplateMeta;
|
||||
if (tplMeta && tplMeta.name && fileKey.indexOf('soondesign_template:') === 0) {
|
||||
name = tplMeta.name;
|
||||
if (tplMeta.type) type = tplMeta.type;
|
||||
}
|
||||
var fileMeta = window._soonFileMeta;
|
||||
if (fileMeta && fileMeta.name && fileKey.indexOf('soondesign_file:') === 0) {
|
||||
name = fileMeta.name;
|
||||
}
|
||||
soonRecentUpsert({
|
||||
key: fileKey,
|
||||
name: name,
|
||||
type: type,
|
||||
kind: soonRecentKindFromKey(fileKey),
|
||||
fileId: parseFileId(fileKey),
|
||||
thumbRef: fileKey,
|
||||
time: nowTimeStr(),
|
||||
updated_at: (tplMeta && tplMeta.updated_at) ? tplMeta.updated_at : undefined
|
||||
});
|
||||
}
|
||||
|
||||
function soonRecentMigrateFromHistory() {
|
||||
try {
|
||||
if (localStorage.getItem(MIGRATED_KEY) === '1') return;
|
||||
} catch (e) { return; }
|
||||
var histRaw;
|
||||
try {
|
||||
histRaw = localStorage.getItem(HISTORY_KEY);
|
||||
} catch (e) { return; }
|
||||
if (!histRaw) {
|
||||
try { localStorage.setItem(MIGRATED_KEY, '1'); } catch (e2) { /* ignore */ }
|
||||
return;
|
||||
}
|
||||
var hist;
|
||||
try {
|
||||
hist = JSON.parse(histRaw);
|
||||
} catch (e) {
|
||||
try { localStorage.setItem(MIGRATED_KEY, '1'); } catch (e2) { /* ignore */ }
|
||||
return;
|
||||
}
|
||||
var list = (hist && Array.isArray(hist.history)) ? hist.history : [];
|
||||
list.forEach(function (h) {
|
||||
if (!h || !h.path) return;
|
||||
soonRecentUpsert({
|
||||
key: h.path,
|
||||
name: typeof window.soonDisplayFileName === 'function' ? window.soonDisplayFileName(h.path) : h.path,
|
||||
type: h.type || 1,
|
||||
kind: soonRecentKindFromKey(h.path),
|
||||
fileId: parseFileId(h.path),
|
||||
thumbRef: h.path,
|
||||
time: h.time || nowTimeStr()
|
||||
});
|
||||
});
|
||||
try { localStorage.setItem(MIGRATED_KEY, '1'); } catch (e) { /* ignore */ }
|
||||
}
|
||||
|
||||
function soonRecentEnrichFromCloud(items, cloudItems) {
|
||||
if (!items || !items.length || !cloudItems || !cloudItems.length) return items;
|
||||
var byId = {};
|
||||
cloudItems.forEach(function (c) {
|
||||
if (c && c.id != null) byId[c.id] = c;
|
||||
});
|
||||
return items.map(function (it) {
|
||||
if (!it.fileId || !byId[it.fileId]) return it;
|
||||
var c = byId[it.fileId];
|
||||
var copy = Object.assign({}, it);
|
||||
if (c.name) copy.name = c.name;
|
||||
var curKey = it.filePath || it.key;
|
||||
if (c.version != null && typeof window.soonMakeFileKey === 'function') {
|
||||
var newKey = window.soonMakeFileKey(c.id, c.version);
|
||||
if (newKey !== curKey) {
|
||||
soonRecentRemove(curKey);
|
||||
copy.filePath = newKey;
|
||||
copy.key = newKey;
|
||||
copy.thumbRef = newKey;
|
||||
soonRecentUpsert({
|
||||
key: newKey,
|
||||
name: copy.name,
|
||||
type: copy.type,
|
||||
kind: soonRecentKindFromKey(newKey),
|
||||
fileId: c.id,
|
||||
thumbRef: newKey
|
||||
});
|
||||
}
|
||||
}
|
||||
return copy;
|
||||
});
|
||||
}
|
||||
|
||||
function soonRecentOnCloudSave(res, prevKey, type) {
|
||||
if (!res || !res.fileKey) return;
|
||||
var dropKeys = {};
|
||||
if (prevKey && prevKey !== res.fileKey) dropKeys[prevKey] = 1;
|
||||
if (res.fileId != null) {
|
||||
readRaw().items.forEach(function (it) {
|
||||
if (it.fileId === res.fileId && it.key !== res.fileKey) dropKeys[it.key] = 1;
|
||||
});
|
||||
}
|
||||
Object.keys(dropKeys).forEach(function (k) {
|
||||
soonRecentRemove(k);
|
||||
if (typeof window.soonLocalRemove === 'function') window.soonLocalRemove(k);
|
||||
});
|
||||
var name = res.name || '';
|
||||
if (!name && typeof window.soonDisplayFileName === 'function') {
|
||||
name = window.soonDisplayFileName(res.fileKey);
|
||||
}
|
||||
soonRecentUpsert({
|
||||
key: res.fileKey,
|
||||
name: name || 'design.soon',
|
||||
type: type != null ? type : 1,
|
||||
kind: soonRecentKindFromKey(res.fileKey),
|
||||
fileId: res.fileId,
|
||||
thumbRef: res.fileKey
|
||||
});
|
||||
}
|
||||
|
||||
window.soonRecentList = soonRecentList;
|
||||
window.soonRecentRemove = soonRecentRemove;
|
||||
window.soonRecentUpsert = soonRecentUpsert;
|
||||
window.soonRecentUpsertFromOpen = soonRecentUpsertFromOpen;
|
||||
window.soonRecentMigrateFromHistory = soonRecentMigrateFromHistory;
|
||||
window.soonRecentKindFromKey = soonRecentKindFromKey;
|
||||
window.soonRecentEnrichFromCloud = soonRecentEnrichFromCloud;
|
||||
window.soonRecentOnCloudSave = soonRecentOnCloudSave;
|
||||
})();
|
||||
@@ -150,6 +150,7 @@ function applySysLan(data) {
|
||||
localStorage.setItem("lang", "zh");
|
||||
break;
|
||||
case 'zh-TW':
|
||||
case 'ozh':
|
||||
s_lan = "ozh";
|
||||
// 同步到全局作用域（用于 .jsc 文件加载）
|
||||
if (typeof window !== 'undefined') {
|
||||
@@ -375,64 +376,73 @@ window.rotate = function (id) {
|
||||
$(`#${id}`).attr("angle", angle);
|
||||
}
|
||||
|
||||
function soonPlaceBgOnCanvas(image, canvasSelector) {
|
||||
var cw = $(canvasSelector).width() || (document.querySelector(canvasSelector) && document.querySelector(canvasSelector).clientWidth) || 800;
|
||||
var ch = $(canvasSelector).height() || (document.querySelector(canvasSelector) && document.querySelector(canvasSelector).clientHeight) || 600;
|
||||
image.left = (cw - image.width * image.get("scaleX")) / 2;
|
||||
image.top = (ch - image.height * image.get("scaleY")) / 2;
|
||||
image.selectable = false;
|
||||
image.hoverable = false;
|
||||
image.hoverCursor = "default";
|
||||
}
|
||||
|
||||
function soonOpenPendingDesignFile() {
|
||||
var file = typeof window.soonResolveOpenFileKey === 'function'
|
||||
? window.soonResolveOpenFileKey(GetFile)
|
||||
: (GetFile().get('file') || '');
|
||||
if (file && file != 'empty') {
|
||||
if (typeof window.soonConsumeOpenMeta === 'function') {
|
||||
window.soonConsumeOpenMeta(file);
|
||||
}
|
||||
window.openFile(file);
|
||||
}
|
||||
}
|
||||
|
||||
function addBackground() {
|
||||
// 类型改变
|
||||
fabric.Image.fromURL(soonAsset('bg_front_1.png'), function (image) {
|
||||
let width = $("#canvas1").width()
|
||||
if (is_bgi_add || window.is_bgi_add) return;
|
||||
var loadBg = typeof window.soonFabricImageFromAsset === 'function'
|
||||
? window.soonFabricImageFromAsset
|
||||
: null;
|
||||
var whenReady = typeof window.soonRunWhenCanvasReady === 'function'
|
||||
? window.soonRunWhenCanvasReady
|
||||
: function (_sel, fn) { fn(); };
|
||||
|
||||
image.left = ($("#canvas1").width() - image.width * image.get("scaleX")) / 2;
|
||||
image.top = ($("#canvas1").height() - image.height * image.get("scaleY")) / 2;
|
||||
function finishBack(backImg) {
|
||||
if (backImg) {
|
||||
soonPlaceBgOnCanvas(backImg, '#canvas2');
|
||||
background_image2 = backImg;
|
||||
window.background_image2 = backImg;
|
||||
canvas2.add(backImg);
|
||||
canvas2.renderAll();
|
||||
recordObjs2.push(JSON.stringify(objs2));
|
||||
recordJson2.push(canvas2.toJSON(TO_JSON_PROPERTIES));
|
||||
}
|
||||
is_bgi_add = true;
|
||||
window.is_bgi_add = true;
|
||||
soonOpenPendingDesignFile();
|
||||
}
|
||||
|
||||
image.selectable = false;
|
||||
image.hoverable = false;
|
||||
image.hoverCursor = "default"
|
||||
image.setSrc(image.toDataURL(), function (image) {
|
||||
image.scale(1, 1);
|
||||
background_image1 = image;
|
||||
background_image = background_image1;
|
||||
window.background_image1 = background_image1;
|
||||
window.background_image = background_image;
|
||||
canvas.add(image);
|
||||
function startLoad() {
|
||||
if (!loadBg) return;
|
||||
loadBg('bg_front_1.png', function (frontImg) {
|
||||
if (!frontImg) return;
|
||||
frontImg.scale(1, 1);
|
||||
soonPlaceBgOnCanvas(frontImg, '#canvas1');
|
||||
background_image1 = frontImg;
|
||||
background_image = frontImg;
|
||||
window.background_image1 = frontImg;
|
||||
window.background_image = frontImg;
|
||||
canvas.add(frontImg);
|
||||
canvas.renderAll();
|
||||
//pre_objs1.push(JSON.stringify(objs1));
|
||||
//pre_json1.push(canvas1.toJSON(["selectable","hoverable","hoverCursor"]));
|
||||
|
||||
recordObjs1.push(JSON.stringify(objs1));
|
||||
recordJson1.push(canvas1.toJSON(TO_JSON_PROPERTIES));
|
||||
loadBg('bg_back.png', finishBack, function () { loadBg('bg_back.png', finishBack); });
|
||||
}, function () {
|
||||
setTimeout(startLoad, 200);
|
||||
});
|
||||
// 类型改变
|
||||
fabric.Image.fromURL(soonAsset('bg_back.png'), function (image) {
|
||||
image.left = ($("#canvas2").width() - image.width) / 2;
|
||||
image.top = ($("#canvas2").height() - image.height) / 2;
|
||||
}
|
||||
|
||||
image.selectable = false;
|
||||
image.hoverable = false;
|
||||
image.hoverCursor = "default"
|
||||
|
||||
image.setSrc(image.toDataURL(), function (image) {
|
||||
background_image2 = image;
|
||||
window.background_image2 = background_image2;
|
||||
canvas2.add(image);
|
||||
canvas2.renderAll();
|
||||
//pre_objs2.push(JSON.stringify(objs2));
|
||||
//pre_json2.push(canvas2.toJSON(["selectable","hoverable","hoverCursor"]));
|
||||
|
||||
recordObjs2.push(JSON.stringify(objs2));
|
||||
recordJson2.push(canvas2.toJSON(TO_JSON_PROPERTIES));
|
||||
|
||||
var file = typeof window.soonResolveOpenFileKey === 'function'
|
||||
? window.soonResolveOpenFileKey(GetFile)
|
||||
: (GetFile().get('file') || '');
|
||||
if (file && file != 'empty') {
|
||||
if (typeof window.soonConsumeOpenMeta === 'function') {
|
||||
window.soonConsumeOpenMeta(file);
|
||||
}
|
||||
window.openFile(file);
|
||||
}
|
||||
});
|
||||
});
|
||||
is_bgi_add = true;
|
||||
});
|
||||
whenReady('#canvas1', startLoad);
|
||||
}
|
||||
|
||||
// 将 updateControls 附加到 window 对象，确保在 eval() 加载 .jsc 文件时也能访问
|
||||
|
||||
@@ -1181,6 +1181,7 @@ window.openFile = function open(file, jAlready) {
|
||||
recordJson2.push(j2);
|
||||
}, 0);
|
||||
if (typeof window.soonTryConsumeCloudImport === 'function') window.soonTryConsumeCloudImport(file);
|
||||
if (typeof window.soonRecentUpsertFromOpen === 'function') window.soonRecentUpsertFromOpen(file, j);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1263,11 +1264,23 @@ function cloudSaveSuccessLabel(res, fallback) {
|
||||
return fallback || '';
|
||||
}
|
||||
|
||||
function soonPageDesignType() {
|
||||
try {
|
||||
var p = new URLSearchParams(location.search);
|
||||
return Number(p.get('type')) || 1;
|
||||
} catch (e) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
||||
function onCloudWriteDone(res, fallback, callback) {
|
||||
applyCloudWriteResult(res, fallback);
|
||||
if (res && res.fileKey && typeof window.soonClearPendingImport === 'function') {
|
||||
window.soonClearPendingImport();
|
||||
}
|
||||
if (typeof window.soonRecentOnCloudSave === 'function') {
|
||||
window.soonRecentOnCloudSave(res, fallback, soonPageDesignType());
|
||||
}
|
||||
layer.msg(language_str("saveSucc") + cloudSaveSuccessLabel(res, fallback));
|
||||
if (callback && typeof callback === 'function') callback();
|
||||
}
|
||||
@@ -1276,15 +1289,6 @@ function guardWebSave() {
|
||||
return typeof window.soonGuardCloudSave === 'function' ? window.soonGuardCloudSave() : true;
|
||||
}
|
||||
|
||||
function reportSaveError(err) {
|
||||
if (err && err.status) return;
|
||||
if (typeof window.soonShowApiError === 'function') {
|
||||
window.soonShowApiError({ status: err && err.status, message: (err && err.message) || '保存失败' });
|
||||
} else if (typeof window.soonToast === 'function') {
|
||||
window.soonToast('保存失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function saveAs(op1, callback) {
|
||||
// 临时移除辅助线，保存后再恢复
|
||||
let guideLines1 = [];
|
||||
@@ -1319,26 +1323,26 @@ function saveAs(op1, callback) {
|
||||
let o = { f: j, b: {}, fo: objs1, bo: objs2 };
|
||||
let con_o = Object.assign(o, op1);
|
||||
if (!guardWebSave()) return;
|
||||
var prevOpenKey = openAs.name || '';
|
||||
if (typeof window.soonApplySavePreview === 'function') window.soonApplySavePreview(con_o, canvas1);
|
||||
con_o.soonType = 1;
|
||||
var dialogApi = (typeof dialog !== 'undefined' && dialog) ? dialog : (window.platformBridge && window.platformBridge.showSaveDialog ? { showSaveDialog: function(opts) { return window.platformBridge.showSaveDialog(opts); } } : null);
|
||||
if (!dialogApi) return;
|
||||
dialogApi.showSaveDialog({
|
||||
title: language_str("saveFile"),
|
||||
filters: [{ name: 'Soon File Type', extensions: ['soon'] }],
|
||||
defaultPath: openAs.name || undefined
|
||||
defaultPath: typeof window.soonSaveDialogDefaultPath === 'function' ? window.soonSaveDialogDefaultPath(openAs.name) : openAs.name
|
||||
}).then(function(result) {
|
||||
if (result.canceled) return;
|
||||
var fp = result.filePath || (result.fileHandle && result.fileHandle.name);
|
||||
var fp = typeof window.soonEnsureSaveFileName === 'function'
|
||||
? window.soonEnsureSaveFileName(result.filePath || (result.fileHandle && result.fileHandle.name))
|
||||
: (result.filePath || (result.fileHandle && result.fileHandle.name));
|
||||
if (!fp) return;
|
||||
var pathExt = (typeof window !== 'undefined' && window.path && window.path.extname) ? window.path.extname(fp) : (fp.indexOf('.') >= 0 ? fp.slice(fp.lastIndexOf('.')) : '');
|
||||
if (pathExt !== '.soon') fp = (fp || 'design').replace(/\.soon$/i, '') + '.soon';
|
||||
var content = JSON.stringify(con_o);
|
||||
con_o.soonType = 1;
|
||||
if (window.platformBridge && window.platformBridge.writeFile) {
|
||||
window.platformBridge.writeFile(fp, content).then(function (res) {
|
||||
onCloudWriteDone(res, fp, callback);
|
||||
}).catch(reportSaveError);
|
||||
return;
|
||||
}
|
||||
if (typeof window.soonWriteSoonContentWeb === 'function' &&
|
||||
window.soonWriteSoonContentWeb(fp, content, prevOpenKey, function (res, pk) {
|
||||
onCloudWriteDone(res, pk, callback);
|
||||
})) return;
|
||||
var fs = typeof require !== 'undefined' ? require('fs') : null;
|
||||
if (fs) {
|
||||
fs.writeFileSync(result.filePath || fp, content, 'utf8');
|
||||
@@ -1347,7 +1351,9 @@ function saveAs(op1, callback) {
|
||||
saveHistory();
|
||||
if (callback && typeof callback === 'function') callback();
|
||||
}
|
||||
}).catch(reportSaveError);
|
||||
}).catch(function (err) {
|
||||
if (typeof window.soonReportSaveError === 'function') window.soonReportSaveError(err);
|
||||
});
|
||||
}
|
||||
|
||||
function save(op1, callback) {
|
||||
@@ -1384,15 +1390,18 @@ function save(op1, callback) {
|
||||
let o = { f: j, b: {}, fo: objs1, bo: objs2 };
|
||||
let con_o = Object.assign(o, op1);
|
||||
if (!guardWebSave()) return;
|
||||
if (openAs.name != "") {
|
||||
con_o.soonType = 1;
|
||||
var content = JSON.stringify(con_o);
|
||||
if (window.platformBridge && window.platformBridge.writeFile) {
|
||||
window.platformBridge.writeFile(openAs.name, content).then(function (res) {
|
||||
onCloudWriteDone(res, openAs.name, callback);
|
||||
}).catch(reportSaveError);
|
||||
return;
|
||||
}
|
||||
var prevOpenKey = openAs.name || '';
|
||||
if (typeof window.soonApplySavePreview === 'function') window.soonApplySavePreview(con_o, canvas1);
|
||||
con_o.soonType = 1;
|
||||
var content = JSON.stringify(con_o);
|
||||
var needsDialog = typeof window.soonNeedsSaveDialog === 'function'
|
||||
? window.soonNeedsSaveDialog(openAs.name)
|
||||
: !openAs.name;
|
||||
if (openAs.name && !needsDialog) {
|
||||
if (typeof window.soonWriteSoonContentWeb === 'function' &&
|
||||
window.soonWriteSoonContentWeb(openAs.name, content, prevOpenKey, function (res, pk) {
|
||||
onCloudWriteDone(res, pk, callback);
|
||||
})) return;
|
||||
var fs = typeof require !== 'undefined' ? require('fs') : null;
|
||||
if (fs) {
|
||||
fs.writeFileSync(openAs.name, content, 'utf8');
|
||||
@@ -1407,21 +1416,17 @@ function save(op1, callback) {
|
||||
dialogApi.showSaveDialog({
|
||||
title: language_str("saveFile"),
|
||||
filters: [{ name: 'Soon File Type', extensions: ['soon'] }],
|
||||
defaultPath: openAs.name || undefined
|
||||
}).then(async function(result) {
|
||||
defaultPath: typeof window.soonSaveDialogDefaultPath === 'function' ? window.soonSaveDialogDefaultPath(openAs.name) : openAs.name
|
||||
}).then(function(result) {
|
||||
if (result.canceled) return;
|
||||
var fp = result.filePath || (result.fileHandle && result.fileHandle.name);
|
||||
var fp = typeof window.soonEnsureSaveFileName === 'function'
|
||||
? window.soonEnsureSaveFileName(result.filePath || (result.fileHandle && result.fileHandle.name))
|
||||
: (result.filePath || (result.fileHandle && result.fileHandle.name));
|
||||
if (!fp) return;
|
||||
var pathExt = (typeof window !== 'undefined' && window.path && window.path.extname) ? window.path.extname(fp) : (fp.indexOf('.') >= 0 ? fp.slice(fp.lastIndexOf('.')) : '');
|
||||
if (pathExt !== '.soon') fp = (fp || 'design').replace(/\.soon$/i, '') + '.soon';
|
||||
var content = JSON.stringify(con_o);
|
||||
con_o.soonType = 1;
|
||||
if (window.platformBridge && window.platformBridge.writeFile) {
|
||||
window.platformBridge.writeFile(fp, content).then(function (res) {
|
||||
onCloudWriteDone(res, fp, callback);
|
||||
}).catch(reportSaveError);
|
||||
return;
|
||||
}
|
||||
if (typeof window.soonWriteSoonContentWeb === 'function' &&
|
||||
window.soonWriteSoonContentWeb(fp, content, prevOpenKey, function (res, pk) {
|
||||
onCloudWriteDone(res, pk, callback);
|
||||
})) return;
|
||||
var fs = typeof require !== 'undefined' ? require('fs') : null;
|
||||
if (fs) {
|
||||
fs.writeFileSync(result.filePath || fp, content, 'utf8');
|
||||
@@ -1430,12 +1435,27 @@ function save(op1, callback) {
|
||||
saveHistory();
|
||||
if (callback && typeof callback === 'function') callback();
|
||||
}
|
||||
}).catch(reportSaveError);
|
||||
}).catch(function (err) {
|
||||
if (typeof window.soonReportSaveError === 'function') window.soonReportSaveError(err);
|
||||
});
|
||||
}
|
||||
|
||||
window.saveHistory = function saveHistory() {
|
||||
var currentPath = openAs.name;
|
||||
if (!currentPath) return;
|
||||
if (window.platformBridge && window.fs == null) {
|
||||
if (typeof window.soonRecentUpsert === 'function') {
|
||||
window.soonRecentUpsert({
|
||||
key: currentPath,
|
||||
name: typeof window.soonDisplayFileName === 'function' ? window.soonDisplayFileName(currentPath) : currentPath,
|
||||
type: soonPageDesignType(),
|
||||
kind: typeof window.soonRecentKindFromKey === 'function' ? window.soonRecentKindFromKey(currentPath) : 'local',
|
||||
thumbRef: currentPath
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
function doWrite(j) {
|
||||
var currentPath = openAs.name;
|
||||
if (!currentPath) return;
|
||||
var pathForHistory = currentPath;
|
||||
if (window.platformBridge && currentPath.indexOf('soondesign_session:') !== 0 && currentPath.indexOf('soondesign_file:') !== 0) {
|
||||
|
||||
+186
-77
@@ -9,12 +9,27 @@ function soonDesign2MainHeight() {
|
||||
return Math.max(480, window.innerHeight - (tb ? tb.offsetHeight : 0));
|
||||
}
|
||||
|
||||
function soonDesign2SidebarWidth() {
|
||||
var colRight = document.querySelector('body.soon-design-page .col-right');
|
||||
if (colRight && colRight.offsetWidth > 0) return colRight.offsetWidth;
|
||||
return 320;
|
||||
}
|
||||
|
||||
function soonDesign2ToolboxWidth() {
|
||||
var toolbox = document.querySelector('body.soon-design-page .container .left');
|
||||
if (toolbox && toolbox.offsetWidth > 0) return toolbox.offsetWidth;
|
||||
return 50;
|
||||
}
|
||||
|
||||
function soonDesign2CanvasWidth() {
|
||||
var w = $('#canvas-div').width();
|
||||
if (w > 0) return w;
|
||||
w = $('.col-left').width();
|
||||
if (w > 0) return Math.max(320, w - 70);
|
||||
return Math.max(320, window.innerWidth - 390);
|
||||
var canvasDiv = document.getElementById('canvas-div');
|
||||
if (canvasDiv && canvasDiv.clientWidth > 0) return canvasDiv.clientWidth;
|
||||
var colLeft = document.querySelector('body.soon-design-page .col-left');
|
||||
if (colLeft && colLeft.clientWidth > 0) {
|
||||
return Math.max(320, colLeft.clientWidth - soonDesign2ToolboxWidth());
|
||||
}
|
||||
var docW = document.documentElement.clientWidth || window.innerWidth;
|
||||
return Math.max(320, docW - soonDesign2SidebarWidth() - soonDesign2ToolboxWidth());
|
||||
}
|
||||
|
||||
function layoutDesign2Shell() {
|
||||
@@ -80,6 +95,7 @@ zoom = (function () {
|
||||
var z = divW / 1200 > 1 ? 1 : divW / 1200;
|
||||
return z > 0 ? z : 0.5;
|
||||
})()
|
||||
window.zoom = zoom;
|
||||
|
||||
// 初始化标尺
|
||||
function initRulers() {
|
||||
@@ -518,29 +534,110 @@ function initRulers() {
|
||||
}
|
||||
|
||||
}
|
||||
initRulers();
|
||||
if (window.SOON_DEPLOY_CONFIG && ($('#canvas-div').width() || 0) < 100) {
|
||||
requestAnimationFrame(function () {
|
||||
requestAnimationFrame(function () {
|
||||
var layout = layoutDesign2Shell();
|
||||
var divW = layout.canvasW;
|
||||
zoom = divW / 1200 > 1 ? 1 : divW / 1200;
|
||||
if (zoom <= 0) zoom = 0.5;
|
||||
canvas1.setWidth(layout.canvasW);
|
||||
canvas1.setHeight(layout.canvasH);
|
||||
canvas2.setWidth(layout.canvasW);
|
||||
canvas2.setHeight(layout.canvasH);
|
||||
canvas1.zoomToPoint(new fabric.Point(canvas1.width / 2, canvas1.height / 2), zoom);
|
||||
canvas2.zoomToPoint(new fabric.Point(canvas2.width / 2, canvas2.height / 2), zoom);
|
||||
window.zoom = zoom;
|
||||
canvas1.renderAll();
|
||||
canvas2.renderAll();
|
||||
initRulers();
|
||||
});
|
||||
});
|
||||
function relayoutDesign2Canvas() {
|
||||
var layout = layoutDesign2Shell();
|
||||
var divW = layout.canvasW;
|
||||
zoom = divW / 1200 > 1 ? 1 : divW / 1200;
|
||||
if (zoom <= 0) zoom = 0.5;
|
||||
window.zoom = zoom;
|
||||
canvas1.setWidth(layout.canvasW);
|
||||
canvas1.setHeight(layout.canvasH);
|
||||
canvas2.setWidth(layout.canvasW);
|
||||
canvas2.setHeight(layout.canvasH);
|
||||
canvas1.zoomToPoint(new fabric.Point(canvas1.width / 2, canvas1.height / 2), zoom);
|
||||
canvas2.zoomToPoint(new fabric.Point(canvas2.width / 2, canvas2.height / 2), zoom);
|
||||
canvas1.renderAll();
|
||||
canvas2.renderAll();
|
||||
initRulers();
|
||||
if (typeof window.soonDesign2ScaleBgSources === 'function') {
|
||||
window.soonDesign2ScaleBgSources();
|
||||
}
|
||||
if (window.is_bgi_add) {
|
||||
canvas1.requestRenderAll();
|
||||
canvas2.requestRenderAll();
|
||||
}
|
||||
}
|
||||
$('#source_front').width(zoom * $('#source_front').width())
|
||||
$('#source_back').width(zoom * $('#source_back').width())
|
||||
|
||||
function soonDesign2ScaleBgSources() {
|
||||
var z = zoom || window.zoom || 0.5;
|
||||
var sf = document.getElementById('source_front');
|
||||
var sb = document.getElementById('source_back');
|
||||
if (sf && sf.naturalWidth > 0) {
|
||||
sf.style.width = (sf.naturalWidth * z) + 'px';
|
||||
sf.style.height = (sf.naturalHeight * z) + 'px';
|
||||
}
|
||||
if (sb && sb.naturalWidth > 0) {
|
||||
sb.style.width = (sb.naturalWidth * z) + 'px';
|
||||
sb.style.height = (sb.naturalHeight * z) + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function soonDesign2BgOverlayMetrics(imgEl) {
|
||||
if (!imgEl || !imgEl.complete || imgEl.naturalWidth <= 0) return null;
|
||||
var z = zoom || window.zoom || 0.5;
|
||||
var w = parseFloat(imgEl.style.width);
|
||||
if (!w || w <= 0) w = imgEl.naturalWidth * z;
|
||||
var h = parseFloat(imgEl.style.height);
|
||||
if (!h || h <= 0) h = imgEl.naturalHeight * z;
|
||||
return { w: w, h: h };
|
||||
}
|
||||
|
||||
function soonDesign2PrepareBgSources(done) {
|
||||
var sf = document.getElementById('source_front');
|
||||
var sb = document.getElementById('source_back');
|
||||
if (!sf || !sb) {
|
||||
is_bgi_add = true;
|
||||
window.is_bgi_add = true;
|
||||
if (typeof done === 'function') done();
|
||||
return;
|
||||
}
|
||||
var ver = typeof bg_version !== 'undefined' ? bg_version : 1;
|
||||
var frontName = 'front_bg' + ver + '_2.png';
|
||||
if (!(sf.complete && sf.naturalWidth > 0 && (sf.src || '').indexOf(frontName) !== -1)) {
|
||||
sf.src = soonAsset(frontName);
|
||||
}
|
||||
var pending = 2;
|
||||
function finishOne() {
|
||||
pending--;
|
||||
if (pending > 0) return;
|
||||
soonDesign2ScaleBgSources();
|
||||
is_bgi_add = true;
|
||||
window.is_bgi_add = true;
|
||||
canvas1.requestRenderAll();
|
||||
canvas2.requestRenderAll();
|
||||
if (typeof done === 'function') done();
|
||||
}
|
||||
function watch(img) {
|
||||
if (img.complete && img.naturalWidth > 0) {
|
||||
finishOne();
|
||||
return;
|
||||
}
|
||||
img.onload = finishOne;
|
||||
img.onerror = finishOne;
|
||||
}
|
||||
watch(sf);
|
||||
watch(sb);
|
||||
}
|
||||
|
||||
function soonDesign2StartBackground() {
|
||||
soonDesign2PrepareBgSources(addBackground);
|
||||
}
|
||||
|
||||
function soonDesign2Kickoff() {
|
||||
if (window._soonDesign2KickoffDone) return;
|
||||
window._soonDesign2KickoffDone = true;
|
||||
if (window.SOON_DEPLOY_CONFIG && ($('#canvas-div').width() || 0) < 100) {
|
||||
relayoutDesign2Canvas();
|
||||
}
|
||||
soonDesign2StartBackground();
|
||||
}
|
||||
|
||||
window.soonDesign2ScaleBgSources = soonDesign2ScaleBgSources;
|
||||
window.soonDesign2PrepareBgSources = soonDesign2PrepareBgSources;
|
||||
window.soonDesign2BgOverlayMetrics = soonDesign2BgOverlayMetrics;
|
||||
window.soonDesign2Kickoff = soonDesign2Kickoff;
|
||||
|
||||
initRulers();
|
||||
$('.canvas-container:eq(1)').hide()
|
||||
canvas = canvas1
|
||||
window.canvas = canvas
|
||||
@@ -1643,58 +1740,71 @@ function getCoordsMaxY(acoords) {
|
||||
return y;
|
||||
}
|
||||
|
||||
function soonPlaceBgOnCanvas(image, canvasSelector) {
|
||||
var cw = $(canvasSelector).width() || (document.querySelector(canvasSelector) && document.querySelector(canvasSelector).clientWidth) || 800
|
||||
var ch = $(canvasSelector).height() || (document.querySelector(canvasSelector) && document.querySelector(canvasSelector).clientHeight) || 600
|
||||
image.left = (cw - image.width * image.get('scaleX')) / 2
|
||||
image.top = (ch - image.height * image.get('scaleY')) / 2
|
||||
image.selectable = false
|
||||
image.hoverable = false
|
||||
image.hoverCursor = 'default'
|
||||
}
|
||||
|
||||
function soonOpenPendingDesignFile() {
|
||||
var file = typeof window.soonResolveOpenFileKey === 'function'
|
||||
? window.soonResolveOpenFileKey(GetFile)
|
||||
: (GetFile().get('file') || '');
|
||||
if (file && file != 'empty') {
|
||||
if (typeof window.soonConsumeOpenMeta === 'function') {
|
||||
window.soonConsumeOpenMeta(file);
|
||||
}
|
||||
window.openFile(file);
|
||||
}
|
||||
}
|
||||
|
||||
function addBackground() {
|
||||
// 类型改变
|
||||
fabric.Image.fromURL(soonAsset('bg_front_2.png'), function (image) {
|
||||
image.left = ($('#canvas1').width() - image.width * image.get('scaleX')) / 2
|
||||
image.top = ($('#canvas1').height() - image.height * image.get('scaleY')) / 2
|
||||
if (background_image1 && background_image2) return;
|
||||
var loadBg = typeof window.soonFabricImageFromAsset === 'function'
|
||||
? window.soonFabricImageFromAsset
|
||||
: null;
|
||||
var whenReady = typeof window.soonRunWhenCanvasReady === 'function'
|
||||
? window.soonRunWhenCanvasReady
|
||||
: function (_sel, fn) { fn(); };
|
||||
var props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
|
||||
|
||||
image.selectable = false
|
||||
image.hoverable = false
|
||||
image.hoverCursor = 'default'
|
||||
image.setSrc(image.toDataURL(), function (image) {
|
||||
background_image1 = image
|
||||
background_image = background_image1
|
||||
window.background_image1 = background_image1;
|
||||
window.background_image = background_image;
|
||||
canvas1.add(image)
|
||||
canvas1.renderAll()
|
||||
function finishBack(backImg) {
|
||||
if (backImg) {
|
||||
soonPlaceBgOnCanvas(backImg, '#canvas2');
|
||||
background_image2 = backImg;
|
||||
window.background_image2 = backImg;
|
||||
canvas2.add(backImg);
|
||||
canvas2.renderAll();
|
||||
recordObjs2.push(JSON.stringify(objs2));
|
||||
recordJson2.push(canvas2.toJSON(TO_JSON_PROPERTIES));
|
||||
}
|
||||
soonOpenPendingDesignFile();
|
||||
}
|
||||
|
||||
recordObjs1.push(JSON.stringify(objs1))
|
||||
const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
|
||||
recordJson1.push(canvas1.toJSON(props))
|
||||
})
|
||||
// 类型改变
|
||||
fabric.Image.fromURL(soonAsset('bg_back_2.png'), function (image) {
|
||||
image.left = ($('#canvas2').width() - image.width) / 2
|
||||
image.top = ($('#canvas2').height() - image.height) / 2
|
||||
function startLoad() {
|
||||
if (!loadBg) return;
|
||||
loadBg('bg_front_2.png', function (frontImg) {
|
||||
if (!frontImg) return;
|
||||
soonPlaceBgOnCanvas(frontImg, '#canvas1');
|
||||
background_image1 = frontImg;
|
||||
background_image = frontImg;
|
||||
window.background_image1 = frontImg;
|
||||
window.background_image = frontImg;
|
||||
canvas1.add(frontImg);
|
||||
canvas1.renderAll();
|
||||
recordObjs1.push(JSON.stringify(objs1));
|
||||
recordJson1.push(canvas1.toJSON(props));
|
||||
loadBg('bg_back_2.png', finishBack, function () { loadBg('bg_back_2.png', finishBack, null, true); }, true);
|
||||
}, function () {
|
||||
setTimeout(startLoad, 200);
|
||||
}, null, true);
|
||||
}
|
||||
|
||||
image.selectable = false
|
||||
image.hoverable = false
|
||||
image.hoverCursor = 'default'
|
||||
|
||||
image.setSrc(image.toDataURL(), function (image) {
|
||||
background_image2 = image
|
||||
window.background_image2 = background_image2;
|
||||
canvas2.add(image)
|
||||
canvas2.renderAll()
|
||||
|
||||
recordObjs2.push(JSON.stringify(objs2))
|
||||
recordJson2.push(canvas2.toJSON(TO_JSON_PROPERTIES))
|
||||
|
||||
var file = typeof window.soonResolveOpenFileKey === 'function'
|
||||
? window.soonResolveOpenFileKey(GetFile)
|
||||
: (GetFile().get('file') || '');
|
||||
if (file && file != 'empty') {
|
||||
if (typeof window.soonConsumeOpenMeta === 'function') {
|
||||
window.soonConsumeOpenMeta(file);
|
||||
}
|
||||
window.openFile(file);
|
||||
}
|
||||
})
|
||||
})
|
||||
is_bgi_add = true
|
||||
})
|
||||
whenReady('#canvas1', startLoad);
|
||||
}
|
||||
|
||||
function addPic(pointer) {
|
||||
@@ -1975,6 +2085,7 @@ function applySysLan(data) {
|
||||
localStorage.setItem('lang', 'zh')
|
||||
break
|
||||
case 'zh-TW':
|
||||
case 'ozh':
|
||||
s_lan = 'ozh'
|
||||
// 同步到全局作用域（用于 .jsc 文件加载）
|
||||
if (typeof window !== 'undefined') {
|
||||
@@ -2112,8 +2223,6 @@ if (typeof ipcRenderer !== 'undefined' && ipcRenderer) {
|
||||
window.platformBridge.onClose(onCloseConfirm)
|
||||
}
|
||||
|
||||
addBackground() //添加背景 白色卡片
|
||||
|
||||
initAligningGuidelines(canvas1)
|
||||
initAligningGuidelines(canvas2)
|
||||
|
||||
|
||||
@@ -1086,11 +1086,23 @@ function cloudSaveSuccessLabel(res, fallback) {
|
||||
return fallback || '';
|
||||
}
|
||||
|
||||
function soonPageDesignType() {
|
||||
try {
|
||||
var p = new URLSearchParams(location.search);
|
||||
return Number(p.get('type')) || 2;
|
||||
} catch (e) {
|
||||
return 2;
|
||||
}
|
||||
}
|
||||
|
||||
function onCloudWriteDone(res, fallback, callback) {
|
||||
applyCloudWriteResult(res, fallback);
|
||||
if (res && res.fileKey && typeof window.soonClearPendingImport === 'function') {
|
||||
window.soonClearPendingImport();
|
||||
}
|
||||
if (typeof window.soonRecentOnCloudSave === 'function') {
|
||||
window.soonRecentOnCloudSave(res, fallback, soonPageDesignType());
|
||||
}
|
||||
layer.msg(language_str('saveSucc') + cloudSaveSuccessLabel(res, fallback));
|
||||
if (callback && typeof callback === 'function') callback();
|
||||
}
|
||||
@@ -1099,15 +1111,6 @@ function guardWebSave() {
|
||||
return typeof window.soonGuardCloudSave === 'function' ? window.soonGuardCloudSave() : true;
|
||||
}
|
||||
|
||||
function reportSaveError(err) {
|
||||
if (err && err.status) return;
|
||||
if (typeof window.soonShowApiError === 'function') {
|
||||
window.soonShowApiError({ status: err && err.status, message: (err && err.message) || '保存失败' });
|
||||
} else if (typeof window.soonToast === 'function') {
|
||||
window.soonToast('保存失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function saveAs(op1, callback) {
|
||||
// 临时移除辅助线，保存后再恢复
|
||||
let guideLines1 = []
|
||||
@@ -1142,23 +1145,23 @@ function saveAs(op1, callback) {
|
||||
let o = { f: j, b: b, fo: objs1, bo: objs2 }
|
||||
let con_o = Object.assign(o, op1)
|
||||
if (!guardWebSave()) return;
|
||||
var prevOpenKey = openAs.name || '';
|
||||
if (typeof window.soonApplySavePreview === 'function') window.soonApplySavePreview(con_o, canvas1);
|
||||
con_o.soonType = 2;
|
||||
var dialogApi = (typeof dialog !== 'undefined' && dialog) ? dialog : (window.platformBridge && window.platformBridge.showSaveDialog ? { showSaveDialog: function(opts) { return window.platformBridge.showSaveDialog(opts); } } : null);
|
||||
if (!dialogApi) return;
|
||||
dialogApi.showSaveDialog({ title: language_str('saveFile'), filters: [{ name: 'Soon File Type', extensions: ['soon'] }], defaultPath: openAs.name || undefined })
|
||||
dialogApi.showSaveDialog({ title: language_str('saveFile'), filters: [{ name: 'Soon File Type', extensions: ['soon'] }], defaultPath: typeof window.soonSaveDialogDefaultPath === 'function' ? window.soonSaveDialogDefaultPath(openAs.name) : openAs.name })
|
||||
.then(function(result) {
|
||||
if (result.canceled) return;
|
||||
var fp = result.filePath || (result.fileHandle && result.fileHandle.name);
|
||||
var fp = typeof window.soonEnsureSaveFileName === 'function'
|
||||
? window.soonEnsureSaveFileName(result.filePath || (result.fileHandle && result.fileHandle.name))
|
||||
: (result.filePath || (result.fileHandle && result.fileHandle.name));
|
||||
if (!fp) return;
|
||||
var ext = (typeof path !== 'undefined' && path && path.extname) ? path.extname(fp) : (fp.indexOf('.') >= 0 ? fp.slice(fp.lastIndexOf('.')) : '');
|
||||
if (ext !== '.soon') fp = (fp || 'design').replace(/\.soon$/i, '') + '.soon';
|
||||
con_o.soonType = 2;
|
||||
var content = JSON.stringify(con_o);
|
||||
if (window.platformBridge && window.platformBridge.writeFile) {
|
||||
window.platformBridge.writeFile(fp, content).then(function (res) {
|
||||
onCloudWriteDone(res, fp, callback);
|
||||
}).catch(reportSaveError);
|
||||
return;
|
||||
}
|
||||
if (typeof window.soonWriteSoonContentWeb === 'function' &&
|
||||
window.soonWriteSoonContentWeb(fp, content, prevOpenKey, function (res, pk) {
|
||||
onCloudWriteDone(res, pk, callback);
|
||||
})) return;
|
||||
var fs = typeof require !== 'undefined' ? require('fs') : null;
|
||||
if (fs) {
|
||||
fs.writeFileSync(fp, content, 'utf8');
|
||||
@@ -1168,7 +1171,9 @@ function saveAs(op1, callback) {
|
||||
if (callback && typeof callback === 'function') callback();
|
||||
}
|
||||
})
|
||||
.catch(reportSaveError);
|
||||
.catch(function (err) {
|
||||
if (typeof window.soonReportSaveError === 'function') window.soonReportSaveError(err);
|
||||
});
|
||||
}
|
||||
|
||||
function save(op1, callback) {
|
||||
@@ -1204,16 +1209,19 @@ function save(op1, callback) {
|
||||
|
||||
let o = { f: j, b: b, fo: objs1, bo: objs2 }
|
||||
let con_o = Object.assign(o, op1)
|
||||
con_o.soonType = 2
|
||||
var content = JSON.stringify(con_o)
|
||||
if (!guardWebSave()) return;
|
||||
if (openAs.name != '') {
|
||||
if (window.platformBridge && window.platformBridge.writeFile) {
|
||||
window.platformBridge.writeFile(openAs.name, content).then(function (res) {
|
||||
onCloudWriteDone(res, openAs.name, callback);
|
||||
}).catch(reportSaveError);
|
||||
return;
|
||||
}
|
||||
var prevOpenKey = openAs.name || '';
|
||||
if (typeof window.soonApplySavePreview === 'function') window.soonApplySavePreview(con_o, canvas1);
|
||||
con_o.soonType = 2;
|
||||
var content = JSON.stringify(con_o);
|
||||
var needsDialog = typeof window.soonNeedsSaveDialog === 'function'
|
||||
? window.soonNeedsSaveDialog(openAs.name)
|
||||
: !openAs.name;
|
||||
if (openAs.name && !needsDialog) {
|
||||
if (typeof window.soonWriteSoonContentWeb === 'function' &&
|
||||
window.soonWriteSoonContentWeb(openAs.name, content, prevOpenKey, function (res, pk) {
|
||||
onCloudWriteDone(res, pk, callback);
|
||||
})) return;
|
||||
var fs = typeof require !== 'undefined' ? require('fs') : null;
|
||||
if (fs) {
|
||||
fs.writeFileSync(openAs.name, content, 'utf8');
|
||||
@@ -1225,19 +1233,17 @@ function save(op1, callback) {
|
||||
}
|
||||
var dialogApi = (typeof dialog !== 'undefined' && dialog) ? dialog : (window.platformBridge && window.platformBridge.showSaveDialog ? { showSaveDialog: function(opts) { return window.platformBridge.showSaveDialog(opts); } } : null);
|
||||
if (!dialogApi) return;
|
||||
dialogApi.showSaveDialog({ title: language_str('saveFile'), filters: [{ name: 'Soon File Type', extensions: ['soon'] }], defaultPath: openAs.name || undefined })
|
||||
dialogApi.showSaveDialog({ title: language_str('saveFile'), filters: [{ name: 'Soon File Type', extensions: ['soon'] }], defaultPath: typeof window.soonSaveDialogDefaultPath === 'function' ? window.soonSaveDialogDefaultPath(openAs.name) : openAs.name })
|
||||
.then(function(result) {
|
||||
if (result.canceled) return;
|
||||
var fp = result.filePath || (result.fileHandle && result.fileHandle.name);
|
||||
var fp = typeof window.soonEnsureSaveFileName === 'function'
|
||||
? window.soonEnsureSaveFileName(result.filePath || (result.fileHandle && result.fileHandle.name))
|
||||
: (result.filePath || (result.fileHandle && result.fileHandle.name));
|
||||
if (!fp) return;
|
||||
var ext = (typeof path !== 'undefined' && path && path.extname) ? path.extname(fp) : (fp.indexOf('.') >= 0 ? fp.slice(fp.lastIndexOf('.')) : '');
|
||||
if (ext !== '.soon') fp = (fp || 'design').replace(/\.soon$/i, '') + '.soon';
|
||||
if (window.platformBridge && window.platformBridge.writeFile) {
|
||||
window.platformBridge.writeFile(fp, content).then(function (res) {
|
||||
onCloudWriteDone(res, fp, callback);
|
||||
}).catch(reportSaveError);
|
||||
return;
|
||||
}
|
||||
if (typeof window.soonWriteSoonContentWeb === 'function' &&
|
||||
window.soonWriteSoonContentWeb(fp, content, prevOpenKey, function (res, pk) {
|
||||
onCloudWriteDone(res, pk, callback);
|
||||
})) return;
|
||||
var fs = typeof require !== 'undefined' ? require('fs') : null;
|
||||
if (fs) {
|
||||
fs.writeFileSync(fp, content, 'utf8');
|
||||
@@ -1247,12 +1253,27 @@ function save(op1, callback) {
|
||||
if (callback && typeof callback === 'function') callback();
|
||||
}
|
||||
})
|
||||
.catch(reportSaveError);
|
||||
.catch(function (err) {
|
||||
if (typeof window.soonReportSaveError === 'function') window.soonReportSaveError(err);
|
||||
});
|
||||
}
|
||||
|
||||
window.saveHistory = function saveHistory() {
|
||||
var currentPath = openAs.name;
|
||||
if (!currentPath) return;
|
||||
if (window.platformBridge && window.fs == null) {
|
||||
if (typeof window.soonRecentUpsert === 'function') {
|
||||
window.soonRecentUpsert({
|
||||
key: currentPath,
|
||||
name: typeof window.soonDisplayFileName === 'function' ? window.soonDisplayFileName(currentPath) : currentPath,
|
||||
type: soonPageDesignType(),
|
||||
kind: typeof window.soonRecentKindFromKey === 'function' ? window.soonRecentKindFromKey(currentPath) : 'local',
|
||||
thumbRef: currentPath
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
function doWrite(j) {
|
||||
var currentPath = openAs.name;
|
||||
if (!currentPath) return;
|
||||
var pathForHistory = currentPath;
|
||||
if (window.platformBridge && currentPath.indexOf('soondesign_session:') !== 0 && currentPath.indexOf('soondesign_file:') !== 0) {
|
||||
@@ -1455,6 +1476,7 @@ window.openFile = function open(file, jAlready) {
|
||||
step = step2
|
||||
}
|
||||
if (typeof window.soonTryConsumeCloudImport === 'function') window.soonTryConsumeCloudImport(file);
|
||||
if (typeof window.soonRecentUpsertFromOpen === 'function') window.soonRecentUpsertFromOpen(file, j);
|
||||
}
|
||||
|
||||
canvas1.loadFromJSON(j.f, function () {
|
||||
|
||||
@@ -359,9 +359,17 @@ $('#version_change').click(function () {
|
||||
} else {
|
||||
bg_version = 1
|
||||
}
|
||||
// 类型改变
|
||||
$('#source_front').attr('src', soonAsset('front_bg') + bg_version + '_2.png')
|
||||
canvas.renderAll()
|
||||
var sf = document.getElementById('source_front')
|
||||
if (!sf) return
|
||||
sf.onload = function () {
|
||||
if (typeof window.soonDesign2ScaleBgSources === 'function') {
|
||||
window.soonDesign2ScaleBgSources()
|
||||
}
|
||||
canvas1.requestRenderAll()
|
||||
canvas2.requestRenderAll()
|
||||
}
|
||||
sf.onerror = sf.onload
|
||||
sf.src = soonAsset('front_bg' + bg_version + '_2.png')
|
||||
})
|
||||
$('#front_side').click(function () {
|
||||
$(this).addClass('ui-button-active')
|
||||
@@ -1373,58 +1381,6 @@ $('#new').click(function () {
|
||||
)
|
||||
})
|
||||
function chagneTitle() { }
|
||||
function addBackground() {
|
||||
// 类型改变
|
||||
fabric.Image.fromURL(soonAsset('bg_front_2.png'), function (image) {
|
||||
//image.set("scaleX",$("#canvas-div").width() / 1200 < 1 ? $("#canvas-div").width() / 1200 : 1)
|
||||
|
||||
image.left = ($('#canvas1').width() - image.width * image.get('scaleX')) / 2
|
||||
image.top = ($('#canvas1').height() - image.height * image.get('scaleY')) / 2
|
||||
|
||||
image.selectable = false
|
||||
image.hoverable = false
|
||||
image.hoverCursor = 'default'
|
||||
image.setSrc(image.toDataURL(), function (image) {
|
||||
background_image1 = image
|
||||
background_image = background_image1
|
||||
canvas.add(image)
|
||||
canvas.renderAll()
|
||||
//pre_objs1.push(JSON.stringify(objs1));
|
||||
|
||||
recordObjs1.push(JSON.stringify(objs1))
|
||||
const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
|
||||
recordJson1.push(canvas1.toJSON(props))
|
||||
})
|
||||
// 类型改变
|
||||
fabric.Image.fromURL(soonAsset('bg_back_2.png'), function (image) {
|
||||
image.left = ($('#canvas2').width() - image.width) / 2
|
||||
image.top = ($('#canvas2').height() - image.height) / 2
|
||||
|
||||
image.selectable = false
|
||||
image.hoverable = false
|
||||
image.hoverCursor = 'default'
|
||||
|
||||
image.setSrc(image.toDataURL(), function (image) {
|
||||
background_image2 = image
|
||||
canvas2.add(image)
|
||||
canvas2.renderAll()
|
||||
//pre_objs2.push(JSON.stringify(objs2));
|
||||
|
||||
recordObjs2.push(JSON.stringify(objs2))
|
||||
const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
|
||||
recordJson2.push(canvas2.toJSON(props))
|
||||
|
||||
let file = GetFile().get('file')
|
||||
if (file && file != 'empty') {
|
||||
if (typeof window.openFile === 'function') {
|
||||
window.openFile(file);
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
is_bgi_add = true
|
||||
})
|
||||
}
|
||||
function selectObject(target, index) {
|
||||
updateControls()
|
||||
|
||||
@@ -2749,10 +2705,19 @@ if (typeof window._design2CanvasEventsInitialized === 'undefined') {
|
||||
|
||||
// 保留 canvas1 特定的 after:render 处理
|
||||
canvas1.on('after:render', function () {
|
||||
if (is_bgi_add) {
|
||||
var image = document.getElementById('source_front')
|
||||
ctx1.drawImage(image, (canvas.width - $('#source_front').width()) / 2, (canvas.height - $('#source_front').height()) / 2, $('#source_front').width(), $('#source_front').height())
|
||||
}
|
||||
if (!window.is_bgi_add) return
|
||||
var image = document.getElementById('source_front')
|
||||
var metrics = typeof window.soonDesign2BgOverlayMetrics === 'function'
|
||||
? window.soonDesign2BgOverlayMetrics(image)
|
||||
: null
|
||||
if (!metrics) return
|
||||
ctx1.drawImage(
|
||||
image,
|
||||
(canvas1.width - metrics.w) / 2,
|
||||
(canvas1.height - metrics.h) / 2,
|
||||
metrics.w,
|
||||
metrics.h
|
||||
)
|
||||
})
|
||||
// 保留 canvas1 特定的 text:changed 处理
|
||||
canvas1.on('text:changed', (e) => {
|
||||
@@ -2760,11 +2725,27 @@ if (typeof window._design2CanvasEventsInitialized === 'undefined') {
|
||||
})
|
||||
// 保留 canvas2 特定的 after:render 处理
|
||||
canvas2.on('after:render', function () {
|
||||
if (is_bgi_add) {
|
||||
var image = document.getElementById('source_back')
|
||||
ctx2.drawImage(image, (canvas.width - $('#source_back').width()) / 2, (canvas1.height - $('#source_back').height()) / 2, $('#source_back').width(), $('#source_back').height())
|
||||
}
|
||||
if (!window.is_bgi_add) return
|
||||
var image = document.getElementById('source_back')
|
||||
var metrics = typeof window.soonDesign2BgOverlayMetrics === 'function'
|
||||
? window.soonDesign2BgOverlayMetrics(image)
|
||||
: null
|
||||
if (!metrics) return
|
||||
ctx2.drawImage(
|
||||
image,
|
||||
(canvas2.width - metrics.w) / 2,
|
||||
(canvas2.height - metrics.h) / 2,
|
||||
metrics.w,
|
||||
metrics.h
|
||||
)
|
||||
})
|
||||
requestAnimationFrame(function () {
|
||||
requestAnimationFrame(function () {
|
||||
if (typeof window.soonDesign2Kickoff === 'function') {
|
||||
window.soonDesign2Kickoff();
|
||||
}
|
||||
});
|
||||
});
|
||||
// 注意：以下事件已在 core.js 的 initCanvasEvents() 中统一处理，移除重复监听以避免冲突：
|
||||
// - mouse:down (通过 handleObjectSelected 处理)
|
||||
// - mouse:up (已在 core.js 中处理)
|
||||
|
||||
+155
-232
@@ -144,39 +144,17 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
|
||||
|
||||
|
||||
var lang = localStorage.getItem("lang");
|
||||
window.soonResolveLocale(function (code) {
|
||||
|
||||
if (lang) {
|
||||
|
||||
s_lan = lang;
|
||||
s_lan = code;
|
||||
|
||||
langua_ge(s_lan);
|
||||
|
||||
$("#language_select").val(s_lan);
|
||||
|
||||
} else if (window.platformBridge && window.platformBridge.getLocale) {
|
||||
try { localStorage.setItem("lang", s_lan); } catch (e) {}
|
||||
|
||||
window.platformBridge.getLocale().then(function (loc) {
|
||||
|
||||
if (loc && loc.indexOf('zh') === 0) {
|
||||
|
||||
s_lan = loc.indexOf('TW') >= 0 ? 'ozh' : 'zh';
|
||||
|
||||
} else {
|
||||
|
||||
s_lan = 'en';
|
||||
|
||||
}
|
||||
|
||||
langua_ge(s_lan);
|
||||
|
||||
$("#language_select").val(s_lan);
|
||||
|
||||
localStorage.setItem("lang", s_lan);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -199,19 +177,20 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
try { return !!localStorage.getItem('soon_access'); } catch (e) { return false; }
|
||||
}
|
||||
|
||||
function makeFileKey(id, version) {
|
||||
return typeof window.soonMakeFileKey === 'function'
|
||||
? window.soonMakeFileKey(id, version)
|
||||
: ('soondesign_file:' + id + ':v' + version);
|
||||
}
|
||||
|
||||
var fileListState = { page: 1, size: 12, total: 0, items: [] };
|
||||
var templateListState = { page: 1, size: 8, total: 0, items: [] };
|
||||
|
||||
function displayNameFromPath(path) {
|
||||
if (!path) return 'design.soon';
|
||||
if (typeof window.soonDisplayFileName === 'function') {
|
||||
var fromHelper = window.soonDisplayFileName(path);
|
||||
if (fromHelper) return fromHelper;
|
||||
}
|
||||
var sessionPrefix = 'soondesign_session:';
|
||||
if (path.indexOf(sessionPrefix) === 0) return path.substring(sessionPrefix.length);
|
||||
if (path.indexOf(sessionPrefix) === 0) {
|
||||
var slug = path.substring(sessionPrefix.length).replace(/-\d{10,}$/, '');
|
||||
return /\.soon$/i.test(slug) ? slug : (slug + '.soon');
|
||||
}
|
||||
if (path.indexOf('soondesign_file:') === 0) {
|
||||
var meta = window._soonFileMeta;
|
||||
if (meta && meta.name) return meta.name;
|
||||
@@ -220,74 +199,6 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
return get_filename(path) || 'design.soon';
|
||||
}
|
||||
|
||||
function parseItemTime(value) {
|
||||
if (!value) return 0;
|
||||
var d = new Date(String(value).replace(' ', 'T'));
|
||||
return isNaN(d.getTime()) ? 0 : d.getTime();
|
||||
}
|
||||
|
||||
function mergeRecentItems(localHistory, cloudItems) {
|
||||
var items = [];
|
||||
var cloudById = {};
|
||||
var seenCloudIds = {};
|
||||
(cloudItems || []).forEach(function (c) {
|
||||
if (c && c.id != null) cloudById[c.id] = c;
|
||||
});
|
||||
|
||||
(localHistory || []).forEach(function (h) {
|
||||
if (!h || !h.path) return;
|
||||
var cloudMatch = String(h.path).match(/^soondesign_file:(\d+)/);
|
||||
if (cloudMatch) {
|
||||
var id = parseInt(cloudMatch[1], 10);
|
||||
var cloud = cloudById[id];
|
||||
if (cloud) {
|
||||
seenCloudIds[id] = true;
|
||||
items.push({
|
||||
kind: 'cloud',
|
||||
filePath: makeFileKey(cloud.id, cloud.version),
|
||||
fileId: cloud.id,
|
||||
name: cloud.name || ('文件 #' + cloud.id),
|
||||
type: h.type,
|
||||
sortTime: parseItemTime(cloud.updated_at || cloud.created_at || h.time),
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
items.push({
|
||||
kind: 'local',
|
||||
filePath: h.path,
|
||||
name: displayNameFromPath(h.path),
|
||||
type: h.type,
|
||||
sortTime: parseItemTime(h.time),
|
||||
});
|
||||
});
|
||||
|
||||
(cloudItems || []).forEach(function (c) {
|
||||
if (!c || c.id == null || seenCloudIds[c.id]) return;
|
||||
items.push({
|
||||
kind: 'cloud',
|
||||
filePath: makeFileKey(c.id, c.version),
|
||||
fileId: c.id,
|
||||
name: c.name || ('文件 #' + c.id),
|
||||
type: null,
|
||||
sortTime: parseItemTime(c.updated_at || c.created_at),
|
||||
});
|
||||
});
|
||||
|
||||
items.sort(function (a, b) { return (b.sortTime || 0) - (a.sortTime || 0); });
|
||||
return items;
|
||||
}
|
||||
|
||||
async function fetchLocalHistory() {
|
||||
if (!window.sysAPI || typeof window.sysAPI.readHistory !== 'function') return [];
|
||||
try {
|
||||
var j = await window.sysAPI.readHistory();
|
||||
return (j && Array.isArray(j.history)) ? j.history : [];
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchCloudItems() {
|
||||
if (!hasCloudAuth() || !window.platformBridge || !window.platformBridge.listCloudFiles) return [];
|
||||
try {
|
||||
@@ -299,15 +210,60 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
}
|
||||
|
||||
function removeLocalHistoryPath(path) {
|
||||
if (!path || !window.sysAPI || typeof window.sysAPI.readHistory !== 'function') {
|
||||
return Promise.resolve();
|
||||
if (!path) return Promise.resolve();
|
||||
if (typeof window.soonRecentRemove === 'function') window.soonRecentRemove(path);
|
||||
if (typeof window.soonLocalRemove === 'function') {
|
||||
return window.soonLocalRemove(path);
|
||||
}
|
||||
return window.sysAPI.readHistory().then(function (j) {
|
||||
var list = (j && Array.isArray(j.history)) ? j.history : [];
|
||||
var next = list.filter(function (item) { return item.path !== path; });
|
||||
if (next.length === list.length) return null;
|
||||
return window.sysAPI.writeHistory({ history: next });
|
||||
}).catch(function () { return null; });
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
function recentFallbackThumb(type) {
|
||||
var t = Number(type) || 1;
|
||||
return soonAsset(t === 2 ? 'bg_2.png' : 'bg_1.png');
|
||||
}
|
||||
|
||||
async function resolveRecentThumb(item) {
|
||||
var realType = item.type || 1;
|
||||
var fallback = recentFallbackThumb(realType);
|
||||
var thumbKey = item.thumbRef || item.filePath || item.key;
|
||||
if (typeof window.soonLocalGetThumb === 'function' && thumbKey) {
|
||||
var localThumb = await window.soonLocalGetThumb(thumbKey);
|
||||
if (localThumb) {
|
||||
return typeof soonSafeImageUrl === 'function'
|
||||
? soonSafeImageUrl(localThumb, fallback)
|
||||
: localThumb;
|
||||
}
|
||||
}
|
||||
if (item.kind === 'template' && item.filePath) {
|
||||
var tplMatch = String(item.filePath).match(/^soondesign_template:(\d+)/);
|
||||
if (tplMatch) {
|
||||
var base = (window.SOON_DEPLOY_CONFIG && window.SOON_DEPLOY_CONFIG.api_v1_base) || '';
|
||||
if (base) {
|
||||
var v = item.updated_at ? ('?v=' + encodeURIComponent(item.updated_at)) : '';
|
||||
return base + '/templates/' + tplMatch[1] + '/thumb' + v;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (item.kind === 'cloud' && item.fileId && hasCloudAuth()) {
|
||||
var apiBase = (window.SOON_DEPLOY_CONFIG && window.SOON_DEPLOY_CONFIG.api_v1_base) || '';
|
||||
if (apiBase) return apiBase + '/files/' + item.fileId + '/thumb';
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function recentDownloadBtnHtml() {
|
||||
return '<button type="button" class="soon-file-card__action soon-file-card__download" title="下载 .soon" aria-label="下载">'
|
||||
+ '<svg class="soon-file-card__icon" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">'
|
||||
+ '<path d="M12 4v10m0 0l3.5-3.5M12 14l-3.5-3.5M5 20h14"/></svg></button>';
|
||||
}
|
||||
|
||||
function recentDeleteBtnHtml() {
|
||||
return '<button type="button" class="soon-file-card__action soon-file-card__delete" title="' + escapeAttr(language_str('deleteBtn')) + '" aria-label="' + escapeAttr(language_str('deleteBtn')) + '">'
|
||||
+ '<svg class="soon-file-card__icon" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">'
|
||||
+ '<path d="M4 7h16"/><path d="M7 7l1.1 11.1a.9.9 0 00.9.9h6a.9.9 0 00.9-.9L17 7"/>'
|
||||
+ '<path d="M9.5 7V5.6A1.6 1.6 0 0111.1 4h1.8a1.6 1.6 0 011.6 1.6V7"/>'
|
||||
+ '<path d="M10 11v5.5"/><path d="M14 11v5.5"/></svg></button>';
|
||||
}
|
||||
|
||||
function renderFilePager() {
|
||||
@@ -344,22 +300,48 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadHistory() {
|
||||
var _recentLoadedAt = 0;
|
||||
|
||||
async function loadHistory(force) {
|
||||
|
||||
try {
|
||||
|
||||
if (!force && _recentLoadedAt && (Date.now() - _recentLoadedAt) < 60000) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof window.soonRecentMigrateFromHistory === 'function') {
|
||||
window.soonRecentMigrateFromHistory();
|
||||
}
|
||||
|
||||
var recentCountEl = document.getElementById('recentCount');
|
||||
var localHistory = await fetchLocalHistory();
|
||||
var cloudItems = await fetchCloudItems();
|
||||
var merged = mergeRecentItems(localHistory, cloudItems);
|
||||
fileListState.items = merged;
|
||||
fileListState.total = merged.length;
|
||||
var items = typeof window.soonRecentList === 'function' ? window.soonRecentList() : [];
|
||||
var mapped = items.map(function (it) {
|
||||
return {
|
||||
kind: it.kind || (typeof window.soonRecentKindFromKey === 'function' ? window.soonRecentKindFromKey(it.key) : 'local'),
|
||||
filePath: it.key,
|
||||
fileId: it.fileId,
|
||||
name: it.name,
|
||||
type: it.type,
|
||||
thumbRef: it.thumbRef || it.key,
|
||||
updated_at: it.updated_at || ''
|
||||
};
|
||||
});
|
||||
|
||||
if (hasCloudAuth() && typeof window.soonRecentEnrichFromCloud === 'function') {
|
||||
var cloudItems = await fetchCloudItems();
|
||||
mapped = window.soonRecentEnrichFromCloud(mapped, cloudItems);
|
||||
}
|
||||
|
||||
fileListState.items = mapped;
|
||||
fileListState.total = mapped.length;
|
||||
var pages = Math.max(1, Math.ceil(fileListState.total / fileListState.size));
|
||||
if (fileListState.page > pages) fileListState.page = pages;
|
||||
_recentLoadedAt = Date.now();
|
||||
|
||||
if (recentCountEl) recentCountEl.textContent = String(fileListState.total);
|
||||
|
||||
if (!merged.length) {
|
||||
if (!mapped.length) {
|
||||
|
||||
$(".card-list").html(soonEmptyBlock('暂无文件', '点击「打开文件」导入，或新建模板开始设计'));
|
||||
renderFilePager();
|
||||
@@ -368,89 +350,30 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
}
|
||||
|
||||
var start = (fileListState.page - 1) * fileListState.size;
|
||||
var slice = merged.slice(start, start + fileListState.size);
|
||||
var slice = mapped.slice(start, start + fileListState.size);
|
||||
let h = "";
|
||||
|
||||
for (let item of slice) {
|
||||
|
||||
let filePath = item.filePath;
|
||||
let src = "";
|
||||
let fileExists = true;
|
||||
let imgStyle = "";
|
||||
let realType = item.type || 1;
|
||||
const soonData = await window.sysAPI.readJsonFile(filePath);
|
||||
|
||||
if (soonData) {
|
||||
|
||||
realType = soonData.soonType ? soonData.soonType : (soonData.backBlackPic ? 2 : 1);
|
||||
|
||||
var fallbackThumb = (realType == 2 || realType == "2") ? soonAsset('bg_2.png') : soonAsset('bg_1.png');
|
||||
|
||||
src = typeof soonSafeImageUrl === 'function'
|
||||
|
||||
? soonSafeImageUrl(soonData.frontDisplayPic, fallbackThumb)
|
||||
|
||||
: (soonData.frontDisplayPic || fallbackThumb);
|
||||
|
||||
if (!src) src = fallbackThumb;
|
||||
|
||||
} else {
|
||||
|
||||
fileExists = false;
|
||||
|
||||
src = soonAsset((realType == 2 || realType == "2") ? 'bg_2.png' : 'bg_1.png');
|
||||
|
||||
imgStyle = "opacity: 0.6; filter: grayscale(100%);";
|
||||
|
||||
}
|
||||
|
||||
let src = await resolveRecentThumb(item);
|
||||
let fallbackSrc = recentFallbackThumb(realType);
|
||||
let displayName = item.name || displayNameFromPath(filePath);
|
||||
|
||||
let cardTitle = displayName;
|
||||
|
||||
var cardClass = 'card';
|
||||
|
||||
if (!fileExists) {
|
||||
var actions = recentDownloadBtnHtml() + recentDeleteBtnHtml();
|
||||
|
||||
cardTitle = language_str("clickToDelete");
|
||||
|
||||
cardClass += ' soon-card--lost';
|
||||
|
||||
}
|
||||
|
||||
var lostBadge = !fileExists
|
||||
|
||||
? ' <span class="soon-badge soon-badge--disabled">' + language_str("lost") + '</span>'
|
||||
|
||||
: '';
|
||||
|
||||
var actions = '';
|
||||
if (item.kind === 'cloud' && item.fileId) {
|
||||
actions = '<button type="button" class="soon-file-card__action soon-file-card__download" title="下载 .soon" aria-label="下载">'
|
||||
+ '<svg class="soon-file-card__icon" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">'
|
||||
+ '<path d="M12 4v10m0 0l3.5-3.5M12 14l-3.5-3.5M5 20h14"/></svg></button>'
|
||||
+ '<button type="button" class="soon-file-card__action soon-file-card__delete" title="' + escapeAttr(language_str('deleteBtn')) + '" aria-label="' + escapeAttr(language_str('deleteBtn')) + '">'
|
||||
+ '<svg class="soon-file-card__icon" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">'
|
||||
+ '<path d="M4 7h16"/><path d="M7 7l1.1 11.1a.9.9 0 00.9.9h6a.9.9 0 00.9-.9L17 7"/>'
|
||||
+ '<path d="M9.5 7V5.6A1.6 1.6 0 0111.1 4h1.8a1.6 1.6 0 011.6 1.6V7"/>'
|
||||
+ '<path d="M10 11v5.5"/><path d="M14 11v5.5"/></svg></button>';
|
||||
} else {
|
||||
actions = '<button type="button" class="soon-file-card__action soon-file-card__delete" title="' + escapeAttr(language_str('deleteBtn')) + '" aria-label="' + escapeAttr(language_str('deleteBtn')) + '">'
|
||||
+ '<svg class="soon-file-card__icon" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">'
|
||||
+ '<path d="M4 7h16"/><path d="M7 7l1.1 11.1a.9.9 0 00.9.9h6a.9.9 0 00.9-.9L17 7"/>'
|
||||
+ '<path d="M9.5 7V5.6A1.6 1.6 0 0111.1 4h1.8a1.6 1.6 0 011.6 1.6V7"/>'
|
||||
+ '<path d="M10 11v5.5"/><path d="M14 11v5.5"/></svg></button>';
|
||||
}
|
||||
|
||||
h += `<div class="${cardClass}" data-file="${escapeAttr(filePath)}" data-kind="${item.kind}"${item.fileId ? (' data-id="' + item.fileId + '"') : ''} data-name="${escapeAttr(displayName)}" title="${escapeAttr(cardTitle)}">
|
||||
h += `<div class="${cardClass}" data-file="${escapeAttr(filePath)}" data-kind="${item.kind}" data-type="${realType}"${item.fileId ? (' data-id="' + item.fileId + '"') : ''} data-name="${escapeAttr(displayName)}" title="${escapeAttr(cardTitle)}">
|
||||
|
||||
<div class="rect ${realType == 2 ? 'rect1' : ''}">
|
||||
|
||||
<div class="soon-file-card__actions">${actions}</div>
|
||||
|
||||
<img src="${escapeAttr(src)}" style="${imgStyle}" alt="">
|
||||
<img src="${escapeAttr(src)}" alt="" onerror="this.onerror=null;this.src='${escapeAttr(fallbackSrc)}'">
|
||||
|
||||
<div class="tip">${escapeAttr(displayName)}${lostBadge}</div>
|
||||
<div class="tip">${escapeAttr(displayName)}</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -468,17 +391,13 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
$(".card-list").html(soonEmptyBlock('加载失败', '请刷新页面重试',
|
||||
'<button type="button" class="soon-btn soon-btn--sm soon-empty__action" id="fileListRetry">重试</button>'));
|
||||
var retry = document.getElementById('fileListRetry');
|
||||
if (retry) retry.onclick = function () { loadHistory(); };
|
||||
if (retry) retry.onclick = function () { loadHistory(true); };
|
||||
if (document.getElementById('filePager')) document.getElementById('filePager').innerHTML = '';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.soonReloadRecentFiles = loadHistory;
|
||||
|
||||
|
||||
|
||||
function renderTemplatesError(message) {
|
||||
|
||||
var grid = document.getElementById('templatesGrid');
|
||||
@@ -517,6 +436,7 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
id: id,
|
||||
name: m.name || m.title || '模板',
|
||||
type: type,
|
||||
updated_at: m.updated_at || '',
|
||||
thumbSrc: id ? (base + '/templates/' + id + '/thumb' + v) : templateFallbackThumb(type)
|
||||
};
|
||||
}
|
||||
@@ -528,6 +448,12 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
if (typeof window.soonToast === 'function') window.soonToast('模板不可用', 'error');
|
||||
return;
|
||||
}
|
||||
window._soonTemplateMeta = {
|
||||
id: id,
|
||||
name: m.name || m.title || '模板',
|
||||
type: type,
|
||||
updated_at: m.updated_at || ''
|
||||
};
|
||||
var templateKey = typeof window.soonMakeTemplateKey === 'function'
|
||||
? window.soonMakeTemplateKey(id)
|
||||
: ('soondesign_template:' + id);
|
||||
@@ -658,16 +584,23 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
|
||||
|
||||
|
||||
loadHistory();
|
||||
loadHistory(true);
|
||||
|
||||
loadTemplates();
|
||||
|
||||
window.soonReloadRecentFiles = function () { loadHistory(true); };
|
||||
window.soonReloadTemplates = function () { loadTemplates(true); };
|
||||
document.addEventListener('visibilitychange', function () {
|
||||
if (document.visibilityState === 'visible') loadTemplates(false);
|
||||
if (document.visibilityState === 'visible') {
|
||||
loadTemplates(false);
|
||||
loadHistory(false);
|
||||
}
|
||||
});
|
||||
window.addEventListener('pageshow', function (e) {
|
||||
if (e.persisted) loadTemplates(false);
|
||||
if (e.persisted) {
|
||||
loadTemplates(false);
|
||||
loadHistory(false);
|
||||
}
|
||||
});
|
||||
|
||||
var templatePrevNav = document.getElementById('templatePrev');
|
||||
@@ -713,6 +646,14 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
await window.platformBridge.deleteCloudFile(fileId);
|
||||
} catch (e) { /* ignore */ }
|
||||
}
|
||||
if (typeof window.soonRecentList === 'function') {
|
||||
window.soonRecentList().forEach(function (it) {
|
||||
if (it.fileId === fileId) {
|
||||
if (typeof window.soonRecentRemove === 'function') window.soonRecentRemove(it.key);
|
||||
if (typeof window.soonLocalRemove === 'function') window.soonLocalRemove(it.key);
|
||||
}
|
||||
});
|
||||
}
|
||||
layer.msg(language_str("deleted"), { icon: 1, time: 1000 });
|
||||
if (typeof onDone === 'function') onDone();
|
||||
layer.close(index);
|
||||
@@ -726,14 +667,27 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
|
||||
var card = $(this).closest('.card');
|
||||
|
||||
var id = parseInt(card.attr('data-id'), 10);
|
||||
var filePath = card.attr('data-file') || '';
|
||||
|
||||
var kind = card.attr('data-kind') || 'local';
|
||||
|
||||
var fileId = parseInt(card.attr('data-id'), 10);
|
||||
|
||||
var name = card.attr('data-name') || 'design.soon';
|
||||
|
||||
if (id && window.platformBridge && window.platformBridge.downloadCloudFile) {
|
||||
var type = parseInt(card.attr('data-type'), 10) || 1;
|
||||
|
||||
window.platformBridge.downloadCloudFile(id, name).catch(function () {});
|
||||
var item = {
|
||||
kind: kind,
|
||||
filePath: filePath,
|
||||
key: filePath,
|
||||
fileId: fileId || undefined,
|
||||
name: name,
|
||||
type: type
|
||||
};
|
||||
|
||||
if (typeof window.soonDownloadRecentItem === 'function') {
|
||||
window.soonDownloadRecentItem(item);
|
||||
}
|
||||
|
||||
});
|
||||
@@ -771,7 +725,7 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
} catch (err) { /* ignore */ }
|
||||
}
|
||||
layer.msg(language_str("deleted"), { icon: 1, time: 1000 });
|
||||
loadHistory();
|
||||
loadHistory(true);
|
||||
layer.close(index);
|
||||
});
|
||||
}
|
||||
@@ -781,52 +735,21 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
||||
|
||||
}
|
||||
|
||||
confirmDeleteCloudFile(fileId, language_str('deleteFileConfirm'), loadHistory);
|
||||
confirmDeleteCloudFile(fileId, language_str('deleteFileConfirm'), function () { loadHistory(true); });
|
||||
|
||||
});
|
||||
|
||||
$(".card-list").on("click", '.card', async function () {
|
||||
$(".card-list").on("click", '.card', function () {
|
||||
|
||||
let filePath = $(this).attr("data-file") || $(this).attr("data");
|
||||
let type = Number($(this).attr("data-type")) || 1;
|
||||
|
||||
const soonData = await window.sysAPI.readJsonFile(filePath);
|
||||
|
||||
if (soonData) {
|
||||
|
||||
let type = soonData.soonType ? soonData.soonType : (soonData.backBlackPic ? 2 : 1);
|
||||
|
||||
if (typeof window.soonBindFileMeta === 'function') {
|
||||
window.soonBindFileMeta(filePath, { name: $(this).attr('data-name') || '' });
|
||||
}
|
||||
|
||||
openDesign(type, filePath);
|
||||
|
||||
} else {
|
||||
|
||||
var kind = $(this).attr('data-kind') || 'cloud';
|
||||
|
||||
var fileId = parseInt($(this).attr('data-id'), 10);
|
||||
|
||||
if (kind === 'local' || !fileId) {
|
||||
|
||||
removeLocalHistoryPath(filePath).then(function () {
|
||||
if (filePath.indexOf('soondesign_session:') === 0) {
|
||||
try {
|
||||
sessionStorage.removeItem(filePath);
|
||||
localStorage.removeItem(filePath);
|
||||
} catch (err) { /* ignore */ }
|
||||
}
|
||||
loadHistory();
|
||||
});
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
confirmDeleteCloudFile(fileId, language_str("delContent"), loadHistory);
|
||||
|
||||
if (typeof window.soonBindFileMeta === 'function') {
|
||||
window.soonBindFileMeta(filePath, { name: $(this).attr('data-name') || '' });
|
||||
}
|
||||
|
||||
openDesign(type, filePath);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
+217
-73
@@ -186,7 +186,9 @@
|
||||
}
|
||||
|
||||
function downloadCloudFile(id, fileName) {
|
||||
if (!requireCloudAuth('下载')) return Promise.reject(new Error('unauthorized'));
|
||||
if (!getAccessToken()) {
|
||||
return Promise.reject(new Error('unauthorized'));
|
||||
}
|
||||
return authedFetch('files/' + id + '/download', { headers: { Accept: 'application/octet-stream' } })
|
||||
.then(function (response) {
|
||||
if (!response.ok) {
|
||||
@@ -202,6 +204,52 @@
|
||||
});
|
||||
}
|
||||
|
||||
function isSoonSaveDialog(options) {
|
||||
if (options && options.soonFile === true) return true;
|
||||
if (options && options.soonFile === false) return false;
|
||||
var raw = (options && options.defaultPath) ? String(options.defaultPath) : '';
|
||||
if (!raw) return true;
|
||||
if (typeof window.soonIsTemplateKey === 'function' && window.soonIsTemplateKey(raw)) return true;
|
||||
if (raw.indexOf('soondesign_file:') === 0 || raw.indexOf('soondesign_session:') === 0) return true;
|
||||
var filters = options && options.filters;
|
||||
if (filters && Array.isArray(filters)) {
|
||||
for (var i = 0; i < filters.length; i++) {
|
||||
var exts = filters[i].extensions;
|
||||
if (exts && exts.indexOf('soon') >= 0) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return /\.soon$/i.test(raw.split(/[/\\]/).pop() || '');
|
||||
}
|
||||
|
||||
function genericSaveDialogName(raw) {
|
||||
var n = String(raw || 'file').trim();
|
||||
return n.split(/[/\\]/).pop() || n || 'file';
|
||||
}
|
||||
|
||||
function resolveSaveDialogName(name, options, isSoon) {
|
||||
var n = String(name || '').trim();
|
||||
if (!n) n = isSoon ? 'design.soon' : 'file';
|
||||
if (isSoon) {
|
||||
return typeof window.soonEnsureSoonExt === 'function'
|
||||
? window.soonEnsureSoonExt(n)
|
||||
: normalizeSoonName(n);
|
||||
}
|
||||
return genericSaveDialogName(n);
|
||||
}
|
||||
|
||||
function defaultSoonSaveDialogName(raw) {
|
||||
if (!raw || (typeof window.soonIsTemplateKey === 'function' && window.soonIsTemplateKey(raw))) {
|
||||
return typeof window.soonDefaultNewSoonName === 'function'
|
||||
? window.soonDefaultNewSoonName()
|
||||
: normalizeSoonName('design.soon');
|
||||
}
|
||||
if (raw.indexOf('soondesign_file:') === 0 && typeof window.soonDisplayFileName === 'function') {
|
||||
return window.soonDisplayFileName(raw);
|
||||
}
|
||||
return normalizeSoonName(raw);
|
||||
}
|
||||
|
||||
var bridge = {
|
||||
readHistory: function () {
|
||||
try {
|
||||
@@ -234,61 +282,121 @@
|
||||
});
|
||||
}
|
||||
var key = typeof pathOrHandle === 'string' ? pathOrHandle : '';
|
||||
if (key.indexOf('soondesign_session:') === 0) {
|
||||
try {
|
||||
var j = sessionStorage.getItem(key);
|
||||
if (!j && typeof localStorage !== 'undefined') j = localStorage.getItem(key);
|
||||
return Promise.resolve(j ? JSON.parse(j) : null);
|
||||
} catch (e) { return Promise.resolve(null); }
|
||||
}
|
||||
if (key && key.indexOf('soondesign_file:') === 0 && typeof fetch !== 'undefined') {
|
||||
var fileMatch = key.match(/^soondesign_file:(\d+)/);
|
||||
if (fileMatch && getAccessToken()) {
|
||||
return authedFetch('files/' + fileMatch[1], { headers: { Accept: 'application/json' } })
|
||||
.then(function (response) {
|
||||
if (!response.ok) return null;
|
||||
return response.json();
|
||||
})
|
||||
.then(function (payload) {
|
||||
if (!payload || !payload.ok || !payload.data) return null;
|
||||
var raw = payload.data.json;
|
||||
if (typeof raw === 'string') {
|
||||
try { return JSON.parse(raw); } catch (e) { return null; }
|
||||
}
|
||||
return raw && typeof raw === 'object' ? raw : null;
|
||||
})
|
||||
.catch(function () { return null; });
|
||||
var cacheKey = key;
|
||||
|
||||
function cacheHitThen(hit) {
|
||||
if (!hit || !hit.json) return null;
|
||||
if (typeof window.soonLocalIsTemplateStale === 'function' &&
|
||||
window.soonLocalIsTemplateStale(cacheKey, hit.meta)) {
|
||||
if (typeof window.soonLocalRemove === 'function') {
|
||||
return window.soonLocalRemove(cacheKey).then(function () { return null; });
|
||||
}
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
if (cacheKey.indexOf('soondesign_file:') === 0 && hit.meta && hit.meta.name &&
|
||||
typeof window.soonBindFileMeta === 'function') {
|
||||
window.soonBindFileMeta(cacheKey, { name: hit.meta.name });
|
||||
}
|
||||
return Promise.resolve(hit.json);
|
||||
}
|
||||
if (key && key.indexOf('soondesign_template:') === 0 && typeof fetch !== 'undefined') {
|
||||
var tplMatch = key.match(/^soondesign_template:(\d+)/);
|
||||
if (tplMatch) {
|
||||
var apiBase = (window.SOON_DEPLOY_CONFIG && window.SOON_DEPLOY_CONFIG.api_v1_base) || '';
|
||||
if (!apiBase) return Promise.resolve(null);
|
||||
return fetch(apiBase + '/templates/' + tplMatch[1], { headers: { Accept: 'application/json' } })
|
||||
.then(function (response) {
|
||||
if (!response.ok) return null;
|
||||
return response.json();
|
||||
})
|
||||
.then(function (payload) {
|
||||
if (!payload || !payload.ok || !payload.data) return null;
|
||||
if (payload.data.id) {
|
||||
window._soonTemplateMeta = {
|
||||
id: payload.data.id,
|
||||
|
||||
function afterNetworkJson(json, meta) {
|
||||
if (!json) return null;
|
||||
if (typeof window.soonLocalCacheAndThumb === 'function') {
|
||||
return window.soonLocalCacheAndThumb(cacheKey, json, meta || {}).then(function () { return json; });
|
||||
}
|
||||
return json;
|
||||
}
|
||||
|
||||
if (key && typeof window.soonLocalGet === 'function') {
|
||||
return window.soonLocalGet(cacheKey).then(function (hit) {
|
||||
return cacheHitThen(hit).then(function (cached) {
|
||||
if (cached) return cached;
|
||||
return fetchFromNetwork(key, cacheKey);
|
||||
});
|
||||
}).catch(function () { return fetchFromNetwork(key, cacheKey); });
|
||||
}
|
||||
return fetchFromNetwork(key, cacheKey);
|
||||
|
||||
function fetchFromNetwork(key, cacheKey) {
|
||||
if (key.indexOf('soondesign_session:') === 0) {
|
||||
if (typeof window.soonLocalGet === 'function') {
|
||||
return window.soonLocalGet(cacheKey).then(function (hit) {
|
||||
if (hit && hit.json) return hit.json;
|
||||
try {
|
||||
var j = sessionStorage.getItem(key);
|
||||
if (!j && typeof localStorage !== 'undefined') j = localStorage.getItem(key);
|
||||
if (!j || j === 'idb') return null;
|
||||
var parsed = JSON.parse(j);
|
||||
return afterNetworkJson(parsed, { source: 'session', name: key });
|
||||
} catch (e) { return null; }
|
||||
});
|
||||
}
|
||||
try {
|
||||
var j = sessionStorage.getItem(key);
|
||||
if (!j && typeof localStorage !== 'undefined') j = localStorage.getItem(key);
|
||||
if (!j || j === 'idb') return Promise.resolve(null);
|
||||
return Promise.resolve(JSON.parse(j));
|
||||
} catch (e) { return Promise.resolve(null); }
|
||||
}
|
||||
if (key && key.indexOf('soondesign_file:') === 0 && typeof fetch !== 'undefined') {
|
||||
var fileMatch = key.match(/^soondesign_file:(\d+)/);
|
||||
if (fileMatch && getAccessToken()) {
|
||||
return authedFetch('files/' + fileMatch[1], { headers: { Accept: 'application/json' } })
|
||||
.then(function (response) {
|
||||
if (!response.ok) return null;
|
||||
return response.json();
|
||||
})
|
||||
.then(function (payload) {
|
||||
if (!payload || !payload.ok || !payload.data) return null;
|
||||
var raw = payload.data.json;
|
||||
var parsed;
|
||||
if (typeof raw === 'string') {
|
||||
try { parsed = JSON.parse(raw); } catch (e) { return null; }
|
||||
} else {
|
||||
parsed = raw && typeof raw === 'object' ? raw : null;
|
||||
}
|
||||
if (!parsed) return null;
|
||||
if (typeof window.soonApplyCloudMeta === 'function') {
|
||||
window.soonApplyCloudMeta(payload.data);
|
||||
}
|
||||
return afterNetworkJson(parsed, {
|
||||
source: 'cloud',
|
||||
name: payload.data.name || '',
|
||||
type: payload.data.type
|
||||
};
|
||||
}
|
||||
var raw = payload.data.json;
|
||||
if (typeof raw === 'string') {
|
||||
try { return JSON.parse(raw); } catch (e) { return null; }
|
||||
}
|
||||
return raw && typeof raw === 'object' ? raw : null;
|
||||
})
|
||||
.catch(function () { return null; });
|
||||
type: parsed.soonType || 1,
|
||||
updatedAt: payload.data.updated_at || ''
|
||||
});
|
||||
})
|
||||
.catch(function () { return null; });
|
||||
}
|
||||
}
|
||||
if (key && key.indexOf('soondesign_template:') === 0 && typeof fetch !== 'undefined') {
|
||||
var tplMatch = key.match(/^soondesign_template:(\d+)/);
|
||||
if (tplMatch) {
|
||||
var apiBase = (window.SOON_DEPLOY_CONFIG && window.SOON_DEPLOY_CONFIG.api_v1_base) || '';
|
||||
if (!apiBase) return Promise.resolve(null);
|
||||
return fetch(apiBase + '/templates/' + tplMatch[1] + '/file', { headers: { Accept: 'application/json' } })
|
||||
.then(function (response) {
|
||||
if (!response.ok) return null;
|
||||
return response.text();
|
||||
})
|
||||
.then(function (text) {
|
||||
if (!text) return null;
|
||||
var parsed;
|
||||
try { parsed = JSON.parse(text); } catch (e) { return null; }
|
||||
var tplMeta = window._soonTemplateMeta || {};
|
||||
return afterNetworkJson(parsed, {
|
||||
source: 'template',
|
||||
name: tplMeta.name || '',
|
||||
type: tplMeta.type || (parsed.soonType || 1),
|
||||
updatedAt: tplMeta.updated_at || ''
|
||||
});
|
||||
})
|
||||
.catch(function () { return null; });
|
||||
}
|
||||
}
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
return Promise.resolve(null);
|
||||
},
|
||||
showOpenDialog: function (options) {
|
||||
return new Promise(function (resolve) {
|
||||
@@ -327,16 +435,12 @@
|
||||
},
|
||||
showSaveDialog: function (options) {
|
||||
var raw = (options && options.defaultPath) ? options.defaultPath : '';
|
||||
var defaultName = normalizeSoonName(raw || 'design.soon');
|
||||
if (typeof window.soonDisplayFileName === 'function' &&
|
||||
(raw.indexOf('soondesign_file:') === 0 || raw.indexOf('soondesign_template:') === 0)) {
|
||||
defaultName = window.soonDisplayFileName(raw);
|
||||
}
|
||||
var title = (options && options.title) ? options.title : '保存到云端';
|
||||
var isSoon = isSoonSaveDialog(options);
|
||||
var defaultName = isSoon ? defaultSoonSaveDialogName(raw) : genericSaveDialogName(raw);
|
||||
var title = (options && options.title) ? options.title : (isSoon ? '保存到云端' : '保存文件');
|
||||
return new Promise(function (resolve) {
|
||||
if (typeof layer === 'undefined' || !layer.open) {
|
||||
var fpFallback = defaultName;
|
||||
resolve({ canceled: false, filePath: fpFallback, useCloud: true });
|
||||
resolve({ canceled: false, filePath: defaultName, useCloud: !!isSoon });
|
||||
return;
|
||||
}
|
||||
var esc = function (s) {
|
||||
@@ -359,10 +463,9 @@
|
||||
yes: function (index) {
|
||||
var input = document.getElementById('soonSaveDialogInput');
|
||||
var name = input && input.value ? String(input.value).trim() : defaultName;
|
||||
if (!name) name = defaultName;
|
||||
name = normalizeSoonName(name);
|
||||
name = resolveSaveDialogName(name, options, isSoon);
|
||||
layer.close(index);
|
||||
resolve({ canceled: false, filePath: name, useCloud: true });
|
||||
resolve({ canceled: false, filePath: name, useCloud: !!isSoon });
|
||||
},
|
||||
btn2: function (index) {
|
||||
layer.close(index);
|
||||
@@ -397,21 +500,52 @@
|
||||
var cloudRef = parseCloudRef(name);
|
||||
var fileName = normalizeSoonName(name);
|
||||
|
||||
var parsedJson;
|
||||
try { parsedJson = JSON.parse(str); } catch (e) { parsedJson = null; }
|
||||
|
||||
function cacheWriteForKey(targetKey, meta) {
|
||||
if (!parsedJson || typeof window.soonLocalCacheAndThumb !== 'function') return Promise.resolve();
|
||||
return window.soonLocalCacheAndThumb(targetKey, parsedJson, meta || {});
|
||||
}
|
||||
|
||||
function afterCloudSave(res, prevKey) {
|
||||
if (!res || !res.fileKey || !parsedJson) return res;
|
||||
var meta = { source: 'cloud', name: res.name || fileName, type: parsedJson.soonType || 1 };
|
||||
if (prevKey && prevKey !== res.fileKey && typeof window.soonLocalRenameKey === 'function') {
|
||||
return window.soonLocalRenameKey(prevKey, res.fileKey, meta).then(function () { return res; });
|
||||
}
|
||||
return cacheWriteForKey(res.fileKey, meta).then(function () { return res; });
|
||||
}
|
||||
|
||||
if (!getAccessToken()) {
|
||||
if (cloudRef && cloudRef.id) {
|
||||
requireCloudAuth('保存');
|
||||
return Promise.reject(new Error('unauthorized'));
|
||||
}
|
||||
var sessionKey = name.indexOf('soondesign_session:') === 0
|
||||
? name
|
||||
: 'soondesign_session:' + fileName.replace(/\.soon$/i, '') + '-' + Date.now();
|
||||
try {
|
||||
sessionStorage.setItem(sessionKey, str);
|
||||
try { localStorage.setItem(sessionKey, str); } catch (e2) { /* ignore quota */ }
|
||||
return Promise.resolve({ fileKey: sessionKey, name: fileName, version: 0 });
|
||||
} catch (e) {
|
||||
return Promise.reject(new Error('save_failed'));
|
||||
var sessionKey = typeof window.soonMakeSessionKey === 'function'
|
||||
? window.soonMakeSessionKey(name)
|
||||
: (name.indexOf('soondesign_session:') === 0
|
||||
? name
|
||||
: 'soondesign_session:' + fileName.replace(/\.soon$/i, ''));
|
||||
var prevSessionKey = name.indexOf('soondesign_session:') === 0 ? name : '';
|
||||
function finishSessionSave() {
|
||||
try { sessionStorage.setItem(sessionKey, 'idb'); } catch (e) { /* ignore */ }
|
||||
return { fileKey: sessionKey, name: fileName, version: 0 };
|
||||
}
|
||||
if (prevSessionKey && prevSessionKey !== sessionKey &&
|
||||
typeof window.soonLocalRenameKey === 'function') {
|
||||
return cacheWriteForKey(sessionKey, { source: 'session', name: fileName }).then(function () {
|
||||
return window.soonLocalRenameKey(prevSessionKey, sessionKey, { source: 'session', name: fileName })
|
||||
.then(finishSessionSave);
|
||||
}).catch(function () {
|
||||
return Promise.reject(new Error('save_failed'));
|
||||
});
|
||||
}
|
||||
return cacheWriteForKey(sessionKey, { source: 'session', name: fileName }).then(function () {
|
||||
return finishSessionSave();
|
||||
}).catch(function () {
|
||||
return Promise.reject(new Error('save_failed'));
|
||||
});
|
||||
}
|
||||
|
||||
if (!requireCloudAuth('保存')) {
|
||||
@@ -423,10 +557,20 @@
|
||||
if (ver == null && window._soonFileMeta && window._soonFileMeta.id === cloudRef.id) {
|
||||
ver = window._soonFileMeta.version;
|
||||
}
|
||||
return updateCloudFile(cloudRef.id, fileName, str, ver);
|
||||
if (typeof window.soonResolveCloudFileName === 'function') {
|
||||
var cloudSaveName = window.soonResolveCloudFileName(name);
|
||||
if (cloudSaveName) fileName = cloudSaveName;
|
||||
}
|
||||
var prevCloudKey = name;
|
||||
return updateCloudFile(cloudRef.id, fileName, str, ver).then(function (res) {
|
||||
return afterCloudSave(res, prevCloudKey);
|
||||
});
|
||||
}
|
||||
|
||||
return createCloudFile(fileName, str);
|
||||
var prevKey = name.indexOf('soondesign_session:') === 0 ? name : '';
|
||||
return createCloudFile(fileName, str).then(function (res) {
|
||||
return afterCloudSave(res, prevKey);
|
||||
});
|
||||
},
|
||||
readFile: function (pathOrHandle) {
|
||||
if (pathOrHandle && pathOrHandle.getFile) {
|
||||
|
||||
@@ -879,6 +879,8 @@
|
||||
<script src="../js/common/auth-session.js"></script>
|
||||
<script src="../js/common/member-pay-core.js"></script>
|
||||
<script src="../js/common/cloud-files.js"></script>
|
||||
<script src="../js/common/soon-local-store.js"></script>
|
||||
<script src="../js/common/soon-recent.js"></script>
|
||||
<script src="../js/common/asset-base.js"></script>
|
||||
<script src="../js/common/portal-topbar.js"></script>
|
||||
<script src="../js/common/portal-auth.js"></script>
|
||||
|
||||
@@ -559,15 +559,17 @@
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="ui-button ui-button-active img-warp" id="front_side">
|
||||
<span language="m" zh="正面" ozh="正面" en="Front"></span>
|
||||
</div>
|
||||
<div class="ui-button img-warp" id="back_side">
|
||||
<span language="m" zh="背面" ozh="背面" en="Back"></span>
|
||||
<div class="soon-side-tabs">
|
||||
<div class="ui-button ui-button-active" id="front_side">
|
||||
<span language="m" zh="正面" ozh="正面" en="Front"></span>
|
||||
</div>
|
||||
<div class="ui-button" id="back_side">
|
||||
<span language="m" zh="背面" ozh="背面" en="Back"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="ui-button img-warp" id="version_change">
|
||||
<div class="ui-button soon-tool-text-btn" id="version_change">
|
||||
<span language="m" zh="切换" ozh="切换" en="Swap"></span>
|
||||
</div>
|
||||
|
||||
@@ -669,6 +671,8 @@
|
||||
<script src="../js/common/auth-session.js"></script>
|
||||
<script src="../js/common/member-pay-core.js"></script>
|
||||
<script src="../js/common/cloud-files.js"></script>
|
||||
<script src="../js/common/soon-local-store.js"></script>
|
||||
<script src="../js/common/soon-recent.js"></script>
|
||||
<script src="../js/common/asset-base.js"></script>
|
||||
<script src="../js/common/portal-topbar.js"></script>
|
||||
<script src="../js/common/portal-auth.js"></script>
|
||||
|
||||
@@ -140,6 +140,8 @@
|
||||
|
||||
<script src="../js/common/auth-session.js"></script>
|
||||
<script src="../js/common/cloud-files.js"></script>
|
||||
<script src="../js/common/soon-local-store.js"></script>
|
||||
<script src="../js/common/soon-recent.js"></script>
|
||||
<script src="../vendor/layui/layui.js"></script>
|
||||
<script src="../vendor/js/qrcode.min.js"></script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user