ts-glitter 13.4.7 → 13.5.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>
@@ -91,68 +91,81 @@ export class BgBlog {
                 ];
             });
         }
-
+        if ((window.parent as any).glitter.getUrlParameter('page-id')) {
+            Article.get({
+                page: 0,
+                limit: 1,
+                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();
             return {
                 bind: id,
                 dataList: [{ obj: vm, key: 'type' }],
                 view: () => {
+                    if ((window.parent as any).glitter.getUrlParameter('page-id') && vm.type!=='replace') {
+                        return ``
+                    }
                     if (vm.type === 'list') {
                         return BgWidget.container(
                             html`
-                                <div class="d-flex w-100 align-items-center mb-3 ${type === 'select' ? `d-none` : ``}">
+                                <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.mainCard(
+                                ${BgWidget.container(
+                                BgWidget.mainCard(
                                     [
                                         BgWidget.searchPlace(
                                             gvc.event((e) => {
@@ -231,11 +244,12 @@ export class BgBlog {
                                             ],
                                         }),
                                     ].join('')
-                                )}
-                            `,
-                            BgWidget.getContainerWidth()
+                                )
+                            )}
+                            `
                         );
                     } else if (vm.type == 'replace') {
+                        (window.parent as any).glitter.setUrlParameter('page-id', vm.data.id)
                         return editor({
                             gvc: gvc,
                             vm: vm,
@@ -253,8 +267,7 @@ export class BgBlog {
                                     vm.type = 'list';
                                     gvc.notifyDataChange(id);
                                 },
-                            }),
-                            BgWidget.getContainerWidth()
+                            })
                         );
                     } else {
                         return editor({
@@ -283,260 +296,262 @@ export class BgBlog {
             }
         `);
         const containerID = gvc.glitter.getUUID();
-        return html`<div class="d-flex align-items-center">
+        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',
-                                                    name: '空白內容',
-                                                    page_type: 'page',
-                                                    preview_image: null,
-                                                    appName: 'shop_template_black_style',
-                                                    template_type: 2,
-                                                    template_config: {
-                                                        tag: ['頁面範例'],
-                                                        desc: '',
+                        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: '空白內容',
-                                                        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: '',
+                                                        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(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 {
+                                                ].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: dd.content.tag,
-                                                                    name: dd.content.name,
+                                                                    tag: 'empty',
+                                                                    name: '空白內容',
                                                                     page_type: 'page',
                                                                     preview_image: null,
-                                                                    _config: dd.content.config,
-                                                                    appName: 't_1726217714800',
+                                                                    appName: 'shop_template_black_style',
                                                                     template_type: 2,
                                                                     template_config: {
-                                                                        tag: [],
+                                                                        tag: ['頁面範例'],
                                                                         desc: '',
-                                                                        name: dd.content.name,
-                                                                        image: [dd.content.seo.image],
+                                                                        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: 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>
-                                                            `;
+                                        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>
+                                                                `;
+                                                            }
                                                         } 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>
-                                                            `;
-                                                        }
-                                                    } 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);
-                                                                                                            });
-                                                                                                        }
-                                                                                                    }
-                                                                                                })}"
+                                                                <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}%;"
                                                                                             >
-                                                                                                選擇
-                                                                                            </button>
+                                                                                                <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>
-                                                                                    <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>`;
+                                                                                })
+                                                                                .join('')}
+                                                                    </div>
                                                                 </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: {},
-                        };
-                    })
+                                                            `;
+                                                        }
+                                                    })();
+                                                } 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('')} `;
+            ].join('')}
+        `;
     }
 }
 
@@ -585,8 +600,7 @@ function editor(cf: { gvc: GVC; vm: any; is_page: boolean; widget: any; page_tab
                                         },
                                         def: vm.data.content.collection || [],
                                     },
-                                }),
-                                BgWidget.getContainerWidth()
+                                })
                             );
                         case 'detail':
                             return detail(gvc, cf, vm, cVm, cf.page_tab);
@@ -598,8 +612,7 @@ function editor(cf: { gvc: GVC; vm: any; is_page: boolean; widget: any; page_tab
                 },
                 divCreate: {},
             };
-        }),
-        BgWidget.getContainerWidth()
+        })
     );
 }
 
@@ -614,136 +627,100 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
         }, 100);
         return ``;
     }
+    const domainPrefix = `${
+        cf.is_page
+            ? (() => {
+                switch (page_tab) {
+                    case 'shopping':
+                        return 'shop';
+                    case 'hidden':
+                        return 'hidden';
+                    case 'page':
+                        return 'pages';
+                    default:
+                        return '';
+                }
+            })()
+            : 'blogs'
+    }`
     return html`
-        <div class="d-flex w-100 align-items-center mb-3 ">
+        <div class="title-container">
             ${BgWidget.goBack(
-                gvc.event(() => {
-                    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(() => {
-                        localStorage.setItem('preview_data', JSON.stringify(vm.data.content));
-                        (window.parent as any).glitter.innerDialog(
-                            (gvc: GVC) => {
-                                return gvc.bindView(() => {
-                                    const id = gvc.glitter.getUUID();
-                                    return {
-                                        bind: id,
-                                        view: () => {
-                                            return html` <iframe
-                                                class="rounded-3"
-                                                id="editor_dialog"
-                                                src="${(() => {
-                                                    const url = new URL(window.parent.location.href);
-                                                    url.searchParams.set('function', 'user-editor');
-                                                    return url.href;
-                                                })()}"
-                                            ></iframe>`;
-                                        },
-                                        divCreate: {
-                                            class: `vw-100 vh-100 p-2`,
-                                            style: `background: rgba(0,0,0,0.5);`,
-                                        },
-                                        onCreate: () => {
-                                            const interval = setInterval(() => {
-                                                const iframe: any = window.parent.document.querySelector('#editor_dialog')!;
-                                                if (iframe.contentWindow.glitter) {
-                                                    iframe.contentWindow.glitter.share.editor_vm = {
-                                                        close: () => {
-                                                            gvc.closeDialog();
-                                                        },
-                                                        callback: (cf: any) => {
-                                                            vm.data.content.config = cf.config;
-                                                            saveData(gvc, cf, vm, cVm, true);
-                                                        },
-                                                        page_data: {
-                                                            config: JSON.parse(JSON.stringify(vm.data.content.config || [])),
-                                                            page_config: {},
-                                                            name: vm.data.content.name || '尚未設定頁面標題',
-                                                        },
-                                                        title: vm.data.content.name || '尚未設定頁面標題',
-                                                    };
-                                                    clearInterval(interval);
-                                                }
-                                            }, 100);
-                                        },
-                                    };
-                                });
-                            },
-                            '',
-                            {
-                                dismiss: () => {},
-                            }
-                        );
-                    })
+                        '前往設計',
+                        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.container(
-            html`
-                <div class="d-flex justify-content-center p-0 ${document.body.clientWidth < 768 ? 'flex-column' : ''}" style="gap: 24px">
-                    <div class="d-flex flex-column " style="gap:10px;${document.body.clientWidth > 768 ? 'width: 73.5%;' : ''}">
-                        ${BgWidget.container(
-                            gvc.bindView(() => {
-                                vm.data.status = vm.data.status ?? 1;
-                                const id = gvc.glitter.getUUID();
-                                return {
-                                    bind: id,
-                                    view: () => {
-                                        return [
-                                            BgWidget.mainCard(
+        ${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'
+                                                            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);
-                                                            })}
-                                                        </div>`,
+                                                    <div class="tx_normal">網頁啟用</div>
+                                                    ${BgWidget.switchButton(gvc, vm.data.status, (bool) => {
+                                                            vm.data.status = bool ? 1 : 0;
+                                                            gvc.notifyDataChange(id);
+                                                        })}
+                                                </div>`,
                                                         BgWidget.editeInput({
                                                             gvc: gvc,
                                                             title: '網頁名稱',
@@ -754,40 +731,40 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                             },
                                                         }),
                                                         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; '}"
-                                                                class="w-100"
-                                                            >
-                                                                <div class="${document.body.clientWidth > 768 ? ``:`w-100`}" style="padding: 9px 18px;background: #EAEAEA ;${document.body.clientWidth > 768 ? `justify-content: center;`:`justify-content: start;`} align-items: center; gap: 5px; display: flex">
-                                                                    <div style="text-align: right; color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">
-                                                                        ${prefixURL}
-                                                                    </div>
-                                                                </div>
-                                                                <input
-                                                                    class="flex-fill"
-                                                                    style="width:100%;border:none;background:none;text-align: start; color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word; ${document
-                                                                        .body.clientWidth > 768
-                                                                        ? ''
-                                                                        : 'padding: 9px 18px;'}"
-                                                                    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);
-                                                                        }
-                                                                    })}"
-                                                                />
+                                                    <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; '}"
+                                                        class="w-100"
+                                                    >
+                                                        <div style="width:100%;padding: 9px 18px;background: #EAEAEA; justify-content: flex-start; align-items: center; gap: 5px; display: flex">
+                                                            <div style="text-align: right; color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">
+                                                                ${prefixURL}
                                                             </div>
-                                                        </div>`,
+                                                        </div>
+                                                        <input
+                                                            class="flex-fill"
+                                                            style="width:100%;border:none;background:none;text-align: start; color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word; ${document
+                                                                .body.clientWidth > 768
+                                                                ? ''
+                                                                : 'padding: 9px 18px;'}"
+                                                            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);
+                                                            }
+                                                        })}"
+                                                        />
+                                                    </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 [
@@ -814,13 +791,13 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                                     },
                                                                 }),
                                                                 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);
-                                                                    })}
-                                                                </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);
+                                                                })}
+                                                        </div>`,
                                                                 ,
                                                             ];
                                                         })(),
@@ -844,18 +821,15 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                         })(),
                                                     ].join(BgWidget.mbContainer(12));
                                                 })()
-                                            ),
-                                        ].join('');
-                                    },
-                                    divCreate: {
-                                        style: 'padding: 0;',
-                                    },
-                                };
-                            }),
-                            undefined,
-                            'padding: 0 !important; margin: 0 !important; width: 100%;'
-                        )}
-                        ${(() => {
+                                        ),
+                                    ].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';
@@ -868,142 +842,142 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                         // 顯示套用的賣場商品列表
                                         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`
-                                                                                <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">
-                                                                                            <div class="tx_normal">產品列表</div>
-                                                                                        </div>
-                                                                                        ${BgWidget.grayButton(
-                                                                                            '搜尋商品',
-                                                                                            gvc.event(() => {
-                                                                                                BgProduct.variantsSelector({
-                                                                                                    gvc: gvc,
-                                                                                                    filter_variants: vm.data.content.relative_data.map((dd: any) => {
-                                                                                                        return [dd.product_id].concat(dd.variant.spec).join('-');
-                                                                                                    }),
-                                                                                                    callback: async (value) => {
-                                                                                                        vm.data.content.relative_data = value.map((dd: any) => {
-                                                                                                            return {
-                                                                                                                variant: dd.variant_content,
-                                                                                                                product_id: dd.product_id,
-                                                                                                            };
-                                                                                                        });
-                                                                                                        subVM.loading = true;
-                                                                                                        gvc.notifyDataChange(subVM.id);
-                                                                                                    },
-                                                                                                });
-                                                                                            }),
-                                                                                            { textStyle: 'font-weight: 400;' }
-                                                                                        )}
+                                                            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`
+                                                                            <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">
+                                                                                        <div class="tx_normal">產品列表</div>
                                                                                     </div>
-                                                                                    ${subVM.dataList
+                                                                                    ${BgWidget.grayButton(
+                                                                                        '搜尋商品',
+                                                                                        gvc.event(() => {
+                                                                                            BgProduct.variantsSelector({
+                                                                                                gvc: gvc,
+                                                                                                filter_variants: vm.data.content.relative_data.map((dd: any) => {
+                                                                                                    return [dd.product_id].concat(dd.variant.spec).join('-');
+                                                                                                }),
+                                                                                                callback: async (value) => {
+                                                                                                    vm.data.content.relative_data = value.map((dd: any) => {
+                                                                                                        return {
+                                                                                                            variant: dd.variant_content,
+                                                                                                            product_id: dd.product_id,
+                                                                                                        };
+                                                                                                    });
+                                                                                                    subVM.loading = true;
+                                                                                                    gvc.notifyDataChange(subVM.id);
+                                                                                                },
+                                                                                            });
+                                                                                        }),
+                                                                                        { textStyle: 'font-weight: 400;' }
+                                                                                )}
+                                                                                </div>
+                                                                                ${subVM.dataList
                                                                                         .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 })}
-                                                                                                    <div class="tx_normal ${opt.note ? 'mb-1' : ''} d-flex flex-column">
-                                                                                                        ${opt.value} ${opt.note ? html` <div class="tx_gray_12">${opt.note}</div> ` : ''}
-                                                                                                    </div>
-                                                                                                    <div class="flex-fill"></div>
-                                                                                                    ${BgWidget.cancel(
-                                                                                                        gvc.event(() => {
-                                                                                                            vm.data.content.relative_data.splice(index, 1);
-                                                                                                            subVM.dataList.splice(index, 1);
-                                                                                                            gvc.notifyDataChange(subVM.id);
-                                                                                                        }),
-                                                                                                        '移除'
-                                                                                                    )}
+                                                                                            <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 })}
+                                                                                                <div class="tx_normal ${opt.note ? 'mb-1' : ''} d-flex flex-column">
+                                                                                                    ${opt.value} ${opt.note ? html` <div class="tx_gray_12">${opt.note}</div> ` : ''}
                                                                                                 </div>
-                                                                                            `;
+                                                                                                <div class="flex-fill"></div>
+                                                                                                ${BgWidget.cancel(
+                                                                                                    gvc.event(() => {
+                                                                                                        vm.data.content.relative_data.splice(index, 1);
+                                                                                                        subVM.dataList.splice(index, 1);
+                                                                                                        gvc.notifyDataChange(subVM.id);
+                                                                                                    }),
+                                                                                                    '移除'
+                                                                                            )}
+                                                                                            </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}`;
+                                                                            </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;
                                                                                                     })
-                                                                                                )
                                                                                             );
-                                                                                            product.note = dd.variant.spec.join(' / ');
-                                                                                            return product;
+                                                                                            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);
                                                                                         });
-                                                                                        resolve(subVM.dataList);
-                                                                                    }).then((data) => {
-                                                                                        subVM.dataList = data;
-                                                                                        subVM.loading = false;
-                                                                                        gvc.notifyDataChange(subVM.id);
-                                                                                    });
+                                                                                    }
                                                                                 }
-                                                                            }
-                                                                        },
-                                                                    };
-                                                                });
-                                                            })()}`,
-                                                        ].join(''),
-                                                    ].join('')
+                                                                            },
+                                                                        };
+                                                                    });
+                                                                })()}`,
+                                                            ].join(''),
+                                                        ].join('')
                                                 ),
                                             ].join('');
                                         } else {
                                             return [].join('');
                                         }
                                     },
-                                    divCreate: {
-                                        class: `w-100 mt-2`,
-                                    },
                                 };
                             });
-                        })()}
-                    </div>
-                    ${BgWidget.container(
-                        BgWidget.mainCard(
+                        })(),
+                    ].join(''),
+                    ratio: 75,
+                },
+                {
+                    html: BgWidget.summaryCard(
                             gvc.bindView(() => {
                                 console.log(`vm.data.content.template=>`, vm.data.content.template);
                                 const id = gvc.glitter.getUUID();
@@ -1013,41 +987,41 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                     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.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);
+                                                    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;
                                                     }
-                                                    return filter_result;
-                                                }
                                             ),
                                             EditorElem.editeInput({
                                                 gvc: gvc,
@@ -1069,8 +1043,8 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                         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(
+                                                        ${EditorElem.h3('預覽圖')}
+                                                        ${BgWidget.grayButton(
                                                                     '添加檔案',
                                                                     gvc.event(() => {
                                                                         EditorElem.uploadFileFunction({
@@ -1082,8 +1056,8 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                                             type: `image/*, video/*`,
                                                                         });
                                                                     })
-                                                                )}
-                                                            </div>`,
+                                                            )}
+                                                    </div>`,
                                                             EditorElem.flexMediaManager({
                                                                 gvc: gvc,
                                                                 data: vm.data.content.preview_image ? [vm.data.content.preview_image] : [],
@@ -1093,54 +1067,54 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                                     return ``;
                                                                 }
                                                                 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;
+                                                            ${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;
 
-                                                                                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
+                                                                            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(() => {
-                                                                            cVm.type = 'collection';
-                                                                            gvc.notifyDataChange(cVm.id);
-                                                                        })}"
-                                                                    >
-                                                                        <i class="fa-solid fa-plus me-2" aria-hidden="true"></i>
-                                                                        添加與編輯分類
-                                                                    </div>
-                                                                `;
+                                                                        },
+                                                                        divCreate: {
+                                                                            class: `d-flex flex-wrap`,
+                                                                        },
+                                                                    };
+                                                                })}
+                                                            <div
+                                                                class="cursor_pointer bt_c39 ms-2 p-1 mt-3"
+                                                                onclick="${gvc.event(() => {
+                                                                    cVm.type = 'collection';
+                                                                    gvc.notifyDataChange(cVm.id);
+                                                                })}"
+                                                            >
+                                                                <i class="fa-solid fa-plus me-2" aria-hidden="true"></i>
+                                                                添加與編輯分類
+                                                            </div>
+                                                        `;
                                                             })(),
                                                         ].join(`<div class="my-2"></div>`);
                                                     },
@@ -1151,92 +1125,87 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                     },
                                 };
                             })
-                        ),
-                        undefined,
-                        'padding: 0 !important; margin: 0 !important; width: 26.5%;'
-                    )}
-                </div>
-            `,
-            undefined,
-            'padding: 0 !important;'
+                    ),
+                    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>
     `;
@@ -1470,63 +1439,63 @@ function setCollection(cf: {
         return {
             bind: vm.id,
             view: () => {
-                return html` <div class="d-flex align-items-center my-3">
-                        ${BgWidget.goBack(
+                return html` <div class="title-container">
+                    ${BgWidget.goBack(
                             cf.gvc.event(() => {
                                 cf.goBack();
                             })
-                        )}${BgWidget.title('分類設定')}
-                    </div>
-                    <div
+                    )}${BgWidget.title('分類設定')}
+                </div>
+                <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">
+                            >
+                                <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
+                                        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
+                                >
+                                    <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 class="d-flex align-items-center" style="width: 100%; height: 22px; position: relative;gap:29px;">
-                                    <div
+                            </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,
@@ -1538,134 +1507,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`
-                                                                        <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);
-                                                                                }
-                                                                            })}"
-                                                                        >
+                                                                    .map((dd, index) => {
+                                                                        dd.items;
+                                                                        const list = html`
                                                                             <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>
-                                                                                    </div>
-                                                                                </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;
-                                                                                                }
-                                                                                            }
-                                                                                        );
+                                                                                    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);
+                                                                                        }
                                                                                     })}"
-                                                                                >
-                                                                                    <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;
+                                                                                        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 {
-                                                                                                data.link = og.link;
-                                                                                                data.title = og.title;
-                                                                                                return false;
+                                                                                                clearAll(dd);
                                                                                             }
-                                                                                        });
-                                                                                    })}"
-                                                                                >
-                                                                                    <i class="fa-solid fa-pencil" style="color:#393939;"></i>
+                                                                                            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>
+                                                                                        </div>
+                                                                                    </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>
                                                                                 </div>
                                                                             </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('');
+                                                                            ${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',
@@ -1674,13 +1643,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
@@ -1722,57 +1691,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);
-                                    })()}
-                                </div>
+                                    return renderItems(vm.link);
+                                })()}
                             </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="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(
                             gvc.event(() => {
                                 cf.goBack();
                             })
-                        )}
-                        ${BgWidget.save(
+                    )}
+                    ${BgWidget.save(
                             gvc.event(() => {
                                 save();
                             }),
                             '確認'
-                        )}
-                    </div>`;
+                    )}
+                </div>`;
             },
             divCreate: {
                 style: `padding-bottom:60px;`,
@@ -1804,4 +1773,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);