ts-glitter 22.5.2 → 22.5.4

package/lowcode/cms-plugin/shopping-collections.ts

@@ -6,6 +6,8 @@ import { EditorElem } from '../glitterBundle/plugins/editor-elem.js';
 import { ShareDialog } from '../glitterBundle/dialog/ShareDialog.js';
 import { CheckInput } from '../modules/checkInput.js';
 import { Language, LanguageLocation } from '../glitter-base/global/language.js';
+import { PublicConfig } from '../glitter-base/route/public-config.js';
+
 
 const html = String.raw;
 
@@ -137,7 +139,7 @@ export class ShoppingCollections {
             checked: false,
             parentTitles: parentTitles.length ? [...parentTitles] : [],
             allCollections: parentTitles.length ? [...topLevelCollections] : [],
-            subCollections: array.map(subCol => subCol.title),
+            subCollections: (array ?? []).map(subCol => subCol.title),
             hidden: Boolean(col.hidden),
           };
           if (
@@ -177,6 +179,34 @@ export class ShoppingCollections {
       return flattenCollections(data.collections, [], topLevelCollections);
     };
 
+    async function saveEvent(){
+
+     return new Promise(async (resolve, reject)=>{
+       function checkPass(array:any[]):boolean{
+         if(Array.from(new Set((array ?? []).map((dd:any)=>{return dd.title}))).length!==array.length){
+           return false
+         }
+         return  !array.find((dd)=>{
+           return dd.array && !checkPass(dd.array)
+         })
+       }
+       const data=getSaveData()
+       if(!checkPass(data)){
+         dialog.errorMessage({text:"同層級不可以有相同的分類標籤!!"})
+         resolve(false)
+         return
+       }
+       dialog.dataLoading({visible:true})
+       await PublicConfig.set('collection',data );
+
+       dialog.dataLoading({visible:false})
+       dialog.successMessage({text:'儲存成功'})
+       gvc.recreateView()
+       resolve(true)
+     })
+    }
+    //取得要儲存的資料
+    let getSaveData: any = () => {};
     return gvc.bindView(() => {
       return {
         bind: vm.id,
@@ -189,204 +219,6 @@ export class ShoppingCollections {
               <div class="title-container">
                 ${BgWidget.title('商品分類')}
                 <div class="flex-fill"></div>
-                <div class="d-flex gap-2">
-                  ${BgWidget.grayButton(
-                    '編輯順序',
-                    gvc.event(() => {
-                      const cloneCollectionList = vm.collectionList.slice();
-
-                      return BgWidget.settingDialog({
-                        gvc,
-                        title: '編輯順序',
-                        width: 700,
-                        innerHTML: (iGVC: GVC) => {
-                          const id = glitter.getUUID();
-                          let loading = true;
-                          this.addStyle(iGVC);
-
-                          return iGVC.bindView({
-                            bind: id,
-                            view: () => {
-                              if (loading) {
-                                return BgWidget.spinner();
-                              }
-
-                              return html`
-                                <div class="p-2">
-                                  ${BgWidget.grayNote('提示：左鍵拖曳可排列順序，點擊可顯示向下一層分類')}
-                                  <div class="d-flex justify-content-start mt-3">
-                                    <div class="layer-container">
-                                      ${[0, 1, 2]
-                                        .map(depth => {
-                                          const title = ['第一層分類', '第二層分類', '第三層分類'][depth];
-                                          return html` <div class="flex-1 layer-block">
-                                            <div class="tx_700 fs-4 text-center mb-2">${title}</div>
-                                            <ul class="ul-style" id="layer-list-${depth}"></ul>
-                                          </div>`;
-                                        })
-                                        .join('')}
-                                    </div>
-                                  </div>
-                                </div>
-                              `;
-                            },
-                            onCreate: () => {
-                              if (loading) {
-                                iGVC.addMtScript(
-                                  [{ src: 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js' }],
-                                  () => {
-                                    const si = setInterval(() => {
-                                      if ((window.parent as any).Sortable !== undefined) {
-                                        loading = false;
-                                        clearInterval(si);
-                                        iGVC.notifyDataChange(id);
-                                      }
-                                    }, 300);
-                                  },
-                                  () => {}
-                                );
-                              } else {
-                                const document = window.parent.document;
-
-                                function createListItem(item: Collection, index: number): HTMLLIElement {
-                                  const li = document.createElement('li');
-                                  li.className = 'li-style';
-                                  li.setAttribute('data-index', index.toString());
-                                  li.setAttribute('data-path', [...(item.parentTitles ?? []), item.title].join(' / '));
-                                  li.innerHTML = `<span class="drag-icon"></span><span class="tx_normal">${item.title}</span>`;
-
-                                  li.addEventListener('click', (e: MouseEvent) => {
-                                    const target = e.currentTarget as HTMLElement;
-
-                                    // 取得最近的 ul 並取得其 id
-                                    const ul = target.closest('ul');
-
-                                    // 取代 root（靜態 ID）為動態找到的 ul
-                                    if (ul) {
-                                      Array.from(ul.children).forEach((element: Element) => {
-                                        (element as HTMLElement).style.backgroundColor = '#dddddd';
-                                      });
-                                    }
-
-                                    // 設定被點擊的項目背景色
-                                    target.style.backgroundColor = '#d8ecda';
-
-                                    // 呼叫對應層級的載入方法
-                                    loadChildLayer([...(item.parentTitles ?? []), item.title]);
-                                  });
-
-                                  return li;
-                                }
-
-                                function initSortable(containerId: string) {
-                                  const el = document.getElementById(containerId) as HTMLElement;
-                                  (window.parent as any).Sortable.create(el, {
-                                    animation: 200,
-                                    scroll: true,
-                                    onEnd: () => {
-                                      const items = [...el.children].map(
-                                        child => vm.dataList?.[parseInt(child.getAttribute('data-index') as string)]
-                                      ) as Collection[];
-
-                                      vm.collectionList = ShoppingCollections.sortedCollectionConfig(
-                                        vm.collectionList,
-                                        items
-                                      );
-                                    },
-                                  });
-                                }
-
-                                function loadChildLayer(parentPath: string[]) {
-                                  const nextDepth = parentPath.length;
-                                  const nextId = `layer-list-${nextDepth}`;
-                                  for (let i = nextDepth; i < 3; i++) {
-                                    const el = document.getElementById(`layer-list-${i}`);
-                                    if (el) el.innerHTML = '';
-                                  }
-                                  const container = document.getElementById(nextId) as HTMLElement;
-                                  container.innerHTML = '';
-                                  vm.dataList?.forEach((item, index) => {
-                                    const path = item.parentTitles ?? [];
-                                    if (
-                                      path.length === parentPath.length &&
-                                      path.every((p, i) => p === parentPath[i])
-                                    ) {
-                                      container.appendChild(createListItem(item, index));
-                                    }
-                                  });
-                                  initSortable(nextId);
-                                }
-
-                                const root = document.getElementById('layer-list-0') as HTMLElement;
-                                root.innerHTML = '';
-
-                                vm.dataList?.forEach((item, index) => {
-                                  if ((item.parentTitles ?? []).length === 0) {
-                                    root.appendChild(createListItem(item, index));
-                                  }
-                                });
-                                initSortable('layer-list-0');
-                              }
-                            },
-                          });
-                        },
-                        footer_html: (fGVC: GVC) => {
-                          return [
-                            BgWidget.cancel(
-                              fGVC.event(() => {
-                                vm.collectionList = cloneCollectionList;
-                                fGVC.closeDialog();
-                              })
-                            ),
-                            BgWidget.save(
-                              fGVC.event(() => {
-                                dialog.dataLoading({ visible: true });
-
-                                ApiShop.sortCollections({
-                                  data: { list: vm.collectionList },
-                                  token: (window.parent as any).config.token,
-                                }).then(res => {
-                                  dialog.dataLoading({ visible: false });
-                                  if (res.result && !res.response) {
-                                    dialog.errorMessage({ text: '更改順序失敗' });
-                                  } else {
-                                    dialog.successMessage({ text: '更改順序成功' });
-                                    fGVC.closeDialog();
-                                    gvc.notifyDataChange(vm.id);
-                                  }
-                                });
-                              })
-                            ),
-                          ].join('');
-                        },
-                      });
-                    })
-                  )}
-                  ${BgWidget.darkButton(
-                    '新增',
-                    gvc.event(() => {
-                      vm.data = {
-                        title: '',
-                        array: [],
-                        product_id: [],
-                        parentTitles: [],
-                        subCollections: [],
-                        checked: false,
-                        seo_title: '',
-                        seo_content: '',
-                        language_data: {
-                          'zh-CN': getEmptyLanguageData(),
-                          'zh-TW': getEmptyLanguageData(),
-                          'en-US': getEmptyLanguageData(),
-                        },
-                        seo_image: '',
-                        code: '',
-                        allCollections: vm.allParents,
-                      };
-                      vm.type = 'add';
-                    })
-                  )}
-                </div>
               </div>
               ${BgWidget.container(
                 BgWidget.mainCard(
@@ -399,349 +231,543 @@ export class ShoppingCollections {
                       vm.query || '',
                       '搜尋分類'
                     ),
-//                     gvc.bindView(() => {
-//                       const vm = {
-//                         id: gvc.glitter.getUUID(),
-//                         loading: true,
-//                         data: [],
-//                       };
-//
-//                       async function loading() {
-//                         const collection = await ApiShop.getCollection();
-//                         vm.data = collection.response.value ?? [];
-//                         vm.loading = false;
-//                         gvc.notifyDataChange(vm.id);
-//                       }
-//
-//                       loading();
-//                       return {
-//                         bind: vm.id,
-//                         view: () => {
-//                           if (vm.loading) {
-//                             return BgWidget.spinner();
-//                           }
-//
-//                           function loop(array: any[], index: string): string {
-//                             return html`
-//                               <ol class="dd-list">
-//                                 ${array.map((dd, index) => {
-//                                   return html` <li class="dd-item" data-id="${index}-${index}">
-//                                     <div class="dd-handle">${dd.title}</div>
-//                                     ${dd.array && dd.array.length ? loop(dd.array, `${index}-${index}`) : []}
-//                                   </li>`;
-//                                 }).join('')}
-//                               </ol>
-//                             `;
-//                           }
-//
-//                           return html` <div class="dd" id="nestable">${loop(vm.data, '0')}</div>`;
-//                         },
-//                         divCreate: {
-//                           class: `px-lg-3 px-1`,
-//                         },
-//                         onCreate: () => {
-//                           ApiShop.putCollections
-//                           gvc.glitter.addStyle(`
-// .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
-// *:first-child+html .cf { zoom: 1; }
-//
-// h1 { font-size: 1.75em; margin: 0 0 0.6em 0; }
-//
-// a { color: #2996cc; }
-// a:hover { text-decoration: none; }
-//
-// p { line-height: 1.5em; }
-// .small { color: #666; font-size: 0.875em; }
-// .large { font-size: 1.25em; }
-//
-// /**
-//  * Nestable
-//  */
-//
-// .dd { position: relative; display: block; margin: 0; padding: 0;  list-style: none; font-size: 13px; line-height: 20px; }
-//
-// .dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
-// .dd-list .dd-list { padding-left: 30px; }
-// .dd-collapsed .dd-list { display: none; }
-//
-// .dd-item,
-// .dd-empty,
-// .dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }
-//
-// .dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
-//     background: #fafafa;
-//     background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
-//     background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
-//     background:         linear-gradient(top, #fafafa 0%, #eee 100%);
-//     -webkit-border-radius: 3px;
-//             border-radius: 3px;
-//     box-sizing: border-box; -moz-box-sizing: border-box;
-// }
-// .dd-handle:hover { color: #2ea8e5; background: #fff; }
-//
-// .dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
-// .dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
-// .dd-item > button[data-action="collapse"]:before { content: '-'; }
-//
-// .dd-placeholder,
-// .dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
-// .dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
-//     background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
-//                       -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
-//     background-image:    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
-//                          -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
-//     background-image:         linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
-//                               linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
-//     background-size: 60px 60px;
-//     background-position: 0 0, 30px 30px;
-// }
-//
-// .dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
-// .dd-dragel > .dd-item .dd-handle { margin-top: 0; }
-// .dd-dragel .dd-handle {
-//     -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
-//             box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
-// }
-//
-// /**
-//  * Nestable Extras
-//  */
-//
-// .nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; }
-//
-// #nestable-menu { padding: 0; margin: 20px 0; }
-//
-// #nestable-output,
-// #nestable2-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; }
-//
-// #nestable2 .dd-handle {
-//     color: #fff;
-//     border: 1px solid #999;
-//     background: #bbb;
-//     background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);
-//     background:    -moz-linear-gradient(top, #bbb 0%, #999 100%);
-//     background:         linear-gradient(top, #bbb 0%, #999 100%);
-// }
-// #nestable2 .dd-handle:hover { background: #bbb; }
-// #nestable2 .dd-item > button:before { color: #fff; }
-//
-// @media only screen and (min-width: 700px) {
-//
-//     .dd {  width: 100%; }
-//     .dd + .dd { margin-left: 2%; }
-//
-// }
-//
-// .dd-hover > .dd-handle { background: #2ea8e5 !important; }
-//
-// /**
-//  * Nestable Draggable Handles
-//  */
-//
-// .dd3-content { display: block; height: 30px; margin: 5px 0; padding: 5px 10px 5px 40px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
-//     background: #fafafa;
-//     background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
-//     background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
-//     background:         linear-gradient(top, #fafafa 0%, #eee 100%);
-//     -webkit-border-radius: 3px;
-//             border-radius: 3px;
-//     box-sizing: border-box; -moz-box-sizing: border-box;
-// }
-// .dd3-content:hover { color: #2ea8e5; background: #fff; }
-//
-// .dd-dragel > .dd3-item > .dd3-content { margin: 0; }
-//
-// .dd3-item > button { margin-left: 30px; }
-//
-// .dd3-handle { position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden;
-//     border: 1px solid #aaa;
-//     background: #ddd;
-//     background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
-//     background:    -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
-//     background:         linear-gradient(top, #ddd 0%, #bbb 100%);
-//     border-top-right-radius: 0;
-//     border-bottom-right-radius: 0;
-// }
-// .dd3-handle:before { content: '≡'; display: block; position: absolute; left: 0; top: 3px; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; font-weight: normal; }
-// .dd3-handle:hover { background: #ddd; }
-//
-// /**
-//  * Socialite
-//  */
-//
-// .socialite { display: block; float: left; height: 35px; }
-// `);
-//                           gvc.glitter.addMtScript(
-//                             [`${gvc.glitter.root_path}/jslib/nestable/jquery.nestable.js`],
-//                             () => {
-//                               const updateOutput = function (e: any) {
-//                                 const list = e.length ? e : $(e.target),
-//                                   output = list.data('output');
-//                                 console.log(`output-data`, window.JSON.stringify(list.nestable('serialize')));
-//                               };
-//
-//                               //@ts-ignore
-//                               $('#nestable')
-//                                 //@ts-ignore
-//                                 .nestable({
-//                                   group: 1,
-//                                 })
-//                                 .on('change', updateOutput);
-//                             },
-//                             () => {}
-//                           );
-//                         },
-//                       };
-//                     }),
-                    BgWidget.tableV3({
-                      gvc: gvc,
-                      getData: vmi => {
-                        ApiShop.getProduct({
-                          page: 0,
-                          limit: 999999,
-                        }).then(d => {
-                          if (d.result) {
-                            const products: Product[] = d.response.data;
-
-                            ApiShop.getCollection().then(data => {
-                              if (data.result && data.response.value.length > 0) {
-                                vm.collectionList = data.response.value;
-
-                                vm.allParents = [this.undefinedOption].concat(
-                                  data.response.value.map((item: { title: string }) => item.title)
-                                );
+                    gvc.bindView(() => {
+                      const vm_2 = {
+                        id: gvc.glitter.getUUID(),
+                        loading: true,
+                        data: [],
+                      };
 
-                                const collections = updateCollections({
-                                  products,
-                                  collections: data.response.value,
-                                });
-
-                                const collectionsMap = new Map(collections.map(col => [col.title, col]));
-
-                                function getDatalist() {
-                                  return collections.map(dd => {
-                                    const original = structuredClone(dd);
-                                    const isChildren = dd.parentTitles && dd.parentTitles.length > 0;
-
-                                    // 更新分類顯示資料
-                                    function triggerHidden() {
-                                      dd.hidden = !Boolean(dd.hidden);
-
-                                      dialog.dataLoading({ visible: true });
-                                      ApiShop.putCollections({
-                                        data: { replace: dd, original },
-                                        token: (window.parent as any).config.token,
-                                      }).then(() => {
-                                        dialog.dataLoading({ visible: false });
-                                        gvc.notifyDataChange(vm.id);
-                                      });
-                                    }
+                      async function loading() {
+                        const collection = await ApiShop.getCollection();
+                        vm_2.data = collection.response.value ?? [];
+                        vm_2.loading = false;
+                        gvc.notifyDataChange(vm_2.id);
+                      }
 
-                                    // 是否顯示點擊事件
-                                    function setHiddenEvent() {
-                                      if (isChildren) {
-                                        const parent = collectionsMap.get(dd.parentTitles[0]);
-                                        if (parent?.hidden && dd.hidden) {
-                                          dialog.infoMessage({ text: '請先開啟顯示第一層分類' });
-                                        } else {
-                                          triggerHidden();
-                                        }
-                                      } else {
-                                        if (dd.hidden) {
-                                          triggerHidden();
-                                        } else {
-                                          dialog.checkYesOrNot({
-                                            text: '若關閉顯示該層分類，子層分類也將會關閉顯示，是否確定要執行？',
-                                            callback: bool => bool && triggerHidden(),
-                                          });
-                                        }
-                                      }
-                                    }
+                      const sharedData: any = {};
+                      loading();
+                      function refresh(){
+                        gvc.notifyDataChange(vm_2.id);
+                      }
+                      return {
+                        bind: vm_2.id,
+                        view: () => {
+                          if (vm_2.loading) {
+                            return BgWidget.spinner();
+                          }
 
-                                    return [
-                                      {
-                                        key: '標題',
-                                        value: html`<div
-                                          class="fs-7"
-                                          style="min-width: ${document.body.clientWidth > 768
-                                            ? 400
-                                            : 225}px; padding-left: ${4 + dd.parentTitles.length * 12}px"
-                                        >
-                                          ${dd.parentTitles.length > 0
-                                            ? html`<i class="fa-solid fa-arrow-turn-down-right me-1"></i>`
-                                            : ''}
-                                          ${dd.title}
-                                        </div>`,
-                                      },
-                                      {
-                                        key: '商品數量',
-                                        value: html`<span class="fs-7"
-                                          >${dd.product_id ? dd.product_id.length : 0}</span
-                                        >`,
-                                      },
-                                      {
-                                        key: '是否顯示',
-                                        value: html`<i
-                                          class="${dd.hidden ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'}"
-                                          style="cursor: pointer;"
-                                          onclick="${gvc.event(() => setHiddenEvent())}"
-                                        ></i>`,
-                                        stopClick: true,
-                                      },
-                                    ];
+                          function loop(root:boolean,array: any[], og_path: string): string {
+                            function plus(array2:any[]=array){
+                              const refer = {
+                                title: '',
+                                array: [],
+                                product_id: [],
+                                parentTitles: [],
+                                subCollections: [],
+                                checked: false,
+                                seo_title: '',
+                                seo_content: '',
+                                language_data: {
+                                  'zh-CN': getEmptyLanguageData(),
+                                  'zh-TW': getEmptyLanguageData(),
+                                  'en-US': getEmptyLanguageData(),
+                                },
+                                seo_image: '',
+                                code: '',
+                                allCollections: vm.allParents,
+                              };
+                              BgWidget.settingDialog({
+                                gvc: gvc,
+                                title: html` <div class="d-flex align-items-center" style="gap:10px;">
+                                                  新增分類
+                                                  <div id="language_btn_place" class=""></div>
+                                                </div>`,
+                                width: 720,
+                                height: 720,
+                                innerHTML: gvc => {
+                                  return ShoppingCollections.editorDetail({
+                                    vm: {
+                                      data: refer,
+                                    } as any,
+                                    type: 'add',
+                                    gvc: gvc,
                                   });
-                                }
+                                },
+                                footer_html: gvc => {
+                                  return html` <div class="d-flex align-items-center w-100">
+                                                    <div class="flex-fill"></div>
+                                                    ${[
+                                    BgWidget.cancel(
+                                      gvc.event(() => {
+                                        gvc.closeDialog();
+                                      })
+                                    ),
+                                    BgWidget.save(
+                                      gvc.event(() => {
+                                        console.log(JSON.stringify(refer))
+                                        if(array2.find(dd => dd.title === refer.title)){
+                                          dialog.errorMessage({text:'此分類標籤已存在'})
+                                        }else if(!refer.title){
+                                          dialog.errorMessage({text:'請輸入分類標籤'})
+                                        }else{
+                                          array2.push(refer);
+                                          refresh()
+                                          gvc.closeDialog();
+                                        }
 
-                                vm.dataList = collections;
-                                vmi.tableData = getDatalist();
-                              } else {
-                                vm.dataList = [];
-                                vmi.tableData = [];
-                              }
-                              vmi.pageSize = 1;
-                              vmi.originalData = vm.dataList;
-                              vmi.loading = false;
-                              vmi.callback();
-                            });
+                                        // array[index] = refer;
+                                        // sharedData[id] = refer;
+                                        // dd = refer;
+                                        // refresh();
+
+                                      })
+                                    ),
+                                  ].join('<div class="mx-2"></div>')}
+                                                  </div>`;
+                                },
+                              });
+                            }
+                            return html`
+                              <ol class="dd-list">
+                                ${array
+                                  .map((dd, index) => {
+                                    dd.og_path = [og_path, dd.title]
+                                      .filter(dd => {
+                                        return dd;
+                                      })
+                                      .join(' / ');
+                                    const id = gvc.glitter.getUUID();
+                                    sharedData[id] = dd;
+                                  
+                                    return html` <li class="dd-item" data-id="${id}" id="${id}">
+                                      ${gvc.bindView(() => {
+                                        const c_vm = {
+                                          id: gvc.glitter.getUUID(),
+                                        };
+
+                                        function refresh() {
+                                          gvc.notifyDataChange(c_vm.id);
+                                        }
+
+                                        return {
+                                          bind: c_vm.id,
+                                          view: () => {
+                                            return `  ${dd.title}
+                                        <div class="flex-fill"></div>
+                                        ${[
+                                              (() => {
+                                                if(dd.og_path.split(' / ').length===3){
+                                                  return  ``
+                                                }
+                                                return `<div
+                                            style="cursor: pointer;"
+                                            class="border d-flex align-items-center justify-content-center rounded-3 p-2"
+                                            onclick="${gvc.event((e, event) => {
+                                                  event.stopPropagation();
+                                                  event.preventDefault();
+                                                  dd.array=dd.array || []
+                                                  plus(dd.array)
+                                                  // vm.data = dd;
+                                                  // vm.type = 'replace';
+                                                })}"
+                                            onmousedown="${gvc.event((e, event) => {
+                                                  event.stopPropagation();
+                                                  event.preventDefault();
+                                                })}"
+                                            ontouchstart="${gvc.event((e, event) => {
+                                                  event.stopPropagation();
+                                                  event.preventDefault();
+                                                  dd.array=dd.array || []
+                                                  plus(dd.array)
+                                                })}"
+                                          >
+                                         <i class="fa-regular fa-circle-plus fs-6"></i>
+                                          </div>`;
+                                              })(),
+                                          (() => {
+                                            function next() {
+                                              const refer = JSON.parse(JSON.stringify(dd));
+                                              BgWidget.settingDialog({
+                                                gvc: gvc,
+                                                title: html` <div class="d-flex align-items-center" style="gap:10px;">
+                                                  編輯分類
+                                                  <div id="language_btn_place" class=""></div>
+                                                </div>`,
+                                                width: 720,
+                                                height: 720,
+                                                innerHTML: gvc => {
+                                                  return ShoppingCollections.editorDetail({
+                                                    vm: {
+                                                      data: refer,
+                                                    } as any,
+                                                    type: 'replace',
+                                                    gvc: gvc,
+                                                  });
+                                                },
+                                                footer_html: gvc => {
+                                                  return html` <div class="d-flex align-items-center w-100">
+                                                    <div class="flex-fill"></div>
+                                                    ${[
+                                                      BgWidget.cancel(
+                                                        gvc.event(() => {
+                                                          gvc.closeDialog();
+                                                        })
+                                                      ),
+                                                      BgWidget.save(
+                                                        gvc.event(() => {
+                                                          if(array.filter(dd => dd.title === refer.title).length>1){
+                                                            dialog.errorMessage({text:'此分類標籤已存在'})
+                                                          }else if(!refer.title){
+                                                            dialog.errorMessage({text:'請輸入分類標籤'})
+                                                          }else{
+                                                            array[index] = refer;
+                                                            sharedData[id] = refer;
+                                                            dd = refer;
+                                                            saveEvent().then((res)=>{
+                                                              if(res){
+                                                                gvc.closeDialog();
+                                                              }
+                                                            });
+                                                          }
+                                                        })
+                                                      ),
+                                                    ].join('<div class="mx-2"></div>')}
+                                                  </div>`;
+                                                },
+                                              });
+                                            }
+
+                                            return `<div
+                                            style="cursor: pointer;"
+                                            class="border d-flex align-items-center justify-content-center rounded-3 p-2"
+                                            onclick="${gvc.event((e, event) => {
+                                              event.stopPropagation();
+                                              event.preventDefault();
+                                              next();
+                                              // vm.data = dd;
+                                              // vm.type = 'replace';
+                                            })}"
+                                            onmousedown="${gvc.event((e, event) => {
+                                              event.stopPropagation();
+                                              event.preventDefault();
+                                            })}"
+                                            ontouchstart="${gvc.event((e, event) => {
+                                              event.stopPropagation();
+                                              event.preventDefault();
+                                              next();
+                                            })}"
+                                          >
+                                            <i class="fa-solid fa-pencil fs-6 "></i>
+                                          </div>`;
+                                          })(),
+                                          gvc.bindView(() => {
+                                            const b_id = gvc.glitter.getUUID();
+
+                                            function next() {
+                                              dd.hidden = !dd.hidden;
+                                              gvc.notifyDataChange(b_id);
+                                            }
+
+                                            return {
+                                              bind: b_id,
+                                              view: () => {
+                                                return ` <i class="${dd.hidden ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'} fs-6 "></i>`;
+                                              },
+                                              divCreate: {
+                                                style: `cursor: pointer;`,
+                                                class: `border d-flex align-items-center justify-content-center rounded-3 p-2`,
+                                                option: [
+                                                  {
+                                                    key: 'onclick',
+                                                    value: gvc.event((e, event) => {
+                                                      event.stopPropagation();
+                                                      event.preventDefault();
+                                                      next();
+                                                    }),
+                                                  },
+                                                  {
+                                                    key: 'onmousedown',
+                                                    value: gvc.event((e, event) => {
+                                                      event.stopPropagation();
+                                                      event.preventDefault();
+                                                    }),
+                                                  },
+                                                  {
+                                                    key: 'ontouchstart',
+                                                    value: gvc.event((e, event) => {
+                                                      event.stopPropagation();
+                                                      event.preventDefault();
+                                                      next();
+                                                    }),
+                                                  },
+                                                ],
+                                              },
+                                            };
+                                          }),
+                                              (() => {
+                                                function next() {
+                                                  dialog.checkYesOrNot({
+                                                    text: '是否確認刪除分類?',
+                                                    callback: response => {
+                                                      if (response) {
+                                                        dd.deleted = true;
+                                                        document.getElementById(`${id}`)!!.classList.add(`d-none`);
+                                                        saveEvent();
+                                                      }
+                                                    },
+                                                  });
+                                                }
+
+                                                return ` <div
+                                            style="cursor: pointer;"
+                                            class="border d-flex align-items-center justify-content-center rounded-3 p-2"
+                                            onclick="${gvc.event((e, event) => {
+                                                  event.stopPropagation();
+                                                  event.preventDefault();
+                                                  next();
+                                                })}"
+                                            onmousedown="${gvc.event((e, event) => {
+                                                  event.stopPropagation();
+                                                  event.preventDefault();
+                                                })}"
+                                            ontouchstart="${gvc.event((e, event) => {
+                                                  event.stopPropagation();
+                                                  event.preventDefault();
+                                                  next();
+                                                })}"
+                                          >
+                                            <i class="fa-regular fa-trash fs-6 text-black-50"></i>
+                                          </div>`;
+                                              })(),
+                                        ].filter((dd)=>{
+                                          return dd
+                                            }).join(` <div class="mx-1"></div>`)}`;
+                                          },
+                                          divCreate: {
+                                            class: `dd-handle d-flex align-items-center`,
+                                          },
+                                        };
+                                      })}
+                                      ${dd.array && dd.array.length ? loop(false,dd.array, `${dd.og_path}`) : []}
+                                    </li>`;
+                                  })
+                                  .join('')}
+                                <div
+                                  class="${root ? ``:`d-none`}"
+                                  style="cursor:pointer;align-self: stretch; height: 50px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex"
+                                  onclick="${gvc.event(() => {
+                                  plus()
+                                  })}"
+                                >
+                                  <div
+                                    style="align-self: stretch; height: 40px; border-radius: 2px; border: 1px #DDDDDD solid; justify-content: center; align-items: center; gap: 6px; display: inline-flex"
+                                  >
+                                    <i class="fa-solid fa-plus" style="color: #3366BB;font-size: 16px; "></i>
+                                    <div
+                                      style="color: #3366BB; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
+                                    >
+                                      新增主分類
+                                    </div>
+                                  </div>
+                                </div>
+                              </ol>
+                            `;
                           }
-                        });
-                      },
-                      rowClick: (_, index) => {
-                        if (vm.dataList) {
-                          vm.data = vm.dataList[index];
-                        }
-                        vm.type = 'replace';
-                      },
-                      filter: [
-                        {
-                          name: '批量移除',
-                          event: () => {
-                            dialog.checkYesOrNot({
-                              text: '確定要刪除商品分類嗎？<br/>（若包含子分類，也將一併刪除）',
-                              callback: response => {
-                                if (response) {
-                                  dialog.dataLoading({ visible: true });
-                                  ApiShop.deleteCollections({
-                                    data: { data: vm.dataList?.filter(dd => dd.checked) },
-                                    token: (window.parent as any).config.token,
-                                  }).then(res => {
-                                    dialog.dataLoading({ visible: false });
-                                    if (res.result) {
-                                      vm.query = '';
-                                      vm.dataList = undefined;
-                                      gvc.notifyDataChange(vm.id);
-                                    } else {
-                                      dialog.errorMessage({ text: '刪除失敗' });
+
+                          return html` <div class="dd" id="nestable">${loop(true,vm_2.data, '')}</div>`;
+                        },
+                        divCreate: {
+                          class: `px-lg-3 px-1`,
+                        },
+                        onCreate: () => {
+                          gvc.glitter.addStyle(`
+.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
+*:first-child+html .cf { zoom: 1; }
+
+h1 { font-size: 1.75em; margin: 0 0 0.6em 0; }
+
+a { color: #2996cc; }
+a:hover { text-decoration: none; }
+
+p { line-height: 1.5em; }
+.small { color: #666; font-size: 0.875em; }
+.large { font-size: 1.25em; }
+
+/**
+ * Nestable
+ */
+
+.dd { position: relative; display: block; margin: 0; padding: 0;  list-style: none; font-size: 13px; line-height: 20px; }
+
+.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
+.dd-list .dd-list { padding-left: 30px; }
+.dd-collapsed .dd-list { display: none; }
+
+.dd-item,
+.dd-empty,
+.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }
+
+.dd-handle { display: block; height: 40px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
+    background: #fafafa;
+    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
+    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
+    background:         linear-gradient(top, #fafafa 0%, #eee 100%);
+    -webkit-border-radius: 3px;
+            border-radius: 3px;
+    box-sizing: border-box; -moz-box-sizing: border-box;
+}
+.dd-handle:hover { color: #2ea8e5; background: #fff; }
+
+.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 30px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 20px; line-height: 1; text-align: center; font-weight: bold; }
+.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
+.dd-item > button[data-action="collapse"]:before { content: '-'; }
+
+.dd-placeholder,
+.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
+.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
+    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
+                      -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+    background-image:    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
+                         -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+    background-image:         linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
+                              linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+    background-size: 60px 60px;
+    background-position: 0 0, 30px 30px;
+}
+
+.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
+.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
+.dd-dragel .dd-handle {
+    -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
+            box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
+}
+
+/**
+ * Nestable Extras
+ */
+
+.nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; }
+
+#nestable-menu { padding: 0; margin: 20px 0; }
+
+#nestable-output,
+#nestable2-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; }
+
+#nestable2 .dd-handle {
+    color: #fff;
+    border: 1px solid #999;
+    background: #bbb;
+    background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);
+    background:    -moz-linear-gradient(top, #bbb 0%, #999 100%);
+    background:         linear-gradient(top, #bbb 0%, #999 100%);
+}
+#nestable2 .dd-handle:hover { background: #bbb; }
+#nestable2 .dd-item > button:before { color: #fff; }
+
+@media only screen and (min-width: 700px) {
+
+    .dd {  width: 100%; }
+    .dd + .dd { margin-left: 2%; }
+
+}
+
+.dd-hover > .dd-handle { background: #2ea8e5 !important; }
+
+/**
+ * Nestable Draggable Handles
+ */
+
+.dd3-content { display: block; height: 30px; margin: 5px 0; padding: 5px 10px 5px 40px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
+    background: #fafafa;
+    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
+    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
+    background:         linear-gradient(top, #fafafa 0%, #eee 100%);
+    -webkit-border-radius: 3px;
+            border-radius: 3px;
+    box-sizing: border-box; -moz-box-sizing: border-box;
+}
+.dd3-content:hover { color: #2ea8e5; background: #fff; }
+
+.dd-dragel > .dd3-item > .dd3-content { margin: 0; }
+
+.dd3-item > button { margin-left: 30px; }
+
+.dd3-handle { position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden;
+    border: 1px solid #aaa;
+    background: #ddd;
+    background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
+    background:    -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
+    background:         linear-gradient(top, #ddd 0%, #bbb 100%);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.dd3-handle:before { content: '≡'; display: block; position: absolute; left: 0; top: 3px; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; font-weight: normal; }
+.dd3-handle:hover { background: #ddd; }
+
+/**
+ * Socialite
+ */
+
+.socialite { display: block; float: left; height: 35px; }
+`);
+                          gvc.glitter.addMtScript(
+                            [`${gvc.glitter.root_path}/jslib/nestable/jquery.nestable.js`],
+                            () => {
+                              const updateOutput = function () {
+                                const outPutJson = ($('#nestable') as any).nestable('serialize');
+
+                                function loop(array: any[], new_path: string) {
+                                  return (array ?? []).map(dd => {
+                                    const og = sharedData[dd.id];
+                                    og.new_path = [new_path, og.title]
+                                      .filter(dd => {
+                                        return dd;
+                                      })
+                                      .join(' / ');
+                                    if (dd.children) {
+                                      dd.children = loop(dd.children, og.new_path);
                                     }
+                                    og.array = dd.children;
+
+                                    return og;
                                   });
                                 }
-                              },
-                            });
-                          },
+
+                                const op = loop(outPutJson, '');
+                                console.log(`output-data`, op);
+                                return op;
+                              };
+                              getSaveData = updateOutput;
+                              //@ts-ignore
+                              $('#nestable')
+                                //@ts-ignore
+                                .nestable({
+                                  group: 1,
+                                  maxDepth: 3
+                                })
+                                .on('change', updateOutput);
+                            },
+                            () => {}
+                          );
                         },
-                      ],
-                      hiddenPageSplit: true,
+                      };
                     }),
+                    `<div class="update-bar-container">
+${BgWidget.save(
+  gvc.event(() => {
+    const dialog = new ShareDialog(gvc.glitter);
+    dialog.checkYesOrNot({
+      text: '是否確認儲存?',
+      callback: async response => {
+        if (response) {
+         await saveEvent()
+        }
+      },
+    });
+  })
+)}
+</div>`,
                   ].join('')
                 )
               )}
@@ -882,648 +908,375 @@ export class ShoppingCollections {
               'en-US': getEmptyLanguageData(),
             };
           }
-
+          vm.data.product_id=(vm.data.product_id ?? []).map((dd)=>{
+            return parseInt(dd as any,10)
+          })
           const language_data: LanguageData = (vm.data.language_data as any)[select_lan];
           const prefixURL = `https://${(window.parent as any).glitter.share.editorViewModel.domain}/${Language.getLanguageLinkPrefix(true, select_lan)}collections/`;
-
+          setTimeout(() => {
+            (window.parent as any).document.querySelector('#language_btn_place')!!.innerHTML =
+              `<div class="title-container">
+                 <div class="flex-fill"></div>
+                 <div class="d-flex align-items-center gap-2">
+                   ${BgWidget.grayButton(
+                     html` <div class="d-flex align-items-center gap-2">
+                       <i class="fa-duotone fa-solid fa-earth-americas"></i>${Language.getLanguageText({
+                         local: true,
+                         compare: select_lan,
+                       })}
+                     </div>`,
+                     gvc.event(() => {
+                       BgWidget.settingDialog({
+                         gvc: gvc,
+                         innerHTML: (gvc: GVC) => {
+                           return gvc.bindView(
+                             (() => {
+                               const id = gvc.glitter.getUUID();
+                               return {
+                                 bind: id,
+                                 view: () => {
+                                   return html` <div
+                                     style="position: relative; word-break: break-all; white-space: normal;"
+                                   >
+                                     ${BgWidget.grayNote('前往商店設定->商店訊息中，設定支援的語言。')}
+                                     ${gvc.bindView(() => {
+                                       return {
+                                         bind: glitter.getUUID(),
+                                         view: () => {
+                                           const sup = [
+                                             {
+                                               key: 'en-US',
+                                               value: '英文',
+                                             },
+                                             {
+                                               key: 'zh-CN',
+                                               value: '簡體中文',
+                                             },
+                                             {
+                                               key: 'zh-TW',
+                                               value: '繁體中文',
+                                             },
+                                           ]
+                                             .filter(dd => {
+                                               return (
+                                                 window.parent as any
+                                               ).store_info.language_setting.support.includes(dd.key);
+                                             })
+                                             .sort(dd => {
+                                               return dd.key === select_lan ? -1 : 1;
+                                             });
+
+                                           return html` <div
+                                             class="d-flex mt-3 flex-wrap align-items-center justify-content-center"
+                                             style="gap:15px;"
+                                           >
+                                             ${sup
+                                               .map(dd => {
+                                                 return html`
+                                                   <div
+                                                     class="px-3 py-1 text-white position-relative d-flex align-items-center justify-content-center"
+                                                     style="border-radius: 20px;background: #393939;cursor: pointer;width:100px;"
+                                                     onclick="${gvc.event(() => {
+                                                       select_lan = dd.key;
+                                                       gvc.closeDialog();
+                                                       refresh();
+                                                     })}"
+                                                   >
+                                                     ${dd.value}
+                                                     <div
+                                                       class="position-absolute  text-white rounded-2 px-2 d-flex align-items-center rounded-3 ${dd.key !==
+                                                       select_lan
+                                                         ? 'd-none'
+                                                         : ''}"
+                                                       style="top: -12px;right: -10px; height:20px;font-size: 11px;background: #ff6c02;"
+                                                     >
+                                                       已選擇
+                                                     </div>
+                                                   </div>
+                                                 `;
+                                               })
+                                               .join('')}
+                                           </div>`;
+                                         },
+                                       };
+                                     })}
+                                   </div>`;
+                                 },
+                               };
+                             })()
+                           );
+                         },
+                         title: '切換語系',
+                         footer_html: gvc => {
+                           return '';
+                         },
+                         width: 300,
+                       });
+                     })
+                   )}
+                   ${
+                     vm.type === 'add'
+                       ? BgWidget.grayButton(
+                           '代入現有分類',
+                           gvc.event(() => {
+                             BgProduct.collectionsDialog({
+                               gvc: gvc,
+                               default: [],
+                               callback: value => {
+                                 const data = vm.dataList?.find(
+                                   item => [...item.parentTitles, item.title].join(' / ') === value[0]
+                                 );
+                                 if (data) {
+                                   vm.data = data;
+                                   vm.cloneTarget = structuredClone(data);
+                                 }
+                                 gvc.notifyDataChange(viewID);
+                               },
+                               single: true,
+                             });
+                           })
+                         )
+                       : ''
+                   }
+                 </div>
+               </div>`;
+          }, 100);
           return BgWidget.container(
             [
-              // 上層導覽
-              html` <div class="title-container">
-                ${BgWidget.goBack(
-                  gvc.event(() => {
-                    vm.type = 'list';
-                  })
-                )}
-                ${BgWidget.title(obj.type === 'add' ? '新增分類' : '編輯分類')}
-                <div class="flex-fill"></div>
-                <div class="d-flex align-items-center gap-2">
-                  ${BgWidget.grayButton(
-                    html` <div class="d-flex align-items-center gap-2">
-                      <i class="fa-duotone fa-solid fa-earth-americas"></i>${Language.getLanguageText({
-                        local: true,
-                        compare: select_lan,
-                      })}
-                    </div>`,
-                    gvc.event(() => {
-                      BgWidget.settingDialog({
-                        gvc: gvc,
-                        innerHTML: (gvc: GVC) => {
-                          return gvc.bindView(
-                            (() => {
-                              const id = gvc.glitter.getUUID();
-                              return {
-                                bind: id,
-                                view: () => {
-                                  return html` <div
-                                    style="position: relative; word-break: break-all; white-space: normal;"
-                                  >
-                                    ${BgWidget.grayNote('前往商店設定->商店訊息中，設定支援的語言。')}
-                                    ${gvc.bindView(() => {
-                                      return {
-                                        bind: glitter.getUUID(),
-                                        view: () => {
-                                          const sup = [
-                                            {
-                                              key: 'en-US',
-                                              value: '英文',
-                                            },
-                                            {
-                                              key: 'zh-CN',
-                                              value: '簡體中文',
-                                            },
-                                            {
-                                              key: 'zh-TW',
-                                              value: '繁體中文',
-                                            },
-                                          ]
-                                            .filter(dd => {
-                                              return (
-                                                window.parent as any
-                                              ).store_info.language_setting.support.includes(dd.key);
-                                            })
-                                            .sort(dd => {
-                                              return dd.key === select_lan ? -1 : 1;
-                                            });
-
-                                          return html` <div
-                                            class="d-flex mt-3 flex-wrap align-items-center justify-content-center"
-                                            style="gap:15px;"
-                                          >
-                                            ${sup
-                                              .map(dd => {
-                                                return html`
-                                                  <div
-                                                    class="px-3 py-1 text-white position-relative d-flex align-items-center justify-content-center"
-                                                    style="border-radius: 20px;background: #393939;cursor: pointer;width:100px;"
-                                                    onclick="${gvc.event(() => {
-                                                      select_lan = dd.key;
-                                                      gvc.closeDialog();
-                                                      refresh();
-                                                    })}"
-                                                  >
-                                                    ${dd.value}
-                                                    <div
-                                                      class="position-absolute  text-white rounded-2 px-2 d-flex align-items-center rounded-3 ${dd.key !==
-                                                      select_lan
-                                                        ? 'd-none'
-                                                        : ''}"
-                                                      style="top: -12px;right: -10px; height:20px;font-size: 11px;background: #ff6c02;"
-                                                    >
-                                                      已選擇
-                                                    </div>
-                                                  </div>
-                                                `;
-                                              })
-                                              .join('')}
-                                          </div>`;
-                                        },
-                                      };
-                                    })}
-                                  </div>`;
-                                },
-                              };
-                            })()
-                          );
-                        },
-                        title: '切換語系',
-                        footer_html: gvc => {
-                          return '';
-                        },
-                        width: 300,
-                      });
-                    })
-                  )}
-                  ${vm.type === 'add'
-                    ? BgWidget.grayButton(
-                        '代入現有分類',
-                        gvc.event(() => {
-                          BgProduct.collectionsDialog({
-                            gvc: gvc,
-                            default: [],
-                            callback: value => {
-                              const data = vm.dataList?.find(
-                                item => [...item.parentTitles, item.title].join(' / ') === value[0]
-                              );
-                              if (data) {
-                                vm.data = data;
-                                vm.cloneTarget = structuredClone(data);
-                              }
-                              gvc.notifyDataChange(viewID);
-                            },
-                            single: true,
-                          });
-                        })
-                      )
-                    : ''}
-                </div>
-              </div>`,
-              // 左右容器
-              BgWidget.container1x2(
-                {
-                  // 左容器
-                  html: [
-                    BgWidget.mainCard(
-                      html` <div class="tx_700" style="margin-bottom: 12px">分類標籤 ${BgWidget.requiredStar()}</div>
-                        ${EditorElem.editeInput({
-                          gvc: gvc,
-                          title: '',
-                          default: vm.data.title,
-                          placeHolder: '請輸入分類標籤',
-                          callback: text => {
-                            vm.data.title = text;
-                          },
-                        })}`
-                    ),
-                    BgWidget.mainCard(
-                      html` <div class="d-flex flex-column" style="margin-bottom: 12px; gap:5px;">
-                          <div class="tx_700">前台分類顯示名稱 ${BgWidget.languageInsignia(select_lan)}</div>
-                          ${BgWidget.grayNote('未設定則參照分類標籤顯示')}
-                        </div>
-                        ${EditorElem.editeInput({
-                          gvc: gvc,
-                          title: '',
-                          default: language_data.title,
-                          placeHolder: vm.data.title || '預設為「分類標籤」輸入值',
-                          callback: text => {
-                            language_data.title = text;
-                            if (language_data.seo.domain === '') {
-                              language_data.seo.domain = language_data.title;
-                              gvc.notifyDataChange(domainID);
-                            }
-                          },
-                        })}`
-                    ),
-                    gvc.bindView(() => {
-                      const viewID = gvc.glitter.getUUID();
-                      return {
-                        bind: viewID,
-                        view: () => {
-                          return BgWidget.mainCard(
-                            [
-                              html` <div class="tx_700 mb-2">
-                                連結網址 ${BgWidget.requiredStar()} ${BgWidget.languageInsignia(select_lan)}
-                              </div>`,
-                              gvc.bindView({
-                                bind: domainID,
-                                view: () => {
-                                  return html` <div
-                                      class="${document.body.clientWidth < 800
-                                        ? 'w-100'
-                                        : ''} justify-content-start justify-content-lg-center"
-                                      style="padding: 9px 18px;background: #EAEAEA; justify-content: center; align-items: center; gap: 5px; display: flex"
-                                    >
-                                      <div
-                                        style="text-align: right; color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
-                                      >
-                                        ${prefixURL}
-                                      </div>
-                                    </div>
-                                    <input
-                                      class="flex-fill ${document.body.clientWidth < 800 ? `w-100` : ``}"
-                                      style="border:none;background:none;text-align: start; color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word; ${document
-                                        .body.clientWidth > 768
-                                        ? ''
-                                        : 'padding: 9px 18px;'}"
-                                      placeholder="請輸入連結網址"
-                                      value="${language_data.seo.domain || ''}"
-                                      onchange="${gvc.event(e => {
-                                        let text = e.value;
-                                        if (text.length > 0 && !CheckInput.isChineseEnglishNumberHyphen(text)) {
-                                          dialog.infoMessage({ text: '連結僅限使用中英文數字與連接號' });
-                                        } else {
-                                          language_data.seo.domain = text;
-                                        }
-                                        gvc.notifyDataChange(viewID);
-                                      })}"
-                                    />`;
-                                },
-                                divCreate: {
-                                  style: `width: 100%; 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;' : 'flex-direction: column; gap: 0px;'
-                                  }`,
-                                },
-                              }),
-                              html` <div class="mt-2 mb-1">
-                                <span class="tx_normal me-1">網址預覽</span>
-                                ${BgWidget.greenNote(
-                                  prefixURL + language_data.seo.domain,
-                                  gvc.event(() => {
-                                    gvc.glitter.openNewTab(prefixURL + (language_data.seo.domain ?? ''));
-                                  })
-                                )}
-                              </div>`,
-                            ].join(BgWidget.mbContainer(12))
-                          );
-                        },
-                        divCreate: {
-                          class: `${gvc.glitter.ut.frSize({ sm: '' }, 'p-0')}`,
-                        },
-                      };
-                    }),
-                    BgWidget.mainCard(
-                      (() => {
-                        const pvm = {
-                          id: gvc.glitter.getUUID(),
-                          loading: true,
-                          dataList: vm.data.product_id,
-                          productList: [],
-                        };
-                        return html`
-                          <div class="d-flex flex-column">
-                            <div class="d-flex align-items-center" style="justify-content: space-between;">
-                              <div class="tx_700" style="margin-bottom: 12px">商品</div>
-                              ${BgWidget.grayButton(
-                                '選擇商品',
-                                gvc.event(() => {
-                                  BgProduct.productsDialog({
-                                    gvc: gvc,
-                                    default: vm.data.product_id,
-                                    callback: value => {
-                                      pvm.dataList = value;
-                                      vm.data.product_id = value;
-                                      pvm.loading = true;
-                                      gvc.notifyDataChange(pvm.id);
-                                    },
-                                  });
-                                })
-                              )}
-                            </div>
-                            ${gvc.bindView({
-                              bind: pvm.id,
-                              view: () => {
-                                if (pvm.loading) {
-                                  return '資料載入中';
-                                }
-                                if (pvm.productList.length === 0) {
-                                  return '目前無選取任何商品';
-                                }
-                                return gvc.map(
-                                  pvm.productList.map((opt: OptionsItem, index: number) => {
-                                    return html` <div
-                                      class="form-check-label c_updown_label"
-                                      style="display: flex; align-items: center; min-height: 60px; gap: 8px;"
-                                    >
-                                      <span class="tx_normal" style="min-width: 30px;">${index + 1}.</span>
-                                      ${BgWidget.validImageBox({ gvc, image: opt.image, width: 40 })}
-                                      <span class="tx_normal">${opt.value}</span>
-                                      ${opt.note ? html` <span class="tx_gray_12 ms-2">${opt.note}</span> ` : ''}
-                                    </div>`;
-                                  })
-                                );
-                              },
-                              onCreate: () => {
-                                if (pvm.loading) {
-                                  if (pvm.dataList.length === 0) {
-                                    pvm.productList = [];
-                                    pvm.loading = false;
-                                    setTimeout(() => gvc.notifyDataChange(pvm.id), 100);
+              [
+                html` <div class="tx_700" style="margin-bottom: 12px">分類標籤 ${BgWidget.requiredStar()}</div>
+                  ${EditorElem.editeInput({
+                    gvc: gvc,
+                    title: '',
+                    default: vm.data.title,
+                    placeHolder: '請輸入分類標籤',
+                    callback: text => {
+                      vm.data.title = text;
+                    },
+                  })}`,
+                html` <div class="d-flex flex-column" style="margin-bottom: 12px; gap:5px;">
+                    <div class="tx_700">前台分類顯示名稱 ${BgWidget.languageInsignia(select_lan)}</div>
+                    ${BgWidget.grayNote('未設定則參照分類標籤顯示')}
+                  </div>
+                  ${EditorElem.editeInput({
+                    gvc: gvc,
+                    title: '',
+                    default: language_data.title,
+                    placeHolder: vm.data.title || '預設為「分類標籤」輸入值',
+                    callback: text => {
+                      language_data.title = text;
+                      if (language_data.seo.domain === '') {
+                        language_data.seo.domain = language_data.title;
+                        gvc.notifyDataChange(domainID);
+                      }
+                    },
+                  })}`,
+                gvc.bindView(() => {
+                  const viewID = gvc.glitter.getUUID();
+                  return {
+                    bind: viewID,
+                    view: () => {
+                      return [
+                        html` <div class="tx_700 mb-2">
+                          連結網址 ${BgWidget.requiredStar()} ${BgWidget.languageInsignia(select_lan)}
+                        </div>`,
+                        gvc.bindView({
+                          bind: domainID,
+                          view: () => {
+                            return html` <div
+                                class="${document.body.clientWidth < 800
+                                  ? 'w-100'
+                                  : ''} justify-content-start justify-content-lg-center"
+                                style="padding: 9px 18px;background: #EAEAEA; justify-content: center; align-items: center; gap: 5px; display: flex"
+                              >
+                                <div
+                                  style="text-align: right; color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
+                                >
+                                  ${prefixURL}
+                                </div>
+                              </div>
+                              <input
+                                class="flex-fill ${document.body.clientWidth < 800 ? `w-100` : ``}"
+                                style="border:none;background:none;text-align: start; color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word; ${document
+                                  .body.clientWidth > 768
+                                  ? ''
+                                  : 'padding: 9px 18px;'}"
+                                placeholder="請輸入連結網址"
+                                value="${language_data.seo.domain || ''}"
+                                onchange="${gvc.event(e => {
+                                  let text = e.value;
+                                  if (text.length > 0 && !CheckInput.isChineseEnglishNumberHyphen(text)) {
+                                    dialog.infoMessage({ text: '連結僅限使用中英文數字與連接號' });
                                   } else {
-                                    ApiShop.getProduct({
-                                      page: 0,
-                                      limit: 99999,
-                                      id_list: pvm.dataList.join(','),
-                                    }).then(data => {
-                                      pvm.productList = data.response.data.map(
-                                        (product: {
-                                          content: {
-                                            id: number;
-                                            title: string;
-                                            preview_image: string[];
-                                          };
-                                        }) => {
-                                          return {
-                                            key: product.content.id,
-                                            value: product.content.title,
-                                            image: product.content.preview_image[0] ?? BgWidget.noImageURL,
-                                          };
-                                        }
-                                      );
-                                      pvm.loading = false;
-                                      gvc.notifyDataChange(pvm.id);
-                                    });
+                                    language_data.seo.domain = text;
                                   }
-                                }
+                                  gvc.notifyDataChange(viewID);
+                                })}"
+                              />`;
+                          },
+                          divCreate: {
+                            style: `width: 100%; 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;' : 'flex-direction: column; gap: 0px;'
+                            }`,
+                          },
+                        }),
+                        html` <div class="mt-2 mb-1">
+                          <span class="tx_normal me-1">網址預覽</span>
+                          ${BgWidget.greenNote(
+                            prefixURL + language_data.seo.domain,
+                            gvc.event(() => {
+                              gvc.glitter.openNewTab(prefixURL + (language_data.seo.domain ?? ''));
+                            })
+                          )}
+                        </div>`,
+                      ].join(BgWidget.mbContainer(12));
+                    },
+                    divCreate: {
+                      class: `${gvc.glitter.ut.frSize({ sm: '' }, 'p-0')}`,
+                    },
+                  };
+                }),
+                (() => {
+                  const pvm = {
+                    id: gvc.glitter.getUUID(),
+                    loading: true,
+                    dataList: vm.data.product_id,
+                    productList: [],
+                  };
+                  return html`
+                    <div class="d-flex flex-column">
+                      <div class="d-flex align-items-center" style="justify-content: space-between;">
+                        <div class="tx_700" style="margin-bottom: 12px">商品</div>
+                        ${BgWidget.grayButton(
+                          '選擇商品',
+                          gvc.event(() => {
+                            BgProduct.productsDialog({
+                              gvc: gvc,
+                              default: pvm.dataList,
+                              callback: value => {
+                                pvm.dataList = value;
+                                vm.data.product_id = value;
+                                pvm.loading = true;
+                                gvc.notifyDataChange(pvm.id);
                               },
-                            })}
-                          </div>
-                        `;
-                      })()
-                    ),
-                    BgWidget.mainCard(
-                      [
-                        html` <div style="font-weight: 700;" class="mb-3">
-                            搜尋引擎列表 ${BgWidget.languageInsignia(select_lan, 'margin-left:5px;')}
-                          </div>
-                          <div class="tx_normal fw-normal" style="margin: 18px 0 8px;">SEO 標題</div>
-                          ${EditorElem.editeInput({
-                            gvc: gvc,
-                            title: '',
-                            default: language_data.seo.title ?? '',
-                            placeHolder: '請輸入 SEO 標題',
-                            callback: text => {
-                              language_data.seo.title = text;
-                            },
-                          })}`,
-                        ,
-                        html` <div class="tx_normal fw-normal">SEO 描述</div>
-                          ${EditorElem.editeText({
-                            gvc: gvc,
-                            title: '',
-                            default: language_data.seo.content ?? '',
-                            placeHolder: '請輸入 SEO 描述',
-                            callback: text => {
-                              language_data.seo.content = text;
-                            },
-                          })}`,
-                        ,
-                        html` <div class="tx_normal fw-normal">SEO 圖片</div>
-                          ${EditorElem.uploadImageContainer({
-                            gvc: gvc,
-                            title: '',
-                            def: vm.data.seo_image ?? '',
-                            callback: text => {
-                              vm.data.seo_image = text;
-                            },
-                          })}`,
-                        ,
-                      ].join(BgWidget.mbContainer(10))
-                    ),
-                  ].join(BgWidget.mbContainer(24)),
-                  ratio: 75,
-                },
-                {
-                  // 右容器
-                  html: gvc.bindView(
-                    (() => {
-                      const summaryId = glitter.getUUID();
-                      return {
-                        bind: summaryId,
+                            });
+                          })
+                        )}
+                      </div>
+                      ${gvc.bindView({
+                        bind: pvm.id,
                         view: () => {
-                          function isUndefinedOption(key: string) {
-                            return !key || ShoppingCollections.undefinedOption === key;
+                          if (pvm.loading && pvm.dataList && pvm.dataList.length) {
+                            return '資料載入中';
                           }
-
-                          function firstParentView() {
-                            return [
-                              html` <div class="tx_700">第一層</div>`,
-                              vm.type === 'add' && isUndefinedOption(vm.data.parentTitles[0])
-                                ? BgWidget.grayNote('若未選取項目，則為第一層分類')
-                                : '',
-                              BgWidget.select({
-                                gvc: gvc,
-                                callback: text => {
-                                  vm.data.parentTitles[0] = text;
-                                  gvc.notifyDataChange(summaryId);
-                                },
-                                default: vm.data.parentTitles[0] ?? '',
-                                options: vm.data.allCollections.map((item: string) => {
-                                  return { key: item, value: item };
-                                }),
-                                style: 'margin: 8px 0;',
-                                readonly: vm.type === 'replace',
-                              }),
-                              BgWidget.mbContainer(12),
-                            ].join('');
+                          if (pvm.productList.length === 0 || !pvm.dataList.length) {
+                            return '目前無選取任何商品';
                           }
-
-                          function secondParentView(subs: string[]) {
-                            return [
-                              html` <div class="tx_700">第二層</div>`,
-                              vm.type === 'add' && isUndefinedOption(vm.data.parentTitles[1])
-                                ? BgWidget.grayNote('若未選取項目，則為第二層分類')
-                                : '',
-                              BgWidget.select({
-                                gvc: gvc,
-                                callback: text => {
-                                  vm.data.parentTitles[1] = text;
-                                  gvc.notifyDataChange(summaryId);
-                                },
-                                default: vm.data.parentTitles[1] ?? '',
-                                options: [ShoppingCollections.undefinedOption, ...subs].map((item: string) => {
-                                  return { key: item, value: item };
-                                }),
-                                style: 'margin: 8px 0;',
-                                readonly: vm.type === 'replace',
-                              }),
-                            ].join('');
-                          }
-
-                          function editSubCollection() {
-                            const id = gvc.glitter.getUUID();
-
-                            if (vm.data.parentTitles.length === 2) {
-                              return '';
-                            }
-
-                            return [
-                              html` <div class="tx_700" style="margin-bottom: 12px">子分類</div>`,
-                              !vm.data.subCollections || vm.data.subCollections.length === 0
-                                ? '尚未建立子分類'
-                                : gvc.bindView({
-                                    bind: id,
-                                    view: () =>
-                                      vm.data.subCollections
-                                        .map((item: string) => {
-                                          return html` <div
-                                            class="d-flex align-items-center justify-content-between mt-2"
-                                          >
-                                            ${item}<i
-                                              class="fa-regular fa-trash cursor_pointer"
-                                              onclick="${gvc.event(() => {
-                                                vm.data.subCollections = vm.data.subCollections.filter(
-                                                  (sub: string) => item !== sub
-                                                );
-                                                gvc.notifyDataChange(id);
-                                              })}"
-                                            ></i>
-                                          </div>`;
-                                        })
-                                        .join(''),
-                                  }),
-                            ].join('');
-                          }
-
-                          function levelSetting() {
-                            const parentTitles = Array.isArray(vm.data.parentTitles) ? vm.data.parentTitles : [];
-                            const parentTab = vm.dataList?.find(item => item.title === parentTitles[0]);
-                            const parentSubs =
-                              parentTab && Array.isArray(parentTab.subCollections) ? parentTab.subCollections : [];
-
-                            if (vm.type === 'add') {
-                              return [
-                                firstParentView(),
-                                parentSubs.length > 0
-                                  ? secondParentView(parentSubs.filter((item: string) => item !== vm.data.title))
-                                  : '',
-                              ].join('');
-                            }
-
-                            if (vm.type === 'replace' && parentTitles.length > 0) {
-                              return [
-                                firstParentView(),
-                                parentTitles[1] && parentSubs.length > 0 ? secondParentView(parentSubs) : '',
-                                editSubCollection(),
-                              ].join('');
-                            }
-
-                            return editSubCollection();
-                          }
-
-                          return [BgWidget.summaryCard(levelSetting())].join(BgWidget.mbContainer(24));
+                          return gvc.map(
+                            pvm.productList.map((opt: OptionsItem, index: number) => {
+                              return html` <div
+                                class="form-check-label c_updown_label"
+                                style="display: flex; align-items: center; min-height: 60px; gap: 8px;"
+                              >
+                                <span class="tx_normal" style="min-width: 30px;">${index + 1}.</span>
+                                ${BgWidget.validImageBox({ gvc, image: opt.image, width: 40 })}
+                                <span class="tx_normal">${opt.value}</span>
+                                ${opt.note ? html` <span class="tx_gray_12 ms-2">${opt.note}</span> ` : ''}
+                              </div>`;
+                            })
+                          );
                         },
-                      };
-                    })()
-                  ),
-                  ratio: 25,
-                }
-              ),
-              // 空白容器
-              BgWidget.mbContainer(240),
-              // 儲存資料
-              html` <div class="update-bar-container">
-                ${obj.type === 'replace'
-                  ? BgWidget.redButton(
-                      '刪除分類',
-                      gvc.event(() => {
-                        dialog.checkYesOrNot({
-                          text: '確定要刪除商品分類嗎？<br/>（若包含子分類，也將一併刪除）',
-                          callback: bool => {
-                            if (bool) {
-                              dialog.dataLoading({ visible: true });
-                              ApiShop.deleteCollections({
-                                data: { data: [vm.data] },
-                                token: (window.parent as any).config.token,
-                              }).then(res => {
-                                dialog.dataLoading({ visible: false });
-                                if (res.result) {
-                                  vm.type = 'list';
-                                  dialog.successMessage({ text: '更新成功' });
-                                } else {
-                                  dialog.errorMessage({ text: '更新失敗' });
-                                }
+                        onCreate: () => {
+                          if (pvm.loading) {
+                            if (pvm.dataList.length === 0) {
+                              pvm.productList = [];
+                              pvm.loading = false;
+                              gvc.notifyDataChange(pvm.id);
+                            } else {
+                              ApiShop.getProduct({
+                                page: 0,
+                                limit: 99999,
+                                id_list: pvm.dataList.join(','),
+                              }).then(data => {
+                                pvm.productList = data.response.data.map(
+                                  (product: {
+                                    content: {
+                                      id: number;
+                                      title: string;
+                                      preview_image: string[];
+                                    };
+                                  }) => {
+                                    return {
+                                      key: product.content.id,
+                                      value: product.content.title,
+                                      image: product.content.preview_image[0] ?? BgWidget.noImageURL,
+                                    };
+                                  }
+                                );
+                                pvm.loading = false;
+                                gvc.notifyDataChange(pvm.id);
                               });
                             }
-                          },
-                        });
-                      })
-                    )
-                  : ''}
-                ${BgWidget.cancel(
-                  gvc.event(() => {
-                    vm.type = 'list';
-                  })
-                )}
-                ${BgWidget.save(
-                  gvc.event(() => {
-                    // 驗證分類標籤是否填寫
-                    if (CheckInput.isEmpty(vm.data.title)) {
-                      dialog.infoMessage({ text: '請填寫「分類標籤」' });
-                      return;
-                    }
-
-                    // 驗證分類路徑是否已存在
-                    const updateDataPath = [...vm.data.parentTitles, vm.data.title].join('');
-
-                    if ([...original.parentTitles, original.title].join('') !== updateDataPath) {
-                      const somePath = originDataList.some(item => {
-                        return [...item.parentTitles, item.title].join('') === updateDataPath;
-                      });
-
-                      if (somePath) {
-                        dialog.infoMessage({ text: '此「分類標籤」已存在' });
-                        return;
-                      }
-                    }
-
-                    // 標題格式化
-                    const forbiddenRegex = /[,/\\]/;
-                    if (forbiddenRegex.test(vm.data.title)) {
-                      dialog.infoMessage({ text: '標題不可包含空白格與以下符號：<br />「 , 」「 / 」「 \\ 」' });
-                      return;
-                    }
-
-                    // 驗證連結網址是否填寫
-                    const no_fill_language = (window.parent as any).store_info.language_setting.support.find(
-                      (dd: any) => !(vm.data.language_data as any)[dd].seo.domain
-                    );
-                    if (no_fill_language) {
-                      select_lan = no_fill_language;
-                      refresh();
-                      dialog.infoMessage({ text: '請重新填寫「連結網址」' });
-                      return;
-                    }
-
-                    // 連結格式化
-                    if (
-                      (window.parent as any).store_info.language_setting.support.find((dd: any) => {
-                        if (CheckInput.isChineseEnglishNumberHyphen((vm.data.language_data as any)[dd].seo.domain)) {
-                          return false;
-                        }
-                        select_lan = dd;
-                        return true;
-                      })
-                    ) {
-                      refresh();
-                      dialog.infoMessage({ text: '連結僅限使用中英文數字與連接號' });
-                      return;
-                    }
-
-                    // 驗證是否有重複使用的 domain
-                    const validLangDomain = getValidLangDomain();
-                    if (!validLangDomain.result) {
-                      refresh();
-                      dialog.infoMessage({ text: validLangDomain.text });
-                      return;
-                    }
-
-                    // --- 更新分類方法 ---
-                    function putEvent() {
-                      dialog.dataLoading({ visible: true });
-                      ApiShop.putCollections({
-                        data: { replace: vm.data, original },
-                        token: (window.parent as any).config.token,
-                      }).then(res => {
-                        dialog.dataLoading({ visible: false });
-                        if (res.result) {
-                          if (res.response.result) {
-                            vm.type = 'list';
-                            dialog.successMessage({ text: '更新成功' });
-                          } else {
-                            dialog.errorMessage({ text: res.response.message });
-                          }
-                        } else {
-                          dialog.errorMessage({ text: '更新失敗' });
-                        }
-                      });
-                    }
-
-                    // --- 取代原有的標籤程序 ---
-                    if (vm.cloneTarget && vm.cloneTarget.title === vm.data.title) {
-                      dialog.checkYesOrNot({
-                        text: ['若移動當前商品分類，<b>附帶的子分類將不會保留</b>，', '確定要執行嗎？'].join('<br/>'),
-                        callback: bool => {
-                          if (bool && vm.cloneTarget) {
-                            ApiShop.deleteCollections({
-                              data: { data: [vm.cloneTarget] },
-                              token: (window.parent as any).config.token,
-                            }).then(() => {
-                              putEvent();
-                            });
                           }
                         },
-                      });
-                      return;
-                    }
-
-                    // --- 確認更新 ---
-                    putEvent();
-                  })
-                )}
-              </div>`,
-            ].join(BgWidget.mbContainer(24))
+                        divCreate: {
+                          class: `w-100`,
+                          style: `overflow-x:hidden;`,
+                        },
+                      })}
+                    </div>
+                  `;
+                })(),
+                [
+                  html` <div style="font-weight: 700;" class="mb-3">
+                      搜尋引擎列表 ${BgWidget.languageInsignia(select_lan, 'margin-left:5px;')}
+                    </div>
+                    <div class="tx_normal fw-normal" style="margin: 18px 0 8px;">SEO 標題</div>
+                    ${EditorElem.editeInput({
+                      gvc: gvc,
+                      title: '',
+                      default: language_data.seo.title ?? '',
+                      placeHolder: '請輸入 SEO 標題',
+                      callback: text => {
+                        language_data.seo.title = text;
+                      },
+                    })}`,
+                  ,
+                  html` <div class="tx_normal fw-normal">SEO 描述</div>
+                    ${EditorElem.editeText({
+                      gvc: gvc,
+                      title: '',
+                      default: language_data.seo.content ?? '',
+                      placeHolder: '請輸入 SEO 描述',
+                      callback: text => {
+                        language_data.seo.content = text;
+                      },
+                    })}`,
+                  ,
+                  html` <div class="tx_normal fw-normal">SEO 圖片</div>
+                    ${EditorElem.uploadImageContainer({
+                      gvc: gvc,
+                      title: '',
+                      def: vm.data.seo_image ?? '',
+                      callback: text => {
+                        vm.data.seo_image = text;
+                      },
+                    })}`,
+                  ,
+                ].join(BgWidget.mbContainer(10)),
+              ].join(`<div class="mx-n2 border-top my-3"></div>`),
+              // 空白容器
+              BgWidget.mbContainer(240),
+            ].join(BgWidget.mbContainer(24)),
+            {
+              style: `width: 100%;overflow-x:hidden;`,
+            }
           );
         },
+        divCreate: {
+          style: ``,
+          class: `w-100`,
+        },
       };
     });
   }