ts-glitter 22.5.2 → 22.5.4

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

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { BgWidget } from '../backend-manager/bg-widget.js';
 import { BgProduct } from '../backend-manager/bg-product.js';
 import { ApiShop } from '../glitter-base/route/shopping.js';
@@ -5,6 +14,7 @@ import { EditorElem } from '../glitterBundle/plugins/editor-elem.js';
 import { ShareDialog } from '../glitterBundle/dialog/ShareDialog.js';
 import { CheckInput } from '../modules/checkInput.js';
 import { Language } from '../glitter-base/global/language.js';
+import { PublicConfig } from '../glitter-base/route/public-config.js';
 const html = String.raw;
 function getEmptyLanguageData() {
     return {
@@ -72,7 +82,7 @@ export class ShoppingCollections {
                 let flattened = [];
                 collections.forEach(col => {
                     const { title, array, product_id } = col;
-                    const flattenedCol = Object.assign(Object.assign({}, col), { array: [], product_id: product_id !== null && product_id !== void 0 ? product_id : [], checked: false, parentTitles: parentTitles.length ? [...parentTitles] : [], allCollections: parentTitles.length ? [...topLevelCollections] : [], subCollections: array.map(subCol => subCol.title), hidden: Boolean(col.hidden) });
+                    const flattenedCol = Object.assign(Object.assign({}, col), { array: [], product_id: product_id !== null && product_id !== void 0 ? product_id : [], checked: false, parentTitles: parentTitles.length ? [...parentTitles] : [], allCollections: parentTitles.length ? [...topLevelCollections] : [], subCollections: (array !== null && array !== void 0 ? array : []).map(subCol => subCol.title), hidden: Boolean(col.hidden) });
                     if (flattenedCol.title.includes(vm.query) ||
                         flattenedCol.parentTitles.find(title => {
                             return title.includes(vm.query);
@@ -105,6 +115,33 @@ export class ShoppingCollections {
             const topLevelCollections = data.collections.map(col => col.title);
             return flattenCollections(data.collections, [], topLevelCollections);
         };
+        function saveEvent() {
+            return __awaiter(this, void 0, void 0, function* () {
+                return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                    function checkPass(array) {
+                        if (Array.from(new Set((array !== null && array !== void 0 ? array : []).map((dd) => { 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 });
+                    yield PublicConfig.set('collection', data);
+                    dialog.dataLoading({ visible: false });
+                    dialog.successMessage({ text: '儲存成功' });
+                    gvc.recreateView();
+                    resolve(true);
+                }));
+            });
+        }
+        let getSaveData = () => { };
         return gvc.bindView(() => {
             return {
                 bind: vm.id,
@@ -116,319 +153,516 @@ 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) => {
-                                    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: () => {
-                                            var _a;
-                                            if (loading) {
-                                                iGVC.addMtScript([{ src: 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js' }], () => {
-                                                    const si = setInterval(() => {
-                                                        if (window.parent.Sortable !== undefined) {
-                                                            loading = false;
-                                                            clearInterval(si);
-                                                            iGVC.notifyDataChange(id);
-                                                        }
-                                                    }, 300);
-                                                }, () => { });
-                                            }
-                                            else {
-                                                const document = window.parent.document;
-                                                function createListItem(item, index) {
-                                                    var _a;
-                                                    const li = document.createElement('li');
-                                                    li.className = 'li-style';
-                                                    li.setAttribute('data-index', index.toString());
-                                                    li.setAttribute('data-path', [...((_a = item.parentTitles) !== null && _a !== void 0 ? _a : []), item.title].join(' / '));
-                                                    li.innerHTML = `<span class="drag-icon"></span><span class="tx_normal">${item.title}</span>`;
-                                                    li.addEventListener('click', (e) => {
-                                                        var _a;
-                                                        const target = e.currentTarget;
-                                                        const ul = target.closest('ul');
-                                                        if (ul) {
-                                                            Array.from(ul.children).forEach((element) => {
-                                                                element.style.backgroundColor = '#dddddd';
-                                                            });
-                                                        }
-                                                        target.style.backgroundColor = '#d8ecda';
-                                                        loadChildLayer([...((_a = item.parentTitles) !== null && _a !== void 0 ? _a : []), item.title]);
-                                                    });
-                                                    return li;
-                                                }
-                                                function initSortable(containerId) {
-                                                    const el = document.getElementById(containerId);
-                                                    window.parent.Sortable.create(el, {
-                                                        animation: 200,
-                                                        scroll: true,
-                                                        onEnd: () => {
-                                                            const items = [...el.children].map(child => { var _a; return (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a[parseInt(child.getAttribute('data-index'))]; });
-                                                            vm.collectionList = ShoppingCollections.sortedCollectionConfig(vm.collectionList, items);
-                                                        },
-                                                    });
-                                                }
-                                                function loadChildLayer(parentPath) {
-                                                    var _a;
-                                                    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);
-                                                    container.innerHTML = '';
-                                                    (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a.forEach((item, index) => {
-                                                        var _a;
-                                                        const path = (_a = item.parentTitles) !== null && _a !== void 0 ? _a : [];
-                                                        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');
-                                                root.innerHTML = '';
-                                                (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a.forEach((item, index) => {
-                                                    var _a;
-                                                    if (((_a = item.parentTitles) !== null && _a !== void 0 ? _a : []).length === 0) {
-                                                        root.appendChild(createListItem(item, index));
-                                                    }
-                                                });
-                                                initSortable('layer-list-0');
-                                            }
-                                        },
-                                    });
-                                },
-                                footer_html: (fGVC) => {
-                                    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.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([
                             BgWidget.searchPlace(gvc.event(e => {
                                 vm.query = e.value;
                                 gvc.notifyDataChange(vm.id);
                             }), vm.query || '', '搜尋分類'),
-                            BgWidget.tableV3({
-                                gvc: gvc,
-                                getData: vmi => {
-                                    ApiShop.getProduct({
-                                        page: 0,
-                                        limit: 999999,
-                                    }).then(d => {
-                                        if (d.result) {
-                                            const products = 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) => item.title));
-                                                    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.config.token,
-                                                                }).then(() => {
-                                                                    dialog.dataLoading({ visible: false });
-                                                                    gvc.notifyDataChange(vm.id);
-                                                                });
-                                                            }
-                                                            function setHiddenEvent() {
-                                                                if (isChildren) {
-                                                                    const parent = collectionsMap.get(dd.parentTitles[0]);
-                                                                    if ((parent === null || parent === void 0 ? void 0 : parent.hidden) && dd.hidden) {
-                                                                        dialog.infoMessage({ text: '請先開啟顯示第一層分類' });
-                                                                    }
-                                                                    else {
-                                                                        triggerHidden();
-                                                                    }
+                            gvc.bindView(() => {
+                                const vm_2 = {
+                                    id: gvc.glitter.getUUID(),
+                                    loading: true,
+                                    data: [],
+                                };
+                                function loading() {
+                                    var _a;
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        const collection = yield ApiShop.getCollection();
+                                        vm_2.data = (_a = collection.response.value) !== null && _a !== void 0 ? _a : [];
+                                        vm_2.loading = false;
+                                        gvc.notifyDataChange(vm_2.id);
+                                    });
+                                }
+                                const sharedData = {};
+                                loading();
+                                function refresh() {
+                                    gvc.notifyDataChange(vm_2.id);
+                                }
+                                return {
+                                    bind: vm_2.id,
+                                    view: () => {
+                                        if (vm_2.loading) {
+                                            return BgWidget.spinner();
+                                        }
+                                        function loop(root, array, og_path) {
+                                            function plus(array2 = 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,
+                                                            },
+                                                            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 {
-                                                                    if (dd.hidden) {
-                                                                        triggerHidden();
+                                                                    array2.push(refer);
+                                                                    refresh();
+                                                                    gvc.closeDialog();
+                                                                }
+                                                            })),
+                                                        ].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);
+                                                                    })}"
+                                            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,
+                                                                                    },
+                                                                                    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>`;
+                                                                            },
+                                                                        });
                                                                     }
-                                                                    else {
+                                                                    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-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: bool => bool && triggerHidden(),
+                                                                            text: '是否確認刪除分類?',
+                                                                            callback: response => {
+                                                                                if (response) {
+                                                                                    dd.deleted = true;
+                                                                                    document.getElementById(`${id}`).classList.add(`d-none`);
+                                                                                    saveEvent();
+                                                                                }
+                                                                            },
                                                                         });
                                                                     }
-                                                                }
-                                                            }
-                                                            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,
-                                                                },
-                                                            ];
-                                                        });
-                                                    }
-                                                    vm.dataList = collections;
-                                                    vmi.tableData = getDatalist();
-                                                }
-                                                else {
-                                                    vm.dataList = [];
-                                                    vmi.tableData = [];
-                                                }
-                                                vmi.pageSize = 1;
-                                                vmi.originalData = vm.dataList;
-                                                vmi.loading = false;
-                                                vmi.callback();
-                                            });
+                                                                    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 => {
-                                                    var _a;
-                                                    if (response) {
-                                                        dialog.dataLoading({ visible: true });
-                                                        ApiShop.deleteCollections({
-                                                            data: { data: (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a.filter(dd => dd.checked) },
-                                                            token: window.parent.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').nestable('serialize');
+                                                function loop(array, new_path) {
+                                                    return (array !== null && array !== void 0 ? 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;
+                                            $('#nestable')
+                                                .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: (response) => __awaiter(this, void 0, void 0, function* () {
+                                        if (response) {
+                                            yield saveEvent();
+                                        }
+                                    }),
+                                });
+                            }))}
+</div>`,
                         ].join('')))}
               ${BgWidget.mbContainer(120)}
             `);
@@ -544,7 +778,7 @@ export class ShoppingCollections {
             return {
                 bind: viewID,
                 view: () => {
-                    var _a, _b, _c, _d;
+                    var _a, _b, _c, _d, _e;
                     if (obj.type === 'replace') {
                         vm.data.language_data = (_a = vm.data.language_data) !== null && _a !== void 0 ? _a : {
                             'zh-TW': {
@@ -559,556 +793,342 @@ export class ShoppingCollections {
                             'en-US': getEmptyLanguageData(),
                         };
                     }
+                    vm.data.product_id = ((_b = vm.data.product_id) !== null && _b !== void 0 ? _b : []).map((dd) => {
+                        return parseInt(dd, 10);
+                    });
                     const language_data = vm.data.language_data[select_lan];
                     const prefixURL = `https://${window.parent.glitter.share.editorViewModel.domain}/${Language.getLanguageLinkPrefix(true, select_lan)}collections/`;
+                    setTimeout(() => {
+                        window.parent.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) => {
+                                        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.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 => {
+                                            var _a;
+                                            const data = (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a.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({
+                        [
+                            html ` <div class="tx_700" style="margin-bottom: 12px">分類標籤 ${BgWidget.requiredStar()}</div>
+                  ${EditorElem.editeInput({
                                 gvc: gvc,
-                                innerHTML: (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.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: '',
+                                default: vm.data.title,
+                                placeHolder: '請輸入分類標籤',
+                                callback: text => {
+                                    vm.data.title = text;
                                 },
-                                title: '切換語系',
-                                footer_html: gvc => {
-                                    return '';
+                            })}`,
+                            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);
+                                    }
                                 },
-                                width: 300,
-                            });
-                        }))}
-                  ${vm.type === 'add'
-                            ? BgWidget.grayButton('代入現有分類', gvc.event(() => {
-                                BgProduct.collectionsDialog({
-                                    gvc: gvc,
-                                    default: [],
-                                    callback: value => {
-                                        var _a;
-                                        const data = (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a.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;
+                            })}`,
+                            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 {
+                                                            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(() => {
+                                                var _a;
+                                                gvc.glitter.openNewTab(prefixURL + ((_a = language_data.seo.domain) !== null && _a !== void 0 ? _a : ''));
+                                            }))}
+                        </div>`,
+                                        ].join(BgWidget.mbContainer(12));
                                     },
-                                })}`),
-                                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);
-                                        }
+                                    divCreate: {
+                                        class: `${gvc.glitter.ut.frSize({ sm: '' }, 'p-0')}`,
                                     },
-                                })}`),
-                                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(() => {
-                                                    var _a;
-                                                    gvc.glitter.openNewTab(prefixURL + ((_a = language_data.seo.domain) !== null && _a !== void 0 ? _a : ''));
-                                                }))}
-                              </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, index) => {
-                                                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);
-                                                }
-                                                else {
-                                                    ApiShop.getProduct({
-                                                        page: 0,
-                                                        limit: 99999,
-                                                        id_list: pvm.dataList.join(','),
-                                                    }).then(data => {
-                                                        pvm.productList = data.response.data.map((product) => {
-                                                            var _a;
-                                                            return {
-                                                                key: product.content.id,
-                                                                value: product.content.title,
-                                                                image: (_a = product.content.preview_image[0]) !== null && _a !== void 0 ? _a : BgWidget.noImageURL,
-                                                            };
-                                                        });
-                                                        pvm.loading = false;
-                                                        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: (_b = language_data.seo.title) !== null && _b !== void 0 ? _b : '',
-                                        placeHolder: '請輸入 SEO 標題',
-                                        callback: text => {
-                                            language_data.seo.title = text;
-                                        },
-                                    })}`,
-                                    ,
-                                    html ` <div class="tx_normal fw-normal">SEO 描述</div>
-                          ${EditorElem.editeText({
-                                        gvc: gvc,
-                                        title: '',
-                                        default: (_c = language_data.seo.content) !== null && _c !== void 0 ? _c : '',
-                                        placeHolder: '請輸入 SEO 描述',
-                                        callback: text => {
-                                            language_data.seo.content = text;
-                                        },
-                                    })}`,
-                                    ,
-                                    html ` <div class="tx_normal fw-normal">SEO 圖片</div>
-                          ${EditorElem.uploadImageContainer({
+                                };
+                            }),
+                            (() => {
+                                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,
-                                        title: '',
-                                        def: (_d = vm.data.seo_image) !== null && _d !== void 0 ? _d : '',
-                                        callback: text => {
-                                            vm.data.seo_image = text;
+                                        default: pvm.dataList,
+                                        callback: value => {
+                                            pvm.dataList = value;
+                                            vm.data.product_id = value;
+                                            pvm.loading = true;
+                                            gvc.notifyDataChange(pvm.id);
                                         },
-                                    })}`,
-                                    ,
-                                ].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) {
-                                            return !key || ShoppingCollections.undefinedOption === key;
-                                        }
-                                        function firstParentView() {
-                                            var _a;
-                                            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: (_a = vm.data.parentTitles[0]) !== null && _a !== void 0 ? _a : '',
-                                                    options: vm.data.allCollections.map((item) => {
-                                                        return { key: item, value: item };
-                                                    }),
-                                                    style: 'margin: 8px 0;',
-                                                    readonly: vm.type === 'replace',
-                                                }),
-                                                BgWidget.mbContainer(12),
-                                            ].join('');
+                                        if (pvm.loading && pvm.dataList && pvm.dataList.length) {
+                                            return '資料載入中';
                                         }
-                                        function secondParentView(subs) {
-                                            var _a;
-                                            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: (_a = vm.data.parentTitles[1]) !== null && _a !== void 0 ? _a : '',
-                                                    options: [ShoppingCollections.undefinedOption, ...subs].map((item) => {
-                                                        return { key: item, value: item };
-                                                    }),
-                                                    style: 'margin: 8px 0;',
-                                                    readonly: vm.type === 'replace',
-                                                }),
-                                            ].join('');
+                                        if (pvm.productList.length === 0 || !pvm.dataList.length) {
+                                            return '目前無選取任何商品';
                                         }
-                                        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) => {
-                                                            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) => item !== sub);
-                                                                gvc.notifyDataChange(id);
-                                                            })}"
-                                            ></i>
-                                          </div>`;
-                                                        })
-                                                            .join(''),
-                                                    }),
-                                            ].join('');
-                                        }
-                                        function levelSetting() {
-                                            var _a;
-                                            const parentTitles = Array.isArray(vm.data.parentTitles) ? vm.data.parentTitles : [];
-                                            const parentTab = (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a.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) => item !== vm.data.title))
-                                                        : '',
-                                                ].join('');
+                                        return gvc.map(pvm.productList.map((opt, index) => {
+                                            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;
+                                                gvc.notifyDataChange(pvm.id);
                                             }
-                                            if (vm.type === 'replace' && parentTitles.length > 0) {
-                                                return [
-                                                    firstParentView(),
-                                                    parentTitles[1] && parentSubs.length > 0 ? secondParentView(parentSubs) : '',
-                                                    editSubCollection(),
-                                                ].join('');
+                                            else {
+                                                ApiShop.getProduct({
+                                                    page: 0,
+                                                    limit: 99999,
+                                                    id_list: pvm.dataList.join(','),
+                                                }).then(data => {
+                                                    pvm.productList = data.response.data.map((product) => {
+                                                        var _a;
+                                                        return {
+                                                            key: product.content.id,
+                                                            value: product.content.title,
+                                                            image: (_a = product.content.preview_image[0]) !== null && _a !== void 0 ? _a : BgWidget.noImageURL,
+                                                        };
+                                                    });
+                                                    pvm.loading = false;
+                                                    gvc.notifyDataChange(pvm.id);
+                                                });
                                             }
-                                            return editSubCollection();
                                         }
-                                        return [BgWidget.summaryCard(levelSetting())].join(BgWidget.mbContainer(24));
                                     },
-                                };
-                            })()),
-                            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.config.token,
-                                            }).then(res => {
-                                                dialog.dataLoading({ visible: false });
-                                                if (res.result) {
-                                                    vm.type = 'list';
-                                                    dialog.successMessage({ text: '更新成功' });
-                                                }
-                                                else {
-                                                    dialog.errorMessage({ text: '更新失敗' });
-                                                }
-                                            });
-                                        }
+                                    divCreate: {
+                                        class: `w-100`,
+                                        style: `overflow-x:hidden;`,
                                     },
-                                });
-                            }))
-                            : ''}
-                ${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.store_info.language_setting.support.find((dd) => !vm.data.language_data[dd].seo.domain);
-                            if (no_fill_language) {
-                                select_lan = no_fill_language;
-                                refresh();
-                                dialog.infoMessage({ text: '請重新填寫「連結網址」' });
-                                return;
-                            }
-                            if (window.parent.store_info.language_setting.support.find((dd) => {
-                                if (CheckInput.isChineseEnglishNumberHyphen(vm.data.language_data[dd].seo.domain)) {
-                                    return false;
-                                }
-                                select_lan = dd;
-                                return true;
-                            })) {
-                                refresh();
-                                dialog.infoMessage({ text: '連結僅限使用中英文數字與連接號' });
-                                return;
-                            }
-                            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.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.config.token,
-                                            }).then(() => {
-                                                putEvent();
-                                            });
-                                        }
+                                })}
+                    </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: (_c = language_data.seo.title) !== null && _c !== void 0 ? _c : '',
+                                    placeHolder: '請輸入 SEO 標題',
+                                    callback: text => {
+                                        language_data.seo.title = text;
                                     },
-                                });
-                                return;
-                            }
-                            putEvent();
-                        }))}
-              </div>`,
-                    ].join(BgWidget.mbContainer(24)));
+                                })}`,
+                                ,
+                                html ` <div class="tx_normal fw-normal">SEO 描述</div>
+                    ${EditorElem.editeText({
+                                    gvc: gvc,
+                                    title: '',
+                                    default: (_d = language_data.seo.content) !== null && _d !== void 0 ? _d : '',
+                                    placeHolder: '請輸入 SEO 描述',
+                                    callback: text => {
+                                        language_data.seo.content = text;
+                                    },
+                                })}`,
+                                ,
+                                html ` <div class="tx_normal fw-normal">SEO 圖片</div>
+                    ${EditorElem.uploadImageContainer({
+                                    gvc: gvc,
+                                    title: '',
+                                    def: (_e = vm.data.seo_image) !== null && _e !== void 0 ? _e : '',
+                                    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`,
                 },
             };
         });