ts-glitter 22.4.7 → 22.5.0

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

@@ -14,9 +14,11 @@ type ViewModel = {
   filterID: string;
   type: 'list' | 'add' | 'replace';
   data: Collection;
-  dataList: any;
+  dataList: Collection[] | undefined;
+  collectionList: Collection[];
   query: string;
   allParents: string[];
+  cloneTarget: Collection | null;
 };
 
 type Product = {
@@ -90,8 +92,10 @@ export class ShoppingCollections {
         },
       },
       dataList: undefined,
+      collectionList: [],
       query: '',
       allParents: [],
+      cloneTarget: null,
     };
     const dialog = new ShareDialog(gvc.glitter);
 
@@ -179,6 +183,8 @@ export class ShoppingCollections {
         dataList: [{ obj: vm, key: 'type' }],
         view: () => {
           if (vm.type === 'list') {
+            vm.cloneTarget = null;
+
             return BgWidget.container(html`
               <div class="title-container">
                 ${BgWidget.title('商品分類')}
@@ -187,127 +193,171 @@ export class ShoppingCollections {
                   ${BgWidget.grayButton(
                     '編輯順序',
                     gvc.event(() => {
-                      return BgWidget.infoDialog({
+                      const cloneCollectionList = vm.collectionList.slice();
+
+                      return BgWidget.settingDialog({
                         gvc,
                         title: '編輯順序',
-                        innerHTML: gvc.bindView(
-                          (() => {
-                            const id = glitter.getUUID();
-                            let loading = true;
-                            return {
-                              bind: id,
-                              view: () => {
-                                if (loading) {
-                                  this.addStyle(gvc);
-                                  return '';
-                                } else {
-                                  return html` <div class="d-flex">
-                                    <div class="parent-container">
-                                      <div class="tx_title text-center mb-2">父層類別</div>
-                                      <ul class="ul-style" id="parent-list">
-                                        <!-- TS 生成的父層類別列表 -->
-                                      </ul>
-                                    </div>
-                                    <div class="child-container">
-                                      <div class="tx_title text-center mb-2">子層類別</div>
-                                      <ul class="ul-style" id="child-list">
-                                        <!-- TS 生成的子層類別列表 -->
-                                      </ul>
-                                    </div>
-                                  </div>`;
-                                }
-                              },
-                              divCreate: {},
-                              onCreate: () => {
-                                if (loading) {
-                                  gvc.addMtScript(
-                                    [
-                                      {
-                                        src: 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js',
-                                      },
-                                    ],
-                                    () => {
-                                      const si = setInterval(() => {
-                                        if ((window as any).Sortable !== undefined) {
-                                          loading = false;
-                                          clearInterval(si);
-                                          gvc.notifyDataChange(id);
-                                        }
-                                      }, 300);
-                                    },
-                                    () => {}
-                                  );
-                                } else {
-                                  // 建立列表項目
-                                  function createListItem(item: any, index: number): HTMLLIElement {
-                                    const li = document.createElement('li');
-                                    li.className = 'li-style';
-                                    li.setAttribute('data-index', index.toString());
-                                    li.setAttribute('data-parent', item.parentTitles[0] || 'root');
-                                    li.innerHTML = `<span class="drag-icon"></span><span class="tx_normal">${item.title}</span>`;
-                                    return li;
-                                  }
+                        width: 700,
+                        innerHTML: (iGVC: GVC) => {
+                          const id = glitter.getUUID();
+                          let loading = true;
+                          this.addStyle(iGVC);
 
-                                  // 初始化 Sortable 功能
-                                  function initSortable(containerId: string) {
-                                    const el = document.querySelector(`#${containerId}`) as HTMLElement;
-                                    (window as any).Sortable.create(el, {
-                                      animation: 150,
-                                      onEnd: function () {
-                                        const items = [...el.children].map(
-                                          child => vm.dataList[parseInt(child.getAttribute('data-index') as string)]
-                                        );
-                                        ApiShop.sortCollections({
-                                          data: { list: items },
-                                          token: (window.parent as any).config.token,
-                                        }).then(res => {
-                                          if (res.result && !res.response) {
-                                            dialog.errorMessage({ text: '更改順序失敗' });
-                                          }
-                                        });
-                                      },
-                                    });
-                                  }
-
-                                  function loadChildItems(parentTitle: string) {
-                                    const childContainer = document.getElementById('child-list') as HTMLElement;
-                                    childContainer.innerHTML = '';
+                          return iGVC.bindView({
+                            bind: id,
+                            view: () => {
+                              if (loading) {
+                                return BgWidget.spinner();
+                              }
 
-                                    vm.dataList.forEach((item: any, index: number) => {
-                                      if (item.parentTitles[0] === parentTitle) {
-                                        childContainer.appendChild(createListItem(item, index));
+                              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;
 
-                                    initSortable('child-list');
-                                  }
+                                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;
 
-                                  const parentContainer = document.getElementById('parent-list') as HTMLElement;
-
-                                  // 初始化父層類別列表
-                                  vm.dataList.forEach((item: any, index: number) => {
-                                    if (item.parentTitles.length === 0) {
-                                      // 如果是父層類別
-                                      const li = createListItem(item, index);
-                                      li.addEventListener('click', () => {
-                                        loadChildItems(item.title);
-                                        document
-                                          .querySelectorAll('#parent-list li')
-                                          .forEach(li => li.classList.remove('selectCol'));
-                                        li.classList.add('selectCol');
+                                    // 取得最近的 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';
                                       });
-                                      parentContainer.appendChild(li);
                                     }
+
+                                    // 設定被點擊的項目背景色
+                                    target.style.backgroundColor = '#d8ecda';
+
+                                    // 呼叫對應層級的載入方法
+                                    loadChildLayer([...(item.parentTitles ?? []), item.title]);
                                   });
 
-                                  initSortable('parent-list');
+                                  return li;
                                 }
-                              },
-                            };
-                          })()
-                        ),
-                        closeCallback: () => {
-                          gvc.notifyDataChange(vm.id);
+
+                                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('');
                         },
                       });
                     })
@@ -347,8 +397,202 @@ export class ShoppingCollections {
                         gvc.notifyDataChange(vm.id);
                       }),
                       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 => {
@@ -361,7 +605,9 @@ export class ShoppingCollections {
 
                             ApiShop.getCollection().then(data => {
                               if (data.result && data.response.value.length > 0) {
-                                vm.allParents = ['(無)'].concat(
+                                vm.collectionList = data.response.value;
+
+                                vm.allParents = [this.undefinedOption].concat(
                                   data.response.value.map((item: { title: string }) => item.title)
                                 );
 
@@ -377,7 +623,7 @@ export class ShoppingCollections {
                                     const original = structuredClone(dd);
                                     const isChildren = dd.parentTitles && dd.parentTitles.length > 0;
 
-                                    // 更新類別顯示資料
+                                    // 更新分類顯示資料
                                     function triggerHidden() {
                                       dd.hidden = !Boolean(dd.hidden);
 
@@ -396,7 +642,7 @@ export class ShoppingCollections {
                                       if (isChildren) {
                                         const parent = collectionsMap.get(dd.parentTitles[0]);
                                         if (parent?.hidden && dd.hidden) {
-                                          dialog.infoMessage({ text: '請先開啟顯示父層類別' });
+                                          dialog.infoMessage({ text: '請先開啟顯示第一層分類' });
                                         } else {
                                           triggerHidden();
                                         }
@@ -405,7 +651,7 @@ export class ShoppingCollections {
                                           triggerHidden();
                                         } else {
                                           dialog.checkYesOrNot({
-                                            text: '若關閉顯示該父層類別，所有子層也將會關閉顯示，是否確定要執行？',
+                                            text: '若關閉顯示該層分類，子層分類也將會關閉顯示，是否確定要執行？',
                                             callback: bool => bool && triggerHidden(),
                                           });
                                         }
@@ -417,12 +663,14 @@ export class ShoppingCollections {
                                         key: '標題',
                                         value: html`<div
                                           class="fs-7"
-                                          style="min-width: ${document.body.clientWidth > 768 ? 400 : 225}px;"
+                                          style="min-width: ${document.body.clientWidth > 768
+                                            ? 400
+                                            : 225}px; padding-left: ${4 + dd.parentTitles.length * 12}px"
                                         >
-                                          ${isChildren
-                                            ? html` <i class="fa-solid fa-arrow-turn-down-right me-2"></i
-                                                >${dd.parentTitles.join(' / ')} / ${dd.title}`
-                                            : dd.title}
+                                          ${dd.parentTitles.length > 0
+                                            ? html`<i class="fa-solid fa-arrow-turn-down-right me-1"></i>`
+                                            : ''}
+                                          ${dd.title}
                                         </div>`,
                                       },
                                       {
@@ -459,7 +707,9 @@ export class ShoppingCollections {
                         });
                       },
                       rowClick: (_, index) => {
-                        vm.data = vm.dataList[index];
+                        if (vm.dataList) {
+                          vm.data = vm.dataList[index];
+                        }
                         vm.type = 'replace';
                       },
                       filter: [
@@ -467,12 +717,12 @@ export class ShoppingCollections {
                           name: '批量移除',
                           event: () => {
                             dialog.checkYesOrNot({
-                              text: '確定要刪除商品類別嗎？<br/>（若此類別包含子類別，也將一併刪除）',
+                              text: '確定要刪除商品分類嗎？<br/>（若包含子分類，也將一併刪除）',
                               callback: response => {
                                 if (response) {
                                   dialog.dataLoading({ visible: true });
                                   ApiShop.deleteCollections({
-                                    data: { data: vm.dataList.filter((dd: any) => dd.checked) },
+                                    data: { data: vm.dataList?.filter(dd => dd.checked) },
                                     token: (window.parent as any).config.token,
                                   }).then(res => {
                                     dialog.dataLoading({ visible: false });
@@ -498,6 +748,8 @@ export class ShoppingCollections {
               ${BgWidget.mbContainer(120)}
             `);
           } else if (vm.type == 'replace') {
+            vm.cloneTarget = null;
+
             return this.editorDetail({
               vm: vm,
               gvc: gvc,
@@ -517,33 +769,33 @@ export class ShoppingCollections {
 
   static addStyle(gvc: GVC) {
     gvc.addStyle(`
-      .parent-container,
-      .child-container {
-        flex: 1;
+      .layer-container {
+        display: flex;
+        gap: 18px;
         margin-right: 20px;
       }
 
-      .parent-container:last-child,
-      .child-container:last-child {
-        margin-right: 0;
-      }
-
       .ul-style {
         list-style-type: none;
-        padding: 0;
+        padding: 8px;
         margin: 0;
         min-height: 200px;
         border: 1px solid #ccc;
+        border-radius: 10px;
+        width: 190px;
+        height: 380px;
+        overflow-y: auto;
       }
 
       .li-style {
+        width: 100%;
         padding: 6px 10px;
-        margin-bottom: 5px;
-        background-color: #eee;
+        margin-bottom: 6px;
+        background-color: #dddddd;
         cursor: move;
-        border: 1px solid #ccc;
         display: flex;
         align-items: center;
+        border-radius: 10px;
       }
 
       .drag-icon {
@@ -552,13 +804,9 @@ export class ShoppingCollections {
       }
 
       .drag-icon::before {
-        content: '↕';
-        font-size: 18px;
-        margin-right: 10px;
-      }
-
-      .selectCol {
-        background-color: #dcdcdc;
+        content: '⠿';
+        font-size: 20px;
+        cursor: grab;
       }
     `);
   }
@@ -567,22 +815,26 @@ export class ShoppingCollections {
     const gvc = obj.gvc;
     const glitter = gvc.glitter;
     const vm = obj.vm;
-    const original = JSON.parse(JSON.stringify(vm.data));
-    const dialog = new ShareDialog(gvc.glitter);
+    const dialog = new ShareDialog(glitter);
+
+    const original = JSON.parse(JSON.stringify(vm.data)) as Collection;
+    const originDataList = JSON.parse(JSON.stringify(vm.dataList ?? [])) as Collection[];
     const language_setting = (window.parent as any).store_info.language_setting;
     let select_lan = language_setting.def;
 
     function getValidLangDomain(): { result: boolean; text: string } {
       const supports = language_setting.support as LanguageLocation[];
-      const dataList = vm.dataList.filter((data: { title: string }) => data.title !== vm.data.title);
+
+      const targetData = vm.cloneTarget && vm.cloneTarget.title === vm.data.title ? vm.cloneTarget : original;
+
+      const dataList = originDataList.filter(item => {
+        return [...item.parentTitles, item.title].join('') !== [...targetData.parentTitles, targetData.title].join('');
+      });
 
       const lagDomain = supports.map(lang => {
-        const domainMap = dataList.map((item: any) => {
-          if (!item.language_data) {
-            return '';
-          }
+        const domainMap = dataList?.map(item => {
           try {
-            return item.language_data[lang].seo.domain;
+            return item.language_data ? item.language_data[lang].seo.domain : '';
           } catch (error) {
             return '';
           }
@@ -599,7 +851,7 @@ export class ShoppingCollections {
           });
           return {
             result: false,
-            text: `語系「${text}」的連結網址「${vm.data.language_data[data.lang].seo.domain}」<br />已存在於其他類別，請更換連結網址`,
+            text: `語系「${text}」的連結網址「${vm.data.language_data[data.lang].seo.domain}」<br />已存在於其他分類，請更換連結網址`,
           };
         }
       }
@@ -611,9 +863,7 @@ export class ShoppingCollections {
       const viewID = gvc.glitter.getUUID();
       const domainID = gvc.glitter.getUUID();
 
-      function refresh() {
-        gvc.notifyDataChange(viewID);
-      }
+      const refresh = () => gvc.notifyDataChange(viewID);
 
       return {
         bind: viewID,
@@ -632,6 +882,7 @@ export class ShoppingCollections {
               'en-US': getEmptyLanguageData(),
             };
           }
+
           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/`;
 
@@ -644,11 +895,11 @@ export class ShoppingCollections {
                     vm.type = 'list';
                   })
                 )}
-                ${BgWidget.title(obj.type === 'add' ? '新增類別' : '編輯類別')}
+                ${BgWidget.title(obj.type === 'add' ? '新增分類' : '編輯分類')}
                 <div class="flex-fill"></div>
-                <div class="me-2 ">
+                <div class="d-flex align-items-center gap-2">
                   ${BgWidget.grayButton(
-                    html`<div class="d-flex align-items-center" style="gap:5px;">
+                    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,
@@ -665,7 +916,7 @@ export class ShoppingCollections {
                                 bind: id,
                                 view: () => {
                                   return html` <div
-                                    style="position: relative;word-break: break-all;white-space: normal;"
+                                    style="position: relative; word-break: break-all; white-space: normal;"
                                   >
                                     ${BgWidget.grayNote('前往商店設定->商店訊息中，設定支援的語言。')}
                                     ${gvc.bindView(() => {
@@ -691,7 +942,7 @@ export class ShoppingCollections {
                                                 window.parent as any
                                               ).store_info.language_setting.support.includes(dd.key);
                                             })
-                                            .sort((dd: any) => {
+                                            .sort(dd => {
                                               return dd.key === select_lan ? -1 : 1;
                                             });
 
@@ -700,7 +951,7 @@ export class ShoppingCollections {
                                             style="gap:15px;"
                                           >
                                             ${sup
-                                              .map((dd: any) => {
+                                              .map(dd => {
                                                 return html`
                                                   <div
                                                     class="px-3 py-1 text-white position-relative d-flex align-items-center justify-content-center"
@@ -715,8 +966,8 @@ export class ShoppingCollections {
                                                     <div
                                                       class="position-absolute  text-white rounded-2 px-2 d-flex align-items-center rounded-3 ${dd.key !==
                                                       select_lan
-                                                        ? `d-none`
-                                                        : ``}"
+                                                        ? 'd-none'
+                                                        : ''}"
                                                       style="top: -12px;right: -10px; height:20px;font-size: 11px;background: #ff6c02;"
                                                     >
                                                       已選擇
@@ -731,8 +982,6 @@ export class ShoppingCollections {
                                     })}
                                   </div>`;
                                 },
-                                divCreate: {},
-                                onCreate: () => {},
                               };
                             })()
                           );
@@ -745,6 +994,28 @@ export class ShoppingCollections {
                       });
                     })
                   )}
+                  ${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>`,
               // 左右容器
@@ -767,7 +1038,7 @@ export class ShoppingCollections {
                     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(`未設定則參照分類標籤顯示`)}
+                          ${BgWidget.grayNote('未設定則參照分類標籤顯示')}
                         </div>
                         ${EditorElem.editeInput({
                           gvc: gvc,
@@ -796,7 +1067,7 @@ export class ShoppingCollections {
                               gvc.bindView({
                                 bind: domainID,
                                 view: () => {
-                                  return html`<div
+                                  return html` <div
                                       class="${document.body.clientWidth < 800
                                         ? 'w-100'
                                         : ''} justify-content-start justify-content-lg-center"
@@ -978,63 +1249,132 @@ export class ShoppingCollections {
                         ,
                       ].join(BgWidget.mbContainer(10))
                     ),
-                  ].join(html` <div style="margin-top: 24px;"></div>`),
+                  ].join(BgWidget.mbContainer(24)),
                   ratio: 75,
                 },
                 {
                   // 右容器
-                  html: [
-                    BgWidget.summaryCard(
-                      (() => {
-                        if (
-                          (vm.data.allCollections &&
-                            vm.data.allCollections.length > 0 &&
-                            vm.data.parentTitles &&
-                            vm.data.parentTitles.length > 0) ||
-                          vm.type === 'add'
-                        ) {
-                          return html` <div class="tx_700" style="margin-bottom: 12px">父層</div>
-                            ${BgWidget.select({
-                              gvc: gvc,
-                              callback: text => {
-                                vm.data.parentTitles[0] = text;
-                              },
-                              default: vm.data.parentTitles[0] ?? '',
-                              options: vm.data.allCollections.map((item: string) => {
-                                return { key: item, value: item };
+                  html: gvc.bindView(
+                    (() => {
+                      const summaryId = glitter.getUUID();
+                      return {
+                        bind: summaryId,
+                        view: () => {
+                          function isUndefinedOption(key: string) {
+                            return !key || ShoppingCollections.undefinedOption === key;
+                          }
+
+                          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',
                               }),
-                              style: 'margin: 8px 0;',
-                            })}`;
-                        }
-                        const id = gvc.glitter.getUUID();
-                        return html`
-                          <div class="tx_700" style="margin-bottom: 12px">子分類</div>
-                          ${gvc.bindView({
-                            bind: id,
-                            view: () => {
-                              return gvc.map(
-                                vm.data.subCollections.map((item: string) => {
-                                  return html` <div
-                                    style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px;"
-                                  >
-                                    ${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(html` <div style="margin-top: 24px;"></div>`),
+                              BgWidget.mbContainer(12),
+                            ].join('');
+                          }
+
+                          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));
+                        },
+                      };
+                    })()
+                  ),
                   ratio: 25,
                 }
               ),
@@ -1044,10 +1384,10 @@ export class ShoppingCollections {
               html` <div class="update-bar-container">
                 ${obj.type === 'replace'
                   ? BgWidget.redButton(
-                      '刪除類別',
+                      '刪除分類',
                       gvc.event(() => {
                         dialog.checkYesOrNot({
-                          text: '確定要刪除商品類別嗎？<br/>（若此類別包含子類別，也將一併刪除）',
+                          text: '確定要刪除商品分類嗎？<br/>（若包含子分類，也將一併刪除）',
                           callback: bool => {
                             if (bool) {
                               dialog.dataLoading({ visible: true });
@@ -1076,20 +1416,36 @@ export class ShoppingCollections {
                 )}
                 ${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) => {
-                        return !(vm.data.language_data as any)[dd].seo.domain;
-                      }
+                      (dd: any) => !(vm.data.language_data as any)[dd].seo.domain
                     );
                     if (no_fill_language) {
                       select_lan = no_fill_language;
@@ -1097,14 +1453,15 @@ export class ShoppingCollections {
                       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)) {
-                          select_lan = dd;
-                          return true;
-                        } else {
+                        if (CheckInput.isChineseEnglishNumberHyphen((vm.data.language_data as any)[dd].seo.domain)) {
                           return false;
                         }
+                        select_lan = dd;
+                        return true;
                       })
                     ) {
                       refresh();
@@ -1112,30 +1469,55 @@ export class ShoppingCollections {
                       return;
                     }
 
+                    // 驗證是否有重複使用的 domain
                     const validLangDomain = getValidLangDomain();
                     if (!validLangDomain.result) {
                       refresh();
-                      dialog.warningMessage({ text: validLangDomain.text, callback: () => {} });
+                      dialog.infoMessage({ text: validLangDomain.text });
                       return;
                     }
 
-                    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: '更新成功' });
+                    // --- 更新分類方法 ---
+                    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: res.response.message });
+                          dialog.errorMessage({ text: '更新失敗' });
                         }
-                      } 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>`,
@@ -1145,6 +1527,45 @@ export class ShoppingCollections {
       };
     });
   }
+
+  static sortedCollectionConfig(config: Collection[], dataArray: Collection[]) {
+    if (!dataArray?.length) return config;
+
+    const parentTitles = dataArray[0].parentTitles ?? [];
+
+    // 遞迴查找並替換目標層級的 children
+    function updateTree(currentLevel: any[], depth: number): boolean {
+      if (depth === parentTitles.length) {
+        // 已到排序目標層級
+        const sorted = dataArray
+          .map(item => {
+            return currentLevel.find(c => c.title === item.title);
+          })
+          .filter(Boolean); // 避免 null
+
+        // 取代原本順序
+        for (let i = 0; i < sorted.length; i++) {
+          currentLevel[i] = sorted[i];
+        }
+
+        // 裁剪多餘元素（若原始長度 > 排序長度）
+        currentLevel.length = sorted.length;
+        return true;
+      }
+
+      const next = currentLevel.find(c => c.title === parentTitles[depth]);
+      if (!next) return false;
+      return updateTree(next.array, depth + 1);
+    }
+
+    const updated = updateTree(config, 0);
+
+    if (!updated) throw new Error('找不到對應的父節點進行排序');
+
+    return config;
+  }
+
+  static undefinedOption = '請選擇項目';
 }
 
 (window as any).glitter.setModule(import.meta.url, ShoppingCollections);