ts-glitter 22.5.7 → 22.5.8

package/lowcode/Entry.js

@@ -154,7 +154,7 @@ export class Entry {
             }
             window.renderClock = (_b = window.renderClock) !== null && _b !== void 0 ? _b : createClock();
             console.log(`Entry-time:`, window.renderClock.stop());
-            glitter.share.editerVersion = 'V_22.5.7';
+            glitter.share.editerVersion = 'V_22.5.8';
             glitter.share.start = new Date();
             const vm = { appConfig: [] };
             window.saasConfig = {

package/lowcode/Entry.ts

@@ -159,7 +159,7 @@ export class Entry {
       }
       (window as any).renderClock = (window as any).renderClock ?? createClock();
       console.log(`Entry-time:`, (window as any).renderClock.stop());
-      glitter.share.editerVersion = 'V_22.5.7';
+      glitter.share.editerVersion = 'V_22.5.8';
       glitter.share.start = new Date();
       const vm = { appConfig: [] };
       (window as any).saasConfig = {

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

@@ -136,7 +136,7 @@ export class BgProduct {
                         });
                     }
                     return html ` <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto;">
-              <div class="w-100 d-flex align-items-center p-3 border-bottom">
+              <div class="w-100 d-flex align-items-center border-bottom" style="padding: 12px 20px;">
                 <div class="tx_700">${(_a = obj.title) !== null && _a !== void 0 ? _a : '產品列表'}</div>
                 <div class="flex-fill"></div>
                 <i
@@ -406,7 +406,7 @@ export class BgProduct {
                         return `_collections_opt_${key}`;
                     }
                     return html ` <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto;">
-              <div class="w-100 d-flex align-items-center p-3 border-bottom">
+              <div class="w-100 d-flex align-items-center border-bottom" style="padding: 12px 20px;">
                 <div class="tx_700">${(_a = obj.title) !== null && _a !== void 0 ? _a : '商品分類'}</div>
                 <div class="flex-fill"></div>
                 <i
@@ -503,8 +503,8 @@ export class BgProduct {
     }
     static getWidthHeigth(isDesktop) {
         return isDesktop
-            ? ['800px', '600px', 'calc(600px - 120px) !important']
-            : ['95vw', '70vh', 'calc(70vh - 120px) !important'];
+            ? ['800px', '600px', 'calc(600px - 112px) !important']
+            : ['95vw', '70vh', 'calc(70vh - 108px) !important'];
     }
     static setMemberPriceSetting(obj) {
         const { gvc, postData, callback } = obj;
@@ -560,8 +560,8 @@ export class BgProduct {
                     style="width: 100%; max-height: 100%; overflow-y: auto; position: relative;"
                   >
                     <div
-                      class="w-100 d-flex align-items-center p-3 border-bottom"
-                      style="position: sticky; top: 0; z-index: 2; background: #fff;"
+                      class="w-100 d-flex align-items-center border-bottom"
+                      style="position: sticky; top: 0; z-index: 2; background: #fff; padding: 12px 20px;"
                     >
                       <div class="tx_700">會員等級價格設定</div>
                       <div class="flex-fill"></div>
@@ -572,7 +572,7 @@ export class BgProduct {
                     </div>
                     <div class="c_dialog h-100">
                       <div class="c_dialog_body h-100">
-                        <div class="c_dialog_main h-100" style="min-height: ${mainHeight}; padding: 8px; gap: 0;">
+                        <div class="c_dialog_main h-100" style="min-height: ${mainHeight}; gap: 0;">
                           ${vm.dataList.length > 0
                         ? checkboxList()
                         : '尚未建立會員等級，請至「顧客管理」>「會員等級」新增'}
@@ -652,8 +652,8 @@ export class BgProduct {
                     style="width: 100%; max-height: 100%; overflow-y: auto; position: relative;"
                   >
                     <div
-                      class="w-100 d-flex align-items-center p-3 border-bottom"
-                      style="position: sticky; top: 0; z-index: 2; background: #fff;"
+                      class="w-100 d-flex align-items-center border-bottom"
+                      style="position: sticky; top: 0; z-index: 2; background: #fff; padding: 12px 20px;"
                     >
                       <div class="tx_700">門市專屬價格設定</div>
                       <div class="flex-fill"></div>
@@ -664,7 +664,7 @@ export class BgProduct {
                     </div>
                     <div class="c_dialog h-100">
                       <div class="c_dialog_body h-100">
-                        <div class="c_dialog_main h-100" style="min-height: ${mainHeight}; padding: 8px; gap: 0;">
+                        <div class="c_dialog_main h-100" style="min-height: ${mainHeight}; gap: 0;">
                           ${vm.dataList.length > 0
                         ? checkboxList()
                         : '尚未建立門市，請至「庫存管理」>「庫存點管理」新增'}
@@ -735,8 +735,8 @@ export class BgProduct {
                     style="width: 100%; max-height: 100%; overflow-y: auto; position: relative;"
                   >
                     <div
-                      class="w-100 d-flex align-items-center p-3 border-bottom"
-                      style="position: sticky; top: 0; z-index: 2; background: #fff;"
+                      class="w-100 d-flex align-items-center border-bottom"
+                      style="position: sticky; top: 0; z-index: 2; background: #fff; padding: 12px 20px;"
                     >
                       <div class="tx_700">顧客標籤價格設定</div>
                       <div class="flex-fill"></div>
@@ -747,7 +747,7 @@ export class BgProduct {
                     </div>
                     <div class="c_dialog h-100">
                       <div class="c_dialog_body h-100">
-                        <div class="c_dialog_main h-100" style="min-height: ${mainHeight}; padding: 8px; gap: 0;">
+                        <div class="c_dialog_main h-100" style="min-height: ${mainHeight}; gap: 0;">
                           ${vm.dataList.length > 0
                         ? checkboxList()
                         : '尚未建立顧客標籤，請編輯任一顧客的「顧客標籤」欄位'}

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

@@ -187,7 +187,7 @@ export class BgProduct {
             }
 
             return html` <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto;">
-              <div class="w-100 d-flex align-items-center p-3 border-bottom">
+              <div class="w-100 d-flex align-items-center border-bottom" style="padding: 12px 20px;">
                 <div class="tx_700">${obj.title ?? '產品列表'}</div>
                 <div class="flex-fill"></div>
                 <i
@@ -528,7 +528,7 @@ export class BgProduct {
             }
 
             return html` <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto;">
-              <div class="w-100 d-flex align-items-center p-3 border-bottom">
+              <div class="w-100 d-flex align-items-center border-bottom" style="padding: 12px 20px;">
                 <div class="tx_700">${obj.title ?? '商品分類'}</div>
                 <div class="flex-fill"></div>
                 <i
@@ -679,8 +679,8 @@ export class BgProduct {
 
   static getWidthHeigth(isDesktop: boolean): [string, string, string] {
     return isDesktop
-      ? ['800px', '600px', 'calc(600px - 120px) !important']
-      : ['95vw', '70vh', 'calc(70vh - 120px) !important'];
+      ? ['800px', '600px', 'calc(600px - 112px) !important']
+      : ['95vw', '70vh', 'calc(70vh - 108px) !important'];
   }
 
   static setMemberPriceSetting(obj: { gvc: GVC; postData: string[]; callback: (data: string[]) => void }) {
@@ -746,8 +746,8 @@ export class BgProduct {
                     style="width: 100%; max-height: 100%; overflow-y: auto; position: relative;"
                   >
                     <div
-                      class="w-100 d-flex align-items-center p-3 border-bottom"
-                      style="position: sticky; top: 0; z-index: 2; background: #fff;"
+                      class="w-100 d-flex align-items-center border-bottom"
+                      style="position: sticky; top: 0; z-index: 2; background: #fff; padding: 12px 20px;"
                     >
                       <div class="tx_700">會員等級價格設定</div>
                       <div class="flex-fill"></div>
@@ -758,7 +758,7 @@ export class BgProduct {
                     </div>
                     <div class="c_dialog h-100">
                       <div class="c_dialog_body h-100">
-                        <div class="c_dialog_main h-100" style="min-height: ${mainHeight}; padding: 8px; gap: 0;">
+                        <div class="c_dialog_main h-100" style="min-height: ${mainHeight}; gap: 0;">
                           ${vm.dataList.length > 0
                             ? checkboxList()
                             : '尚未建立會員等級，請至「顧客管理」>「會員等級」新增'}
@@ -852,8 +852,8 @@ export class BgProduct {
                     style="width: 100%; max-height: 100%; overflow-y: auto; position: relative;"
                   >
                     <div
-                      class="w-100 d-flex align-items-center p-3 border-bottom"
-                      style="position: sticky; top: 0; z-index: 2; background: #fff;"
+                      class="w-100 d-flex align-items-center border-bottom"
+                      style="position: sticky; top: 0; z-index: 2; background: #fff; padding: 12px 20px;"
                     >
                       <div class="tx_700">門市專屬價格設定</div>
                       <div class="flex-fill"></div>
@@ -864,7 +864,7 @@ export class BgProduct {
                     </div>
                     <div class="c_dialog h-100">
                       <div class="c_dialog_body h-100">
-                        <div class="c_dialog_main h-100" style="min-height: ${mainHeight}; padding: 8px; gap: 0;">
+                        <div class="c_dialog_main h-100" style="min-height: ${mainHeight}; gap: 0;">
                           ${vm.dataList.length > 0
                             ? checkboxList()
                             : '尚未建立門市，請至「庫存管理」>「庫存點管理」新增'}
@@ -949,8 +949,8 @@ export class BgProduct {
                     style="width: 100%; max-height: 100%; overflow-y: auto; position: relative;"
                   >
                     <div
-                      class="w-100 d-flex align-items-center p-3 border-bottom"
-                      style="position: sticky; top: 0; z-index: 2; background: #fff;"
+                      class="w-100 d-flex align-items-center border-bottom"
+                      style="position: sticky; top: 0; z-index: 2; background: #fff; padding: 12px 20px;"
                     >
                       <div class="tx_700">顧客標籤價格設定</div>
                       <div class="flex-fill"></div>
@@ -961,7 +961,7 @@ export class BgProduct {
                     </div>
                     <div class="c_dialog h-100">
                       <div class="c_dialog_body h-100">
-                        <div class="c_dialog_main h-100" style="min-height: ${mainHeight}; padding: 8px; gap: 0;">
+                        <div class="c_dialog_main h-100" style="min-height: ${mainHeight}; gap: 0;">
                           ${vm.dataList.length > 0
                             ? checkboxList()
                             : '尚未建立顧客標籤，請編輯任一顧客的「顧客標籤」欄位'}

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

@@ -957,7 +957,7 @@ export class BgShopping {
         </button>
       </div>
       <div class="d-flex" style="gap:10px;">
-        <div  style="width:700px;">
+        <div style="width:700px;">
           ${[
             BgWidget.card(`
                             <h3 class="fs-7 mb-2">折扣券名稱</h3>
@@ -2489,7 +2489,7 @@ ${EditorElem.editeInput({
                                                           <span>運費權重</span>
                                                           <div class="alert-info alert mt-2 mb-0">
                                                             <span>( 每單位金額*權重 ) + 基本運費 = 總運費</span><br />
-                                                            <span 
+                                                            <span
                                                               >試算 : ( ${shipmentSetting.weight} *
                                                               ${dd.shipment_weight} ) + ${shipmentSetting.basic_fee} =
                                                               ${shipmentSetting.weight * dd.shipment_weight +
@@ -2514,10 +2514,8 @@ ${EditorElem.editeInput({
                                           編輯商品
                                         </button>
                                       </div>`,
-                                                innerHtml: (gvc) => {
-                                                    return [].join('');
-                                                },
-                                                editTitle: `編輯規格`,
+                                                innerHtml: () => '',
+                                                editTitle: '編輯規格',
                                             };
                                         });
                                     },
@@ -2529,7 +2527,6 @@ ${EditorElem.editeInput({
                                     plus: {
                                         title: '添加商品項目',
                                         event: obj.gvc.event(() => {
-                                            let ct = '';
                                             let cType = [];
                                             function generateCombinations(specs, currentCombination, index = 0) {
                                                 if (index === specs.length) {
@@ -2692,7 +2689,6 @@ ${EditorElem.editeInput({
                                   >
                                     <div
                                       class="editor_item d-flex   pe-2 my-0 hi me-n1 "
-                                      
                                       onclick="${gvc.event(() => {
                                         dd.toogle = !dd.toogle;
                                         gvc.recreateView();
@@ -2718,7 +2714,6 @@ ${EditorElem.editeInput({
                                   >
                                     <div
                                       class="editor_item d-flex   pe-2 my-0 hi  "
-                                      
                                       onclick="${gvc.event(() => {
                                         if (postMD.collection.find(dd => {
                                             return dd === indt;
@@ -3006,12 +3001,12 @@ ${EditorElem.editeInput({
                                                     }),
                                                     EditorElem.editeInput({
                                                         gvc: gvc,
-                                                        title: '特店編號',
+                                                        title: '商店代號',
                                                         default: keyData.MERCHANT_ID,
                                                         callback: text => {
                                                             keyData.MERCHANT_ID = text;
                                                         },
-                                                        placeHolder: '請輸入特店編號',
+                                                        placeHolder: '請輸入商店代號',
                                                     }),
                                                     EditorElem.editeInput({
                                                         gvc: gvc,
@@ -3152,10 +3147,10 @@ ${EditorElem.editeInput({
                                 return [
                                     EditorElem.editeInput({
                                         gvc: gvc,
-                                        title: '特店編號',
+                                        title: '商店代號',
                                         default: (_c = vm.data.merchNO) !== null && _c !== void 0 ? _c : '',
                                         type: 'text',
-                                        placeHolder: '請輸入特店編號',
+                                        placeHolder: '請輸入商店代號',
                                         callback: text => {
                                             vm.data.merchNO = text;
                                         },

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

@@ -1078,7 +1078,7 @@ export class BgShopping {
         </button>
       </div>
       <div class="d-flex" style="gap:10px;">
-        <div  style="width:700px;">
+        <div style="width:700px;">
           ${[
             BgWidget.card(`
                             <h3 class="fs-7 mb-2">折扣券名稱</h3>
@@ -2710,7 +2710,7 @@ ${EditorElem.editeInput({
                                                           <span>運費權重</span>
                                                           <div class="alert-info alert mt-2 mb-0">
                                                             <span>( 每單位金額*權重 ) + 基本運費 = 總運費</span><br />
-                                                            <span 
+                                                            <span
                                                               >試算 : ( ${shipmentSetting.weight} *
                                                               ${dd.shipment_weight} ) + ${shipmentSetting.basic_fee} =
                                                               ${shipmentSetting.weight * dd.shipment_weight +
@@ -2735,11 +2735,8 @@ ${EditorElem.editeInput({
                                           編輯商品
                                         </button>
                                       </div>`,
-                                      innerHtml: (gvc: GVC) => {
-                                        // refresh()
-                                        return [].join('');
-                                      },
-                                      editTitle: `編輯規格`,
+                                      innerHtml: () => '',
+                                      editTitle: '編輯規格',
                                     };
                                   });
                                 },
@@ -2751,12 +2748,10 @@ ${EditorElem.editeInput({
                                 plus: {
                                   title: '添加商品項目',
                                   event: obj.gvc.event(() => {
-                                    let ct = '';
                                     let cType: any = [];
 
                                     function generateCombinations(specs: any, currentCombination: any, index = 0) {
                                       if (index === specs.length) {
-                                        // 当达到规格数组的末尾，表示一种组合已生成，打印它或执行其他操作
                                         cType.push(JSON.parse(JSON.stringify(currentCombination)));
                                         return;
                                       }
@@ -2936,7 +2931,6 @@ ${EditorElem.editeInput({
                                   >
                                     <div
                                       class="editor_item d-flex   pe-2 my-0 hi me-n1 "
-                                      
                                       onclick="${gvc.event(() => {
                                         dd.toogle = !dd.toogle;
                                         gvc.recreateView();
@@ -2961,7 +2955,6 @@ ${EditorElem.editeInput({
                                   >
                                     <div
                                       class="editor_item d-flex   pe-2 my-0 hi  "
-                                      
                                       onclick="${gvc.event(() => {
                                         if (
                                           postMD.collection.find(dd => {
@@ -3267,12 +3260,12 @@ ${EditorElem.editeInput({
                                 }),
                                 EditorElem.editeInput({
                                   gvc: gvc,
-                                  title: '特店編號',
+                                  title: '商店代號',
                                   default: keyData.MERCHANT_ID,
                                   callback: text => {
                                     keyData.MERCHANT_ID = text;
                                   },
-                                  placeHolder: '請輸入特店編號',
+                                  placeHolder: '請輸入商店代號',
                                 }),
                                 EditorElem.editeInput({
                                   gvc: gvc,
@@ -3419,10 +3412,10 @@ ${EditorElem.editeInput({
                   return [
                     EditorElem.editeInput({
                       gvc: gvc,
-                      title: '特店編號',
+                      title: '商店代號',
                       default: vm.data.merchNO ?? '',
                       type: 'text',
-                      placeHolder: '請輸入特店編號',
+                      placeHolder: '請輸入商店代號',
                       callback: text => {
                         vm.data.merchNO = text;
                       },

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

@@ -283,19 +283,27 @@ export class BgWidget {
     }
     static checkInput(gvc, def, callback) {
         const id = gvc.glitter.getUUID();
-        const trueImg = html `<i class="fa-solid fa-square-check" style="width: 16px;height: 16px;" onclick="${gvc.event(e => {
+        const trueImg = html `<i
+      class="fa-solid fa-square-check"
+      style="width: 16px;height: 16px;"
+      onclick="${gvc.event(e => {
             callback(def);
             gvc.notifyDataChange(id);
-        })}"></i>`;
-        const falseImg = html `<div style="width: 16px;height: 16px;border-radius: 3px;border: 1px solid #DDD;" onclick="${gvc.event(e => {
+        })}"
+    ></i>`;
+        const falseImg = html `<div
+      style="width: 16px;height: 16px;border-radius: 3px;border: 1px solid #DDD;"
+      onclick="${gvc.event(e => {
             callback(def);
             gvc.notifyDataChange(id);
-        })}"></div>`;
+        })}"
+    ></div>`;
         return gvc.bindView({
             bind: id,
             view: () => {
-                return (def) ? trueImg : falseImg;
-            }, divCreate: {}
+                return def ? trueImg : falseImg;
+            },
+            divCreate: {},
         });
     }
     static switchTextButton(gvc, def, text, callback) {
@@ -742,7 +750,7 @@ export class BgWidget {
                         : ''}
             <div
               class="d-flex w-100 align-items-center border rounded-3 ${obj.readonly ? `bgw-input-readonly` : ``}"
-              style="margin: 8px 0;overflow: hidden;"
+              style="margin: 8px 0; overflow: hidden;"
             >
               ${obj.global_language
                         ? html `
@@ -1766,6 +1774,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
             header: Tool.randomString(6),
             headerCell: Tool.randomString(6),
             tr: Tool.randomString(6),
+            table: glitter.getUUID(),
             textClass: Tool.randomString(6),
         };
         const created = {
@@ -1843,11 +1852,11 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
                             var _b;
                             const checkboxSelector = result ? 'i.fa-square' : 'i.fa-square-check';
                             vm.originalData.forEach((item, index) => {
-                                const checkboxParent = gvc.glitter.document.querySelector(`[gvc-checkbox="checkbox${index}"]`);
+                                const checkboxParent = gvc.glitter.document.querySelector(`.${ids.table} [gvc-checkbox="checkbox${index}"]`);
                                 const checkboxIcon = checkboxParent === null || checkboxParent === void 0 ? void 0 : checkboxParent.querySelector(checkboxSelector);
                                 checkboxIcon === null || checkboxIcon === void 0 ? void 0 : checkboxIcon.click();
                             });
-                            gvc.notifyDataChange(ids.filter);
+                            gvc.notifyDataChange([ids.filter, ids.table]);
                             (_b = obj.itemSelect) === null || _b === void 0 ? void 0 : _b.call(obj);
                             changeHeaderStyle();
                         }
@@ -1939,9 +1948,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
                         return html ` <div style="margin-top: 4px; overflow-x: scroll; position: relative; min-height: 350px">
                 <div
                   class="w-100 h-100 bg-white top-0"
-                  style="position: absolute; z-index: ${defWidth > 0 ? 0 : 2}; display: ${defWidth > 0
-                            ? 'none'
-                            : 'block'};"
+                  style="position: absolute; z-index: ${defWidth > 0 ? 0 : 2}; display: ${defWidth > 0 ? 'none' : 'block'};"
                 ></div>
                 ${gvc.bindView({
                             bind: ids.header,
@@ -2059,23 +2066,24 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
                         })}
                 <table class="table table-centered table-nowrap text-center table-hover" style="width: ${defWidth}px;">
                   <tbody>
-                    ${vm.tableData
+                    <tbody class="${ids.table}">
+                      ${vm.tableData
                             .map((dd, trIndex) => {
                             return html ` <tr
-                          class="${trIndex === 0 ? ids.tr : ''} ${dd.find(d3 => d3.tooltip)
+                            class="${trIndex === 0 ? ids.tr : ''} ${dd.find(d3 => d3.tooltip)
                                 ? 'tr-tooltip-container'
                                 : ''}"
-                          onclick="${gvc.event((e, event) => {
+                            onclick="${gvc.event((e, event) => {
                                 obj.rowClick && obj.rowClick(dd, trIndex, e, event);
                             })}"
-                          onmouseover="${gvc.event(() => {
+                            onmouseover="${gvc.event(() => {
                                 $(`#${ids.pencil}${trIndex}`).removeClass('d-none');
                             })}"
-                          onmouseout="${gvc.event(() => {
+                            onmouseout="${gvc.event(() => {
                                 $(`#${ids.pencil}${trIndex}`).addClass('d-none');
                             })}"
-                        >
-                          ${dd
+                          >
+                            ${dd
                                 .map((d3, tdIndex) => {
                                 const tdClass = Tool.randomString(5);
                                 const style = `
@@ -2087,25 +2095,27 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
                                 ${dd.length === 1 ? 'border-radius: 10px;' : ''}
                               `;
                                 return html ` <td
-                                class="${ids.textClass} ${tdClass} tb-v3 tx_normal position-relative"
-                                style="${style}"
-                                ${obj.filter.length !== 0 && tdIndex === 0 ? `gvc-checkbox="checkbox${trIndex}"` : ''}
-                                onclick="${d3.stopClick ? gvc.event((_, event) => event.stopPropagation()) : ''}"
-                              >
-                                <div
-                                  class="text-nowrap ${d3.tooltip ? 'hover-element' : ''}"
-                                  style="color: #393939 !important;"
-                                  ${d3.tooltip ? `data-tooltip="${d3.tooltip}"` : ''}
+                                  class="${ids.textClass} ${tdClass} tb-v3 tx_normal position-relative"
+                                  style="${style}"
+                                  ${obj.filter.length !== 0 && tdIndex === 0 ? `gvc-checkbox="checkbox${trIndex}"` : ''}
+                                  onclick="${d3.stopClick ? gvc.event((_, event) => event.stopPropagation()) : ''}"
                                 >
-                                  ${d3.value}
-                                </div>
-                                ${d3.tooltip ? html `<div class="td-tooltip">${d3.tooltip}</div>` : ''}
-                              </td>`;
+                                  <div
+                                    class="text-nowrap ${d3.tooltip ? 'hover-element' : ''}"
+                                    style="color: #393939 !important;"
+                                    ${d3.tooltip ? `data-tooltip="${d3.tooltip}"` : ''}
+                                  >
+                                    ${d3.value}
+                                  </div>
+                                  ${d3.tooltip ? html `<div class="td-tooltip">${d3.tooltip}</div>` : ''}
+                                </td>`;
                             })
                                 .join('')}
-                        </tr>`;
+                          </tr>`;
                         })
                             .join('')}
+                    </tbody>
+                  
                   </tbody>
                 </table>
               </div>
@@ -2197,8 +2207,10 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
     static container(htmlString, obj) {
         var _b;
         return html ` <div
-      class="mb-0 ${document.body.clientWidth > 768 ? 'mx-auto mt-3' : 'w-100 mx-0'}"
-      style="max-width: 100%; width: ${this.getContainerWidth()}px; ${(_b = obj === null || obj === void 0 ? void 0 : obj.style) !== null && _b !== void 0 ? _b : ''}"
+      class="mb-0 ${this.isPhone() ? 'w-100 mx-0' : 'mx-auto'}"
+      style="max-width: 100%; width: ${this.getContainerWidth()}px; ${this.isPhone()
+            ? ''
+            : 'border-top: 1rem solid #f5f5f5;'} ${(_b = obj === null || obj === void 0 ? void 0 : obj.style) !== null && _b !== void 0 ? _b : ''}"
     >
       ${htmlString}
     </div>`;
@@ -3447,7 +3459,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
                         return html ` <div class="my-4">${this.spinner()}</div>`;
                     }
                     return html ` <div style="width: 100%; overflow-y: auto;" class="bg-white shadow rounded-3">
-              <div class="w-100 d-flex align-items-center p-3 border-bottom">
+              <div class="w-100 d-flex align-items-center border-bottom" style="padding: 12px 20px;">
                 <div class="tx_700">${obj.title}</div>
                 <div class="flex-fill"></div>
                 <i
@@ -3610,7 +3622,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
                         return html ` <div class="my-4">${this.spinner()}</div>`;
                     }
                     return html ` <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto;">
-              <div class="w-100 d-flex align-items-center p-3 border-bottom">
+              <div class="w-100 d-flex align-items-center border-bottom" style="padding: 12px 20px;">
                 <div class="tx_700">${(_b = obj.title) !== null && _b !== void 0 ? _b : '產品列表'}</div>
                 <div class="flex-fill"></div>
                 <i
@@ -3735,7 +3747,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
                         return html ` <div class="my-4">${this.spinner()}</div>`;
                     }
                     return html ` <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto;">
-              <div class="w-100 d-flex align-items-center p-3 border-bottom">
+              <div class="w-100 d-flex align-items-center border-bottom" style="padding: 12px 20px;">
                 <div class="tx_700">${(_b = obj.title) !== null && _b !== void 0 ? _b : '產品列表'}</div>
                 <div class="flex-fill"></div>
                 <i
@@ -3907,7 +3919,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
                         return html ` <div class="my-4">${this.spinner()}</div>`;
                     }
                     return html ` <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto;">
-              <div class="w-100 d-flex align-items-center p-3 border-bottom">
+              <div class="w-100 d-flex align-items-center border-bottom" style="padding: 12px 20px;">
                 <div class="tx_700">${(_b = obj.title) !== null && _b !== void 0 ? _b : '產品列表'}</div>
                 <div class="flex-fill"></div>
                 <i
@@ -4030,7 +4042,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
                         return html ` <div class="my-4">${this.spinner()}</div>`;
                     }
                     return html ` <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto;">
-                <div class="w-100 d-flex align-items-center p-3 border-bottom">
+                <div class="w-100 d-flex align-items-center border-bottom" style="padding: 12px 20px;">
                   <div class="tx_700">${(_c = obj.title) !== null && _c !== void 0 ? _c : '產品列表'}</div>
                   <div class="flex-fill"></div>
                   <i
@@ -4047,9 +4059,9 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
                   <div class="c_dialog_body">
                     <div
                       class="c_dialog_main"
-                      style="${obj.d_main_style || ''};gap: 24px; ${obj.height
-                        ? `height:${obj.height}px;max-height: 100vh;`
-                        : `height:auto;max-height: 500px;`} "
+                      style="gap: 24px; ${obj.d_main_style || ''}; ${obj.height
+                        ? `height: ${obj.height}px; max-height: 100vh;`
+                        : `height: auto; max-height: 500px;`} "
                     >
                       ${(_d = obj.innerHTML(gvc)) !== null && _d !== void 0 ? _d : ''}
                     </div>
@@ -4077,7 +4089,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
                 : 'min-width: 90vw; max-width: 92.5vw;'}"
       >
         <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto;">
-          <div class="w-100 d-flex align-items-center p-3 border-bottom">
+          <div class="w-100 d-flex align-items-center border-bottom" style="padding: 12px 20px;">
             <div class="tx_700">${obj.title}</div>
             <div class="flex-fill"></div>
             <i
@@ -4211,7 +4223,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
             var _b, _c;
             return html ` <div class="bg-white shadow rounded-3" style="overflow-y: auto;width:414px;">
         <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto;">
-          <div class="w-100 d-flex align-items-center p-3 border-bottom">
+          <div class="w-100 d-flex align-items-center border-bottom" style="padding: 12px 20px;">
             <div class="tx_700">${obj.title}</div>
             <div class="flex-fill"></div>
             <i
@@ -4363,8 +4375,8 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
               style="width: 100%; max-height: 100%; overflow-y: auto; position: relative;"
             >
               <div
-                class="w-100 d-flex align-items-center p-3 border-bottom"
-                style="position: sticky; top: 0; z-index: 2; background: #fff;"
+                class="w-100 d-flex align-items-center border-bottom"
+                style="position: sticky; top: 0; z-index: 2; background: #fff; padding: 12px 20px;"
               >
                 <div class="tx_700">
                   ${typeof obj.title === 'function' ? obj.title(gvc) : ((_c = obj.title) !== null && _c !== void 0 ? _c : '產品列表')}
@@ -4794,8 +4806,8 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
               style="width: 100%; padding-top: 61px;"
             >
               <div
-                class="w-100 d-flex align-items-center p-3 border-bottom position-absolute"
-                style="background: #F2F2F2;top:0;left:0"
+                class="w-100 d-flex align-items-center border-bottom position-absolute"
+                style="background: #F2F2F2; top: 0; left: 0; padding: 12px 20px;"
               >
                 <div class="tx_700 dialog-title">${(_b = obj.title) !== null && _b !== void 0 ? _b : '圖片庫'}</div>
                 <div class="flex-fill"></div>
@@ -5151,6 +5163,7 @@ BgWidget.richTextQuickList = [
     },
 ];
 BgWidget.dotlottieJS = 'https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs';
+BgWidget.isPhone = () => document.body.offsetWidth < 768;
 BgWidget.getContainerWidth = (obj) => {
     const clientWidth = document.body.clientWidth;
     const rateForWeb = obj && obj.rate && obj.rate.web ? obj.rate.web : 0.95;