ts-glitter 13.2.2 → 13.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lowcode/Entry.js +1 -1
- package/lowcode/Entry.ts +1 -1
- package/lowcode/backend-manager/bg-customer-message.js +12 -3
- package/lowcode/backend-manager/bg-customer-message.ts +29 -14
- package/lowcode/backend-manager/bg-guide.js +197 -31
- package/lowcode/backend-manager/bg-guide.ts +281 -75
- package/lowcode/backend-manager/bg-widget.js +1 -1
- package/lowcode/backend-manager/bg-widget.ts +1 -1
- package/lowcode/glitter-base/route/shopping.js +11 -0
- package/lowcode/glitter-base/route/shopping.ts +11 -0
- package/lowcode/jspage/main.js +11 -5
- package/lowcode/jspage/main.ts +13 -5
- package/package.json +1 -1
- package/src/api-public/controllers/fb-message.js +0 -1
- package/src/api-public/controllers/fb-message.js.map +1 -1
- package/src/api-public/controllers/fb-message.ts +0 -1
- package/src/api-public/services/chat.js +0 -1
- package/src/api-public/services/chat.js.map +5 -1
- package/src/api-public/services/chat.ts +0 -1
- package/src/api-public/services/fb-message.d.ts +2 -0
- package/src/api-public/services/fb-message.js +183 -31
- package/src/api-public/services/fb-message.js.map +1 -1
- package/src/api-public/services/fb-message.ts +202 -38
- package/src/api-public/services/line-message.d.ts +1 -0
- package/image_cropped.jpg +0 -0
- package/image_cropped.png +0 -0
package/lowcode/Entry.js
CHANGED
|
@@ -57,7 +57,7 @@ export class Entry {
|
|
|
57
57
|
}
|
|
58
58
|
window.renderClock = (_a = window.renderClock) !== null && _a !== void 0 ? _a : clockF();
|
|
59
59
|
console.log(`Entry-time:`, window.renderClock.stop());
|
|
60
|
-
glitter.share.editerVersion = "V_13.2.
|
|
60
|
+
glitter.share.editerVersion = "V_13.2.3";
|
|
61
61
|
glitter.share.start = (new Date());
|
|
62
62
|
const vm = {
|
|
63
63
|
appConfig: [],
|
package/lowcode/Entry.ts
CHANGED
|
@@ -56,7 +56,7 @@ export class Entry {
|
|
|
56
56
|
}
|
|
57
57
|
(window as any).renderClock = (window as any).renderClock ?? clockF();
|
|
58
58
|
console.log(`Entry-time:`, (window as any).renderClock.stop());
|
|
59
|
-
glitter.share.editerVersion = "V_13.2.
|
|
59
|
+
glitter.share.editerVersion = "V_13.2.3";
|
|
60
60
|
glitter.share.start = (new Date());
|
|
61
61
|
const vm: {
|
|
62
62
|
appConfig: any;
|
|
@@ -113,9 +113,18 @@ export class BgCustomerMessage {
|
|
|
113
113
|
class="rounded-circle border"
|
|
114
114
|
style="background: white;border-radius: 50%;width: 40px;height: 40px;" width="40"
|
|
115
115
|
alt="Albert Flores">
|
|
116
|
-
<div class="d-flex
|
|
117
|
-
<h6 class="mb-0 text-white
|
|
118
|
-
|
|
116
|
+
<div class="d-flex px-1 text-white align-items-center" style="gap:8px;">
|
|
117
|
+
<h6 class="mb-0 text-white " style="">一站式客服整合系統</h6>
|
|
118
|
+
${BgWidget.questionButton(gvc.event(() => {
|
|
119
|
+
BgWidget.dialog({
|
|
120
|
+
gvc,
|
|
121
|
+
title: '提示',
|
|
122
|
+
innerHTML: () => {
|
|
123
|
+
return BgWidget.alertInfo([`<div class="fs-6 fw-500" style="white-space: normal;word-break: break-all;">前往第三方整合進行設定，即可同步Line與Facebook官方訊息，請統一於SHOPNEX後台進行訊息發送，否則將無法同步訊息。</div>`].join('')) + ` <img class="w-100" src="https://d3jnmi1tfjgtti.cloudfront.net/file/122538856/Screenshot 2024-10-22 at 4.58.00 PM.jpg">`;
|
|
124
|
+
},
|
|
125
|
+
width: 200
|
|
126
|
+
});
|
|
127
|
+
}))}
|
|
119
128
|
</div>
|
|
120
129
|
<div class="flex-fill" style="flex: 1;"></div>
|
|
121
130
|
<i class="fa-regular fa-circle-xmark text-white fs-3 " aria-hidden="true"
|
|
@@ -129,9 +129,20 @@ export class BgCustomerMessage {
|
|
|
129
129
|
class="rounded-circle border"
|
|
130
130
|
style="background: white;border-radius: 50%;width: 40px;height: 40px;" width="40"
|
|
131
131
|
alt="Albert Flores">
|
|
132
|
-
<div class="d-flex
|
|
133
|
-
<h6 class="mb-0 text-white
|
|
134
|
-
|
|
132
|
+
<div class="d-flex px-1 text-white align-items-center" style="gap:8px;">
|
|
133
|
+
<h6 class="mb-0 text-white " style="">一站式客服整合系統</h6>
|
|
134
|
+
${BgWidget.questionButton(
|
|
135
|
+
gvc.event(() => {
|
|
136
|
+
BgWidget.dialog({
|
|
137
|
+
gvc,
|
|
138
|
+
title: '提示',
|
|
139
|
+
innerHTML: () => {
|
|
140
|
+
return BgWidget.alertInfo([`<div class="fs-6 fw-500" style="white-space: normal;word-break: break-all;">前往第三方整合進行設定，即可同步Line與Facebook官方訊息，請統一於SHOPNEX後台進行訊息發送，否則將無法同步訊息。</div>`].join(''))+` <img class="w-100" src="https://d3jnmi1tfjgtti.cloudfront.net/file/122538856/Screenshot 2024-10-22 at 4.58.00 PM.jpg">`
|
|
141
|
+
},
|
|
142
|
+
width: 200
|
|
143
|
+
});
|
|
144
|
+
})
|
|
145
|
+
)}
|
|
135
146
|
</div>
|
|
136
147
|
<div class="flex-fill" style="flex: 1;"></div>
|
|
137
148
|
<i class="fa-regular fa-circle-xmark text-white fs-3 " aria-hidden="true"
|
|
@@ -692,7 +703,8 @@ export class BgCustomerMessage {
|
|
|
692
703
|
const listId = gvc.glitter.getUUID();
|
|
693
704
|
let chatData: any = undefined;
|
|
694
705
|
let unRead: any = undefined;
|
|
695
|
-
|
|
706
|
+
|
|
707
|
+
function loadData() {
|
|
696
708
|
Chat.getChatRoom({
|
|
697
709
|
page: 0,
|
|
698
710
|
limit: 1000,
|
|
@@ -707,11 +719,13 @@ export class BgCustomerMessage {
|
|
|
707
719
|
});
|
|
708
720
|
});
|
|
709
721
|
}
|
|
722
|
+
|
|
710
723
|
let socket: any = undefined
|
|
711
724
|
const url = new URL((window as any).glitterBackend)
|
|
712
725
|
let vm = {
|
|
713
726
|
close: false
|
|
714
727
|
}
|
|
728
|
+
|
|
715
729
|
function connect() {
|
|
716
730
|
socket = (location.href.includes('https://')) ? new WebSocket(`wss://${url.hostname}/websocket`) : new WebSocket(`ws://${url.hostname}:9003`);
|
|
717
731
|
socket.addEventListener('open', function (event: any) {
|
|
@@ -726,7 +740,7 @@ export class BgCustomerMessage {
|
|
|
726
740
|
console.log(`update_message_count`)
|
|
727
741
|
const data = JSON.parse(event.data)
|
|
728
742
|
if (data.type === 'update_message_count') {
|
|
729
|
-
vm.close=true
|
|
743
|
+
vm.close = true
|
|
730
744
|
socket && socket.close()
|
|
731
745
|
loadData()
|
|
732
746
|
}
|
|
@@ -739,6 +753,7 @@ export class BgCustomerMessage {
|
|
|
739
753
|
}
|
|
740
754
|
});
|
|
741
755
|
}
|
|
756
|
+
|
|
742
757
|
loadData()
|
|
743
758
|
|
|
744
759
|
return {
|
|
@@ -764,7 +779,7 @@ export class BgCustomerMessage {
|
|
|
764
779
|
dd.topMessage.text = dd.topMessage?.text ?? "圖片內容";
|
|
765
780
|
dd.user_data = dd.user_data ?? {}
|
|
766
781
|
if (dd.topMessage && dd.chat_id !== 'manager-preview') {
|
|
767
|
-
console.log(`unRead==>`,unRead)
|
|
782
|
+
console.log(`unRead==>`, unRead)
|
|
768
783
|
const unReadCount = unRead.filter((d2: any) => {
|
|
769
784
|
return dd.chat_id === d2.chat_id;
|
|
770
785
|
}).length;
|
|
@@ -891,15 +906,15 @@ export class BgCustomerMessage {
|
|
|
891
906
|
}
|
|
892
907
|
},
|
|
893
908
|
divCreate: {},
|
|
894
|
-
onCreate:()=>{
|
|
895
|
-
setTimeout(()=>{
|
|
896
|
-
vm.close=false
|
|
909
|
+
onCreate: () => {
|
|
910
|
+
setTimeout(() => {
|
|
911
|
+
vm.close = false
|
|
897
912
|
connect()
|
|
898
|
-
},50)
|
|
913
|
+
}, 50)
|
|
899
914
|
|
|
900
915
|
},
|
|
901
|
-
onDestroy:()=>{
|
|
902
|
-
vm.close=true
|
|
916
|
+
onDestroy: () => {
|
|
917
|
+
vm.close = true
|
|
903
918
|
socket && socket.close()
|
|
904
919
|
}
|
|
905
920
|
};
|
|
@@ -1184,9 +1199,9 @@ export class BgCustomerMessage {
|
|
|
1184
1199
|
document.querySelector(`#message-lines`).innerHTML += BgCustomerMessage.message_line(data, cf, vm.data.length - 1, vm, gvc);
|
|
1185
1200
|
if (st + ofs >= sh - 50) {
|
|
1186
1201
|
element.scrollTop = element.scrollHeight;
|
|
1187
|
-
setTimeout(()=>{
|
|
1202
|
+
setTimeout(() => {
|
|
1188
1203
|
element.scrollTop = element.scrollHeight;
|
|
1189
|
-
},1000)
|
|
1204
|
+
}, 1000)
|
|
1190
1205
|
}
|
|
1191
1206
|
}
|
|
1192
1207
|
});
|
|
@@ -96,7 +96,7 @@ export class BgGuide {
|
|
|
96
96
|
this.type = type;
|
|
97
97
|
this.step = 0;
|
|
98
98
|
}
|
|
99
|
-
detectClickThrough(target, clickEvent
|
|
99
|
+
detectClickThrough(target, clickEvent) {
|
|
100
100
|
target.classList.add('guideClickListen');
|
|
101
101
|
const handleClick = () => {
|
|
102
102
|
setTimeout(() => {
|
|
@@ -597,6 +597,150 @@ export class BgGuide {
|
|
|
597
597
|
</div>
|
|
598
598
|
`;
|
|
599
599
|
}
|
|
600
|
+
drawBGwithTopWindow(BG, vm, targetSelector, viewID, step, allStep, window, closeEvent) {
|
|
601
|
+
var _a;
|
|
602
|
+
let gvc = this.gvc;
|
|
603
|
+
function close() {
|
|
604
|
+
if (closeEvent) {
|
|
605
|
+
closeEvent();
|
|
606
|
+
}
|
|
607
|
+
if (window.cover) {
|
|
608
|
+
if (document.querySelector('.clickInterface')) {
|
|
609
|
+
document.querySelector('.clickInterface').remove();
|
|
610
|
+
}
|
|
611
|
+
}
|
|
612
|
+
BG.classList.remove(`${targetSelector.split('.')[1]}`);
|
|
613
|
+
}
|
|
614
|
+
function next() {
|
|
615
|
+
vm.step++;
|
|
616
|
+
close();
|
|
617
|
+
gvc.notifyDataChange(viewID);
|
|
618
|
+
}
|
|
619
|
+
let iframe = this.findPageIframe();
|
|
620
|
+
let iframeRect = iframe.getBoundingClientRect();
|
|
621
|
+
let target = this.findIframeDom(`${targetSelector}`);
|
|
622
|
+
let rect = target.getBoundingClientRect();
|
|
623
|
+
let left = rect.left + iframeRect.left - 6;
|
|
624
|
+
let top = rect.top + iframeRect.top - 6;
|
|
625
|
+
let right = rect.right + iframeRect.left + 6;
|
|
626
|
+
let bottom = rect.bottom + iframeRect.top + 6;
|
|
627
|
+
let mid = (right + left) / 2;
|
|
628
|
+
gvc.addStyle(`
|
|
629
|
+
${targetSelector} {
|
|
630
|
+
${this.holeBG(left, right, top, bottom)}
|
|
631
|
+
}
|
|
632
|
+
`);
|
|
633
|
+
if (window.cover) {
|
|
634
|
+
let body = document.querySelector('.editorContainer');
|
|
635
|
+
if (body && !document.querySelector('.clickInterface')) {
|
|
636
|
+
$(body).append(html `
|
|
637
|
+
<div class="clickInterface"
|
|
638
|
+
style="height: 100vh;width: 100vw;position: fixed;left: 0;top: 0;z-index: 1030;cursor: pointer;"
|
|
639
|
+
onclick="${gvc.event(() => {
|
|
640
|
+
})}"></div>
|
|
641
|
+
`);
|
|
642
|
+
}
|
|
643
|
+
}
|
|
644
|
+
BG.classList.add(`${targetSelector.split('.')[1]}`);
|
|
645
|
+
let winPosition = () => {
|
|
646
|
+
switch (window.alignment) {
|
|
647
|
+
case 'left': {
|
|
648
|
+
return `left: ${right - window.width}px;top:${rect.bottom + iframeRect.top + 24}px;`;
|
|
649
|
+
}
|
|
650
|
+
default: {
|
|
651
|
+
return `left: ${mid - window.width / 2}px;top:${rect.bottom + iframeRect.top + 24}px;`;
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
};
|
|
655
|
+
let arrowPosition = () => {
|
|
656
|
+
switch (window.alignment) {
|
|
657
|
+
case 'left': {
|
|
658
|
+
return window.width - 42;
|
|
659
|
+
}
|
|
660
|
+
default: {
|
|
661
|
+
return window.width / 2 - 11;
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
};
|
|
665
|
+
return html `
|
|
666
|
+
<div class="d-flex flex-column"
|
|
667
|
+
style="width: ${window.width}px;height: ${window.height}px;flex-shrink: 0;position: absolute;${winPosition()};">
|
|
668
|
+
<div class="w-100" style="padding-left: ${arrowPosition()}px;height:23px;">
|
|
669
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18" fill="none">
|
|
670
|
+
<path d="M11.002 0L21.3943 18L0.609648 18L11.002 0Z" fill="#FEAD20"/>
|
|
671
|
+
</svg>
|
|
672
|
+
</div>
|
|
673
|
+
<div class="w-100" style="border-radius: 10px;">
|
|
674
|
+
<div
|
|
675
|
+
style="display: flex;padding: 12px 24px;gap: 10px;width: 100%;background: #FEAD20;border-radius: 10px 10px 0 0;color:white;font-size: 20px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: 0.8px;"
|
|
676
|
+
>
|
|
677
|
+
${window.title}
|
|
678
|
+
<div class="d-flex ms-auto align-items-center"
|
|
679
|
+
style="gap:10px;color: #FFF;font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;letter-spacing: 0.64px;">
|
|
680
|
+
步驟 ${step}/${allStep}
|
|
681
|
+
<svg
|
|
682
|
+
style="cursor: pointer;"
|
|
683
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
684
|
+
width="14"
|
|
685
|
+
height="13"
|
|
686
|
+
viewBox="0 0 14 13"
|
|
687
|
+
fill="none"
|
|
688
|
+
onclick="${gvc.event(() => {
|
|
689
|
+
close();
|
|
690
|
+
this.leaveGuide(vm);
|
|
691
|
+
})}"
|
|
692
|
+
>
|
|
693
|
+
<path d="M1 0.5L13 12.5" stroke="white" stroke-linecap="round"/>
|
|
694
|
+
<path d="M13 0.5L1 12.5" stroke="white" stroke-linecap="round"/>
|
|
695
|
+
</svg>
|
|
696
|
+
</div>
|
|
697
|
+
</div>
|
|
698
|
+
<div
|
|
699
|
+
class="d-flex flex-column w-100"
|
|
700
|
+
style="background: #FFF;width:100%;padding: 18px 24px;border-radius: 0 0 10px 10px;font-size: 16px;font-style: normal;font-weight: 400;line-height: 160%;letter-spacing: 0.64px;white-space: normal"
|
|
701
|
+
>
|
|
702
|
+
${window.content}
|
|
703
|
+
<div class="d-flex align-items-center justify-content-between w-100"
|
|
704
|
+
style="margin-top: 24px;height:52px;">
|
|
705
|
+
<div
|
|
706
|
+
class="${window.preview ? 'd-none' : ''}"
|
|
707
|
+
style="padding: 6px 18px;border-radius: 10px;border:solid 1px #FEAD20;color: #FEAD20;font-size: 16px;font-style: normal;font-weight: 700;line-height: normal;cursor: pointer;"
|
|
708
|
+
onclick="${gvc.event(() => {
|
|
709
|
+
vm.step--;
|
|
710
|
+
close();
|
|
711
|
+
if (window.previewEvent) {
|
|
712
|
+
window.previewEvent();
|
|
713
|
+
}
|
|
714
|
+
gvc.notifyDataChange(viewID);
|
|
715
|
+
})}"
|
|
716
|
+
>
|
|
717
|
+
上一步
|
|
718
|
+
</div>
|
|
719
|
+
<div class="${window.next ? 'd-none' : 'd-flex'} align-items-center justify-content-center ms-auto"
|
|
720
|
+
style="width: 96px;height: 46px;">
|
|
721
|
+
<div
|
|
722
|
+
class="${window.disable ? `` : `breathing-light`} "
|
|
723
|
+
style="${window.disable
|
|
724
|
+
? `opacity: 0.8;background: #FFE9B2`
|
|
725
|
+
: `background: #FEAD20;cursor: pointer`};padding: 6px 18px;border-radius: 10px;color: #FFF; ;font-size: 16px;font-style: normal;font-weight: 700;line-height: normal;"
|
|
726
|
+
onclick="${gvc.event(() => {
|
|
727
|
+
if (!window.disable) {
|
|
728
|
+
next();
|
|
729
|
+
}
|
|
730
|
+
if (window.nextEvent) {
|
|
731
|
+
window.nextEvent();
|
|
732
|
+
}
|
|
733
|
+
})}"
|
|
734
|
+
>
|
|
735
|
+
${(_a = window.btnText) !== null && _a !== void 0 ? _a : '下一步'}
|
|
736
|
+
</div>
|
|
737
|
+
</div>
|
|
738
|
+
</div>
|
|
739
|
+
</div>
|
|
740
|
+
</div>
|
|
741
|
+
</div>
|
|
742
|
+
`;
|
|
743
|
+
}
|
|
600
744
|
drawFinBG(BG, vm, targetSelector, viewID, step, key) {
|
|
601
745
|
function close() {
|
|
602
746
|
BG.classList.remove(targetSelector);
|
|
@@ -686,7 +830,7 @@ export class BgGuide {
|
|
|
686
830
|
step: this.step,
|
|
687
831
|
};
|
|
688
832
|
const that = this;
|
|
689
|
-
let totalStep =
|
|
833
|
+
let totalStep = 4;
|
|
690
834
|
return gvc.bindView({
|
|
691
835
|
bind: 'layoutInit',
|
|
692
836
|
dataList: [],
|
|
@@ -747,6 +891,7 @@ export class BgGuide {
|
|
|
747
891
|
title: '當前主題',
|
|
748
892
|
content: '為當前首頁套用的主題資訊',
|
|
749
893
|
cover: true,
|
|
894
|
+
preview: true
|
|
750
895
|
}, () => {
|
|
751
896
|
});
|
|
752
897
|
}
|
|
@@ -783,13 +928,13 @@ export class BgGuide {
|
|
|
783
928
|
function close() {
|
|
784
929
|
BG.classList.remove('guide7-1');
|
|
785
930
|
}
|
|
786
|
-
let target1 = document.querySelector(`.
|
|
931
|
+
let target1 = document.querySelector(`.mainRow11`);
|
|
787
932
|
let rect = target1.getBoundingClientRect();
|
|
788
933
|
let target2 = this.findIframeDom(`.guide7-1`);
|
|
789
934
|
let iframeRect = iframe.getBoundingClientRect();
|
|
790
935
|
this.detectClickThrough(target1, () => {
|
|
791
936
|
close();
|
|
792
|
-
totalStep =
|
|
937
|
+
totalStep = 3;
|
|
793
938
|
vm.step = 2;
|
|
794
939
|
gvc.notifyDataChange(viewID);
|
|
795
940
|
});
|
|
@@ -807,11 +952,14 @@ export class BgGuide {
|
|
|
807
952
|
y2: iframeRect.top + rect2.bottom + 12,
|
|
808
953
|
});
|
|
809
954
|
BG.classList.add('guide7-1');
|
|
810
|
-
|
|
955
|
+
const handler = (event) => {
|
|
811
956
|
close();
|
|
957
|
+
totalStep = 3;
|
|
812
958
|
vm.step = 3;
|
|
813
959
|
gvc.notifyDataChange(viewID);
|
|
814
|
-
|
|
960
|
+
target2.removeEventListener('click', handler, { capture: true });
|
|
961
|
+
};
|
|
962
|
+
target2.addEventListener('click', handler, { capture: true });
|
|
815
963
|
gvc.addStyle(`
|
|
816
964
|
.guide7-1{
|
|
817
965
|
${cssStyle}
|
|
@@ -861,7 +1009,7 @@ export class BgGuide {
|
|
|
861
1009
|
</div>
|
|
862
1010
|
`;
|
|
863
1011
|
}
|
|
864
|
-
return this.drawMainRowBG(BG, vm, `.
|
|
1012
|
+
return this.drawMainRowBG(BG, vm, `.mainRow11`, viewID, 5, '品牌官網');
|
|
865
1013
|
}
|
|
866
1014
|
}
|
|
867
1015
|
},
|
|
@@ -875,7 +1023,7 @@ export class BgGuide {
|
|
|
875
1023
|
step: this.step,
|
|
876
1024
|
};
|
|
877
1025
|
const that = this;
|
|
878
|
-
let totalStep =
|
|
1026
|
+
let totalStep = 8;
|
|
879
1027
|
return gvc.bindView({
|
|
880
1028
|
bind: 'layoutInit',
|
|
881
1029
|
dataList: [],
|
|
@@ -930,12 +1078,14 @@ export class BgGuide {
|
|
|
930
1078
|
}
|
|
931
1079
|
}, 400);
|
|
932
1080
|
}
|
|
933
|
-
|
|
1081
|
+
target.scrollIntoView();
|
|
1082
|
+
return this.drawBGwithTopWindow(BG, vm, '.guide7-3', viewID, totalStep - 6, totalStep, {
|
|
934
1083
|
width: 332,
|
|
935
1084
|
height: 209,
|
|
936
1085
|
title: '當前主題',
|
|
937
1086
|
content: '為當前首頁套用的主題資訊',
|
|
938
1087
|
cover: true,
|
|
1088
|
+
preview: true
|
|
939
1089
|
}, () => {
|
|
940
1090
|
});
|
|
941
1091
|
}
|
|
@@ -955,7 +1105,8 @@ export class BgGuide {
|
|
|
955
1105
|
點擊<span style="font-weight: 700;">自訂</span>，可前往<span style="font-weight: 700;">頁面編輯器頁面</span>，自由將官網編輯成您理想中的模樣
|
|
956
1106
|
</div>
|
|
957
1107
|
`;
|
|
958
|
-
|
|
1108
|
+
target.scrollIntoView();
|
|
1109
|
+
return this.drawBGwithBelowWindow(BG, vm, '.guide7-4', viewID, totalStep - 5, totalStep, {
|
|
959
1110
|
width: 332,
|
|
960
1111
|
height: 235,
|
|
961
1112
|
title: '自訂主題',
|
|
@@ -974,13 +1125,14 @@ export class BgGuide {
|
|
|
974
1125
|
}
|
|
975
1126
|
}, 400);
|
|
976
1127
|
}
|
|
1128
|
+
target.scrollIntoView();
|
|
977
1129
|
let content = html `
|
|
978
1130
|
<div class=""
|
|
979
1131
|
style="font-size: 16px;font-style: normal;font-weight: 400;line-height: 160%;letter-spacing: 0.64px;white-space: normal">
|
|
980
1132
|
在<span style="font-weight: 700;">佈景主題庫</span>儲存並管理多個設計主題，可根據需求靈活切換應用，展現多樣視覺效果，增強品牌吸引力
|
|
981
1133
|
</div>
|
|
982
1134
|
`;
|
|
983
|
-
return this.drawBGwithBelowWindow(BG, vm, '.guide8-5', viewID, totalStep -
|
|
1135
|
+
return this.drawBGwithBelowWindow(BG, vm, '.guide8-5', viewID, totalStep - 4, totalStep, {
|
|
984
1136
|
width: 439,
|
|
985
1137
|
height: 261,
|
|
986
1138
|
title: '自訂主題',
|
|
@@ -1009,7 +1161,7 @@ export class BgGuide {
|
|
|
1009
1161
|
滑鼠移入喜歡的主題後點擊<span style="font-weight: 700;">新增</span>
|
|
1010
1162
|
</div>
|
|
1011
1163
|
`;
|
|
1012
|
-
return this.drawBGwithBelowWindow(BG, vm, '.themeGroup', viewID, totalStep -
|
|
1164
|
+
return this.drawBGwithBelowWindow(BG, vm, '.themeGroup', viewID, totalStep - 3, totalStep, {
|
|
1013
1165
|
width: 439,
|
|
1014
1166
|
height: 261,
|
|
1015
1167
|
title: '選擇主題',
|
|
@@ -1026,14 +1178,14 @@ export class BgGuide {
|
|
|
1026
1178
|
}
|
|
1027
1179
|
}, 400);
|
|
1028
1180
|
}
|
|
1029
|
-
target.
|
|
1181
|
+
target.scrollIntoView();
|
|
1030
1182
|
let content = html `
|
|
1031
1183
|
<div class=""
|
|
1032
1184
|
style="font-size: 16px;font-style: normal;font-weight: 400;line-height: 160%;letter-spacing: 0.64px;white-space: normal">
|
|
1033
1185
|
您可以對剛新增的主題進行操作，如自定義樣式、切換、複製及下載等等
|
|
1034
1186
|
</div>
|
|
1035
1187
|
`;
|
|
1036
|
-
return this.drawBGwithBelowWindow(BG, vm, '.guide8-5', viewID, totalStep -
|
|
1188
|
+
return this.drawBGwithBelowWindow(BG, vm, '.guide8-5', viewID, totalStep - 2, totalStep, {
|
|
1037
1189
|
width: 439,
|
|
1038
1190
|
height: 261,
|
|
1039
1191
|
title: '管理主題庫',
|
|
@@ -1116,7 +1268,7 @@ export class BgGuide {
|
|
|
1116
1268
|
function close() {
|
|
1117
1269
|
BG.classList.remove('guide7-1');
|
|
1118
1270
|
}
|
|
1119
|
-
let target1 = document.querySelector(`.
|
|
1271
|
+
let target1 = document.querySelector(`.mainRow11`);
|
|
1120
1272
|
let rect = target1.getBoundingClientRect();
|
|
1121
1273
|
let target2 = this.findIframeDom(`.guide7-1`);
|
|
1122
1274
|
let iframeRect = iframe.getBoundingClientRect();
|
|
@@ -1140,11 +1292,14 @@ export class BgGuide {
|
|
|
1140
1292
|
y2: iframeRect.top + rect2.bottom + 12,
|
|
1141
1293
|
});
|
|
1142
1294
|
BG.classList.add('guide7-1');
|
|
1143
|
-
|
|
1295
|
+
const handler = (event) => {
|
|
1144
1296
|
close();
|
|
1297
|
+
totalStep = 7;
|
|
1145
1298
|
vm.step = 3;
|
|
1146
1299
|
gvc.notifyDataChange(viewID);
|
|
1147
|
-
|
|
1300
|
+
target2.removeEventListener('click', handler, { capture: true });
|
|
1301
|
+
};
|
|
1302
|
+
target2.addEventListener('click', handler, { capture: true });
|
|
1148
1303
|
gvc.addStyle(`
|
|
1149
1304
|
.guide7-1{
|
|
1150
1305
|
${cssStyle}
|
|
@@ -1194,7 +1349,7 @@ export class BgGuide {
|
|
|
1194
1349
|
</div>
|
|
1195
1350
|
`;
|
|
1196
1351
|
}
|
|
1197
|
-
return this.drawMainRowBG(BG, vm, `.
|
|
1352
|
+
return this.drawMainRowBG(BG, vm, `.mainRow11`, viewID, totalStep, '品牌官網');
|
|
1198
1353
|
}
|
|
1199
1354
|
}
|
|
1200
1355
|
},
|
|
@@ -2517,7 +2672,7 @@ export class BgGuide {
|
|
|
2517
2672
|
</div>
|
|
2518
2673
|
`;
|
|
2519
2674
|
}
|
|
2520
|
-
case
|
|
2675
|
+
case 1: {
|
|
2521
2676
|
return html `
|
|
2522
2677
|
<div style="width: 461px;height:210px;display: flex;flex-direction: column;align-items:center;border-radius: 10px;background: #FEAD20;">
|
|
2523
2678
|
<div class="w-100 d-flex align-items-center justify-content-end" style="padding: 16px;">
|
|
@@ -2564,7 +2719,7 @@ export class BgGuide {
|
|
|
2564
2719
|
</div>
|
|
2565
2720
|
`;
|
|
2566
2721
|
}
|
|
2567
|
-
case
|
|
2722
|
+
case 0: {
|
|
2568
2723
|
return html `
|
|
2569
2724
|
<div class="d-flex flex-column"
|
|
2570
2725
|
style="width:588px;border-radius: 10px;background-color: white;">
|
|
@@ -3743,7 +3898,8 @@ export class BgGuide {
|
|
|
3743
3898
|
</g>
|
|
3744
3899
|
<defs>
|
|
3745
3900
|
<clipPath id="clip0_13405_223884">
|
|
3746
|
-
<rect width="13.7154" height="13.7154" fill="white"
|
|
3901
|
+
<rect width="13.7154" height="13.7154" fill="white"
|
|
3902
|
+
transform="translate(0.144287 0.142578)"/>
|
|
3747
3903
|
</clipPath>
|
|
3748
3904
|
</defs>
|
|
3749
3905
|
</svg>
|
|
@@ -3756,7 +3912,8 @@ export class BgGuide {
|
|
|
3756
3912
|
}
|
|
3757
3913
|
`);
|
|
3758
3914
|
const context = html `
|
|
3759
|
-
<div class="" style="white-space: normal;word-break: break-all;">於<span
|
|
3915
|
+
<div class="" style="white-space: normal;word-break: break-all;">於<span
|
|
3916
|
+
style="font-weight: 700;">「全站樣式」</span>${icon}
|
|
3760
3917
|
頁面，您可以統一管理全站的樣式設置，一旦您進行了修改，所有套用這些樣式的元件都會自動更新，確保官網設計的一致性。
|
|
3761
3918
|
</div>
|
|
3762
3919
|
`;
|
|
@@ -3845,7 +4002,8 @@ export class BgGuide {
|
|
|
3845
4002
|
let target = document.querySelector(`.${className}`);
|
|
3846
4003
|
console.log("target -- ", target);
|
|
3847
4004
|
if (target) {
|
|
3848
|
-
const context = html
|
|
4005
|
+
const context = html `
|
|
4006
|
+
<div>點擊<span style="font-weight: 700">配色1</span>進入編輯</div>`;
|
|
3849
4007
|
this.detectClickThrough(target, () => {
|
|
3850
4008
|
vm.step++;
|
|
3851
4009
|
BG.classList.remove(`${className}-BG`);
|
|
@@ -3959,8 +4117,10 @@ export class BgGuide {
|
|
|
3959
4117
|
}
|
|
3960
4118
|
let icon = html `
|
|
3961
4119
|
<span style="display: inline-flex;width: 24.002px;height: 24.002px;padding: 5.143px 5.142px 5.143px 5.144px;justify-content: center;align-items: center;border-radius: 4px;background: linear-gradient(143deg, #FFB400 -22.7%, #FF6C02 114.57%);">
|
|
3962
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"
|
|
3963
|
-
|
|
4120
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"
|
|
4121
|
+
fill="none">
|
|
4122
|
+
<path d="M1.61258 1.61197V4.55074H4.55135V1.61197H1.61258ZM0.143188 1.61197C0.143188 0.800741 0.801352 0.142578 1.61258 0.142578H4.55135C5.36258 0.142578 6.02074 0.800741 6.02074 1.61197V4.55074C6.02074 5.36197 5.36258 6.02013 4.55135 6.02013H1.61258C0.801352 6.02013 0.143188 5.36197 0.143188 4.55074V1.61197ZM1.61258 9.4487V12.3875H4.55135V9.4487H1.61258ZM0.143188 9.4487C0.143188 8.63748 0.801352 7.97931 1.61258 7.97931H4.55135C5.36258 7.97931 6.02074 8.63748 6.02074 9.4487V12.3875C6.02074 13.1987 5.36258 13.8569 4.55135 13.8569H1.61258C0.801352 13.8569 0.143188 13.1987 0.143188 12.3875V9.4487ZM12.3881 1.61197H9.44931V4.55074H12.3881V1.61197ZM9.44931 0.142578H12.3881C13.1993 0.142578 13.8575 0.800741 13.8575 1.61197V4.55074C13.8575 5.36197 13.1993 6.02013 12.3881 6.02013H9.44931C8.63809 6.02013 7.97992 5.36197 7.97992 4.55074V1.61197C7.97992 0.800741 8.63809 0.142578 9.44931 0.142578ZM9.44931 9.4487V12.3875H12.3881V9.4487H9.44931ZM7.97992 9.4487C7.97992 8.63748 8.63809 7.97931 9.44931 7.97931H12.3881C13.1993 7.97931 13.8575 8.63748 13.8575 9.4487V12.3875C13.8575 13.1987 13.1993 13.8569 12.3881 13.8569H9.44931C8.63809 13.8569 7.97992 13.1987 7.97992 12.3875V9.4487Z"
|
|
4123
|
+
fill="white"/>
|
|
3964
4124
|
</svg>
|
|
3965
4125
|
</span>
|
|
3966
4126
|
|
|
@@ -3971,7 +4131,8 @@ export class BgGuide {
|
|
|
3971
4131
|
}
|
|
3972
4132
|
`);
|
|
3973
4133
|
const context = html `
|
|
3974
|
-
<div class="" style="white-space: normal;word-break: break-all;">於<span
|
|
4134
|
+
<div class="" style="white-space: normal;word-break: break-all;">於<span
|
|
4135
|
+
style="font-weight: 700;">「設計元件」</span>${icon}
|
|
3975
4136
|
頁面，您可以替全站的<span style="font-weight: 700;">「標頭」</span>
|
|
3976
4137
|
<span style="font-weight: 700;">「商品卡片」</span>及<span style="font-weight: 700;">「頁腳」</span>設置預設樣式，一旦您修改了預設樣式，所有網頁都會自動更新，確保一致性。
|
|
3977
4138
|
</div>
|
|
@@ -4055,7 +4216,8 @@ export class BgGuide {
|
|
|
4055
4216
|
}
|
|
4056
4217
|
let target = document.querySelector(`.${className}`);
|
|
4057
4218
|
if (target) {
|
|
4058
|
-
const context = html
|
|
4219
|
+
const context = html `
|
|
4220
|
+
<div>點擊<span style="font-weight: 700">配色1</span>進入編輯</div>`;
|
|
4059
4221
|
this.detectClickThrough(target.querySelector('button'), () => {
|
|
4060
4222
|
vm.step++;
|
|
4061
4223
|
BG.classList.remove(`${className}-BG`);
|
|
@@ -4108,7 +4270,8 @@ export class BgGuide {
|
|
|
4108
4270
|
}
|
|
4109
4271
|
let target = document.querySelector(`.${className}`);
|
|
4110
4272
|
if (target) {
|
|
4111
|
-
const context = html
|
|
4273
|
+
const context = html `
|
|
4274
|
+
<div>點擊<span style="font-weight: 700">設定</span>，修改更多細節</div>`;
|
|
4112
4275
|
this.detectClickThrough(target, () => {
|
|
4113
4276
|
vm.step++;
|
|
4114
4277
|
BG.classList.remove(`${className}-BG`);
|
|
@@ -4157,8 +4320,10 @@ export class BgGuide {
|
|
|
4157
4320
|
}
|
|
4158
4321
|
let icon = html `
|
|
4159
4322
|
<span style="display: inline-flex;width: 24.002px;height: 24.002px;padding: 5.143px 5.142px 5.143px 5.144px;justify-content: center;align-items: center;border-radius: 4px;background: linear-gradient(143deg, #FFB400 -22.7%, #FF6C02 114.57%);">
|
|
4160
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"
|
|
4161
|
-
|
|
4323
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"
|
|
4324
|
+
fill="none">
|
|
4325
|
+
<path d="M1.61258 1.61197V4.55074H4.55135V1.61197H1.61258ZM0.143188 1.61197C0.143188 0.800741 0.801352 0.142578 1.61258 0.142578H4.55135C5.36258 0.142578 6.02074 0.800741 6.02074 1.61197V4.55074C6.02074 5.36197 5.36258 6.02013 4.55135 6.02013H1.61258C0.801352 6.02013 0.143188 5.36197 0.143188 4.55074V1.61197ZM1.61258 9.4487V12.3875H4.55135V9.4487H1.61258ZM0.143188 9.4487C0.143188 8.63748 0.801352 7.97931 1.61258 7.97931H4.55135C5.36258 7.97931 6.02074 8.63748 6.02074 9.4487V12.3875C6.02074 13.1987 5.36258 13.8569 4.55135 13.8569H1.61258C0.801352 13.8569 0.143188 13.1987 0.143188 12.3875V9.4487ZM12.3881 1.61197H9.44931V4.55074H12.3881V1.61197ZM9.44931 0.142578H12.3881C13.1993 0.142578 13.8575 0.800741 13.8575 1.61197V4.55074C13.8575 5.36197 13.1993 6.02013 12.3881 6.02013H9.44931C8.63809 6.02013 7.97992 5.36197 7.97992 4.55074V1.61197C7.97992 0.800741 8.63809 0.142578 9.44931 0.142578ZM9.44931 9.4487V12.3875H12.3881V9.4487H9.44931ZM7.97992 9.4487C7.97992 8.63748 8.63809 7.97931 9.44931 7.97931H12.3881C13.1993 7.97931 13.8575 8.63748 13.8575 9.4487V12.3875C13.8575 13.1987 13.1993 13.8569 12.3881 13.8569H9.44931C8.63809 13.8569 7.97992 13.1987 7.97992 12.3875V9.4487Z"
|
|
4326
|
+
fill="white"/>
|
|
4162
4327
|
</svg>
|
|
4163
4328
|
</span>
|
|
4164
4329
|
|
|
@@ -4169,7 +4334,8 @@ export class BgGuide {
|
|
|
4169
4334
|
}
|
|
4170
4335
|
`);
|
|
4171
4336
|
const context = html `
|
|
4172
|
-
<div class="" style="white-space: normal;word-break: break-all;">於<span
|
|
4337
|
+
<div class="" style="white-space: normal;word-break: break-all;">於<span
|
|
4338
|
+
style="font-weight: 700;">「設計元件」</span>${icon}
|
|
4173
4339
|
頁面，您可以替全站的<span style="font-weight: 700;">「標頭」</span>
|
|
4174
4340
|
<span style="font-weight: 700;">「商品卡片」</span>及<span style="font-weight: 700;">「頁腳」</span>設置預設樣式，一旦您修改了預設樣式，所有網頁都會自動更新，確保一致性。
|
|
4175
4341
|
</div>
|