ts-glitter 22.4.6 → 22.4.9

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

@@ -20,6 +20,7 @@ import { QuestionInfo } from './module/question-info.js';
 import { ProductAi } from './ai-generator/product-ai.js';
 import { ShoppingProductSetting } from './shopping-product-setting.js';
 const html = String.raw;
+const css = String.raw;
 export class ShoppingSettingBasic {
     static updateVariants(gvc, postMD, shipment_config, variantsViewID, obj) {
         const specs = {};
@@ -79,21 +80,6 @@ export class ShoppingSettingBasic {
                 });
             }
         });
-        postMD.variants = postMD.variants.filter(variant => {
-            let pass = true;
-            let index = 0;
-            for (const b of variant.spec) {
-                if (!postMD.specs[index] ||
-                    !postMD.specs[index].option.find((dd) => {
-                        return dd.title === b;
-                    })) {
-                    pass = false;
-                    break;
-                }
-                index++;
-            }
-            return pass && variant.spec.length === postMD.specs.length;
-        });
         if (postMD.variants.length === 0) {
             postMD.variants.push({
                 show_understocking: 'true',
@@ -116,6 +102,27 @@ export class ShoppingSettingBasic {
                 preview_image: '',
             });
         }
+        else {
+            if (postMD.variants.length === 1) {
+            }
+            else {
+                postMD.variants = postMD.variants.filter(variant => {
+                    let pass = true;
+                    let index = 0;
+                    for (const b of variant.spec) {
+                        if (!postMD.specs[index] ||
+                            !postMD.specs[index].option.find((dd) => {
+                                return dd.title === b;
+                            })) {
+                            pass = false;
+                            break;
+                        }
+                        index++;
+                    }
+                    return pass && variant.spec.length === postMD.specs.length;
+                });
+            }
+        }
         postMD.variants.map((dd) => {
             dd.checked = undefined;
             return dd;
@@ -146,6 +153,16 @@ export class ShoppingSettingBasic {
         const variantsViewID = gvc.glitter.getUUID();
         const dialog = new ShareDialog(gvc.glitter);
         const sel_lan = () => vm.language;
+        const section_ID = {
+            reserve_locations: gvc.glitter.getUUID(),
+            dialog_location_main: gvc.glitter.getUUID(),
+            dialog_location_list: gvc.glitter.getUUID(),
+            store_product_config_panel: gvc.glitter.getUUID(),
+        };
+        const loading = {
+            reserve_locations: true,
+        };
+        let stockList = [];
         let selectFunRow = false;
         let createPage = { page: 'add' };
         function checkSpecSingle() {
@@ -193,750 +210,914 @@ export class ShoppingSettingBasic {
                 }
             });
         }
-        ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
-        const cat_title = (() => {
-            switch (postMD.product_category) {
-                case 'commodity':
-                    return '商品';
-                case 'course':
-                    return '課程';
-                case 'kitchen':
-                    return '餐飲組合';
-                default:
-                    return '商品';
-            }
-        })();
-        return BgWidget.container1x2({
-            html: [
-                BgWidget.mainCard(html `
-            <div class="d-flex flex-column guide5-4">
-              <div style="font-weight: 700;">
-                ${cat_title}名稱 ${BgWidget.requiredStar()}
-                ${BgWidget.languageInsignia(vm.language, 'margin-left:5px;')}
-              </div>
-              ${BgWidget.editeInput({
-                    gvc: gvc,
-                    title: '',
-                    type: 'text',
-                    default: (_a = language_data.title) !== null && _a !== void 0 ? _a : '',
-                    placeHolder: `請輸入${cat_title}名稱`,
-                    callback: text => {
-                        if (language_data.seo.domain === language_data.title) {
-                            language_data.seo.domain = text;
-                        }
-                        language_data.title = text;
-                        gvc.notifyDataChange('seo');
-                    },
-                })}
-            </div>
-          `),
-                BgWidget.mainCard([
-                    obj.gvc.bindView(() => {
-                        var _a, _b;
-                        const vm = {
-                            id: obj.gvc.glitter.getUUID(),
-                            type: 'product-detail',
-                            documents: [],
-                        };
-                        language_data.content_array = (_a = language_data.content_array) !== null && _a !== void 0 ? _a : [];
-                        language_data.content_json = (_b = language_data.content_json) !== null && _b !== void 0 ? _b : [];
-                        return {
-                            bind: vm.id,
-                            view: () => __awaiter(this, void 0, void 0, function* () {
-                                return html ` <div class="d-flex align-items-center justify-content-end">
-                        <div class="d-flex align-items-center gap-2">
-                          <div style="color: #393939; font-weight: 700;">
-                            ${cat_title}簡述 ${BgWidget.languageInsignia(sel_lan(), 'margin-left:5px;')}
-                          </div>
-                        </div>
-                        <div class="flex-fill"></div>
+        function drawShortDescriptionRichText() {
+            return BgWidget.mainCard([
+                obj.gvc.bindView(() => {
+                    var _a, _b;
+                    const vm = {
+                        id: obj.gvc.glitter.getUUID(),
+                        type: 'product-detail',
+                        documents: [],
+                    };
+                    language_data.content_array = (_a = language_data.content_array) !== null && _a !== void 0 ? _a : [];
+                    language_data.content_json = (_b = language_data.content_json) !== null && _b !== void 0 ? _b : [];
+                    return {
+                        bind: vm.id,
+                        view: () => __awaiter(this, void 0, void 0, function* () {
+                            return html ` <!--                  繪製商品的簡短描述區塊    -->
+                  <div class="d-flex align-items-center justify-content-end">
+                    <div class="d-flex align-items-center gap-2">
+                      <div style="color: #393939; font-weight: 700;">
+                        ${cat_title}簡述 ${BgWidget.languageInsignia(sel_lan(), 'margin-left:5px;')}
                       </div>
-                      ${BgWidget.grayNote(`將顯示於${cat_title}名稱下方，快速呈現${cat_title}重點資訊，建議精簡`)}
-                      <div class="my-3">
-                        ${gvc.bindView((() => {
-                                    var _a;
-                                    const id = gvc.glitter.getUUID();
-                                    language_data.sub_title = (_a = language_data.sub_title) !== null && _a !== void 0 ? _a : '';
-                                    return {
-                                        bind: id,
-                                        view: () => {
-                                            return html ` <div
-                                  class="d-flex justify-content-between align-items-center gap-3 mb-1"
-                                  style="cursor: pointer;"
-                                  onclick="${gvc.event(() => {
-                                                const originContent = `${language_data.sub_title}`;
-                                                BgWidget.fullDialog({
-                                                    gvc: gvc,
-                                                    title: gvc2 => {
-                                                        return html `<div class="d-flex align-items-center" style="gap:10px;">
-                                          ${`${cat_title}簡述` +
-                                                            BgWidget.aiChatButton({
-                                                                gvc: gvc2,
-                                                                select: 'writer',
-                                                                click: () => {
-                                                                    ProductAi.generateRichText(gvc, text => {
-                                                                        language_data.sub_title += text;
-                                                                        gvc.notifyDataChange(vm.id);
-                                                                        gvc2.recreateView();
-                                                                    });
-                                                                },
-                                                            })}
-                                        </div>`;
-                                                    },
-                                                    innerHTML: gvc2 => {
-                                                        return html ` <div>
-                                          ${EditorElem.richText({
+                    </div>
+                    <div class="flex-fill"></div>
+                  </div>
+                  ${BgWidget.grayNote(`將顯示於${cat_title}名稱下方，快速呈現${cat_title}重點資訊，建議精簡`)}
+                  <div class="my-3">
+                    ${gvc.bindView((() => {
+                                var _a;
+                                const id = gvc.glitter.getUUID();
+                                language_data.sub_title = (_a = language_data.sub_title) !== null && _a !== void 0 ? _a : '';
+                                return {
+                                    bind: id,
+                                    view: () => {
+                                        return html ` <div
+                              class="d-flex justify-content-between align-items-center gap-3 mb-1"
+                              style="cursor: pointer;"
+                              onclick="${gvc.event(() => {
+                                            const originContent = `${language_data.sub_title}`;
+                                            BgWidget.fullDialog({
+                                                gvc: gvc,
+                                                title: gvc2 => {
+                                                    return html ` <div class="d-flex align-items-center" style="gap:10px;">
+                                      ${`${cat_title}簡述` +
+                                                        BgWidget.aiChatButton({
                                                             gvc: gvc2,
-                                                            def: language_data.sub_title,
-                                                            setHeight: '100vh',
-                                                            hiddenBorder: true,
-                                                            insertImageEvent: editor => {
-                                                                const mark = `{{${Tool.randomString(8)}}}`;
-                                                                editor.selection.setAtEnd(editor.$el.get(0));
-                                                                editor.html.insert(mark);
-                                                                editor.undo.saveStep();
-                                                                imageLibrary.selectImageLibrary(gvc, urlArray => {
-                                                                    if (urlArray.length > 0) {
-                                                                        const imgHTML = urlArray
-                                                                            .map(url => {
-                                                                            return html ` <img src="${url.data}" />`;
-                                                                        })
-                                                                            .join('');
-                                                                        editor.html.set(editor.html
-                                                                            .get(0)
-                                                                            .replace(mark, html ` <div class="d-flex flex-column">${imgHTML}</div>`));
-                                                                        editor.undo.saveStep();
-                                                                    }
-                                                                    else {
-                                                                        dialog.errorMessage({ text: '請選擇至少一張圖片' });
-                                                                    }
-                                                                }, html ` <div
-                                                  class="d-flex flex-column"
-                                                  style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;"
-                                                >
-                                                  圖片庫
-                                                </div>`, {
-                                                                    mul: true,
-                                                                    cancelEvent: () => {
-                                                                        editor.html.set(editor.html.get(0).replace(mark, ''));
-                                                                        editor.undo.saveStep();
-                                                                    },
+                                                            select: 'writer',
+                                                            click: () => {
+                                                                ProductAi.generateRichText(gvc, text => {
+                                                                    language_data.sub_title += text;
+                                                                    gvc.notifyDataChange(vm.id);
+                                                                    gvc2.recreateView();
                                                                 });
                                                             },
-                                                            callback: text => {
-                                                                language_data.sub_title = text;
-                                                            },
-                                                            rich_height: `calc(${window.parent.innerHeight}px - 70px - 58px - 49px - 64px - 40px + ${document.body.clientWidth < 800 ? `70` : `0`}px)`,
                                                         })}
-                                        </div>`;
-                                                    },
-                                                    footer_html: (gvc2) => {
-                                                        return [
-                                                            BgWidget.cancel(gvc2.event(() => {
-                                                                dialog.checkYesOrNot({
-                                                                    text: '確定要取消並關閉嗎？',
-                                                                    callback: bool => {
-                                                                        if (bool) {
-                                                                            language_data.sub_title = originContent;
-                                                                            gvc2.closeDialog();
-                                                                        }
-                                                                    },
-                                                                });
-                                                            })),
-                                                            BgWidget.save(gvc2.event(() => {
-                                                                dialog.checkYesOrNot({
-                                                                    text: '確定要儲存並更新嗎？',
-                                                                    callback: bool => {
-                                                                        if (bool) {
-                                                                            gvc2.closeDialog();
-                                                                            gvc.notifyDataChange(id);
-                                                                        }
-                                                                    },
-                                                                });
-                                                            })),
-                                                        ].join('');
-                                                    },
-                                                    closeCallback: () => {
-                                                        language_data.sub_title = originContent;
-                                                    },
-                                                });
-                                            })}"
-                                >
-                                  ${(() => {
-                                                const text = gvc.glitter.utText.removeTag(language_data.sub_title);
-                                                return BgWidget.richTextView(Tool.truncateString(text, 100));
-                                            })()}
-                                </div>`;
-                                        },
-                                    };
-                                })())}
-                      </div>`;
-                            }),
-                        };
-                    }),
-                ].join(BgWidget.mbContainer(12))),
-                obj.postMD.productType.giveaway
-                    ? ''
-                    : BgWidget.mainCard([
-                        obj.gvc.bindView(() => {
-                            const vm_this = vm;
-                            return (() => {
-                                var _a, _b;
-                                const vm = {
-                                    id: obj.gvc.glitter.getUUID(),
-                                    type: 'product-detail',
-                                    loading: true,
-                                    documents: [],
+                                    </div>`;
+                                                },
+                                                innerHTML: gvc2 => {
+                                                    return html ` <div>
+                                      ${EditorElem.richText({
+                                                        gvc: gvc2,
+                                                        def: language_data.sub_title,
+                                                        setHeight: '100vh',
+                                                        hiddenBorder: true,
+                                                        insertImageEvent: editor => {
+                                                            const mark = `{{${Tool.randomString(8)}}}`;
+                                                            editor.selection.setAtEnd(editor.$el.get(0));
+                                                            editor.html.insert(mark);
+                                                            editor.undo.saveStep();
+                                                            imageLibrary.selectImageLibrary(gvc, urlArray => {
+                                                                if (urlArray.length > 0) {
+                                                                    const imgHTML = urlArray
+                                                                        .map(url => {
+                                                                        return html ` <img src="${url.data}" />`;
+                                                                    })
+                                                                        .join('');
+                                                                    editor.html.set(editor.html
+                                                                        .get(0)
+                                                                        .replace(mark, html ` <div class="d-flex flex-column">${imgHTML}</div>`));
+                                                                    editor.undo.saveStep();
+                                                                }
+                                                                else {
+                                                                    dialog.errorMessage({ text: '請選擇至少一張圖片' });
+                                                                }
+                                                            }, html ` <div
+                                              class="d-flex flex-column"
+                                              style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;"
+                                            >
+                                              圖片庫
+                                            </div>`, {
+                                                                mul: true,
+                                                                cancelEvent: () => {
+                                                                    editor.html.set(editor.html.get(0).replace(mark, ''));
+                                                                    editor.undo.saveStep();
+                                                                },
+                                                            });
+                                                        },
+                                                        callback: text => {
+                                                            language_data.sub_title = text;
+                                                        },
+                                                        rich_height: `calc(${window.parent.innerHeight}px - 70px - 58px - 49px - 64px - 40px + ${document.body.clientWidth < 800 ? `70` : `0`}px)`,
+                                                    })}
+                                    </div>`;
+                                                },
+                                                footer_html: (gvc2) => {
+                                                    return [
+                                                        BgWidget.cancel(gvc2.event(() => {
+                                                            language_data.sub_title = originContent;
+                                                            gvc2.closeDialog();
+                                                        })),
+                                                        BgWidget.save(gvc2.event(() => {
+                                                            gvc2.closeDialog();
+                                                            gvc.notifyDataChange(id);
+                                                        })),
+                                                    ].join('');
+                                                },
+                                                closeCallback: () => {
+                                                    language_data.sub_title = originContent;
+                                                },
+                                            });
+                                        })}"
+                            >
+                              ${(() => {
+                                            const text = gvc.glitter.utText.removeTag(language_data.sub_title);
+                                            return BgWidget.richTextView(Tool.truncateString(text, 100));
+                                        })()}
+                            </div>`;
+                                    },
                                 };
-                                language_data.content_array = (_a = language_data.content_array) !== null && _a !== void 0 ? _a : [];
-                                language_data.content_json = (_b = language_data.content_json) !== null && _b !== void 0 ? _b : [];
-                                if (!vm_this.content_detail) {
-                                    ApiUser.getPublicConfig('text-manager', 'manager').then((data) => {
-                                        vm.documents = data.response.value;
-                                        if (!Array.isArray(vm.documents)) {
-                                            vm.documents = [];
-                                        }
-                                        vm_this.content_detail = vm.documents;
-                                        vm.loading = false;
-                                        gvc.notifyDataChange(vm.id);
-                                    });
-                                }
-                                else {
-                                    vm.documents = vm_this.content_detail;
+                            })())}
+                  </div>`;
+                        }),
+                    };
+                }),
+            ].join(BgWidget.mbContainer(12)));
+        }
+        function drawDetailDescriptionRichText() {
+            return obj.postMD.productType.giveaway
+                ? ''
+                : BgWidget.mainCard([
+                    obj.gvc.bindView(() => {
+                        const vm_this = vm;
+                        return (() => {
+                            var _a, _b;
+                            const vm = {
+                                id: obj.gvc.glitter.getUUID(),
+                                type: 'product-detail',
+                                loading: true,
+                                documents: [],
+                            };
+                            language_data.content_array = (_a = language_data.content_array) !== null && _a !== void 0 ? _a : [];
+                            language_data.content_json = (_b = language_data.content_json) !== null && _b !== void 0 ? _b : [];
+                            if (!vm_this.content_detail) {
+                                ApiUser.getPublicConfig('text-manager', 'manager').then((data) => {
+                                    vm.documents = data.response.value;
+                                    if (!Array.isArray(vm.documents)) {
+                                        vm.documents = [];
+                                    }
+                                    vm_this.content_detail = vm.documents;
                                     vm.loading = false;
-                                }
-                                return {
-                                    bind: vm.id,
-                                    view: () => __awaiter(this, void 0, void 0, function* () {
-                                        if (vm.loading) {
-                                            return BgWidget.spinner();
-                                        }
-                                        language_data.content_array = language_data.content_array.filter((id) => {
-                                            return vm.documents.some((item) => item.id === id);
-                                        });
-                                        language_data.content_json = language_data.content_json.filter((d) => {
-                                            return vm.documents.some((item) => item.id === d.id);
-                                        });
-                                        function formatRichtext(text, tags, jsonData) {
-                                            var _a, _b, _c;
-                                            let gText = `${text}`;
-                                            if (tags && tags.length > 0) {
-                                                for (const item of tags) {
-                                                    const data = jsonData.find(j => j.key === item.key);
-                                                    const textImage = data && data.value
-                                                        ? html `<span
-                                        style="font-size: ${(_a = item.font_size) !== null && _a !== void 0 ? _a : '14'}px; color: ${(_b = item.font_color) !== null && _b !== void 0 ? _b : '#393939'}; background: ${(_c = item.font_bgr) !== null && _c !== void 0 ? _c : '#fff'}"
-                                        >${data.value}</span
-                                      >`
-                                                        : html `#${item.title}#`;
-                                                    const regex = new RegExp(`@{{${item.key}}}`, 'g');
-                                                    gText = gText.replace(regex, textImage);
-                                                }
+                                    gvc.notifyDataChange(vm.id);
+                                });
+                            }
+                            else {
+                                vm.documents = vm_this.content_detail;
+                                vm.loading = false;
+                            }
+                            return {
+                                bind: vm.id,
+                                view: () => __awaiter(this, void 0, void 0, function* () {
+                                    if (vm.loading) {
+                                        return BgWidget.spinner();
+                                    }
+                                    language_data.content_array = language_data.content_array.filter((id) => {
+                                        return vm.documents.some((item) => item.id === id);
+                                    });
+                                    language_data.content_json = language_data.content_json.filter((d) => {
+                                        return vm.documents.some((item) => item.id === d.id);
+                                    });
+                                    function formatRichtext(text, tags, jsonData) {
+                                        var _a, _b, _c;
+                                        let gText = `${text}`;
+                                        if (tags && tags.length > 0) {
+                                            for (const item of tags) {
+                                                const data = jsonData.find(j => j.key === item.key);
+                                                const textImage = data && data.value
+                                                    ? html `<span
+                                    style="font-size: ${(_a = item.font_size) !== null && _a !== void 0 ? _a : '14'}px; color: ${(_b = item.font_color) !== null && _b !== void 0 ? _b : '#393939'}; background: ${(_c = item.font_bgr) !== null && _c !== void 0 ? _c : '#fff'}"
+                                    >${data.value}</span
+                                  >`
+                                                    : html `#${item.title}#`;
+                                                const regex = new RegExp(`@{{${item.key}}}`, 'g');
+                                                gText = gText.replace(regex, textImage);
                                             }
-                                            return gText;
                                         }
-                                        return html ` <div class="d-flex align-items-center justify-content-end mb-3">
-                              <div class="d-flex align-items-center gap-2">
-                                <div style="color: #393939; font-weight: 700;">
-                                  ${cat_title}詳細描述 ${BgWidget.languageInsignia(sel_lan(), 'margin-left:5px;')}
-                                </div>
-                              </div>
-                              <div class="flex-fill"></div>
-                              <div
-                                class="cursor_pointer"
-                                onclick="${gvc.event(() => {
-                                            BgWidget.dialog({
-                                                gvc: gvc,
-                                                title: '設定',
-                                                xmark: () => {
-                                                    return new Promise(resolve => {
-                                                        gvc.notifyDataChange(vm.id);
-                                                        resolve(true);
-                                                    });
-                                                },
-                                                innerHTML: gvc => {
-                                                    const id = gvc.glitter.getUUID();
-                                                    return gvc.bindView(() => {
-                                                        return {
-                                                            bind: id,
-                                                            view: () => {
-                                                                return vm.documents
-                                                                    .map((dd) => {
-                                                                    return html ` <li class="w-100 px-2">
-                                                  <div class="w-100 d-flex justify-content-between">
-                                                    <div class="d-flex justify-content-start align-items-center gap-3">
-                                                      <i
-                                                        class="fa-solid fa-grip-dots-vertical dragItem cursor_pointer"
-                                                      ></i>
-                                                      <div class="tx_normal">${dd.title}</div>
-                                                    </div>
-                                                    ${gvc.bindView((() => {
-                                                                        const iconId = gvc.glitter.getUUID();
-                                                                        return {
-                                                                            bind: iconId,
-                                                                            view: () => {
-                                                                                return html ` <i
-                                                              class="${language_data.content_array.includes(dd.id)
-                                                                                    ? 'fa-solid fa-eye'
-                                                                                    : 'fa-sharp fa-solid fa-eye-slash'} d-flex align-items-center justify-content-center cursor_pointer"
-                                                              onclick="${gvc.event(() => {
-                                                                                    if (language_data.content_array.includes(dd.id)) {
-                                                                                        language_data.content_array =
-                                                                                            language_data.content_array.filter((d) => d !== dd.id);
-                                                                                    }
-                                                                                    else {
-                                                                                        language_data.content_array.push(dd.id);
-                                                                                    }
-                                                                                    gvc.notifyDataChange(iconId);
-                                                                                })}"
-                                                            ></i>`;
-                                                                            },
-                                                                            divCreate: {
-                                                                                class: 'd-flex',
-                                                                            },
-                                                                        };
-                                                                    })())}
-                                                  </div>
-                                                </li>`;
-                                                                })
-                                                                    .join('');
-                                                            },
-                                                            divCreate: {
-                                                                elem: 'ul',
-                                                                class: 'w-100 my-2 d-flex flex-column gap-4',
-                                                            },
-                                                            onCreate: () => {
-                                                                if (!vm.loading) {
-                                                                    gvc.glitter.addMtScript([
-                                                                        {
-                                                                            src: `https://raw.githack.com/SortableJS/Sortable/master/Sortable.js`,
+                                        return gText;
+                                    }
+                                    return html `<!-- 繪製商品的詳細描述區塊-->
+                        <div class="d-flex align-items-center justify-content-end mb-3">
+                          <div class="d-flex align-items-center gap-2">
+                            <div style="color: #393939; font-weight: 700;">
+                              ${cat_title}詳細描述 ${BgWidget.languageInsignia(sel_lan(), 'margin-left:5px;')}
+                            </div>
+                          </div>
+                          <div class="flex-fill"></div>
+                          <div
+                            class="cursor_pointer"
+                            onclick="${gvc.event(() => {
+                                        BgWidget.dialog({
+                                            gvc: gvc,
+                                            title: '設定',
+                                            xmark: () => {
+                                                return new Promise(resolve => {
+                                                    gvc.notifyDataChange(vm.id);
+                                                    resolve(true);
+                                                });
+                                            },
+                                            innerHTML: gvc => {
+                                                const id = gvc.glitter.getUUID();
+                                                return gvc.bindView(() => {
+                                                    return {
+                                                        bind: id,
+                                                        view: () => {
+                                                            return vm.documents
+                                                                .map((dd) => {
+                                                                return html ` <li class="w-100 px-2">
+                                              <div class="w-100 d-flex justify-content-between">
+                                                <div class="d-flex justify-content-start align-items-center gap-3">
+                                                  <i class="fa-solid fa-grip-dots-vertical dragItem cursor_pointer"></i>
+                                                  <div class="tx_normal">${dd.title}</div>
+                                                </div>
+                                                ${gvc.bindView((() => {
+                                                                    const iconId = gvc.glitter.getUUID();
+                                                                    return {
+                                                                        bind: iconId,
+                                                                        view: () => {
+                                                                            return html ` <i
+                                                          class="${language_data.content_array.includes(dd.id)
+                                                                                ? 'fa-solid fa-eye'
+                                                                                : 'fa-sharp fa-solid fa-eye-slash'} d-flex align-items-center justify-content-center cursor_pointer"
+                                                          onclick="${gvc.event(() => {
+                                                                                if (language_data.content_array.includes(dd.id)) {
+                                                                                    language_data.content_array =
+                                                                                        language_data.content_array.filter((d) => d !== dd.id);
+                                                                                }
+                                                                                else {
+                                                                                    language_data.content_array.push(dd.id);
+                                                                                }
+                                                                                gvc.notifyDataChange(iconId);
+                                                                            })}"
+                                                        ></i>`;
                                                                         },
-                                                                    ], () => { }, () => { });
-                                                                    const interval = setInterval(() => {
-                                                                        if (window.Sortable) {
-                                                                            try {
-                                                                                gvc.addStyle(`
+                                                                        divCreate: {
+                                                                            class: 'd-flex',
+                                                                        },
+                                                                    };
+                                                                })())}
+                                              </div>
+                                            </li>`;
+                                                            })
+                                                                .join('');
+                                                        },
+                                                        divCreate: {
+                                                            elem: 'ul',
+                                                            class: 'w-100 my-2 d-flex flex-column gap-4',
+                                                        },
+                                                        onCreate: () => {
+                                                            if (!vm.loading) {
+                                                                gvc.glitter.addMtScript([
+                                                                    {
+                                                                        src: `https://raw.githack.com/SortableJS/Sortable/master/Sortable.js`,
+                                                                    },
+                                                                ], () => { }, () => { });
+                                                                const interval = setInterval(() => {
+                                                                    if (window.Sortable) {
+                                                                        try {
+                                                                            gvc.addStyle(`
                                                   ul {
                                                     list-style: none;
                                                     padding: 0;
                                                   }
                                                 `);
-                                                                                function swapArr(arr, t1, t2) {
-                                                                                    const data = arr[t1];
-                                                                                    arr.splice(t1, 1);
-                                                                                    arr.splice(t2, 0, data);
-                                                                                }
-                                                                                let startIndex = 0;
-                                                                                Sortable.create(gvc.getBindViewElem(id).get(0), {
-                                                                                    group: id,
-                                                                                    animation: 100,
-                                                                                    handle: '.dragItem',
-                                                                                    onEnd: (evt) => {
-                                                                                        swapArr(vm.documents, startIndex, evt.newIndex);
-                                                                                        ApiUser.setPublicConfig({
-                                                                                            key: 'text-manager',
-                                                                                            user_id: 'manager',
-                                                                                            value: vm.documents,
-                                                                                        }).then(result => {
-                                                                                            if (!result.response.result) {
-                                                                                                dialog.errorMessage({ text: '設定失敗' });
-                                                                                            }
-                                                                                        });
-                                                                                    },
-                                                                                    onStart: (evt) => {
-                                                                                        startIndex = evt.oldIndex;
-                                                                                    },
-                                                                                });
+                                                                            function swapArr(arr, t1, t2) {
+                                                                                const data = arr[t1];
+                                                                                arr.splice(t1, 1);
+                                                                                arr.splice(t2, 0, data);
                                                                             }
-                                                                            catch (e) { }
-                                                                            clearInterval(interval);
+                                                                            let startIndex = 0;
+                                                                            Sortable.create(gvc.getBindViewElem(id).get(0), {
+                                                                                group: id,
+                                                                                animation: 100,
+                                                                                handle: '.dragItem',
+                                                                                onEnd: (evt) => {
+                                                                                    swapArr(vm.documents, startIndex, evt.newIndex);
+                                                                                    ApiUser.setPublicConfig({
+                                                                                        key: 'text-manager',
+                                                                                        user_id: 'manager',
+                                                                                        value: vm.documents,
+                                                                                    }).then(result => {
+                                                                                        if (!result.response.result) {
+                                                                                            dialog.errorMessage({ text: '設定失敗' });
+                                                                                        }
+                                                                                    });
+                                                                                },
+                                                                                onStart: (evt) => {
+                                                                                    startIndex = evt.oldIndex;
+                                                                                },
+                                                                            });
                                                                         }
-                                                                    }, 100);
-                                                                }
-                                                            },
-                                                        };
+                                                                        catch (e) { }
+                                                                        clearInterval(interval);
+                                                                    }
+                                                                }, 100);
+                                                            }
+                                                        },
+                                                    };
+                                                });
+                                            },
+                                        });
+                                    })}"
+                          >
+                            設定<i class="fa-regular fa-gear ms-1"></i>
+                          </div>
+                        </div>
+                        <div class="my-3">
+                          ${gvc.bindView((() => {
+                                        const id = gvc.glitter.getUUID();
+                                        return {
+                                            bind: id,
+                                            view: () => {
+                                                return html ` <div
+                                    class="d-flex justify-content-between align-items-center gap-3 mb-1"
+                                    style="cursor: pointer;"
+                                    onclick="${gvc.event(() => {
+                                                    const originContent = `${language_data.content}`;
+                                                    BgWidget.fullDialog({
+                                                        gvc: gvc,
+                                                        title: gvc2 => {
+                                                            return html ` <div class="d-flex align-items-center" style="gap:10px;">
+                                            ${`${cat_title}描述` +
+                                                                BgWidget.aiChatButton({
+                                                                    gvc: gvc2,
+                                                                    select: 'writer',
+                                                                    click: () => {
+                                                                        ProductAi.generateRichText(gvc, text => {
+                                                                            language_data.content += text;
+                                                                            gvc.notifyDataChange(vm.id);
+                                                                            gvc2.recreateView();
+                                                                        });
+                                                                    },
+                                                                })}
+                                          </div>`;
+                                                        },
+                                                        innerHTML: gvc2 => {
+                                                            return html ` <div>
+                                            ${EditorElem.richText({
+                                                                gvc: gvc2,
+                                                                def: language_data.content,
+                                                                setHeight: '100vh',
+                                                                hiddenBorder: true,
+                                                                insertImageEvent: editor => {
+                                                                    const mark = `{{${Tool.randomString(8)}}}`;
+                                                                    editor.selection.setAtEnd(editor.$el.get(0));
+                                                                    editor.html.insert(mark);
+                                                                    editor.undo.saveStep();
+                                                                    imageLibrary.selectImageLibrary(gvc, urlArray => {
+                                                                        if (urlArray.length > 0) {
+                                                                            const imgHTML = urlArray
+                                                                                .map(url => {
+                                                                                return html ` <img src="${url.data}" />`;
+                                                                            })
+                                                                                .join('');
+                                                                            editor.html.set(editor.html
+                                                                                .get(0)
+                                                                                .replace(mark, html ` <div class="d-flex flex-column">${imgHTML}</div>`));
+                                                                            editor.undo.saveStep();
+                                                                        }
+                                                                        else {
+                                                                            dialog.errorMessage({ text: '請選擇至少一張圖片' });
+                                                                        }
+                                                                    }, html ` <div
+                                                    class="d-flex flex-column"
+                                                    style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;"
+                                                  >
+                                                    圖片庫
+                                                  </div>`, {
+                                                                        mul: true,
+                                                                        cancelEvent: () => {
+                                                                            editor.html.set(editor.html.get(0).replace(mark, ''));
+                                                                            editor.undo.saveStep();
+                                                                        },
+                                                                    });
+                                                                },
+                                                                callback: text => {
+                                                                    language_data.content = text;
+                                                                },
+                                                                rich_height: `calc(${window.parent.innerHeight}px - 70px - 58px - 49px - 64px - 40px + ${document.body.clientWidth < 800 ? `70` : `0`}px)`,
+                                                            })}
+                                          </div>`;
+                                                        },
+                                                        footer_html: (gvc2) => {
+                                                            return [
+                                                                BgWidget.cancel(gvc2.event(() => {
+                                                                    language_data.content = originContent;
+                                                                    gvc2.closeDialog();
+                                                                })),
+                                                                BgWidget.save(gvc2.event(() => {
+                                                                    gvc2.closeDialog();
+                                                                    gvc.notifyDataChange(id);
+                                                                })),
+                                                            ].join('');
+                                                        },
+                                                        closeCallback: () => {
+                                                            language_data.content = originContent;
+                                                        },
                                                     });
-                                                },
-                                            });
-                                        })}"
-                              >
-                                設定<i class="fa-regular fa-gear ms-1"></i>
-                              </div>
-                            </div>
-                            <div class="my-3">
-                              ${gvc.bindView((() => {
-                                            const id = gvc.glitter.getUUID();
-                                            return {
-                                                bind: id,
-                                                view: () => {
+                                                })}"
+                                  >
+                                    ${(() => {
+                                                    const text = gvc.glitter.utText.removeTag(language_data.content);
+                                                    return BgWidget.richTextView(Tool.truncateString(text, 100));
+                                                })()}
+                                  </div>`;
+                                            },
+                                        };
+                                    })())}
+                        </div>
+                        ${(vm.documents || [])
+                                        .filter((item) => {
+                                        return language_data.content_array.includes(item.id);
+                                    })
+                                        .map((item, index) => {
+                                        return BgWidget.openBoxContainer({
+                                            gvc,
+                                            tag: 'content_array',
+                                            title: item.title,
+                                            insideHTML: (() => {
+                                                if (item.data.tags && item.data.tags.length > 0) {
+                                                    const id = obj.gvc.glitter.getUUID();
                                                     return html ` <div
-                                        class="d-flex justify-content-between align-items-center gap-3 mb-1"
-                                        style="cursor: pointer;"
-                                        onclick="${gvc.event(() => {
-                                                        const originContent = `${language_data.content}`;
-                                                        BgWidget.fullDialog({
+                                      class="cursor_pointer text-end me-1 mb-2"
+                                      onclick="${gvc.event(() => {
+                                                        const originJson = JSON.parse(JSON.stringify(language_data.content_json));
+                                                        BgWidget.settingDialog({
                                                             gvc: gvc,
-                                                            title: gvc2 => {
-                                                                return html `<div class="d-flex align-items-center" style="gap:10px;">
-                                                ${`${cat_title}描述` +
-                                                                    BgWidget.aiChatButton({
-                                                                        gvc: gvc2,
-                                                                        select: 'writer',
-                                                                        click: () => {
-                                                                            ProductAi.generateRichText(gvc, text => {
-                                                                                language_data.content += text;
-                                                                                gvc.notifyDataChange(vm.id);
-                                                                                gvc2.recreateView();
-                                                                            });
-                                                                        },
-                                                                    })}
-                                              </div>`;
-                                                            },
-                                                            innerHTML: gvc2 => {
+                                                            title: '設定',
+                                                            innerHTML: gvc => {
                                                                 return html ` <div>
-                                                ${EditorElem.richText({
-                                                                    gvc: gvc2,
-                                                                    def: language_data.content,
-                                                                    setHeight: '100vh',
-                                                                    hiddenBorder: true,
-                                                                    insertImageEvent: editor => {
-                                                                        const mark = `{{${Tool.randomString(8)}}}`;
-                                                                        editor.selection.setAtEnd(editor.$el.get(0));
-                                                                        editor.html.insert(mark);
-                                                                        editor.undo.saveStep();
-                                                                        imageLibrary.selectImageLibrary(gvc, urlArray => {
-                                                                            if (urlArray.length > 0) {
-                                                                                const imgHTML = urlArray
-                                                                                    .map(url => {
-                                                                                    return html ` <img src="${url.data}" />`;
-                                                                                })
-                                                                                    .join('');
-                                                                                editor.html.set(editor.html
-                                                                                    .get(0)
-                                                                                    .replace(mark, html ` <div class="d-flex flex-column">${imgHTML}</div>`));
-                                                                                editor.undo.saveStep();
+                                              ${item.data.tags
+                                                                    .map((tag) => {
+                                                                    return html ` <div>
+                                                    ${BgWidget.editeInput({
+                                                                        gvc,
+                                                                        title: tag.title,
+                                                                        default: (() => {
+                                                                            const docIndex = language_data.content_json.findIndex((c) => c.id === item.id);
+                                                                            if (docIndex === -1) {
+                                                                                return '';
                                                                             }
-                                                                            else {
-                                                                                dialog.errorMessage({ text: '請選擇至少一張圖片' });
+                                                                            if (language_data.content_json[docIndex].list === undefined) {
+                                                                                return '';
                                                                             }
-                                                                        }, html ` <div
-                                                        class="d-flex flex-column"
-                                                        style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;"
-                                                      >
-                                                        圖片庫
-                                                      </div>`, {
-                                                                            mul: true,
-                                                                            cancelEvent: () => {
-                                                                                editor.html.set(editor.html.get(0).replace(mark, ''));
-                                                                                editor.undo.saveStep();
-                                                                            },
-                                                                        });
-                                                                    },
-                                                                    callback: text => {
-                                                                        language_data.content = text;
-                                                                    },
-                                                                    rich_height: `calc(${window.parent.innerHeight}px - 70px - 58px - 49px - 64px - 40px + ${document.body.clientWidth < 800 ? `70` : `0`}px)`,
-                                                                })}
-                                              </div>`;
-                                                            },
-                                                            footer_html: (gvc2) => {
-                                                                return [
-                                                                    BgWidget.cancel(gvc2.event(() => {
-                                                                        dialog.checkYesOrNot({
-                                                                            text: '確定要取消並關閉嗎？',
-                                                                            callback: bool => {
-                                                                                if (bool) {
-                                                                                    language_data.content = originContent;
-                                                                                    gvc2.closeDialog();
-                                                                                }
-                                                                            },
-                                                                        });
+                                                                            const keyIndex = language_data.content_json[docIndex].list.findIndex((l) => l.key === tag.key);
+                                                                            if (keyIndex === -1) {
+                                                                                return '';
+                                                                            }
+                                                                            return language_data.content_json[docIndex].list[keyIndex]
+                                                                                .value;
+                                                                        })(),
+                                                                        callback: text => {
+                                                                            const docIndex = language_data.content_json.findIndex((c) => c.id === item.id);
+                                                                            if (docIndex === -1) {
+                                                                                language_data.content_json.push({
+                                                                                    id: item.id,
+                                                                                    list: [
+                                                                                        {
+                                                                                            key: tag.key,
+                                                                                            value: text,
+                                                                                        },
+                                                                                    ],
+                                                                                });
+                                                                                return;
+                                                                            }
+                                                                            if (language_data.content_json[docIndex].list === undefined) {
+                                                                                language_data.content_json[docIndex].list = [
+                                                                                    {
+                                                                                        key: tag.key,
+                                                                                        value: text,
+                                                                                    },
+                                                                                ];
+                                                                                return;
+                                                                            }
+                                                                            const keyIndex = language_data.content_json[docIndex].list.findIndex((l) => l.key === tag.key);
+                                                                            if (keyIndex === -1) {
+                                                                                language_data.content_json[docIndex].list.push({
+                                                                                    key: tag.key,
+                                                                                    value: text,
+                                                                                });
+                                                                                return;
+                                                                            }
+                                                                            language_data.content_json[docIndex].list[keyIndex].value =
+                                                                                text;
+                                                                        },
+                                                                        placeHolder: '輸入文本標籤',
+                                                                    })}
+                                                  </div>`;
+                                                                })
+                                                                    .join(BgWidget.mbContainer(12))}
+                                            </div>`;
+                                                            },
+                                                            footer_html: (gvc2) => {
+                                                                return [
+                                                                    BgWidget.cancel(gvc2.event(() => {
+                                                                        language_data.content_json = originJson;
+                                                                        gvc2.closeDialog();
                                                                     })),
                                                                     BgWidget.save(gvc2.event(() => {
-                                                                        dialog.checkYesOrNot({
-                                                                            text: '確定要儲存並更新嗎？',
-                                                                            callback: bool => {
-                                                                                if (bool) {
-                                                                                    gvc2.closeDialog();
-                                                                                    gvc.notifyDataChange(id);
-                                                                                }
-                                                                            },
-                                                                        });
+                                                                        gvc2.closeDialog();
+                                                                        gvc.notifyDataChange(`${id}-${index}`);
                                                                     })),
                                                                 ].join('');
                                                             },
                                                             closeCallback: () => {
-                                                                language_data.content = originContent;
+                                                                language_data.content_json = originJson;
                                                             },
                                                         });
                                                     })}"
-                                      >
-                                        ${(() => {
-                                                        const text = gvc.glitter.utText.removeTag(language_data.content);
-                                                        return BgWidget.richTextView(Tool.truncateString(text, 100));
-                                                    })()}
-                                      </div>`;
-                                                },
-                                            };
-                                        })())}
-                            </div>
-                            ${(vm.documents || [])
-                                            .filter((item) => {
-                                            return language_data.content_array.includes(item.id);
-                                        })
-                                            .map((item, index) => {
-                                            return BgWidget.openBoxContainer({
-                                                gvc,
-                                                tag: 'content_array',
-                                                title: item.title,
-                                                insideHTML: (() => {
-                                                    if (item.data.tags && item.data.tags.length > 0) {
-                                                        const id = obj.gvc.glitter.getUUID();
-                                                        return html ` <div
-                                          class="cursor_pointer text-end me-1 mb-2"
-                                          onclick="${gvc.event(() => {
-                                                            const originJson = JSON.parse(JSON.stringify(language_data.content_json));
-                                                            BgWidget.settingDialog({
-                                                                gvc: gvc,
-                                                                title: '設定',
-                                                                innerHTML: gvc => {
-                                                                    return html ` <div>
-                                                  ${item.data.tags
-                                                                        .map((tag) => {
-                                                                        return html ` <div>
-                                                        ${BgWidget.editeInput({
-                                                                            gvc,
-                                                                            title: tag.title,
-                                                                            default: (() => {
-                                                                                const docIndex = language_data.content_json.findIndex((c) => c.id === item.id);
-                                                                                if (docIndex === -1) {
-                                                                                    return '';
-                                                                                }
-                                                                                if (language_data.content_json[docIndex].list === undefined) {
-                                                                                    return '';
-                                                                                }
-                                                                                const keyIndex = language_data.content_json[docIndex].list.findIndex((l) => l.key === tag.key);
-                                                                                if (keyIndex === -1) {
-                                                                                    return '';
-                                                                                }
-                                                                                return language_data.content_json[docIndex].list[keyIndex]
-                                                                                    .value;
-                                                                            })(),
-                                                                            callback: text => {
-                                                                                const docIndex = language_data.content_json.findIndex((c) => c.id === item.id);
-                                                                                if (docIndex === -1) {
-                                                                                    language_data.content_json.push({
-                                                                                        id: item.id,
-                                                                                        list: [
-                                                                                            {
-                                                                                                key: tag.key,
-                                                                                                value: text,
-                                                                                            },
-                                                                                        ],
-                                                                                    });
-                                                                                    return;
-                                                                                }
-                                                                                if (language_data.content_json[docIndex].list === undefined) {
-                                                                                    language_data.content_json[docIndex].list = [
-                                                                                        {
-                                                                                            key: tag.key,
-                                                                                            value: text,
-                                                                                        },
-                                                                                    ];
-                                                                                    return;
-                                                                                }
-                                                                                const keyIndex = language_data.content_json[docIndex].list.findIndex((l) => l.key === tag.key);
-                                                                                if (keyIndex === -1) {
-                                                                                    language_data.content_json[docIndex].list.push({
-                                                                                        key: tag.key,
-                                                                                        value: text,
-                                                                                    });
-                                                                                    return;
-                                                                                }
-                                                                                language_data.content_json[docIndex].list[keyIndex].value =
-                                                                                    text;
-                                                                            },
-                                                                            placeHolder: '輸入文本標籤',
-                                                                        })}
-                                                      </div>`;
-                                                                    })
-                                                                        .join(BgWidget.mbContainer(12))}
-                                                </div>`;
-                                                                },
-                                                                footer_html: (gvc2) => {
-                                                                    return [
-                                                                        BgWidget.cancel(gvc2.event(() => {
-                                                                            language_data.content_json = originJson;
-                                                                            gvc2.closeDialog();
-                                                                        })),
-                                                                        BgWidget.save(gvc2.event(() => {
-                                                                            gvc2.closeDialog();
-                                                                            gvc.notifyDataChange(`${id}-${index}`);
-                                                                        })),
-                                                                    ].join('');
-                                                                },
-                                                                closeCallback: () => {
-                                                                    language_data.content_json = originJson;
-                                                                },
-                                                            });
-                                                        })}"
-                                        >
-                                          標籤設值
-                                        </div>
-                                        ${gvc.bindView((() => {
-                                                            return {
-                                                                bind: `${id}-${index}`,
-                                                                view: () => {
-                                                                    const content = item.data.content || '';
-                                                                    const tags = item.data.tags;
-                                                                    const jsonData = language_data.content_json.find((c) => c.id === item.id);
-                                                                    return html ` <div
-                                                  style="border: 2px #DDDDDD solid; border-radius: 6px; padding: 12px;"
-                                                >
-                                                  ${tags
-                                                                        ? formatRichtext(content, tags, jsonData ? jsonData.list : [])
-                                                                        : content}
-                                                </div>`;
-                                                                },
-                                                            };
-                                                        })())}`;
-                                                    }
-                                                    return html ` <div
-                                      style="border: 1px #DDDDDD solid; border-radius: 6px; padding: 12px"
                                     >
-                                      ${item.data.content || ''}
-                                    </div>`;
-                                                })(),
-                                            });
-                                        })
-                                            .join(BgWidget.mbContainer(8))}`;
-                                    }),
-                                };
-                            })();
-                        }),
-                    ].join(BgWidget.mbContainer(12))),
-                BgWidget.mainCard(html `
-            <div
-              class="d-flex align-items-center justify-content-between"
-              style="color: #393939;font-size: 16px;font-weight: 700;margin-bottom: 18px;"
-            >
-              <div class="d-flex align-items-center">
-                圖片${BgWidget.languageInsignia(sel_lan(), 'margin-left:5px;')}
-              </div>
-              <div class="d-flex align-items-center gap-2">
-                ${BgWidget.customButton({
-                    button: {
-                        color: 'black',
-                        size: 'sm',
-                    },
-                    text: {
-                        name: '上傳圖片',
-                    },
-                    event: gvc.event(() => {
-                        EditorElem.uploadFileFunction({
-                            gvc: gvc,
-                            callback: (images) => {
-                                const addImage = (urlArray) => {
-                                    if (urlArray.length > 0) {
-                                        language_data.preview_image.push(...urlArray);
-                                        saveImageLib(urlArray);
-                                        obj.gvc.notifyDataChange('image_view');
-                                    }
-                                    else {
-                                        dialog.errorMessage({ text: '請選擇至少一張圖片' });
-                                    }
-                                };
-                                addImage(images);
-                            },
-                            type: `image/*`,
-                            return_array: true,
-                            multiple: true,
-                        });
+                                      標籤設值
+                                    </div>
+                                    ${gvc.bindView((() => {
+                                                        return {
+                                                            bind: `${id}-${index}`,
+                                                            view: () => {
+                                                                const content = item.data.content || '';
+                                                                const tags = item.data.tags;
+                                                                const jsonData = language_data.content_json.find((c) => c.id === item.id);
+                                                                return html ` <div
+                                              style="border: 2px #DDDDDD solid; border-radius: 6px; padding: 12px;"
+                                            >
+                                              ${tags
+                                                                    ? formatRichtext(content, tags, jsonData ? jsonData.list : [])
+                                                                    : content}
+                                            </div>`;
+                                                            },
+                                                        };
+                                                    })())}`;
+                                                }
+                                                return html ` <div style="border: 1px #DDDDDD solid; border-radius: 6px; padding: 12px">
+                                  ${item.data.content || ''}
+                                </div>`;
+                                            })(),
+                                        });
+                                    })
+                                        .join(BgWidget.mbContainer(8))}`;
+                                }),
+                            };
+                        })();
                     }),
-                })}
-                ${BgWidget.customButton({
-                    button: {
-                        color: 'black',
-                        size: 'sm',
+                ].join(BgWidget.mbContainer(12)));
+        }
+        function drawProductImageBlock() {
+            return BgWidget.mainCard(html `<!--繪製商品圖片展示區塊-->
+        <div
+          class="d-flex align-items-center justify-content-between"
+          style="color: #393939;font-size: 16px;font-weight: 700;margin-bottom: 18px;"
+        >
+          <div class="d-flex align-items-center">圖片${BgWidget.languageInsignia(sel_lan(), 'margin-left:5px;')}</div>
+          <div class="d-flex align-items-center gap-2">
+            ${BgWidget.customButton({
+                button: {
+                    color: 'black',
+                    size: 'sm',
+                },
+                text: {
+                    name: '上傳圖片',
+                },
+                event: gvc.event(() => {
+                    EditorElem.uploadFileFunction({
+                        gvc: gvc,
+                        callback: (images) => {
+                            const addImage = (urlArray) => {
+                                if (urlArray.length > 0) {
+                                    language_data.preview_image.push(...urlArray);
+                                    saveImageLib(urlArray);
+                                    obj.gvc.notifyDataChange('image_view');
+                                }
+                                else {
+                                    dialog.errorMessage({ text: '請選擇至少一張圖片' });
+                                }
+                            };
+                            addImage(images);
+                        },
+                        type: `image/*`,
+                        return_array: true,
+                        multiple: true,
+                    });
+                }),
+            })}
+            ${BgWidget.customButton({
+                button: {
+                    color: 'black',
+                    size: 'sm',
+                },
+                text: {
+                    name: '從圖片庫選取',
+                },
+                event: gvc.event(() => {
+                    imageLibrary.selectImageLibrary(gvc, urlArray => {
+                        if (urlArray.length > 0) {
+                            language_data.preview_image.push(...urlArray.map((data) => {
+                                return data.data;
+                            }));
+                            obj.gvc.notifyDataChange('image_view');
+                        }
+                        else {
+                            dialog.errorMessage({ text: '請選擇至少一張圖片' });
+                        }
+                    }, html ` <div class="d-flex flex-column" style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;">
+                    圖片庫
+                  </div>`, { mul: true });
+                }),
+            })}
+          </div>
+        </div>
+        ${obj.gvc.bindView(() => {
+                return {
+                    bind: 'image_view',
+                    view: () => {
+                        return (html ` <div class="my-2"></div>` +
+                            EditorElem.flexMediaManagerV2({
+                                gvc: obj.gvc,
+                                data: language_data.preview_image,
+                                event: {
+                                    delete: (index) => {
+                                        postMD.variants.forEach((variant) => {
+                                            var _a, _b;
+                                            if (variant.preview_image === language_data.preview_image[index]) {
+                                                variant.preview_image = (_a = language_data.preview_image[0]) !== null && _a !== void 0 ? _a : BgWidget.noImageURL;
+                                            }
+                                            if (variant[`preview_image_${vm.language}`] === language_data.preview_image[index]) {
+                                                variant[`preview_image_${vm.language}`] =
+                                                    (_b = language_data.preview_image[0]) !== null && _b !== void 0 ? _b : BgWidget.noImageURL;
+                                            }
+                                        });
+                                        ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
+                                    },
+                                },
+                            }));
                     },
-                    text: {
-                        name: '從圖片庫選取',
+                    divCreate: {
+                        class: `d-flex w-100`,
+                        style: `overflow-y:scroll;height:180px;`,
                     },
-                    event: gvc.event(() => {
-                        imageLibrary.selectImageLibrary(gvc, urlArray => {
-                            if (urlArray.length > 0) {
-                                language_data.preview_image.push(...urlArray.map((data) => {
-                                    return data.data;
-                                }));
-                                obj.gvc.notifyDataChange('image_view');
-                            }
-                            else {
-                                dialog.errorMessage({ text: '請選擇至少一張圖片' });
-                            }
-                        }, html ` <div
-                        class="d-flex flex-column"
-                        style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;"
+                };
+            })}
+      `);
+        }
+        function drawReserveLocations() {
+            if (postMD.product_category === 'reserve') {
+                function getStockStore() {
+                    ApiUser.getPublicConfig('store_manager', 'manager').then((storeData) => {
+                        if (storeData.result) {
+                            stockList = storeData.response.value.list.filter((store) => store.is_shop);
+                            postMD.reserve_locations = stockList;
+                            console.log('postMD.reserve_locations -- ', postMD.reserve_locations);
+                            gvc.notifyDataChange([section_ID.reserve_locations, section_ID.store_product_config_panel]);
+                        }
+                    });
+                    loading.reserve_locations = false;
+                }
+                return gvc.bindView({
+                    bind: section_ID.reserve_locations,
+                    view: () => {
+                        gvc.addStyle(css `
+              .location-btn {
+                height: 34px;
+                padding: 0 12px;
+                border-radius: 10px;
+                border: 1px solid #393939;
+                gap: 6px;
+              }
+
+              .location-dialog {
+                display: flex;
+                width: 504px;
+
+                flex-direction: column;
+                align-items: center;
+                gap: 18px;
+                border-radius: 10px;
+                background: #fff;
+              }
+
+              .location-dialog .title {
+                display: flex;
+                padding: 12px 20px;
+                justify-content: space-between;
+                border-radius: 10px 10px 0 0;
+                align-items: center;
+                background: #f2f2f2;
+                color: #393939;
+              }
+
+              .location-dialog .section {
+                padding: 0 20px;
+                gap: 12px;
+              }
+            `);
+                        if (loading.reserve_locations) {
+                            getStockStore();
+                            return ``;
+                        }
+                        function popoutSelectLocation(callback) {
+                            gvc.glitter.innerDialog(gvc => {
+                                function drawRaw(store) {
+                                    const checked = temp_Reserve_locations.filter(store2 => store2.id == store.id).length > 0;
+                                    return html `
+                    <div class="w-100 d-flex align-items-center" style="padding:0 4px;gap:8px;">
+                      ${BgWidget.checkInput(gvc, checked, () => {
+                                        if (checked) {
+                                            temp_Reserve_locations.splice(temp_Reserve_locations.findIndex(store2 => store2.id == store.id), 1);
+                                        }
+                                        else {
+                                            temp_Reserve_locations.push(store);
+                                        }
+                                        gvc.notifyDataChange([section_ID.dialog_location_main]);
+                                    })}
+                      <div>${store.name}</div>
+                    </div>
+                  `;
+                                }
+                                let temp_Reserve_locations = structuredClone(postMD.reserve_locations);
+                                let searchText = '';
+                                return gvc.bindView({
+                                    bind: section_ID.dialog_location_main,
+                                    view: () => {
+                                        const allCheck = temp_Reserve_locations.length == stockList.length;
+                                        return html `
+                      <div class="title w-100">
+                        <div class="tx_normal">新增服務地點</div>
+                        <i
+                          class="fa-solid fa-xmark cursor_pointer"
+                          onclick="${gvc.event(() => {
+                                            gvc.glitter.closeDiaLog('location-select');
+                                        })}"
+                        ></i>
+                      </div>
+                      <div class="section w-100 d-flex flex-column">
+                        ${BgWidget.searchFilter(gvc.event(e => {
+                                            searchText = e.value;
+                                            gvc.notifyDataChange(section_ID.dialog_location_list);
+                                        }), searchText || '', '搜尋門市')}
+                        <div class="d-flex align-items-center" style="gap:8px;padding:4px 4px 0; ">
+                          ${BgWidget.checkInput(gvc, allCheck, () => {
+                                            if (allCheck) {
+                                                temp_Reserve_locations = [];
+                                            }
+                                            else {
+                                                temp_Reserve_locations = stockList;
+                                            }
+                                            gvc.notifyDataChange([section_ID.dialog_location_list, section_ID.dialog_location_main]);
+                                        })}
+                          門市名稱
+                        </div>
+                        <hr class="w-100" />
+                        ${gvc.bindView({
+                                            bind: section_ID.dialog_location_list,
+                                            view: () => {
+                                                const showList = stockList.filter(store => store.name.toLowerCase().includes(searchText.toLowerCase()));
+                                                return showList.map(drawRaw).join('');
+                                            },
+                                            divCreate: {
+                                                class: 'd-flex flex-column',
+                                                style: 'gap:16px',
+                                            },
+                                        })}
+                      </div>
+                      <div
+                        class="w-100 d-flex align-items-center justify-content-end"
+                        style="gap:14px;padding:0 20px 20px"
                       >
-                        圖片庫
-                      </div>`, { mul: true });
-                    }),
-                })}
-              </div>
-            </div>
-            ${obj.gvc.bindView(() => {
-                    return {
-                        bind: 'image_view',
-                        view: () => {
-                            return (html ` <div class="my-2"></div>` +
-                                EditorElem.flexMediaManagerV2({
-                                    gvc: obj.gvc,
-                                    data: language_data.preview_image,
-                                    event: {
-                                        delete: (index) => {
-                                            postMD.variants.forEach((variant) => {
-                                                var _a, _b;
-                                                if (variant.preview_image === language_data.preview_image[index]) {
-                                                    variant.preview_image = (_a = language_data.preview_image[0]) !== null && _a !== void 0 ? _a : BgWidget.noImageURL;
-                                                }
-                                                if (variant[`preview_image_${vm.language}`] === language_data.preview_image[index]) {
-                                                    variant[`preview_image_${vm.language}`] =
-                                                        (_b = language_data.preview_image[0]) !== null && _b !== void 0 ? _b : BgWidget.noImageURL;
-                                                }
-                                            });
-                                            ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
-                                        },
+                        ${BgWidget.cancel(gvc.event(() => {
+                                            gvc.glitter.closeDiaLog('location-select');
+                                        }))}
+                        ${BgWidget.save(gvc.event(() => {
+                                            gvc.glitter.closeDiaLog('location-select');
+                                            callback(temp_Reserve_locations);
+                                        }))}
+                      </div>
+                    `;
                                     },
-                                }));
-                        },
-                        divCreate: {
-                            class: `d-flex w-100`,
-                            style: `overflow-y:scroll;height:180px;`,
-                        },
-                    };
-                })}
-          `),
-                (() => {
-                    if (postMD.variants.length === 1) {
-                        try {
-                            postMD.variants[0].editable = true;
-                            return ShoppingProductSetting.editProductSpec({
-                                vm: obj.vm,
-                                defData: postMD,
-                                gvc: gvc,
-                                single: true,
-                            });
+                                    divCreate: {
+                                        class: 'location-dialog',
+                                    },
+                                });
+                            }, 'location-select');
                         }
-                        catch (e) {
-                            console.error(e);
-                            return '';
+                        function drawLocation(location) {
+                            const width = postMD.reserve_locations.length > 3 ? 'width:calc(25% - 12px)' : 'flex:1 1 auto;max-width:50%;';
+                            return html `
+                <div class="location-btn tx_normal d-flex align-items-center " style="${width} ">
+                  <div class="d-flex align-items-center justify-content-center flex-fill" style="cursor:default">
+                    ${location.name}
+                  </div>
+                  <i
+                    class="fa-solid fa-xmark ms-auto cursor_pointer"
+                    style="color:#B0B0B0"
+                    onclick="${gvc.event(() => {
+                                postMD.reserve_locations.splice(postMD.reserve_locations.findIndex(store => store.id == location.id), 1);
+                                gvc.notifyDataChange(section_ID.reserve_locations);
+                            })}"
+                  ></i>
+                </div>
+              `;
                         }
-                    }
+                        return BgWidget.mainCard(html `<!--繪製預約門市選擇區塊-->
+              <div class="d-flex flex-column" style="gap:18px;">
+                <div class="d-flex align-items-center">
+                  服務地點${BgWidget.languageInsignia(sel_lan(), 'margin-left:5px;')}
+                </div>
+                <div class="d-flex flex-wrap" style="gap:12px;">
+                  ${stockList.length == 0
+                            ? html ` <div class="w-100 d-flex align-items-center justify-content-center tx_gray_16">
+                        尚未設置門市，請前往POS實體門市>門市設定
+                      </div>`
+                            : postMD.reserve_locations.map(drawLocation).join('')}
+                </div>
+                <div
+                  class="d-flex justify-content-center align-items-center cursor_pointer"
+                  style="gap:4px;color: #36B;"
+                  onclick="${gvc.event(() => {
+                            popoutSelectLocation(newStoreList => {
+                                postMD.reserve_locations = newStoreList;
+                                gvc.notifyDataChange(section_ID.reserve_locations);
+                            });
+                        })}"
+                >
+                  新增服務地點 <i class="fa-solid fa-plus"></i>
+                </div>
+              </div>
+            `);
+                    },
+                    divCreate: {},
+                });
+            }
+            else {
+                return ``;
+            }
+        }
+        function drawIndividualStoreProductConfigPanel() {
+            if (postMD.product_category == 'reserve') {
+                if (postMD.reserve_locations && postMD.reserve_locations.length > 0) {
+                    return gvc.bindView({
+                        bind: section_ID.store_product_config_panel,
+                        view: () => {
+                            return BgWidget.mainCard(html `<!--繪製單一門市的商品配置面板-->
+                <div class="d-flex flex-column">
+                  <div class="tx_700">依門市管理</div>
+                  <div class="tx_gray_14">其他門市將預設套用此門市的設定，如需修改，請切換至對應門市進行調整</div>
+                </div>
+                ${BgWidget.select({
+                                default: postMD.reserve_locations[0].id,
+                                gvc: gvc,
+                                options: postMD.reserve_locations.map(location => {
+                                    return {
+                                        value: location.name,
+                                        key: location.id,
+                                    };
+                                }),
+                                callback(value) { },
+                            })}
+              `);
+                        },
+                        divCreate: {},
+                    });
+                }
+                else {
+                    return ``;
+                }
+            }
+            else {
+                return ``;
+            }
+        }
+        function drawSpecEditView() {
+            if (postMD.variants.length === 1) {
+                try {
+                    postMD.variants[0].editable = true;
+                    return html `
+<!--          繪製 編輯商品規格編輯區塊-->
+          ` + ShoppingProductSetting.editProductSpec({
+                        vm: obj.vm,
+                        defData: postMD,
+                        gvc: gvc,
+                        single: true,
+                    });
+                }
+                catch (e) {
+                    console.error(e);
                     return '';
-                })(),
-                BgWidget.mainCard(obj.gvc.bindView(() => {
-                    const specid = obj.gvc.glitter.getUUID();
-                    let editIndex = -1;
-                    gvc.addStyle(`
+                }
+            }
+            return '';
+        }
+        function drawProductSpecList() {
+            return BgWidget.mainCard(obj.gvc.bindView(() => {
+                const specid = obj.gvc.glitter.getUUID();
+                let editIndex = -1;
+                gvc.addStyle(`
                 .spec-option {
                   border: 0.25px solid #393939;
                   background-color: #f7f7f7;
@@ -948,599 +1129,680 @@ export class ShoppingSettingBasic {
                   text-align: center;
                 }
               `);
-                    return {
-                        bind: specid,
-                        dataList: [{ obj: createPage, key: 'page' }],
-                        view: () => {
-                            let returnHTML = html `
-                    <div
-                      class="d-flex align-items-center justify-content-between"
-                      style="font-size: 16px;font-weight: 700;"
-                    >
-                      ${cat_title}規格 ${BgWidget.languageInsignia(sel_lan(), '')}
-                    </div>
-                  `;
-                            let editSpectPage = [];
-                            if (postMD.specs.length > 0) {
-                                postMD.specs.map((d, index) => {
-                                    editSpectPage.push({
-                                        type: index === editIndex ? 'edit' : 'show',
-                                    });
+                return {
+                    bind: specid,
+                    dataList: [{ obj: createPage, key: 'page' }],
+                    view: () => {
+                        let returnHTML = html `
+<!--                繪製商品規格列表區塊-->
+                <div
+                  class="d-flex align-items-center justify-content-between"
+                  style="font-size: 16px;font-weight: 700;"
+                >
+                  ${cat_title}規格 ${BgWidget.languageInsignia(sel_lan(), '')}
+                </div>
+              `;
+                        let editSpectPage = [];
+                        if (postMD.specs.length > 0) {
+                            postMD.specs.map((d, index) => {
+                                editSpectPage.push({
+                                    type: index === editIndex ? 'edit' : 'show',
                                 });
-                                returnHTML += html `
-                      ${EditorElem.arrayItem({
-                                    customEditor: true,
-                                    gvc: obj.gvc,
-                                    title: '',
-                                    hoverGray: true,
-                                    position: 'front',
-                                    height: 100,
-                                    originalArray: postMD.specs,
-                                    expand: true,
-                                    copyable: false,
-                                    hr: true,
-                                    minus: false,
-                                    refreshComponent: (fromIndex, toIndex) => {
-                                        postMD.variants.map(item => {
-                                            if (fromIndex === undefined ||
-                                                toIndex === undefined ||
-                                                fromIndex < 0 ||
-                                                fromIndex >= item.spec.length ||
-                                                toIndex < 0 ||
-                                                toIndex >= item.spec.length) {
-                                                throw new Error('索引超出範圍');
-                                            }
-                                            let element = item.spec.splice(fromIndex, 1)[0];
-                                            item.spec.splice(toIndex, 0, element);
-                                            return item;
-                                        });
-                                        obj.gvc.notifyDataChange([specid, 'productInf', 'spec_text_show']);
-                                    },
-                                    array: () => {
-                                        function swapArray(arr, index1, index2) {
-                                            if (index1 === index2)
-                                                return;
-                                            const [item] = arr.splice(index1, 1);
-                                            arr.splice(index2, 0, item);
+                            });
+                            returnHTML += html `
+                  ${EditorElem.arrayItem({
+                                customEditor: true,
+                                gvc: obj.gvc,
+                                title: '',
+                                hoverGray: true,
+                                position: 'front',
+                                height: 100,
+                                originalArray: postMD.specs,
+                                expand: true,
+                                copyable: false,
+                                hr: true,
+                                minus: false,
+                                refreshComponent: (fromIndex, toIndex) => {
+                                    postMD.variants.map(item => {
+                                        if (fromIndex === undefined ||
+                                            toIndex === undefined ||
+                                            fromIndex < 0 ||
+                                            fromIndex >= item.spec.length ||
+                                            toIndex < 0 ||
+                                            toIndex >= item.spec.length) {
+                                            throw new Error('索引超出範圍');
                                         }
-                                        return postMD.specs.map((dd, specIndex) => {
-                                            let temp = {
-                                                title: '',
-                                                option: [],
-                                            };
-                                            return {
-                                                title: gvc.bindView({
-                                                    bind: `editSpec${specIndex}`,
-                                                    dataList: [
-                                                        {
-                                                            obj: editSpectPage[specIndex],
-                                                            key: 'type',
-                                                        },
-                                                    ],
-                                                    view: () => {
-                                                        var _a;
-                                                        dd.language_title = ((_a = dd.language_title) !== null && _a !== void 0 ? _a : {});
-                                                        if (editSpectPage[specIndex].type == 'show') {
-                                                            return gvc.bindView({
-                                                                bind: gvc.glitter.getUUID(),
-                                                                view: () => {
-                                                                    return html `<div style="font-size: 16px;">
-                                            ${dd.language_title[sel_lan()] || dd.title}
+                                        let element = item.spec.splice(fromIndex, 1)[0];
+                                        item.spec.splice(toIndex, 0, element);
+                                        return item;
+                                    });
+                                    obj.gvc.notifyDataChange([specid, 'productInf', 'spec_text_show']);
+                                },
+                                array: () => {
+                                    function swapArray(arr, index1, index2) {
+                                        if (index1 === index2)
+                                            return;
+                                        const [item] = arr.splice(index1, 1);
+                                        arr.splice(index2, 0, item);
+                                    }
+                                    return postMD.specs.map((dd, specIndex) => {
+                                        let temp = {
+                                            title: '',
+                                            option: [],
+                                        };
+                                        return {
+                                            title: gvc.bindView({
+                                                bind: `editSpec${specIndex}`,
+                                                dataList: [
+                                                    {
+                                                        obj: editSpectPage[specIndex],
+                                                        key: 'type',
+                                                    },
+                                                ],
+                                                view: () => {
+                                                    var _a;
+                                                    dd.language_title = ((_a = dd.language_title) !== null && _a !== void 0 ? _a : {});
+                                                    if (editSpectPage[specIndex].type == 'show') {
+                                                        return gvc.bindView({
+                                                            bind: gvc.glitter.getUUID(),
+                                                            view: () => {
+                                                                return html ` <div style="font-size: 16px;">
+                                        ${dd.language_title[sel_lan()] || dd.title}
+                                      </div>
+                                      ${(() => {
+                                                                    let returnHTML = '';
+                                                                    dd.option.map((opt, index) => {
+                                                                        var _a;
+                                                                        opt.language_title = ((_a = opt.language_title) !== null && _a !== void 0 ? _a : {});
+                                                                        returnHTML += html `
+                                            <div
+                                              class="spec-option"
+                                              style="cursor: move;"
+                                              draggable="true"
+                                              data-index="${index}"
+                                            >
+                                              ${Tool.truncateString(opt.language_title[sel_lan()] || opt.title, 30)}
+                                            </div>
+                                          `;
+                                                                    });
+                                                                    return html `
+                                          <div class="d-flex w-100 flex-wrap gap-2" id="sortable-list-${specIndex}">
+                                            ${returnHTML}
+                                            <div
+                                              class="position-absolute"
+                                              style="right:12px;top:50%;transform: translateY(-50%);"
+                                              onclick="${gvc.event(() => {
+                                                                        createPage.page = 'add';
+                                                                        editIndex = specIndex;
+                                                                        gvc.notifyDataChange(specid);
+                                                                    })}"
+                                            >
+                                              <svg
+                                                style="cursor: pointer;"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                width="16"
+                                                height="17"
+                                                viewBox="0 0 16 17"
+                                                fill="none"
+                                              >
+                                                <g clip-path="url(#clip0_8114_2928)">
+                                                  <path
+                                                    d="M1.13728 11.7785L0.418533 14.2191L0.0310334 15.5379C-0.0470916 15.8035 0.0247834 16.0879 0.218533 16.2816C0.412283 16.4754 0.696658 16.5473 0.959158 16.4723L2.28103 16.0816L4.72166 15.3629C5.04666 15.2691 5.34978 15.1129 5.61541 14.9098L5.62478 14.916L5.64041 14.891C5.68416 14.8566 5.72478 14.8223 5.76541 14.7879C5.80916 14.7504 5.84978 14.7098 5.89041 14.6691L15.3967 5.16602C16.081 4.48164 16.1654 3.42852 15.6529 2.65039C15.581 2.54102 15.4935 2.43477 15.3967 2.33789L14.1654 1.10352C13.3842 0.322266 12.1185 0.322266 11.3373 1.10352L1.83103 10.6098C1.75291 10.6879 1.67791 10.7723 1.60916 10.8598L1.58416 10.8754L1.59041 10.8848C1.38728 11.1504 1.23416 11.4535 1.13728 11.7785ZM11.9685 6.46914L6.16853 12.2691L4.61853 11.8816L4.23103 10.3316L10.031 4.53164L11.9685 6.46914ZM3.03103 11.716L3.27166 12.6848C3.33728 12.9535 3.54978 13.1629 3.81853 13.2316L4.78728 13.4723L4.55603 13.8223C4.47478 13.866 4.39041 13.9035 4.30291 13.9285L3.57166 14.1441L1.85603 14.6441L2.35916 12.9316L2.57478 12.2004C2.59978 12.1129 2.63728 12.0254 2.68103 11.9473L3.03103 11.716ZM9.85291 7.33477C10.0467 7.14102 10.0467 6.82227 9.85291 6.62852C9.65916 6.43477 9.34041 6.43477 9.14666 6.62852L6.14666 9.62852C5.95291 9.82227 5.95291 10.141 6.14666 10.3348C6.34041 10.5285 6.65916 10.5285 6.85291 10.3348L9.85291 7.33477Z"
+                                                    fill="#393939"
+                                                  />
+                                                </g>
+                                                <defs>
+                                                  <clipPath id="clip0_8114_2928">
+                                                    <rect
+                                                      width="16"
+                                                      height="16"
+                                                      fill="white"
+                                                      transform="translate(0 0.5)"
+                                                    />
+                                                  </clipPath>
+                                                </defs>
+                                              </svg>
+                                            </div>
                                           </div>
-                                          ${(() => {
-                                                                        let returnHTML = '';
-                                                                        dd.option.map((opt, index) => {
-                                                                            var _a;
-                                                                            opt.language_title = ((_a = opt.language_title) !== null && _a !== void 0 ? _a : {});
-                                                                            returnHTML += html `
-                                                <div
-                                                  class="spec-option"
-                                                  style="cursor: move;"
-                                                  draggable="true"
-                                                  data-index="${index}"
-                                                >
-                                                  ${Tool.truncateString(opt.language_title[sel_lan()] || opt.title, 30)}
-                                                </div>
-                                              `;
-                                                                        });
-                                                                        return html `
-                                              <div class="d-flex w-100 flex-wrap gap-2" id="sortable-list-${specIndex}">
-                                                ${returnHTML}
-                                                <div
-                                                  class="position-absolute"
-                                                  style="right:12px;top:50%;transform: translateY(-50%);"
-                                                  onclick="${gvc.event(() => {
-                                                                            createPage.page = 'add';
-                                                                            editIndex = specIndex;
-                                                                            gvc.notifyDataChange(specid);
-                                                                        })}"
-                                                >
-                                                  <svg
-                                                    style="cursor: pointer;"
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    width="16"
-                                                    height="17"
-                                                    viewBox="0 0 16 17"
-                                                    fill="none"
-                                                  >
-                                                    <g clip-path="url(#clip0_8114_2928)">
-                                                      <path
-                                                        d="M1.13728 11.7785L0.418533 14.2191L0.0310334 15.5379C-0.0470916 15.8035 0.0247834 16.0879 0.218533 16.2816C0.412283 16.4754 0.696658 16.5473 0.959158 16.4723L2.28103 16.0816L4.72166 15.3629C5.04666 15.2691 5.34978 15.1129 5.61541 14.9098L5.62478 14.916L5.64041 14.891C5.68416 14.8566 5.72478 14.8223 5.76541 14.7879C5.80916 14.7504 5.84978 14.7098 5.89041 14.6691L15.3967 5.16602C16.081 4.48164 16.1654 3.42852 15.6529 2.65039C15.581 2.54102 15.4935 2.43477 15.3967 2.33789L14.1654 1.10352C13.3842 0.322266 12.1185 0.322266 11.3373 1.10352L1.83103 10.6098C1.75291 10.6879 1.67791 10.7723 1.60916 10.8598L1.58416 10.8754L1.59041 10.8848C1.38728 11.1504 1.23416 11.4535 1.13728 11.7785ZM11.9685 6.46914L6.16853 12.2691L4.61853 11.8816L4.23103 10.3316L10.031 4.53164L11.9685 6.46914ZM3.03103 11.716L3.27166 12.6848C3.33728 12.9535 3.54978 13.1629 3.81853 13.2316L4.78728 13.4723L4.55603 13.8223C4.47478 13.866 4.39041 13.9035 4.30291 13.9285L3.57166 14.1441L1.85603 14.6441L2.35916 12.9316L2.57478 12.2004C2.59978 12.1129 2.63728 12.0254 2.68103 11.9473L3.03103 11.716ZM9.85291 7.33477C10.0467 7.14102 10.0467 6.82227 9.85291 6.62852C9.65916 6.43477 9.34041 6.43477 9.14666 6.62852L6.14666 9.62852C5.95291 9.82227 5.95291 10.141 6.14666 10.3348C6.34041 10.5285 6.65916 10.5285 6.85291 10.3348L9.85291 7.33477Z"
-                                                        fill="#393939"
-                                                      />
-                                                    </g>
-                                                    <defs>
-                                                      <clipPath id="clip0_8114_2928">
-                                                        <rect
-                                                          width="16"
-                                                          height="16"
-                                                          fill="white"
-                                                          transform="translate(0 0.5)"
-                                                        />
-                                                      </clipPath>
-                                                    </defs>
-                                                  </svg>
-                                                </div>
-                                              </div>
-                                            `;
-                                                                    })()}`;
-                                                                },
-                                                                divCreate: {
-                                                                    class: 'd-flex flex-column',
-                                                                    style: 'gap: 6px; align-items: flex-start; padding: 12px 0;',
-                                                                },
-                                                                onCreate: () => {
-                                                                    gvc.addMtScript([{ src: 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js' }], () => {
-                                                                        const interval = setInterval(() => {
-                                                                            const Sortable = window.Sortable;
-                                                                            if (!Sortable)
+                                        `;
+                                                                })()}`;
+                                                            },
+                                                            divCreate: {
+                                                                class: 'd-flex flex-column',
+                                                                style: 'gap: 6px; align-items: flex-start; padding: 12px 0;',
+                                                            },
+                                                            onCreate: () => {
+                                                                gvc.addMtScript([{ src: 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js' }], () => {
+                                                                    const interval = setInterval(() => {
+                                                                        const Sortable = window.Sortable;
+                                                                        if (!Sortable)
+                                                                            return;
+                                                                        clearInterval(interval);
+                                                                        try {
+                                                                            const dragId = `sortable-list-${specIndex}`;
+                                                                            const dragEl = document.getElementById(dragId);
+                                                                            if (!dragEl) {
+                                                                                console.warn(`Element with id '${dragId}' not found.`);
                                                                                 return;
-                                                                            clearInterval(interval);
-                                                                            try {
-                                                                                const dragId = `sortable-list-${specIndex}`;
-                                                                                const dragEl = document.getElementById(dragId);
-                                                                                if (!dragEl) {
-                                                                                    console.warn(`Element with id '${dragId}' not found.`);
-                                                                                    return;
-                                                                                }
-                                                                                Sortable.create(dragEl, {
-                                                                                    group: { name: dragId, pull: false, put: false },
-                                                                                    animation: 150,
-                                                                                    onEnd(evt) {
-                                                                                        swapArray(postMD.specs[specIndex].option, evt.oldIndex, evt.newIndex);
-                                                                                    },
-                                                                                });
-                                                                            }
-                                                                            catch (e) {
-                                                                                console.error('SortableJS initialization error:', e);
                                                                             }
-                                                                        }, 100);
-                                                                    }, () => console.error('Failed to load SortableJS'));
+                                                                            Sortable.create(dragEl, {
+                                                                                group: { name: dragId, pull: false, put: false },
+                                                                                animation: 150,
+                                                                                onEnd(evt) {
+                                                                                    swapArray(postMD.specs[specIndex].option, evt.oldIndex, evt.newIndex);
+                                                                                },
+                                                                            });
+                                                                        }
+                                                                        catch (e) {
+                                                                            console.error('SortableJS initialization error:', e);
+                                                                        }
+                                                                    }, 100);
+                                                                }, () => console.error('Failed to load SortableJS'));
+                                                            },
+                                                        });
+                                                    }
+                                                    temp = JSON.parse(JSON.stringify(dd));
+                                                    if (sel_lan() !== window.parent.store_info.language_setting.def) {
+                                                        return obj.gvc.bindView({
+                                                            bind: 'spec_text_show',
+                                                            dataList: [
+                                                                {
+                                                                    obj: createPage,
+                                                                    key: 'page',
                                                                 },
-                                                            });
-                                                        }
-                                                        temp = JSON.parse(JSON.stringify(dd));
-                                                        if (sel_lan() !== window.parent.store_info.language_setting.def) {
-                                                            return obj.gvc.bindView({
-                                                                bind: 'spec_text_show',
-                                                                dataList: [
-                                                                    {
-                                                                        obj: createPage,
-                                                                        key: 'page',
-                                                                    },
-                                                                ],
-                                                                view: () => {
+                                                            ],
+                                                            view: () => {
+                                                                var _a;
+                                                                let returnHTML = '';
+                                                                let specs_in_line = [];
+                                                                temp.option = (_a = temp.option) !== null && _a !== void 0 ? _a : [];
+                                                                specs_in_line.push(html ` <div class="d-flex flex-column w-100">
+                                        <div class="d-flex  flex-column" style="gap:10px;">
+                                          <div class="fw-500">規格種類 - ${temp.title}</div>
+                                          <input
+                                            class="form-control w-100"
+                                            placeholder="${temp.title}"
+                                            style="width:100px;height: 35px;"
+                                            value="${temp.language_title[vm.language] || ''}"
+                                            onchange="${gvc.event((e, event) => {
+                                                                    temp.language_title[vm.language] = e.value;
+                                                                })}"
+                                          />
+                                        </div>
+                                        <div class="d-flex flex-column w-100" style="gap:5px;">
+                                          ${temp.option
+                                                                    .map((d, index) => {
                                                                     var _a;
-                                                                    let returnHTML = '';
-                                                                    let specs_in_line = [];
-                                                                    temp.option = (_a = temp.option) !== null && _a !== void 0 ? _a : [];
-                                                                    specs_in_line.push(html ` <div class="d-flex flex-column w-100">
-                                            <div class="d-flex  flex-column" style="gap:10px;">
-                                              <div class="fw-500">規格種類 - ${temp.title}</div>
-                                              <input
-                                                class="form-control w-100"
-                                                placeholder="${temp.title}"
-                                                style="width:100px;height: 35px;"
-                                                value="${temp.language_title[vm.language] || ''}"
-                                                onchange="${gvc.event((e, event) => {
-                                                                        temp.language_title[vm.language] = e.value;
+                                                                    d.language_title = (_a = d.language_title) !== null && _a !== void 0 ? _a : {};
+                                                                    return html ` <div class="d-flex flex-column mt-2" style="gap:10px;">
+                                                <div class="fw-500">選項${index + 1} - ${d.title}</div>
+                                                <input
+                                                  class="form-control w-100"
+                                                  placeholder="${d.title}"
+                                                  style="width:100px;height: 35px;"
+                                                  value="${d.language_title[vm.language] || ''}"
+                                                  onchange="${gvc.event((e, event) => {
+                                                                        d.language_title[vm.language] = e.value;
                                                                     })}"
-                                              />
-                                            </div>
-                                            <div class="d-flex flex-column w-100" style="gap:5px;">
-                                              ${temp.option
-                                                                        .map((d, index) => {
-                                                                        var _a;
-                                                                        d.language_title = (_a = d.language_title) !== null && _a !== void 0 ? _a : {};
-                                                                        return html ` <div class="d-flex flex-column mt-2" style="gap:10px;">
-                                                    <div class="fw-500">選項${index + 1} - ${d.title}</div>
-                                                    <input
-                                                      class="form-control w-100"
-                                                      placeholder="${d.title}"
-                                                      style="width:100px;height: 35px;"
-                                                      value="${d.language_title[vm.language] || ''}"
-                                                      onchange="${gvc.event((e, event) => {
-                                                                            d.language_title[vm.language] = e.value;
-                                                                        })}"
-                                                    />
-                                                  </div>`;
-                                                                    })
-                                                                        .join('<div class="mx-1"></div>')}
-                                            </div>
-                                          </div>`);
-                                                                    returnHTML += specs_in_line.join(`<div class="w-100 border-top"></div>`);
-                                                                    returnHTML += html ` <div
-                                          class="d-flex w-100 justify-content-end align-items-center w-100 bg-white"
-                                          style="gap:14px; margin-top: 12px;"
-                                        >
-                                          ${BgWidget.cancel(obj.gvc.event(() => {
-                                                                        editIndex = -1;
-                                                                        gvc.notifyDataChange(vm.id);
-                                                                    }))}
-                                          ${BgWidget.save(obj.gvc.event(() => {
-                                                                        postMD.specs[specIndex] = temp;
-                                                                        ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
-                                                                        gvc.notifyDataChange(vm.id);
-                                                                    }), '完成')}
-                                        </div>`;
-                                                                    return returnHTML;
-                                                                },
-                                                                divCreate: {
-                                                                    class: `d-flex flex-column p-3 my-2 border rounded-3`,
-                                                                    style: `gap:18px;background:white;`,
-                                                                },
-                                                            });
-                                                        }
-                                                        else {
-                                                            return html `
-                                      <div
-                                        style="background-color:white !important;display: flex;padding: 20px;flex-direction: column;align-items: flex-end;gap: 24px;align-self: stretch;border-radius: 10px;border: 1px solid #DDD;"
-                                      >
-                                        <div
-                                          style="display: flex;flex-direction: column;align-items: flex-end;gap: 18px;align-self: stretch;background-color:white !important;"
-                                        >
-                                          <div
-                                            style="width:100%;display: flex;flex-direction: column;align-items: flex-end;gap: 18px;background-color:white !important;"
-                                          >
-                                            ${ShoppingProductSetting.specInput(gvc, temp, {
-                                                                cancel: () => {
-                                                                    editSpectPage[specIndex].type = 'show';
+                                                />
+                                              </div>`;
+                                                                })
+                                                                    .join('<div class="mx-1"></div>')}
+                                        </div>
+                                      </div>`);
+                                                                returnHTML += specs_in_line.join(`<div class="w-100 border-top"></div>`);
+                                                                returnHTML += html ` <div
+                                      class="d-flex w-100 justify-content-end align-items-center w-100 bg-white"
+                                      style="gap:14px; margin-top: 12px;"
+                                    >
+                                      ${BgWidget.cancel(obj.gvc.event(() => {
                                                                     editIndex = -1;
-                                                                    gvc.notifyDataChange(specid);
-                                                                },
-                                                                save: () => {
-                                                                    editSpectPage[specIndex].type = 'show';
+                                                                    gvc.notifyDataChange(vm.id);
+                                                                }))}
+                                      ${BgWidget.save(obj.gvc.event(() => {
                                                                     postMD.specs[specIndex] = temp;
-                                                                    checkSpecSingle();
                                                                     ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
                                                                     gvc.notifyDataChange(vm.id);
-                                                                },
-                                                            })}
-                                          </div>
-                                        </div>
+                                                                }), '完成')}
+                                    </div>`;
+                                                                return returnHTML;
+                                                            },
+                                                            divCreate: {
+                                                                class: `d-flex flex-column p-3 my-2 border rounded-3`,
+                                                                style: `gap:18px;background:white;`,
+                                                            },
+                                                        });
+                                                    }
+                                                    else {
+                                                        return html `
+                                  <div
+                                    style="background-color:white !important;display: flex;padding: 20px;flex-direction: column;align-items: flex-end;gap: 24px;align-self: stretch;border-radius: 10px;border: 1px solid #DDD;"
+                                  >
+                                    <div
+                                      style="display: flex;flex-direction: column;align-items: flex-end;gap: 18px;align-self: stretch;background-color:white !important;"
+                                    >
+                                      <div
+                                        style="width:100%;display: flex;flex-direction: column;align-items: flex-end;gap: 18px;background-color:white !important;"
+                                      >
+                                        ${ShoppingProductSetting.specInput(gvc, temp, {
+                                                            cancel: () => {
+                                                                editSpectPage[specIndex].type = 'show';
+                                                                editIndex = -1;
+                                                                gvc.notifyDataChange(specid);
+                                                            },
+                                                            save: () => {
+                                                                editSpectPage[specIndex].type = 'show';
+                                                                postMD.specs[specIndex] = temp;
+                                                                checkSpecSingle();
+                                                                ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
+                                                                gvc.notifyDataChange(vm.id);
+                                                            },
+                                                        })}
                                       </div>
-                                    `;
-                                                        }
-                                                    },
-                                                    divCreate: { class: `w-100 position-relative` },
-                                                }),
-                                                innerHtml: (gvc) => {
-                                                    return '';
+                                    </div>
+                                  </div>
+                                `;
+                                                    }
                                                 },
-                                                editTitle: `編輯規格`,
-                                                draggable: editSpectPage[specIndex].type === 'show',
-                                            };
-                                        });
-                                    },
-                                })}
-                    `;
-                            }
-                            if (createPage.page == 'edit' && editIndex === -1) {
-                                let temp = {
-                                    title: '',
-                                    option: [],
-                                };
-                                returnHTML += html `
-                      ${BgWidget.mainCard(html `
-                        <div
-                          style="display: flex;flex-direction: column;align-items: flex-end;gap: 18px;align-self: stretch;"
-                        >
-                          <div style="width:100%;display: flex;flex-direction: column;align-items: flex-end;gap: 18px;">
-                            ${ShoppingProductSetting.specInput(gvc, temp, {
-                                    cancel: () => {
-                                        createPage.page = 'add';
-                                    },
-                                    save: () => {
-                                        postMD.specs.push(temp);
-                                        createPage.page = 'add';
-                                        checkSpecSingle();
-                                        ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
-                                        gvc.notifyDataChange([vm.id]);
-                                    },
-                                })}
-                          </div>
-                        </div>
-                      `)}
-                    `;
-                            }
-                            else if (sel_lan() !== window.parent.store_info.language_setting.def) {
-                                returnHTML += `<div class="w-100 d-flex align-items-center justify-content-center">${BgWidget.grayNote('若要新增規格請切換至預設語言新增')}</div>`;
-                            }
-                            else {
-                                returnHTML += html `
-                      <div
-                        style="width:100%;display:flex;align-items: center;justify-content: center;color: #36B;gap:6px;cursor: pointer;"
-                        onclick="${gvc.event(() => {
-                                    editIndex = -1;
-                                    createPage.page = 'edit';
-                                })}"
-                      >
-                        新增規格
-                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-                          <path
-                            d="M1.5 7.23926H12.5"
-                            stroke="#3366BB"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                          />
-                          <path
-                            d="M6.76172 1.5L6.76172 12.5"
-                            stroke="#3366BB"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                          />
-                        </svg>
-                      </div>
-                    `;
-                            }
-                            return returnHTML;
-                        },
-                        divCreate: {
-                            class: `d-flex flex-column`,
-                            style: `gap:18px;`,
-                        },
-                    };
-                })),
-                postMD.product_category === 'kitchen'
-                    ? (() => {
-                        var _a;
-                        let map_ = [];
-                        postMD.shipment_type = (_a = postMD.shipment_type) !== null && _a !== void 0 ? _a : 'volume';
-                        map_.push(BgWidget.mainCard(gvc.bindView(() => {
-                            const vm = {
-                                id: gvc.glitter.getUUID(),
+                                                divCreate: { class: `w-100 position-relative` },
+                                            }),
+                                            innerHtml: (gvc) => {
+                                                return '';
+                                            },
+                                            editTitle: `編輯規格`,
+                                            draggable: editSpectPage[specIndex].type === 'show',
+                                        };
+                                    });
+                                },
+                            })}
+                `;
+                        }
+                        if (createPage.page == 'edit' && editIndex === -1) {
+                            let temp = {
+                                title: '',
+                                option: [],
                             };
-                            return {
-                                bind: vm.id,
-                                view: () => {
-                                    return html ` <div style="font-weight: 700;margin-bottom: 6px;">運費計算</div>
-                            ${BgWidget.multiCheckboxContainer(gvc, [
-                                        {
-                                            key: 'volume',
-                                            name: '依材積計算',
-                                            customerClass: 'guide5-6',
-                                        },
-                                        {
-                                            key: 'weight',
-                                            name: '依重量計算',
-                                        },
-                                        {
-                                            key: 'none',
-                                            name: '不計算運費',
-                                        },
-                                    ], [postMD.shipment_type], data => {
-                                        postMD.shipment_type = data[0];
-                                        gvc.notifyDataChange(vm.id);
-                                    }, { single: true })}`;
+                            returnHTML += html `
+                  ${BgWidget.mainCard(html `
+                    <div
+                      style="display: flex;flex-direction: column;align-items: flex-end;gap: 18px;align-self: stretch;"
+                    >
+                      <div style="width:100%;display: flex;flex-direction: column;align-items: flex-end;gap: 18px;">
+                        ${ShoppingProductSetting.specInput(gvc, temp, {
+                                cancel: () => {
+                                    createPage.page = 'add';
                                 },
-                                divCreate: {
-                                    class: `d-flex flex-column `,
-                                    style: `gap:12px;`,
+                                save: () => {
+                                    postMD.specs.push(temp);
+                                    createPage.page = 'add';
+                                    checkSpecSingle();
+                                    ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
+                                    gvc.notifyDataChange([vm.id]);
                                 },
-                            };
-                        })));
-                        map_.push(BgWidget.mainCard(html `
-                    <div class="d-flex flex-column" style="gap:18px;">
-                      <div class="d-flex flex-column guide5-7" style="gap:18px;">
-                        <div style="font-weight: 700;"></div>
-                        <div class="row">
-                          ${[
-                            {
-                                title: '長度',
-                                value: 'v_length',
-                                unit: '公分',
-                            },
-                            {
-                                title: '寬度',
-                                value: 'v_width',
-                                unit: '公分',
-                            },
-                            {
-                                title: '高度',
-                                value: 'v_height',
-                                unit: '公分',
-                            },
-                        ]
-                            .map(dd => {
-                            postMD[dd.value] = postMD[dd.value] || '0';
-                            return html ` <div
-                                style="display: flex;justify-content: center;align-items: center;gap: 10px;position: relative;"
-                                class=" col-12 col-sm-4 mb-2"
-                              >
-                                <div style="white-space: nowrap;">${dd.title}</div>
-                                <input
-                                  class="ps-3"
-                                  style="border-radius: 10px;border: 1px solid #DDD;height: 40px;width: calc(100% - 50px);"
-                                  type="number"
-                                  onchange="${gvc.event(e => {
-                                postMD[dd.value] = e.value;
-                            })}"
-                                  value="${postMD[dd.value]}"
-                                />
-                                <div style="color: #8D8D8D;position: absolute;right: 25px;top: 7px;">${dd.unit}</div>
-                              </div>`;
-                        })
-                            .join('')}
-                        </div>
-                      </div>
-                      <div style="font-weight: 700;">商品重量</div>
-                      <div class="w-100 row m-0" style="color:#393939;">
-                        <input
-                          class="col-6"
-                          style="display: flex;height: 40px;padding: 10px 18px;align-items: center;gap: 10px;border-radius: 10px;border: 1px solid #DDD;"
-                          placeholder="請輸入商品重量"
-                          value="${postMD['weight'] || 0}"
-                          onchange="${gvc.event(e => {
-                            postMD['weight'] = e.value;
-                        })}"
-                        />
-                        <div class="col-6" style="display: flex;align-items: center;gap: 10px;">
-                          <div style="white-space: nowrap;">單位</div>
-                          <select
-                            class="form-select d-flex align-items-center flex-fill"
-                            style="border-radius: 10px;border: 1px solid #DDD;padding-left: 18px;"
-                          >
-                            <option value="kg">公斤</option>
-                          </select>
-                        </div>
+                            })}
                       </div>
                     </div>
-                  `));
-                        if (postMD.specs.length) {
-                            map_.push(BgWidget.mainCard([
-                                html `
-                          <div
-                            class="d-flex flex-column"
-                            style="font-size: 16px;font-weight: 700;color:#393939;${postMD.shopee_id
-                                    ? ''
-                                    : `margin-bottom: 10px;`}"
-                          >
-                            組合費用
-                            ${BgWidget.grayNote('購買金額為用戶選擇的選項價格去進行加總，如未輸入庫存數量則不追蹤庫存')}
-                          </div>
-                        `,
-                                obj.gvc.bindView(() => {
-                                    const vm = {
-                                        id: obj.gvc.glitter.getUUID(),
-                                    };
-                                    return {
-                                        bind: vm.id,
-                                        view: () => {
-                                            return (html `
-                                  <div class="w-100 d-flex align-items-center border-bottom py-2 border-top">
-                                    <div class="fw-500" style="flex:1;">名稱</div>
-                                    <div class="fw-500" style="flex:1;">價格</div>
-                                    <div class="fw-500" style="flex:1;">庫存</div>
-                                  </div>
-                                ` +
-                                                postMD.specs
-                                                    .map(dd => {
-                                                    return dd.option
-                                                        .map((d1) => {
-                                                        var _a;
-                                                        d1.price = (_a = d1.price) !== null && _a !== void 0 ? _a : 0;
-                                                        return html `<div class="w-100 d-flex align-items-center py-2">
-                                          <div class="fw-500" style="flex:1;">${dd.title} / ${d1.title}</div>
-                                          <div class="fw-50 pe-3" style="flex:1;">
-                                            ${BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '',
-                                                            default: `${d1.price}`,
-                                                            callback: text => {
-                                                                d1.price = parseInt(text, 10);
-                                                                ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
-                                                            },
-                                                            placeHolder: '價格',
-                                                            type: 'number',
-                                                        })}
-                                          </div>
-                                          <div class="fw-50" style="flex:1;">
-                                            ${BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '',
-                                                            default: `${d1.stock}`,
-                                                            callback: text => {
-                                                                d1.stock = text;
-                                                            },
-                                                            placeHolder: '不追蹤庫存',
-                                                            type: 'number',
-                                                        })}
-                                          </div>
-                                        </div>`;
-                                                    })
-                                                        .join('');
-                                                })
-                                                    .join(''));
-                                        },
-                                    };
-                                }),
-                            ].join('')));
+                  `)}
+                `;
+                        }
+                        else if (sel_lan() !== window.parent.store_info.language_setting.def) {
+                            returnHTML += `<div class="w-100 d-flex align-items-center justify-content-center">${BgWidget.grayNote('若要新增規格請切換至預設語言新增')}</div>`;
                         }
                         else {
-                            map_.push(BgWidget.mainCard(obj.gvc.bindView(() => {
+                            returnHTML += html `
+                  <div
+                    style="width:100%;display:flex;align-items: center;justify-content: center;color: #36B;gap:6px;cursor: pointer;"
+                    onclick="${gvc.event(() => {
+                                editIndex = -1;
+                                createPage.page = 'edit';
+                            })}"
+                  >
+                    新增規格
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                      <path
+                        d="M1.5 7.23926H12.5"
+                        stroke="#3366BB"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M6.76172 1.5L6.76172 12.5"
+                        stroke="#3366BB"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </div>
+                `;
+                        }
+                        return returnHTML;
+                    },
+                    divCreate: {
+                        class: `d-flex flex-column`,
+                        style: `gap:18px;`,
+                    },
+                };
+            }));
+        }
+        function drawKitchenSingleSpecDetail() {
+            return postMD.product_category === 'kitchen'
+                ? (() => {
+                    var _a;
+                    let map_ = [];
+                    postMD.shipment_type = (_a = postMD.shipment_type) !== null && _a !== void 0 ? _a : 'volume';
+                    map_.push(BgWidget.mainCard(gvc.bindView(() => {
+                        const vm = {
+                            id: gvc.glitter.getUUID(),
+                        };
+                        return {
+                            bind: vm.id,
+                            view: () => {
+                                return html ` <!-- 繪製餐飲組合的單規格詳細區塊-->
+                        <div style="font-weight: 700;margin-bottom: 6px;">運費計算</div>
+                        ${BgWidget.multiCheckboxContainer(gvc, [
+                                    {
+                                        key: 'volume',
+                                        name: '依材積計算',
+                                        customerClass: 'guide5-6',
+                                    },
+                                    {
+                                        key: 'weight',
+                                        name: '依重量計算',
+                                    },
+                                    {
+                                        key: 'none',
+                                        name: '不計算運費',
+                                    },
+                                ], [postMD.shipment_type], data => {
+                                    postMD.shipment_type = data[0];
+                                    gvc.notifyDataChange(vm.id);
+                                }, { single: true })}`;
+                            },
+                            divCreate: {
+                                class: `d-flex flex-column `,
+                                style: `gap:12px;`,
+                            },
+                        };
+                    })));
+                    map_.push(BgWidget.mainCard(html `
+                <div class="d-flex flex-column" style="gap:18px;">
+                  <div class="d-flex flex-column guide5-7" style="gap:18px;">
+                    <div style="font-weight: 700;"></div>
+                    <div class="row">
+                      ${[
+                        {
+                            title: '長度',
+                            value: 'v_length',
+                            unit: '公分',
+                        },
+                        {
+                            title: '寬度',
+                            value: 'v_width',
+                            unit: '公分',
+                        },
+                        {
+                            title: '高度',
+                            value: 'v_height',
+                            unit: '公分',
+                        },
+                    ]
+                        .map(dd => {
+                        postMD[dd.value] = postMD[dd.value] || '0';
+                        return html ` <div
+                            style="display: flex;justify-content: center;align-items: center;gap: 10px;position: relative;"
+                            class=" col-12 col-sm-4 mb-2"
+                          >
+                            <div style="white-space: nowrap;">${dd.title}</div>
+                            <input
+                              class="ps-3"
+                              style="border-radius: 10px;border: 1px solid #DDD;height: 40px;width: calc(100% - 50px);"
+                              type="number"
+                              onchange="${gvc.event(e => {
+                            postMD[dd.value] = e.value;
+                        })}"
+                              value="${postMD[dd.value]}"
+                            />
+                            <div style="color: #8D8D8D;position: absolute;right: 25px;top: 7px;">${dd.unit}</div>
+                          </div>`;
+                    })
+                        .join('')}
+                    </div>
+                  </div>
+                  <div style="font-weight: 700;">商品重量</div>
+                  <div class="w-100 row m-0" style="color:#393939;">
+                    <input
+                      class="col-6"
+                      style="display: flex;height: 40px;padding: 10px 18px;align-items: center;gap: 10px;border-radius: 10px;border: 1px solid #DDD;"
+                      placeholder="請輸入商品重量"
+                      value="${postMD['weight'] || 0}"
+                      onchange="${gvc.event(e => {
+                        postMD['weight'] = e.value;
+                    })}"
+                    />
+                    <div class="col-6" style="display: flex;align-items: center;gap: 10px;">
+                      <div style="white-space: nowrap;">單位</div>
+                      <select
+                        class="form-select d-flex align-items-center flex-fill"
+                        style="border-radius: 10px;border: 1px solid #DDD;padding-left: 18px;"
+                      >
+                        <option value="kg">公斤</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              `));
+                    if (postMD.specs.length) {
+                        map_.push(BgWidget.mainCard([
+                            html `
+                      <div
+                        class="d-flex flex-column"
+                        style="font-size: 16px;font-weight: 700;color:#393939;${postMD.shopee_id
+                                ? ''
+                                : `margin-bottom: 10px;`}"
+                      >
+                        組合費用
+                        ${BgWidget.grayNote('購買金額為用戶選擇的選項價格去進行加總，如未輸入庫存數量則不追蹤庫存')}
+                      </div>
+                    `,
+                            obj.gvc.bindView(() => {
                                 const vm = {
                                     id: obj.gvc.glitter.getUUID(),
                                 };
                                 return {
                                     bind: vm.id,
                                     view: () => {
-                                        var _a, _b;
-                                        postMD.price = (_a = postMD.price) !== null && _a !== void 0 ? _a : 0;
-                                        postMD.stock = (_b = postMD.stock) !== null && _b !== void 0 ? _b : 0;
-                                        return [
-                                            html `
-                                <div
-                                  class="d-flex flex-column"
-                                  style="font-size: 16px;font-weight: 700;color:#393939;${postMD.shopee_id
-                                                ? ''
-                                                : `margin-bottom: 10px;`}"
-                                >
-                                  組合費用 ${BgWidget.grayNote('如未輸入庫存數量則不追蹤庫存')}
-                                </div>
-                              `,
-                                            html `
-                                <div class="w-100 d-flex align-items-center border-bottom py-2 border-top">
-                                  <div class="fw-500" style="flex:1;">價格</div>
-                                  <div class="fw-500" style="flex:1;">庫存</div>
-                                </div>
-                              `,
-                                            html `<div class="w-100 d-flex align-items-center py-2">
-                                <div class="fw-50 pe-3" style="flex:1;">
-                                  ${BgWidget.editeInput({
-                                                gvc: gvc,
-                                                title: '',
-                                                default: `${postMD.price}`,
-                                                callback: text => {
-                                                    postMD.price = parseInt(text, 10);
-                                                    ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
-                                                },
-                                                placeHolder: '價格',
-                                                type: 'number',
-                                            })}
-                                </div>
-                                <div class="fw-50" style="flex:1;">
-                                  ${BgWidget.editeInput({
-                                                gvc: gvc,
-                                                title: '',
-                                                default: `${postMD.stock}`,
-                                                callback: text => {
-                                                    postMD.stock = text;
-                                                },
-                                                placeHolder: '不追蹤庫存',
-                                                type: 'number',
-                                            })}
-                                </div>
-                              </div>`,
-                                        ].join('');
+                                        return (html `
+                              <div class="w-100 d-flex align-items-center border-bottom py-2 border-top">
+                                <div class="fw-500" style="flex:1;">名稱</div>
+                                <div class="fw-500" style="flex:1;">價格</div>
+                                <div class="fw-500" style="flex:1;">庫存</div>
+                              </div>
+                            ` +
+                                            postMD.specs
+                                                .map(dd => {
+                                                return dd.option
+                                                    .map((d1) => {
+                                                    var _a;
+                                                    d1.price = (_a = d1.price) !== null && _a !== void 0 ? _a : 0;
+                                                    return html ` <div class="w-100 d-flex align-items-center py-2">
+                                      <div class="fw-500" style="flex:1;">${dd.title} / ${d1.title}</div>
+                                      <div class="fw-50 pe-3" style="flex:1;">
+                                        ${BgWidget.editeInput({
+                                                        gvc: gvc,
+                                                        title: '',
+                                                        default: `${d1.price}`,
+                                                        callback: text => {
+                                                            d1.price = parseInt(text, 10);
+                                                            ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
+                                                        },
+                                                        placeHolder: '價格',
+                                                        type: 'number',
+                                                    })}
+                                      </div>
+                                      <div class="fw-50" style="flex:1;">
+                                        ${BgWidget.editeInput({
+                                                        gvc: gvc,
+                                                        title: '',
+                                                        default: `${d1.stock}`,
+                                                        callback: text => {
+                                                            d1.stock = text;
+                                                        },
+                                                        placeHolder: '不追蹤庫存',
+                                                        type: 'number',
+                                                    })}
+                                      </div>
+                                    </div>`;
+                                                })
+                                                    .join('');
+                                            })
+                                                .join(''));
                                     },
                                 };
-                            })));
+                            }),
+                        ].join('')));
+                    }
+                    else {
+                        map_.push(BgWidget.mainCard(obj.gvc.bindView(() => {
+                            const vm = {
+                                id: obj.gvc.glitter.getUUID(),
+                            };
+                            return {
+                                bind: vm.id,
+                                view: () => {
+                                    var _a, _b;
+                                    postMD.price = (_a = postMD.price) !== null && _a !== void 0 ? _a : 0;
+                                    postMD.stock = (_b = postMD.stock) !== null && _b !== void 0 ? _b : 0;
+                                    return [
+                                        html `
+                            <div
+                              class="d-flex flex-column"
+                              style="font-size: 16px;font-weight: 700;color:#393939;${postMD.shopee_id
+                                            ? ''
+                                            : `margin-bottom: 10px;`}"
+                            >
+                              組合費用 ${BgWidget.grayNote('如未輸入庫存數量則不追蹤庫存')}
+                            </div>
+                          `,
+                                        html `
+                            <div class="w-100 d-flex align-items-center border-bottom py-2 border-top">
+                              <div class="fw-500" style="flex:1;">價格</div>
+                              <div class="fw-500" style="flex:1;">庫存</div>
+                            </div>
+                          `,
+                                        html ` <div class="w-100 d-flex align-items-center py-2">
+                            <div class="fw-50 pe-3" style="flex:1;">
+                              ${BgWidget.editeInput({
+                                            gvc: gvc,
+                                            title: '',
+                                            default: `${postMD.price}`,
+                                            callback: text => {
+                                                postMD.price = parseInt(text, 10);
+                                                ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
+                                            },
+                                            placeHolder: '價格',
+                                            type: 'number',
+                                        })}
+                            </div>
+                            <div class="fw-50" style="flex:1;">
+                              ${BgWidget.editeInput({
+                                            gvc: gvc,
+                                            title: '',
+                                            default: `${postMD.stock}`,
+                                            callback: text => {
+                                                postMD.stock = text;
+                                            },
+                                            placeHolder: '不追蹤庫存',
+                                            type: 'number',
+                                        })}
+                            </div>
+                          </div>`,
+                                    ].join('');
+                                },
+                            };
+                        })));
+                    }
+                    return map_.join(BgWidget.mbContainer(18));
+                })()
+                : '';
+        }
+        function drawReservationSettings() {
+            function drawTitle(title, subTitle, inputKey) {
+                return html `
+          <div class="d-flex flex-column w-100" >
+            <div class="tx_700 ">${title}</div>
+            ${subTitle
+                    ? html `<div class="tx_gray_14" style="margin: 4px 0 8px 0;">${subTitle}</div>`
+                    : html `<div style="height: 18px;"></div>`}
+            <div class="d-flex" style="gap: 18px;">
+              <div class="d-flex flex-fill align-items-center" style="height: 40px;padding: 0 18px;border-radius: 10px;border: 1px solid #DDD;">
+                <input class="border-0 h-100 flex-fill" >
+                <div class="tx_gray_14 ms-auto">小時</div>
+              </div>
+              <div class="d-flex flex-fill align-items-center" style="height: 40px;padding: 0 18px;border-radius: 10px;border: 1px solid #DDD;">
+                <input class="border-0 h-100 flex-fill" >
+                <div class="tx_gray_14 ms-auto">分鐘</div>
+              </div>
+            </div>
+          </div>
+        `;
+            }
+            return BgWidget.mainCard(html `
+        ${drawTitle("預設服務時長", "", "defaultServiceDuration")}
+        <div class="tx_700">
+          預設服務時長
+        </div>
+      `);
+        }
+        ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
+        const cat_title = (() => {
+            switch (postMD.product_category) {
+                case 'commodity':
+                    return '商品';
+                case 'course':
+                    return '課程';
+                case 'reserve':
+                    return '預約';
+                case 'kitchen':
+                    return '餐飲組合';
+                default:
+                    return '商品';
+            }
+        })();
+        return BgWidget.container1x2({
+            html: [
+                BgWidget.mainCard(html `
+            <div class="d-flex flex-column guide5-4">
+              <div style="font-weight: 700;">
+                ${cat_title}名稱 ${BgWidget.requiredStar()}
+                ${BgWidget.languageInsignia(vm.language, 'margin-left:5px;')}
+              </div>
+              ${BgWidget.editeInput({
+                    gvc: gvc,
+                    title: '',
+                    type: 'text',
+                    default: (_a = language_data.title) !== null && _a !== void 0 ? _a : '',
+                    placeHolder: `請輸入${cat_title}名稱`,
+                    callback: text => {
+                        if (language_data.seo.domain === language_data.title) {
+                            language_data.seo.domain = text;
                         }
-                        return map_.join(BgWidget.mbContainer(18));
-                    })()
-                    : '',
+                        language_data.title = text;
+                        gvc.notifyDataChange('seo');
+                    },
+                })}
+            </div>
+          `),
+                drawShortDescriptionRichText(),
+                drawDetailDescriptionRichText(),
+                drawProductImageBlock(),
+                drawReserveLocations(),
+                drawReservationSettings(),
+                drawIndividualStoreProductConfigPanel(),
+                drawSpecEditView(),
+                drawProductSpecList(),
+                drawKitchenSingleSpecDetail(),
                 postMD.product_category !== 'kitchen' && postMD.specs.length
                     ? (() => {
                         var _a;
@@ -2883,11 +3145,11 @@ export class ShoppingSettingBasic {
                                                                                     },
                                                                                 });
                                                                             })
-                                                                                .join(html `<div class="border-bottom my-1 w-100"></div>`));
+                                                                                .join(html ` <div class="border-bottom my-1 w-100"></div>`));
                                                                         }
                                                                         return viewList.join('');
                                                                     })
-                                                                        .join(html `<div class="border-bottom mx-n2 my-1 w-100"></div>`);
+                                                                        .join(html ` <div class="border-bottom mx-n2 my-1 w-100"></div>`);
                                                                 },
                                                             };
                                                         }),
@@ -2923,8 +3185,8 @@ export class ShoppingSettingBasic {
                         搜尋引擎列表 ${BgWidget.languageInsignia(sel_lan(), 'margin-left:5px;')}
                       </div>
                       ${[
-                                    html `<div class="tx_normal fw-normal mb-2">${cat_title}網址 ${BgWidget.requiredStar()}</div> `,
-                                    html `<div
+                                    html ` <div class="tx_normal fw-normal mb-2">${cat_title}網址 ${BgWidget.requiredStar()}</div> `,
+                                    html ` <div
                           style="justify-content: flex-start; align-items: center; display: inline-flex;border:1px solid #EAEAEA;border-radius: 10px;overflow: hidden; ${document
                                         .body.clientWidth > 768
                                         ? 'gap: 18px; '