ts-glitter 22.5.7 → 22.5.8

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

@@ -63,6 +63,24 @@ interface StockOptionsItem extends OptionsItem {
   stock: number;
 }
 
+export interface CustomButtonObject {
+  button: {
+    color: 'black' | 'gray' | 'snow';
+    size: 'sm' | 'md' | 'lg';
+    class?: string;
+    style?: string;
+  };
+  text: {
+    name: string;
+    class?: string;
+    style?: string;
+  };
+  event: string;
+  icon?: {
+    name: string;
+  };
+}
+
 export interface OptionsItem {
   key: string;
   value: string;
@@ -397,20 +415,28 @@ export class BgWidget {
   }
 
   static checkInput(gvc: GVC, def: boolean, callback: (value: boolean) => void) {
-    const id = gvc.glitter.getUUID()
-    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 => {
-      callback(def);
-      gvc.notifyDataChange(id)
-    })}"></div>`;
+    const id = gvc.glitter.getUUID();
+    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 => {
+        callback(def);
+        gvc.notifyDataChange(id);
+      })}"
+    ></div>`;
     return gvc.bindView({
-      bind:id,
-      view:()=>{
-        return (def)?trueImg:falseImg
-      },divCreate:{}
+      bind: id,
+      view: () => {
+        return def ? trueImg : falseImg;
+      },
+      divCreate: {},
     });
   }
 
@@ -952,7 +978,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`
@@ -2138,6 +2164,7 @@ ${obj.default ?? ''}</textarea
       header: Tool.randomString(6),
       headerCell: Tool.randomString(6),
       tr: Tool.randomString(6),
+      table: glitter.getUUID(),
       textClass: Tool.randomString(6),
     };
 
@@ -2220,13 +2247,14 @@ ${obj.default ?? ''}</textarea
               const checkboxSelector = result ? 'i.fa-square' : 'i.fa-square-check';
 
               vm.originalData.forEach((item: any, index: number) => {
-                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?.querySelector(checkboxSelector) as HTMLElement | null;
-
                 checkboxIcon?.click();
               });
 
-              gvc.notifyDataChange(ids.filter);
+              gvc.notifyDataChange([ids.filter, ids.table]);
               obj.itemSelect?.();
               changeHeaderStyle();
             }
@@ -2336,9 +2364,9 @@ ${obj.default ?? ''}</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,
@@ -2472,26 +2500,27 @@ ${obj.default ?? ''}</textarea
                 })}
                 <table class="table table-centered table-nowrap text-center table-hover" style="width: ${defWidth}px;">
                   <tbody>
-                    ${vm.tableData
-                      .map((dd, trIndex: number) => {
-                        return html` <tr
-                          class="${trIndex === 0 ? ids.tr : ''} ${dd.find(d3 => d3.tooltip)
-                            ? 'tr-tooltip-container'
-                            : ''}"
-                          onclick="${gvc.event((e, event) => {
-                            obj.rowClick && obj.rowClick(dd, trIndex, e, event);
-                          })}"
-                          onmouseover="${gvc.event(() => {
-                            $(`#${ids.pencil}${trIndex}`).removeClass('d-none');
-                          })}"
-                          onmouseout="${gvc.event(() => {
-                            $(`#${ids.pencil}${trIndex}`).addClass('d-none');
-                          })}"
-                        >
-                          ${dd
-                            .map((d3, tdIndex: number) => {
-                              const tdClass = Tool.randomString(5);
-                              const style = `
+                    <tbody class="${ids.table}">
+                      ${vm.tableData
+                        .map((dd, trIndex: number) => {
+                          return html` <tr
+                            class="${trIndex === 0 ? ids.tr : ''} ${dd.find(d3 => d3.tooltip)
+                              ? 'tr-tooltip-container'
+                              : ''}"
+                            onclick="${gvc.event((e, event) => {
+                              obj.rowClick && obj.rowClick(dd, trIndex, e, event);
+                            })}"
+                            onmouseover="${gvc.event(() => {
+                              $(`#${ids.pencil}${trIndex}`).removeClass('d-none');
+                            })}"
+                            onmouseout="${gvc.event(() => {
+                              $(`#${ids.pencil}${trIndex}`).addClass('d-none');
+                            })}"
+                          >
+                            ${dd
+                              .map((d3, tdIndex: number) => {
+                                const tdClass = Tool.randomString(5);
+                                const style = `
                                 border: none;
                                 vertical-align: middle;
                                 width: ${widthList[tdIndex]}px;
@@ -2499,48 +2528,51 @@ ${obj.default ?? ''}</textarea
                                 ${dd.length > 1 && tdIndex === dd.length - 1 ? 'border-radius: 0 10px 10px 0;' : ''}
                                 ${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}"` : ''}
+                                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()) : ''}"
                                 >
-                                  ${d3.value}
-                                </div>
-                                ${d3.tooltip ? html`<div class="td-tooltip">${d3.tooltip}</div>` : ''}
-                              </td>`;
-                            })
-                            .join('')}
-                        </tr>`;
-                      })
-                      .join('')}
+                                  <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>`;
+                        })
+                        .join('')}
+                    </tbody>
+                  
                   </tbody>
                 </table>
               </div>
               <div>
-                ${obj.hiddenPageSplit
-                  ? ''
-                  : ps.pageSplitV2(
-                      vm.pageSize,
-                      vm.page,
-                      page => {
-                        vm.tableData = [];
-                        vm.page = page;
-                        vm.loading = true;
-                        created.checkbox = false;
-                        obj.tabClick && obj.tabClick!!(vm);
-                        if (created.header && created.table) {
-                          gvc.notifyDataChange(ids.container);
-                        }
-                      },
-                      false
-                    )}
+                ${
+                  obj.hiddenPageSplit
+                    ? ''
+                    : ps.pageSplitV2(
+                        vm.pageSize,
+                        vm.page,
+                        page => {
+                          vm.tableData = [];
+                          vm.page = page;
+                          vm.loading = true;
+                          created.checkbox = false;
+                          obj.tabClick && obj.tabClick!!(vm);
+                          if (created.header && created.table) {
+                            gvc.notifyDataChange(ids.container);
+                          }
+                        },
+                        false
+                      )
+                }
               </div>`;
           } catch (e) {
             console.error(e);
@@ -2626,6 +2658,8 @@ ${obj.default ?? ''}</textarea
   }
 
   // 容器
+  static isPhone = () => document.body.offsetWidth < 768;
+
   static getContainerWidth = (obj?: { rate?: { web?: number; pad?: number; phone?: number } }) => {
     const clientWidth = document.body.clientWidth;
     const rateForWeb = obj && obj.rate && obj.rate.web ? obj.rate.web : 0.95;
@@ -2653,8 +2687,10 @@ ${obj.default ?? ''}</textarea
     }
   ) {
     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; ${obj?.style ?? ''}"
+      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;'} ${obj?.style ?? ''}"
     >
       ${htmlString}
     </div>`;
@@ -4145,7 +4181,7 @@ ${obj.default ?? ''}</textarea
             }
 
             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
@@ -4346,7 +4382,7 @@ ${obj.default ?? ''}</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">${obj.title ?? '產品列表'}</div>
                 <div class="flex-fill"></div>
                 <i
@@ -4479,7 +4515,7 @@ ${obj.default ?? ''}</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">${obj.title ?? '產品列表'}</div>
                 <div class="flex-fill"></div>
                 <i
@@ -4681,7 +4717,7 @@ ${obj.default ?? ''}</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">${obj.title ?? '產品列表'}</div>
                 <div class="flex-fill"></div>
                 <i
@@ -4835,7 +4871,7 @@ ${obj.default ?? ''}</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">${obj.title ?? '產品列表'}</div>
                   <div class="flex-fill"></div>
                   <i
@@ -4852,9 +4888,9 @@ ${obj.default ?? ''}</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;`} "
                     >
                       ${obj.innerHTML(gvc) ?? ''}
                     </div>
@@ -4901,7 +4937,7 @@ ${obj.default ?? ''}</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
@@ -5071,7 +5107,7 @@ ${obj.default ?? ''}</textarea
     return obj.gvc.glitter.innerDialog((gvc: GVC) => {
       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
@@ -5238,8 +5274,8 @@ ${obj.default ?? ''}</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) : (obj.title ?? '產品列表')}
@@ -5721,8 +5757,8 @@ ${obj.default ?? ''}</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">${obj.title ?? '圖片庫'}</div>
                 <div class="flex-fill"></div>

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

@@ -31,6 +31,7 @@ import { SaasOffer } from '../saas-offer.js';
 import { Language } from '../glitter-base/global/language.js';
 import { CreditCard } from './pos-pages/credit-card.js';
 import { BgWidget } from '../backend-manager/bg-widget.js';
+import { Tool } from '../modules/tool.js';
 const html = String.raw;
 export class POSSetting {
     static loginManager(gvc, mode, result) {
@@ -333,6 +334,9 @@ export class POSSetting {
         const gvc = obj.gvc;
         const data = obj.defaultData;
         const orderDetail = obj.orderDetail;
+        const vm = {
+            specs: [],
+        };
         let selectVariant = obj.selectVariant;
         let count = 1;
         function arraysEqual(arr1, arr2) {
@@ -345,6 +349,7 @@ export class POSSetting {
             product.content.specs.forEach((spec) => {
                 emptyArray.push(spec.option.find((opt) => opt.select == true).title);
             });
+            vm.specs = emptyArray;
             return product.content.variants.find((variant) => arraysEqual(variant.spec, emptyArray));
         }
         data.content.specs.map((dd, index) => {
@@ -352,23 +357,32 @@ export class POSSetting {
                 d1.select = index === 0;
             });
         });
+        const invisibleVariants = data.content.variants.filter((v) => v.invisible);
+        const visibleVariants = data.content.variants.filter((v) => !v.invisible);
         selectVariant = changeSelectVariant(data);
         obj.callback(selectVariant);
         gvc.glitter.innerDialog(gvc => {
             return gvc.bindView({
                 bind: 'productDialog',
                 view: () => {
-                    var _a;
+                    var _a, _b;
                     try {
                         selectVariant.preview_image = selectVariant.preview_image || [];
-                        selectVariant.stock = gvc.glitter.share.store_list.filter((dd) => {
+                        selectVariant.stock = gvc.glitter.share.store_list
+                            .filter((dd) => {
                             var _a;
-                            return (dd.id === POSSetting.config.where_store) || ((_a = gvc.glitter.share.store_list.find((dd) => {
-                                return dd.id === POSSetting.config.where_store;
-                            }).support_store) !== null && _a !== void 0 ? _a : []).includes(dd.id);
-                        }).map((d1) => {
+                            return (dd.id === POSSetting.config.where_store ||
+                                ((_a = gvc.glitter.share.store_list.find((dd) => {
+                                    return dd.id === POSSetting.config.where_store;
+                                }).support_store) !== null && _a !== void 0 ? _a : []).includes(dd.id));
+                        })
+                            .map((d1) => {
                             return selectVariant.stockList[d1.id].count;
-                        }).reduce((acc, val) => acc + val, 0);
+                        })
+                            .reduce((acc, val) => acc + val, 0);
+                        if (vm.specs.length === 0 || invisibleVariants.find((iv) => Tool.ObjCompare(iv.spec, vm.specs))) {
+                            vm.specs = (_a = visibleVariants === null || visibleVariants === void 0 ? void 0 : visibleVariants[0].spec) !== null && _a !== void 0 ? _a : [];
+                        }
                         return html ` <div
                 class="w-100 h-100 d-flex align-items-center justify-content-center"
                 onclick="${gvc.event(() => gvc.glitter.closeDiaLog())}"
@@ -390,7 +404,7 @@ export class POSSetting {
                             'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722936949034-default_image.jpg'}');"
                     ></div>
                     <div class="d-flex flex-column flex-fill justify-content-center">
-                      <div style="font-size: 24px;font-weight: 700;">${(_a = data.content.title) !== null && _a !== void 0 ? _a : 'no name'}</div>
+                      <div style="font-size: 24px;font-weight: 700;">${(_b = data.content.title) !== null && _b !== void 0 ? _b : 'no name'}</div>
                       <div style="font-size: 20px;font-weight: 500;margin-top: 8px;">
                         NT.${parseInt(selectVariant.sale_price, 10).toLocaleString()}
                       </div>
@@ -401,6 +415,9 @@ export class POSSetting {
                                     return '';
                                 }
                                 const productSpecs = data.content.specs;
+                                const invisibleVariants = data.content.variants
+                                    .filter((v) => v.invisible)
+                                    .map((v) => v.spec);
                                 return productSpecs
                                     .map((spec, index1) => {
                                     return html ` <div>
@@ -410,6 +427,11 @@ export class POSSetting {
                                 </h5>
                                 <div class="d-flex gap-2 flex-wrap">
                                   ${gvc.map(spec.option.map((opt, optIndex) => {
+                                        const cloneSpecs = vm.specs.slice();
+                                        cloneSpecs[index1] = opt.title;
+                                        if (invisibleVariants.find((iv) => Tool.ObjCompare(iv, cloneSpecs))) {
+                                            return '';
+                                        }
                                         return html ` <div
                                         class="spec-option ${spec.option[optIndex].select ? 'selected-option' : ''}"
                                         onclick="${gvc.event(() => {
@@ -551,7 +573,6 @@ export class POSSetting {
                                                             }
                                                             ApiUser.getPublicConfig('store_manager', 'manager').then((dd) => {
                                                                 var _a;
-                                                                console.log(`selectVariant===>`, selectVariant);
                                                                 if (dd.result && Array.isArray((_a = dd.response.value) === null || _a === void 0 ? void 0 : _a.list)) {
                                                                     dd.response.value.list.map((store) => {
                                                                         var _a, _b, _c;

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

@@ -23,6 +23,7 @@ import { SaasOffer } from '../saas-offer.js';
 import { Language } from '../glitter-base/global/language.js';
 import { CreditCard } from './pos-pages/credit-card.js';
 import { BgWidget } from '../backend-manager/bg-widget.js';
+import { Tool } from '../modules/tool.js';
 
 const html = String.raw;
 
@@ -384,6 +385,9 @@ export class POSSetting {
     const gvc = obj.gvc;
     const data = obj.defaultData;
     const orderDetail = obj.orderDetail;
+    const vm = {
+      specs: [] as any[],
+    };
     let selectVariant = obj.selectVariant;
 
     let count = 1;
@@ -398,15 +402,23 @@ export class POSSetting {
       product.content.specs.forEach((spec: any) => {
         emptyArray.push(spec.option.find((opt: any) => opt.select == true).title);
       });
+      vm.specs = emptyArray;
       return product.content.variants.find((variant: any) => arraysEqual(variant.spec, emptyArray));
     }
-    data.content.specs.map((dd:any,index:number)=>{
-      dd.option.map((d1:any,index:number)=>{
-        d1.select = index===0;
-      })
+
+    data.content.specs.map((dd: any, index: number) => {
+      dd.option.map((d1: any, index: number) => {
+        d1.select = index === 0;
+      });
     });
+
+    // 可顯示與不可顯示產品規格
+    const invisibleVariants = data.content.variants.filter((v: any) => v.invisible);
+    const visibleVariants = data.content.variants.filter((v: any) => !v.invisible);
+
     selectVariant = changeSelectVariant(data);
     obj.callback(selectVariant);
+
     gvc.glitter.innerDialog(
       gvc => {
         return gvc.bindView({
@@ -414,16 +426,26 @@ export class POSSetting {
           view: () => {
             try {
               selectVariant.preview_image = selectVariant.preview_image || [];
-              selectVariant.stock = gvc.glitter.share.store_list.filter((dd:any)=>{
-                return (dd.id===POSSetting.config.where_store) || (
-                  gvc.glitter.share.store_list.find((dd:any)=>{
-                    return dd.id === POSSetting.config.where_store;
-                  }).support_store ?? []
-                ).includes(dd.id);
-              }).map((d1:any)=>{
-                 return  selectVariant.stockList[d1.id].count
-                }).reduce((acc: any, val: any) => acc + val,0)
-
+              selectVariant.stock = gvc.glitter.share.store_list
+                .filter((dd: any) => {
+                  return (
+                    dd.id === POSSetting.config.where_store ||
+                    (
+                      gvc.glitter.share.store_list.find((dd: any) => {
+                        return dd.id === POSSetting.config.where_store;
+                      }).support_store ?? []
+                    ).includes(dd.id)
+                  );
+                })
+                .map((d1: any) => {
+                  return selectVariant.stockList[d1.id].count;
+                })
+                .reduce((acc: any, val: any) => acc + val, 0);
+
+              // 更新規格
+              if (vm.specs.length === 0 || invisibleVariants.find((iv: any) => Tool.ObjCompare(iv.spec, vm.specs))) {
+                vm.specs = visibleVariants?.[0].spec ?? [];
+              }
 
               return html` <div
                 class="w-100 h-100 d-flex align-items-center justify-content-center"
@@ -466,7 +488,11 @@ export class POSSetting {
                               'zh-TW': string;
                             };
                           }[] = data.content.specs;
-                       
+
+                          const invisibleVariants = data.content.variants
+                            .filter((v: any) => v.invisible)
+                            .map((v: any) => v.spec);
+
                           return productSpecs
                             .map((spec, index1) => {
                               return html` <div>
@@ -477,6 +503,14 @@ export class POSSetting {
                                 <div class="d-flex gap-2 flex-wrap">
                                   ${gvc.map(
                                     spec.option.map((opt: any, optIndex: number) => {
+                                      // 排除不可顯示的規格選項
+                                      const cloneSpecs = vm.specs.slice();
+                                      cloneSpecs[index1] = opt.title;
+
+                                      if (invisibleVariants.find((iv: any) => Tool.ObjCompare(iv, cloneSpecs))) {
+                                        return '';
+                                      }
+
                                       return html` <div
                                         class="spec-option ${spec.option[optIndex].select ? 'selected-option' : ''}"
                                         onclick="${gvc.event(() => {
@@ -624,7 +658,6 @@ export class POSSetting {
                                                 }
 
                                                 ApiUser.getPublicConfig('store_manager', 'manager').then((dd: any) => {
-                                                  console.log(`selectVariant===>`,selectVariant)
                                                   if (dd.result && Array.isArray(dd.response.value?.list)) {
                                                     dd.response.value.list.map((store: any) => {
                                                       const n = selectVariant.stockList?.[store.id]?.count ?? 0;