ts-glitter 13.5.8 → 13.6.0

package/lowcode/backend-manager/bg-blog.ts

@@ -61,28 +61,28 @@ export class BgBlog {
                         key: '預覽',
                         value: html`
                             <div
-                                    class="d-flex align-items-center justify-content-center hoverBtn me-2 border"
-                                    style="height:28px;width:28px;border-radius:5px;cursor:pointer;color:#151515;"
-                                    onclick="${gvc.event((e, event) => {
-                                        const href = (() => {
-                                            return `https://${(window.parent as any).glitter.share.editorViewModel.domain}/${
-                                                    is_page
-                                                            ? (() => {
-                                                                switch (page_tab) {
-                                                                    case 'shopping':
-                                                                        return 'shop';
-                                                                    case 'hidden':
-                                                                        return 'hidden';
-                                                                    case 'page':
-                                                                        return 'pages';
-                                                                }
-                                                            })()
-                                                            : `blogs`
-                                            }/${dd.content.tag}`;
-                                        })();
-                                        (window.parent as any).glitter.openNewTab(href);
-                                        event.stopPropagation();
-                                    })}"
+                                class="d-flex align-items-center justify-content-center hoverBtn me-2 border"
+                                style="height:28px;width:28px;border-radius:5px;cursor:pointer;color:#151515;"
+                                onclick="${gvc.event((e, event) => {
+                                    const href = (() => {
+                                        return `https://${(window.parent as any).glitter.share.editorViewModel.domain}/${
+                                            is_page
+                                                ? (() => {
+                                                      switch (page_tab) {
+                                                          case 'shopping':
+                                                              return 'shop';
+                                                          case 'hidden':
+                                                              return 'hidden';
+                                                          case 'page':
+                                                              return 'pages';
+                                                      }
+                                                  })()
+                                                : `blogs`
+                                        }/${dd.content.tag}`;
+                                    })();
+                                    (window.parent as any).glitter.openNewTab(href);
+                                    event.stopPropagation();
+                                })}"
                             >
                                 <i class="fa-regular fa-eye" aria-hidden="true"></i>
                             </div>
@@ -95,11 +95,11 @@ export class BgBlog {
             Article.get({
                 page: 0,
                 limit: 1,
-                id: (window.parent as any).glitter.getUrlParameter('page-id')
+                id: (window.parent as any).glitter.getUrlParameter('page-id'),
             }).then(async (data) => {
                 vm.data = data.response.data[0];
                 vm.type = 'replace';
-            })
+            });
         }
         return gvc.bindView(() => {
             const id = glitter.getUUID();
@@ -107,8 +107,8 @@ export class BgBlog {
                 bind: id,
                 dataList: [{ obj: vm, key: 'type' }],
                 view: () => {
-                    if ((window.parent as any).glitter.getUrlParameter('page-id') && vm.type!=='replace') {
-                        return ``
+                    if ((window.parent as any).glitter.getUrlParameter('page-id') && vm.type !== 'replace') {
+                        return ``;
                     }
                     if (vm.type === 'list') {
                         return BgWidget.container(
@@ -116,140 +116,140 @@ export class BgBlog {
                                 <div class="title-container gap-4 ${type === 'select' ? `d-none` : ``}">
                                     <div class="d-flex flex-column" style="gap:5px;">
                                         ${BgWidget.title(
-                                is_page
-                                    ? (() => {
-                                        switch (page_tab) {
-                                            case 'hidden':
-                                                return '隱形賣場';
-                                            case 'page':
-                                                return '自訂頁面';
-                                            case 'shopping':
-                                                return '一頁商店';
-                                        }
-                                    })()
-                                    : '網誌文章'
-                            )}
+                                            is_page
+                                                ? (() => {
+                                                      switch (page_tab) {
+                                                          case 'hidden':
+                                                              return '隱形賣場';
+                                                          case 'page':
+                                                              return '自訂頁面';
+                                                          case 'shopping':
+                                                              return '一頁商店';
+                                                      }
+                                                  })()
+                                                : '網誌文章'
+                                        )}
                                         ${BgWidget.grayNote(
-                                is_page
-                                    ? (() => {
-                                        switch (page_tab) {
-                                            case 'hidden':
-                                                return '隱形賣場僅能透過連結分享，無法顯示於 Google 搜尋列表';
-                                            case 'page':
-                                                return '打造自訂頁面，顯示品牌官網的獨特內容';
-                                            case 'shopping':
-                                                return '放大特定商品重點，打造專屬爆品產品，一頁下單快速購物';
-                                        }
-                                    })()
-                                    : '快速分享商店最新資訊的好功能'
-                            )}
+                                            is_page
+                                                ? (() => {
+                                                      switch (page_tab) {
+                                                          case 'hidden':
+                                                              return '隱形賣場僅能透過連結分享，無法顯示於 Google 搜尋列表';
+                                                          case 'page':
+                                                              return '打造自訂頁面，顯示品牌官網的獨特內容';
+                                                          case 'shopping':
+                                                              return '放大特定商品重點，打造專屬爆品產品，一頁下單快速購物';
+                                                      }
+                                                  })()
+                                                : '快速分享商店最新資訊的好功能'
+                                        )}
                                     </div>
                                     <div class="flex-fill"></div>
                                     <div style="display: flex; gap: 12px;">
                                         ${is_page
-                                ? ''
-                                : BgWidget.grayButton(
-                                    '網誌分類',
-                                    gvc.event(() => {
-                                        vm.type = 'collection';
-                                        gvc.notifyDataChange(id);
-                                    })
-                                )}
+                                            ? ''
+                                            : BgWidget.grayButton(
+                                                  '網誌分類',
+                                                  gvc.event(() => {
+                                                      vm.type = 'collection';
+                                                      gvc.notifyDataChange(id);
+                                                  })
+                                              )}
                                         ${BgWidget.darkButton(
-                                `新增${is_page ? `頁面` : `網誌`}`,
-                                gvc.event(() => {
-                                    vm.data = { content: {} };
-                                    vm.type = 'add';
-                                })
-                            )}
+                                            `新增${is_page ? `頁面` : `網誌`}`,
+                                            gvc.event(() => {
+                                                vm.data = { content: {} };
+                                                vm.type = 'add';
+                                            })
+                                        )}
                                     </div>
                                 </div>
                                 ${BgWidget.container(
-                                BgWidget.mainCard(
-                                    [
-                                        BgWidget.searchPlace(
-                                            gvc.event((e) => {
-                                                vm.query = e.value;
-                                                gvc.notifyDataChange(id);
-                                            }),
-                                            vm.query || '',
-                                            '搜尋所有文章'
-                                        ),
-                                        BgWidget.tableV3({
-                                            gvc: gvc,
-                                            getData: (vd) => {
-                                                vmi = vd;
-                                                const limit = 20;
-                                                Article.get({
-                                                    page: vmi.page - 1,
-                                                    limit: limit,
-                                                    search: vm.query || undefined,
-                                                    for_index: is_page ? `false` : `true`,
-                                                    status: '0,1',
-                                                    page_type: page_tab,
-                                                }).then((data) => {
-                                                    vm.dataList = data.response.data;
-                                                    vmi.pageSize = Math.ceil(data.response.total / limit);
-                                                    vmi.originalData = vm.dataList;
-                                                    vmi.tableData = getDatalist();
-                                                    vmi.loading = false;
-                                                    vmi.callback();
-                                                });
-                                            },
-                                            rowClick: (data, index) => {
-                                                if (type === 'select') {
-                                                    vm.dataList[index].checked = !vm.dataList[index].checked;
-                                                    vmi.data = getDatalist();
-                                                    vmi.callback();
-                                                    callback(
-                                                        vm.dataList.filter((dd: any) => {
-                                                            return dd.checked;
-                                                        })
-                                                    );
-                                                } else {
-                                                    vm.data = vm.dataList[index];
-                                                    vm.type = 'replace';
-                                                }
-                                            },
-                                            filter: [
-                                                {
-                                                    name: '批量移除',
-                                                    event: (checkedData) => {
-                                                        const dialog = new ShareDialog(glitter);
-                                                        dialog.checkYesOrNot({
-                                                            text: '是否確認刪除所選項目？',
-                                                            callback: (response) => {
-                                                                if (response) {
-                                                                    dialog.dataLoading({ visible: true });
-                                                                    Article.deleteV2({
-                                                                        id: checkedData
-                                                                            .map((dd: any) => {
-                                                                                return dd.id;
-                                                                            })
-                                                                            .join(`,`),
-                                                                    }).then((res) => {
-                                                                        dialog.dataLoading({ visible: false });
-                                                                        if (res.result) {
-                                                                            vm.dataList = undefined;
-                                                                            gvc.notifyDataChange(id);
-                                                                        } else {
-                                                                            dialog.errorMessage({ text: '刪除失敗' });
-                                                                        }
-                                                                    });
-                                                                }
-                                                            },
-                                                        });
-                                                    },
+                                    BgWidget.mainCard(
+                                        [
+                                            BgWidget.searchPlace(
+                                                gvc.event((e) => {
+                                                    vm.query = e.value;
+                                                    gvc.notifyDataChange(id);
+                                                }),
+                                                vm.query || '',
+                                                '搜尋所有文章'
+                                            ),
+                                            BgWidget.tableV3({
+                                                gvc: gvc,
+                                                getData: (vd) => {
+                                                    vmi = vd;
+                                                    const limit = 20;
+                                                    Article.get({
+                                                        page: vmi.page - 1,
+                                                        limit: limit,
+                                                        search: vm.query || undefined,
+                                                        for_index: is_page ? `false` : `true`,
+                                                        status: '0,1',
+                                                        page_type: page_tab,
+                                                    }).then((data) => {
+                                                        vm.dataList = data.response.data;
+                                                        vmi.pageSize = Math.ceil(data.response.total / limit);
+                                                        vmi.originalData = vm.dataList;
+                                                        vmi.tableData = getDatalist();
+                                                        vmi.loading = false;
+                                                        vmi.callback();
+                                                    });
                                                 },
-                                            ],
-                                        }),
-                                    ].join('')
-                                )
-                            )}
+                                                rowClick: (data, index) => {
+                                                    if (type === 'select') {
+                                                        vm.dataList[index].checked = !vm.dataList[index].checked;
+                                                        vmi.data = getDatalist();
+                                                        vmi.callback();
+                                                        callback(
+                                                            vm.dataList.filter((dd: any) => {
+                                                                return dd.checked;
+                                                            })
+                                                        );
+                                                    } else {
+                                                        vm.data = vm.dataList[index];
+                                                        vm.type = 'replace';
+                                                    }
+                                                },
+                                                filter: [
+                                                    {
+                                                        name: '批量移除',
+                                                        event: (checkedData) => {
+                                                            const dialog = new ShareDialog(glitter);
+                                                            dialog.checkYesOrNot({
+                                                                text: '是否確認刪除所選項目？',
+                                                                callback: (response) => {
+                                                                    if (response) {
+                                                                        dialog.dataLoading({ visible: true });
+                                                                        Article.deleteV2({
+                                                                            id: checkedData
+                                                                                .map((dd: any) => {
+                                                                                    return dd.id;
+                                                                                })
+                                                                                .join(`,`),
+                                                                        }).then((res) => {
+                                                                            dialog.dataLoading({ visible: false });
+                                                                            if (res.result) {
+                                                                                vm.dataList = undefined;
+                                                                                gvc.notifyDataChange(id);
+                                                                            } else {
+                                                                                dialog.errorMessage({ text: '刪除失敗' });
+                                                                            }
+                                                                        });
+                                                                    }
+                                                                },
+                                                            });
+                                                        },
+                                                    },
+                                                ],
+                                            }),
+                                        ].join('')
+                                    )
+                                )}
                             `
                         );
                     } else if (vm.type == 'replace') {
-                        (window.parent as any).glitter.setUrlParameter('page-id', vm.data.id)
+                        (window.parent as any).glitter.setUrlParameter('page-id', vm.data.id);
                         return editor({
                             gvc: gvc,
                             vm: vm,
@@ -299,256 +299,256 @@ export class BgBlog {
         return html`
             <div class="title-container">
                 ${BgWidget.goBack(
-                        gvc.event(() => {
-                            callback(undefined);
-                        })
+                    gvc.event(() => {
+                        callback(undefined);
+                    })
                 )}
                 <div>${[BgWidget.title('選擇模板'), BgWidget.grayNote('請選擇一個符合您需求的模板')].join('')}</div>
             </div>
             ${[
                 html`<div class="my-3"></div>`,
-                BgWidget.card(
-                        gvc.bindView(() => {
-                            return {
-                                bind: containerID,
-                                view: () => {
-                                    return gvc.bindView(() => {
-                                        let data: any = undefined;
-                                        const id = gvc.glitter.getUUID();
-                                        if (page_tab !== 'page') {
-                                            ApiPageConfig.getPageTemplate({
-                                                template_from: 'all',
-                                                page: '0',
-                                                limit: '3000',
-                                                type: 'page',
-                                                tag: (() => {
-                                                    switch (page_tab) {
-                                                        case 'shopping':
-                                                        case 'hidden':
-                                                            return `一頁購物`;
-                                                        default:
-                                                            return ``;
-                                                    }
-                                                })(),
-                                                search: vm.search,
-                                            }).then((res) => {
-                                                data = res;
-                                                data.response.result.data = [
-                                                    {
-                                                        id: 20739,
-                                                        userID: '234285319',
-                                                        tag: 'empty',
+                BgWidget.mainCard(
+                    gvc.bindView(() => {
+                        return {
+                            bind: containerID,
+                            view: () => {
+                                return gvc.bindView(() => {
+                                    let data: any = undefined;
+                                    const id = gvc.glitter.getUUID();
+                                    if (page_tab !== 'page') {
+                                        ApiPageConfig.getPageTemplate({
+                                            template_from: 'all',
+                                            page: '0',
+                                            limit: '3000',
+                                            type: 'page',
+                                            tag: (() => {
+                                                switch (page_tab) {
+                                                    case 'shopping':
+                                                    case 'hidden':
+                                                        return `一頁購物`;
+                                                    default:
+                                                        return ``;
+                                                }
+                                            })(),
+                                            search: vm.search,
+                                        }).then((res) => {
+                                            data = res;
+                                            data.response.result.data = [
+                                                {
+                                                    id: 20739,
+                                                    userID: '234285319',
+                                                    tag: 'empty',
+                                                    name: '空白內容',
+                                                    page_type: 'page',
+                                                    preview_image: null,
+                                                    appName: 'shop_template_black_style',
+                                                    template_type: 2,
+                                                    template_config: {
+                                                        tag: ['頁面範例'],
+                                                        desc: '',
                                                         name: '空白內容',
-                                                        page_type: 'page',
-                                                        preview_image: null,
-                                                        appName: 'shop_template_black_style',
-                                                        template_type: 2,
-                                                        template_config: {
-                                                            tag: ['頁面範例'],
-                                                            desc: '',
-                                                            name: '空白內容',
-                                                            image: ['https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1709282671899-BLANK PAGE.jpg'],
-                                                            status: 'wait',
-                                                            post_to: 'all',
-                                                            version: '1.0',
-                                                            created_by: 'liondesign.io',
-                                                            preview_img: '',
-                                                        },
+                                                        image: ['https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1709282671899-BLANK PAGE.jpg'],
+                                                        status: 'wait',
+                                                        post_to: 'all',
+                                                        version: '1.0',
+                                                        created_by: 'liondesign.io',
+                                                        preview_img: '',
                                                     },
-                                                ].concat(data.response.result.data);
-                                                gvc.notifyDataChange(id);
-                                            });
-                                        } else {
-                                            Article.get({
-                                                page: 0,
-                                                limit: 20,
-                                                search: ``,
-                                                for_index: `false`,
-                                                status: '0,1',
-                                                page_type: page_tab,
-                                                app_name: 't_1726217714800',
-                                            }).then((dd) => {
-                                                data = {
-                                                    response: {
-                                                        result: {
-                                                            data: [
-                                                                {
+                                                },
+                                            ].concat(data.response.result.data);
+                                            gvc.notifyDataChange(id);
+                                        });
+                                    } else {
+                                        Article.get({
+                                            page: 0,
+                                            limit: 20,
+                                            search: ``,
+                                            for_index: `false`,
+                                            status: '0,1',
+                                            page_type: page_tab,
+                                            app_name: 't_1726217714800',
+                                        }).then((dd) => {
+                                            data = {
+                                                response: {
+                                                    result: {
+                                                        data: [
+                                                            {
+                                                                id: 20739,
+                                                                userID: '234285319',
+                                                                tag: 'empty',
+                                                                name: '空白內容',
+                                                                page_type: 'page',
+                                                                preview_image: null,
+                                                                appName: 'shop_template_black_style',
+                                                                template_type: 2,
+                                                                template_config: {
+                                                                    tag: ['頁面範例'],
+                                                                    desc: '',
+                                                                    name: '空白內容',
+                                                                    image: ['https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1709282671899-BLANK PAGE.jpg'],
+                                                                    status: 'wait',
+                                                                    post_to: 'all',
+                                                                    version: '1.0',
+                                                                    created_by: 'liondesign.io',
+                                                                    preview_img: '',
+                                                                },
+                                                            },
+                                                        ].concat(
+                                                            dd.response.data.map((dd: any) => {
+                                                                return {
                                                                     id: 20739,
                                                                     userID: '234285319',
-                                                                    tag: 'empty',
-                                                                    name: '空白內容',
+                                                                    tag: dd.content.tag,
+                                                                    name: dd.content.name,
                                                                     page_type: 'page',
                                                                     preview_image: null,
-                                                                    appName: 'shop_template_black_style',
+                                                                    _config: dd.content.config,
+                                                                    appName: 't_1726217714800',
                                                                     template_type: 2,
                                                                     template_config: {
-                                                                        tag: ['頁面範例'],
+                                                                        tag: [],
                                                                         desc: '',
-                                                                        name: '空白內容',
-                                                                        image: ['https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1709282671899-BLANK PAGE.jpg'],
+                                                                        name: dd.content.name,
+                                                                        image: [dd.content.seo.image],
                                                                         status: 'wait',
                                                                         post_to: 'all',
                                                                         version: '1.0',
                                                                         created_by: 'liondesign.io',
                                                                         preview_img: '',
                                                                     },
-                                                                },
-                                                            ].concat(
-                                                                    dd.response.data.map((dd: any) => {
-                                                                        return {
-                                                                            id: 20739,
-                                                                            userID: '234285319',
-                                                                            tag: dd.content.tag,
-                                                                            name: dd.content.name,
-                                                                            page_type: 'page',
-                                                                            preview_image: null,
-                                                                            _config: dd.content.config,
-                                                                            appName: 't_1726217714800',
-                                                                            template_type: 2,
-                                                                            template_config: {
-                                                                                tag: [],
-                                                                                desc: '',
-                                                                                name: dd.content.name,
-                                                                                image: [dd.content.seo.image],
-                                                                                status: 'wait',
-                                                                                post_to: 'all',
-                                                                                version: '1.0',
-                                                                                created_by: 'liondesign.io',
-                                                                                preview_img: '',
-                                                                            },
-                                                                        };
-                                                                    })
-                                                            ),
-                                                        },
+                                                                };
+                                                            })
+                                                        ),
                                                     },
-                                                };
+                                                },
+                                            };
 
-                                                gvc.notifyDataChange(id);
-                                            });
-                                        }
+                                            gvc.notifyDataChange(id);
+                                        });
+                                    }
 
-                                        return {
-                                            bind: id,
-                                            view: () => {
-                                                if (data) {
-                                                    return (() => {
-                                                        if (data.response.result.data.length === 0) {
-                                                            if (!vm.search) {
-                                                                return html`
-                                                                    <div class="d-flex align-items-center justify-content-center flex-column w-100 py-4" style="width:700px;gap:10px;">
-                                                                        <img src="./img/box-open-solid.svg" />
-                                                                        <span class="color39 text-center">尚未自製任何模塊<br />請前往開發者模式自製專屬模塊</span>
-                                                                    </div>
-                                                                `;
-                                                            } else {
-                                                                return html`
-                                                                    <div class="d-flex align-items-center justify-content-center flex-column w-100 py-4" style="width:700px;gap:10px;">
-                                                                        <img src="./img/box-open-solid.svg" />
-                                                                        <span class="color39 text-center">查無相關模塊</span>
-                                                                    </div>
-                                                                `;
-                                                            }
+                                    return {
+                                        bind: id,
+                                        view: () => {
+                                            if (data) {
+                                                return (() => {
+                                                    if (data.response.result.data.length === 0) {
+                                                        if (!vm.search) {
+                                                            return html`
+                                                                <div class="d-flex align-items-center justify-content-center flex-column w-100 py-4" style="width:700px;gap:10px;">
+                                                                    <img src="./img/box-open-solid.svg" />
+                                                                    <span class="color39 text-center">尚未自製任何模塊<br />請前往開發者模式自製專屬模塊</span>
+                                                                </div>
+                                                            `;
                                                         } else {
                                                             return html`
-                                                                <div class="w-100" style="overflow-y: auto;">
-                                                                    <div class="row m-0 pt-2 w-100">
-                                                                        ${data.response.result.data
-                                                                                .sort((a: any, b: any) => {
-                                                                                    if (a.tag === 'empty' || b.tag === 'empty') {
-                                                                                        return b.tag === 'empty' ? 1 : -1;
-                                                                                    } else {
-                                                                                        return a.template_config.name.localeCompare(b.template_config.name);
-                                                                                    }
-                                                                                })
-                                                                                .map((dd: any, index: number) => {
-                                                                                    return html`<div class="col-6 col-sm-3 mb-3 rounded-3">
-                                                                                        <div class="d-flex flex-column justify-content-center w-100 " style="gap:5px;cursor:pointer;">
-                                                                                            <div
-                                                                                                    class="card w-100 position-relative rounded hoverHidden bgf6 rounded-3"
-                                                                                                    style="padding-bottom: ${(800 / 600) * 100}%;"
-                                                                                            >
-                                                                                                <div
-                                                                                                        class="position-absolute w-100 h-100 d-flex align-items-center justify-content-center rounded-3"
-                                                                                                        style="overflow: hidden;"
-                                                                                                >
-                                                                                                    <img
-                                                                                                            class="w-100 "
-                                                                                                            src="${dd.template_config.image[0] ??
-                                                                                                            'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1713445383494-未命名(1080x1080像素).jpg'}"
-                                                                                                    />
-                                                                                                </div>
-
-                                                                                                <div
-                                                                                                        class="position-absolute w-100 h-100  align-items-center justify-content-center rounded fs-6 flex-column"
-                                                                                                        style="background: rgba(0,0,0,0.5);gap:5px;"
-                                                                                                >
-                                                                                                    <button
-                                                                                                            class="btn btn-secondary d-flex align-items-center "
-                                                                                                            style="height: 28px;width: 75px;gap:5px;"
-                                                                                                            onclick="${gvc.event(() => {
-                                                                                                                if (dd.tag === 'empty') {
-                                                                                                                    const a: any = [];
-                                                                                                                    (a as any).name = '空白頁面';
-                                                                                                                    callback(a);
-                                                                                                                } else {
-                                                                                                                    if (dd._config) {
-                                                                                                                        dd._config.name = dd.template_config.name;
-                                                                                                                        callback(dd._config);
-                                                                                                                    } else {
-                                                                                                                        BaseApi.create({
-                                                                                                                            url: `${(window as any).glitterBackend}/api/v1/template?appName=${dd.appName}&tag=${
-                                                                                                                                    dd.tag
-                                                                                                                            }`,
-                                                                                                                            type: 'get',
-                                                                                                                        }).then((res) => {
-                                                                                                                            res.response.result[0].config.name = dd.template_config.name;
-                                                                                                                            callback(res.response.result[0].config);
-                                                                                                                        });
-                                                                                                                    }
-                                                                                                                }
-                                                                                                            })}"
-                                                                                                    >
-                                                                                                        選擇
-                                                                                                    </button>
-                                                                                                </div>
-                                                                                            </div>
-                                                                                            <h3 class="fs-6 mb-0 d-flex justify-content-between align-items-center fw-500 mt-1">
-                                                                                                ${dd.template_config.name}
-                                                                                                <i
-                                                                                                        class="fa-solid fa-eye ${dd.tag === 'empty' ? `d-none` : ``}"
-                                                                                                        style="cursor:pointer;"
-                                                                                                        onclick="${gvc.event(() => {
-                                                                                                            (window.parent as any).glitter.openNewTab(
-                                                                                                                    `${gvc.glitter.root_path}pages/${dd.tag}?appName=${dd.appName}`
-                                                                                                            );
-                                                                                                        })}"
-                                                                                                ></i>
-                                                                                            </h3>
-                                                                                        </div>
-                                                                                    </div>`;
-                                                                                })
-                                                                                .join('')}
-                                                                    </div>
+                                                                <div class="d-flex align-items-center justify-content-center flex-column w-100 py-4" style="width:700px;gap:10px;">
+                                                                    <img src="./img/box-open-solid.svg" />
+                                                                    <span class="color39 text-center">查無相關模塊</span>
                                                                 </div>
                                                             `;
                                                         }
-                                                    })();
-                                                } else {
-                                                    return html` <div class="w-100 p-3 d-flex align-items-center justify-content-center flex-column" style="gap: 10px;">
-                                                        <div class="spinner-border fs-5"></div>
-                                                        <div class="fs-6 fw-500">載入中...</div>
-                                                    </div>`;
-                                                }
-                                            },
-                                            divCreate: {
-                                                style: '',
-                                            },
-                                        };
-                                    });
-                                },
-                                divCreate: {},
-                            };
-                        })
+                                                    } else {
+                                                        return html`
+                                                            <div class="w-100" style="overflow-y: auto;">
+                                                                <div class="row m-0 pt-2 w-100">
+                                                                    ${data.response.result.data
+                                                                        .sort((a: any, b: any) => {
+                                                                            if (a.tag === 'empty' || b.tag === 'empty') {
+                                                                                return b.tag === 'empty' ? 1 : -1;
+                                                                            } else {
+                                                                                return a.template_config.name.localeCompare(b.template_config.name);
+                                                                            }
+                                                                        })
+                                                                        .map((dd: any, index: number) => {
+                                                                            return html`<div class="col-6 col-sm-3 mb-3 rounded-3">
+                                                                                <div class="d-flex flex-column justify-content-center w-100 " style="gap:5px;cursor:pointer;">
+                                                                                    <div
+                                                                                        class="card w-100 position-relative rounded hoverHidden bgf6 rounded-3"
+                                                                                        style="padding-bottom: ${(800 / 600) * 100}%;"
+                                                                                    >
+                                                                                        <div
+                                                                                            class="position-absolute w-100 h-100 d-flex align-items-center justify-content-center rounded-3"
+                                                                                            style="overflow: hidden;"
+                                                                                        >
+                                                                                            <img
+                                                                                                class="w-100 "
+                                                                                                src="${dd.template_config.image[0] ??
+                                                                                                'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1713445383494-未命名(1080x1080像素).jpg'}"
+                                                                                            />
+                                                                                        </div>
+
+                                                                                        <div
+                                                                                            class="position-absolute w-100 h-100  align-items-center justify-content-center rounded fs-6 flex-column"
+                                                                                            style="background: rgba(0,0,0,0.5);gap:5px;"
+                                                                                        >
+                                                                                            <button
+                                                                                                class="btn btn-secondary d-flex align-items-center "
+                                                                                                style="height: 28px;width: 75px;gap:5px;"
+                                                                                                onclick="${gvc.event(() => {
+                                                                                                    if (dd.tag === 'empty') {
+                                                                                                        const a: any = [];
+                                                                                                        (a as any).name = '空白頁面';
+                                                                                                        callback(a);
+                                                                                                    } else {
+                                                                                                        if (dd._config) {
+                                                                                                            dd._config.name = dd.template_config.name;
+                                                                                                            callback(dd._config);
+                                                                                                        } else {
+                                                                                                            BaseApi.create({
+                                                                                                                url: `${(window as any).glitterBackend}/api/v1/template?appName=${dd.appName}&tag=${
+                                                                                                                    dd.tag
+                                                                                                                }`,
+                                                                                                                type: 'get',
+                                                                                                            }).then((res) => {
+                                                                                                                res.response.result[0].config.name = dd.template_config.name;
+                                                                                                                callback(res.response.result[0].config);
+                                                                                                            });
+                                                                                                        }
+                                                                                                    }
+                                                                                                })}"
+                                                                                            >
+                                                                                                選擇
+                                                                                            </button>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                    <h3 class="fs-6 mb-0 d-flex justify-content-between align-items-center fw-500 mt-1">
+                                                                                        ${dd.template_config.name}
+                                                                                        <i
+                                                                                            class="fa-solid fa-eye ${dd.tag === 'empty' ? `d-none` : ``}"
+                                                                                            style="cursor:pointer;"
+                                                                                            onclick="${gvc.event(() => {
+                                                                                                (window.parent as any).glitter.openNewTab(
+                                                                                                    `${gvc.glitter.root_path}pages/${dd.tag}?appName=${dd.appName}`
+                                                                                                );
+                                                                                            })}"
+                                                                                        ></i>
+                                                                                    </h3>
+                                                                                </div>
+                                                                            </div>`;
+                                                                        })
+                                                                        .join('')}
+                                                                </div>
+                                                            </div>
+                                                        `;
+                                                    }
+                                                })();
+                                            } else {
+                                                return html` <div class="w-100 p-3 d-flex align-items-center justify-content-center flex-column" style="gap: 10px;">
+                                                    <div class="spinner-border fs-5"></div>
+                                                    <div class="fs-6 fw-500">載入中...</div>
+                                                </div>`;
+                                            }
+                                        },
+                                        divCreate: {
+                                            style: '',
+                                        },
+                                    };
+                                });
+                            },
+                            divCreate: {},
+                        };
+                    })
                 ),
             ].join('')}
         `;
@@ -630,113 +630,113 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
     const domainPrefix = `${
         cf.is_page
             ? (() => {
-                switch (page_tab) {
-                    case 'shopping':
-                        return 'shop';
-                    case 'hidden':
-                        return 'hidden';
-                    case 'page':
-                        return 'pages';
-                    default:
-                        return '';
-                }
-            })()
+                  switch (page_tab) {
+                      case 'shopping':
+                          return 'shop';
+                      case 'hidden':
+                          return 'hidden';
+                      case 'page':
+                          return 'pages';
+                      default:
+                          return '';
+                  }
+              })()
             : 'blogs'
-    }`
+    }`;
     return html`
         <div class="title-container">
             ${BgWidget.goBack(
-                    gvc.event(() => {
-                        (window.parent as any).glitter.setUrlParameter('page-id', undefined)
-                        vm.type = 'list';
-                    })
+                gvc.event(() => {
+                    (window.parent as any).glitter.setUrlParameter('page-id', undefined);
+                    vm.type = 'list';
+                })
             )}
             ${BgWidget.title(
-                    cf.is_page
-                            ? (() => {
-                                switch (page_tab) {
-                                    case 'hidden':
-                                        return '隱形賣場';
-                                    case 'page':
-                                        return '自訂頁面';
-                                    case 'shopping':
-                                        return '一頁商店';
-                                }
-                            })()
-                            : '編輯網誌'
+                cf.is_page
+                    ? (() => {
+                          switch (page_tab) {
+                              case 'hidden':
+                                  return '隱形賣場';
+                              case 'page':
+                                  return '自訂頁面';
+                              case 'shopping':
+                                  return '一頁商店';
+                          }
+                      })()
+                    : '編輯網誌'
             )}
             <div class="flex-fill"></div>
             <div class="d-flex ${cf.is_page ? `` : `d-none`}">
                 ${BgWidget.grayButton(
-                        '套用模板',
-                        gvc.event(() => {
-                            cVm.type = 'template';
-                            gvc.notifyDataChange(cVm.id);
-                        })
+                    '套用模板',
+                    gvc.event(() => {
+                        cVm.type = 'template';
+                        gvc.notifyDataChange(cVm.id);
+                    })
                 )}
                 <div class="mx-1"></div>
                 ${BgWidget.grayButton(
-                        '前往設計',
-                        gvc.event(() => {
-                            (window.parent as any).glitter.setUrlParameter('page-id', vm.data.id);
-                            (window.parent as any).glitter.share.switch_to_web_builder(`${domainPrefix}/${vm.data.content.tag}`);
-                        })
+                    '前往設計',
+                    gvc.event(() => {
+                        (window.parent as any).glitter.setUrlParameter('page-id', vm.data.id);
+                        (window.parent as any).glitter.share.switch_to_web_builder(`${domainPrefix}/${vm.data.content.tag}`);
+                    })
                 )}
             </div>
         </div>
         ${BgWidget.container1x2(
-                {
-                    html: [
-                        gvc.bindView(() => {
-                            vm.data.status = vm.data.status ?? 1;
-                            const id = gvc.glitter.getUUID();
-                            return {
-                                bind: id,
-                                view: () => {
-                                    return [
-                                        BgWidget.mainCard(
-                                                (() => {
-                                                    const prefixURL = `https://${(window.parent as any).glitter.share.editorViewModel.domain}/${
-                                                            cf.is_page
-                                                                    ? (() => {
-                                                                        switch (page_tab) {
-                                                                            case 'shopping':
-                                                                                return 'shop';
-                                                                            case 'hidden':
-                                                                                return 'hidden';
-                                                                            case 'page':
-                                                                                return 'pages';
-                                                                            default:
-                                                                                return '';
-                                                                        }
-                                                                    })()
-                                                                    : 'blogs'
-                                                    }/`;
-                                                    return [
-                                                        BgWidget.title('基本設定', 'font-size: 16px;'),
-                                                        html` <div style="display: flex; align-items: center; gap: 4px; margin: 18px 0;">
+            {
+                html: [
+                    gvc.bindView(() => {
+                        vm.data.status = vm.data.status ?? 1;
+                        const id = gvc.glitter.getUUID();
+                        return {
+                            bind: id,
+                            view: () => {
+                                return [
+                                    BgWidget.mainCard(
+                                        (() => {
+                                            const prefixURL = `https://${(window.parent as any).glitter.share.editorViewModel.domain}/${
+                                                cf.is_page
+                                                    ? (() => {
+                                                          switch (page_tab) {
+                                                              case 'shopping':
+                                                                  return 'shop';
+                                                              case 'hidden':
+                                                                  return 'hidden';
+                                                              case 'page':
+                                                                  return 'pages';
+                                                              default:
+                                                                  return '';
+                                                          }
+                                                      })()
+                                                    : 'blogs'
+                                            }/`;
+                                            return [
+                                                BgWidget.title('基本設定', 'font-size: 16px;'),
+                                                html` <div style="display: flex; align-items: center; gap: 4px; margin: 18px 0;">
                                                     <div class="tx_normal">網頁啟用</div>
                                                     ${BgWidget.switchButton(gvc, vm.data.status, (bool) => {
-                                                            vm.data.status = bool ? 1 : 0;
-                                                            gvc.notifyDataChange(id);
-                                                        })}
+                                                        vm.data.status = bool ? 1 : 0;
+                                                        gvc.notifyDataChange(id);
+                                                    })}
                                                 </div>`,
-                                                        BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '網頁名稱',
-                                                            default: vm.data.content.name || '',
-                                                            placeHolder: '請輸入網頁名稱',
-                                                            callback: (text) => {
-                                                                vm.data.content.name = text;
-                                                            },
-                                                        }),
-                                                        html` <div>
+                                                BgWidget.editeInput({
+                                                    gvc: gvc,
+                                                    title: '網頁名稱',
+                                                    default: vm.data.content.name || '',
+                                                    placeHolder: '請輸入網頁名稱',
+                                                    callback: (text) => {
+                                                        vm.data.content.name = text;
+                                                    },
+                                                }),
+                                                html` <div>
                                                     <div class="tx_normal fw-normal mb-2">自訂網址</div>
                                                     <div
                                                         style="justify-content: flex-start; align-items: center; display: inline-flex;border:1px solid #EAEAEA;border-radius: 10px;overflow: hidden; ${document
-                                                                .body.clientWidth > 768
-                                                                ? 'gap: 18px; '
-                                                                : 'flex-direction: column; gap: 0px; '}"
+                                                            .body.clientWidth > 768
+                                                            ? 'gap: 18px; '
+                                                            : 'flex-direction: column; gap: 0px; '}"
                                                         class="w-100"
                                                     >
                                                         <div style="width:100%;padding: 9px 18px;background: #EAEAEA; justify-content: flex-start; align-items: center; gap: 5px; display: flex">
@@ -752,120 +752,123 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                                 : 'padding: 9px 18px;'}"
                                                             value="${vm.data.content.tag || ''}"
                                                             onchange="${gvc.event((e) => {
-                                                            let text = e.value;
-                                                            if (!CheckInput.isEnglishNumberHyphen(text)) {
-                                                                const dialog = new ShareDialog(gvc.glitter);
-                                                                dialog.infoMessage({ text: '僅能輸入英文或數字與連接號' });
-                                                                gvc.notifyDataChange(id);
-                                                            } else {
-                                                                vm.data.content.tag = text;
-                                                                gvc.notifyDataChange(id);
-                                                            }
-                                                        })}"
+                                                                let text = e.value;
+                                                                if (!CheckInput.isEnglishNumberHyphen(text)) {
+                                                                    const dialog = new ShareDialog(gvc.glitter);
+                                                                    dialog.infoMessage({ text: '僅能輸入英文或數字與連接號' });
+                                                                    gvc.notifyDataChange(id);
+                                                                } else {
+                                                                    vm.data.content.tag = text;
+                                                                    gvc.notifyDataChange(id);
+                                                                }
+                                                            })}"
                                                         />
                                                     </div>
                                                 </div>`,
-                                                        html` <div class="mt-2 mb-1"><span class="tx_normal me-2">網址預覽</span>${BgWidget.greenNote(prefixURL + (vm.data.content.tag ?? ''))}</div>`,
-                                                        ...(() => {
-                                                            return [
-                                                                BgWidget.editeInput({
-                                                                    gvc: gvc,
-                                                                    title: 'SEO標題',
-                                                                    default: vm.data.content.seo.title,
-                                                                    placeHolder: `請輸入SEO標題`,
-                                                                    callback: (text) => {
-                                                                        vm.data.content.title = text;
-                                                                        vm.data.content.seo.title = text;
-                                                                        gvc.notifyDataChange(id);
-                                                                    },
-                                                                }),
-                                                                BgWidget.textArea({
-                                                                    gvc: gvc,
-                                                                    title: 'SEO描述',
-                                                                    default: vm.data.content.seo.content,
-                                                                    placeHolder: `請輸入中繼描述`,
-                                                                    callback: (text) => {
-                                                                        vm.data.content.description = text;
-                                                                        vm.data.content.seo.content = text;
-                                                                        gvc.notifyDataChange(id);
-                                                                    },
-                                                                }),
-                                                                html` <div>
+                                                html` <div class="mt-2 mb-1"><span class="tx_normal me-2">網址預覽</span>${BgWidget.greenNote(prefixURL + (vm.data.content.tag ?? ''))}</div>`,
+                                                ...(() => {
+                                                    return [
+                                                        BgWidget.editeInput({
+                                                            gvc: gvc,
+                                                            title: 'SEO標題',
+                                                            default: vm.data.content.seo.title,
+                                                            placeHolder: `請輸入SEO標題`,
+                                                            callback: (text) => {
+                                                                vm.data.content.title = text;
+                                                                vm.data.content.seo.title = text;
+                                                                gvc.notifyDataChange(id);
+                                                            },
+                                                        }),
+                                                        BgWidget.textArea({
+                                                            gvc: gvc,
+                                                            title: 'SEO描述',
+                                                            default: vm.data.content.seo.content,
+                                                            placeHolder: `請輸入中繼描述`,
+                                                            callback: (text) => {
+                                                                vm.data.content.description = text;
+                                                                vm.data.content.seo.content = text;
+                                                                gvc.notifyDataChange(id);
+                                                            },
+                                                        }),
+                                                        html` <div>
                                                             <div class="tx_normal">社群分享縮圖</div>
                                                             <div class="mt-1 mb-2">${BgWidget.grayNote('建議尺寸為 200px * 200px 以上')}</div>
                                                             ${BgWidget.imageSelector(gvc, vm.data.content.seo.image || '', (text) => {
-                                                                    vm.data.content.seo.image = text;
-                                                                    gvc.notifyDataChange(id);
-                                                                })}
+                                                                vm.data.content.seo.image = text;
+                                                                gvc.notifyDataChange(id);
+                                                            })}
                                                         </div>`,
-                                                                ,
-                                                            ];
-                                                        })(),
-                                                        ...(() => {
-                                                            if (`${vm.data.content.for_index}` === 'true') {
-                                                                return [
-                                                                    [
-                                                                        html`<div class="tx_normal my-3">網誌內文</div>`,
-                                                                        EditorElem.richText({
-                                                                            gvc: gvc,
-                                                                            def: vm.data.content.text ?? '',
-                                                                            callback: (text) => {
-                                                                                vm.data.content.text = text;
-                                                                            },
-                                                                        }),
-                                                                    ].join(BgWidget.mbContainer(12)),
-                                                                ];
-                                                            } else {
-                                                                return [];
-                                                            }
-                                                        })(),
-                                                    ].join(BgWidget.mbContainer(12));
-                                                })()
-                                        ),
-                                    ].join('');
-                                },
-                                divCreate: {
-                                    style: 'padding: 0;',
-                                },
-                            };
-                        }),
-                        (() => {
-                            vm.data.content.relative = vm.data.content.relative || 'collection';
-                            vm.data.content.relative_data = vm.data.content.relative_data || [];
-                            vm.data.content.with_discount = vm.data.content.with_discount || 'false';
+                                                        ,
+                                                    ];
+                                                })(),
+                                                ...(() => {
+                                                    if (`${vm.data.content.for_index}` === 'true') {
+                                                        return [
+                                                            [
+                                                                html`<div class="d-flex w-100 align-items-center justify-content-between p-0 my-2">
+                                                                    <div class="tx_normal fw-normal">網誌內文</div>
+                                                                    ${BgWidget.aiChatButton({ gvc, select: 'writer' })}
+                                                                </div>`,
+                                                                EditorElem.richText({
+                                                                    gvc: gvc,
+                                                                    def: vm.data.content.text ?? '',
+                                                                    callback: (text) => {
+                                                                        vm.data.content.text = text;
+                                                                    },
+                                                                }),
+                                                            ].join(BgWidget.mbContainer(12)),
+                                                        ];
+                                                    } else {
+                                                        return [];
+                                                    }
+                                                })(),
+                                            ].join(BgWidget.mbContainer(12));
+                                        })()
+                                    ),
+                                ].join('');
+                            },
+                            divCreate: {
+                                style: 'padding: 0;',
+                            },
+                        };
+                    }),
+                    (() => {
+                        vm.data.content.relative = vm.data.content.relative || 'collection';
+                        vm.data.content.relative_data = vm.data.content.relative_data || [];
+                        vm.data.content.with_discount = vm.data.content.with_discount || 'false';
 
-                            return gvc.bindView(() => {
-                                const id = gvc.glitter.getUUID();
-                                return {
-                                    bind: id,
-                                    view: () => {
-                                        // 顯示套用的賣場商品列表
-                                        if (vm.data.content.page_type === 'hidden' || vm.data.content.page_type === 'shopping') {
-                                            return [
-                                                BgWidget.mbContainer(24),
-                                                BgWidget.mainCard(
-                                                        [
-                                                            BgWidget.title(
-                                                                    html`預設加入購物車
+                        return gvc.bindView(() => {
+                            const id = gvc.glitter.getUUID();
+                            return {
+                                bind: id,
+                                view: () => {
+                                    // 顯示套用的賣場商品列表
+                                    if (vm.data.content.page_type === 'hidden' || vm.data.content.page_type === 'shopping') {
+                                        return [
+                                            BgWidget.mbContainer(24),
+                                            BgWidget.mainCard(
+                                                [
+                                                    BgWidget.title(
+                                                        html`預設加入購物車
                                                             <div class="badge ms-2" style="background:#eaeaea;color:#393939;">以下設定的商品會自動加入購物車</div>`,
-                                                                    'font-size: 16px;'
-                                                            ),
-                                                            html`<div class="my-2"></div>`,
-                                                            [
-                                                                html`${(() => {
-                                                                    return gvc.bindView(() => {
-                                                                        const subVM = {
-                                                                            id: gvc.glitter.getUUID(),
-                                                                            loading: true,
-                                                                            dataList: [] as OptionsItem[],
-                                                                        };
-                                                                        return {
-                                                                            bind: subVM.id,
-                                                                            view: () => {
-                                                                                if (subVM.loading) {
-                                                                                    return BgWidget.spinner();
-                                                                                }
-                                                                                return html`
+                                                        'font-size: 16px;'
+                                                    ),
+                                                    html`<div class="my-2"></div>`,
+                                                    [
+                                                        html`${(() => {
+                                                            return gvc.bindView(() => {
+                                                                const subVM = {
+                                                                    id: gvc.glitter.getUUID(),
+                                                                    loading: true,
+                                                                    dataList: [] as OptionsItem[],
+                                                                };
+                                                                return {
+                                                                    bind: subVM.id,
+                                                                    view: () => {
+                                                                        if (subVM.loading) {
+                                                                            return BgWidget.spinner();
+                                                                        }
+                                                                        return html`
                                                                             <div class="d-flex flex-column p-2" style="gap: 18px;">
                                                                                 <div class="d-flex align-items-center gray-bottom-line-18 " style="gap: 24px; justify-content: space-between;">
                                                                                     <div class="form-check-label c_updown_label">
@@ -892,11 +895,11 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                                                             });
                                                                                         }),
                                                                                         { textStyle: 'font-weight: 400;' }
-                                                                                )}
+                                                                                    )}
                                                                                 </div>
                                                                                 ${subVM.dataList
-                                                                                        .map((opt: OptionsItem, index) => {
-                                                                                            return html`
+                                                                                    .map((opt: OptionsItem, index) => {
+                                                                                        return html`
                                                                                             <div class="d-flex align-items-center form-check-label c_updown_label gap-3">
                                                                                                 <span class="tx_normal" style="min-width: 20px;">${index + 1} .</span>
                                                                                                 ${BgWidget.validImageBox({ gvc: gvc, image: opt.image, width: 40 })}
@@ -911,199 +914,199 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                                                                         gvc.notifyDataChange(subVM.id);
                                                                                                     }),
                                                                                                     '移除'
-                                                                                            )}
+                                                                                                )}
                                                                                             </div>
                                                                                         `;
-                                                                                        })
-                                                                                        .join('') || `<div class="w-100 d-flex align-content-center justify-content-center">尚未加入任何賣場商品</div>`}
+                                                                                    })
+                                                                                    .join('') || `<div class="w-100 d-flex align-content-center justify-content-center">尚未加入任何賣場商品</div>`}
                                                                             </div>
                                                                         `;
-                                                                            },
-                                                                            onCreate: () => {
-                                                                                if (subVM.loading) {
-                                                                                    if (vm.data.content.relative_data.length === 0) {
-                                                                                        setTimeout(() => {
-                                                                                            subVM.dataList = [];
-                                                                                            subVM.loading = false;
-                                                                                            gvc.notifyDataChange(subVM.id);
-                                                                                        }, 300);
-                                                                                    } else {
-                                                                                        new Promise<OptionsItem[]>(async (resolve) => {
-                                                                                            const products_data = await BgProduct.getProductOpts(
-                                                                                                    vm.data.content.relative_data.map((dd: any) => {
-                                                                                                        return dd.product_id;
-                                                                                                    })
-                                                                                            );
-                                                                                            vm.data.content.relative_data = vm.data.content.relative_data.filter((dd: any) => {
-                                                                                                return products_data.find((d1) => {
-                                                                                                    return `${dd.product_id}` === `${d1.key}`;
-                                                                                                });
-                                                                                            });
-                                                                                            subVM.dataList = vm.data.content.relative_data.map((dd: any) => {
-                                                                                                const product: any = JSON.parse(
-                                                                                                        JSON.stringify(
-                                                                                                                products_data.find((d1) => {
-                                                                                                                    return `${dd.product_id}` === `${d1.key}`;
-                                                                                                                })
-                                                                                                        )
-                                                                                                );
-                                                                                                product.note = dd.variant.spec.join(' / ');
-                                                                                                return product;
-                                                                                            });
-                                                                                            resolve(subVM.dataList);
-                                                                                        }).then((data) => {
-                                                                                            subVM.dataList = data;
-                                                                                            subVM.loading = false;
-                                                                                            gvc.notifyDataChange(subVM.id);
+                                                                    },
+                                                                    onCreate: () => {
+                                                                        if (subVM.loading) {
+                                                                            if (vm.data.content.relative_data.length === 0) {
+                                                                                setTimeout(() => {
+                                                                                    subVM.dataList = [];
+                                                                                    subVM.loading = false;
+                                                                                    gvc.notifyDataChange(subVM.id);
+                                                                                }, 300);
+                                                                            } else {
+                                                                                new Promise<OptionsItem[]>(async (resolve) => {
+                                                                                    const products_data = await BgProduct.getProductOpts(
+                                                                                        vm.data.content.relative_data.map((dd: any) => {
+                                                                                            return dd.product_id;
+                                                                                        })
+                                                                                    );
+                                                                                    vm.data.content.relative_data = vm.data.content.relative_data.filter((dd: any) => {
+                                                                                        return products_data.find((d1) => {
+                                                                                            return `${dd.product_id}` === `${d1.key}`;
                                                                                         });
-                                                                                    }
-                                                                                }
-                                                                            },
-                                                                        };
-                                                                    });
-                                                                })()}`,
-                                                            ].join(''),
-                                                        ].join('')
-                                                ),
-                                            ].join('');
-                                        } else {
-                                            return [].join('');
+                                                                                    });
+                                                                                    subVM.dataList = vm.data.content.relative_data.map((dd: any) => {
+                                                                                        const product: any = JSON.parse(
+                                                                                            JSON.stringify(
+                                                                                                products_data.find((d1) => {
+                                                                                                    return `${dd.product_id}` === `${d1.key}`;
+                                                                                                })
+                                                                                            )
+                                                                                        );
+                                                                                        product.note = dd.variant.spec.join(' / ');
+                                                                                        return product;
+                                                                                    });
+                                                                                    resolve(subVM.dataList);
+                                                                                }).then((data) => {
+                                                                                    subVM.dataList = data;
+                                                                                    subVM.loading = false;
+                                                                                    gvc.notifyDataChange(subVM.id);
+                                                                                });
+                                                                            }
+                                                                        }
+                                                                    },
+                                                                };
+                                                            });
+                                                        })()}`,
+                                                    ].join(''),
+                                                ].join('')
+                                            ),
+                                        ].join('');
+                                    } else {
+                                        return [].join('');
+                                    }
+                                },
+                            };
+                        });
+                    })(),
+                ].join(''),
+                ratio: 75,
+            },
+            {
+                html: BgWidget.summaryCard(
+                    gvc.bindView(() => {
+                        console.log(`vm.data.content.template=>`, vm.data.content.template);
+                        const id = gvc.glitter.getUUID();
+                        vm.data.status = vm.data.status ?? '1';
+                        return {
+                            bind: id,
+                            view: () => {
+                                return [
+                                    cf.is_page
+                                        ? ``
+                                        : EditorElem.select({
+                                              title: '啟用狀態',
+                                              gvc: gvc,
+                                              def: `${vm.data.status}`,
+                                              array: [
+                                                  {
+                                                      title: '啟用',
+                                                      value: '1',
+                                                  },
+                                                  {
+                                                      title: '隱藏',
+                                                      value: '0',
+                                                  },
+                                              ],
+                                              callback: (text: string) => {
+                                                  vm.data.status = text;
+                                                  gvc.notifyDataChange(id);
+                                              },
+                                          }),
+                                    EditorElem.pageSelect(
+                                        gvc,
+                                        '選擇佈景主題',
+                                        vm.data.content.template ?? '',
+                                        (data) => {
+                                            vm.data.content.template = data;
+                                        },
+                                        (dd) => {
+                                            const filter_result = dd.group !== 'glitter-article' && dd.page_type === 'article' && dd.page_config.template_type === 'blog';
+                                            if (filter_result && !vm.data.content.template) {
+                                                vm.data.content.template = dd.tag;
+                                                gvc.notifyDataChange(id);
+                                            }
+                                            return filter_result;
                                         }
-                                    },
-                                };
-                            });
-                        })(),
-                    ].join(''),
-                    ratio: 75,
-                },
-                {
-                    html: BgWidget.summaryCard(
-                            gvc.bindView(() => {
-                                console.log(`vm.data.content.template=>`, vm.data.content.template);
-                                const id = gvc.glitter.getUUID();
-                                vm.data.status = vm.data.status ?? '1';
-                                return {
-                                    bind: id,
-                                    view: () => {
-                                        return [
-                                            cf.is_page
-                                                    ? ``
-                                                    : EditorElem.select({
-                                                        title: '啟用狀態',
+                                    ),
+                                    EditorElem.editeInput({
+                                        gvc: gvc,
+                                        title: '作者名稱',
+                                        default: vm.data.content.author,
+                                        placeHolder: '請輸入作者名稱',
+                                        callback: (text) => {
+                                            vm.data.content.author = text;
+                                        },
+                                    }),
+                                    gvc.bindView(() => {
+                                        const id = gvc.glitter.getUUID();
+                                        return {
+                                            bind: id,
+                                            view: () => {
+                                                if (cf.is_page) {
+                                                    return ``;
+                                                }
+                                                vm.data.content.collection = vm.data.content.collection ?? [];
+                                                return [
+                                                    html` <div class="d-flex align-items-center my-3" style="gap: 10px;">
+                                                        ${EditorElem.h3('預覽圖')}
+                                                        ${BgWidget.grayButton(
+                                                            '添加檔案',
+                                                            gvc.event(() => {
+                                                                EditorElem.uploadFileFunction({
+                                                                    gvc: gvc,
+                                                                    callback: (text) => {
+                                                                        vm.data.content.preview_image = text;
+                                                                        gvc.notifyDataChange(id);
+                                                                    },
+                                                                    type: `image/*, video/*`,
+                                                                });
+                                                            })
+                                                        )}
+                                                    </div>`,
+                                                    EditorElem.flexMediaManager({
                                                         gvc: gvc,
-                                                        def: `${vm.data.status}`,
-                                                        array: [
-                                                            {
-                                                                title: '啟用',
-                                                                value: '1',
-                                                            },
-                                                            {
-                                                                title: '隱藏',
-                                                                value: '0',
-                                                            },
-                                                        ],
-                                                        callback: (text: string) => {
-                                                            vm.data.status = text;
-                                                            gvc.notifyDataChange(id);
-                                                        },
+                                                        data: vm.data.content.preview_image ? [vm.data.content.preview_image] : [],
                                                     }),
-                                            EditorElem.pageSelect(
-                                                    gvc,
-                                                    '選擇佈景主題',
-                                                    vm.data.content.template ?? '',
-                                                    (data) => {
-                                                        vm.data.content.template = data;
-                                                    },
-                                                    (dd) => {
-                                                        const filter_result = dd.group !== 'glitter-article' && dd.page_type === 'article' && dd.page_config.template_type === 'blog';
-                                                        if (filter_result && !vm.data.content.template) {
-                                                            vm.data.content.template = dd.tag;
-                                                            gvc.notifyDataChange(id);
-                                                        }
-                                                        return filter_result;
-                                                    }
-                                            ),
-                                            EditorElem.editeInput({
-                                                gvc: gvc,
-                                                title: '作者名稱',
-                                                default: vm.data.content.author,
-                                                placeHolder: '請輸入作者名稱',
-                                                callback: (text) => {
-                                                    vm.data.content.author = text;
-                                                },
-                                            }),
-                                            gvc.bindView(() => {
-                                                const id = gvc.glitter.getUUID();
-                                                return {
-                                                    bind: id,
-                                                    view: () => {
+                                                    (() => {
                                                         if (cf.is_page) {
                                                             return ``;
                                                         }
-                                                        vm.data.content.collection = vm.data.content.collection ?? [];
-                                                        return [
-                                                            html` <div class="d-flex align-items-center my-3" style="gap: 10px;">
-                                                        ${EditorElem.h3('預覽圖')}
-                                                        ${BgWidget.grayButton(
-                                                                    '添加檔案',
-                                                                    gvc.event(() => {
-                                                                        EditorElem.uploadFileFunction({
-                                                                            gvc: gvc,
-                                                                            callback: (text) => {
-                                                                                vm.data.content.preview_image = text;
-                                                                                gvc.notifyDataChange(id);
-                                                                            },
-                                                                            type: `image/*, video/*`,
-                                                                        });
-                                                                    })
-                                                            )}
-                                                    </div>`,
-                                                            EditorElem.flexMediaManager({
-                                                                gvc: gvc,
-                                                                data: vm.data.content.preview_image ? [vm.data.content.preview_image] : [],
-                                                            }),
-                                                            (() => {
-                                                                if (cf.is_page) {
-                                                                    return ``;
-                                                                }
-                                                                return html`
+                                                        return html`
                                                             ${EditorElem.h3('文章分類')}
                                                             ${gvc.bindView(() => {
-                                                                    const tagID = gvc.glitter.getUUID();
-                                                                    let listTag: string[] = [];
-                                                                    ApiUser.getPublicConfig('blog_collection', 'manager').then((data: any) => {
-                                                                        if (data.response.value) {
-                                                                            vm.link = data.response.value;
+                                                                const tagID = gvc.glitter.getUUID();
+                                                                let listTag: string[] = [];
+                                                                ApiUser.getPublicConfig('blog_collection', 'manager').then((data: any) => {
+                                                                    if (data.response.value) {
+                                                                        vm.link = data.response.value;
 
-                                                                            function setCheck(link: MenuItem[]) {
-                                                                                link.map((dd) => {
-                                                                                    const it = vm.data.content.collection.find((d1: string) => {
-                                                                                        return d1 === dd.link;
-                                                                                    });
-                                                                                    it && listTag.push(dd.title);
-                                                                                    setCheck(dd.items);
+                                                                        function setCheck(link: MenuItem[]) {
+                                                                            link.map((dd) => {
+                                                                                const it = vm.data.content.collection.find((d1: string) => {
+                                                                                    return d1 === dd.link;
                                                                                 });
-                                                                            }
+                                                                                it && listTag.push(dd.title);
+                                                                                setCheck(dd.items);
+                                                                            });
+                                                                        }
 
-                                                                            setCheck(vm.link);
+                                                                        setCheck(vm.link);
 
-                                                                            gvc.notifyDataChange(tagID);
-                                                                        }
-                                                                    });
-                                                                    return {
-                                                                        bind: tagID,
-                                                                        view: () => {
-                                                                            return listTag
-                                                                                    .map((dd: any) => {
-                                                                                        return html` <div class="badge bg_orange  mt-2 me-2 fs-sm">${dd}</div>`;
-                                                                                    })
-                                                                                    .join('');
-                                                                        },
-                                                                        divCreate: {
-                                                                            class: `d-flex flex-wrap`,
-                                                                        },
-                                                                    };
-                                                                })}
+                                                                        gvc.notifyDataChange(tagID);
+                                                                    }
+                                                                });
+                                                                return {
+                                                                    bind: tagID,
+                                                                    view: () => {
+                                                                        return listTag
+                                                                            .map((dd: any) => {
+                                                                                return html` <div class="badge bg_orange  mt-2 me-2 fs-sm">${dd}</div>`;
+                                                                            })
+                                                                            .join('');
+                                                                    },
+                                                                    divCreate: {
+                                                                        class: `d-flex flex-wrap`,
+                                                                    },
+                                                                };
+                                                            })}
                                                             <div
                                                                 class="cursor_pointer bt_c39 ms-2 p-1 mt-3"
                                                                 onclick="${gvc.event(() => {
@@ -1115,97 +1118,97 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                                 添加與編輯分類
                                                             </div>
                                                         `;
-                                                            })(),
-                                                        ].join(`<div class="my-2"></div>`);
-                                                    },
-                                                    divCreate: {},
-                                                };
-                                            }),
-                                        ].join('');
-                                    },
-                                };
-                            })
-                    ),
-                    ratio: 25,
-                }
+                                                    })(),
+                                                ].join(`<div class="my-2"></div>`);
+                                            },
+                                            divCreate: {},
+                                        };
+                                    }),
+                                ].join('');
+                            },
+                        };
+                    })
+                ),
+                ratio: 25,
+            }
         )}
         ${BgWidget.mbContainer(240)}
         <div class="update-bar-container">
             ${vm.data.id
-                    ? BgWidget.redButton(
-                            `刪除${cf.is_page ? '頁面' : '網誌'}`,
-                            gvc.event(() => {
-                                const dialog = new ShareDialog(gvc.glitter);
-                                dialog.checkYesOrNot({
-                                    text: '是否確認刪除此頁面?',
-                                    callback: async (response) => {
-                                        if (response) {
-                                            await cf.widget.event('loading', {
-                                                title: '刪除中...',
-                                            });
-                                            Article.deleteV2({
-                                                id: `${vm.data.id}`,
-                                            }).then(async (res) => {
-                                                await cf.widget.event('loading', {
-                                                    title: '刪除中...',
-                                                    visible: false,
-                                                });
-                                                if (res.result) {
-                                                    vm.dataList = undefined;
-                                                    vm.type = 'list';
-                                                } else {
-                                                    await cf.widget.event('error', {
-                                                        title: '刪除失敗',
-                                                        visible: false,
-                                                    });
-                                                }
-                                            });
-                                        }
-                                    },
-                                });
-                            })
-                    )
-                    : ''}
+                ? BgWidget.redButton(
+                      `刪除${cf.is_page ? '頁面' : '網誌'}`,
+                      gvc.event(() => {
+                          const dialog = new ShareDialog(gvc.glitter);
+                          dialog.checkYesOrNot({
+                              text: '是否確認刪除此頁面?',
+                              callback: async (response) => {
+                                  if (response) {
+                                      await cf.widget.event('loading', {
+                                          title: '刪除中...',
+                                      });
+                                      Article.deleteV2({
+                                          id: `${vm.data.id}`,
+                                      }).then(async (res) => {
+                                          await cf.widget.event('loading', {
+                                              title: '刪除中...',
+                                              visible: false,
+                                          });
+                                          if (res.result) {
+                                              vm.dataList = undefined;
+                                              vm.type = 'list';
+                                          } else {
+                                              await cf.widget.event('error', {
+                                                  title: '刪除失敗',
+                                                  visible: false,
+                                              });
+                                          }
+                                      });
+                                  }
+                              },
+                          });
+                      })
+                  )
+                : ''}
             ${BgWidget.cancel(
-                    gvc.event(() => {
-                        if (!vm.data.id) {
-                            cf.widget.event('error', {
-                                title: '請先儲存',
-                            });
-                        } else {
-                            const href = (() => {
-                                return `${gvc.glitter.root_path}${
-                                        cf.is_page
-                                                ? (() => {
-                                                    switch (page_tab) {
-                                                        case 'shopping':
-                                                            return 'shop';
-                                                        case 'hidden':
-                                                            return 'hidden';
-                                                        case 'page':
-                                                            return 'pages';
-                                                    }
-                                                    return ``;
-                                                })()
-                                                : `blogs`
-                                }/${vm.data.content.tag}?preview=true&appName=${(window.parent as any).appName}`;
-                            })();
-                            localStorage.setItem('preview_data', JSON.stringify(vm.data.content));
-                            (window.parent as any).glitter.openNewTab(href);
-                        }
-                    }),
-                    '預覽'
+                gvc.event(() => {
+                    if (!vm.data.id) {
+                        cf.widget.event('error', {
+                            title: '請先儲存',
+                        });
+                    } else {
+                        const href = (() => {
+                            return `${gvc.glitter.root_path}${
+                                cf.is_page
+                                    ? (() => {
+                                          switch (page_tab) {
+                                              case 'shopping':
+                                                  return 'shop';
+                                              case 'hidden':
+                                                  return 'hidden';
+                                              case 'page':
+                                                  return 'pages';
+                                          }
+                                          return ``;
+                                      })()
+                                    : `blogs`
+                            }/${vm.data.content.tag}?preview=true&appName=${(window.parent as any).appName}`;
+                        })();
+                        localStorage.setItem('preview_data', JSON.stringify(vm.data.content));
+                        (window.parent as any).glitter.openNewTab(href);
+                    }
+                }),
+                '預覽'
             )}
             ${BgWidget.cancel(
-                    gvc.event(() => {
-                        vm.type = 'list';
-                    }),
-                    '取消'
+                gvc.event(() => {
+                    vm.type = 'list';
+                }),
+                '取消'
             )}
             ${BgWidget.save(
-                    gvc.event(async () => {
-                        saveData(gvc, cf, vm, cVm, false);
-                    })
+                gvc.event(async () => {
+                    saveData(gvc, cf, vm, cVm, false);
+                })
             )}
         </div>
     `;
@@ -1440,62 +1443,62 @@ function setCollection(cf: {
             bind: vm.id,
             view: () => {
                 return html` <div class="title-container">
-                    ${BgWidget.goBack(
+                        ${BgWidget.goBack(
                             cf.gvc.event(() => {
                                 cf.goBack();
                             })
-                    )}${BgWidget.title('分類設定')}
-                </div>
-                <div
+                        )}${BgWidget.title('分類設定')}
+                    </div>
+                    ${BgWidget.container(html`<div
                         style="max-width:100%;width: 856px; padding: 20px; background: white; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08); border-radius: 10px; overflow: hidden; justify-content: center; align-items: center; display: inline-flex"
-                >
-                    <div style="width: 100%;  position: relative">
-                        <div style="width: 100%;  left: 0px; top: 0px;  flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; display: inline-flex">
-                            <div
+                    >
+                        <div style="width: 100%;  position: relative">
+                            <div style="width: 100%;  left: 0px; top: 0px;  flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; display: inline-flex">
+                                <div
                                     class="w-100  ${getSelectCount({
                                         items: vm.link,
                                     }) > 0
-                                            ? ``
-                                            : `d-none`}"
+                                        ? ``
+                                        : `d-none`}"
                                     style="height: 40px; padding: 12px 18px;background: #F7F7F7; border-radius: 10px; justify-content: flex-end; align-items: center; gap: 8px; display: inline-flex"
-                            >
-                                <div style="flex: 1 1 0; color: #393939; font-size: 14px; font-family: Noto Sans; font-weight: 700; word-wrap: break-word">
-                                        已選取${getSelectCount({
-                                        items: vm.link,
-                                    })}項
-                                </div>
-                                <div
-                                        style="cursor:pointer;padding: 4px 14px;background: white; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10); border-radius: 20px; border: 1px #DDDDDD solid; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex"
                                 >
+                                    <div style="flex: 1 1 0; color: #393939; font-size: 14px; font-family: Noto Sans; font-weight: 700; word-wrap: break-word">
+                                        已選取${getSelectCount({
+                                            items: vm.link,
+                                        })}項
+                                    </div>
                                     <div
+                                        style="cursor:pointer;padding: 4px 14px;background: white; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10); border-radius: 20px; border: 1px #DDDDDD solid; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex"
+                                    >
+                                        <div
                                             style="color: #393939; font-size: 14px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
                                             onclick="${gvc.event(() => {
                                                 vm.link = deleteSelect(vm.link);
                                                 gvc.notifyDataChange(vm.id);
                                             })}"
-                                    >
-                                        刪除
+                                        >
+                                            刪除
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="d-flex align-items-center" style="width: 100%; height: 22px; position: relative;gap:29px;">
-                                <div
+                                <div class="d-flex align-items-center" style="width: 100%; height: 22px; position: relative;gap:29px;">
+                                    <div
                                         class="${allSelect({
                                             items: vm.link,
                                             selected: !vm.link.find((dd) => {
                                                 return !(dd as any).selected;
                                             }),
                                         })
-                                                ? `fa-solid fa-square-check`
-                                                : `fa-regular fa-square`}"
+                                            ? `fa-solid fa-square-check`
+                                            : `fa-regular fa-square`}"
                                         style="color:#393939;width: 16px; height: 16px;cursor: pointer;"
                                         onclick="${cf.gvc.event((e, event) => {
                                             event.stopPropagation();
 
                                             if (
-                                                    vm.link.find((dd) => {
-                                                        return !(dd as any).selected;
-                                                    })
+                                                vm.link.find((dd) => {
+                                                    return !(dd as any).selected;
+                                                })
                                             ) {
                                                 selectAll({
                                                     items: vm.link,
@@ -1507,134 +1510,134 @@ function setCollection(cf: {
                                             }
                                             gvc.notifyDataChange(vm.id);
                                         })}"
-                                ></div>
-                                <div style="left: 61px; top: 0px;  color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 700; word-wrap: break-word">選單名稱</div>
-                            </div>
-                            <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: flex">
-                                ${(() => {
-                                    function renderItems(array: MenuItem[]): string {
-                                        const id = gvc.glitter.getUUID();
-                                        return (
+                                    ></div>
+                                    <div style="left: 61px; top: 0px;  color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 700; word-wrap: break-word">選單名稱</div>
+                                </div>
+                                <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: flex">
+                                    ${(() => {
+                                        function renderItems(array: MenuItem[]): string {
+                                            const id = gvc.glitter.getUUID();
+                                            return (
                                                 gvc.bindView(() => {
                                                     return {
                                                         bind: id,
                                                         view: () => {
                                                             return array
-                                                                    .map((dd, index) => {
-                                                                        dd.items;
-                                                                        const list = html`
+                                                                .map((dd, index) => {
+                                                                    dd.items;
+                                                                    const list = html`
+                                                                        <div
+                                                                            class=" w-100 "
+                                                                            style="width: 100%; justify-content: flex-start; align-items: center; gap: 5px; display: inline-flex;cursor: pointer;"
+                                                                            onclick="${cf.gvc.event(() => {
+                                                                                if (dd.items && dd.items.length > 0) {
+                                                                                    (dd as any).toggle = !(dd as any).toggle;
+                                                                                    gvc.notifyDataChange(vm.id);
+                                                                                }
+                                                                            })}"
+                                                                        >
                                                                             <div
-                                                                                    class=" w-100 "
-                                                                                    style="width: 100%; justify-content: flex-start; align-items: center; gap: 5px; display: inline-flex;cursor: pointer;"
-                                                                                    onclick="${cf.gvc.event(() => {
-                                                                                        if (dd.items && dd.items.length > 0) {
-                                                                                            (dd as any).toggle = !(dd as any).toggle;
-                                                                                            gvc.notifyDataChange(vm.id);
-                                                                                        }
-                                                                                    })}"
-                                                                            >
-                                                                                <div
-                                                                                        class="${allSelect(dd) ? `fa-solid fa-square-check` : `fa-regular fa-square`}"
-                                                                                        style="color:#393939;width: 16px; height: 16px;"
-                                                                                        onclick="${cf.gvc.event((e, event) => {
-                                                                                            event.stopPropagation();
-                                                                                            (dd as any).selected = !(dd as any).selected;
-                                                                                            if ((dd as any).selected) {
-                                                                                                selectAll(dd);
-                                                                                            } else {
-                                                                                                clearAll(dd);
-                                                                                            }
-                                                                                            gvc.notifyDataChange(vm.id);
-                                                                                        })}"
-                                                                                ></div>
-                                                                                <div class="hoverF2 pe-2" style="width: 100%;  justify-content: flex-start; align-items: center; gap: 8px; display: flex">
-                                                                                    <i
-                                                                                            class="ms-2 fa-solid fa-grip-dots-vertical color39 dragItem hoverBtn d-flex align-items-center justify-content-center"
-                                                                                            style="cursor: pointer;width:25px;height: 25px;"
-                                                                                    ></i>
-                                                                                    <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; display: inline-flex">
-                                                                                        <div style="justify-content: flex-start; align-items: center; gap: 8px; display: inline-flex">
-                                                                                            <div style="color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">
-                                                                                                ${dd.title}
-                                                                                            </div>
-                                                                                            ${dd.items && dd.items.length > 0
-                                                                                                    ? !(dd as any).toggle
-                                                                                                            ? `<i class="fa-solid fa-angle-down color39"></i>`
-                                                                                                            : `<i class="fa-solid fa-angle-up color39"></i>`
-                                                                                                    : ``}
-                                                                                        </div>
-                                                                                        <div style="justify-content: flex-start; align-items: center; gap: 8px; display: inline-flex">
-                                                                                            <div
-                                                                                                    style="color: #3366BB; font-size: 14px; font-family: Noto Sans; font-weight: 400; line-height: 14px; word-wrap: break-word"
-                                                                                            >
-                                                                                                ${dd.title}
-                                                                                            </div>
-                                                                                            <div style="color: #159240; font-size: 14px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">
-                                                                                                ${dd.link}
-                                                                                            </div>
+                                                                                class="${allSelect(dd) ? `fa-solid fa-square-check` : `fa-regular fa-square`}"
+                                                                                style="color:#393939;width: 16px; height: 16px;"
+                                                                                onclick="${cf.gvc.event((e, event) => {
+                                                                                    event.stopPropagation();
+                                                                                    (dd as any).selected = !(dd as any).selected;
+                                                                                    if ((dd as any).selected) {
+                                                                                        selectAll(dd);
+                                                                                    } else {
+                                                                                        clearAll(dd);
+                                                                                    }
+                                                                                    gvc.notifyDataChange(vm.id);
+                                                                                })}"
+                                                                            ></div>
+                                                                            <div class="hoverF2 pe-2" style="width: 100%;  justify-content: flex-start; align-items: center; gap: 8px; display: flex">
+                                                                                <i
+                                                                                    class="ms-2 fa-solid fa-grip-dots-vertical color39 dragItem hoverBtn d-flex align-items-center justify-content-center"
+                                                                                    style="cursor: pointer;width:25px;height: 25px;"
+                                                                                ></i>
+                                                                                <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; display: inline-flex">
+                                                                                    <div style="justify-content: flex-start; align-items: center; gap: 8px; display: inline-flex">
+                                                                                        <div style="color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">
+                                                                                            ${dd.title}
                                                                                         </div>
+                                                                                        ${dd.items && dd.items.length > 0
+                                                                                            ? !(dd as any).toggle
+                                                                                                ? `<i class="fa-solid fa-angle-down color39"></i>`
+                                                                                                : `<i class="fa-solid fa-angle-up color39"></i>`
+                                                                                            : ``}
                                                                                     </div>
-                                                                                    <div class="flex-fill"></div>
-                                                                                    <div
-                                                                                            class="child me-2"
-                                                                                            onclick="${cf.gvc.event((e, event) => {
-                                                                                                event.stopPropagation();
-                                                                                                MenusSetting.collectionEvent(
-                                                                                                        {
-                                                                                                            link: '',
-                                                                                                            title: '',
-                                                                                                            items: [],
-                                                                                                        },
-                                                                                                        (data) => {
-                                                                                                            dd.items = dd.items || [];
-                                                                                                            dd.items.push(data);
-                                                                                                            if (checkLinkExists(data, vm.link)) {
-                                                                                                                gvc.notifyDataChange(vm.id);
-                                                                                                                return true;
-                                                                                                            } else {
-                                                                                                                dd.items.splice(dd.items.length - 1, 1);
-                                                                                                                return false;
-                                                                                                            }
-                                                                                                        }
-                                                                                                );
-                                                                                            })}"
-                                                                                    >
-                                                                                        <i class="fa-solid fa-plus" style="color:#393939;"></i>
+                                                                                    <div style="justify-content: flex-start; align-items: center; gap: 8px; display: inline-flex">
+                                                                                        <div
+                                                                                            style="color: #3366BB; font-size: 14px; font-family: Noto Sans; font-weight: 400; line-height: 14px; word-wrap: break-word"
+                                                                                        >
+                                                                                            ${dd.title}
+                                                                                        </div>
+                                                                                        <div style="color: #159240; font-size: 14px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">
+                                                                                            ${dd.link}
+                                                                                        </div>
                                                                                     </div>
-                                                                                    <div
-                                                                                            class="child"
-                                                                                            onclick="${cf.gvc.event((e, event) => {
-                                                                                                event.stopPropagation();
-                                                                                                const og = JSON.parse(JSON.stringify(dd));
+                                                                                </div>
+                                                                                <div class="flex-fill"></div>
+                                                                                <div
+                                                                                    class="child me-2"
+                                                                                    onclick="${cf.gvc.event((e, event) => {
+                                                                                        event.stopPropagation();
+                                                                                        MenusSetting.collectionEvent(
+                                                                                            {
+                                                                                                link: '',
+                                                                                                title: '',
+                                                                                                items: [],
+                                                                                            },
+                                                                                            (data) => {
+                                                                                                dd.items = dd.items || [];
+                                                                                                dd.items.push(data);
+                                                                                                if (checkLinkExists(data, vm.link)) {
+                                                                                                    gvc.notifyDataChange(vm.id);
+                                                                                                    return true;
+                                                                                                } else {
+                                                                                                    dd.items.splice(dd.items.length - 1, 1);
+                                                                                                    return false;
+                                                                                                }
+                                                                                            }
+                                                                                        );
+                                                                                    })}"
+                                                                                >
+                                                                                    <i class="fa-solid fa-plus" style="color:#393939;"></i>
+                                                                                </div>
+                                                                                <div
+                                                                                    class="child"
+                                                                                    onclick="${cf.gvc.event((e, event) => {
+                                                                                        event.stopPropagation();
+                                                                                        const og = JSON.parse(JSON.stringify(dd));
 
-                                                                                                MenusSetting.collectionEvent(dd, (data) => {
-                                                                                                    if (checkLinkExists(data, vm.link)) {
-                                                                                                        array[index] = data;
-                                                                                                        gvc.notifyDataChange(vm.id);
-                                                                                                        return true;
-                                                                                                    } else {
-                                                                                                        data.link = og.link;
-                                                                                                        data.title = og.title;
-                                                                                                        return false;
-                                                                                                    }
-                                                                                                });
-                                                                                            })}"
-                                                                                    >
-                                                                                        <i class="fa-solid fa-pencil" style="color:#393939;"></i>
-                                                                                    </div>
+                                                                                        MenusSetting.collectionEvent(dd, (data) => {
+                                                                                            if (checkLinkExists(data, vm.link)) {
+                                                                                                array[index] = data;
+                                                                                                gvc.notifyDataChange(vm.id);
+                                                                                                return true;
+                                                                                            } else {
+                                                                                                data.link = og.link;
+                                                                                                data.title = og.title;
+                                                                                                return false;
+                                                                                            }
+                                                                                        });
+                                                                                    })}"
+                                                                                >
+                                                                                    <i class="fa-solid fa-pencil" style="color:#393939;"></i>
                                                                                 </div>
                                                                             </div>
-                                                                            ${dd.items && dd.items.length > 0
-                                                                                    ? html`
-                                                                                        <div class=" w-100 ${(dd as any).toggle ? `` : `d-none`}" style="padding-left: 35px;">
-                                                                                            ${renderItems(dd.items as MenuItem[]) as any}
-                                                                                        </div>
-                                                                                    `
-                                                                                    : ``}
-                                                                        `;
-                                                                        return html` <li class="w-100 ">${list}</li>`;
-                                                                    })
-                                                                    .join('');
+                                                                        </div>
+                                                                        ${dd.items && dd.items.length > 0
+                                                                            ? html`
+                                                                                  <div class=" w-100 ${(dd as any).toggle ? `` : `d-none`}" style="padding-left: 35px;">
+                                                                                      ${renderItems(dd.items as MenuItem[]) as any}
+                                                                                  </div>
+                                                                              `
+                                                                            : ``}
+                                                                    `;
+                                                                    return html` <li class="w-100 ">${list}</li>`;
+                                                                })
+                                                                .join('');
                                                         },
                                                         divCreate: {
                                                             elem: 'ul',
@@ -1643,13 +1646,13 @@ function setCollection(cf: {
                                                         },
                                                         onCreate: () => {
                                                             gvc.glitter.addMtScript(
-                                                                    [
-                                                                        {
-                                                                            src: `https://raw.githack.com/SortableJS/Sortable/master/Sortable.js`,
-                                                                        },
-                                                                    ],
-                                                                    () => {},
-                                                                    () => {}
+                                                                [
+                                                                    {
+                                                                        src: `https://raw.githack.com/SortableJS/Sortable/master/Sortable.js`,
+                                                                    },
+                                                                ],
+                                                                () => {},
+                                                                () => {}
                                                             );
                                                             const interval = setInterval(() => {
                                                                 //@ts-ignore
@@ -1691,57 +1694,57 @@ function setCollection(cf: {
                                                     };
                                                 }) +
                                                 html` <div
-                                                        class=""
-                                                        style="cursor:pointer;align-self: stretch; height: 50px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex"
-                                                        onclick="${cf.gvc.event(() => {
-                                                            MenusSetting.collectionEvent(
-                                                                    {
-                                                                        link: '',
-                                                                        title: '',
-                                                                        items: [],
-                                                                    },
-                                                                    (data) => {
-                                                                        array.push(data);
-                                                                        if (checkLinkExists(data, vm.link)) {
-                                                                            gvc.notifyDataChange(vm.id);
-                                                                            return true;
-                                                                        } else {
-                                                                            array.splice(array.length - 1, 1);
-                                                                            return false;
-                                                                        }
-                                                                    }
-                                                            );
-                                                        })}"
+                                                    class=""
+                                                    style="cursor:pointer;align-self: stretch; height: 50px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex"
+                                                    onclick="${cf.gvc.event(() => {
+                                                        MenusSetting.collectionEvent(
+                                                            {
+                                                                link: '',
+                                                                title: '',
+                                                                items: [],
+                                                            },
+                                                            (data) => {
+                                                                array.push(data);
+                                                                if (checkLinkExists(data, vm.link)) {
+                                                                    gvc.notifyDataChange(vm.id);
+                                                                    return true;
+                                                                } else {
+                                                                    array.splice(array.length - 1, 1);
+                                                                    return false;
+                                                                }
+                                                            }
+                                                        );
+                                                    })}"
                                                 >
                                                     <div
-                                                            style="align-self: stretch; height: 54px; border-radius: 10px; border: 1px #DDDDDD solid; justify-content: center; align-items: center; gap: 6px; display: inline-flex"
+                                                        style="align-self: stretch; height: 54px; border-radius: 10px; 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>`
-                                        );
-                                    }
+                                            );
+                                        }
 
-                                    return renderItems(vm.link);
-                                })()}
+                                        return renderItems(vm.link);
+                                    })()}
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="position-fixed bg-body bottom-0  w-100 d-flex align-items-center justify-content-end p-3 border-top" style="gap:10px;left:0px;">
-                    ${BgWidget.cancel(
+                    </div>`)}
+                    <div class="update-bar-container">
+                        ${BgWidget.cancel(
                             gvc.event(() => {
                                 cf.goBack();
                             })
-                    )}
-                    ${BgWidget.save(
+                        )}
+                        ${BgWidget.save(
                             gvc.event(() => {
                                 save();
                             }),
                             '確認'
-                    )}
-                </div>`;
+                        )}
+                    </div>`;
             },
             divCreate: {
                 style: `padding-bottom:60px;`,
@@ -1773,4 +1776,4 @@ function template_select(gvc: GVC, cf: any, vm: any, cVm: any, page_type: any) {
     );
 }
 
-(window as any).glitter.setModule(import.meta.url, BgBlog);
+(window as any).glitter.setModule(import.meta.url, BgBlog);