ts-glitter 20.7.3 → 20.7.5

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

@@ -35,6 +35,7 @@ type TData = {
   title?: string;
   value: string;
   stopClick?: boolean;
+  tooltip?: string;
 };
 
 type TableV3 = {
@@ -223,14 +224,14 @@ export class BgWidget {
   }
 
   static disableButton(text: string, obj?: { icon?: string; textStyle?: string }) {
-    return html` <button class="btn btn-gray-disable" style="" type="button">
+    return html` <button class="btn btn-gray-disable" type="button">
       <i class="${obj && obj.icon && obj.icon.length > 0 ? obj.icon : 'd-none'}" style="color: #393939"></i>
       ${text.length > 0 ? html`<span class="tx_700" style="${obj?.textStyle ?? ''}">${text}</span>` : ''}
     </button>`;
   }
 
   static grayButton(text: string, event: string, obj?: { icon?: string; textStyle?: string; class?: string }) {
-    return html` <button class="btn btn-gray ${obj?.class || ''}" style="" type="button" onclick="${event}">
+    return html` <button class="btn btn-gray ${obj?.class || ''}" type="button" onclick="${event}">
       <i class="${obj && obj.icon && obj.icon.length > 0 ? obj.icon : 'd-none'}" style="color: #393939"></i>
       ${text.length > 0 ? html`<span class="tx_700" style="${obj?.textStyle ?? ''}">${text}</span>` : ''}
     </button>`;
@@ -352,7 +353,6 @@ export class BgWidget {
       ></i>
       <div class="w-100 d-none" style="position: absolute;left: 0;top: 100%;z-index:2;">
         <div
-          class=""
           style="height: 100vh;width: 100vw;position: fixed;left: 0;top: 0;z-index:3;"
           onclick="${gvc.event(e => {
             if (e.parentElement) {
@@ -473,6 +473,41 @@ export class BgWidget {
   }
 
   // 標籤
+  static richTextQuickList = [
+    {
+      title: '商家名稱',
+      value: '@{{app_name}}',
+    },
+    {
+      title: '訂單號碼',
+      value: '@{{訂單號碼}}',
+    },
+    {
+      title: '會員姓名',
+      value: '@{{user_name}}',
+    },
+    {
+      title: '訂單金額',
+      value: '@{{訂單金額}}',
+    },
+    {
+      title: '姓名',
+      value: '@{{姓名}}',
+    },
+    {
+      title: '電話',
+      value: '@{{電話}}',
+    },
+    {
+      title: '地址',
+      value: '@{{地址}}',
+    },
+    {
+      title: '信箱',
+      value: '@{{信箱}}',
+    },
+  ];
+
   static insignia(className: string, text: string, args: { type: 'fill' | 'border'; size: 'sm' | 'md' }) {
     const typeMap = {
       border: `insignia-border insignia-${className}-border`,
@@ -668,67 +703,48 @@ export class BgWidget {
           gvc.notifyDataChange('editDialog');
         };
         reload();
-        return `<div class="${vm.edit_mode ? `m-n3` : `m-n2`}">${gvc.bindView({
-          bind: 'editDialog',
-          view: async () => {
-            reload = () => {
-              gvc.recreateView();
-            };
-            return html`
-              <div class="d-flex flex-column" style="left: 0;top:0;background-color: white;z-index:1;">
-                ${BgWidget.tableV3({
-                  gvc: gvc,
-                  getData: vmi => {
-                    if (!vm.loading) {
-                      function getDatalist() {
-                        return vm.language_list.label.map((dd: any) => {
-                          return [
-                            vm.edit_mode
-                              ? undefined
-                              : {
-                                  key: '',
-                                  value: html`
-                                    <div
-                                      class="w-100"
-                                      style="justify-content: center; align-items: center; gap: 4px; display: flex;color: #3366BB;cursor: pointer;"
-                                      data-bs-toggle="dropdown"
-                                      aria-haspopup="true"
-                                      aria-expanded="false"
-                                      onclick="${gvc.event(() => {
-                                        obj.callback!(dd.tag);
-                                        gvc.closeDialog();
-                                      })}"
-                                    >
+        return html`<div class="${vm.edit_mode ? `m-n3` : `m-n2`}">
+          ${gvc.bindView({
+            bind: 'editDialog',
+            view: async () => {
+              reload = () => {
+                gvc.recreateView();
+              };
+              return html`
+                <div class="d-flex flex-column" style="left: 0;top:0;background-color: white;z-index:1;">
+                  ${BgWidget.tableV3({
+                    gvc: gvc,
+                    getData: vmi => {
+                      if (!vm.loading) {
+                        function getDatalist() {
+                          return vm.language_list.label.map((dd: any) => {
+                            return [
+                              vm.edit_mode
+                                ? undefined
+                                : {
+                                    key: '',
+                                    value: html`
                                       <div
-                                        style="font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
+                                        class="w-100"
+                                        style="justify-content: center; align-items: center; gap: 4px; display: flex;color: #3366BB;cursor: pointer;"
+                                        data-bs-toggle="dropdown"
+                                        aria-haspopup="true"
+                                        aria-expanded="false"
+                                        onclick="${gvc.event(() => {
+                                          obj.callback!(dd.tag);
+                                          gvc.closeDialog();
+                                        })}"
                                       >
-                                        選擇
+                                        <div
+                                          style="font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
+                                        >
+                                          選擇
+                                        </div>
                                       </div>
-                                    </div>
-                                  `,
-                                },
-                            {
-                              key: '標籤',
-                              value: html` <div
-                                class="d-flex flex-shrink-0"
-                                style="width:${elementLength}px;font-size: 16px;font-style: normal;font-weight: 700;"
-                              >
-                                ${BgWidget.editeInput({
-                                  gvc: gvc,
-                                  title: ``,
-                                  placeHolder: '請輸入標籤',
-                                  callback: text => {
-                                    dd.tag = text;
+                                    `,
                                   },
-                                  type: 'text',
-                                  default: dd.tag || '',
-                                  readonly: !vm.edit_mode,
-                                })}
-                              </div>`,
-                            },
-                            ...Language.languageSupport().map(d1 => {
-                              return {
-                                key: d1.value,
+                              {
+                                key: '標籤',
                                 value: html` <div
                                   class="d-flex flex-shrink-0"
                                   style="width:${elementLength}px;font-size: 16px;font-style: normal;font-weight: 700;"
@@ -736,59 +752,78 @@ export class BgWidget {
                                   ${BgWidget.editeInput({
                                     gvc: gvc,
                                     title: ``,
-                                    placeHolder: '請輸入內文',
+                                    placeHolder: '請輸入標籤',
                                     callback: text => {
-                                      dd[d1.key] = text;
+                                      dd.tag = text;
                                     },
                                     type: 'text',
-                                    default: dd[d1.key] || '',
+                                    default: dd.tag || '',
                                     readonly: !vm.edit_mode,
                                   })}
                                 </div>`,
-                              };
-                            }),
-                          ].filter(dd => {
-                            return dd;
-                          });
-                        });
-                      }
-
-                      vmi.pageSize = 1;
-                      vmi.originalData = vm.language_list.label;
-                      vmi.tableData = getDatalist();
-                      vmi.loading = vm.loading;
-                      vmi.callback();
-                    }
-                  },
-                  rowClick: (data, index) => {},
-                  filter: vm.edit_mode
-                    ? [
-                        {
-                          name: '批量移除',
-                          event: () => {
-                            const dialog = new ShareDialog(gvc.glitter);
-                            dialog.checkYesOrNot({
-                              text: '是否確認刪除所選項目？',
-                              callback: response => {
-                                if (response) {
-                                  vm.language_list.label = vm.language_list.label.filter((dd: any) => {
-                                    return !dd.checked;
-                                  });
-                                  save();
-                                }
                               },
+                              ...Language.languageSupport().map(d1 => {
+                                return {
+                                  key: d1.value,
+                                  value: html` <div
+                                    class="d-flex flex-shrink-0"
+                                    style="width:${elementLength}px;font-size: 16px;font-style: normal;font-weight: 700;"
+                                  >
+                                    ${BgWidget.editeInput({
+                                      gvc: gvc,
+                                      title: ``,
+                                      placeHolder: '請輸入內文',
+                                      callback: text => {
+                                        dd[d1.key] = text;
+                                      },
+                                      type: 'text',
+                                      default: dd[d1.key] || '',
+                                      readonly: !vm.edit_mode,
+                                    })}
+                                  </div>`,
+                                };
+                              }),
+                            ].filter(dd => {
+                              return dd;
                             });
+                          });
+                        }
+
+                        vmi.pageSize = 1;
+                        vmi.originalData = vm.language_list.label;
+                        vmi.tableData = getDatalist();
+                        vmi.loading = vm.loading;
+                        vmi.callback();
+                      }
+                    },
+                    rowClick: (data, index) => {},
+                    filter: vm.edit_mode
+                      ? [
+                          {
+                            name: '批量移除',
+                            event: () => {
+                              const dialog = new ShareDialog(gvc.glitter);
+                              dialog.checkYesOrNot({
+                                text: '是否確認刪除所選項目？',
+                                callback: response => {
+                                  if (response) {
+                                    vm.language_list.label = vm.language_list.label.filter((dd: any) => {
+                                      return !dd.checked;
+                                    });
+                                    save();
+                                  }
+                                },
+                              });
+                            },
                           },
-                        },
-                      ]
-                    : [],
-                })}
-              </div>
-            `;
-          },
-          divCreate: {},
-          onCreate: () => {},
-        })}</div>`;
+                        ]
+                      : [],
+                  })}
+                </div>
+              `;
+            },
+          })}
+        </div>`;
       },
       footer_html: (gvc: GVC) => {
         if (vm.edit_mode) {
@@ -1116,13 +1151,20 @@ ${obj.default ?? ''}</textarea
 
     // 新增 elementClass style
     obj.gvc.addStyle(`
-            #${dropMenu.elementClass} {
-                font-size: 14px;
-                margin-top: 8px;
-                white-space: normal;
-                word-break: break-all;
-            }
-        `);
+      #${dropMenu.elementClass} {
+        font-size: 14px;
+        margin-top: 8px;
+        white-space: normal;
+        word-break: break-all;
+      }
+      .tag-icon-bgr {
+        width: 25px;
+        height: 25px;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+    `);
 
     return obj.gvc.bindView({
       bind: vm.id,
@@ -1139,7 +1181,9 @@ ${obj.default ?? ''}</textarea
                   if (linkComp.loading) {
                     return html` <div
                       class="bgw-input border rounded-3"
-                      style="${linkComp.text.length > 0 ? '' : 'padding: 9.5px 12px;'} ${obj.style ?? ''}"
+                      style="${linkComp.text.length > 0
+                        ? 'padding: 8px 18px; height: 41.75px'
+                        : 'padding: 9.5px 12px;'} ${obj.style ?? ''}"
                       id="${dropMenu.elementClass}"
                       onclick="${obj.gvc.event(() => {
                         componentFresh();
@@ -1185,122 +1229,171 @@ ${obj.default ?? ''}</textarea
                     `;
                   }
                 },
-                divCreate: {},
-                onCreate: () => {},
               })}
               ${obj.gvc.bindView({
                 bind: dropMenu.id,
-                view: () => {
+                view: async () => {
                   if (dropMenu.loading) {
                     return '';
                   } else {
-                    let h1 = '';
-                    if (dropMenu.prevList.length > 0) {
-                      h1 += html` <div
-                          class="m-3 cursor_pointer"
-                          style="font-size: 16px; font-weight: 500; gap: 6px; line-height: 140%;"
-                          onclick=${obj.gvc.event(() => {
-                            dataList = dropMenu.prevList[dropMenu.prevList.length - 1];
-                            dropMenu.prevList.pop();
-                            dropMenu.recentParent.pop();
-                            dropMenu.search = '';
-                            obj.gvc.notifyDataChange(dropMenu.id);
-                          })}
-                        >
-                          <i class="fa-solid fa-chevron-left me-2 hoverF2"></i>
-                          <span>${dropMenu.recentParent[dropMenu.recentParent.length - 1]}</span>
-                        </div>
-                        <input
-                          class="form-control m-2"
-                          style="width: 92%"
-                          type="text"
-                          placeholder="搜尋"
-                          onchange="${obj.gvc.event(e => {
-                            dropMenu.search = e.value;
-                            obj.gvc.notifyDataChange(dropMenu.id);
-                          })}"
-                          oninput="${obj.gvc.event(e => {
-                            if (obj.pattern) {
-                              const value = e.value;
-                              const regex = new RegExp(`[^${obj.pattern}]`, 'g');
-                              const validValue = value.replace(regex, '');
-                              if (value !== validValue) {
-                                e.value = validValue;
-                              }
-                            }
-                          })}"
-                          value="${dropMenu.search}"
-                        />`;
+                    const barHTML =
+                      dropMenu.prevList.length > 0
+                        ? html` <div
+                              class="m-3 cursor_pointer"
+                              style="font-size: 16px; font-weight: 500; gap: 6px; line-height: 140%;"
+                              onclick=${obj.gvc.event(() => {
+                                dataList = dropMenu.prevList[dropMenu.prevList.length - 1];
+                                dropMenu.prevList.pop();
+                                dropMenu.recentParent.pop();
+                                dropMenu.search = '';
+                                obj.gvc.notifyDataChange(dropMenu.id);
+                              })}
+                            >
+                              <i class="fa-solid fa-chevron-left me-2 hoverF2"></i>
+                              <span>${dropMenu.recentParent[dropMenu.recentParent.length - 1]}</span>
+                            </div>
+                            <input
+                              class="form-control m-2"
+                              style="width: calc(100% - 16.875px)"
+                              type="text"
+                              placeholder="搜尋"
+                              onchange="${obj.gvc.event(e => {
+                                dropMenu.search = e.value;
+                                obj.gvc.notifyDataChange(dropMenu.id);
+                              })}"
+                              oninput="${obj.gvc.event(e => {
+                                if (obj.pattern) {
+                                  const value = e.value;
+                                  const regex = new RegExp(`[^${obj.pattern}]`, 'g');
+                                  const validValue = value.replace(regex, '');
+                                  if (value !== validValue) {
+                                    e.value = validValue;
+                                  }
+                                }
+                              })}"
+                              value="${dropMenu.search}"
+                            />`
+                        : '';
+
+                    function getProductHTML() {
+                      return BgWidget.tableV3({
+                        gvc: obj.gvc,
+                        getData: vmi => {
+                          const limit = 10;
+
+                          ApiShop.getProduct({
+                            page: vmi.page - 1,
+                            limit: limit,
+                            search: dropMenu.search.trim(),
+                            searchType: 'title',
+                            status: 'inRange',
+                          }).then(data => {
+                            dataList = (data.response.data || []).map((item: any) => {
+                              const { id, title, preview_image } = item.content;
+                              const icon = preview_image && preview_image[0] ? preview_image[0] : '';
+
+                              return {
+                                name: title,
+                                icon: icon,
+                                link: `/products?product_id=${id}`,
+                              };
+                            });
+
+                            vmi.tableData = dataList.map(item => {
+                              return [
+                                {
+                                  key: '商品名稱',
+                                  value: html` <div class="d-flex align-items-center" style="line-height: 32px;">
+                                    ${BgWidget.validImageBox({
+                                      gvc: obj.gvc,
+                                      image: item.icon,
+                                      width: 32,
+                                      class: 'rounded border me-2',
+                                    })}
+                                    <div class="d-flex flex-column">
+                                      <div>${Tool.truncateString(item.name)}</div>
+                                    </div>
+                                  </div>`,
+                                },
+                              ];
+                            });
+
+                            vmi.pageSize = Math.ceil(data.response.total / limit);
+                            vmi.originalData = data.response.data;
+                            vmi.loading = false;
+                            vmi.callback();
+                          });
+                        },
+                        rowClick: (_, index) => {
+                          callbackEvent(dataList[index]);
+                        },
+                        filter: [],
+                      });
                     }
-                    let h2 = '';
-                    dataList
-                      .filter(tag => {
-                        return tag.name.includes(dropMenu.search);
-                      })
-                      .map(tag => {
-                        h2 += html`
-                          <div
-                            class="m-2"
-                            style="cursor:pointer;display: flex; align-items: center; justify-content: space-between;"
-                          >
+
+                    function getDataListHTML() {
+                      return dataList
+                        .filter(tag => {
+                          return tag.name.includes(dropMenu.search);
+                        })
+                        .map(tag => {
+                          return html`
                             <div
-                              class="w-100 p-1 link-item-container hoverF2 cursor_pointer text-wrap"
-                              onclick=${obj.gvc.event(() => {
-                                if (tag.link && tag.link.length > 0 && !tag.ignoreFirst) {
-                                  callbackEvent(tag);
-                                } else {
+                              class="m-2"
+                              style="cursor:pointer;display: flex; align-items: center; justify-content: space-between;"
+                            >
+                              <div
+                                class="w-100 p-1 link-item-container hoverF2 cursor_pointer text-wrap"
+                                onclick=${obj.gvc.event(() => {
+                                  if (tag.link && tag.link.length > 0 && !tag.ignoreFirst) {
+                                    callbackEvent(tag);
+                                  } else {
+                                    dropMenu.prevList.push(dataList);
+                                    dropMenu.recentParent.push(tag.name);
+                                    tag.items && (dataList = tag.items);
+                                    obj.gvc.notifyDataChange(dropMenu.id);
+                                  }
+                                })}
+                              >
+                                <div
+                                  style="min-width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;"
+                                >
+                                  ${tag.icon.includes('https://')
+                                    ? html` <div
+                                        class="tag-icon-bgr"
+                                        style="background-image: url('${tag.icon}');"
+                                      ></div>`
+                                    : html`<i class="${tag.icon.length > 0 ? tag.icon : 'fa-regular fa-image'}"></i>`}
+                                </div>
+                                ${tag.name}
+                              </div>
+                              <div
+                                class="py-1 px-3 hoverF2 ${tag.items && tag.items.length > 0 ? '' : 'd-none'}"
+                                onclick=${obj.gvc.event(() => {
                                   dropMenu.prevList.push(dataList);
                                   dropMenu.recentParent.push(tag.name);
                                   tag.items && (dataList = tag.items);
                                   obj.gvc.notifyDataChange(dropMenu.id);
-                                }
-                              })}
-                            >
-                              <div
-                                style="min-width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;"
+                                })}
                               >
-                                ${(() => {
-                                  if (tag.icon.includes('https://')) {
-                                    return html` <div
-                                      style="
-                                                                                width: 25px; height: 25px;
-                                                                                background-image: url('${tag.icon}');
-                                                                                background-position: center;
-                                                                                background-size: cover;
-                                                                                background-repeat: no-repeat;
-                                                                            "
-                                    ></div>`;
-                                  }
-                                  return html`<i
-                                    class="${tag.icon.length > 0 ? tag.icon : 'fa-regular fa-image'}"
-                                  ></i>`;
-                                })()}
+                                <i class="fa-solid fa-chevron-right cursor_pointer"></i>
                               </div>
-                              ${tag.name}
                             </div>
-                            <div
-                              class="py-1 px-3 hoverF2 ${tag.items && tag.items.length > 0 ? '' : 'd-none'}"
-                              onclick=${obj.gvc.event(() => {
-                                dropMenu.prevList.push(dataList);
-                                dropMenu.recentParent.push(tag.name);
-                                tag.items && (dataList = tag.items);
-                                obj.gvc.notifyDataChange(dropMenu.id);
-                              })}
-                            >
-                              <i class="fa-solid fa-chevron-right cursor_pointer"></i>
-                            </div>
-                          </div>
-                        `;
-                      });
+                          `;
+                        })
+                        .join('');
+                    }
+
+                    const listHTML = dropMenu.recentParent[0] === '所有商品' ? getProductHTML() : getDataListHTML();
+
                     return html`
                       <div class="border border-2 rounded-2 p-2" style="width: ${dropMenu.elementWidth}px;">
-                        ${h1}
-                        <div style="overflow-y: auto; max-height: 42.5vh;">${h2}</div>
+                        ${barHTML}
+                        <div style="overflow-y: auto; max-height: 42.5vh;">${listHTML}</div>
                       </div>
                     `;
                   }
                 },
-
                 divCreate: {
                   style: 'position: absolute; top: 44px; left: 0; z-index: 1; background-color: #fff;',
                 },
@@ -1308,7 +1401,6 @@ ${obj.default ?? ''}</textarea
             </div>`;
         }
       },
-      divCreate: {},
       onCreate: () => {
         if (vm.loading) {
           const acticleList: MenuItem[] = [];
@@ -1329,22 +1421,12 @@ ${obj.default ?? ''}</textarea
               });
             }),
             new Promise<void>(resolve => {
-              ApiShop.getProduct({ page: 0, limit: 50000, search: '' }).then((data: any) => {
-                if (data.result) {
-                  (data.response.data || []).map(
-                    (item: { content: { id: string; title: string; preview_image: string[] } }) => {
-                      const { id, title, preview_image } = item.content;
-                      const icon = preview_image && preview_image[0] ? preview_image[0] : '';
-                      productList.push({
-                        name: title,
-                        icon: icon,
-                        link: `/products?product_id=${id}`,
-                      });
-                    }
-                  );
-                  resolve();
-                }
+              productList.push({
+                name: '',
+                icon: '',
+                link: `/products?product_id=`,
               });
+              resolve();
             }),
             new Promise<void>(resolve => {
               Article.get({
@@ -1804,12 +1886,12 @@ ${obj.default ?? ''}</textarea
         divCreate: {
           class: `card`,
           style: `
-                        width: 100%;
-                        overflow: hidden;
-                        border-radius: 10px;
-                        background: #fff;
-                        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
-                    `,
+            width: 100%;
+            overflow: hidden;
+            border-radius: 10px;
+            background: #fff;
+            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
+          `,
         },
         onCreate: () => {
           if (vm.loading) {
@@ -1956,7 +2038,6 @@ ${obj.default ?? ''}</textarea
             </div>`;
           }
         },
-        divCreate: {},
         onCreate: () => {
           if (vm.loading) {
             getData();
@@ -2005,7 +2086,7 @@ ${obj.default ?? ''}</textarea
     };
 
     gvc.addStyle(`
-      .tb_v3 {
+      .tb-v3 {
         text-align: left !important;
         padding-right: 0.25rem !important;
         padding-left: 0.25rem !important;
@@ -2017,6 +2098,33 @@ ${obj.default ?? ''}</textarea
         font-size: 24px;
         font-weight: 700;
       }
+      .td-tooltip {
+        position: absolute;
+        top: -30px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: #333;
+        color: white;
+        padding: 8px 12px;
+        border-radius: 4px;
+        font-size: 14px;
+        white-space: nowrap;
+        visibility: hidden;
+        opacity: 0;
+        transition:
+          opacity 0.3s,
+          visibility 0.3s;
+      }
+      .td-tooltip::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: #333 transparent transparent transparent;
+      }
     `);
 
     return gvc.bindView(() => {
@@ -2071,6 +2179,7 @@ ${obj.default ?? ''}</textarea
               target.style.position = checked ? 'sticky' : 'relative';
               target.style.top = checked ? '0' : '';
               target.style.left = checked ? '0' : '';
+              target.style.zIndex = checked ? '1' : '';
             }
 
             // 初始化勾選框顯示
@@ -2257,7 +2366,7 @@ ${obj.default ?? ''}</textarea
                         return vm.tableData[0]
                           .map((dd, index: number) => {
                             return html` <div
-                              class="${ids.headerCell} ${ids.textClass} tb_v3 tx_700"
+                              class="${ids.headerCell} ${ids.textClass} tb-v3 tx_700"
                               style="min-width: ${widthList[index]}px;"
                             >
                               ${dd.key}
@@ -2304,7 +2413,9 @@ ${obj.default ?? ''}</textarea
                     ${vm.tableData
                       .map((dd, trIndex: number) => {
                         return html` <tr
-                          class="${trIndex === 0 ? ids.tr : ''}"
+                          class="${trIndex === 0 ? ids.tr : ''} ${dd.find(d3 => d3.tooltip)
+                            ? 'tr-tooltip-container'
+                            : ''}"
                           onclick="${gvc.event(() => {
                             obj.rowClick && obj.rowClick(dd, trIndex);
                           })}"
@@ -2326,13 +2437,21 @@ ${obj.default ?? ''}</textarea
                                 ${dd.length > 1 && tdIndex === dd.length - 1 ? 'border-radius: 0 10px 10px 0;' : ''}
                                 ${dd.length === 1 ? 'border-radius: 10px;' : ''}
                               `;
+
                               return html` <td
-                                class="${ids.textClass} ${tdClass} tb_v3 tx_normal"
+                                class="${ids.textClass} ${tdClass} tb-v3 tx_normal position-relative"
                                 style="${style}"
                                 ${obj.filter.length !== 0 && tdIndex === 0 ? `gvc-checkbox="checkbox${trIndex}"` : ''}
                                 onclick="${d3.stopClick ? gvc.event((_, event) => event.stopPropagation()) : ''}"
                               >
-                                <div class="text-nowrap" style="color: #393939 !important;">${d3.value}</div>
+                                <div
+                                  class="text-nowrap ${d3.tooltip ? 'hover-element' : ''}"
+                                  style="color: #393939 !important;"
+                                  ${d3.tooltip ? `data-tooltip="${d3.tooltip}"` : ''}
+                                >
+                                  ${d3.value}
+                                </div>
+                                ${d3.tooltip ? html`<div class="td-tooltip">${d3.tooltip}</div>` : ''}
                               </td>`;
                             })
                             .join('')}
@@ -2366,7 +2485,6 @@ ${obj.default ?? ''}</textarea
             return '';
           }
         },
-        divCreate: {},
         onCreate: () => {
           if (vm.loading) {
             setTimeout(() => obj.getData(vm));
@@ -2401,6 +2519,7 @@ ${obj.default ?? ''}</textarea
                   }
 
                   created.table = !created.table;
+
                   gvc.notifyDataChange(ids.container);
                   clearInterval(si);
                 }
@@ -2408,6 +2527,35 @@ ${obj.default ?? ''}</textarea
                   clearInterval(si);
                 }
               }, 50);
+            } else {
+              // 獲取所有工具提示容器
+              const tooltipContainers = document.querySelectorAll('.tr-tooltip-container');
+
+              // 為每個容器添加事件監聽器
+              tooltipContainers.forEach(container => {
+                const hoverElement = container.querySelector('.hover-element');
+                const tooltip = container.querySelector('.td-tooltip') as HTMLElement;
+
+                if (hoverElement && tooltip) {
+                  // 從 data-tooltip 屬性取得提示文字
+                  const tooltipText = hoverElement.getAttribute('data-tooltip');
+                  if (tooltipText) {
+                    tooltip.textContent = tooltipText;
+                  }
+
+                  // 滑鼠移入時顯示工具提示
+                  hoverElement.addEventListener('mouseenter', () => {
+                    tooltip.style.visibility = 'visible';
+                    tooltip.style.opacity = '1';
+                  });
+
+                  // 滑鼠移出時隱藏工具提示
+                  hoverElement.addEventListener('mouseleave', () => {
+                    tooltip.style.visibility = 'hidden';
+                    tooltip.style.opacity = '0';
+                  });
+                }
+              });
             }
           }
         },
@@ -2971,7 +3119,7 @@ ${obj.default ?? ''}</textarea
     >
       <div class="fs-5 mb-0"><strong>${title}</strong></div>
       ${messageList && messageList.length > 0
-        ? `<div class="mt-2" style="white-space: normal; word-break: break-all;">${h}</div>`
+        ? html`<div class="mt-2" style="white-space: normal; word-break: break-all;">${h}</div>`
         : ``}
     </div>`;
   }
@@ -3216,7 +3364,6 @@ ${obj.default ?? ''}</textarea
           </div>
         </div>`;
       },
-      divCreate: {},
       onCreate: () => {
         if (obj.openOnInit) {
           const si = setInterval(() => {
@@ -4196,7 +4343,7 @@ ${obj.default ?? ''}</textarea
               ${opt.note ? html` <div class="tx_gray_12">${opt.note}</div> ` : ''}
             </div>
           </div>
-          <div class="d-flex align-items-center" style="gap: 6px">
+          <div class="d-flex align-items-center justify-content-end" style="gap: 6px; min-width: 115px;">
             <div>庫存量</div>
             <div style="color: #393939; font-size: 24px; font-weight: 600;">${opt.stock}</div>
           </div>
@@ -4316,7 +4463,7 @@ ${obj.default ?? ''}</textarea
 
                         newOptions.forEach(option => {
                           const optionElement = document.createElement('div');
-                          optionElement.classList.add('d-flex', 'align-items-center');
+                          optionElement.classList.add('d-flex', 'align-items-center', 'justify-content-between');
                           optionElement.style.gap = '24px';
                           optionElement.innerHTML = printOptionSt(option);
                           dialogContainer.appendChild(optionElement);
@@ -4398,7 +4545,6 @@ ${obj.default ?? ''}</textarea
                 </div>
               </div>`;
             },
-            onCreate: () => {},
           })}
         </div>`;
       },
@@ -5195,7 +5341,6 @@ ${obj.default ?? ''}</textarea
           </div>`;
         }
       },
-      divCreate: {},
       onCreate: () => {
         if (imageVM.loading) {
           this.isImageUrlValid(obj.image).then(isValid => {
@@ -5271,7 +5416,6 @@ ${obj.default ?? ''}</textarea
             </div>`;
           },
           divCreate: { class: 'h-100' },
-          onCreate: () => {},
         })}
       </div>`;
     }, windowID);
@@ -5408,7 +5552,6 @@ ${obj.default ?? ''}</textarea
               return ``;
             }
           },
-          divCreate: {},
         };
       })()
     );