ts-glitter 21.2.7 → 21.2.9

package/lowcode/Entry.js

@@ -146,7 +146,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_21.2.7';
+            glitter.share.editerVersion = 'V_21.2.9';
             glitter.share.start = new Date();
             const vm = { appConfig: [] };
             window.saasConfig = {

package/lowcode/Entry.ts

@@ -150,7 +150,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_21.2.7';
+      glitter.share.editerVersion = 'V_21.2.9';
       glitter.share.start = new Date();
       const vm = { appConfig: [] };
       (window as any).saasConfig = {

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

@@ -765,6 +765,9 @@ export class BgWidget {
                         obj.default = e.value;
                         obj.oninput && obj.oninput(e.value);
                     })}"
+                onclick="${obj.gvc.event((e) => {
+                        obj.onclick && obj.onclick(e);
+                    })}"
                 value="${((_e = obj.default) !== null && _e !== void 0 ? _e : '').replace(/"/g, '"')}"
                 ${obj.readonly ? `readonly` : ``}
               />

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

@@ -919,6 +919,7 @@ export class BgWidget {
     startText?: string;
     endText?: string;
     oninput?: (text: string) => void;
+    onclick?: (e: Event) => void;
     global_language?: boolean;
   }) {
     obj.title = obj.title ?? '';
@@ -976,6 +977,9 @@ export class BgWidget {
                   obj.default = e.value;
                   obj.oninput && obj.oninput(e.value);
                 })}"
+                onclick="${obj.gvc.event((e)=>{
+                  obj.onclick && obj.onclick(e)
+                })}"
                 value="${(obj.default ?? '').replace(/"/g, '"')}"
                 ${obj.readonly ? `readonly` : ``}
               />

package/lowcode/cms-plugin/POS-setting.js

@@ -29,6 +29,7 @@ import { ApiPos } from '../glitter-base/route/pos.js';
 import { PosWidget } from './pos-widget.js';
 import { SaasOffer } from '../saas-offer.js';
 import { Language } from '../glitter-base/global/language.js';
+import { CreditCard } from './pos-pages/credit-card.js';
 const html = String.raw;
 export class POSSetting {
     static loginManager(gvc, mode, result) {
@@ -1275,6 +1276,18 @@ export class POSSetting {
                                     ...[
                                         ...(PayConfig.deviceType === 'pos'
                                             ? [
+                                                html `<a
+                                        class="dropdown-item cursor_pointer d-flex align-items-center"
+                                        style="gap:10px;"
+                                        onclick="${gvc.event(() => {
+                                                    CreditCard.refundView(gvc);
+                                                })}"
+                                      ><i
+                                        class="fa-regular fa-credit-card d-flex align-items-center justify-content-center"
+                                        style="width:20px;"
+                                      ></i
+                                      >信用卡刷退</a
+                                      >`,
                                                 html ` <a
                                           class="dropdown-item cursor_pointer d-flex align-items-center"
                                           style="gap:10px;"
@@ -1380,7 +1393,7 @@ export class POSSetting {
                                             });
                                         }
                                         else if (vm.type === 'order') {
-                                            return html ` <div class="vw-100 px-lg-3" style="overflow-y: scroll;">
+                                            return html ` <div class="vw-50 px-lg-3" style="overflow-y: scroll;">
                             ${ShoppingOrderManager.main(gvc, { isPOS: true })}
                           </div>`;
                                         }

package/lowcode/cms-plugin/POS-setting.ts

@@ -21,6 +21,7 @@ import { ApiPos } from '../glitter-base/route/pos.js';
 import { PosWidget } from './pos-widget.js';
 import { SaasOffer } from '../saas-offer.js';
 import { Language } from '../glitter-base/global/language.js';
+import { CreditCard } from './pos-pages/credit-card.js';
 
 const html = String.raw;
 
@@ -1388,8 +1389,21 @@ export class POSSetting {
                             <div class="dropdown-menu position-absolute" style="top:50px; right: 0;">
                               ${[
                                 ...[
+                                
                                   ...(PayConfig.deviceType === 'pos'
                                     ? [
+                                      html`<a
+                                        class="dropdown-item cursor_pointer d-flex align-items-center"
+                                        style="gap:10px;"
+                                        onclick="${gvc.event(() => {
+                                          CreditCard.refundView(gvc)
+                                        })}"
+                                      ><i
+                                        class="fa-regular fa-credit-card d-flex align-items-center justify-content-center"
+                                        style="width:20px;"
+                                      ></i
+                                      >信用卡刷退</a
+                                      >`,
                                         html` <a
                                           class="dropdown-item cursor_pointer d-flex align-items-center"
                                           style="gap:10px;"
@@ -1500,7 +1514,7 @@ export class POSSetting {
                             vm: vm,
                           });
                         } else if (vm.type === 'order') {
-                          return html` <div class="vw-100 px-lg-3" style="overflow-y: scroll;">
+                          return html` <div class="vw-50 px-lg-3" style="overflow-y: scroll;">
                             ${ShoppingOrderManager.main(gvc, { isPOS: true })}
                           </div>`;
                         } else if (vm.type === 'member') {

package/lowcode/cms-plugin/pos-pages/credit-card.js

@@ -0,0 +1,103 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { BgWidget } from '../../backend-manager/bg-widget.js';
+import { ShareDialog } from '../../glitterBundle/dialog/ShareDialog.js';
+import { PosFunction } from './pos-function.js';
+const html = String.raw;
+export class CreditCard {
+    static refundView(gvc) {
+        const vm = {
+            orderID: '',
+            transactionID: '',
+            refund: '',
+        };
+        BgWidget.settingDialog({
+            gvc: gvc,
+            title: '信用卡刷退',
+            innerHTML: (gvc) => {
+                return `<div>${[
+                    BgWidget.editeInput({
+                        title: '訂單編號',
+                        gvc: gvc,
+                        style: `background:white;`,
+                        default: vm.orderID,
+                        placeHolder: '請輸入訂單編號',
+                        callback: text => {
+                        },
+                        onclick: () => {
+                            PosFunction.setMoney(gvc, vm.orderID, money => {
+                                vm.orderID = `${money}`;
+                                gvc.recreateView();
+                            }, '退款金額');
+                        },
+                        readonly: true
+                    }),
+                    BgWidget.editeInput({
+                        title: '金流編號',
+                        gvc: gvc,
+                        style: `background:white;`,
+                        default: vm.transactionID,
+                        placeHolder: '請輸入金流編號',
+                        callback: text => {
+                        },
+                        onclick: () => {
+                            PosFunction.setMoney(gvc, vm.transactionID, money => {
+                                vm.transactionID = `${money}`;
+                                gvc.recreateView();
+                            }, '金流編號');
+                        },
+                        readonly: true
+                    }),
+                    BgWidget.editeInput({
+                        title: '退款金額',
+                        gvc: gvc,
+                        style: `background:white;`,
+                        default: `${vm.refund}`,
+                        placeHolder: '請輸入退款金額',
+                        callback: text => {
+                        },
+                        onclick: () => {
+                            PosFunction.setMoney(gvc, vm.refund, money => {
+                                vm.refund = `${money}`;
+                                gvc.recreateView();
+                            }, '退款金額');
+                        },
+                        readonly: true
+                    })
+                ].join('')}</div>`;
+            },
+            footer_html: gvc => {
+                return [
+                    BgWidget.save(gvc.event(() => {
+                        gvc.glitter.runJsInterFace('toCreditCardHistory', {}, () => { });
+                    }), '查詢刷卡紀錄'),
+                    BgWidget.danger(gvc.event(() => __awaiter(this, void 0, void 0, function* () {
+                        const dialog = new ShareDialog(gvc.glitter);
+                        dialog.dataLoading({
+                            visible: true,
+                        });
+                        const saasConfig = window.parent.saasConfig;
+                        gvc.glitter.runJsInterFace('CreditCardRefund', {
+                            order_id: vm.orderID,
+                            transaction_id: vm.transactionID,
+                            amount: `${vm.refund}`,
+                            pwd: (yield saasConfig.api.getPrivateConfig(saasConfig.config.appName, 'glitter_finance')).response.result[0]['value'].ut_credit_card.pwd
+                        }, () => {
+                            dialog.dataLoading({
+                                visible: false,
+                            });
+                            gvc.closeDialog();
+                        });
+                    })), '退刷'),
+                ].join('');
+            },
+        });
+    }
+}

package/lowcode/cms-plugin/pos-pages/credit-card.ts

@@ -0,0 +1,114 @@
+import { GVC } from '../../glitterBundle/GVController.js';
+import { BgWidget } from '../../backend-manager/bg-widget.js';
+import { ShareDialog } from '../../glitterBundle/dialog/ShareDialog.js';
+import { PosFunction } from './pos-function.js';
+
+const html = String.raw;
+
+export class CreditCard {
+  public static refundView(gvc: GVC) {
+    const vm = {
+      orderID: '',
+      transactionID: '',
+      refund: '',
+    };
+    BgWidget.settingDialog({
+      gvc: gvc,
+      title: '信用卡刷退',
+      innerHTML: (gvc) => {
+        return `<div>${[
+          BgWidget.editeInput({
+            title: '訂單編號',
+            gvc: gvc,
+            style:`background:white;`,
+            default: vm.orderID,
+            placeHolder: '請輸入訂單編號',
+            callback: text => {
+            },
+            onclick:()=>{
+              PosFunction.setMoney(gvc,vm.orderID , money => {
+                vm.orderID = `${money}`;
+                gvc.recreateView();
+              },'退款金額');
+            },
+            readonly:true
+          }),
+          BgWidget.editeInput({
+            title: '金流編號',
+            gvc: gvc,
+            style:`background:white;`,
+            default: vm.transactionID,
+            placeHolder: '請輸入金流編號',
+            callback: text => {
+             
+            },
+            onclick:()=>{
+              PosFunction.setMoney(gvc, vm.transactionID, money => {
+                vm.transactionID = `${money}`;
+                gvc.recreateView();
+              },'金流編號');
+            },
+            readonly:true
+          }),
+          BgWidget.editeInput({
+            title: '退款金額',
+            gvc: gvc,
+            style:`background:white;`,
+            default: `${vm.refund}`,
+            placeHolder: '請輸入退款金額',
+            callback: text => {
+
+            },
+            onclick:()=>{
+              PosFunction.setMoney(gvc, vm.refund, money => {
+                vm.refund = `${money}`;
+                gvc.recreateView();
+              },'退款金額');
+            },
+            readonly:true
+          })
+        ].join('')}</div>`;
+      },
+      footer_html: gvc => {
+
+        return [
+          BgWidget.save(
+            gvc.event(() => {
+              gvc.glitter.runJsInterFace('toCreditCardHistory', {}, () => {});
+            }),
+            '查詢刷卡紀錄'
+          ),
+          BgWidget.danger(
+            gvc.event(async () => {
+              const dialog = new ShareDialog(gvc.glitter);
+              dialog.dataLoading({
+                visible: true,
+              });
+              const saasConfig: {
+                config: any;
+                api: any;
+              } = (window as any).parent.saasConfig;
+              gvc.glitter.runJsInterFace(
+                'CreditCardRefund',
+                {
+                  order_id: vm.orderID,
+                  transaction_id: vm.transactionID,
+                  amount:`${vm.refund}`,
+                  pwd:(await saasConfig.api.getPrivateConfig(saasConfig.config.appName, 'glitter_finance')).response.result[0]['value'].ut_credit_card.pwd
+                },
+                () => {
+
+                  dialog.dataLoading({
+                    visible: false,
+                  });
+                  gvc.closeDialog()
+                }
+              );
+            }),
+            '退刷'
+          ),
+        ].join('');
+      },
+    });
+  }
+}

package/lowcode/cms-plugin/pos-pages/payment-function.js

@@ -110,27 +110,29 @@ export class PaymentFunction {
                     orderID: orderDetail.orderID,
                     pwd: pwd,
                 }, (res) => {
-                    if (res.result) {
+                    var _a;
+                    const response = JSON.parse(res.result.data);
+                    if (response.code === "250") {
                         gvc.closeDialog();
                         callback(true);
                     }
                     else {
                         gvc.closeDialog();
-                        callback(false);
-                        dialog.errorMessage({ text: '交易失敗' });
+                        dialog.errorMessage({ text: `交易失敗，失敗原因:${(_a = response.msg) !== null && _a !== void 0 ? _a : ''}` });
                     }
                 });
             }
             else if (ConnectionMode.on_connected_device) {
                 gvc.glitter.share.credit_card_callback = (res) => {
-                    if (res.result) {
+                    var _a;
+                    const response = JSON.parse(res.result.data);
+                    if (response.code === "250") {
                         gvc.closeDialog();
                         callback(true);
                     }
                     else {
                         gvc.closeDialog();
-                        callback(false);
-                        dialog.errorMessage({ text: '交易失敗' });
+                        dialog.errorMessage({ text: `交易失敗，失敗原因:${(_a = response.msg) !== null && _a !== void 0 ? _a : ''}` });
                     }
                 };
                 ConnectionMode.sendCommand({

package/lowcode/cms-plugin/pos-pages/payment-function.ts

@@ -116,32 +116,33 @@ export class PaymentFunction {
                             pwd: pwd,
                         },
                         (res: any) => {
-                            if (res.result) {
+                           const response=JSON.parse(res.result.data);
+                            if (response.code === "250" ) {
                                 gvc.closeDialog();
                                 callback(true);
                             } else {
                                 gvc.closeDialog();
-                                callback(false);
-                                dialog.errorMessage({ text: '交易失敗' });
+                                // callback(false);
+                                dialog.errorMessage({ text: `交易失敗，失敗原因:${response.msg ?? ''}` });
                             }
                         }
                     );
                 } else if (ConnectionMode.on_connected_device) {
                     gvc.glitter.share.credit_card_callback = (res: any) => {
-                        if (res.result) {
-                            gvc.closeDialog();
-                            callback(true);
-                        } else {
-                            gvc.closeDialog();
-                            callback(false);
-                            dialog.errorMessage({ text: '交易失敗' });
-                        }
+                      const response=JSON.parse(res.result.data);
+                      if (response.code === "250" ) {
+                        gvc.closeDialog();
+                        callback(true);
+                      } else {
+                        gvc.closeDialog();
+                        dialog.errorMessage({ text: `交易失敗，失敗原因:${response.msg ?? ''}` });
+                      }
                     };
                     ConnectionMode.sendCommand({
                         cmd: 'credit_card',
                         amount: `${total}`,
                         memo: `訂單ID:${orderDetail.orderID}`,
-                      orderID:orderDetail.orderID,
+                        orderID:orderDetail.orderID,
                         pwd: pwd,
                     });
                 } else {

package/lowcode/cms-plugin/pos-pages/payment-page.js

@@ -2197,11 +2197,16 @@ export class PaymentPage {
                     >
                       <input
                         class="form-control h-100"
-                        style="border: none;"
+                        style="border: none;background: white;"
                         placeholder="請輸入統一編號"
-                        oninput="${gvc.event((e, event) => {
-                                c_vm.value = e.value;
+                        value="${c_vm.value}"
+                        onclick="${gvc.event(() => {
+                                PosFunction.setMoney(gvc, c_vm.value || '0', (text) => {
+                                    c_vm.value = `${text}`;
+                                    gvc.recreateView();
+                                }, '統一編號');
                             })}"
+                        readonly
                       />
                       <div class="flex-fill"></div>
                       <div

package/lowcode/cms-plugin/pos-pages/payment-page.ts

@@ -2390,11 +2390,16 @@ export class PaymentPage {
                     >
                       <input
                         class="form-control h-100"
-                        style="border: none;"
+                        style="border: none;background: white;"
                         placeholder="請輸入統一編號"
-                        oninput="${gvc.event((e, event) => {
-                          c_vm.value = e.value;
+                        value="${c_vm.value}"
+                        onclick="${gvc.event(() => {
+                          PosFunction.setMoney(gvc,c_vm.value || '0',(text)=>{
+                            c_vm.value=`${text}`
+                            gvc.recreateView()
+                          },'統一編號')
                         })}"
+                        readonly
                       />
                       <div class="flex-fill"></div>
                       <div

package/lowcode/cms-plugin/pos-pages/pos-function.ts

@@ -476,7 +476,7 @@ export class PosFunction {
   }
 
   // SetMoney
-  public static setMoney(gvc: GVC, def: number, callback: (money: number) => void, title?: string) {
+  public static setMoney(gvc: GVC, def: string|number, callback: (money: number) => void, title?: string) {
     gvc.glitter.innerDialog(gvc => {
       const c_vm = {
         id: gvc.glitter.getUUID(),

package/lowcode/cms-plugin/shopping-finance-setting.js

@@ -231,16 +231,17 @@ export class ShoppingFinanceSetting {
                                 .map(dd => {
                                 var _a;
                                 keyData[dd.key] = (_a = keyData[dd.key]) !== null && _a !== void 0 ? _a : {};
-                                return html ` <div class="col-12 col-lg-3 col-md-4 p-0 p-md-2">
+                                return html ` <div class="col-12 col-xl-3 col-md-4 p-0 p-md-2">
                           <div
                             class="w-100 position-relative main-card"
                             style="padding: 24px 32px; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: inline-flex;"
                           >
-                            <div class="position-absolute fw-500" style="cursor:pointer;right:15px;top:15px;">
+                            <div class="position-absolute fw-500" style="cursor:pointer;right:0px;top:0px;">
                               ${BgWidget.customButton({
                                     button: {
                                         color: 'gray',
                                         size: 'sm',
+                                        style: `border-top-left-radius: 0px !important;border-bottom-right-radius: 0px !important;`
                                     },
                                     text: {
                                         name: '金流設定',
@@ -620,19 +621,20 @@ export class ShoppingFinanceSetting {
                   <div class="row">
                     ${offlinePayArray
                                 .map((dd) => {
-                                return html ` <div class="col-12 col-lg-3 col-md-4 p-0 p-md-2">
+                                return html ` <div class="col-12 col-xl-3 col-md-4 p-0 p-md-2">
                           <div
                             class="w-100 position-relative main-card"
                             style="padding: 24px 32px; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: inline-flex;"
                           >
                             <div
                               class="position-absolute fw-500 ${dd.hide_setting ? `d-none` : ``}"
-                              style="cursor:pointer;right:15px;top:15px;"
+                              style="cursor:pointer;right:0px;top:0px;"
                             >
                               ${BgWidget.customButton({
                                     button: {
                                         color: 'gray',
                                         size: 'sm',
+                                        style: `border-top-left-radius: 0px !important;border-bottom-right-radius: 0px !important;`
                                     },
                                     text: {
                                         name: '金流設定',
@@ -711,7 +713,7 @@ export class ShoppingFinanceSetting {
                             })
                                 .join('')}
                     <div
-                      class="col-12 col-lg-3 col-md-4 p-0 p-md-2"
+                      class="col-12 col-xl-3 col-md-4 p-0 p-md-2"
                       style="cursor: pointer;"
                       onclick="${gvc.event(() => {
                                 updateCustomFinance({ function: 'plus' });
@@ -740,16 +742,17 @@ export class ShoppingFinanceSetting {
                     ${PaymentConfig.onlinePay
                                 .filter(item => item.type === 'pos')
                                 .map(dd => {
-                                return html ` <div class="col-12 col-lg-3 col-md-4 p-0 p-md-2">
+                                return html ` <div class="col-12 col-xl-3 col-md-4 p-0 p-md-2">
                           <div
                             class="w-100 position-relative main-card"
                             style="padding: 24px 32px; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: inline-flex;"
                           >
-                            <div class="position-absolute fw-500" style="cursor:pointer;right:15px;top:15px;">
+                            <div class="position-absolute fw-500" style="cursor:pointer;right:0px;top:0px;">
                               ${BgWidget.customButton({
                                     button: {
                                         color: 'gray',
                                         size: 'sm',
+                                        style: `border-top-left-radius: 0px !important;border-bottom-right-radius: 0px !important;`
                                     },
                                     text: {
                                         name: '金流設定',
@@ -2232,7 +2235,7 @@ export class ShoppingFinanceSetting {
                                         ]
                                             .map(dd => {
                                             return html `
-                          <div class="col-12 col-lg-3 col-md-4 p-0 p-md-2">
+                          <div class="col-12 col-xl-3 col-md-4 p-0 p-md-2">
                             <div
                               class="w-100 position-relative main-card"
                               style="padding: 24px 32px; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: inline-flex;"

package/lowcode/cms-plugin/shopping-finance-setting.ts

@@ -277,16 +277,17 @@ export class ShoppingFinanceSetting {
                       .filter(item => item.type !== 'pos')
                       .map(dd => {
                         keyData[dd.key] = keyData[dd.key] ?? {};
-                        return html` <div class="col-12 col-lg-3 col-md-4 p-0 p-md-2">
+                        return html` <div class="col-12 col-xl-3 col-md-4 p-0 p-md-2">
                           <div
                             class="w-100 position-relative main-card"
                             style="padding: 24px 32px; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: inline-flex;"
                           >
-                            <div class="position-absolute fw-500" style="cursor:pointer;right:15px;top:15px;">
+                            <div class="position-absolute fw-500" style="cursor:pointer;right:0px;top:0px;">
                               ${BgWidget.customButton({
                                 button: {
                                   color: 'gray',
                                   size: 'sm',
+                                  style:`border-top-left-radius: 0px !important;border-bottom-right-radius: 0px !important;`
                                 },
                                 text: {
                                   name: '金流設定',
@@ -682,19 +683,20 @@ export class ShoppingFinanceSetting {
                   <div class="row">
                     ${offlinePayArray
                       .map((dd: any) => {
-                        return html` <div class="col-12 col-lg-3 col-md-4 p-0 p-md-2">
+                        return html` <div class="col-12 col-xl-3 col-md-4 p-0 p-md-2">
                           <div
                             class="w-100 position-relative main-card"
                             style="padding: 24px 32px; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: inline-flex;"
                           >
                             <div
                               class="position-absolute fw-500 ${dd.hide_setting ? `d-none` : ``}"
-                              style="cursor:pointer;right:15px;top:15px;"
+                              style="cursor:pointer;right:0px;top:0px;"
                             >
                               ${BgWidget.customButton({
                                 button: {
                                   color: 'gray',
                                   size: 'sm',
+                                  style:`border-top-left-radius: 0px !important;border-bottom-right-radius: 0px !important;`
                                 },
                                 text: {
                                   name: '金流設定',
@@ -780,7 +782,7 @@ export class ShoppingFinanceSetting {
                       })
                       .join('')}
                     <div
-                      class="col-12 col-lg-3 col-md-4 p-0 p-md-2"
+                      class="col-12 col-xl-3 col-md-4 p-0 p-md-2"
                       style="cursor: pointer;"
                       onclick="${gvc.event(() => {
                         updateCustomFinance({ function: 'plus' });
@@ -811,16 +813,17 @@ export class ShoppingFinanceSetting {
                     ${PaymentConfig.onlinePay
                       .filter(item => item.type === 'pos')
                       .map(dd => {
-                        return html` <div class="col-12 col-lg-3 col-md-4 p-0 p-md-2">
+                        return html` <div class="col-12 col-xl-3 col-md-4 p-0 p-md-2">
                           <div
                             class="w-100 position-relative main-card"
                             style="padding: 24px 32px; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: inline-flex;"
                           >
-                            <div class="position-absolute fw-500" style="cursor:pointer;right:15px;top:15px;">
+                            <div class="position-absolute fw-500" style="cursor:pointer;right:0px;top:0px;">
                               ${BgWidget.customButton({
                                 button: {
                                   color: 'gray',
                                   size: 'sm',
+                                  style:`border-top-left-radius: 0px !important;border-bottom-right-radius: 0px !important;`
                                 },
                                 text: {
                                   name: '金流設定',
@@ -2506,7 +2509,7 @@ export class ShoppingFinanceSetting {
                     ]
                       .map(dd => {
                         return html`
-                          <div class="col-12 col-lg-3 col-md-4 p-0 p-md-2">
+                          <div class="col-12 col-xl-3 col-md-4 p-0 p-md-2">
                             <div
                               class="w-100 position-relative main-card"
                               style="padding: 24px 32px; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: inline-flex;"