ts-glitter 13.4.7 → 13.5.0

package/lowcode/backend-manager/bg-graph-api.js

@@ -122,7 +122,7 @@ export class BgGraphApi {
                                     ],
                                 }),
                             ].join('')))}
-                                `, BgWidget.getContainerWidth());
+                                `);
                         case 'replace':
                             return BgGraphApi.editor({
                                 gvc: gvc,
@@ -155,7 +155,7 @@ export class BgGraphApi {
                 bind: id,
                 view: () => {
                     return BgWidget.container(html `
-                            <div class="d-flex align-items-center">
+                            <div class="title-container">
                                 ${BgWidget.goBack(obj.gvc.event(() => {
                         obj.vm.status = 'list';
                     }))}
@@ -236,7 +236,7 @@ export class BgGraphApi {
                         }),
                     ].join(`<div class="my-2"></div>`)}`))}
                             ${BgWidget.mbContainer(120)}
-                        `, BgWidget.getContainerWidth({ rate: { web: 0.6 } }));
+                        `);
                 },
             };
         });

package/lowcode/backend-manager/bg-graph-api.ts

@@ -141,8 +141,7 @@ export class BgGraphApi {
                                             ].join('')
                                         )
                                     )}
-                                `,
-                                BgWidget.getContainerWidth()
+                                `
                             );
                         case 'replace':
                             return BgGraphApi.editor({
@@ -193,7 +192,7 @@ export class BgGraphApi {
                 view: () => {
                     return BgWidget.container(
                         html`
-                            <div class="d-flex align-items-center">
+                            <div class="title-container">
                                 ${BgWidget.goBack(
                                     obj.gvc.event(() => {
                                         obj.vm.status = 'list';
@@ -281,8 +280,7 @@ export class BgGraphApi {
                                 )
                             )}
                             ${BgWidget.mbContainer(120)}
-                        `,
-                        BgWidget.getContainerWidth({ rate: { web: 0.6 } })
+                        `
                     );
                 },
             };

package/lowcode/backend-manager/bg-guide.js

@@ -1,7 +1,8 @@
 import { ApiShop } from '../glitter-base/route/shopping.js';
+import { ShareDialog } from "../dialog/ShareDialog.js";
 const html = String.raw;
 export class BgGuide {
-    constructor(gvc, guide, type = 'backend-manger') {
+    constructor(gvc, guide, type = 'backend-manger', step = 0) {
         this.uiGuidePage = [
             {
                 value: 'init',
@@ -94,7 +95,7 @@ export class BgGuide {
         this.guide = guide;
         this.gvc = gvc;
         this.type = type;
-        this.step = 0;
+        this.step = step;
     }
     detectClickThrough(target, clickEvent) {
         target.classList.add('guideClickListen');
@@ -177,7 +178,8 @@ export class BgGuide {
                 return data.value === key;
             });
             target.finished = true;
-            ApiShop.setGuide(dataList);
+            ApiShop.setGuide(dataList).then(r => {
+            });
         });
     }
     drawMainRowBG(BG, vm, targetSelector, viewID, step, title) {
@@ -237,9 +239,12 @@ export class BgGuide {
     drawSecondRowBG(BG, vm, targetSelector, viewID, title, step) {
         BG.style.clipPath = ``;
         const gvc = this.gvc;
-        const target = document.querySelector(targetSelector);
-        const rect = target ? target.getBoundingClientRect() : '';
+        let target = document.querySelector(targetSelector);
+        let rect = target ? target.getBoundingClientRect() : '';
         if (rect) {
+            target.scrollIntoView();
+            target = document.querySelector(targetSelector);
+            rect = target.getBoundingClientRect();
             BG.style.clipPath = `polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 ${rect.bottom}px, ${rect.right}px ${rect.bottom}px, ${rect.right}px ${rect.top}px, 0 ${rect.top}px)`;
             this.detectClickThrough(target, () => {
                 vm.step = 3;
@@ -762,8 +767,8 @@ export class BgGuide {
                         `);
         this.detectClickThrough(target, () => {
             close();
-            this.leaveGuide(vm, 1);
             this.finGuide(key);
+            this.leaveGuide(vm, 0);
         });
         return html `
             <div class="d-flex flex-column"
@@ -1024,6 +1029,8 @@ export class BgGuide {
         };
         const that = this;
         let totalStep = 8;
+        let layer2Delay = true;
+        let themeNumbers = 0;
         return gvc.bindView({
             bind: 'layoutInit',
             dataList: [],
@@ -1065,6 +1072,16 @@ export class BgGuide {
                 `);
                 switch (vm.step) {
                     case 2: {
+                        let target = document.querySelector('.guide7-2');
+                        if (layer2Delay) {
+                            const timer = setInterval(() => {
+                                layer2Delay = false;
+                                clearInterval(timer);
+                                target.scrollIntoView();
+                                gvc.notifyDataChange(viewID);
+                            }, 300);
+                            return ``;
+                        }
                         return this.drawSecondRowBG(BG, vm, `.guide7-2`, viewID, '佈景主題', totalStep);
                     }
                     case 3: {
@@ -1097,7 +1114,7 @@ export class BgGuide {
                                     clearInterval(timer);
                                     gvc.notifyDataChange(viewID);
                                 }
-                            }, 400);
+                            }, 600);
                         }
                         let content = html `
                             <div class="d-flex flex-wrap"
@@ -1166,10 +1183,15 @@ export class BgGuide {
                             height: 261,
                             title: '選擇主題',
                             content: content,
+                            next: true
                         });
                     }
                     case 7: {
                         let target = this.findIframeDom(`.guide8-5`);
+                        let themeRow = this.findPageIframe().contentWindow.document.querySelectorAll('.themeRow');
+                        if (themeNumbers == 0) {
+                            themeNumbers = themeRow.length;
+                        }
                         if (!target) {
                             const timer = setInterval(() => {
                                 if (this.findIframeDom(`.guide8-5`)) {
@@ -1178,6 +1200,14 @@ export class BgGuide {
                                 }
                             }, 400);
                         }
+                        if (themeNumbers == this.findPageIframe().contentWindow.document.querySelectorAll('.themeRow').length) {
+                            const timer = setInterval(() => {
+                                if (themeNumbers != this.findPageIframe().contentWindow.document.querySelectorAll('.themeRow').length) {
+                                    clearInterval(timer);
+                                    gvc.notifyDataChange(viewID);
+                                }
+                            }, 400);
+                        }
                         target.scrollIntoView();
                         let content = html `
                             <div class=""
@@ -1798,9 +1828,9 @@ export class BgGuide {
                                     </div>
                                     <div
                                             class="d-flex flex-column w-100"
-                                            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;"
+                                            style="white-space: normal;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;"
                                     >
-                                        開啟您要使用的配送方式
+                                        根據商品的特性決定運費要依照「材積」還是「重量」計算，靈活選擇每個商品的運費計算方式。
                                         <div class="d-flex align-items-center justify-content-between"
                                              style="margin-top: 24px;height:52px;">
                                             <div
@@ -1840,25 +1870,26 @@ export class BgGuide {
                         });
                     }
                     case 5: {
+                        this.detectClickThrough(this.findIframeDom('.guide4-5'), () => {
+                            vm.step++;
+                            setTimeout(() => {
+                                gvc.notifyDataChange('logisticsInit');
+                            }, 200);
+                        });
                         return this.drawBGwithBelowWindow(BG, vm, '.guide4-5', 'logisticsInit', 5, 8, {
                             width: 332,
                             height: 209,
                             title: '新增計算區間',
+                            next: true,
                             content: '點擊藍字即可新增一個計算區間',
                         });
                     }
                     case 6: {
-                        let target = this.findIframeDom('.guide4-6');
-                        const handleClick = (event) => {
-                            this.eventSet = this.eventSet.filter((d) => {
-                                return d !== handleClick;
-                            });
-                            target.removeEventListener('click', handleClick);
-                            return;
-                        };
-                        target.addEventListener('click', handleClick);
-                        this.eventSet.push(() => {
-                            target.removeEventListener('click', handleClick);
+                        let target = this.findPageIframe().contentWindow.document.querySelectorAll('.guide4-6');
+                        target = target[target.length - 1];
+                        this.detectClickThrough(target, () => {
+                            vm.step++;
+                            gvc.notifyDataChange('logisticsInit');
                         });
                         let content = html `
                             <div class="d-flex align-items-center" style="">
@@ -1993,6 +2024,7 @@ export class BgGuide {
                                 }
                             }, 500);
                         }
+                        target.scrollIntoView();
                         let rect = target.getBoundingClientRect();
                         let left = rect.left + iframeRect.left;
                         let top = rect.top + iframeRect.top;
@@ -2312,9 +2344,17 @@ export class BgGuide {
                                 }
                             }, 400);
                         }
+                        if (target.querySelector('.open-box')) {
+                            target.click();
+                            let timer2 = setInterval(() => {
+                                clearInterval(timer2);
+                                gvc.notifyDataChange(viewID);
+                            }, 500);
+                            return ``;
+                        }
                         this.detectClickThrough(target, () => {
                             BG.classList.remove('guide2-4');
-                            vm.step++;
+                            vm.step = 5;
                             gvc.notifyDataChange(`financeInit`);
                         });
                         target.parentElement.parentElement.scrollIntoView();
@@ -2474,9 +2514,9 @@ export class BgGuide {
                                         close();
                                         setTimeout(() => {
                                             this.findIframeDom('.guide2-4').scrollIntoView({});
-                                            vm.step--;
+                                            vm.step = 4;
                                             gvc.notifyDataChange('financeInit');
-                                        }, 400);
+                                        }, 600);
                                     })}"
                                                             >
                                                                 上一步
@@ -2542,6 +2582,7 @@ export class BgGuide {
             bind: 'init',
             dataList: [{ key: 'step', obj: vm }],
             view: () => {
+                console.log(" vm.progress -- ", vm.progress);
                 if (vm.progress.length == 0) {
                     ApiShop.getGuide().then((r) => {
                         vm.progress = r.response.value;
@@ -2720,6 +2761,9 @@ export class BgGuide {
                         `;
                     }
                     case 0: {
+                        if (vm.progress.length == 0) {
+                            let dialog = new ShareDialog(gvc.glitter);
+                        }
                         return html `
                             <div class="d-flex flex-column"
                                  style="width:588px;border-radius: 10px;background-color: white;">
@@ -3828,6 +3872,7 @@ export class BgGuide {
                                     ApiShop.getEditorGuide().then(r => {
                                         r.response.value.find((element) => element.title == "頁面編輯").finish = true;
                                         ApiShop.setEditorGuide(r.response.value);
+                                        this.leaveGuide(vm, 1);
                                     });
                                 }
                             });
@@ -3863,8 +3908,8 @@ export class BgGuide {
                     case 1: {
                         const className = 'guide-user-editor-11';
                         let clickTarget = document.querySelector(`.${className}-icon`);
-                        clickTarget.click();
                         if (!document.querySelector(`.${className}`)) {
+                            clickTarget.click();
                             const timer = setInterval(() => {
                                 if (document.querySelector(`.${className}`)) {
                                     clearInterval(timer);

package/lowcode/backend-manager/bg-guide.ts

@@ -1,6 +1,7 @@
 import {GVC} from '../glitterBundle/GVController.js';
 import {ApiShop} from '../glitter-base/route/shopping.js';
 import {all} from 'underscore/index.js';
+import {ShareDialog} from "../dialog/ShareDialog.js";
 
 const html = String.raw;
 
@@ -99,11 +100,11 @@ export class BgGuide {
     ];
     private eventSet: any = [];
 
-    constructor(gvc: GVC, guide: number, type: string = 'backend-manger') {
+    constructor(gvc: GVC, guide: number, type: string = 'backend-manger' , step: number = 0) {
         this.guide = guide;
         this.gvc = gvc;
         this.type = type;
-        this.step = 0;
+        this.step = step;
     }
 
     public detectClickThrough(target: any, clickEvent: () => void) {
@@ -214,7 +215,10 @@ export class BgGuide {
                 return data.value === key;
             });
             target.finished = true;
-            ApiShop.setGuide(dataList);
+
+            ApiShop.setGuide(dataList).then(r => {
+
+            });
         });
     }
 
@@ -278,9 +282,12 @@ export class BgGuide {
     private drawSecondRowBG(BG: HTMLElement, vm: any, targetSelector: string, viewID: string, title: string, step: number) {
         BG.style.clipPath = ``;
         const gvc = this.gvc;
-        const target = document.querySelector(targetSelector) as HTMLElement;
-        const rect = target ? target!.getBoundingClientRect() : '';
+        let target = document.querySelector(targetSelector) as HTMLElement;
+        let rect = target ? target!.getBoundingClientRect() : '';
         if (rect) {
+            target.scrollIntoView();
+            target = document.querySelector(targetSelector) as HTMLElement;
+            rect = target!.getBoundingClientRect();
             BG.style.clipPath = `polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 ${rect.bottom}px, ${rect.right}px ${rect.bottom}px, ${rect.right}px ${rect.top}px, 0 ${rect.top}px)`;
             this.detectClickThrough(target, () => {
                 vm.step = 3;
@@ -895,8 +902,8 @@ export class BgGuide {
                         `);
         this.detectClickThrough(target, () => {
             close();
-            this.leaveGuide(vm, 1);
             this.finGuide(key);
+            this.leaveGuide(vm, 0);
         });
         return html`
             <div class="d-flex flex-column"
@@ -1188,6 +1195,8 @@ export class BgGuide {
         };
         const that = this;
         let totalStep = 8;
+        let layer2Delay = true;
+        let themeNumbers = 0;
         return gvc.bindView({
             bind: 'layoutInit',
             dataList: [],
@@ -1195,6 +1204,7 @@ export class BgGuide {
                 let viewID = 'layoutInit';
                 let iframe = this.findPageIframe();
 
+
                 const BG = document.querySelector(`.guide-BG`) as HTMLElement;
                 gvc.addStyle(`                        
                     .breathing-light {
@@ -1230,6 +1240,18 @@ export class BgGuide {
                 `);
                 switch (vm.step) {
                     case 2: {
+                        let target = document.querySelector('.guide7-2');
+
+                        if (layer2Delay) {
+                            const timer = setInterval(() => {
+                                layer2Delay = false;
+                                clearInterval(timer);
+                                (target as any).scrollIntoView();
+                                gvc.notifyDataChange(viewID);
+
+                            }, 300);
+                            return ``
+                        }
                         return this.drawSecondRowBG(BG, vm, `.guide7-2`, viewID, '佈景主題', totalStep);
                     }
                     case 3: {
@@ -1273,7 +1295,7 @@ export class BgGuide {
                                     clearInterval(timer);
                                     gvc.notifyDataChange(viewID);
                                 }
-                            }, 400);
+                            }, 600);
                         }
                         let content = html`
                             <div class="d-flex flex-wrap"
@@ -1343,10 +1365,16 @@ export class BgGuide {
                             height: 261,
                             title: '選擇主題',
                             content: content,
+                            next:true
                         });
                     }
                     case 7: {
                         let target = this.findIframeDom(`.guide8-5`);
+                        let themeRow = this.findPageIframe().contentWindow.document.querySelectorAll('.themeRow');
+                        if (themeNumbers == 0){
+                            themeNumbers = themeRow.length;
+                        }
+
                         if (!target) {
                             const timer = setInterval(() => {
                                 if (this.findIframeDom(`.guide8-5`)) {
@@ -1355,6 +1383,15 @@ export class BgGuide {
                                 }
                             }, 400);
                         }
+                        if (themeNumbers == this.findPageIframe().contentWindow.document.querySelectorAll('.themeRow').length){
+
+                            const timer = setInterval(() => {
+                                if (themeNumbers != this.findPageIframe().contentWindow.document.querySelectorAll('.themeRow').length) {
+                                    clearInterval(timer);
+                                    gvc.notifyDataChange(viewID);
+                                }
+                            }, 400);
+                        }
                         target.scrollIntoView();
                         let content = html`
                             <div class=""
@@ -2038,9 +2075,9 @@ export class BgGuide {
                                     </div>
                                     <div
                                             class="d-flex flex-column w-100"
-                                            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;"
+                                            style="white-space: normal;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;"
                                     >
-                                        開啟您要使用的配送方式
+                                        根據商品的特性決定運費要依照「材積」還是「重量」計算，靈活選擇每個商品的運費計算方式。
                                         <div class="d-flex align-items-center justify-content-between"
                                              style="margin-top: 24px;height:52px;">
                                             <div
@@ -2080,26 +2117,27 @@ export class BgGuide {
                         });
                     }
                     case 5: {
+                        this.detectClickThrough(this.findIframeDom('.guide4-5'), () => {
+                            vm.step++;
+                            setTimeout(()=>{
+                                gvc.notifyDataChange('logisticsInit');
+                            },200)
+
+                        });
                         return this.drawBGwithBelowWindow(BG, vm, '.guide4-5', 'logisticsInit', 5, 8, {
                             width: 332,
                             height: 209,
                             title: '新增計算區間',
+                            next: true,
                             content: '點擊藍字即可新增一個計算區間',
                         });
                     }
                     case 6: {
-                        let target = this.findIframeDom('.guide4-6');
-                        const handleClick = (event: any) => {
-                            this.eventSet = this.eventSet.filter((d: any) => {
-                                return d !== handleClick;
-                            });
-                            target!.removeEventListener('click', handleClick);
-                            // (event as any).preventDefault()
-                            return;
-                        };
-                        target!.addEventListener('click', handleClick);
-                        this.eventSet.push(() => {
-                            target!.removeEventListener('click', handleClick);
+                        let target = this.findPageIframe().contentWindow.document.querySelectorAll('.guide4-6');
+                        target = target[target.length - 1];
+                        this.detectClickThrough(target, () => {
+                            vm.step++;
+                            gvc.notifyDataChange('logisticsInit');
                         });
                         let content = html`
                             <div class="d-flex align-items-center" style="">
@@ -2248,6 +2286,7 @@ export class BgGuide {
                                 }
                             }, 500);
                         }
+                        target.scrollIntoView();
                         let rect = target.getBoundingClientRect();
                         let left = rect.left + iframeRect.left;
                         let top = rect.top + iframeRect.top;
@@ -2579,15 +2618,27 @@ export class BgGuide {
                         let target = this.findIframeDom(targetSelector);
                         if (!target) {
                             const timer = setInterval(() => {
+
                                 if (this.findIframeDom(targetSelector)) {
                                     clearInterval(timer);
+
                                     gvc.notifyDataChange(viewID);
                                 }
                             }, 400);
                         }
+                        if (target.querySelector('.open-box')){
+                            target.click();
+
+                            let timer2 = setInterval(()=>{
+                                clearInterval(timer2)
+                                gvc.notifyDataChange(viewID);
+
+                            },500)
+                            return ``
+                        }
                         this.detectClickThrough(target, () => {
                             BG.classList.remove('guide2-4');
-                            vm.step++;
+                            vm.step = 5;
                             gvc.notifyDataChange(`financeInit`);
                         });
                         target.parentElement.parentElement.scrollIntoView();
@@ -2752,10 +2803,10 @@ export class BgGuide {
                                                                         close();
                                                                         setTimeout(() => {
                                                                             this.findIframeDom('.guide2-4').scrollIntoView({});
-                                                                            vm.step--;
+                                                                            vm.step = 4;
 
                                                                             gvc.notifyDataChange('financeInit');
-                                                                        }, 400);
+                                                                        }, 600);
                                                                     })}"
                                                             >
                                                                 上一步
@@ -2824,6 +2875,7 @@ export class BgGuide {
             bind: 'init',
             dataList: [{key: 'step', obj: vm}],
             view: () => {
+                console.log(" vm.progress -- " , vm.progress)
                 if (vm.progress.length == 0) {
                     ApiShop.getGuide().then((r) => {
                         // if (!r.response.value.guideList){
@@ -3005,6 +3057,10 @@ export class BgGuide {
                         `;
                     }
                     case 0: {
+                        if(vm.progress.length == 0){
+                            let dialog = new ShareDialog(gvc.glitter);
+
+                        }
                         return html`
                             <div class="d-flex flex-column"
                                  style="width:588px;border-radius: 10px;background-color: white;">
@@ -4230,6 +4286,7 @@ export class BgGuide {
                                     ApiShop.getEditorGuide().then(r => {
                                         r.response.value.find((element: any) => element.title == "頁面編輯").finish = true;
                                         ApiShop.setEditorGuide(r.response.value)
+                                        this.leaveGuide(vm,1)
                                     })
                                 }
                             });
@@ -4266,9 +4323,8 @@ export class BgGuide {
                     case 1: {
                         const className: string = 'guide-user-editor-11';
                         let clickTarget = document.querySelector(`.${className}-icon`) as HTMLElement;
-                        clickTarget!.click();
                         if (!document.querySelector(`.${className}`)) {
-
+                            clickTarget!.click();
                             const timer = setInterval(() => {
                                 if (document.querySelector(`.${className}`)) {
                                     clearInterval(timer);
@@ -4277,7 +4333,6 @@ export class BgGuide {
                             }, 500)
                         }
                         let target = document.querySelector(`.${className}`);
-
                         if (target) {
                             //點擊完的icon會變色 也會是不同的dom元素
                             let clickTarget = document.querySelector(`.${className}-icon`) as HTMLElement;