ts-glitter 22.4.7 → 22.5.0

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

@@ -11,9 +11,10 @@ import { ProductSetting } from './module/product-setting.js';
 import { QuestionInfo } from './module/question-info.js';
 import { ProductAi } from './ai-generator/product-ai.js';
 import { ShoppingProductSetting } from './shopping-product-setting.js';
-import { ActiveSchedule, Product, Variant } from '../public-models/product.js';
+import { Store, ActiveSchedule, Product, Variant } from '../public-models/product.js';
 
 const html = String.raw;
+const css = String.raw;
 
 export class ShoppingSettingBasic {
   public static updateVariants(gvc: GVC, postMD: Product, shipment_config: any, variantsViewID: string, obj: any) {
@@ -83,24 +84,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: any) => {
-            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',
@@ -122,6 +105,27 @@ export class ShoppingSettingBasic {
         stockList: {},
         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: any) => {
+                return dd.title === b;
+              })
+            ) {
+              pass = false;
+              break;
+            }
+            index++;
+          }
+          return pass && variant.spec.length === postMD.specs.length;
+        });
+      }
     }
 
     postMD.variants.map((dd: any) => {
@@ -170,6 +174,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: Store[] = [];
     let selectFunRow = false;
     let createPage: any = { page: 'add' };
 
@@ -241,852 +255,1032 @@ 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: language_data.title ?? '',
-                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(() => {
-                const vm = {
-                  id: obj.gvc.glitter.getUUID(),
-                  type: 'product-detail',
-                  documents: [],
-                };
-
-                language_data.content_array = language_data.content_array ?? [];
-                language_data.content_json = language_data.content_json ?? [];
-                return {
-                  bind: vm.id,
-                  view: async () => {
-                    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(() => {
+            const vm = {
+              id: obj.gvc.glitter.getUUID(),
+              type: 'product-detail',
+              documents: [],
+            };
+
+            language_data.content_array = language_data.content_array ?? [];
+            language_data.content_json = language_data.content_json ?? [];
+            return {
+              bind: vm.id,
+              view: async () => {
+                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(
-                          (() => {
-                            const id = gvc.glitter.getUUID();
-                            language_data.sub_title = language_data.sub_title ?? '';
-                            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({
-                                            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;
+                    </div>
+                    <div class="flex-fill"></div>
+                  </div>
+                  ${BgWidget.grayNote(`將顯示於${cat_title}名稱下方，快速呈現${cat_title}重點資訊，建議精簡`)}
+                  <div class="my-3">
+                    ${gvc.bindView(
+                      (() => {
+                        const id = gvc.glitter.getUUID();
+                        language_data.sub_title = language_data.sub_title ?? '';
+                        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({
+                                        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: '請選擇至少一張圖片' });
+                                              }
                                             },
-                                            rich_height: `calc(${(window.parent as any).innerHeight}px - 70px - 58px - 49px - 64px - 40px + ${
-                                              document.body.clientWidth < 800 ? `70` : `0`
-                                            }px)`,
-                                          })}
-                                        </div>`;
-                                      },
-                                      footer_html: (gvc2: GVC) => {
-                                        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 (() => {
-                      const vm = {
-                        id: obj.gvc.glitter.getUUID(),
-                        type: 'product-detail',
-                        loading: true,
-                        documents: [],
-                      };
-
-                      language_data.content_array = language_data.content_array ?? [];
-                      language_data.content_json = language_data.content_json ?? [];
+                                            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 as any).innerHeight}px - 70px - 58px - 49px - 64px - 40px + ${
+                                          document.body.clientWidth < 800 ? `70` : `0`
+                                        }px)`,
+                                      })}
+                                    </div>`;
+                                  },
+                                  footer_html: (gvc2: GVC) => {
+                                    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>`;
+                          },
+                        };
+                      })()
+                    )}
+                  </div>`;
+              },
+            };
+          }),
+        ].join(BgWidget.mbContainer(12))
+      );
+    }
 
-                      if (!vm_this.content_detail) {
-                        ApiUser.getPublicConfig('text-manager', 'manager').then((data: any) => {
-                          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;
-                        vm.loading = false;
+    function drawDetailDescriptionRichText() {
+      return obj.postMD.productType.giveaway
+        ? ''
+        : BgWidget.mainCard(
+            [
+              obj.gvc.bindView(() => {
+                const vm_this = vm;
+                return (() => {
+                  const vm = {
+                    id: obj.gvc.glitter.getUUID(),
+                    type: 'product-detail',
+                    loading: true,
+                    documents: [],
+                  };
+
+                  language_data.content_array = language_data.content_array ?? [];
+                  language_data.content_json = language_data.content_json ?? [];
+
+                  if (!vm_this.content_detail) {
+                    ApiUser.getPublicConfig('text-manager', 'manager').then((data: any) => {
+                      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;
+                    vm.loading = false;
+                  }
 
-                      return {
-                        bind: vm.id,
-                        view: async () => {
-                          if (vm.loading) {
-                            return BgWidget.spinner();
-                          }
+                  return {
+                    bind: vm.id,
+                    view: async () => {
+                      if (vm.loading) {
+                        return BgWidget.spinner();
+                      }
 
-                          language_data.content_array = language_data.content_array.filter((id: any) => {
-                            return vm.documents.some((item: any) => item.id === id);
-                          });
-                          language_data.content_json = language_data.content_json.filter((d: any) => {
-                            return vm.documents.some((item: any) => item.id === d.id);
-                          });
+                      language_data.content_array = language_data.content_array.filter((id: any) => {
+                        return vm.documents.some((item: any) => item.id === id);
+                      });
+                      language_data.content_json = language_data.content_json.filter((d: any) => {
+                        return vm.documents.some((item: any) => item.id === d.id);
+                      });
 
-                          function formatRichtext(
-                            text: string,
-                            tags: {
-                              key: string;
-                              title: string;
-                              font_size: string;
-                              font_color: string;
-                              font_bgr: string;
-                            }[],
-                            jsonData: {
-                              key: string;
-                              value: string;
-                            }[]
-                          ) {
-                            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: ${item.font_size ?? '14'}px; color: ${item.font_color ??
-                                        '#393939'}; background: ${item.font_bgr ?? '#fff'}"
-                                        >${data.value}</span
-                                      >`
-                                    : html`#${item.title}#`;
-                                // : html`<img
-                                //       alt="${item.key}"
-                                //       class="rounded-2"
-                                //       src="https://assets.imgix.net/~text?bg=4d86db&txtclr=f2f2f2&w=${Tool.twenLength(item.title) *
-                                //       20}&h=40&txtsize=12&txt=${item.title}&txtfont=Helvetica&txtalign=middle,center"
-                                //   />`;
-
-                                const regex = new RegExp(`@{{${item.key}}}`, 'g');
-                                gText = gText.replace(regex, textImage);
-                              }
-                            }
-                            return gText;
+                      function formatRichtext(
+                        text: string,
+                        tags: {
+                          key: string;
+                          title: string;
+                          font_size: string;
+                          font_color: string;
+                          font_bgr: string;
+                        }[],
+                        jsonData: {
+                          key: string;
+                          value: string;
+                        }[]
+                      ) {
+                        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: ${item.font_size ?? '14'}px; color: ${item.font_color ??
+                                    '#393939'}; background: ${item.font_bgr ?? '#fff'}"
+                                    >${data.value}</span
+                                  >`
+                                : html`#${item.title}#`;
+                            // : html`<img
+                            //       alt="${item.key}"
+                            //       class="rounded-2"
+                            //       src="https://assets.imgix.net/~text?bg=4d86db&txtclr=f2f2f2&w=${Tool.twenLength(item.title) *
+                            //       20}&h=40&txtsize=12&txt=${item.title}&txtfont=Helvetica&txtalign=middle,center"
+                            //   />`;
+
+                            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<boolean>(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: any) => {
-                                                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: any) => 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`,
-                                                  },
-                                                ],
-                                                () => {},
-                                                () => {}
-                                              );
-                                              const interval = setInterval(() => {
-                                                if ((window as any).Sortable) {
-                                                  try {
-                                                    gvc.addStyle(`
+                      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<boolean>(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: any) => {
+                                            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: any) => 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`,
+                                              },
+                                            ],
+                                            () => {},
+                                            () => {}
+                                          );
+                                          const interval = setInterval(() => {
+                                            if ((window as any).Sortable) {
+                                              try {
+                                                gvc.addStyle(`
                                                   ul {
                                                     list-style: none;
                                                     padding: 0;
                                                   }
                                                 `);
 
-                                                    function swapArr(arr: any, t1: number, t2: number) {
-                                                      const data = arr[t1];
-                                                      arr.splice(t1, 1);
-                                                      arr.splice(t2, 0, data);
-                                                    }
+                                                function swapArr(arr: any, t1: number, t2: number) {
+                                                  const data = arr[t1];
+                                                  arr.splice(t1, 1);
+                                                  arr.splice(t2, 0, data);
+                                                }
 
-                                                    let startIndex = 0;
-                                                    //@ts-ignore
-                                                    Sortable.create(gvc.getBindViewElem(id).get(0), {
-                                                      group: id,
-                                                      animation: 100,
-                                                      handle: '.dragItem',
-                                                      onEnd: (evt: any) => {
-                                                        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: any) => {
-                                                        startIndex = evt.oldIndex;
-                                                      },
+                                                let startIndex = 0;
+                                                //@ts-ignore
+                                                Sortable.create(gvc.getBindViewElem(id).get(0), {
+                                                  group: id,
+                                                  animation: 100,
+                                                  handle: '.dragItem',
+                                                  onEnd: (evt: any) => {
+                                                    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: '設定失敗' });
+                                                      }
                                                     });
-                                                  } catch (e) {}
-                                                  clearInterval(interval);
-                                                }
-                                              }, 100);
+                                                  },
+                                                  onStart: (evt: any) => {
+                                                    startIndex = evt.oldIndex;
+                                                  },
+                                                });
+                                              } 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();
-                                                    });
+                                },
+                              });
+                            })}"
+                          >
+                            設定<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: '請選擇至少一張圖片' });
+                                                    }
                                                   },
-                                                })}
-                                              </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(
+                                                  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 as any).innerHeight}px - 70px - 58px - 49px - 64px - 40px + ${
+                                                document.body.clientWidth < 800 ? `70` : `0`
+                                              }px)`,
+                                            })}
+                                          </div>`;
+                                        },
+                                        footer_html: (gvc2: GVC) => {
+                                          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;
+                                        },
+                                      });
+                                    })}"
+                                  >
+                                    ${(() => {
+                                      const text = gvc.glitter.utText.removeTag(language_data.content);
+                                      return BgWidget.richTextView(Tool.truncateString(text, 100));
+                                    })()}
+                                  </div>`;
+                                },
+                              };
+                            })()
+                          )}
+                        </div>
+                        ${(vm.documents || [])
+                          .filter((item: any) => {
+                            return language_data.content_array.includes(item.id);
+                          })
+                          .map((item: any, 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: { key: string; title: string }) => {
+                                                  return html` <div>
+                                                    ${BgWidget.editeInput({
                                                       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: '請選擇至少一張圖片' });
+                                                      title: tag.title,
+                                                      default: (() => {
+                                                        const docIndex = language_data.content_json.findIndex(
+                                                          (c: any) => c.id === item.id
+                                                        );
+                                                        if (docIndex === -1) {
+                                                          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 as any).innerHeight}px - 70px - 58px - 49px - 64px - 40px + ${
-                                                    document.body.clientWidth < 800 ? `70` : `0`
-                                                  }px)`,
-                                                })}
-                                              </div>`;
-                                            },
-                                            footer_html: (gvc2: GVC) => {
-                                              return [
-                                                BgWidget.cancel(
-                                                  gvc2.event(() => {
-                                                    dialog.checkYesOrNot({
-                                                      text: '確定要取消並關閉嗎？',
-                                                      callback: bool => {
-                                                        if (bool) {
-                                                          language_data.content = originContent;
-                                                          gvc2.closeDialog();
+                                                        if (language_data.content_json[docIndex].list === undefined) {
+                                                          return '';
                                                         }
-                                                      },
-                                                    });
-                                                  })
-                                                ),
-                                                BgWidget.save(
-                                                  gvc2.event(() => {
-                                                    dialog.checkYesOrNot({
-                                                      text: '確定要儲存並更新嗎？',
-                                                      callback: bool => {
-                                                        if (bool) {
-                                                          gvc2.closeDialog();
-                                                          gvc.notifyDataChange(id);
+                                                        const keyIndex = language_data.content_json[
+                                                          docIndex
+                                                        ].list.findIndex((l: any) => l.key === tag.key);
+                                                        if (keyIndex === -1) {
+                                                          return '';
                                                         }
-                                                      },
-                                                    });
-                                                  })
-                                                ),
-                                              ].join('');
-                                            },
-                                            closeCallback: () => {
-                                              language_data.content = originContent;
-                                            },
-                                          });
-                                        })}"
-                                      >
-                                        ${(() => {
-                                          const text = gvc.glitter.utText.removeTag(language_data.content);
-                                          return BgWidget.richTextView(Tool.truncateString(text, 100));
-                                        })()}
-                                      </div>`;
-                                    },
-                                  };
-                                })()
-                              )}
-                            </div>
-                            ${(vm.documents || [])
-                              .filter((item: any) => {
-                                return language_data.content_array.includes(item.id);
-                              })
-                              .map((item: any, 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: { key: string; title: string }) => {
-                                                      return html` <div>
-                                                        ${BgWidget.editeInput({
-                                                          gvc,
-                                                          title: tag.title,
-                                                          default: (() => {
-                                                            const docIndex = language_data.content_json.findIndex(
-                                                              (c: any) => 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: any) => 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: any) => 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: any) => l.key === tag.key);
-                                                            if (keyIndex === -1) {
-                                                              language_data.content_json[docIndex].list.push({
+                                                        return language_data.content_json[docIndex].list[keyIndex]
+                                                          .value;
+                                                      })(),
+                                                      callback: text => {
+                                                        const docIndex = language_data.content_json.findIndex(
+                                                          (c: any) => c.id === item.id
+                                                        );
+                                                        if (docIndex === -1) {
+                                                          language_data.content_json.push({
+                                                            id: item.id,
+                                                            list: [
+                                                              {
                                                                 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: GVC) => {
-                                                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: any) => 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"
+                                                              },
+                                                            ],
+                                                          });
+                                                          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: any) => 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: GVC) => {
+                                            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;
+                                          },
+                                        });
+                                      })}"
                                     >
-                                      ${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: '上傳圖片',
+                                      標籤設值
+                                    </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: any) => 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))
+          );
+    }
+
+    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: any) => {
+                    const addImage = (urlArray: string[]) => {
+                      if (urlArray.length > 0) {
+                        language_data.preview_image.push(...urlArray);
+                        saveImageLib(urlArray);
+                        obj.gvc.notifyDataChange('image_view');
+                      } else {
+                        dialog.errorMessage({ text: '請選擇至少一張圖片' });
+                      }
+                    };
+                    addImage(images);
                   },
-                  event: gvc.event(() => {
-                    EditorElem.uploadFileFunction({
-                      gvc: gvc,
-                      callback: (images: any) => {
-                        const addImage = (urlArray: string[]) => {
-                          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',
+                  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: any) => {
+                          return data.data;
+                        })
+                      );
+                      obj.gvc.notifyDataChange('image_view');
+                    } else {
+                      dialog.errorMessage({ text: '請選擇至少一張圖片' });
+                    }
                   },
-                  text: {
-                    name: '從圖片庫選取',
+                  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: number) => {
+                      postMD.variants.forEach((variant: any) => {
+                        if (variant.preview_image === language_data.preview_image[index]) {
+                          variant.preview_image = language_data.preview_image[0] ?? BgWidget.noImageURL;
+                        }
+                        if (variant[`preview_image_${vm.language}`] === language_data.preview_image[index]) {
+                          variant[`preview_image_${vm.language}`] =
+                            language_data.preview_image[0] ?? BgWidget.noImageURL;
+                        }
+                      });
+                      ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
+                    },
                   },
-                  event: gvc.event(() => {
-                    imageLibrary.selectImageLibrary(
-                      gvc,
-                      urlArray => {
-                        if (urlArray.length > 0) {
-                          language_data.preview_image.push(
-                            ...urlArray.map((data: any) => {
-                              return data.data;
-                            })
+                })
+              );
+            },
+            divCreate: {
+              class: `d-flex w-100`,
+              style: `overflow-y:scroll;height:180px;`,
+            },
+          };
+        })}
+      `);
+    }
+
+    function drawReserveLocations() {
+      if (postMD.product_category === 'reserve') {
+        function getStockStore() {
+          ApiUser.getPublicConfig('store_manager', 'manager').then((storeData: any) => {
+            if (storeData.result) {
+              stockList = storeData.response.value.list.filter((store: any) => store.is_shop) as Store[];
+              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: (location: Store[]) => void) {
+              gvc.glitter.innerDialog(gvc => {
+                function drawRaw(store: 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
                           );
-                          obj.gvc.notifyDataChange('image_view');
                         } else {
-                          dialog.errorMessage({ text: '請選擇至少一張圖片' });
+                          temp_Reserve_locations.push(store);
                         }
-                      },
-                      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: number) => {
-                          postMD.variants.forEach((variant: any) => {
-                            if (variant.preview_image === language_data.preview_image[index]) {
-                              variant.preview_image = language_data.preview_image[0] ?? BgWidget.noImageURL;
-                            }
-                            if (variant[`preview_image_${vm.language}`] === language_data.preview_image[index]) {
-                              variant[`preview_image_${vm.language}`] =
-                                language_data.preview_image[0] ?? BgWidget.noImageURL;
+                        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;
                             }
-                          });
-                          ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
-                        },
-                      },
-                    })
-                  );
-                },
-                divCreate: {
-                  class: `d-flex w-100`,
-                  style: `overflow-y:scroll;height:180px;`,
-                },
-              };
-            })}
-          `),
-          (() => {
-            if (postMD.variants.length === 1) {
-              try {
-                (postMD.variants[0] as any).editable = true;
-                return ShoppingProductSetting.editProductSpec({
-                  vm: obj.vm,
-                  defData: postMD,
-                  gvc: gvc,
-                  single: true,
+                            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"
+                      >
+                        ${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: 'location-dialog',
+                  },
                 });
-              } catch (e) {
-                console.error(e);
-                return '';
-              }
+              }, 'location-select');
             }
-            return '';
-          })(),
-          BgWidget.mainCard(
-            obj.gvc.bindView(() => {
-              const specid = obj.gvc.glitter.getUUID();
-              let editIndex = -1;
 
-              gvc.addStyle(`
+            function drawLocation(location: Store) {
+              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: any): void {},
+                })}
+              `);
+            },
+            divCreate: {},
+          });
+        } else {
+          return ``;
+        }
+      } else {
+        return ``;
+      }
+    }
+
+    function drawSpecEditView() {
+      if (postMD.variants.length === 1) {
+        try {
+          (postMD.variants[0] as any).editable = true;
+          return html`
+<!--          繪製 編輯商品規格編輯區塊-->
+          `+ ShoppingProductSetting.editProductSpec({
+            vm: obj.vm,
+            defData: postMD,
+            gvc: gvc,
+            single: true,
+          });
+        } catch (e) {
+          console.error(e);
+          return '';
+        }
+      }
+      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;
@@ -1099,665 +1293,747 @@ export class ShoppingSettingBasic {
                 }
               `);
 
-              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: any = [];
-                  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('索引超出範圍');
-                            }
+          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: any = [];
+              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);
+                        // 取出元素並插入元素到新位置
+                        let element = item.spec.splice(fromIndex, 1)[0];
+                        item.spec.splice(toIndex, 0, element);
 
-                            return item;
-                          });
+                        return item;
+                      });
 
-                          obj.gvc.notifyDataChange([specid, 'productInf', 'spec_text_show']);
-                        },
-                        array: () => {
-                          function swapArray(arr: any[], index1: number, index2: number) {
-                            if (index1 === index2) return;
-                            const [item] = arr.splice(index1, 1);
-                            arr.splice(index2, 0, item);
-                          }
+                      obj.gvc.notifyDataChange([specid, 'productInf', 'spec_text_show']);
+                    },
+                    array: () => {
+                      function swapArray(arr: any[], index1: number, index2: number) {
+                        if (index1 === index2) return;
+                        const [item] = arr.splice(index1, 1);
+                        arr.splice(index2, 0, item);
+                      }
 
-                          return postMD.specs.map((dd, specIndex: number) => {
-                            let temp: any = {
-                              title: '',
-                              option: [],
-                            };
-                            return {
-                              title: gvc.bindView({
-                                bind: `editSpec${specIndex}`,
-                                dataList: [
-                                  {
-                                    obj: editSpectPage[specIndex],
-                                    key: 'type',
-                                  },
-                                ],
-                                view: () => {
-                                  dd.language_title = (dd.language_title ?? ({} as any)) as any;
-                                  if (editSpectPage[specIndex].type == 'show') {
-                                    return gvc.bindView({
-                                      bind: gvc.glitter.getUUID(),
-                                      view: () => {
-                                        return html`<div style="font-size: 16px;">
-                                            ${(dd.language_title as any)[sel_lan()] || dd.title}
-                                          </div>
-                                          ${(() => {
-                                            let returnHTML = '';
-                                            dd.option.map((opt: any, index: number) => {
-                                              opt.language_title = (opt.language_title ?? ({} as any)) as any;
-                                              returnHTML += html`
-                                                <div
-                                                  class="spec-option"
-                                                  style="cursor: move;"
-                                                  draggable="true"
-                                                  data-index="${index}"
-                                                >
-                                                  ${Tool.truncateString(
-                                                    (opt.language_title as any)[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 as any).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;
-                                                }
-
-                                                Sortable.create(dragEl, {
-                                                  group: { name: dragId, pull: false, put: false },
-                                                  animation: 150,
-                                                  onEnd(evt: any) {
-                                                    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 as any).store_info.language_setting.def) {
-                                    return obj.gvc.bindView({
-                                      bind: 'spec_text_show',
-                                      dataList: [
-                                        {
-                                          obj: createPage,
-                                          key: 'page',
-                                        },
-                                      ],
-                                      view: () => {
+                      return postMD.specs.map((dd, specIndex: number) => {
+                        let temp: any = {
+                          title: '',
+                          option: [],
+                        };
+                        return {
+                          title: gvc.bindView({
+                            bind: `editSpec${specIndex}`,
+                            dataList: [
+                              {
+                                obj: editSpectPage[specIndex],
+                                key: 'type',
+                              },
+                            ],
+                            view: () => {
+                              dd.language_title = (dd.language_title ?? ({} as any)) as any;
+                              if (editSpectPage[specIndex].type == 'show') {
+                                return gvc.bindView({
+                                  bind: gvc.glitter.getUUID(),
+                                  view: () => {
+                                    return html` <div style="font-size: 16px;">
+                                        ${(dd.language_title as any)[sel_lan()] || dd.title}
+                                      </div>
+                                      ${(() => {
                                         let returnHTML = '';
-                                        let specs_in_line: string[] = [];
-                                        temp.option = temp.option ?? [];
-                                        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 as any)[vm.language] || ''}"
-                                                onchange="${gvc.event((e, event) => {
-                                                  (temp.language_title as any)[vm.language] = e.value;
-                                                })}"
-                                              />
+                                        dd.option.map((opt: any, index: number) => {
+                                          opt.language_title = (opt.language_title ?? ({} as any)) as any;
+                                          returnHTML += html`
+                                            <div
+                                              class="spec-option"
+                                              style="cursor: move;"
+                                              draggable="true"
+                                              data-index="${index}"
+                                            >
+                                              ${Tool.truncateString(
+                                                (opt.language_title as any)[sel_lan()] || opt.title,
+                                                30
+                                              )}
                                             </div>
-                                            <div class="d-flex flex-column w-100" style="gap:5px;">
-                                              ${temp.option
-                                                .map((d: any, index: number) => {
-                                                  d.language_title = d.language_title ?? ({} as any);
-                                                  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 as any)[vm.language] || ''}"
-                                                      onchange="${gvc.event((e, event) => {
-                                                        (d.language_title as any)[vm.language] = e.value;
-                                                      })}"
+                                          `;
+                                        });
+                                        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)"
                                                     />
-                                                  </div>`;
-                                                })
-                                                .join('<div class="mx-1"></div>')}
+                                                  </clipPath>
+                                                </defs>
+                                              </svg>
                                             </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;`,
+                                          </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 as any).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;
+                                            }
+
+                                            Sortable.create(dragEl, {
+                                              group: { name: dragId, pull: false, put: false },
+                                              animation: 150,
+                                              onEnd(evt: any) {
+                                                swapArray(postMD.specs[specIndex].option, evt.oldIndex, evt.newIndex);
+                                              },
+                                            });
+                                          } catch (e) {
+                                            console.error('SortableJS initialization error:', e);
+                                          }
+                                        }, 100);
                                       },
-                                    });
-                                  } else {
-                                    return html`
+                                      () => console.error('Failed to load SortableJS')
+                                    );
+                                  },
+                                });
+                              }
+                              temp = JSON.parse(JSON.stringify(dd));
+                              if (sel_lan() !== (window.parent as any).store_info.language_setting.def) {
+                                return obj.gvc.bindView({
+                                  bind: 'spec_text_show',
+                                  dataList: [
+                                    {
+                                      obj: createPage,
+                                      key: 'page',
+                                    },
+                                  ],
+                                  view: () => {
+                                    let returnHTML = '';
+                                    let specs_in_line: string[] = [];
+                                    temp.option = temp.option ?? [];
+                                    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 as any)[vm.language] || ''}"
+                                            onchange="${gvc.event((e, event) => {
+                                              (temp.language_title as any)[vm.language] = e.value;
+                                            })}"
+                                          />
+                                        </div>
+                                        <div class="d-flex flex-column w-100" style="gap:5px;">
+                                          ${temp.option
+                                            .map((d: any, index: number) => {
+                                              d.language_title = d.language_title ?? ({} as any);
+                                              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 as any)[vm.language] || ''}"
+                                                  onchange="${gvc.event((e, event) => {
+                                                    (d.language_title as any)[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="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;"
+                                        style="width:100%;display: flex;flex-direction: column;align-items: flex-end;gap: 18px;background-color:white !important;"
                                       >
-                                        <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>
-                                        </div>
+                                        ${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: GVC) => {
-                                return '';
-                              },
-                              editTitle: `編輯規格`,
-                              draggable: editSpectPage[specIndex].type === 'show',
-                            };
-                          });
-                        },
-                      })}
-                    `;
-                  }
+                                    </div>
+                                  </div>
+                                `;
+                              }
+                            },
+                            divCreate: { class: `w-100 position-relative` },
+                          }),
+                          innerHtml: (gvc: GVC) => {
+                            return '';
+                          },
+                          editTitle: `編輯規格`,
+                          draggable: editSpectPage[specIndex].type === 'show',
+                        };
+                      });
+                    },
+                  })}
+                `;
+              }
 
-                  if (createPage.page == 'edit' && editIndex === -1) {
-                    let temp: any = {
-                      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 as any).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>
+              if (createPage.page == 'edit' && editIndex === -1) {
+                let temp: any = {
+                  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 as any).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'
-            ? (() => {
-                let map_: string[] = [];
-                postMD.shipment_type = postMD.shipment_type ?? 'volume';
+              return returnHTML;
+            },
+            divCreate: {
+              class: `d-flex flex-column`,
+              style: `gap:18px;`,
+            },
+          };
+        })
+      );
+    }
 
-                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">
-                          ${[
+    function drawKitchenSingleSpecDetail() {
+      return postMD.product_category === 'kitchen'
+        ? (() => {
+            let map_: string[] = [];
+            postMD.shipment_type = postMD.shipment_type ?? '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,
+                          [
                             {
-                              title: '長度',
-                              value: 'v_length',
-                              unit: '公分',
+                              key: 'volume',
+                              name: '依材積計算',
+                              customerClass: 'guide5-6',
                             },
                             {
-                              title: '寬度',
-                              value: 'v_width',
-                              unit: '公分',
+                              key: 'weight',
+                              name: '依重量計算',
                             },
                             {
-                              title: '高度',
-                              value: 'v_height',
-                              unit: '公分',
+                              key: 'none',
+                              name: '不計算運費',
                             },
-                          ]
-                            .map(dd => {
-                              (postMD as any)[dd.value] = (postMD as any)[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 as any)[dd.value] = e.value;
-                                  })}"
-                                  value="${(postMD as any)[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 as any)['weight'] || 0}"
-                          onchange="${gvc.event(e => {
-                            (postMD as any)['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;"
+                          ],
+                          [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 as any)[dd.value] = (postMD as any)[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"
                           >
-                            <option value="kg">公斤</option>
-                          </select>
-                        </div>
-                      </div>
+                            <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 as any)[dd.value] = e.value;
+                              })}"
+                              value="${(postMD as any)[dd.value]}"
+                            />
+                            <div style="color: #8D8D8D;position: absolute;right: 25px;top: 7px;">${dd.unit}</div>
+                          </div>`;
+                        })
+                        .join('')}
                     </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 as any).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: any) => {
-                                        d1.price = d1.price ?? 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('');
+                  </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 as any)['weight'] || 0}"
+                      onchange="${gvc.event(e => {
+                        (postMD as any)['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 as any).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: any) => {
+                                    d1.price = d1.price ?? 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('')
-                    )
-                  );
-                } else {
-                  map_.push(
-                    BgWidget.mainCard(
-                      obj.gvc.bindView(() => {
-                        const vm = {
-                          id: obj.gvc.glitter.getUUID(),
-                        };
-                        return {
-                          bind: vm.id,
-                          view: () => {
-                            (postMD as any).price = (postMD as any).price ?? 0;
-                            (postMD as any).stock = (postMD as any).stock ?? 0;
-                            return [
-                              html`
-                                <div
-                                  class="d-flex flex-column"
-                                  style="font-size: 16px;font-weight: 700;color:#393939;${(postMD as any).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 as any).price}`,
-                                    callback: text => {
-                                      (postMD as any).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 as any).stock}`,
-                                    callback: text => {
-                                      (postMD as any).stock = text;
-                                    },
-                                    placeHolder: '不追蹤庫存',
-                                    type: 'number',
-                                  })}
-                                </div>
-                              </div>`,
-                            ].join('');
-                          },
-                        };
-                      })
-                    )
-                  );
-                }
-                return map_.join(BgWidget.mbContainer(18));
-              })()
-            : '',
+                                  .join('');
+                              })
+                              .join('')
+                          );
+                        },
+                      };
+                    }),
+                  ].join('')
+                )
+              );
+            } else {
+              map_.push(
+                BgWidget.mainCard(
+                  obj.gvc.bindView(() => {
+                    const vm = {
+                      id: obj.gvc.glitter.getUUID(),
+                    };
+                    return {
+                      bind: vm.id,
+                      view: () => {
+                        (postMD as any).price = (postMD as any).price ?? 0;
+                        (postMD as any).stock = (postMD as any).stock ?? 0;
+                        return [
+                          html`
+                            <div
+                              class="d-flex flex-column"
+                              style="font-size: 16px;font-weight: 700;color:#393939;${(postMD as any).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 as any).price}`,
+                                callback: text => {
+                                  (postMD as any).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 as any).stock}`,
+                                callback: text => {
+                                  (postMD as any).stock = text;
+                                },
+                                placeHolder: '不追蹤庫存',
+                                type: 'number',
+                              })}
+                            </div>
+                          </div>`,
+                        ].join('');
+                      },
+                    };
+                  })
+                )
+              );
+            }
+            return map_.join(BgWidget.mbContainer(18));
+          })()
+        : '';
+    }
+
+    function drawReservationSettings(){
+      function drawTitle(title: string , subTitle: string , inputKey: string){
+        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: language_data.title ?? '',
+                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>
+          `),
+          drawShortDescriptionRichText(),
+          drawDetailDescriptionRichText(),
+          drawProductImageBlock(),
+          drawReserveLocations(),
+          drawReservationSettings(),
+          drawIndividualStoreProductConfigPanel(),
+          drawSpecEditView(),
+          drawProductSpecList(),
+          drawKitchenSingleSpecDetail(),
           postMD.product_category !== 'kitchen' && postMD.specs.length
             ? (() => {
                 return BgWidget.mainCard(
@@ -3181,13 +3457,13 @@ 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>`);
                                       },
                                     };
                                   }),
@@ -3222,8 +3498,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; '