ts-glitter 22.5.6 → 22.5.8

package/lowcode/cms-plugin/shopping-product-text.js

@@ -5,6 +5,7 @@ import { Tool } from '../modules/tool.js';
 import { ApiUser } from '../glitter-base/route/user.js';
 import { CheckInput } from '../modules/checkInput.js';
 const html = String.raw;
+const css = String.raw;
 export class ProductText {
     static main(gvc) {
         const glitter = gvc.glitter;
@@ -17,6 +18,7 @@ export class ProductText {
                 data: {
                     content: '',
                     tags: [],
+                    text_size: '10',
                 },
                 status: false,
                 updated_time: '',
@@ -88,33 +90,33 @@ export class ProductText {
                     function getHtml() {
                         return BgWidget.mainCard([
                             html ` <div class="d-flex align-items-center gap-2 ms-1 mb-3">
-                                    <div class="tx_700">商品促銷標籤</div>
-                                    ${BgWidget.questionButton(gvc.event(() => {
+                  <div class="tx_700">商品促銷標籤</div>
+                  ${BgWidget.questionButton(gvc.event(() => {
                                 BgWidget.quesDialog({
                                     gvc,
                                     innerHTML: () => {
                                         return html `
-                                                        <div
-                                                            style="width:100%;border-radius: 10px;background: #393939;display: flex;padding: 10px;flex-direction: column;justify-content: center;align-items: flex-start;gap: 16px;"
-                                                        >
-                                                            <div class="tx_normal text-wrap text-white">
-                                                                顯示於商品卡片上方，用於突出推廣特定商品，例如「熱賣中」、「特價」等，以便消費者快速識別商品狀態，提升購物吸引力。
-                                                            </div>
-                                                            <div class="w-100" style="width: 182.681px;height: 225.135px;flex-shrink: 0;">
-                                                                <img
-                                                                    style="width: 182.681px;height: 225.135px;flex-shrink: 0;"
-                                                                    src="https://d3jnmi1tfjgtti.cloudfront.net/file/122538856/size1440_s*px$_s4s0sbs5s5sbs6se_messageImage_1730260643019.jpg"
-                                                                />
-                                                            </div>
-                                                        </div>
-                                                    `;
+                            <div
+                              style="width:100%;border-radius: 10px;background: #393939;display: flex;padding: 10px;flex-direction: column;justify-content: center;align-items: flex-start;gap: 16px;"
+                            >
+                              <div class="tx_normal text-wrap text-white">
+                                顯示於商品卡片上方，用於突出推廣特定商品，例如「熱賣中」、「特價」等，以便消費者快速識別商品狀態，提升購物吸引力。
+                              </div>
+                              <div class="w-100" style="width: 182.681px;height: 225.135px;flex-shrink: 0;">
+                                <img
+                                  style="width: 182.681px;height: 225.135px;flex-shrink: 0;"
+                                  src="https://d3jnmi1tfjgtti.cloudfront.net/file/122538856/size1440_s*px$_s4s0sbs5s5sbs6se_messageImage_1730260643019.jpg"
+                                />
+                              </div>
+                            </div>
+                          `;
                                     },
                                 });
                             }))}
-                                </div>`,
+                </div>`,
                             BgWidget.tableV3({
                                 gvc: gvc,
-                                getData: (vmi) => {
+                                getData: vmi => {
                                     ApiUser.getPublicConfig('promo-label', 'manager').then((data) => {
                                         vm.labelList = (() => {
                                             return !data.response.value.length ? [] : data.response.value;
@@ -132,10 +134,10 @@ export class ProductText {
                                 filter: [
                                     {
                                         name: '批量刪除',
-                                        event: (checkedData) => {
+                                        event: checkedData => {
                                             dialog.checkYesOrNot({
-                                                text: '確認要刪除已勾選的文本？',
-                                                callback: (bool) => {
+                                                text: '確認要刪除已勾選的促銷標籤？',
+                                                callback: bool => {
                                                     if (bool) {
                                                         vm.labelList = vm.labelList.filter((item) => {
                                                             return checkedData.findIndex((d) => d.id === item.id) === -1;
@@ -144,7 +146,7 @@ export class ProductText {
                                                             key: 'promo-label',
                                                             user_id: 'manager',
                                                             value: vm.labelList,
-                                                        }).then((result) => {
+                                                        }).then(result => {
                                                             if (!result.response.result) {
                                                                 dialog.errorMessage({ text: '設定失敗' });
                                                             }
@@ -159,45 +161,47 @@ export class ProductText {
                                 hiddenPageSplit: true,
                             }),
                             html ` <div
-                                    class="w-100 d-flex justify-content-center align-items-center gap-2 cursor_pointer"
-                                    style="color: #3366BB"
-                                    onclick="${gvc.event(() => {
+                  class="w-100 d-flex justify-content-center align-items-center gap-2 cursor_pointer"
+                  style="color: #3366BB"
+                  onclick="${gvc.event(() => {
                                 vm.data = getExample();
                                 vm.type = 'label_edit';
                             })}"
-                                >
-                                    <div style="font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">新增一個標籤</div>
-                                    <i class="fa-solid fa-plus"></i>
-                                </div>`,
+                >
+                  <div style="font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">
+                    新增一個標籤
+                  </div>
+                  <i class="fa-solid fa-plus"></i>
+                </div>`,
                         ].join(''));
                     }
                     return BgWidget.container([
                         BgWidget.mainCard([
                             html ` <div class="d-flex align-items-center gap-2 ms-1 mb-3">
-                                        <div class="tx_700">商品文本</div>
-                                        ${BgWidget.questionButton(gvc.event(() => {
+                    <div class="tx_700">商品文本</div>
+                    ${BgWidget.questionButton(gvc.event(() => {
                                 BgWidget.quesDialog({
                                     gvc,
                                     innerHTML: () => {
                                         return html `
-                                                            <div
-                                                                style="display: flex;padding: 20px;flex-direction: column;justify-content: center;align-items: flex-start;gap: 16px;border-radius: 10px;background: #393939;"
-                                                            >
-                                                                <div class="tx_normal text-wrap text-white">
-                                                                    可在商品頁面展示多個自訂文本分頁，如商品規格、退換貨政策等，並能自由選擇每個文本的顯示內容是否統一，提升管理靈活性。
-                                                                </div>
-                                                                <div class="w-100 border border-1">
-                                                                    <img src="https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/s348251.png" />
-                                                                </div>
-                                                            </div>
-                                                        `;
+                              <div
+                                style="display: flex;padding: 20px;flex-direction: column;justify-content: center;align-items: flex-start;gap: 16px;border-radius: 10px;background: #393939;"
+                              >
+                                <div class="tx_normal text-wrap text-white">
+                                  可在商品頁面展示多個自訂文本分頁，如商品規格、退換貨政策等，並能自由選擇每個文本的顯示內容是否統一，提升管理靈活性。
+                                </div>
+                                <div class="w-100 border border-1">
+                                  <img src="https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/s348251.png" />
+                                </div>
+                              </div>
+                            `;
                                     },
                                 });
                             }))}
-                                    </div>`,
+                  </div>`,
                             BgWidget.tableV3({
                                 gvc: gvc,
-                                getData: (vmi) => {
+                                getData: vmi => {
                                     ApiUser.getPublicConfig('text-manager', 'manager').then((data) => {
                                         vm.dataList = (() => {
                                             return !data.response.value.length ? [] : data.response.value;
@@ -215,10 +219,10 @@ export class ProductText {
                                 filter: [
                                     {
                                         name: '批量刪除',
-                                        event: (checkedData) => {
+                                        event: checkedData => {
                                             dialog.checkYesOrNot({
                                                 text: '確認要刪除已勾選的文本？',
-                                                callback: (bool) => {
+                                                callback: bool => {
                                                     if (bool) {
                                                         vm.dataList = vm.dataList.filter((item) => {
                                                             return checkedData.findIndex((d) => d.id === item.id) === -1;
@@ -227,7 +231,7 @@ export class ProductText {
                                                             key: 'text-manager',
                                                             user_id: 'manager',
                                                             value: vm.dataList,
-                                                        }).then((result) => {
+                                                        }).then(result => {
                                                             if (!result.response.result) {
                                                                 dialog.errorMessage({ text: '設定失敗' });
                                                             }
@@ -242,16 +246,18 @@ export class ProductText {
                                 hiddenPageSplit: true,
                             }),
                             html ` <div
-                                        class="w-100 d-flex justify-content-center align-items-center gap-2 cursor_pointer"
-                                        style="color: #3366BB"
-                                        onclick="${gvc.event(() => {
+                    class="w-100 d-flex justify-content-center align-items-center gap-2 cursor_pointer"
+                    style="color: #3366BB"
+                    onclick="${gvc.event(() => {
                                 vm.data = getExample();
                                 vm.type = 'text_edit';
                             })}"
-                                    >
-                                        <div style="font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">新增一個文本</div>
-                                        <i class="fa-solid fa-plus"></i>
-                                    </div>`,
+                  >
+                    <div style="font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">
+                      新增一個文本
+                    </div>
+                    <i class="fa-solid fa-plus"></i>
+                  </div>`,
                         ].join('')),
                         html ` <div style="margin-top: 15px;"></div>`,
                         getHtml(),
@@ -287,60 +293,62 @@ export class ProductText {
                     BgWidget.dialog({
                         gvc,
                         title: '編輯標籤',
-                        innerHTML: (gvc) => {
-                            return html `<div>
-                                ${[
-                                html `<div class="tx_normal">標籤名稱</div>`,
+                        innerHTML: gvc => {
+                            return html ` <div>
+                ${[
+                                html ` <div class="tx_normal">標籤名稱</div>`,
                                 BgWidget.editeInput({
                                     gvc,
                                     title: '',
                                     default: item.title,
                                     placeHolder: '',
-                                    callback: (text) => {
+                                    callback: text => {
                                         item.title = text;
                                     },
                                 }),
-                                html `<div class="tx_normal mt-2">字體大小</div>`,
+                                html ` <div class="tx_normal mt-2">字體大小</div>`,
                                 BgWidget.editeInput({
                                     gvc,
                                     title: '',
                                     default: item.font_size,
                                     type: 'number',
                                     placeHolder: '',
-                                    callback: (text) => {
+                                    callback: text => {
                                         item.font_size = text;
                                     },
                                 }),
-                                html `<div class="tx_normal mt-2">字體顏色</div>`,
+                                html ` <div class="tx_normal mt-2">字體顏色</div>`,
                                 EditorElem.colorSelect({
                                     gvc: gvc,
                                     title: '',
-                                    callback: (text) => {
+                                    callback: text => {
                                         item.font_color = text;
                                         gvc.recreateView();
                                     },
                                     def: item.font_color,
                                 }),
-                                html `<div class="tx_normal mt-2">背景顏色</div>`,
+                                html ` <div class="tx_normal mt-2">背景顏色</div>`,
                                 EditorElem.colorSelect({
                                     gvc: gvc,
                                     title: '',
-                                    callback: (text) => {
+                                    callback: text => {
                                         item.font_bgr = text;
                                         gvc.recreateView();
                                     },
                                     def: item.font_bgr,
                                 }),
                             ].join('')}
-                            </div>`;
+              </div>`;
                         },
                         save: {
                             event: () => {
-                                return new Promise((resolve) => {
-                                    const sameTitleItem = vm.data.data.tags.findIndex((tag) => tag.title === item.title);
+                                return new Promise(resolve => {
+                                    const sameTitleItem = vm.data.data.tags.findIndex(tag => tag.title === item.title);
                                     if (sameTitleItem !== index && sameTitleItem !== -1) {
                                         dialog.errorMessage({
-                                            text: html `<div class="text-center">標籤名稱「${item.title}」已存在<br />請更換一個標籤名稱</div>`,
+                                            text: html ` <div class="text-center">
+                        標籤名稱「${item.title}」已存在<br />請更換一個標籤名稱
+                      </div>`,
                                         });
                                         resolve(false);
                                     }
@@ -352,13 +360,13 @@ export class ProductText {
                             },
                         },
                         cancel: {
-                            event: () => new Promise((resolve) => {
+                            event: () => new Promise(resolve => {
                                 item.title = originText;
                                 gvc.notifyDataChange(ids.tag);
                                 resolve(true);
                             }),
                         },
-                        xmark: () => new Promise((resolve) => {
+                        xmark: () => new Promise(resolve => {
                             item.title = originText;
                             gvc.notifyDataChange(ids.tag);
                             resolve(true);
@@ -368,49 +376,48 @@ export class ProductText {
                 if (vm.type === 'text_edit') {
                     return BgWidget.container([
                         html ` <div class="title-container">
-                                ${BgWidget.goBack(gvc.event(() => {
+                ${BgWidget.goBack(gvc.event(() => {
                             vm.type = 'list';
                         }))}
-                                ${BgWidget.title(vm.data.title || '新增文本')}
-                                <div class="flex-fill"></div>
-                            </div>`,
+                ${BgWidget.title(vm.data.title || '新增文本')}
+                <div class="flex-fill"></div>
+              </div>`,
                         BgWidget.container([
                             BgWidget.mainCard(BgWidget.editeInput({
                                 gvc: gvc,
                                 title: '文本標題',
                                 default: vm.data.title,
                                 placeHolder: '請輸入文本標題',
-                                callback: (text) => {
+                                callback: text => {
                                     vm.data.title = text;
                                 },
                             })),
                             BgWidget.container1x2({
-                                html: BgWidget.mainCard(html `<div>
-                                                    <div class="title-container px-0">
-                                                        <div class="tx_normal fw-normal">文本說明</div>
-                                                        <div class="flex-fill"></div>
-                                                        ${BgWidget.aiChatButton({ gvc, select: 'writer' })}
-                                                    </div>
-                                                    <div style="margin: 8px 0">
-                                                        ${gvc.bindView((() => {
+                                html: BgWidget.mainCard(html ` <div>
+                          <div class="title-container px-0">
+                            <div class="tx_normal fw-normal">文本說明</div>
+                            <div class="flex-fill"></div>
+                            ${BgWidget.aiChatButton({ gvc, select: 'writer' })}
+                          </div>
+                          <div style="margin: 8px 0">
+                            ${gvc.bindView((() => {
                                     return {
                                         bind: ids.content,
                                         view: () => {
                                             return BgWidget.richTextEditor({
                                                 gvc: gvc,
                                                 content: generateRichtext(vm.data.data.content) || '',
-                                                callback: (content) => {
+                                                callback: content => {
                                                     vm.data.data.content = originRichtext(content);
                                                 },
-                                                title: '顯示文本編輯'
+                                                title: '顯示文本編輯',
                                             });
                                         },
-                                        onCreate: () => {
-                                        },
+                                        onCreate: () => { },
                                     };
                                 })())}
-                                                    </div>
-                                                </div>`),
+                          </div>
+                        </div>`),
                                 ratio: 70,
                             }, {
                                 html: gvc.bindView((() => {
@@ -419,18 +426,20 @@ export class ProductText {
                                         view: () => {
                                             var _a;
                                             vm.data.data.tags = (_a = vm.data.data.tags) !== null && _a !== void 0 ? _a : [];
-                                            return BgWidget.mainCard(html `<div>
-                                                                    <div class="title-container px-0">
-                                                                        <div class="tx_normal fw-normal">標籤</div>
-                                                                    </div>
-                                                                    <div style="margin: 12px 0">
-                                                                        ${gvc.map(vm.data.data.tags.map((item, index) => {
-                                                return html ` <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px;">
-                                                                                    ${item.title}
-                                                                                    <div class="d-flex gap-3">
-                                                                                        <i
-                                                                                            class="fa-regular fa-copy cursor_pointer"
-                                                                                            onclick="${gvc.event(() => {
+                                            return BgWidget.mainCard(html ` <div>
+                                  <div class="title-container px-0">
+                                    <div class="tx_normal fw-normal">標籤</div>
+                                  </div>
+                                  <div style="margin: 12px 0">
+                                    ${gvc.map(vm.data.data.tags.map((item, index) => {
+                                                return html ` <div
+                                          style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px;"
+                                        >
+                                          ${item.title}
+                                          <div class="d-flex gap-3">
+                                            <i
+                                              class="fa-regular fa-copy cursor_pointer"
+                                              onclick="${gvc.event(() => {
                                                     navigator.clipboard.writeText(targetText(item.title));
                                                     BgWidget.jumpAlert({
                                                         gvc,
@@ -439,22 +448,22 @@ export class ProductText {
                                                         align: 'center',
                                                     });
                                                 })}"
-                                                                                        ></i>
-                                                                                        <i
-                                                                                            class="fa-solid fa-pencil cursor_pointer"
-                                                                                            onclick="${gvc.event(() => {
+                                            ></i>
+                                            <i
+                                              class="fa-solid fa-pencil cursor_pointer"
+                                              onclick="${gvc.event(() => {
                                                     editDocumentTag(index);
                                                 })}"
-                                                                                        ></i>
-                                                                                        <i
-                                                                                            class="fa-regular fa-trash cursor_pointer"
-                                                                                            onclick="${gvc.event(() => {
+                                            ></i>
+                                            <i
+                                              class="fa-regular fa-trash cursor_pointer"
+                                              onclick="${gvc.event(() => {
                                                     if (vm.data.data.content.includes(`@{{${item.key}}}`)) {
                                                         dialog.warningMessage({
-                                                            callback: (bool) => {
+                                                            callback: bool => {
                                                                 if (bool) {
                                                                     const regex = new RegExp(`@{{${item.key}}}`, 'g');
-                                                                    vm.data.data.tags = vm.data.data.tags.filter((tag) => tag.key !== item.key);
+                                                                    vm.data.data.tags = vm.data.data.tags.filter(tag => tag.key !== item.key);
                                                                     vm.data.data.content = vm.data.data.content.replace(regex, '');
                                                                     gvc.notifyDataChange([ids.tag, ids.content]);
                                                                 }
@@ -463,16 +472,16 @@ export class ProductText {
                                                         });
                                                     }
                                                     else {
-                                                        vm.data.data.tags = vm.data.data.tags.filter((tag) => tag.key !== item.key);
+                                                        vm.data.data.tags = vm.data.data.tags.filter(tag => tag.key !== item.key);
                                                         gvc.notifyDataChange([ids.tag, ids.content]);
                                                     }
                                                 })}"
-                                                                                        ></i>
-                                                                                    </div>
-                                                                                </div>`;
+                                            ></i>
+                                          </div>
+                                        </div>`;
                                             }))}
-                                                                    </div>
-                                                                    ${BgWidget.plusButton({
+                                  </div>
+                                  ${BgWidget.plusButton({
                                                 title: '新增一個標籤',
                                                 event: gvc.event(() => {
                                                     const limit = 30;
@@ -485,12 +494,12 @@ export class ProductText {
                                                     }
                                                     function getNextLabel() {
                                                         const existingLabels = vm.data.data.tags.slice();
-                                                        const labels = existingLabels.map((label) => label.title);
+                                                        const labels = existingLabels.map(label => label.title);
                                                         const numbers = Array.from({ length: limit }, (_, i) => {
                                                             return (i + 1).toString().padStart(2, '0');
                                                         });
                                                         for (const n of numbers) {
-                                                            const label = labels.find((label) => label === `${defaultLabel}${n}`);
+                                                            const label = labels.find(label => label === `${defaultLabel}${n}`);
                                                             if (!label)
                                                                 return `${defaultLabel}${n}`;
                                                         }
@@ -507,7 +516,7 @@ export class ProductText {
                                                     editDocumentTag(vm.data.data.tags.length - 1);
                                                 }),
                                             })}
-                                                                </div>`);
+                                </div>`);
                                         },
                                     };
                                 })()),
@@ -516,19 +525,19 @@ export class ProductText {
                         ].join(BgWidget.mbContainer(12))),
                         BgWidget.mbContainer(240),
                         html ` <div class="update-bar-container">
-                                ${vm.data.id.length === 0
+                ${vm.data.id.length === 0
                             ? ''
                             : BgWidget.danger(gvc.event(() => {
                                 dialog.checkYesOrNot({
                                     text: '確認要刪除此文本？',
-                                    callback: (bool) => {
+                                    callback: bool => {
                                         if (bool) {
                                             vm.dataList = vm.dataList.filter((item) => vm.data.id !== item.id);
                                             ApiUser.setPublicConfig({
                                                 key: 'text-manager',
                                                 user_id: 'manager',
                                                 value: vm.dataList,
-                                            }).then((result) => {
+                                            }).then(result => {
                                                 if (!result.response.result) {
                                                     dialog.errorMessage({ text: '設定失敗' });
                                                 }
@@ -538,10 +547,10 @@ export class ProductText {
                                     },
                                 });
                             }))}
-                                ${BgWidget.cancel(gvc.event(() => {
+                ${BgWidget.cancel(gvc.event(() => {
                             vm.type = 'list';
                         }))}
-                                ${BgWidget.save(gvc.event(() => {
+                ${BgWidget.save(gvc.event(() => {
                             try {
                                 if (CheckInput.isEmpty(vm.data.title)) {
                                     dialog.errorMessage({ text: '請輸入文本標題' });
@@ -568,7 +577,7 @@ export class ProductText {
                                     key: 'text-manager',
                                     user_id: 'manager',
                                     value: vm.dataList,
-                                }).then((result) => {
+                                }).then(result => {
                                     dialog.dataLoading({ visible: false });
                                     if (result.response.result) {
                                         dialog.successMessage({ text: '設定成功' });
@@ -587,7 +596,7 @@ export class ProductText {
                                 ``;
                             }
                         }))}
-                            </div>`,
+              </div>`,
                     ].join(''));
                 }
                 if (vm.type === 'label_edit') {
@@ -601,27 +610,31 @@ export class ProductText {
                                 vm.data.data['label_color'] = (_a = vm.data.data['label_color']) !== null && _a !== void 0 ? _a : '#393939';
                                 vm.data.data['text_color'] = (_b = vm.data.data['text_color']) !== null && _b !== void 0 ? _b : '#FFFFFF';
                                 return html `
-                                    <div style="font-size: 16px;font-style: normal;font-weight: 400;color:#393939;">${title}</div>
-                                    <div
-                                        class="d-flex "
-                                        style="padding: 12px 10px;gap: 10px;cursor: pointer;border-radius: 7px;border: 1px solid #DDD;"
-                                        onclick="${gvc.event(() => {
+                  <div style="font-size: 16px;font-style: normal;font-weight: 400;color:#393939;">${title}</div>
+                  <div
+                    class="d-flex "
+                    style="padding: 12px 10px;gap: 10px;cursor: pointer;border-radius: 7px;border: 1px solid #DDD;"
+                    onclick="${gvc.event(() => {
                                     document.querySelector(`.${inputClass}`).click();
                                 })}"
-                                    >
-                                        <input
-                                            class="d-none ${inputClass}"
-                                            value="${vm.data.data[key]}"
-                                            type="color"
-                                            onchange="${gvc.event((e) => {
+                  >
+                    <input
+                      class="d-none ${inputClass}"
+                      value="${vm.data.data[key]}"
+                      type="color"
+                      onchange="${gvc.event(e => {
                                     vm.data.data[key] = e.value;
                                     gvc.notifyDataChange([id, 'drawPreview']);
                                 })}"
-                                        />
-                                        <div style="width: 24px;height: 24px;flex-shrink: 0;border-radius: 3px;background: ${(_c = vm.data.data[key]) !== null && _c !== void 0 ? _c : '#393939'};border: 1px solid #393939;"></div>
-                                        <div style="color: #393939;font-size: 16px; font-weight: 400; ">${(_d = vm.data.data[key]) !== null && _d !== void 0 ? _d : '#393939'}</div>
-                                    </div>
-                                `;
+                    />
+                    <div
+                      style="width: 24px;height: 24px;flex-shrink: 0;border-radius: 3px;background: ${(_c = vm.data.data[key]) !== null && _c !== void 0 ? _c : '#393939'};border: 1px solid #393939;"
+                    ></div>
+                    <div style="color: #393939;font-size: 16px; font-weight: 400; ">
+                      ${(_d = vm.data.data[key]) !== null && _d !== void 0 ? _d : '#393939'}
+                    </div>
+                  </div>
+                `;
                             },
                             divCreate: {
                                 class: 'd-flex flex-column',
@@ -640,104 +653,113 @@ export class ProductText {
                                     {
                                         title: '矩形',
                                         shape: html `
-                                            <svg width="64" height="30" viewBox="0 0 64 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                                <rect y="0.666016" width="64" height="29.3333" rx="1.33333" fill="#D2D2D2" />
-                                            </svg>
-                                        `,
+                      <svg width="64" height="30" viewBox="0 0 64 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect y="0.666016" width="64" height="29.3333" rx="1.33333" fill="#D2D2D2" />
+                      </svg>
+                    `,
                                     },
                                     {
                                         title: '橢圓',
                                         shape: html `
-                                            <svg width="64" height="30" viewBox="0 0 64 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                                <rect y="0.666016" width="64" height="29.3333" rx="14.6667" fill="#D2D2D2" />
-                                            </svg>
-                                        `,
+                      <svg width="64" height="30" viewBox="0 0 64 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect y="0.666016" width="64" height="29.3333" rx="14.6667" fill="#D2D2D2" />
+                      </svg>
+                    `,
                                     },
                                     {
                                         title: '標籤',
                                         shape: html `
-                                            <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
-                                                <path
-                                                    fill-rule="evenodd"
-                                                    clip-rule="evenodd"
-                                                    d="M14.0064 19C13.6114 19 13.2366 19.1752 12.9833 19.4784L0.310174 34.6451C-0.103392 35.14 -0.103391 35.86 0.310175 36.3549L12.9833 51.5216C13.2366 51.8248 13.6114 52 14.0064 52H70.2625C70.9988 52 71.5958 51.403 71.5958 50.6667V20.3333C71.5958 19.597 70.9988 19 70.2625 19H14.0064ZM12.3281 39C14.2611 39 15.8281 37.433 15.8281 35.5C15.8281 33.567 14.2611 32 12.3281 32C10.3951 32 8.82812 33.567 8.82812 35.5C8.82812 37.433 10.3951 39 12.3281 39Z"
-                                                    fill="#D9D9D9"
-                                                />
-                                            </svg>
-                                        `,
+                      <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M14.0064 19C13.6114 19 13.2366 19.1752 12.9833 19.4784L0.310174 34.6451C-0.103392 35.14 -0.103391 35.86 0.310175 36.3549L12.9833 51.5216C13.2366 51.8248 13.6114 52 14.0064 52H70.2625C70.9988 52 71.5958 51.403 71.5958 50.6667V20.3333C71.5958 19.597 70.9988 19 70.2625 19H14.0064ZM12.3281 39C14.2611 39 15.8281 37.433 15.8281 35.5C15.8281 33.567 14.2611 32 12.3281 32C10.3951 32 8.82812 33.567 8.82812 35.5C8.82812 37.433 10.3951 39 12.3281 39Z"
+                          fill="#D9D9D9"
+                        />
+                      </svg>
+                    `,
                                     },
                                     {
                                         title: '彩帶(橫)',
                                         shape: html `
-                                            <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
-                                                <path
-                                                    d="M0 21C0 20.1716 0.671573 19.5 1.5 19.5H68.4945C69.8141 19.5 70.4907 21.0812 69.5795 22.0357L57.2386 34.9643C56.6853 35.5439 56.6853 36.4561 57.2386 37.0357L69.5795 49.9643C70.4907 50.9188 69.8141 52.5 68.4945 52.5H1.5C0.671571 52.5 0 51.8284 0 51V21Z"
-                                                    fill="#D9D9D9"
-                                                />
-                                            </svg>
-                                        `,
+                      <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
+                        <path
+                          d="M0 21C0 20.1716 0.671573 19.5 1.5 19.5H68.4945C69.8141 19.5 70.4907 21.0812 69.5795 22.0357L57.2386 34.9643C56.6853 35.5439 56.6853 36.4561 57.2386 37.0357L69.5795 49.9643C70.4907 50.9188 69.8141 52.5 68.4945 52.5H1.5C0.671571 52.5 0 51.8284 0 51V21Z"
+                          fill="#D9D9D9"
+                        />
+                      </svg>
+                    `,
                                     },
                                     {
                                         title: '彩帶(直)',
                                         shape: html `
-                                            <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
-                                                <path
-                                                    d="M50.5 -6.55671e-08C51.3284 -2.93554e-08 52 0.671573 52 1.5L52 68.4945C52 69.8141 50.4188 70.4907 49.4643 69.5795L36.5357 57.2386C35.9561 56.6853 35.0439 56.6853 34.4643 57.2386L21.5357 69.5795C20.5812 70.4907 19 69.8141 19 68.4945L19 1.5C19 0.67157 19.6716 -1.41312e-06 20.5 -1.37691e-06L50.5 -6.55671e-08Z"
-                                                    fill="#D9D9D9"
-                                                />
-                                            </svg>
-                                        `,
+                      <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
+                        <path
+                          d="M50.5 -6.55671e-08C51.3284 -2.93554e-08 52 0.671573 52 1.5L52 68.4945C52 69.8141 50.4188 70.4907 49.4643 69.5795L36.5357 57.2386C35.9561 56.6853 35.0439 56.6853 34.4643 57.2386L21.5357 69.5795C20.5812 70.4907 19 69.8141 19 68.4945L19 1.5C19 0.67157 19.6716 -1.41312e-06 20.5 -1.37691e-06L50.5 -6.55671e-08Z"
+                          fill="#D9D9D9"
+                        />
+                      </svg>
+                    `,
                                     },
                                     {
                                         title: '圓形',
                                         shape: html `
-                                            <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
-                                                <circle cx="37.333" cy="36" r="28" fill="#D9D9D9" />
-                                            </svg>
-                                        `,
+                      <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
+                        <circle cx="37.333" cy="36" r="28" fill="#D9D9D9" />
+                      </svg>
+                    `,
                                     },
                                     {
                                         title: '梯形',
                                         shape: html `
-                                            <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
-                                                <path d="M33.6632 4H68L4 68V33.6632L33.6632 4Z" fill="#D9D9D9" />
-                                            </svg>
-                                        `,
+                      <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
+                        <path d="M33.6632 4H68L4 68V33.6632L33.6632 4Z" fill="#D9D9D9" />
+                      </svg>
+                    `,
                                     },
                                 ];
                                 vm.data.data.shape = (_a = vm.data.data.shape) !== null && _a !== void 0 ? _a : '矩形';
                                 return html `
-                                    <div style="font-size: 16px;font-weight: 400;">${title}</div>
-                                    <div style="font-size: 14px;font-weight: 400;color: #8D8D8D;">梯形與圓形字數建議不要超過 3 個</div>
-                                    ${gvc.bindView({
+                  <div style="font-size: 16px;font-weight: 400;">${title}</div>
+                  <div style="font-size: 14px;font-weight: 400;color: #8D8D8D;">梯形與圓形字數建議不要超過 3 個</div>
+                  ${gvc.bindView({
                                     bind: 'shape',
                                     view: () => {
                                         return shapeArray
-                                            .map((data) => {
+                                            .map(data => {
                                             return html `
-                                                        <div style="display: flex;flex-direction: column;align-items: center;gap: 8px;">
-                                                            <div class="d-flex align-items-center justify-content-center" style="width: 80px;height: 80px;">${data.shape}</div>
-                                                            <div
-                                                                class="d-flex align-items-center justify-content-center"
-                                                                style="font-size: 16px;font-style: normal;font-weight: 400;gap: 6px;cursor:pointer;"
-                                                                onclick="${gvc.event(() => {
+                            <div style="display: flex;flex-direction: column;align-items: center;gap: 8px;">
+                              <div
+                                class="d-flex align-items-center justify-content-center"
+                                style="width: 80px;height: 80px;"
+                              >
+                                ${data.shape}
+                              </div>
+                              <div
+                                class="d-flex align-items-center justify-content-center"
+                                style="font-size: 16px;font-style: normal;font-weight: 400;gap: 6px;cursor:pointer;"
+                                onclick="${gvc.event(() => {
                                                 vm.data.data.shape = data.title;
                                                 gvc.notifyDataChange(['shape', 'drawPreview']);
                                             })}"
-                                                            >
-                                                                ${vm.data.data.shape == data.title
-                                                ? html `<div style="width: 16px;height: 16px;border-radius: 20px;border:4px solid #393939;"></div>`
-                                                : html `<div style="width: 16px;height: 16px;border-radius: 20px;border: 1px solid #DDD;background: #FFF;"></div>`}
-                                                                ${data.title}
-                                                            </div>
-                                                        </div>
-                                                    `;
+                              >
+                                ${vm.data.data.shape == data.title
+                                                ? html ` <div
+                                      style="width: 16px;height: 16px;border-radius: 20px;border:4px solid #393939;"
+                                    ></div>`
+                                                : html ` <div
+                                      style="width: 16px;height: 16px;border-radius: 20px;border: 1px solid #DDD;background: #FFF;"
+                                    ></div>`}
+                                ${data.title}
+                              </div>
+                            </div>
+                          `;
                                         })
                                             .join('');
                                     },
                                     divCreate: { class: 'w-100 d-flex flex-wrap', style: `gap:42px;` },
                                 })}
-                                `;
+                `;
                             },
                             divCreate: {
                                 class: 'd-flex flex-column',
@@ -759,438 +781,759 @@ export class ProductText {
                                     {
                                         title: '矩形',
                                         shape: html `
-                                            <div
-                                                style="${labelPosition == '左上' || labelPosition == '右上' ? 'padding-top:' : 'padding-bottom:'}10px; ${labelPosition == '左上' ||
-                                            labelPosition == '左下'
+                      <div
+                        style="${labelPosition == '左上' || labelPosition == '右上'
+                                            ? 'padding-top:'
+                                            : 'padding-bottom:'}10px; ${labelPosition == '左上' || labelPosition == '左下'
                                             ? 'padding-left:'
                                             : 'padding-right:'}10px;"
-                                            >
-                                                <div style="min-width: 49px;height:24px;background: ${color};position: relative;padding:5px 9px;">
-                                                    <div style="color: ${vm.data.data.text_color};font-size: 10px;font-weight: 400;letter-spacing: 0.4px;">${text}</div>
-                                                </div>
-                                            </div>
-                                        `,
+                      >
+                        <div style="min-width: 49px;background: ${color};position: relative;padding:5px 9px;">
+                          <div
+                            class="d-flex align-items-center"
+                            style="color: ${vm.data.data.text_color};font-size: ${vm.data.data
+                                            .text_size}px;font-weight: 400;letter-spacing: 0.4px;"
+                          >
+                            ${text}
+                          </div>
+                        </div>
+                      </div>
+                    `,
                                     },
                                     {
                                         title: '橢圓',
                                         shape: html `
-                                            <div
-                                                style="${labelPosition == '左上' || labelPosition == '右上' ? 'padding-top:' : 'padding-bottom:'}10px; ${labelPosition == '左上' ||
-                                            labelPosition == '左下'
+                      <div
+                        style="${labelPosition == '左上' || labelPosition == '右上'
+                                            ? 'padding-top:'
+                                            : 'padding-bottom:'}10px; ${labelPosition == '左上' || labelPosition == '左下'
                                             ? 'padding-left:'
                                             : 'padding-right:'}10px;"
-                                            >
-                                                <div style="min-width: 59px;height:24px;background: ${color};border-radius: 32px;padding:5px 14px;">
-                                                    <div style="color: ${vm.data.data.text_color};font-size: 10px;font-weight: 400;letter-spacing: 0.4px;">${text}</div>
-                                                </div>
-                                            </div>
-                                        `,
+                      >
+                        <div style="min-width: 59px;background: ${color};border-radius: 32px;padding:5px 14px;">
+                          <div
+                            class="d-flex align-items-center"
+                            style="color: ${vm.data.data.text_color};font-size: ${vm.data.data
+                                            .text_size}px;font-weight: 400;letter-spacing: 0.4px;"
+                          >
+                            ${text}
+                          </div>
+                        </div>
+                      </div>
+                    `,
                                     },
                                     {
                                         title: '標籤',
                                         shape: html `
-                                            <div
-                                                style="${labelPosition == '左上' || labelPosition == '右上' ? 'padding-top:' : 'padding-bottom:'}9.57px; ${labelPosition == '左上' ||
-                                            labelPosition == '左下'
+                      <svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                              d="M13.9543 22C13.5891 22 13.2398 22.1499 12.9881 22.4146L0.468637 35.5812C-0.0207961 36.096 -0.0207953 36.904 0.468638 37.4188L12.9881 50.5854C13.2398 50.8501 13.5891 51 13.9543 51H70.2617C70.9981 51 71.595 50.403 71.595 49.6667V23.3333C71.595 22.597 70.9981 22 70.2617 22H13.9543ZM12.3271 40C14.2601 40 15.8271 38.433 15.8271 36.5C15.8271 34.567 14.2601 33 12.3271 33C10.3942 33 8.82715 34.567 8.82715 36.5C8.82715 38.433 10.3942 40 12.3271 40Z"
+                              fill="${color}"
+                        //>
+                        <text x="50%" y="50%" font-family="Noto Sans', sans-serif " text-anchor="middle"
+                              font-size="${vm.data.data.text_size}" fill="${vm.data.data.text_color}"
+                              dominant-baseline="central">${text}
+                        </text>
+                      </svg>
+
+                    `,
+                                        shape2: html `
+                      <div
+                        style="${labelPosition == '左上' || labelPosition == '右上'
+                                            ? 'padding-top:'
+                                            : 'padding-bottom:'}9.57px; ${labelPosition == '左上' || labelPosition == '左下'
                                             ? 'padding-left:'
                                             : 'padding-right:'}9.11px; position: relative;"
-                                            >
-                                                <div
-                                                    style="position: absolute;right: ${labelPosition == '左上' || labelPosition == '左下' ? '9' : '19'}px;top: ${labelPosition == '左上' ||
-                                            labelPosition == '右上'
+                      >
+                        <div
+                          class="d-flex align-items-center"
+                          style="position: absolute;right: ${labelPosition == '左上' || labelPosition == '左下'
+                                            ? '9'
+                                            : '19'}px;top: ${labelPosition == '左上' || labelPosition == '右上'
                                             ? '17.5'
-                                            : '7.5'}px;font-size: 10px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data.text_color}"
-                                                >
-                                                    ${text}
-                                                </div>
-                                                <svg  width="72" height="32" viewBox="0 0 69 24" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
-                                                    <path
-                                                        fill-rule="evenodd"
-                                                        clip-rule="evenodd"
-                                                        d="M14.4492 0C14.0593 0 13.6889 0.170677 13.4356 0.467093L4.31972 11.1338C3.89342 11.6326 3.89343 12.3674 4.31972 12.8662L13.4356 23.5329C13.6889 23.8293 14.0593 24 14.4492 24H66.2461C66.9825 24 67.5794 23.403 67.5794 22.6667V1.33333C67.5794 0.596954 66.9825 0 66.2461 0H14.4492ZM16.1178 15C17.7938 15 19.1523 13.6569 19.1523 12C19.1523 10.3431 17.7938 9 16.1178 9C14.4419 9 13.0833 10.3431 13.0833 12C13.0833 13.6569 14.4419 15 16.1178 15Z"
-                                                        fill="${color}"
-                                                    />
-                                                </svg>
-                                            </div>
-                                        `,
+                                            : '7.5'}px;font-size: ${vm.data.data
+                                            .text_size}px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data.text_color}"
+                        >
+                          ${text}
+                        </div>
+                        <svg
+                          width="72"
+                          height="32"
+                          viewBox="0 0 69 24"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                          preserveAspectRatio="none"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M14.4492 0C14.0593 0 13.6889 0.170677 13.4356 0.467093L4.31972 11.1338C3.89342 11.6326 3.89343 12.3674 4.31972 12.8662L13.4356 23.5329C13.6889 23.8293 14.0593 24 14.4492 24H66.2461C66.9825 24 67.5794 23.403 67.5794 22.6667V1.33333C67.5794 0.596954 66.9825 0 66.2461 0H14.4492ZM16.1178 15C17.7938 15 19.1523 13.6569 19.1523 12C19.1523 10.3431 17.7938 9 16.1178 9C14.4419 9 13.0833 10.3431 13.0833 12C13.0833 13.6569 14.4419 15 16.1178 15Z"
+                            fill="${color}"
+                          />
+                        </svg>
+                      </div>
+                    `,
                                     },
                                     {
                                         title: '彩帶(橫)',
                                         shape: html `
-                                            <div
-                                                style="${labelPosition == '左上' || labelPosition == '右上' ? 'padding-top:' : 'padding-bottom:'}9.57px; ${labelPosition == '左上' ||
-                                            labelPosition == '左下'
+                      <div style="padding-left:9.11px;">
+                        <svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path
+                            d="M0 23.5C0 22.6716 0.671573 22 1.5 22H68.156C69.5225 22 70.1773 23.678 69.172 24.6035L57.4487 35.3965C56.8033 35.9906 56.8033 37.0094 57.4487 37.6035L69.172 48.3965C70.1773 49.322 69.5225 51 68.156 51H1.5C0.671571 51 0 50.3284 0 49.5V23.5Z"
+                            fill="${vm.data.data.label_color}"
+                          //>
+                          <text x="30%" y="50%" font-family="Noto Sans', sans-serif " text-anchor="middle"
+                                font-size="${vm.data.data.text_size}" fill="${vm.data.data.text_color}"
+                                dominant-baseline="central">${text}
+                          </text>
+                        </svg>
+                      </div>
+                    `,
+                                        shape1: html `
+                      <div
+                        style="${labelPosition == '左上' || labelPosition == '右上'
+                                            ? 'padding-top:'
+                                            : 'padding-bottom:'}9.57px; ${labelPosition == '左上' || labelPosition == '左下'
                                             ? 'padding-left:'
                                             : 'padding-right:'}9.11px;position: relative;"
-                                            >
-                                                <div
-                                                    style="position: absolute;left: ${labelPosition == '左上' || labelPosition == '左下' ? '21' : '11'}px;top: ${labelPosition == '左上' ||
-                                            labelPosition == '右上'
+                      >
+                        <div
+                          class="d-flex align-items-center"
+                          style="position: absolute;left: ${labelPosition == '左上' || labelPosition == '左下'
+                                            ? '21'
+                                            : '11'}px;top: ${labelPosition == '左上' || labelPosition == '右上'
                                             ? '13.5'
-                                            : '3.5'}px;font-size: 10px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data.text_color}"
-                                                >
-                                                    ${text}
-                                                </div>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="71" height="32" viewBox="0 0 71 32" fill="none">
-                                                    <g filter="url(#filter0_d_14130_223497)">
-                                                        <path
-                                                            d="M4.54297 1.5C4.54297 0.671573 5.21454 0 6.04297 0H65.3404C66.6122 0 67.3069 1.48329 66.4927 2.46028L59.3432 11.0397C58.8796 11.596 58.8796 12.404 59.3432 12.9603L66.4927 21.5397C67.3069 22.5167 66.6122 24 65.3404 24H6.04297C5.21454 24 4.54297 23.3284 4.54297 22.5V1.5Z"
-                                                            fill="${color}"
-                                                        />
-                                                    </g>
-                                                </svg>
-                                            </div>
-                                        `,
+                                            : '3.5'}px;font-size: ${vm.data.data
+                                            .text_size}px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data.text_color}"
+                        >
+                          ${text}
+                        </div>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="71" height="32" viewBox="0 0 71 32" fill="none">
+                          <g filter="url(#filter0_d_14130_223497)">
+                            <path
+                              d="M4.54297 1.5C4.54297 0.671573 5.21454 0 6.04297 0H65.3404C66.6122 0 67.3069 1.48329 66.4927 2.46028L59.3432 11.0397C58.8796 11.596 58.8796 12.404 59.3432 12.9603L66.4927 21.5397C67.3069 22.5167 66.6122 24 65.3404 24H6.04297C5.21454 24 4.54297 23.3284 4.54297 22.5V1.5Z"
+                              fill="${color}"
+                            />
+                          </g>
+                        </svg>
+                      </div>
+                    `,
                                     },
                                     {
                                         title: '彩帶(直)',
                                         shape: html `
-                                            <div
-                                                style="${labelPosition == '左上' || labelPosition == '右上' ? 'padding-top:' : 'padding-bottom:'} 9.57px;${labelPosition == '左上' ||
-                                            labelPosition == '左下'
+                      <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
+                        <path
+                          d="M48.5 -6.55671e-08C49.3284 -2.93554e-08 50 0.671573 50 1.5L50 68.156C50 69.5225 48.3219 70.1773 47.3964 69.172L36.6035 57.4487C36.0094 56.8033 34.9906 56.8033 34.3964 57.4487L23.6035 69.172C22.678 70.1773 21 69.5225 21 68.156L21 1.5C21 0.67157 21.6716 -1.23827e-06 22.5 -1.20206e-06L48.5 -6.55671e-08Z"
+                          fill="${vm.data.data.label_color}"
+                        />
+                        <text
+                          x="50%"
+                          y="30%"
+                          font-family="Noto Sans', sans-serif "
+                          text-anchor="middle"
+                          font-size="${vm.data.data.text_size}"
+                          fill="${vm.data.data.text_color}"
+                          dominant-baseline="central"
+                          style="writing-mode: vertical-rl;"
+                        >
+                          ${text}
+                        </text>
+                      </svg>
+                    `,
+                                        shape1: html `
+                      <div
+                        style="${labelPosition == '左上' || labelPosition == '右上'
+                                            ? 'padding-top:'
+                                            : 'padding-bottom:'} 9.57px;${labelPosition == '左上' || labelPosition == '左下'
                                             ? 'padding-left:'
                                             : 'padding-right:'} 9.11px;position: relative;"
-                                            >
-                                                <div
-                                                    style="position: absolute;left: ${labelPosition == '左上' || labelPosition == '左下' ? '17.5' : '7.5'}px;top: ${labelPosition == '左上' ||
-                                            labelPosition == '右上'
+                      >
+                        <div
+                          style="position: absolute;left: ${labelPosition == '左上' || labelPosition == '左下'
                                             ? '17.5'
-                                            : '7.5'}px;font-size: 10px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data.text_color};writing-mode: vertical-lr;"
-                                                >
-                                                    ${text}
-                                                </div>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="33" height="71" viewBox="0 0 33 71" fill="none">
-                                                    <g filter="url(#filter0_d_14130_223503)">
-                                                        <path
-                                                            d="M27.043 -0.00195319C27.8714 -0.00195315 28.543 0.66962 28.543 1.49805L28.543 60.7955C28.543 62.0672 27.0597 62.762 26.0827 61.9478L17.5032 54.7983C16.947 54.3347 16.139 54.3347 15.5827 54.7983L7.00324 61.9478C6.02625 62.762 4.54297 62.0672 4.54297 60.7955L4.54297 1.49805C4.54297 0.669619 5.21454 -0.00195414 6.04297 -0.00195411L27.043 -0.00195319Z"
-                                                            fill="${color}"
-                                                        />
-                                                    </g>
-                                                    <defs>
-                                                        <filter
-                                                            id="filter0_d_14130_223503"
-                                                            x="0.542969"
-                                                            y="-0.00195312"
-                                                            width="32"
-                                                            height="70.3008"
-                                                            filterUnits="userSpaceOnUse"
-                                                            color-interpolation-filters="sRGB"
-                                                        >
-                                                            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-                                                            <feOffset dy="4" />
-                                                            <feGaussianBlur stdDeviation="2" />
-                                                            <feComposite in2="hardAlpha" operator="out" />
-                                                            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-                                                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14130_223503" />
-                                                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14130_223503" result="shape" />
-                                                        </filter>
-                                                    </defs>
-                                                </svg>
-                                            </div>
-                                        `,
+                                            : '7.5'}px;top: ${labelPosition == '左上' || labelPosition == '右上'
+                                            ? '17.5'
+                                            : '7.5'}px;font-size: ${vm.data.data
+                                            .text_size}px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data
+                                            .text_color};writing-mode: vertical-lr;"
+                        >
+                          ${text}
+                        </div>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="33" height="71" viewBox="0 0 33 71" fill="none">
+                          <g filter="url(#filter0_d_14130_223503)">
+                            <path
+                              d="M27.043 -0.00195319C27.8714 -0.00195315 28.543 0.66962 28.543 1.49805L28.543 60.7955C28.543 62.0672 27.0597 62.762 26.0827 61.9478L17.5032 54.7983C16.947 54.3347 16.139 54.3347 15.5827 54.7983L7.00324 61.9478C6.02625 62.762 4.54297 62.0672 4.54297 60.7955L4.54297 1.49805C4.54297 0.669619 5.21454 -0.00195414 6.04297 -0.00195411L27.043 -0.00195319Z"
+                              fill="${color}"
+                            />
+                          </g>
+                          <defs>
+                            <filter
+                              id="filter0_d_14130_223503"
+                              x="0.542969"
+                              y="-0.00195312"
+                              width="32"
+                              height="70.3008"
+                              filterUnits="userSpaceOnUse"
+                              color-interpolation-filters="sRGB"
+                            >
+                              <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                              <feColorMatrix
+                                in="SourceAlpha"
+                                type="matrix"
+                                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                                result="hardAlpha"
+                              />
+                              <feOffset dy="4" />
+                              <feGaussianBlur stdDeviation="2" />
+                              <feComposite in2="hardAlpha" operator="out" />
+                              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+                              <feBlend
+                                mode="normal"
+                                in2="BackgroundImageFix"
+                                result="effect1_dropShadow_14130_223503"
+                              />
+                              <feBlend
+                                mode="normal"
+                                in="SourceGraphic"
+                                in2="effect1_dropShadow_14130_223503"
+                                result="shape"
+                              />
+                            </filter>
+                          </defs>
+                        </svg>
+                      </div>
+                    `,
                                     },
                                     {
                                         title: '圓形',
                                         shape: html `
-                                            <div
-                                                style="${labelPosition == '左上' || labelPosition == '右上' ? 'padding-top:' : 'padding-bottom:'} 9.57px;${labelPosition == '左上' ||
-                                            labelPosition == '左下'
+                      <div
+                        style="${labelPosition == '左上' || labelPosition == '右上'
+                                            ? 'padding-top:'
+                                            : 'padding-bottom:'} 9.57px;${labelPosition == '左上' || labelPosition == '左下'
                                             ? 'padding-left:'
                                             : 'padding-right:'} 9.11px;"
-                                            >
-                                                <div
-                                                    class=" align-items-center justify-content-center"
-                                                    style="display: inline-flex; width: 46px;height: 46px;flex-shrink: 0;background-color: ${color};border-radius: 50%;color: ${vm.data.data
-                                            .text_color};font-size: 10px;font-weight: 400;letter-spacing: 0.4px;"
-                                                >
-                                                    ${text}
-                                                </div>
-                                            </div>
-                                        `,
+                      >
+                        <div
+                          class=" align-items-center justify-content-center"
+                          style="display: inline-flex; width: 46px;height: 46px;flex-shrink: 0;background-color: ${color};border-radius: 50%;color: ${vm
+                                            .data.data.text_color};font-size: ${vm.data.data
+                                            .text_size}px;font-weight: 400;letter-spacing: 0.4px;"
+                        >
+                          ${text}
+                        </div>
+                      </div>
+                    `,
                                     },
                                     {
                                         title: '梯形',
                                         shape: (() => {
+                                            console.log(vm.data.data.position);
+                                            gvc.addStyle(css `
+                        .corner {
+                          width: 58px;
+                          height: 58px; 
+                          background-color: ${vm.data.data.label_color}; 
+                          color: ${vm.data.data.text_color}; 
+                          box-sizing: border-box; 
+                          display: flex;
+                          justify-content: center;
+                          align-items: center;
+                          text-align: center;
+                          font-size: ${vm.data.data.text_size}px;
+                        }
+
+                        .corner-左上 {
+                          top: 0;
+                          left: 0;
+                          clip-path: polygon(50% 0, 100% 0, 0 100%, 0 50%);
+                        }
+                        .corner-左上 p{
+                          transform: rotate(-45deg) translate(-50%, -50%);
+                          position: absolute;
+                          left: 41%;
+                          top: 18%;
+                        }
+
+                        .corner-左下 {
+                          top: 0;
+                          left: 0;
+                          clip-path: polygon(0 0, 100% 100%, 50% 100%, 0 50%);
+                        }
+                        .corner-左下 p{
+                          transform: rotate(45deg) translate(-50%, -50%);
+                          position: absolute;
+                          left: 22%;
+                          bottom: 0;
+                        }
+
+                        .corner-右上 {
+                          top: 0;
+                          left: 0;
+                          clip-path: polygon(0 0, 100% 100%, 100% 50%, 50% 0);
+                        }
+                        .corner-右上 p{
+                          transform: rotate(45deg) translate(-50%, -50%);
+                          position: absolute;
+                          left: 46%;
+                          bottom: 23%;
+                        }
+                        .corner-右下 {
+                          top: 0;
+                          left: 0;
+                          clip-path: polygon(0 100%, 50% 100%, 100% 50%, 100% 0);
+                        }
+                        .corner-右下 p{
+                          transform: rotate(-45deg);
+                          position: absolute;
+                          left: 40%;
+                          bottom: 23%;
+                        }
+                        
+                      `);
+                                            return html `<div class="corner corner-${vm.data.data.position} position-relative">
+                        <p class="m-0">${text}</p>
+                      </div>`;
+                                        })(),
+                                        shape2: html `
+                      <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+                        <path d="M29.6632 0H64L0 64V29.6632L29.6632 0Z" fill="${vm.data.data.label_color}" />
+                        <text
+                          x="50%"
+                          y="30%"
+                          font-family="Noto Sans', sans-serif "
+                          text-anchor="middle"
+                          font-size="${vm.data.data.text_size}"
+                          fill="${vm.data.data.text_color}"
+                          dominant-baseline="central"
+                          style="writing-mode: vertical-rl;"
+                        >
+                          ${text}
+                        </text>
+                      </svg>
+                    `,
+                                        shape1: (() => {
                                             switch (labelPosition) {
                                                 case '左上': {
                                                     return html `
-                                                        <div style="display: inline-block;position: relative;">
-                                                            <div
-                                                                style="position: absolute;left: 5px;top: 13.5px;font-size: 10px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data
+                            <div style="display: inline-block;position: relative;">
+                              <div
+                                style="position: absolute;left: 5px;top: 13.5px;font-size: ${vm.data.data
+                                                        .text_size}px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data
                                                         .text_color};transform: rotate(-44.938deg);"
-                                                            >
-                                                                ${text}
-                                                            </div>
-                                                            <svg xmlns="http://www.w3.org/2000/svg" width="62" height="66" viewBox="0 0 62 66" fill="none">
-                                                                <g filter="url(#filter0_d_14130_126851)">
-                                                                    <path d="M26.8833 0H58.001L0.000976562 58V26.8823L26.8833 0Z" fill="${color}" />
-                                                                </g>
-                                                                <defs>
-                                                                    <filter
-                                                                        id="filter0_d_14130_126851"
-                                                                        x="-3.99902"
-                                                                        y="0"
-                                                                        width="66"
-                                                                        height="66"
-                                                                        filterUnits="userSpaceOnUse"
-                                                                        color-interpolation-filters="sRGB"
-                                                                    >
-                                                                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-                                                                        <feOffset dy="4" />
-                                                                        <feGaussianBlur stdDeviation="2" />
-                                                                        <feComposite in2="hardAlpha" operator="out" />
-                                                                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-                                                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14130_126851" />
-                                                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14130_126851" result="shape" />
-                                                                    </filter>
-                                                                </defs>
-                                                            </svg>
-                                                        </div>
-                                                    `;
+                              >
+                                ${text}
+                              </div>
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="62"
+                                height="66"
+                                viewBox="0 0 62 66"
+                                fill="none"
+                              >
+                                <g filter="url(#filter0_d_14130_126851)">
+                                  <path d="M26.8833 0H58.001L0.000976562 58V26.8823L26.8833 0Z" fill="${color}" />
+                                </g>
+                                <defs>
+                                  <filter
+                                    id="filter0_d_14130_126851"
+                                    x="-3.99902"
+                                    y="0"
+                                    width="66"
+                                    height="66"
+                                    filterUnits="userSpaceOnUse"
+                                    color-interpolation-filters="sRGB"
+                                  >
+                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                                    <feColorMatrix
+                                      in="SourceAlpha"
+                                      type="matrix"
+                                      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                                      result="hardAlpha"
+                                    />
+                                    <feOffset dy="4" />
+                                    <feGaussianBlur stdDeviation="2" />
+                                    <feComposite in2="hardAlpha" operator="out" />
+                                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+                                    <feBlend
+                                      mode="normal"
+                                      in2="BackgroundImageFix"
+                                      result="effect1_dropShadow_14130_126851"
+                                    />
+                                    <feBlend
+                                      mode="normal"
+                                      in="SourceGraphic"
+                                      in2="effect1_dropShadow_14130_126851"
+                                      result="shape"
+                                    />
+                                  </filter>
+                                </defs>
+                              </svg>
+                            </div>
+                          `;
                                                 }
                                                 case '左下': {
                                                     return html `
-                                                        <div style="display: inline-block;position: relative;min-height:79px;">
-                                                            <div
-                                                                style="position: absolute;left: 12px;bottom: 23px;font-size: 10px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data
+                            <div style="display: inline-block;position: relative;min-height:79px;">
+                              <div
+                                style="position: absolute;left: 12px;bottom: 23px;font-size: ${vm.data.data
+                                                        .text_size}px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data
                                                         .text_color};transform: rotate(45deg);"
-                                                            >
-                                                                ${text}
-                                                            </div>
-                                                            <svg xmlns="http://www.w3.org/2000/svg" width="79" height="79" viewBox="0 0 58 58" fill="none">
-                                                                <g filter="url(#filter0_d_14378_119252)">
-                                                                    <path d="M26.8823 58H58L0 0V31.1177L26.8823 58Z" fill="${color}" />
-                                                                </g>
-                                                                <defs>
-                                                                    <filter
-                                                                        id="filter0_d_14378_119252"
-                                                                        x="-4"
-                                                                        y="0"
-                                                                        width="66"
-                                                                        height="66"
-                                                                        filterUnits="userSpaceOnUse"
-                                                                        color-interpolation-filters="sRGB"
-                                                                    >
-                                                                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-                                                                        <feOffset dy="4" />
-                                                                        <feGaussianBlur stdDeviation="2" />
-                                                                        <feComposite in2="hardAlpha" operator="out" />
-                                                                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-                                                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14378_119252" />
-                                                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14378_119252" result="shape" />
-                                                                    </filter>
-                                                                </defs>
-                                                            </svg>
-                                                        </div>
-                                                    `;
+                              >
+                                ${text}
+                              </div>
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="79"
+                                height="79"
+                                viewBox="0 0 58 58"
+                                fill="none"
+                              >
+                                <g filter="url(#filter0_d_14378_119252)">
+                                  <path d="M26.8823 58H58L0 0V31.1177L26.8823 58Z" fill="${color}" />
+                                </g>
+                                <defs>
+                                  <filter
+                                    id="filter0_d_14378_119252"
+                                    x="-4"
+                                    y="0"
+                                    width="66"
+                                    height="66"
+                                    filterUnits="userSpaceOnUse"
+                                    color-interpolation-filters="sRGB"
+                                  >
+                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                                    <feColorMatrix
+                                      in="SourceAlpha"
+                                      type="matrix"
+                                      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                                      result="hardAlpha"
+                                    />
+                                    <feOffset dy="4" />
+                                    <feGaussianBlur stdDeviation="2" />
+                                    <feComposite in2="hardAlpha" operator="out" />
+                                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+                                    <feBlend
+                                      mode="normal"
+                                      in2="BackgroundImageFix"
+                                      result="effect1_dropShadow_14378_119252"
+                                    />
+                                    <feBlend
+                                      mode="normal"
+                                      in="SourceGraphic"
+                                      in2="effect1_dropShadow_14378_119252"
+                                      result="shape"
+                                    />
+                                  </filter>
+                                </defs>
+                              </svg>
+                            </div>
+                          `;
                                                 }
                                                 case '右上': {
                                                     return html `
-                                                        <div style="display: inline-block;position: relative;min-height:79px;">
-                                                            <div
-                                                                style="position: absolute;right: 5px;top: 13.5px;font-size: 10px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data
+                            <div style="display: inline-block;position: relative;min-height:79px;">
+                              <div
+                                style="position: absolute;right: 5px;top: 13.5px;font-size: ${vm.data.data
+                                                        .text_size}px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data
                                                         .text_color};transform: rotate(45deg);"
-                                                            >
-                                                                ${text}
-                                                            </div>
-                                                            <svg xmlns="http://www.w3.org/2000/svg" width="63" height="66" viewBox="0 0 63 66" fill="none">
-                                                                <g filter="url(#filter0_d_14378_119247)">
-                                                                    <path d="M35.1177 0H4L62 58V26.8823L35.1177 0Z" fill="${color}" />
-                                                                </g>
-                                                                <defs>
-                                                                    <filter
-                                                                        id="filter0_d_14378_119247"
-                                                                        x="0"
-                                                                        y="0"
-                                                                        width="66"
-                                                                        height="66"
-                                                                        filterUnits="userSpaceOnUse"
-                                                                        color-interpolation-filters="sRGB"
-                                                                    >
-                                                                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-                                                                        <feOffset dy="4" />
-                                                                        <feGaussianBlur stdDeviation="2" />
-                                                                        <feComposite in2="hardAlpha" operator="out" />
-                                                                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-                                                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14378_119247" />
-                                                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14378_119247" result="shape" />
-                                                                    </filter>
-                                                                </defs>
-                                                            </svg>
-                                                        </div>
-                                                    `;
+                              >
+                                ${text}
+                              </div>
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="63"
+                                height="66"
+                                viewBox="0 0 63 66"
+                                fill="none"
+                              >
+                                <g filter="url(#filter0_d_14378_119247)">
+                                  <path d="M35.1177 0H4L62 58V26.8823L35.1177 0Z" fill="${color}" />
+                                </g>
+                                <defs>
+                                  <filter
+                                    id="filter0_d_14378_119247"
+                                    x="0"
+                                    y="0"
+                                    width="66"
+                                    height="66"
+                                    filterUnits="userSpaceOnUse"
+                                    color-interpolation-filters="sRGB"
+                                  >
+                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                                    <feColorMatrix
+                                      in="SourceAlpha"
+                                      type="matrix"
+                                      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                                      result="hardAlpha"
+                                    />
+                                    <feOffset dy="4" />
+                                    <feGaussianBlur stdDeviation="2" />
+                                    <feComposite in2="hardAlpha" operator="out" />
+                                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+                                    <feBlend
+                                      mode="normal"
+                                      in2="BackgroundImageFix"
+                                      result="effect1_dropShadow_14378_119247"
+                                    />
+                                    <feBlend
+                                      mode="normal"
+                                      in="SourceGraphic"
+                                      in2="effect1_dropShadow_14378_119247"
+                                      result="shape"
+                                    />
+                                  </filter>
+                                </defs>
+                              </svg>
+                            </div>
+                          `;
                                                 }
                                                 default: {
                                                     return html `
-                                                        <div style="display: inline-block;position: relative;min-height:79px;">
-                                                            <div
-                                                                style="position: absolute;right: 13px;bottom: 16px;font-size: 10px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data
+                            <div style="display: inline-block;position: relative;min-height:79px;">
+                              <div
+                                style="position: absolute;right: 13px;bottom: 16px;font-size: ${vm.data.data
+                                                        .text_size}px;font-weight: 400;letter-spacing: 0.4px;color: ${vm.data.data
                                                         .text_color};transform: rotate(-45deg);"
-                                                            >
-                                                                ${text}
-                                                            </div>
-                                                            <svg xmlns="http://www.w3.org/2000/svg" width="79" height="79" viewBox="0 0 58 58" fill="none">
-                                                                <g filter="url(#filter0_d_14378_119257)">
-                                                                    <path d="M35.1177 58H4L62 0V31.1177L35.1177 58Z" fill="${color}" />
-                                                                </g>
-                                                                <defs>
-                                                                    <filter
-                                                                        id="filter0_d_14378_119257"
-                                                                        x="0"
-                                                                        y="0"
-                                                                        width="66"
-                                                                        height="66"
-                                                                        filterUnits="userSpaceOnUse"
-                                                                        color-interpolation-filters="sRGB"
-                                                                    >
-                                                                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-                                                                        <feOffset dy="4" />
-                                                                        <feGaussianBlur stdDeviation="2" />
-                                                                        <feComposite in2="hardAlpha" operator="out" />
-                                                                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-                                                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14378_119257" />
-                                                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14378_119257" result="shape" />
-                                                                    </filter>
-                                                                </defs>
-                                                            </svg>
-                                                        </div>
-                                                    `;
+                              >
+                                ${text}
+                              </div>
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="79"
+                                height="79"
+                                viewBox="0 0 58 58"
+                                fill="none"
+                              >
+                                <g filter="url(#filter0_d_14378_119257)">
+                                  <path d="M35.1177 58H4L62 0V31.1177L35.1177 58Z" fill="${color}" />
+                                </g>
+                                <defs>
+                                  <filter
+                                    id="filter0_d_14378_119257"
+                                    x="0"
+                                    y="0"
+                                    width="66"
+                                    height="66"
+                                    filterUnits="userSpaceOnUse"
+                                    color-interpolation-filters="sRGB"
+                                  >
+                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                                    <feColorMatrix
+                                      in="SourceAlpha"
+                                      type="matrix"
+                                      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                                      result="hardAlpha"
+                                    />
+                                    <feOffset dy="4" />
+                                    <feGaussianBlur stdDeviation="2" />
+                                    <feComposite in2="hardAlpha" operator="out" />
+                                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+                                    <feBlend
+                                      mode="normal"
+                                      in2="BackgroundImageFix"
+                                      result="effect1_dropShadow_14378_119257"
+                                    />
+                                    <feBlend
+                                      mode="normal"
+                                      in="SourceGraphic"
+                                      in2="effect1_dropShadow_14378_119257"
+                                      result="shape"
+                                    />
+                                  </filter>
+                                </defs>
+                              </svg>
+                            </div>
+                          `;
                                                 }
                                             }
                                         })(),
                                     },
                                 ];
-                                const labelHTML = (_d = shapeArray.find((shape) => {
+                                const labelHTML = (_d = shapeArray.find(shape => {
                                     return shape.title == vm.data.data.shape;
                                 })) === null || _d === void 0 ? void 0 : _d.shape;
                                 vm.data.data.content = labelHTML !== null && labelHTML !== void 0 ? labelHTML : '';
                                 return html `
-                                    <div
-                                        class="w-100 w-lg-50"
-                                        style="display: flex;height: 270px;justify-content: center;align-items: center;align-self: stretch;border-radius: 10px;border: 1px solid #DDD;"
-                                    >
-                                        <div class="d-flex flex-wrap" style="height: 178px;width: 178px;">
-                                            ${position
+                  <div
+                    class="w-100 w-lg-50"
+                    style="display: flex;height: 270px;justify-content: center;align-items: center;align-self: stretch;border-radius: 10px;border: 1px solid #DDD;"
+                  >
+                    <div class="d-flex flex-wrap" style="height: 178px;width: 178px;">
+                      ${position
                                     .map((data, index) => {
                                     if (vm.data.data.position == data) {
                                         return html `
-                                                            <div
-                                                                class="d-flex align-items-center justify-content-center"
-                                                                style="width: 89px;height: 89px;border: 1px solid rgba(205, 205, 205, 0.87);background: #393939;color: #FFF;font-size: 16px;font-weight: 400;"
-                                                            >
-                                                                ${data}
-                                                            </div>
-                                                        `;
+                              <div
+                                class="d-flex align-items-center justify-content-center"
+                                style="width: 89px;height: 89px;border: 1px solid rgba(205, 205, 205, 0.87);background: #393939;color: #FFF;font-size: 16px;font-weight: 400;"
+                              >
+                                ${data}
+                              </div>
+                            `;
                                     }
                                     return html `
-                                                        <div
-                                                            
-                                                            style="width: 89px;height: 89px;border: 1px solid rgba(205, 205, 205, 0.87);background: #EAEAEA;"
-                                                            onclick="${gvc.event(() => {
+                            <div
+                              style="width: 89px;height: 89px;border: 1px solid rgba(205, 205, 205, 0.87);background: #EAEAEA;"
+                              onclick="${gvc.event(() => {
                                         vm.data.data.position = data;
                                         gvc.notifyDataChange('drawPreview');
                                     })}"
-                                                        ></div>
-                                                    `;
+                            ></div>
+                          `;
                                 })
                                     .join('')}
-                                        </div>
-                                    </div>
-                                    <div
-                                        class="w-100 w-lg-50"
-                                        style="display: flex;padding: 14px 114px 13.713px 113px;justify-content: center;align-items: center;align-self: stretch;border-radius: 10px;border: 1px solid #DDD;"
-                                    >
-                                        <div
-                                            
-                                            style="padding: 11.67px;border-radius: 2px;border: 1px solid #DDD;background: #FFF;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;gap: 8px;"
-                                        >
-                                            <div
-                                                class="d-flex flex-column align-items-center position-relative"
-                                                style="width:178px;height: 178px;padding-top: 10px;border-radius: 2px;background-image: url('https://d3jnmi1tfjgtti.cloudfront.net/file/122538856/size1440_s*px$_sdsfs9sbs5ses7sb_Frame127.png')"
-                                            >
-                                                <div
-                                                    style="position:absolute;${vm.data.data.position == '左上' || vm.data.data.position == '左下' ? 'left' : 'right'}: 0;${vm.data.data.position ==
-                                    '左上' || vm.data.data.position == '右上'
+                    </div>
+                  </div>
+                  <div
+                    class="w-100 w-lg-50"
+                    style="display: flex;padding: 14px 114px 13.713px 113px;justify-content: center;align-items: center;align-self: stretch;border-radius: 10px;border: 1px solid #DDD;"
+                  >
+                    <div
+                      style="padding: 11.67px;border-radius: 2px;border: 1px solid #DDD;background: #FFF;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;gap: 8px;"
+                    >
+                      <div
+                        class="d-flex flex-column align-items-center position-relative"
+                        style="width:178px;height: 178px;padding-top: 10px;border-radius: 2px;background-image: url('https://d3jnmi1tfjgtti.cloudfront.net/file/122538856/size1440_s*px$_sdsfs9sbs5ses7sb_Frame127.png')"
+                      >
+                        <div
+                          style="position:absolute;${vm.data.data.position == '左上' || vm.data.data.position == '左下'
+                                    ? 'left'
+                                    : 'right'}: 0;${vm.data.data.position == '左上' || vm.data.data.position == '右上'
                                     ? 'top'
                                     : 'bottom'}: 0;z-index:2;"
-                                                >
-                                                    ${labelHTML}
-                                                </div>
-                                                <div
-                                                    style="position: absolute;top: 9.75px;right: 9.94px;;display: flex;width: 25.285px;height: 25.285px;padding: 7.779px 7.778px 7.781px 7.782px;justify-content: center;align-items: center;flex-shrink: 0;border-radius: 58.351px;background: #FFF;box-shadow: 3.89px 1.945px 9.725px 0px rgba(0, 0, 0, 0.15);"
-                                                >
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11" fill="none">
-                                                        <g clip-path="url(#clip0_14130_223540)">
-                                                            <path
-                                                                d="M5.07214 9.6716L5.02465 9.62791L1.69683 6.53753C1.11371 5.99618 0.783203 5.23641 0.783203 4.44054V4.37786C0.783203 3.04066 1.73292 1.8934 3.04733 1.64267C3.79571 1.49831 4.56119 1.67116 5.17091 2.10043C5.34186 2.222 5.50141 2.36256 5.64577 2.52401C5.72554 2.43284 5.81102 2.34926 5.90219 2.27138C5.97247 2.2106 6.04465 2.15362 6.12063 2.10043C6.73035 1.67116 7.49582 1.49831 8.2442 1.64077C9.55861 1.8915 10.5083 3.04066 10.5083 4.37786V4.44054C10.5083 5.23641 10.1778 5.99618 9.5947 6.53753L6.26688 9.62791L6.2194 9.6716C6.06364 9.81596 5.8585 9.89763 5.64577 9.89763C5.43303 9.89763 5.22789 9.81786 5.07214 9.6716ZM5.32476 3.53261C5.31716 3.52691 5.31147 3.51932 5.30577 3.51172L4.96767 3.13183L4.96577 3.12993C4.527 2.63798 3.86409 2.41384 3.21828 2.53731C2.33315 2.70636 1.69493 3.47753 1.69493 4.37786V4.44054C1.69493 4.98188 1.92097 5.50043 2.31795 5.86892L5.64577 8.95931L8.97359 5.86892C9.37057 5.50043 9.5966 4.98188 9.5966 4.44054V4.37786C9.5966 3.47943 8.95839 2.70636 8.07515 2.53731C7.42934 2.41384 6.76454 2.63988 6.32767 3.12993C6.32767 3.12993 6.32767 3.12993 6.32577 3.13183C6.32387 3.13373 6.32577 3.13183 6.32387 3.13373L5.98577 3.51362C5.98007 3.52122 5.97247 3.52691 5.96677 3.53451C5.8813 3.61999 5.76543 3.66747 5.64577 3.66747C5.5261 3.66747 5.41024 3.61999 5.32476 3.53451V3.53261Z"
-                                                                fill="#393939"
-                                                            />
-                                                        </g>
-                                                        <defs>
-                                                            <clipPath id="clip0_14130_223540">
-                                                                <rect width="9.72513" height="9.72513" fill="white" transform="translate(0.782227 0.779297)" />
-                                                            </clipPath>
-                                                        </defs>
-                                                    </svg>
-                                                </div>
-                                            </div>
-                                            <div style="display: flex;flex-direction: column;gap: 5.835px;color:#393939;font-size: 9.725px;font-weight: 400;letter-spacing: 0.389px;">
-                                                <div >商品名稱</div>
-                                                <div >NT.$ 99</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                `;
+                        >
+                          ${labelHTML}
+                        </div>
+                        <div
+                          style="position: absolute;top: 9.75px;right: 9.94px;;display: flex;width: 25.285px;height: 25.285px;padding: 7.779px 7.778px 7.781px 7.782px;justify-content: center;align-items: center;flex-shrink: 0;border-radius: 58.351px;background: #FFF;box-shadow: 3.89px 1.945px 9.725px 0px rgba(0, 0, 0, 0.15);"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="11"
+                            height="11"
+                            viewBox="0 0 11 11"
+                            fill="none"
+                          >
+                            <g clip-path="url(#clip0_14130_223540)">
+                              <path
+                                d="M5.07214 9.6716L5.02465 9.62791L1.69683 6.53753C1.11371 5.99618 0.783203 5.23641 0.783203 4.44054V4.37786C0.783203 3.04066 1.73292 1.8934 3.04733 1.64267C3.79571 1.49831 4.56119 1.67116 5.17091 2.10043C5.34186 2.222 5.50141 2.36256 5.64577 2.52401C5.72554 2.43284 5.81102 2.34926 5.90219 2.27138C5.97247 2.2106 6.04465 2.15362 6.12063 2.10043C6.73035 1.67116 7.49582 1.49831 8.2442 1.64077C9.55861 1.8915 10.5083 3.04066 10.5083 4.37786V4.44054C10.5083 5.23641 10.1778 5.99618 9.5947 6.53753L6.26688 9.62791L6.2194 9.6716C6.06364 9.81596 5.8585 9.89763 5.64577 9.89763C5.43303 9.89763 5.22789 9.81786 5.07214 9.6716ZM5.32476 3.53261C5.31716 3.52691 5.31147 3.51932 5.30577 3.51172L4.96767 3.13183L4.96577 3.12993C4.527 2.63798 3.86409 2.41384 3.21828 2.53731C2.33315 2.70636 1.69493 3.47753 1.69493 4.37786V4.44054C1.69493 4.98188 1.92097 5.50043 2.31795 5.86892L5.64577 8.95931L8.97359 5.86892C9.37057 5.50043 9.5966 4.98188 9.5966 4.44054V4.37786C9.5966 3.47943 8.95839 2.70636 8.07515 2.53731C7.42934 2.41384 6.76454 2.63988 6.32767 3.12993C6.32767 3.12993 6.32767 3.12993 6.32577 3.13183C6.32387 3.13373 6.32577 3.13183 6.32387 3.13373L5.98577 3.51362C5.98007 3.52122 5.97247 3.52691 5.96677 3.53451C5.8813 3.61999 5.76543 3.66747 5.64577 3.66747C5.5261 3.66747 5.41024 3.61999 5.32476 3.53451V3.53261Z"
+                                fill="#393939"
+                              />
+                            </g>
+                            <defs>
+                              <clipPath id="clip0_14130_223540">
+                                <rect
+                                  width="9.72513"
+                                  height="9.72513"
+                                  fill="white"
+                                  transform="translate(0.782227 0.779297)"
+                                />
+                              </clipPath>
+                            </defs>
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        style="display: flex;flex-direction: column;gap: 5.835px;color:#393939;font-size: 9.725px;font-weight: 400;letter-spacing: 0.389px;"
+                      >
+                        <div>商品名稱</div>
+                        <div>NT.$ 99</div>
+                      </div>
+                    </div>
+                  </div>
+                `;
+                            },
+                            divCreate: {
+                                style: `display: flex;align-items: flex-start;gap: 18px;align-self: stretch;`,
+                                class: `flex-column flex-lg-row`,
+                            },
+                        });
+                    }
+                    function drawInput(type, title, key) {
+                        const id = gvc.glitter.getUUID();
+                        const inputClass = gvc.glitter.getUUID();
+                        return gvc.bindView({
+                            bind: id,
+                            view: () => {
+                                var _a;
+                                vm.data.data['text_size'] = (_a = vm.data.data['text_size']) !== null && _a !== void 0 ? _a : '10';
+                                return html `
+                  <div style="font-size: 16px;font-style: normal;font-weight: 400;color:#393939;">${title}</div>
+                  <div
+                    class="d-flex "
+                    style="padding: 12px 10px;gap: 10px;border-radius: 7px;border: 1px solid #DDD;"
+                    onclick="${gvc.event(() => {
+                                    document.querySelector(`.${inputClass}`).click();
+                                })}"
+                  >
+                    <input
+                      class="${inputClass} border-0"
+                      value="${vm.data.data[key]}"
+                      type="number"
+                      onchange="${gvc.event(e => {
+                                    vm.data.data[key] = e.value;
+                                    gvc.notifyDataChange([id, 'drawPreview']);
+                                })}"
+                    />
+                  </div>
+                `;
+                            },
+                            divCreate: {
+                                class: 'd-flex flex-column',
+                                style: 'gap:8px;',
                             },
-                            divCreate: { style: `display: flex;align-items: flex-start;gap: 18px;align-self: stretch;`, class: `flex-column flex-lg-row` },
                         });
                     }
                     return BgWidget.container([
                         html ` <div class="title-container">
-                                ${BgWidget.goBack(gvc.event(() => {
+                ${BgWidget.goBack(gvc.event(() => {
                             vm.type = 'list';
                         }))}
-                                ${BgWidget.title(vm.data.title || '新增商品促銷標籤')}
-                                <div class="flex-fill"></div>
-                            </div>`,
+                ${BgWidget.title(vm.data.title || '新增商品促銷標籤')}
+                <div class="flex-fill"></div>
+              </div>`,
                         BgWidget.container([
                             BgWidget.mainCard(BgWidget.editeInput({
                                 gvc: gvc,
                                 title: '標籤文字',
                                 default: (_a = vm.data.title) !== null && _a !== void 0 ? _a : '',
                                 placeHolder: '請輸入標籤文字',
-                                callback: (text) => {
+                                callback: text => {
                                     vm.data.title = text;
                                     gvc.notifyDataChange('drawPreview');
                                 },
                             })),
                             BgWidget.mainCard(html `
-                                            <div class="d-flex flex-column" style="gap: 18px;">
-                                                ${BgWidget.title('標籤樣式')} ${drawColorInput('標籤顏色', 'label_color')} ${drawColorInput('文字顏色', 'text_color')} ${drawShapeInput('標籤形狀')}
-                                            </div>
-                                        `),
-                            BgWidget.mainCard(html ` <div class="d-flex flex-column" style="gap: 18px;">${BgWidget.title('標籤位置')} ${drawPreview()}</div> `),
+                    <div class="d-flex flex-column" style="gap: 18px;">
+                      ${BgWidget.title('標籤樣式')} ${drawColorInput('標籤顏色', 'label_color')}
+                      ${drawColorInput('文字顏色', 'text_color')} ${drawInput('number', '文字大小', 'text_size')}
+                      ${drawShapeInput('標籤形狀')}
+                    </div>
+                  `),
+                            BgWidget.mainCard(html `
+                    <div class="d-flex flex-column" style="gap: 18px;">
+                      ${BgWidget.title('標籤位置')} ${drawPreview()}
+                    </div>
+                  `),
                         ].join(BgWidget.mbContainer(12))),
                         BgWidget.mbContainer(240),
                         html ` <div class="update-bar-container">
-                                ${vm.data.id.length === 0
+                ${vm.data.id.length === 0
                             ? ''
                             : BgWidget.danger(gvc.event(() => {
                                 dialog.checkYesOrNot({
                                     text: '確認要刪除此標籤？',
-                                    callback: (bool) => {
+                                    callback: bool => {
                                         if (bool) {
                                             vm.labelList = vm.labelList.filter((item) => vm.data.id !== item.id);
                                             ApiUser.setPublicConfig({
                                                 key: 'promo-label',
                                                 user_id: 'manager',
                                                 value: vm.labelList,
-                                            }).then((result) => {
+                                            }).then(result => {
                                                 if (!result.response.result) {
                                                     dialog.errorMessage({ text: '設定失敗' });
                                                 }
@@ -1200,10 +1543,10 @@ export class ProductText {
                                     },
                                 });
                             }))}
-                                ${BgWidget.cancel(gvc.event(() => {
+                ${BgWidget.cancel(gvc.event(() => {
                             vm.type = 'list';
                         }))}
-                                ${BgWidget.save(gvc.event(() => {
+                ${BgWidget.save(gvc.event(() => {
                             vm.data.updated_time = glitter.ut.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss');
                             if (vm.data.id.length === 0) {
                                 vm.data.id = Tool.randomString(10);
@@ -1217,7 +1560,7 @@ export class ProductText {
                                 key: 'promo-label',
                                 user_id: 'manager',
                                 value: vm.labelList,
-                            }).then((result) => {
+                            }).then(result => {
                                 dialog.dataLoading({ visible: false });
                                 if (result.response.result) {
                                     dialog.successMessage({ text: '設定成功' });
@@ -1230,7 +1573,7 @@ export class ProductText {
                                 }
                             });
                         }))}
-                            </div>`,
+              </div>`,
                     ].join(''));
                 }
                 return BgWidget.container(BgWidget.mainCard(html ` <div>tag_edit</div>`));